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

GH-2524 - Updating menu icon and placement (#2547)

Browse Source 
* GH-2524 - Updating menu icon and placement

# Conflicts:
#	webapp/src/components/cardDialog.tsx
#	webapp/src/components/sidebar/sidebarBoardItem.tsx

* Updating tests

* Updating tests

* Updating UI

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Asaad Mahmood 2022-03-30 18:18:38 +05:00 committed by GitHub
parent 9f82537f9e
commit 0733e21012
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 86 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/src/components/__snapshots__/blockIconSelector.test.tsx.snap
View File

@ -40,7 +40,7 @@ exports[`components/blockIconSelector return menu on click 1`] = `
</span>
</div>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

6
webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
View File

@ -433,7 +433,7 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -485,8 +485,8 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
<i
class="CompassIcon icon-plus undefined"
/>
<div
class="menu-name"

2
webapp/src/components/__snapshots__/contentBlock.test.tsx.snap
View File

@ -24,7 +24,7 @@ exports[`components/contentBlock return commentBlock and click on menuwrapper 1`
/>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

8
webapp/src/components/__snapshots__/viewMenu.test.tsx.snap
View File

@ -6,7 +6,7 @@ Object {
"baseElement": <body>
<div>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -182,7 +182,7 @@ Object {
</body>,
"container": <div>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -415,7 +415,7 @@ Object {
"baseElement": <body>
<div>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -532,7 +532,7 @@ Object {
</body>,
"container": <div>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

4
webapp/src/components/cardDetail/__snapshots__/cardDetailContentsMenu.test.tsx.snap
View File

@ -19,7 +19,7 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
</span>
</button>
<div
class="Menu noselect top"
class="Menu noselect top "
>
<div
class="menu-contents"
@ -178,7 +178,7 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
</span>
</button>
<div
class="Menu noselect top"
class="Menu noselect top "
>
<div
class="menu-contents"

2
webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
View File

@ -371,7 +371,7 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

4
webapp/src/components/cardDetail/__snapshots__/comment.test.tsx.snap
View File

@ -39,7 +39,7 @@ exports[`components/cardDetail/comment return comment 1`] = `
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -145,7 +145,7 @@ exports[`components/cardDetail/comment return comment and delete comment 1`] = `
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"

5
webapp/src/components/cardDialog.tsx
View File

@ -13,6 +13,7 @@ import {getCardContents} from '../store/contents'
import {useAppSelector} from '../store/hooks'
import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../telemetry/telemetryClient'
import {Utils} from '../utils'
import CompassIcon from '../widgets/icons/compassIcon'
import DeleteIcon from '../widgets/icons/delete'
import LinkIcon from '../widgets/icons/Link'
import Menu from '../widgets/menu'
@ -137,6 +138,10 @@ const CardDialog = (props: Props): JSX.Element => {
<BoardPermissionGate permissions={[Permission.ManageBoardProperties]}>
<Menu.Text
id='makeTemplate'
icon={
<CompassIcon
icon='plus'
/>}
name='New template from card'
onClick={makeTemplateClicked}
/>

4
webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap
View File

@ -125,7 +125,7 @@ exports[`src/components/gallery/Gallery should match snapshot 1`] = `
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -283,7 +283,7 @@ exports[`src/components/gallery/Gallery should match snapshot without permission
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"

10
webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap
View File

@ -46,7 +46,7 @@ exports[`src/components/gallery/GalleryCard with a comment content should match
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -176,7 +176,7 @@ exports[`src/components/gallery/GalleryCard with an image content should match s
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -342,7 +342,7 @@ exports[`src/components/gallery/GalleryCard with many contents should match snap
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -476,7 +476,7 @@ exports[`src/components/gallery/GalleryCard with many images content should matc
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -768,7 +768,7 @@ exports[`src/components/gallery/GalleryCard without block content should match s
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"

6
webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap
View File

@ -18,7 +18,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
/>
</div>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -323,7 +323,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -843,7 +843,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
/>
</div>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"

6
webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap
View File

@ -20,7 +20,7 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on copy li
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -157,7 +157,7 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on delete
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -294,7 +294,7 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on duplica
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"

2
webapp/src/components/kanban/__snapshots__/kanbanColumnHeader.test.tsx.snap
View File

@ -48,7 +48,7 @@ exports[`src/components/kanban/kanbanColumnHeader return kanbanColumnHeader and
/>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

4
webapp/src/components/kanban/__snapshots__/kanbanHiddenColumnItem.test.tsx.snap
View File

@ -16,7 +16,7 @@ exports[`src/components/kanban/kanbanHiddenColumnItem return kanbanHiddenColumnI
propOption
</span>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -105,7 +105,7 @@ exports[`src/components/kanban/kanbanHiddenColumnItem return kanbanHiddenColumnI
propOption
</span>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

8
webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap
View File

@ -16,7 +16,7 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
Settings
</div>
<div
class="Menu noselect top"
class="Menu noselect top "
>
<div
class="menu-contents"
@ -324,7 +324,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
Settings
</div>
<div
class="Menu noselect top"
class="Menu noselect top "
>
<div
class="menu-contents"
@ -845,7 +845,7 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
Settings
</div>
<div
class="Menu noselect top"
class="Menu noselect top "
>
<div
class="menu-contents"
@ -1015,7 +1015,7 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
Settings
</div>
<div
class="Menu noselect top"
class="Menu noselect top "
>
<div
class="menu-contents"

5
webapp/src/components/sidebar/sidebarBoardItem.scss
View File

@ -2,7 +2,7 @@
display: flex;
flex-direction: row;
font-weight: 500;
padding: 0 16px 0 8px;
padding: 0 20px;
height: 36px;
align-items: center;
gap: 8px;
@ -23,7 +23,7 @@
}
&.sidebar-view-item {
padding-left: 40px;
padding-left: 32px;
color: rgba(var(--sidebar-text-rgb), 0.64);
font-weight: 400;
}
@ -61,7 +61,6 @@
> .Icon {
height: 18px;
width: 18px;
margin-right: 8px;
flex-shrink: 0;
&.GalleryIcon {

5
webapp/src/components/sidebar/sidebarBoardItem.tsx
View File

@ -102,7 +102,10 @@ const SidebarBoardItem = (props: Props) => {
}}
>
<IconButton icon={<OptionsIcon/>}/>
<Menu position='left'>
<Menu
fixed={true}
position='left'
>
<BoardPermissionGate
boardId={board.id}
permissions={[Permission.DeleteBoard]}

2
webapp/src/components/sidebar/sidebarCategory.scss
View File

@ -6,7 +6,7 @@
padding: 0 16px 0 8px;
height: 36px;
align-items: center;
gap: 8px;
gap: 4px;
&.category {
padding-left: 0;

4
webapp/src/components/table/__snapshots__/tableHeaderMenu.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`components/table/TableHeaderMenu should match snapshot, other column 1`] = `
<div>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -173,7 +173,7 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
exports[`components/table/TableHeaderMenu should match snapshot, title column 1`] = `
<div>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

2
webapp/src/components/viewHeader/__snapshots__/emptyCardButton.test.tsx.snap
View File

@ -84,7 +84,7 @@ exports[`components/viewHeader/emptyCardButton return EmptyCardButton and Set Te
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"

8
webapp/src/components/viewHeader/__snapshots__/filterComponent.test.tsx.snap
View File

@ -39,7 +39,7 @@ exports[`components/viewHeader/filterComponent return filterComponent 1`] = `
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -230,7 +230,7 @@ exports[`components/viewHeader/filterComponent return filterComponent and add Fi
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -435,7 +435,7 @@ exports[`components/viewHeader/filterComponent return filterComponent and click
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -612,7 +612,7 @@ exports[`components/viewHeader/filterComponent return filterComponent and filter
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

14
webapp/src/components/viewHeader/__snapshots__/filterEntry.test.tsx.snap
View File

@ -19,7 +19,7 @@ exports[`components/viewHeader/filterEntry return filterEntry 1`] = `
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -193,7 +193,7 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on delet
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -353,7 +353,7 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on doesn
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -513,7 +513,7 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on inclu
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -673,7 +673,7 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is em
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -833,7 +833,7 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is no
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -979,7 +979,7 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on statu
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

2
webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap
View File

@ -16,7 +16,7 @@ exports[`components/viewHeader/filterValue return filterValue 1`] = `
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

6
webapp/src/components/viewHeader/__snapshots__/newCardButton.test.tsx.snap
View File

@ -23,7 +23,7 @@ exports[`components/viewHeader/newCardButton return NewCardButton 1`] = `
/>
</div>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -147,7 +147,7 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCard 1`
/>
</div>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -271,7 +271,7 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCardTem
/>
</div>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"

8
webapp/src/components/viewHeader/__snapshots__/newCardButtonTemplateItem.test.tsx.snap
View File

@ -31,7 +31,7 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -165,7 +165,7 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -334,7 +334,7 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"
@ -468,7 +468,7 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
/>
</button>
<div
class="Menu noselect left"
class="Menu noselect left "
>
<div
class="menu-contents"

6
webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap
View File

@ -19,7 +19,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu 1`] = `
/>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -116,7 +116,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
/>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -213,7 +213,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
/>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

8
webapp/src/components/viewHeader/__snapshots__/viewHeaderGroupByMenu.test.tsx.snap
View File

@ -21,7 +21,7 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -208,7 +208,7 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -395,7 +395,7 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu 1`] = `
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -562,7 +562,7 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu, hideEm
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

4
webapp/src/components/viewHeader/__snapshots__/viewHeaderPropertiesMenu.test.tsx.snap
View File

@ -16,7 +16,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"
@ -187,7 +187,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu w
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

2
webapp/src/components/viewHeader/__snapshots__/viewHeaderSortMenu.test.tsx.snap
View File

@ -16,7 +16,7 @@ exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
</span>
</button>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

2
webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`widgets/PropertyMenu should match snapshot 1`] = `
<div>
<div
class="Menu noselect bottom"
class="Menu noselect bottom "
>
<div
class="menu-contents"

4
webapp/src/widgets/menu/menu.scss
View File

@ -14,6 +14,10 @@
border-radius: var(--default-rad);
box-shadow: var(--elevation-4);
&.fixed {
position: fixed;
}
.menu-contents {
display: flex;
flex-direction: column;

5
webapp/src/widgets/menu/menu.tsx
View File

@ -15,6 +15,7 @@ import textInputOption from './textInputOption'
type Props = {
children: React.ReactNode
position?: 'top' | 'bottom' | 'left' | 'right'
fixed?: boolean
}
export default class Menu extends React.PureComponent<Props> {
@ -31,9 +32,9 @@ export default class Menu extends React.PureComponent<Props> {
}
public render(): JSX.Element {
const {position, children} = this.props
const {position, fixed, children} = this.props
return (
<div className={'Menu noselect ' + (position || 'bottom')}>
<div className={`Menu noselect ${position || 'bottom'} ${fixed ? ' fixed' : ''}`}>
<div className='menu-contents'>
<div className='menu-options'>
{React.Children.map(children, (child) => (