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

GH-965 - Updating global nav right sidebar buttons (#983)

Browse source 
* GH-965 - Updating global nav right sidebar buttons

* Updating test
This commit is contained in:
Asaad Mahmood 2021-08-16 23:26:32 +05:00 committed by GitHub
parent 7b5a45dc6c
commit 0675c7e502
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 38 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webapp/src/components/globalHeader/__snapshots__/globalHeader.test.tsx.snap
View file

@ -9,7 +9,7 @@ exports[`components/sidebar/GlobalHeader header menu should match snapshot 1`] =
class="spacer"
/>
<a
class="help-button"
class="GlobalHeaderComponent__button help-button"
href="https://www.focalboard.com/guide/user?utm_source=webapp"
rel="noreferrer"
target="_blank"
@ -25,7 +25,7 @@ exports[`components/sidebar/GlobalHeader header menu should match snapshot 1`] =
class="MenuWrapper"
>
<div
class="menu-entry"
class="GlobalHeaderComponent__button menu-entry"
>
<i
class="CompassIcon icon-settings-outline SettingsIcon"

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

@ -9,7 +9,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
class="MenuWrapper"
>
<div
class="menu-entry"
class="GlobalHeaderComponent__button menu-entry"
>
<i
class="CompassIcon icon-settings-outline SettingsIcon"
@ -369,7 +369,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu closed should
class="MenuWrapper"
>
<div
class="menu-entry"
class="GlobalHeaderComponent__button menu-entry"
>
<i
class="CompassIcon icon-settings-outline SettingsIcon"
@ -389,7 +389,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
class="MenuWrapper"
>
<div
class="menu-entry"
class="GlobalHeaderComponent__button menu-entry"
>
<i
class="CompassIcon icon-settings-outline SettingsIcon"

37
webapp/src/components/globalHeader/globalHeader.scss
View file

@ -1,18 +1,43 @@
.GlobalHeaderComponent {
display: flex;
flex-direction: row;
margin-right: 20px;
width: 100%;
margin-right: -8px;
.spacer {
flex-grow: 1;
}
.help-button {
.GlobalHeaderComponent__button {
width: 28px;
height: 28px;
display: flex;
align-items: center;
padding: 0 17px;
}
.HelpIcon {
justify-content: center;
border-radius: 4px;
color: rgba(var(--sidebar-text-rgb), 0.64);
font-size: 20px;
margin-left: 8px;
i {
font-size: 18px;
width: 18px;
height: 18px;
display: flex;
&:before {
margin: 0;
}
}
&:hover {
background-color: rgba(var(--sidebar-text-rgb), 0.08);
color: rgba(var(--sidebar-text-rgb), 0.72);
}
&:active {
background-color: rgba(var(--sidebar-text-rgb), 0.16);
color: rgba(var(--sidebar-text-rgb), 1);
}
}
}

2
webapp/src/components/globalHeader/globalHeader.tsx
View file

@ -28,7 +28,7 @@ const HeaderItems = () => {
href='https://www.focalboard.com/guide/user?utm_source=webapp'
target='_blank'
rel='noreferrer'
className='help-button'
className='GlobalHeaderComponent__button help-button'
>
<HelpIcon/>
</a>

21
webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss
View file

@ -1,21 +0,0 @@
.focalboard-body .GlobalHeaderSettingsMenu {
.menu-entry {
display: flex;
flex-direction: row;
padding: 0 16px 0 8px;
height: 36px;
align-items: center;
padding-left: 20px;
color: rgba(var(--sidebar-text-rgb), 0.64);
font-weight: 400;
&:hover {
background-color: rgba(var(--sidebar-text-rgb), 0.08);
display: flex;
}
}
.SettingsIcon {
color: rgba(var(--sidebar-text-rgb), 0.64);
font-size: 20px;
}
}

2
webapp/src/components/globalHeader/globalHeaderSettingsMenu.tsx
View file

@ -85,7 +85,7 @@ const GlobalHeaderSettingsMenu = React.memo(() => {
return (
<div className='GlobalHeaderSettingsMenu'>
<MenuWrapper>
<div className='menu-entry'>
<div className='GlobalHeaderComponent__button menu-entry'>
<SettingsIcon/>
</div>
<Menu position='left'>

4
webapp/src/widgets/icons/settings.scss
View file

@ -1,4 +0,0 @@
.focalboard-body .SettingsIcon {
color: rgba(var(--body-color), 0.5);
font-size: 16px;
}