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

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

@ -180,10 +180,17 @@ exports[`components/boardSelector renders with some results 1`] = `
>
<div
class="BoardSelectorItem"
>
<div
class="BoardSelectorItem-info"
>
<span
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultLine"
>
@ -196,6 +203,7 @@ exports[`components/boardSelector renders with some results 1`] = `
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"
>
@ -211,10 +219,17 @@ exports[`components/boardSelector renders with some results 1`] = `
</div>
<div
class="BoardSelectorItem"
>
<div
class="BoardSelectorItem-info"
>
<span
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultLine"
>
@ -227,6 +242,7 @@ exports[`components/boardSelector renders with some results 1`] = `
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"
>
@ -242,10 +258,17 @@ exports[`components/boardSelector renders with some results 1`] = `
</div>
<div
class="BoardSelectorItem"
>
<div
class="BoardSelectorItem-info"
>
<span
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultLine"
>
@ -258,6 +281,7 @@ exports[`components/boardSelector renders with some results 1`] = `
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"
>

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

@ -4,10 +4,17 @@ exports[`components/boardSelectorItem renders board without title 1`] = `
<div>
<div
class="BoardSelectorItem"
>
<div
class="BoardSelectorItem-info"
>
<span
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultLine"
>
@ -20,6 +27,7 @@ exports[`components/boardSelectorItem renders board without title 1`] = `
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"
>
@ -40,10 +48,17 @@ exports[`components/boardSelectorItem renders linked board 1`] = `
<div>
<div
class="BoardSelectorItem"
>
<div
class="BoardSelectorItem-info"
>
<span
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultLine"
>
@ -56,6 +71,7 @@ exports[`components/boardSelectorItem renders linked board 1`] = `
class="resultDescription"
/>
</div>
</div>
<div
class="linkUnlinkButton"
>
@ -76,10 +92,17 @@ exports[`components/boardSelectorItem renders not linked board 1`] = `
<div>
<div
class="BoardSelectorItem"
>
<div
class="BoardSelectorItem-info"
>
<span
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
/>
</span>
<div
class="resultLine"
>
@ -92,6 +115,7 @@ exports[`components/boardSelectorItem renders not linked board 1`] = `
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;
}

5
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,11 +24,13 @@ const BoardSelectorItem = (props: Props) => {
const resultTitle = item.title || untitledBoardTitle
return (
<div className='BoardSelectorItem'>
<span className='icon'>{item.icon}</span>
<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 &&
<Button

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 {

3
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,7 +40,7 @@ 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 */}

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;
}
}
}