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 <div
class="BoardSelectorItem" class="BoardSelectorItem"
> >
<span
class="icon"
/>
<div <div
class="resultLine" class="BoardSelectorItem-info"
> >
<div <span
class="resultTitle" class="icon"
> >
Untitled board <i
</div> class="CompassIcon icon-product-boards undefined"
/>
</span>
<div <div
class="resultDescription" class="resultLine"
/> >
<div
class="resultTitle"
>
Untitled board
</div>
<div
class="resultDescription"
/>
</div>
</div> </div>
<div <div
class="linkUnlinkButton" class="linkUnlinkButton"
@ -212,20 +220,28 @@ exports[`components/boardSelector renders with some results 1`] = `
<div <div
class="BoardSelectorItem" class="BoardSelectorItem"
> >
<span
class="icon"
/>
<div <div
class="resultLine" class="BoardSelectorItem-info"
> >
<div <span
class="resultTitle" class="icon"
> >
Untitled board <i
</div> class="CompassIcon icon-product-boards undefined"
/>
</span>
<div <div
class="resultDescription" class="resultLine"
/> >
<div
class="resultTitle"
>
Untitled board
</div>
<div
class="resultDescription"
/>
</div>
</div> </div>
<div <div
class="linkUnlinkButton" class="linkUnlinkButton"
@ -243,20 +259,28 @@ exports[`components/boardSelector renders with some results 1`] = `
<div <div
class="BoardSelectorItem" class="BoardSelectorItem"
> >
<span
class="icon"
/>
<div <div
class="resultLine" class="BoardSelectorItem-info"
> >
<div <span
class="resultTitle" class="icon"
> >
Untitled board <i
</div> class="CompassIcon icon-product-boards undefined"
/>
</span>
<div <div
class="resultDescription" class="resultLine"
/> >
<div
class="resultTitle"
>
Untitled board
</div>
<div
class="resultDescription"
/>
</div>
</div> </div>
<div <div
class="linkUnlinkButton" 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 <div
class="BoardSelectorItem" class="BoardSelectorItem"
> >
<span
class="icon"
/>
<div <div
class="resultLine" class="BoardSelectorItem-info"
> >
<div <span
class="resultTitle" class="icon"
> >
Untitled board <i
</div> class="CompassIcon icon-product-boards undefined"
/>
</span>
<div <div
class="resultDescription" class="resultLine"
/> >
<div
class="resultTitle"
>
Untitled board
</div>
<div
class="resultDescription"
/>
</div>
</div> </div>
<div <div
class="linkUnlinkButton" class="linkUnlinkButton"
@ -41,20 +49,28 @@ exports[`components/boardSelectorItem renders linked board 1`] = `
<div <div
class="BoardSelectorItem" class="BoardSelectorItem"
> >
<span
class="icon"
/>
<div <div
class="resultLine" class="BoardSelectorItem-info"
> >
<div <span
class="resultTitle" class="icon"
> >
Test title <i
</div> class="CompassIcon icon-product-boards undefined"
/>
</span>
<div <div
class="resultDescription" class="resultLine"
/> >
<div
class="resultTitle"
>
Test title
</div>
<div
class="resultDescription"
/>
</div>
</div> </div>
<div <div
class="linkUnlinkButton" class="linkUnlinkButton"
@ -77,20 +93,28 @@ exports[`components/boardSelectorItem renders not linked board 1`] = `
<div <div
class="BoardSelectorItem" class="BoardSelectorItem"
> >
<span
class="icon"
/>
<div <div
class="resultLine" class="BoardSelectorItem-info"
> >
<div <span
class="resultTitle" class="icon"
> >
Test title <i
</div> class="CompassIcon icon-product-boards undefined"
/>
</span>
<div <div
class="resultDescription" class="resultLine"
/> >
<div
class="resultTitle"
>
Test title
</div>
<div
class="resultDescription"
/>
</div>
</div> </div>
<div <div
class="linkUnlinkButton" class="linkUnlinkButton"

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

@ -5,10 +5,21 @@
padding: 10px 0; padding: 10px 0;
margin: 0 35px; margin: 0 35px;
.BoardSelectorItem-info {
display: flex;
flex: 1;
overflow: hidden;
}
.icon { .icon {
width: 18px;
align-items: flex-start; align-items: flex-start;
margin-right: 10px; margin-right: 10px;
i {
font-size: 20px;
}
&:empty { &:empty {
display: none; 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 {Board} from '../../../../webapp/src/blocks/board'
import Button from '../../../../webapp/src/widgets/buttons/button' import Button from '../../../../webapp/src/widgets/buttons/button'
import CompassIcon from '../../../../webapp/src/widgets/icons/compassIcon'
import './boardSelectorItem.scss' import './boardSelectorItem.scss'
@ -23,10 +24,12 @@ const BoardSelectorItem = (props: Props) => {
const resultTitle = item.title || untitledBoardTitle const resultTitle = item.title || untitledBoardTitle
return ( return (
<div className='BoardSelectorItem'> <div className='BoardSelectorItem'>
<span className='icon'>{item.icon}</span> <div className='BoardSelectorItem-info'>
<div className='resultLine'> <span className='icon'>{item.icon || <CompassIcon icon='product-boards'/>}</span>
<div className='resultTitle'>{resultTitle}</div> <div className='resultLine'>
<div className='resultDescription'>{item.description}</div> <div className='resultTitle'>{resultTitle}</div>
<div className='resultDescription'>{item.description}</div>
</div>
</div> </div>
<div className='linkUnlinkButton'> <div className='linkUnlinkButton'>
{item.channelId === currentChannel && {item.channelId === currentChannel &&
@ -44,7 +47,7 @@ const BoardSelectorItem = (props: Props) => {
onClick={() => props.linkBoard(item)} onClick={() => props.linkBoard(item)}
emphasis='primary' emphasis='primary'
> >
<FormattedMessage <FormattedMessage
id='boardSelector.link' id='boardSelector.link'
defaultMessage='Link' defaultMessage='Link'
/> />

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

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

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

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