self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-08 15:06:08 +02:00
Code Issues Releases Activity

Gh 3849 - Fixing menu text and submenu icon (#3857)

Browse Source 
* GH-3849 - Fixing menu item alignment

* Updating submenu icon

* Fixing link errors

* Updating import

* Fixing lint error
This commit is contained in:
Asaad Mahmood 2022-09-19 20:10:00 +05:00 committed by GitHub
parent a591fe108b
commit d45a5c7ec4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 80 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -108,15 +108,9 @@ exports[`components/blockIconSelector return menu on click 1`] = `
>
Pick icon
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>

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

@ -129,15 +129,9 @@ exports[`components/contentBlock return commentBlock and click on menuwrapper 1`
>
Insert above
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>

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

@ -197,15 +197,9 @@ Object {
>
Add view
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
</div>
@ -439,15 +433,9 @@ Object {
>
Add view
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
</div>

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

@ -31,15 +31,6 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
class="MenuOption SubMenuOption menu-option open-left menu-option-active"
id="import"
>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<div
class="noicon"
/>
@ -48,6 +39,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
>
Import
</div>
<i
class="CompassIcon icon-chevron-right"
/>
<div
class="SubMenu Menu noselect left-bottom"
>
@ -249,15 +243,6 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
class="MenuOption SubMenuOption menu-option open-left"
id="lang"
>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<div
class="noicon"
/>
@ -266,6 +251,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
>
Set language
</div>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -389,15 +377,6 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
class="MenuOption SubMenuOption menu-option open-left"
id="import"
>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<div
class="noicon"
/>
@ -406,6 +385,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
>
Import
</div>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -413,15 +395,6 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
class="MenuOption SubMenuOption menu-option open-left menu-option-active"
id="lang"
>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<div
class="noicon"
/>
@ -430,6 +403,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
>
Set language
</div>
<i
class="CompassIcon icon-chevron-right"
/>
<div
class="SubMenu Menu noselect left-bottom"
>
@ -1050,15 +1026,6 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
class="MenuOption SubMenuOption menu-option open-left"
id="import"
>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<div
class="noicon"
/>
@ -1067,6 +1034,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
>
Import
</div>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -1074,15 +1044,6 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
class="MenuOption SubMenuOption menu-option open-left"
id="lang"
>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<div
class="noicon"
/>
@ -1091,6 +1052,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
>
Set language
</div>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>

24
webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap
View File

@ -124,15 +124,9 @@ exports[`components/sidebarBoardItem sidebar board item 1`] = `
>
Move To...
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -386,15 +380,9 @@ exports[`components/sidebarBoardItem sidebar board item for guest 1`] = `
>
Move To...
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div />

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

@ -37,15 +37,9 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
>
Import
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
<div
class="SubMenu Menu noselect top"
>
@ -282,15 +276,9 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
>
Set language
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -306,15 +294,9 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
>
Set theme
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -417,15 +399,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
>
Import
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -468,15 +444,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
>
Set language
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
<div
class="SubMenu Menu noselect top"
>
@ -967,15 +937,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
>
Set theme
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -1098,15 +1062,9 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
>
Import
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -1149,15 +1107,9 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
>
Set language
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -1173,15 +1125,9 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
>
Set theme
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -1284,15 +1230,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
>
Import
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -1335,15 +1275,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
>
Set language
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
</div>
</div>
<div>
@ -1359,15 +1293,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
>
Set theme
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
<div
class="SubMenu Menu noselect top"
>

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

@ -33,15 +33,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
>
Type: Text
</div>
<svg
class="SubmenuTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="50,35 75,50 50,65"
/>
</svg>
<i
class="CompassIcon icon-chevron-right"
/>
<div
class="SubMenu Menu noselect bottom"
>

1
webapp/src/widgets/buttons/buttonWithMenu.scss
View File

@ -1,7 +1,6 @@
.ButtonWithMenu {
display: flex;
align-items: stretch;
text-align: center;
min-width: 20px;
cursor: pointer;
overflow: visible;

16
webapp/src/widgets/menu/subMenuOption.scss
View File

@ -1,24 +1,14 @@
@import '../../styles/z-index';
.Menu .menu-options .SubMenuOption.open-left {
padding: 4px 5px;
.menu-name {
margin-left: 0;
.Menu .menu-options .SubMenuOption {
&.menu-option {
padding-right: 16px;
}
}
.SubMenuOption {
position: relative;
&.open-left {
.SubmenuTriangleIcon {
position: relative;
left: 5px;
transform: rotate(180deg);
}
}
.SubMenu {
@include z-index(sub-menu-option-sub-menu);
position: absolute;

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

@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React, {useEffect, useState, useContext, CSSProperties, useRef} from 'react'
import SubmenuTriangleIcon from '../icons/submenuTriangle'
import CompassIcon from '../../widgets/icons/compassIcon'
import MenuUtil from './menuUtil'
@ -62,10 +62,9 @@ function SubMenuOption(props: SubMenuOptionProps): JSX.Element {
}}
ref={ref}
>
{(props.position === 'left' || props.position === 'left-bottom') && <SubmenuTriangleIcon/>}
{props.icon ? <div className='menu-option__icon'>{props.icon}</div> : <div className='noicon'/>}
<div className='menu-name'>{props.name}</div>
{props.position !== 'left' && props.position !== 'left-bottom' && <SubmenuTriangleIcon/>}
<CompassIcon icon='chevron-right'/>
{isOpen &&
<div
className={'SubMenu Menu noselect ' + (props.position || 'bottom')}