Merge pull request 'release v3.11.7' (#331) from develop into master

Reviewed-on: #331

.woodpecker.yml

@@ -1,5 +1,5 @@
 steps:
-  check-tag:
+  "Verify tag and app version":
     image: alpine
     commands:
       - TAG=${CI_COMMIT_TAG/v//}
@@ -7,7 +7,7 @@ steps:
     when:
       event: [tag]
 
-  dependencies:
+  "Install dependencies":
     image: node:16
     pull: true
     commands:
@@ -16,13 +16,13 @@ steps:
       event: [tag, push, pull_request, manual]
       branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
 
-  osv-detector:
+  "Check dependencies":
     image: gitnet.fr/deblan/osv-detector:v0.10
     commands:
       - osv-detector package-lock.json
     failure: ignore
 
-  build-js:
+  "Build JS":
     image: node:16
     commands:
       - npm run build
@@ -30,7 +30,7 @@ steps:
       event: [tag, push, pull_request, manual]
       branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
 
-  build-translations:
+  "Build translations":
     image: deblan/php:8.0
     commands:
       - php bin/generate_l10n.php
@@ -38,7 +38,7 @@ steps:
       event: [tag, push, pull_request, manual]
       branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
 
-  create-signature:
+  "Create signature":
     image: nextcloud:25
     secrets: [app_certificate, app_public_certificate]
     environment:
@@ -73,7 +73,7 @@ steps:
   #   when:
   #     event: [pull_request]
 
-  create-package:
+  "Create package":
     image: deblan/php:8.0
     volumes:
       - /var/www/html/artifacts:/var/www/html/artifacts
@@ -89,7 +89,7 @@ steps:
     when:
       event: [tag]
 
-  push-release:
+  "Push release":
     image: plugins/gitea-release
     volumes:
       - /var/www/html/artifacts:/var/www/html/artifacts

CHANGELOG.md

@@ -1,5 +1,17 @@
 ## [Unreleased]
 
+## 3.11.7
+### Added
+* update translations
+* update ci steps names
+### Fixed
+* add accessibility to open and close buttons (#311)
+* fully apply Nextcloud AppMenu.vue updated (#326)
+* add missing label on the 'save' button in personal settings (fix #318)
+### Changed
+* upgrade axios
+* upgrade css-loader
+
 ## 3.11.6
 ### Fixed
 * add --background-invert-if-bright in top menu (fix #326)

appinfo/info.xml

@@ -32,7 +32,7 @@ Notice
 Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
 In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
 ]]></description>
-    <version>3.11.6</version>
+    <version>3.11.7</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>

css/sideMenu.css

@@ -83,6 +83,12 @@
   padding-left: 12px !important;
   margin-left: 5px !important;
   margin-left: 3px !important;
+  overflow: hidden;
+}
+
+.side-menu-opener span {
+  position: relative;
+  left: 50px;
 }
 
 .side-menu-opener:active, .side-menu-opener:focus {

package.json

@@ -11,7 +11,7 @@
 		"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
 	},
 	"dependencies": {
-		"axios": "^0.24.0",
+		"axios": "^1.6.7",
 		"trim": "^1.0.1",
 		"vue": "^2.6.11"
 	},
@@ -33,7 +33,7 @@
 		"@nextcloud/vue": "^7.12.1",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
-		"css-loader": "^3.4.2",
+		"css-loader": "^6.10.0",
 		"eslint": "^8.0.0",
 		"eslint-config-standard": "^17.0.0",
 		"eslint-import-resolver-webpack": "^0.12.1",

src/AppMenu.vue

@@ -168,6 +168,7 @@ $header-icon-size: 20px;
   flex-shrink: 1;
   flex-wrap: wrap;
 }
+
 .app-menu-main {
   display: flex;
   flex-wrap: nowrap;
@@ -177,7 +178,6 @@ $header-icon-size: 20px;
     height: 50px;
     position: relative;
     display: flex;
-    opacity: .7;
 
     &.app-menu-entry__active {
       opacity: 1;
@@ -217,6 +217,7 @@ $header-icon-size: 20px;
       width: $header-icon-size;
       height: $header-icon-size;
       padding: calc((100% - $header-icon-size) / 2);
+      box-sizing: content-box;
       filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
     }
 
@@ -226,8 +227,8 @@ $header-icon-size: 20px;
       font-size: 12px;
       color: var(--color-primary-text);
       text-align: center;
-      bottom: -5px;
       left: 50%;
+      top: 45%;
       display: block;
       min-width: 100%;
       transform: translateX(-50%);
@@ -235,6 +236,7 @@ $header-icon-size: 20px;
       width: 100%;
       text-overflow: ellipsis;
       overflow: hidden;
+      letter-spacing: -0.5px;
     }
 
     &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
@@ -242,11 +244,11 @@ $header-icon-size: 20px;
       opacity: 1;
       .app-menu-entry--label {
         opacity: 1;
-        font-weight: bold;
+        font-weight: bolder;
-        font-size: 14px;
         bottom: 0;
-        width: auto;
+        width: 100%;
-        overflow: visible;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
     }
   }
@@ -263,8 +265,10 @@ $header-icon-size: 20px;
   &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
   .app-menu-entry:not(.app-menu-entry__hidden-label):hover,
   .app-menu-entry:not(.app-menu-entry__hidden-label):focus {
+    opacity: 1;
+
     img {
-      margin-top: -6px;
+      margin-top: -8px;
     }
 
     .app-menu-entry--label {
@@ -280,7 +284,7 @@ $header-icon-size: 20px;
   &.app-menu-main__show-hovered .app-menu-entry:hover,
   &.app-menu-main__show-hovered .app-menu-entry:focus {
     img {
-      margin-top: -6px;
+      margin-top: -8px;
     }
 
     .app-menu-entry--label {
@@ -295,38 +299,42 @@ $header-icon-size: 20px;
 }
 
 ::v-deep .app-menu-more .button-vue--vue-tertiary {
-  color: var(--color-primary-text);
   opacity: .7;
   margin: 3px;
+  filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
-  &:hover {
+  &:not([aria-expanded="true"]) {
-    opacity: 1;
+    color: var(--color-primary-element-text);
-    background-color: transparent !important;
+
+    &:hover {
+      opacity: 1;
+      background-color: transparent !important;
+    }
   }
 
-  &:focus-visible {
+    &:focus-visible {
-    opacity: 1;
+      opacity: 1;
-    background-color: transparent !important;
+      outline: none !important;
-    border-radius: var(--border-radius);
+    }
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-primary-text);
-  }
 }
 
 .app-menu-popover-entry {
   .app-icon {
     position: relative;
     height: 44px;
+    width: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
 
     &.has-unread::after {
       background-color: var(--color-main-text);
     }
 
     img {
-      filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
       width: $header-icon-size;
       height: $header-icon-size;
-      padding: calc((50px - $header-icon-size) / 2);
     }
   }
 }
@@ -335,7 +343,7 @@ $header-icon-size: 20px;
   content: "";
   width: 8px;
   height: 8px;
-  background-color: var(--color-primary-text);
+  background-color: var(--color-primary-element-text);
   border-radius: 50%;
   position: absolute;
   display: block;

src/CloserButton.vue

@@ -15,11 +15,18 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <button class="side-menu-opener side-menu-closer"></button>
+  <button class="side-menu-opener side-menu-closer" :arial-label="label">
+    <span v-text="label"></span>
+  </button>
 </template>
 
 <script>
 export default {
   name: 'CloserButton',
+  data() {
+    return {
+      label: t('side_menu', 'Close the menu'),
+    }
+  }
 }
 </script>

src/OpenerButton.vue

@@ -15,7 +15,9 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <button class="side-menu-opener" :arial-label="label"></button>
+  <button class="side-menu-opener" :arial-label="label">
+    <span v-text="label"></span>
+  </button>
 </template>
 
 <script>
@@ -23,7 +25,7 @@ export default {
   name: 'OpenerButton',
   data() {
     return {
-      label: t('side_menu', 'Toggle menu'),
+      label: t('side_menu', 'Toggle the menu'),
     }
   }
 }

src/l10n/fixtures/cs.yaml

@@ -93,3 +93,4 @@
 "Hide labels on mouse over": "Skrýt popisky při najetím ukazatele myši"
 "Except the hovered app": "Except the hovered app"
 "Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/de.yaml

@@ -93,3 +93,4 @@
 "Hide labels on mouse over": "Labels ausblenden, wenn sich die Maus darüber befindet (Hover)"
 "Except the hovered app": "Except the hovered app"
 "Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/es.yaml

@@ -93,3 +93,4 @@
 "Hide labels on mouse over": "Ocultar las etiquetas al pasar el ratón"
 "Except the hovered app": "Except the hovered app"
 "Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/fr.yaml

@@ -93,3 +93,4 @@
 "Hide labels on mouse over": "Masquer le libellé des applications au passage de la souris"
 "Except the hovered app": "À l'exception de l'application survolée"
 "Search": "Rechercher"
+"Toggle the menu": "Basculer le menu"

src/l10n/fixtures/gl.yaml

@@ -0,0 +1,96 @@
+"Custom menu": "Custom menu"
+"Enable the custom menu": "Enable the custom menu"
+"No": "No"
+"Yes": "Yes"
+"Menu": "Menu"
+? 'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'
+: 'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'
+"Top menu": "Top menu"
+"Apps that not must be moved in the side menu": "Apps that not must be moved in the side menu"
+"If there is no selection then the global configuration is applied.": "If there is no selection then the global configuration is applied."
+"Experimental": "Experimental"
+"Save": "Save"
+"You like this app and you want to support me?": "You like this app and you want to support me?"
+"Buy me a coffee ☕": "Buy me a coffee ☕"
+"Hidden": "Hidden"
+"Small": "Small"
+"Normal": "Normal"
+"Big": "Big"
+"Hidden icon": "Hidden icon"
+"Small icon": "Small icon"
+"Normal icon": "Normal icon"
+"Big icon": "Big icon"
+"Hidden text": "Hidden text"
+"Small text": "Small text"
+"Normal text": "Normal text"
+"Big text": "Big text"
+"Colors": "Colors"
+"Background color": "Background color"
+"Background color of current app": "Background color of current app"
+"Text color": "Text color"
+"Loader": "Loader"
+"Icon": "Icon"
+"Same color": "Same color"
+"Opposite color": "Opposite color"
+"Transparent": "Transparent"
+"Opaque": "Opaque"
+"Opener": "Opener"
+"Default": "Default"
+"Default (dark)": "Default (dark)"
+"Hamburger": "Hamburger"
+"Hamburger (dark)": "Hamburger (dark)"
+"Hamburger 2": "Hamburger 2"
+"Hamburger 2 (dark)": "Hamburger 2 (dark)"
+"Before the logo": "Before the logo"
+"After the logo": "After the logo"
+"Position": "Position"
+"Show only the opener (hidden logo)": "Show only the opener (hidden logo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Do not display the side menu and the opener if there is no application (eg: public pages)."
+"Panel": "Panel"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
+"Display the big menu": "Display the big menu"
+"Display the logo": "Display the logo"
+"Icons and texts": "Icons and texts"
+"Loader enabled": "Loader enabled"
+"Tips": "Tips"
+"Always displayed": "Always displayed"
+"This is the automatic behavior when the menu is always displayed.": "This is the automatic behavior when the menu is always displayed."
+"Not compatible with touch screens.": "Not compatible with touch screens."
+"Big menu": "Big menu"
+"Live preview": "Live preview"
+"Open apps in new tab": "Open apps in new tab"
+"Use the global setting": "Use the global setting"
+"Use my selection": "Use my selection"
+"Show and hide the list of applications": "Show and hide the list of applications"
+"Use the avatar instead of the logo": "Use the avatar instead of the logo"
+"You do not have permission to change the settings.": "You do not have permission to change the settings."
+"Force this configuration to users": "Force this configuration to users"
+"Export the configuration": "Export the configuration"
+"Purge the cache": "Purge the cache"
+"Show the link to settings": "Show the link to settings"
+"The menu is enabled by default for users": "The menu is enabled by default for users"
+"Except when the configuration is forced.": "Except when the configuration is forced."
+"Apps that should not be displayed in the menu": "Apps that should not be displayed in the menu"
+"This feature is only compatible with the <code>big menu</code> display.": "This feature is only compatible with the <code>big menu</code> display."
+"The logo is a link to the default app": "The logo is a link to the default app"
+"Others": "Others"
+"Categories": "Categories"
+"Customize sorting": "Customize sorting"
+"Order by": "Order by"
+"Name": "Name"
+"Customed": "Customed"
+"Show and hide the list of categories": "Show and hide the list of categories"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "This parameters are used when Dark theme or Breeze Dark Theme are enabled."
+"Dark mode colors": "Dark mode colors"
+"With categories": "With categories"
+"Custom categories": "Custom categories"
+"Customize application categories": "Customize application categories"
+"Reset to default": "Reset to default"
+"Applications": "Applications"
+"Applications kept in the top menu": "Applications kept in the top menu"
+"Applications kept in the top menu but also shown in side menu": "Applications kept in the top menu but also shown in side menu"
+"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
+"Hide labels on mouse over": "Hide labels on mouse over"
+"Except the hovered app": "Except the hovered app"
+"Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/nl.yaml

@@ -93,3 +93,4 @@
 "Hide labels on mouse over": "Hide labels on mouse over"
 "Except the hovered app": "Except the hovered app"
 "Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/pt_BR.yaml

@@ -91,3 +91,4 @@
 "Applications kept in the top menu but also shown in side menu": "Aplicativos mantidos no menu superior, mas também mostrados no menu lateral"
 "These applications must be selected in the previous option.": "Estes aplicativos devem ser selecionados na opção anterior."
 "Hide labels on mouse over": "Ocultar descrição ao passar o mouse"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/ru.yaml

@@ -93,3 +93,4 @@
 "Hide labels on mouse over": "Скрыть название при наведении мыши"
 "Except the hovered app": "Except the hovered app"
 "Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/sk.yaml

@@ -91,3 +91,4 @@
 "Applications kept in the top menu but also shown in side menu": "Applications kept in the top menu but also shown in side menu"
 "These applications must be selected in the previous option.": "These applications must be selected in the previous option."
 "Hide labels on mouse over": "Hide labels on mouse over"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/tpl/base.yaml

@@ -1,98 +1,100 @@
-"Custom menu": ""
+"Custom menu": "Custom menu"
-"Enable the custom menu": ""
+"Enable the custom menu": "Enable the custom menu"
-"No": ""
+"No": "No"
-"Yes": ""
+"Yes": "Yes"
-"Menu": ""
+"Menu": "Menu"
 ? 'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span>
   to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to
   navigate.'
-: ''
+: 'Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span>
-"Top menu": ""
+  to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to
-"Apps that not must be moved in the side menu": ""
+  navigate.'
-"If there is no selection then the global configuration is applied.": ""
+"Top menu": "Top menu"
-"Experimental": ""
+"Apps that not must be moved in the side menu": "Apps that not must be moved in the side menu"
-"Save": ""
+"If there is no selection then the global configuration is applied.": "If there is no selection then the global configuration is applied."
-"You like this app and you want to support me?": ""
+"Experimental": "Experimental"
-"Buy me a coffee ☕": ""
+"Save": "Save"
-"Hidden": ""
+"You like this app and you want to support me?": "You like this app and you want to support me?"
-"Small": ""
+"Buy me a coffee ☕": "Buy me a coffee ☕"
-"Normal": ""
+"Hidden": "Hidden"
-"Big": ""
+"Small": "Small"
-"Hidden icon": ""
+"Normal": "Normal"
-"Small icon": ""
+"Big": "Big"
-"Normal icon": ""
+"Hidden icon": "Hidden icon"
-"Big icon": ""
+"Small icon": "Small icon"
-"Hidden text": ""
+"Normal icon": "Normal icon"
-"Small text": ""
+"Big icon": "Big icon"
-"Normal text": ""
+"Hidden text": "Hidden text"
-"Big text": ""
+"Small text": "Small text"
-"Colors": ""
+"Normal text": "Normal text"
-"Background color": ""
+"Big text": "Big text"
-"Background color of current app": ""
+"Colors": "Colors"
-"Text color": ""
+"Background color": "Background color"
-"Loader": ""
+"Background color of current app": "Background color of current app"
-"Icon": ""
+"Text color": "Text color"
-"Same color": ""
+"Loader": "Loader"
-"Opposite color": ""
+"Icon": "Icon"
-"Transparent": ""
+"Same color": "Same color"
-"Opaque": ""
+"Opposite color": "Opposite color"
-"Opener": ""
+"Transparent": "Transparent"
-"Default": ""
+"Opaque": "Opaque"
-"Default (dark)": ""
+"Opener": "Opener"
-"Hamburger": ""
+"Default": "Default"
-"Hamburger (dark)": ""
+"Default (dark)": "Default (dark)"
-"Hamburger 2": ""
+"Hamburger": "Hamburger"
-"Hamburger 2 (dark)": ""
+"Hamburger (dark)": "Hamburger (dark)"
-"Before the logo": ""
+"Hamburger 2": "Hamburger 2"
-"After the logo": ""
+"Hamburger 2 (dark)": "Hamburger 2 (dark)"
-"Position": ""
+"Before the logo": "Before the logo"
-"Show only the opener (hidden logo)": ""
+"After the logo": "After the logo"
-"Do not display the side menu and the opener if there is no application (eg: public pages).": ""
+"Position": "Position"
-"Panel": ""
+"Show only the opener (hidden logo)": "Show only the opener (hidden logo)"
-"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": ""
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "Do not display the side menu and the opener if there is no application (eg: public pages)."
-"Display the big menu": ""
+"Panel": "Panel"
-"Display the logo": ""
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
-"Icons and texts": ""
+"Display the big menu": "Display the big menu"
-"Loader enabled": ""
+"Display the logo": "Display the logo"
-"Tips": ""
+"Icons and texts": "Icons and texts"
-"Always displayed": ""
+"Loader enabled": "Loader enabled"
-"This is the automatic behavior when the menu is always displayed.": ""
+"Tips": "Tips"
-"Not compatible with touch screens.": ""
+"Always displayed": "Always displayed"
-"Big menu": ""
+"This is the automatic behavior when the menu is always displayed.": "This is the automatic behavior when the menu is always displayed."
-"Live preview": ""
+"Not compatible with touch screens.": "Not compatible with touch screens."
-"Open apps in new tab": ""
+"Big menu": "Big menu"
-"Use the global setting": ""
+"Live preview": "Live preview"
-"Use my selection": ""
+"Open apps in new tab": "Open apps in new tab"
-"Show and hide the list of applications": ""
+"Use the global setting": "Use the global setting"
-"Use the avatar instead of the logo": ""
+"Use my selection": "Use my selection"
-"You do not have permission to change the settings.": ""
+"Show and hide the list of applications": "Show and hide the list of applications"
-"Force this configuration to users": ""
+"Use the avatar instead of the logo": "Use the avatar instead of the logo"
-"Export the configuration": ""
+"You do not have permission to change the settings.": "You do not have permission to change the settings."
-"Purge the cache": ""
+"Force this configuration to users": "Force this configuration to users"
-"Show the link to settings": ""
+"Export the configuration": "Export the configuration"
-"The menu is enabled by default for users": ""
+"Purge the cache": "Purge the cache"
-"Except when the configuration is forced.": ""
+"Show the link to settings": "Show the link to settings"
-"Apps that should not be displayed in the menu": ""
+"The menu is enabled by default for users": "The menu is enabled by default for users"
-"This feature is only compatible with the <code>big menu</code> display.": ""
+"Except when the configuration is forced.": "Except when the configuration is forced."
-"The logo is a link to the default app": ""
+"Apps that should not be displayed in the menu": "Apps that should not be displayed in the menu"
-"Others": ""
+"This feature is only compatible with the <code>big menu</code> display.": "This feature is only compatible with the <code>big menu</code> display."
-"Categories": ""
+"The logo is a link to the default app": "The logo is a link to the default app"
-"Customize sorting": ""
+"Others": "Others"
-"Order by": ""
+"Categories": "Categories"
-"Name": ""
+"Customize sorting": "Customize sorting"
-"Customed": ""
+"Order by": "Order by"
-"Show and hide the list of categories": ""
+"Name": "Name"
-"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": ""
+"Customed": "Customed"
-"Dark mode colors": ""
+"Show and hide the list of categories": "Show and hide the list of categories"
-"With categories": ""
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "This parameters are used when Dark theme or Breeze Dark Theme are enabled."
-"Custom categories": ""
+"Dark mode colors": "Dark mode colors"
-"Customize application categories": ""
+"With categories": "With categories"
-"Reset to default": ""
+"Custom categories": "Custom categories"
-"Applications": ""
+"Customize application categories": "Customize application categories"
-"Applications kept in the top menu": ""
+"Reset to default": "Reset to default"
-"Applications kept in the top menu but also shown in side menu": ""
+"Applications": "Applications"
-"These applications must be selected in the previous option.": ""
+"Applications kept in the top menu": "Applications kept in the top menu"
-"Hide labels on mouse over": ""
+"Applications kept in the top menu but also shown in side menu": "Applications kept in the top menu but also shown in side menu"
-"Except the hovered app": ""
+"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
-"Search": ""
+"Hide labels on mouse over": "Hide labels on mouse over"
-"Toggle menu": ""
+"Except the hovered app": "Except the hovered app"
+"Search": "Search"
+"Toggle the menu": "Toggle the menu"

src/l10n/fixtures/zh_CN.yaml

@@ -93,3 +93,4 @@
 "Hide labels on mouse over": "Hide labels on mouse over"
 "Except the hovered app": "Except the hovered app"
 "Search": "Search"
+"Toggle menu": "Toggle menu"

src/lib/createElement.js

@@ -3,7 +3,13 @@ module.exports = (tagName, attributes) => {
 
   if (typeof attributes === 'object') {
     for (let i in attributes) {
-      element.setAttribute(i, attributes[i])
+      if (i === 'text') {
+        element.textContent = attributes[i]
+      } else if (i === 'html') {
+        element.innerHTML = attributes[i]
+      } else {
+        element.setAttribute(i, attributes[i])
+      }
     }
   }
 

templates/js/script.php

@@ -16,7 +16,8 @@ if ($_['always-displayed']) {
   const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
   const sideMenuOpener = SMcreateElement('button', {
     'class': 'side-menu-opener',
-    'arial-label': t('side_menu', 'Toggle menu')
+    'arial-label': t('side_menu', 'Toggle the menu'),
+    'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
   })
   const sideMenu = SMcreateElement('div', {id: 'side-menu'})
 
@@ -38,6 +39,15 @@ if ($_['always-displayed']) {
     sideMenu.setAttribute('data-sidewithcategories', '1')
   <?php endif; ?>
 
+  const sideMenuFocus = () => {
+    let a = document.querySelector('#side-menu .side-menu-app.active a')
+      || document.querySelector('#side-menu .side-menu-app a')
+
+    if (a) {
+      a.focus()
+    }
+  }
+
   document.querySelector('body').addEventListener('side-menu.apps', (e) => {
     const apps = e.detail.apps;
 
@@ -80,22 +90,6 @@ if ($_['always-displayed']) {
       return
     }
 
-    sideMenuFocus = () => {
-      let a = document.querySelector('.side-menu-app.active a', sideMenu)
-
-      if (!a) {
-        return
-      }
-
-      if (a.length === 0) {
-        a = sideMenu.querySelector('.side-menu-app:first-child a')
-      }
-
-      if (a.length > 0) {
-        a.focus()
-      }
-    }
-
     <?php if ($_['opener-hover']): ?>
       const sideMenuMouseLeave = () => {
         sideMenu.classList.remove('open')
@@ -127,14 +121,8 @@ if ($_['always-displayed']) {
 
     headerMenuOpener.addEventListener('click', () => {
       sideMenu.classList.add('open')
-
-      const a = sideMenu.querySelector('.side-menu-app.active a')
-
-      if (a !== null) {
-        a.focus()
-      }
-
       headerMenuOpener.blur()
+      sideMenuFocus()
     })
 
     for (let opener of sideMenuOpener) {

templates/settings/personal-form.php

@@ -241,6 +241,7 @@ $labelReset = 'Reset to default';
     <div class="section">
         <?php if (!$_['force']): ?>
             <button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
+                <?php p($l->t('Save')); ?>
                 <progress max="100" value="0" id="side-menu-save-progress"></progress>
             </button>