feat: navbar hot reload, quick links zoom, add example images to welcome modal, fixes

package.json

@@ -38,14 +38,14 @@
     "babel-plugin-transform-react-class-to-function": "^1.2.2",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^5.2.6",
-    "eslint": "^7.29.0",
+    "eslint": "^7.30.0",
     "eslint-config-react-app": "^6.0.0",
     "html-webpack-plugin": "^5.3.2",
     "mini-css-extract-plugin": "^2.0.0",
     "sass": "^1.35.1",
     "sass-loader": "^12.1.0",
     "source-map-loader": "^3.0.0",
-    "webpack": "^5.41.1",
+    "webpack": "^5.42.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^4.0.0-beta.3"
   },

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

@@ -28,8 +28,8 @@ export default function AppearanceSettings() {
       <Radio name='theme' title={appearance.theme.title} options={themeOptions} category='other' />
 
       <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='notesEnabled' text={appearance.navbar.notes} category='navbar' />
+      <Checkbox name='refresh' text={appearance.navbar.refresh} category='navbar' />
 
       <h3>{appearance.font.title}</h3>
       <Text title={appearance.font.custom} name='font' upperCaseFirst={true} category='other' />

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

@@ -1,5 +1,6 @@
 import Switch from '../Switch';
 import Checkbox from '../Checkbox';
+import Slider from '../Slider';
 
 export default function QuickLinks() {
   const language = window.language.modals.main.settings.sections.quicklinks;
@@ -11,6 +12,7 @@ export default function QuickLinks() {
       <Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_image_proxy} element='.other' />
       <Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks' />
       <Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks' />
+      <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks' element='.quicklinks-container' />
     </>
   );
 }

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

@@ -169,8 +169,8 @@ export default class BackgroundSettings extends React.PureComponent {
         {backgroundSettings}
 
         <h3>{background.buttons.title}</h3>
-        <Checkbox name='view' text={background.buttons.view} element='.other' />
-        <Checkbox name='favouriteEnabled' text={background.buttons.favourite} element='.other' />
+        <Checkbox name='view' text={background.buttons.view} category='navbar' />
+        <Checkbox name='favouriteEnabled' text={background.buttons.favourite} category='navbar' />
         <Checkbox name='downloadbtn' text={background.buttons.download} element='.other' />
 
         <h3>{background.effects.title}</h3>

src/components/modals/welcome/WelcomeSections.jsx

@@ -22,7 +22,7 @@ export default class WelcomeSections extends React.Component {
       welcomeImage: 0
     };
     this.changeWelcomeImg = this.changeWelcomeImg.bind(this);
-    this.welcomeImages = ['https://external-content.duckduckgo.com/iu/?u=example.com/example.png'];
+    this.welcomeImages = ['./welcome-images/example1.webp', './welcome-images/example2.webp', './welcome-images/example3.webp', './welcome-images/example4.webp'];
   }
 
   changeTheme(type) {
@@ -58,6 +58,12 @@ export default class WelcomeSections extends React.Component {
     this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
   }
 
+  componentWillUnmount() {
+  	if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  }
+
   render() {
     const language = window.language.modals.welcome;
     let tabContent;
@@ -66,7 +72,7 @@ export default class WelcomeSections extends React.Component {
       <>
         <h1>{language.sections.intro.title}</h1>
         <p>{language.sections.intro.description}</p>
-        <h3 className='quicktip'>to be added</h3>
+        <h3 className='quicktip'>#shareyourmue</h3>
         <div className='examples'>
           <img src={this.welcomeImages[this.state.welcomeImage]} alt='example mue setup' draggable={false}/>
         </div>
@@ -81,6 +87,7 @@ export default class WelcomeSections extends React.Component {
       </>
     );
   
+    const { appearance } = window.language.modals.main.settings.sections;
     const theme = (
       <>
         <h1>{language.sections.theme.title}</h1>
@@ -88,16 +95,16 @@ export default class WelcomeSections extends React.Component {
         <div className='themesToggleArea'>
           <div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
             <AutoIcon/>
-            <span>Auto</span>
+            <span>{appearance.theme.auto}</span>
           </div>
           <div className='options'>
             <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
                 <LightModeIcon/>
-                <span>Light</span>
+                <span>{appearance.theme.light}</span>
             </div>
             <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
                 <DarkModeIcon/>
-                <span>Dark</span>
+                <span>{appearance.theme.dark}</span>
             </div>
           </div>
           <h3 className='quicktip'>{language.tip}</h3>
@@ -139,7 +146,7 @@ export default class WelcomeSections extends React.Component {
           <div className='toggle' onClick={() => this.props.switchTab(3)}>Theme: {this.getSetting('theme')}</div>
         </div>
       </>
-    )
+    );
   
     switch (this.props.currentTab) {
       case 1: tabContent = chooseLanguage; break;

src/components/widgets/Widgets.jsx

@@ -43,9 +43,9 @@ export default class Widgets extends React.PureComponent {
   }
 
   render() {
-    // don't hide when welcome is there
-    if (localStorage.getItem('showWelcome') === 'true') {
-      return <div id='widgets'></div>
+    // don't show when welcome is there
+    if (localStorage.getItem('showWelcome') !== 'false') {
+      return <div id='widgets'></div>;
     }
 
     // allow for re-ordering widgets
@@ -57,7 +57,7 @@ export default class Widgets extends React.PureComponent {
       });
     } else {
       // prevent error
-      elements = ['greeting', 'time', 'quicklinks', 'quote', 'date'];
+      elements = [<Greeting/>, <Clock/>, <QuickLinks/>, <Quote/>, <Date/>];
     }
 
     return (

src/components/widgets/navbar/Navbar.jsx

@@ -10,42 +10,54 @@ import Maximise from '../background/Maximise';
 import Favourite from '../background/Favourite';
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
+import EventBus from '../../../modules/helpers/eventbus';
+
 import './scss/index.scss';
 
-export default function Navbar(props) {
-  if (localStorage.getItem('showWelcome') === 'true') {
-    return null;
+export default class Navbar extends React.Component {
+  componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'navbar') {
+        this.forceUpdate();
+      }
+    });
   }
 
-  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}
+  render() {
+    if (localStorage.getItem('showWelcome') !== 'false') {
+      return null;
+    }
   
-      {(localStorage.getItem('notesEnabled') === 'true') ?
-        <div className='notes'>
-          <NotesIcon className='topicons'/>
-          <Notes/>
-        </div>
-      : null}
-
-      {(window.constants.BETA_VERSION === true) ? 
-        <Tooltip title={window.language.widgets.navbar.tooltips.feedback}>
-          <Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
+    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('notesEnabled') === 'true') ?
+          <div className='notes'>
+            <NotesIcon className='topicons'/>
+            <Notes/>
+          </div>
+        : null}
+  
+        {(window.constants.BETA_VERSION === true) ? 
+          <Tooltip title={window.language.widgets.navbar.tooltips.feedback}>
+            <Report className='topicons' onClick={() => this.props.openModal('feedbackModal')}/>
+          </Tooltip>
+        : null}
+  
+        {(localStorage.getItem('refresh') === 'true') ?
+          <Tooltip title={window.language.widgets.navbar.tooltips.refresh}>
+            <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
+          </Tooltip>
+        : null}
+  
+        <Tooltip title={window.language.modals.main.navbar.settings}>
+          <Gear className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')}/>
         </Tooltip>
-      : null}
-
-      {(localStorage.getItem('refresh') === 'true') ?
-        <Tooltip title={window.language.widgets.navbar.tooltips.refresh}>
-          <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
-        </Tooltip>
-      : null}
-
-      <Tooltip title={window.language.modals.main.navbar.settings}>
-        <Gear className='settings-icon topicons' onClick={() => props.openModal('mainModal')}/>
-      </Tooltip>
-    </div>
-  );
+      </div>
+    );
+  }
 }

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -78,6 +78,13 @@ export default class QuickLinks extends React.PureComponent {
     window.stats.postEvent('feature', 'Quicklink add');
 
     this.toggleAdd();
+
+    // make sure image is correct size
+    const element = document.querySelector('.quicklinks-container');
+    const images = element.getElementsByTagName('img');
+    for (const img of images) {
+      img.style.height = `${0.87 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
+    };
   }
 
   toggleAdd = () => {
@@ -102,6 +109,12 @@ export default class QuickLinks extends React.PureComponent {
         }
 
         element.style.display = 'block';
+        const images = element.getElementsByTagName('img');
+        for (const img of images) {
+          img.style.height = `${0.87 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
+        };
+        element.querySelector('button').style.fontSize = `${1.15 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
+
         this.setState({
           items: JSON.parse(localStorage.getItem('quicklinks'))
         });
@@ -117,6 +130,13 @@ export default class QuickLinks extends React.PureComponent {
         e.preventDefault();
       }
     };
+
+    const element = document.querySelector('.quicklinks-container');
+    const images = element.getElementsByTagName('img');
+    for (const img of images) {
+      img.style.height = `${0.87 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
+    };
+    element.querySelector('button').style.fontSize = `${1.15 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
   }
 
   componentWillUnmount() {

src/translations/de_DE.json

@@ -22,7 +22,7 @@
       "new": "Neuer Link",
       "name": "Name",
       "url": "URL",
-      "add": "hinzufügen",
+      "add": "Hinzufügen",
       "name_error": "Muss einen Namen angeben",
       "url_error": "Muss eine URL angeben"
     },

webpack.config.js

@@ -64,6 +64,10 @@ module.exports = {
         {
           from: 'public/offline-images',
           to: 'offline-images'
+        },
+        {
+          from: 'public/welcome-images',
+          to: 'welcome-images'
         }
       ]
     }),