luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Various UI fixes (#3581)

Browse source 
* 2952 - Adding boards icon for templates
* 3574 - Updating link modal css
* 2484 - Improving table fonts
This commit is contained in:
Asaad Mahmood 2022-08-08 21:03:01 +05:00 committed by GitHub
parent d50846ed42
commit 32e584cbc5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 153 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
View file

@ -181,20 +181,28 @@ exports[`components/boardSelector renders with some results 1`] = `
<div
class="BoardSelectorItem"
>
<span
class="icon"
/>
<div
class="resultLine"
class="BoardSelectorItem-info"
>
<div
class="resultTitle"
<span
class="icon"
>
Untitled board
</div>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultDescription"
/>
class="resultLine"
>
<div
class="resultTitle"
>
Untitled board
</div>
<div
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"
@ -212,20 +220,28 @@ exports[`components/boardSelector renders with some results 1`] = `
<div
class="BoardSelectorItem"
>
<span
class="icon"
/>
<div
class="resultLine"
class="BoardSelectorItem-info"
>
<div
class="resultTitle"
<span
class="icon"
>
Untitled board
</div>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultDescription"
/>
class="resultLine"
>
<div
class="resultTitle"
>
Untitled board
</div>
<div
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"
@ -243,20 +259,28 @@ exports[`components/boardSelector renders with some results 1`] = `
<div
class="BoardSelectorItem"
>
<span
class="icon"
/>
<div
class="resultLine"
class="BoardSelectorItem-info"
>
<div
class="resultTitle"
<span
class="icon"
>
Untitled board
</div>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultDescription"
/>
class="resultLine"
>
<div
class="resultTitle"
>
Untitled board
</div>
<div
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"

84
mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap
View file

@ -5,20 +5,28 @@ exports[`components/boardSelectorItem renders board without title 1`] = `
<div
class="BoardSelectorItem"
>
<span
class="icon"
/>
<div
class="resultLine"
class="BoardSelectorItem-info"
>
<div
class="resultTitle"
<span
class="icon"
>
Untitled board
</div>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultDescription"
/>
class="resultLine"
>
<div
class="resultTitle"
>
Untitled board
</div>
<div
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"
@ -41,20 +49,28 @@ exports[`components/boardSelectorItem renders linked board 1`] = `
<div
class="BoardSelectorItem"
>
<span
class="icon"
/>
<div
class="resultLine"
class="BoardSelectorItem-info"
>
<div
class="resultTitle"
<span
class="icon"
>
Test title
</div>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultDescription"
/>
class="resultLine"
>
<div
class="resultTitle"
>
Test title
</div>
<div
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"
@ -77,20 +93,28 @@ exports[`components/boardSelectorItem renders not linked board 1`] = `
<div
class="BoardSelectorItem"
>
<span
class="icon"
/>
<div
class="resultLine"
class="BoardSelectorItem-info"
>
<div
class="resultTitle"
<span
class="icon"
>
Test title
</div>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultDescription"
/>
class="resultLine"
>
<div
class="resultTitle"
>
Test title
</div>
<div
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"

11
mattermost-plugin/webapp/src/components/boardSelectorItem.scss
View file

@ -5,10 +5,21 @@
padding: 10px 0;
margin: 0 35px;
.BoardSelectorItem-info {
display: flex;
flex: 1;
overflow: hidden;
}
.icon {
width: 18px;
align-items: flex-start;
margin-right: 10px;
i {
font-size: 20px;
}
&:empty {
display: none;
}

13
mattermost-plugin/webapp/src/components/boardSelectorItem.tsx
View file

@ -6,6 +6,7 @@ import {useIntl, FormattedMessage} from 'react-intl'
import {Board} from '../../../../webapp/src/blocks/board'
import Button from '../../../../webapp/src/widgets/buttons/button'
import CompassIcon from '../../../../webapp/src/widgets/icons/compassIcon'
import './boardSelectorItem.scss'
@ -23,10 +24,12 @@ const BoardSelectorItem = (props: Props) => {
const resultTitle = item.title || untitledBoardTitle
return (
<div className='BoardSelectorItem'>
<span className='icon'>{item.icon}</span>
<div className='resultLine'>
<div className='resultTitle'>{resultTitle}</div>
<div className='resultDescription'>{item.description}</div>
<div className='BoardSelectorItem-info'>
<span className='icon'>{item.icon || <CompassIcon icon='product-boards'/>}</span>
<div className='resultLine'>
<div className='resultTitle'>{resultTitle}</div>
<div className='resultDescription'>{item.description}</div>
</div>
</div>
<div className='linkUnlinkButton'>
{item.channelId === currentChannel &&
@ -44,7 +47,7 @@ const BoardSelectorItem = (props: Props) => {
onClick={() => props.linkBoard(item)}
emphasis='primary'
>
<FormattedMessage
<FormattedMessage
id='boardSelector.link'
defaultMessage='Link'
/>

5
webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.scss
View file

@ -20,6 +20,11 @@
.template-icon {
margin-right: 10px;
i {
font-size: 16px;
margin: 0 -5px 0 -4px;
}
}
&:hover {

11
webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.tsx
View file

@ -4,6 +4,7 @@ import React, {useCallback, useState} from 'react'
import {useIntl} from 'react-intl'
import {Board} from '../../blocks/board'
import CompassIcon from '../../widgets/icons/compassIcon'
import IconButton from '../../widgets/buttons/iconButton'
import DeleteIcon from '../../widgets/icons/delete'
import EditIcon from '../../widgets/icons/edit'
@ -39,17 +40,17 @@ const BoardTemplateSelectorItem = (props: Props) => {
className={isActive ? 'BoardTemplateSelectorItem active' : 'BoardTemplateSelectorItem'}
onClick={onClickHandler}
>
<span className='template-icon'>{template.icon}</span>
<span className='template-icon'>{template.icon || <CompassIcon icon='product-boards'/>}</span>
<span className='template-name'>{template.title}</span>
{/* don't show template menu options for default templates */}
{template.teamId !== Constants.globalTeamId &&
<div className='actions'>
<BoardPermissionGate
<BoardPermissionGate
boardId={template.id}
teamId={template.teamId}
permissions={[Permission.DeleteBoard]}
>
>
<IconButton
icon={<DeleteIcon/>}
title={intl.formatMessage({id: 'BoardTemplateSelector.delete-template', defaultMessage: 'Delete'})}
@ -59,11 +60,11 @@ const BoardTemplateSelectorItem = (props: Props) => {
}}
/>
</BoardPermissionGate>
<BoardPermissionGate
<BoardPermissionGate
boardId={template.id}
teamId={template.teamId}
permissions={[Permission.ManageBoardCards, Permission.ManageBoardProperties]}
>
>
<IconButton
icon={<EditIcon/>}
title={intl.formatMessage({id: 'BoardTemplateSelector.edit-template', defaultMessage: 'Edit'})}

24
webapp/src/components/table/table.scss
View file

@ -2,9 +2,8 @@
.Table {
margin-top: 16px;
padding-bottom: 0 !important;
margin-left: 20px !important;
padding-left: 0 !important;
padding: 0 32px 0 0 !important;
overflow: auto;
position: relative;
flex: 1;
@ -48,22 +47,21 @@
padding: 2px 8px;
border-radius: 3px;
line-height: 20px;
margin-right: 5px;
margin: 0 4px 0 0;
color: rgba(var(--center-channel-color-rgb), 1);
white-space: nowrap;
text-transform: none;
font-weight: normal;
font-size: 16px;
font-weight: 600;
font-size: 14px;
width: 100%;
input {
background: transparent;
width: 100%;
text-transform: none;
font-weight: normal;
font-size: 16px;
// line-height: 20px;
color: rgba(var(--center-channel-color-rgb), 1);
font-size: inherit;
color: inherit;
padding: 0;
}
}
@ -108,6 +106,7 @@
.octo-icontitle {
flex: 1 1 auto;
font-weight: 600;
.octo-icon {
min-width: 20px;
@ -215,6 +214,13 @@
.octo-table-cell {
align-items: center;
button,
.octo-propertyvalue {
font-size: inherit;
font-weight: normal;
}
}
}