mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-06-11 11:08:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: show navbar on hover setting, fix photo information toggle hot reload

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-05-09 22:39:45 +01:00
parent 9b9c2e74f6
commit 08bfa2772d
14 changed files with 72 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/modals/main/settings/sections/Appearance.jsx
View File

@@ -34,6 +34,7 @@ export default function AppearanceSettings() {
<h3>{appearance.navbar.title}</h3>
<Checkbox name='notesEnabled' text={appearance.navbar.notes} element='.other' />
<Checkbox name='refresh' text={appearance.navbar.refresh} element='.other' />
<Checkbox name='navbarHover' text={appearance.navbar.hover} element='.other' />
<h3>{appearance.font.title}</h3>
<Text title={appearance.font.custom} name='font' upperCaseFirst={true} category='other' />

2
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -149,7 +149,7 @@ export default class BackgroundSettings extends React.PureComponent {
<Switch name='background' text={this.language.enabled} category='background' />
<Checkbox name='ddgProxy' text={background.ddg_proxy} />
<Checkbox name='bgtransition' text={background.transition} />
<Checkbox name='photoInformation' text={background.photo_information} category='background' element='.photoInformation' />
<Checkbox name='photoInformation' text={background.photo_information} category='background' element='.other' />
<h3>{background.source.title}</h3>
<Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>

51
src/components/widgets/navbar/Navbar.jsx
View File

@@ -18,32 +18,35 @@ export default function Navbar(props) {
const backgroundEnabled = (localStorage.getItem('background') === 'true');
return (
<div className='navbar-container'>
{(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> :null}
{(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> :null}
<>
{(localStorage.getItem('navbarHover') === 'true') ? <div className='navbar-hidden'/> :null}
<div className='navbar-container'>
{(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> :null}
{(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> :null}
{(localStorage.getItem('notesEnabled') === 'true') ?
<div className='notes'>
<NotesIcon className='topicons'/>
<Notes/>
</div>
:null}
{(localStorage.getItem('notesEnabled') === 'true') ?
<div className='notes'>
<NotesIcon className='topicons'/>
<Notes/>
</div>
:null}
{(window.constants.BETA_VERSION === true) ?
<Tooltip title={language.widgets.navbar.tooltips.feedback}>
<Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
{(window.constants.BETA_VERSION === true) ?
<Tooltip title={language.widgets.navbar.tooltips.feedback}>
<Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
</Tooltip>
:null}
{(localStorage.getItem('refresh') === 'true') ?
<Tooltip title={language.widgets.navbar.tooltips.refresh}>
<RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
</Tooltip>
:null}
<Tooltip title={language.modals.main.navbar.settings}>
<Gear className='settings-icon topicons' onClick={() => props.openModal('mainModal')}/>
</Tooltip>
:null}
{(localStorage.getItem('refresh') === 'true') ?
<Tooltip title={language.widgets.navbar.tooltips.refresh}>
<RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
</Tooltip>
:null}
<Tooltip title={language.modals.main.navbar.settings}>
<Gear className='settings-icon topicons' onClick={() => props.openModal('mainModal')}/>
</Tooltip>
</div>
</div>
</>
);
}

21
src/components/widgets/navbar/scss/index.scss
View File

@@ -36,3 +36,24 @@
.visibilityshow {
visibility: visible !important;
}
.navbar-hidden + .navbar-container {
display: none;
}
.navbar-hidden {
position: absolute;
width: 50vw;
right: 0;
top: 0;
background: none;
height: 75px;
}
.navbar-hidden:hover + .navbar-container {
display: block !important;
}
.navbar-container:hover {
display: block;
}