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

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/main/settings/sections/Appearance.jsx

@@ -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' />

src/components/modals/main/settings/sections/background/Background.jsx

@@ -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'>

src/components/widgets/navbar/Navbar.jsx

@@ -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('navbarHover') === 'true') ? <div className='navbar-hidden'/> :null}
-      {(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> :null}
+      <div className='navbar-container'>
+        {(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> :null}
+        {(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> :null}
   
-      {(localStorage.getItem('notesEnabled') === 'true') ?
+        {(localStorage.getItem('notesEnabled') === 'true') ?
-        <div className='notes'>
+          <div className='notes'>
-          <NotesIcon className='topicons'/>
+            <NotesIcon className='topicons'/>
-          <Notes/>
+            <Notes/>
-        </div>
+          </div>
-      :null}
+        :null}
 
-      {(window.constants.BETA_VERSION === true) ? 
+        {(window.constants.BETA_VERSION === true) ? 
-        <Tooltip title={language.widgets.navbar.tooltips.feedback}>
+          <Tooltip title={language.widgets.navbar.tooltips.feedback}>
-          <Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
+            <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}
+      </div>
-
+    </>
-      {(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>
   );
 }

src/components/widgets/navbar/scss/index.scss

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

src/modules/default_settings.json

@@ -214,5 +214,9 @@
   {
     "name": "backgroundFilter",
     "value": "grayscale"
+  },
+  {
+    "name": "navbarHover",
+    "value": false
   }
 ]

src/translations/de_DE.json

@@ -220,7 +220,8 @@
             "navbar": {
               "title": "Navigationsleiste",
               "notes": "Notizen",
-              "refresh": "Aktualisieren"
+              "refresh": "Aktualisieren",
+              "hover": "Display on hover"
             },
             "font": {
               "title": "Schriftart",

src/translations/en_GB.json

@@ -220,7 +220,8 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button"
+              "refresh": "Refresh button",
+              "hover": "Display on hover"
             },
             "font": {
               "title": "Font",

src/translations/en_US.json

@@ -220,7 +220,8 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button"
+              "refresh": "Refresh button",
+              "hover": "Display on hover"
             },
             "font": {
               "title": "Font",

src/translations/es.json

@@ -220,7 +220,8 @@
             "navbar": {
               "title": "Barra de búsqueda",
               "notes": "Notas",
-              "refresh": "Botón de recargar"
+              "refresh": "Botón de recargar",
+              "hover": "Display on hover"
             },
             "font": {
               "title": "Fuente",

src/translations/fr.json

@@ -220,7 +220,8 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button"
+              "refresh": "Refresh button",
+              "hover": "Display on hover"
             },
             "font": {
               "title": "Font",

src/translations/nl.json

@@ -220,7 +220,8 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button"
+              "refresh": "Refresh button",
+              "hover": "Display on hover"
             },
             "font": {
               "title": "Font",

src/translations/no.json

@@ -220,7 +220,8 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button"
+              "refresh": "Refresh button",
+              "hover": "Display on hover"
             },
             "font": {
               "title": "Font",

src/translations/ru.json

@@ -220,7 +220,8 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button"
+              "refresh": "Refresh button",
+              "hover": "Display on hover"
             },
             "font": {
               "title": "Font",

src/translations/zh_CN.json

@@ -220,7 +220,8 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button"
+              "refresh": "Refresh button",
+              "hover": "Display on hover"
             },
             "font": {
               "title": "Font",