Merge branch 'develop'

update changelog
2021-07-09 12:55:07 +02:00 · 2021-07-09 12:55:05 +02:00 · 2021-07-09 12:54:32 +02:00 · 2021-07-09 12:54:28 +02:00 · 2021-07-09 12:43:01 +02:00 · 2021-07-09 12:42:51 +02:00
16 changed files with 758 additions and 250 deletions
@@ -0,0 +1,261 @@
+## [Unreleased]
+
+## 1.25.2
+### Fixed
+- fix CHANGELOG
+
+## 1.25.1
+### Added
+- add PHP version as dependency
+- add chinese translation
+### Fixed
+- fix CHANGELOG
+
+## 1.25.0
+### Added
+- add compatibility with Nextcloud 22
+- add CHANGELOG.md (fix #59)
+- update app icon
+
+## 1.24.0
+### Added
+- add option to define the background opacity (fix #53)
+- add missing translations
+
+## 1.23.1
+### Fixed
+- fix but wih dark mode opener option
+
+## 1.23.0
+### Added
+- add support of dark Theme and Breeze Dark
+- add support of Nextcloud 21
+
+## 1.22.2
+### Fixed
+- fix regression: apps does not open in new tab (fix #55)
+
+## 1.22.1
+### Fixed
+- fix regression: apps does not open in new tab
+
+## 1.22.0
+### Added
+- Add option to sort categories (fix #53)
+- Update admin UI
+
+## 1.21.0
+### Added
+- [FEATURE] Logo in the menu links to main page of installation (#51)
+
+## 1.20.1
+### Fixed
+- Fix translations
+
+## 1.20.0
+### Added
+- [FEATURE] Ability to remove apps from the Big Menu (#49)
+
+## 1.19.1
+### Fixed
+- fix #47: setting for list/grid view in files app flashes and dissapears
+
+## 1.19.0
+### Added
+- add option: the menu is enabled by default for users (fix #46)
+
+## 1.18.0
+### Added
+- add option to show link to settings (fix #44)
+- refactor menus using several components
+
+## 1.17.0
+### Added
+- compliance with the app checker
+- add an action to export the configuration
+- add an action to purge the cache
+
+## 1.16.3
+### Fixed
+- fix links that must be opened in new window (https://help.nextcloud.com/t/external-petit-probleme-concernant-lapplication-external-sites-ou-sites-externes/94884/11)
+
+## 1.16.2
+### Fixed
+- fix issue with personal settings when global settings are forced
+
+## 1.16.1
+### Fixed
+- fix #42: add cache to manage failures to access apps.nextcloud.com
+- fix #41: side menu was hover apps list
+
+## 1.16.0
+### Added
+- add an option to force settings to users (fix #38)
+
+## 1.15.0
+### Changed
+- New name
+### Fixed
+- Fix #36: always displayed is not expanding
+
+## 1.14.0
+### Added
+- add an api accessed by components
+- add a config proxy in controllers
+### Fixed
+- fix translations
+
+## 1.13.0
+### Added
+- add an option to display the avatar instead of the logo (fix #34)
+
+## 1.12.3
+### Added
+- add a delay before moving elements (fix #33)
+
+## 1.12.2
+### Fixed
+- fix #30: `Always displayed` menu can not be close using touchscreens
+
+## 1.12.1
+### Fixed
+- fix typo
+- fix translations
+
+## 1.12.0
+### Fixed
+- fix #30: administrators and users can select what apps must be opened in new tab
+- fix typo
+
+## 1.11.0
+### Added
+- add the option for opening apps in new tab (fix #29)
+### Fixed
+- fix issue with the header of the always displayed menu
+
+## 1.10.0
+### Added
+- add images to select the display of the menu
+- add live preview
+- update translations
+- update app info
+
+## 1.9.3
+### Fixed
+- fix regression with logo display
+
+## 1.9.2
+### Added
+- add the option “always displayed” which fixes the position of the menu to the left and always displays the application icons (fix #21, fix #2)
+
+## 1.8.6
+### Added
+- add translations: `fr` and `de`
+- improve and publish the `Makefile`
+- update documentation
+
+## 1.8.5
+### Fixed
+- fix #28: menu items invisible after 1.8.4
+
+## 1.8.4
+### Fixed
+- fix #27: disable side menu on public pages - broken in 1.8.3
+
+## 1.8.3
+### Fixed
+- fix alphabetic order of apps (#26)
+
+## 1.8.2
+### Added
+- add icon for closing the big menu (fix #25)
+### Fixed
+- fix hidden icons in the top menu (fix #23)
+- fix missing apps (fix #24)
+
+## 1.8.1
+### Fixed
+- fix issue with links
+- fix missing l10n files
+
+## 1.8.0
+### Added
+- add a `big menu` display (fix #22)
+- add the possibility to choose what apps are displayed in the top menu (fix #22)
+- add icon color filter
+- add icon opacity filter
+
+## 1.8.0-rc2
+
+## 1.7.0
+### Added
+- add a loader when the page is unloading
+- add compatibility with Nextcloud 19
+
+## 1.6.3
+### Fixed
+- fix #20: add a shortcut to open and to hide the menu
+
+## 1.6.2
+### Fixed
+- fix #19: add a cache to limit flashes
+
+## 1.6.1
+### Fixed
+- fix #19: add a hack to show external sites in the top menu with navigation
+
+## 1.6.0
+### Added
+- Add a page of personal settings
+- Add an option to disable the side menu as user
+- Refactoring of javascripts
+
+## 1.5.0
+### Added
+- add option to force light icons instead of dark icons
+### Fixed
+- fix #19: add option to keep external sites in the top menu
+- fix #16 #17: add dark icons and handle the svg filters
+
+## 1.4.1
+### Added
+- Rendering  harmonization with browsers
+### Fixed
+- FIX #15: make menu start after icon
+
+## 1.4.0
+### Fixed
+- Fix #12: add an option to hide the opener and the panel when there is no application
+
+## 1.3.4
+### Fixed
+- FIX #14: add option to show only the opener
+- FIX #13: add alternate hamburger icon
+- FIX #11: remove error in the console
+
+## 1.3.3
+### Added
+- Add a second background color to create a background gradiant
+- Update documentation
+### Fixed
+- FIX #10: add options to select the size of the icons and the text, or hide them
+
+## 1.3.2
+### Fixed
+- FIX #9: opener icon not visible with multiple apps_paths
+
+## 1.3.1
+### Fixed
+- FIX #3: Add an opition the choose the position of the opener (after or before the logo)
+- FIX #8: Remove extension of dynamic asset's routes (js, css)
+
+## 1.3.0
+### Added
+- `main.js` is replaced by a controller and a template
+### Fixed
+-  FIX #2: add option to open the menu by hovering over opener
+
+## 1.2.4
+### Fixed
+- FIX #7: Opener icon not visible in Safari
+
@@ -13,7 +13,7 @@ release: npm-build translations

 	test -d releases/$$VERSION && rm -fr releases/$$VERSION
 	mkdir -p releases/$$VERSION/side_menu
-	cp -r README.md appinfo css lib img l10n js src templates screenshots releases/$$VERSION/side_menu
+	cp -r README.md CHANGELOG.md appinfo css lib img l10n js src templates screenshots releases/$$VERSION/side_menu
 	cd releases/$$VERSION
 	zip -r side_menu_v$$VERSION.zip side_menu
 	tar cvzf side_menu_v$$VERSION.tar.gz side_menu
@@ -6,7 +6,7 @@ You can also define apps that must be displayed in the top menu. Fully customisa

 This application is rather suitable for instances that activate a lot of applications.

-Comptatible with AppOrder.
+You can customize colors depending of the theme (Dark theme and Breeze Dark). Comptatible with AppOrder.

 * [Installation and upgrade](#installation-and-upgrade)
 * [How to contribute?](#how-to-contribute)
@@ -11,7 +11,7 @@ This application is rather suitable for instances that activate a lot of applica

 Use the shortcut `Ctrl`+`o` to open and to hide the side menu. Use `tab` to navigate.

-Comptatible with AppOrder.
+You can customize colors depending of the theme (Dark theme and Breeze Dark). Comptatible with AppOrder.

 You can report a bug or request a feature by opening an issue.

@@ -26,7 +26,7 @@ If you like this application and if you want to support the development:
 * [Donate with liberapay](https://liberapay.com/deblan)
 * [Leave a comment](https://apps.nextcloud.com/apps/side_menu#comments)
 ]]></description>
-    <version>1.22.0</version>
+    <version>1.25.2</version>
    <licence>agpl</licence>
    <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
    <namespace>SideMenu</namespace>
@@ -46,7 +46,8 @@ If you like this application and if you want to support the development:
    <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc20_big_menu_responsive.png</screenshot>
    <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/personal_settings.png</screenshot>
    <dependencies>
-        <nextcloud min-version="18" max-version="20"/>
+        <nextcloud min-version="18" max-version="22"/>
+        <php min-version="7.3"/>
    </dependencies>
    <settings>
        <admin>OCA\SideMenu\Settings\Admin</admin>
@@ -111,3 +111,11 @@
    display: table-cell;
    width: 300px;
 }
+
+.side-menu-setting-label-short {
+    width: 300px;
+}
+
+.side-menu-setting-form-long {
+    width: 400px;
+}
@@ -1,113 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="37.099998mm"
-   height="37.099998mm"
-   viewBox="0 0 37.099998 37.099998"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
-   sodipodi:docname="icon.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="2.8"
-     inkscape:cx="242.1839"
-     inkscape:cy="32.026866"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1918"
-     inkscape:window-height="1027"
-     inkscape:window-x="1920"
-     inkscape:window-y="21"
-     inkscape:window-maximized="0"
-     inkscape:snap-nodes="false" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Calque 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-59.922223,-92.669069)">
-    <rect
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#1a1a1a;stroke-width:1.46500015;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:fill markers stroke;enable-background:accumulate"
-       id="rect815-6-2-7"
-       width="34.535"
-       height="34.535"
-       x="61.204723"
-       y="93.951569"
-       rx="5.4806547"
-       ry="5.4806547" />
-    <rect
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;vector-effect:none;fill:#ececec;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.46500015;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:fill markers stroke;enable-background:accumulate"
-       id="rect815-6-7"
-       width="20.357224"
-       height="33.40107"
-       x="61.677193"
-       y="94.518532"
-       rx="0"
-       ry="0" />
-    <path
-       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.16499996;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 66.59458,111.16177 h 9.997359"
-       id="path873-5"
-       inkscape:connector-curvature="0" />
-    <g
-       id="g1018"
-       transform="translate(2.6458333)"
-       style="stroke:#333333;stroke-opacity:1">
-      <g
-         id="g1013"
-         style="stroke:#333333;stroke-opacity:1">
-        <path
-           style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.16499996;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-           d="M 63.948747,103.80467 H 75.349244"
-           id="path873"
-           inkscape:connector-curvature="0" />
-        <path
-           style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.16499996;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-           d="M 63.948747,118.51887 H 75.349244"
-           id="path873-5-3"
-           inkscape:connector-curvature="0" />
-      </g>
-    </g>
-    <rect
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#333333;stroke-width:2.56500006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:fill markers stroke;enable-background:accumulate"
-       id="rect815-6-2"
-       width="34.535"
-       height="34.535"
-       x="61.204723"
-       y="93.951569"
-       rx="5.4806547"
-       ry="5.4806547" />
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="145.889" height="145.889" viewBox="0 0 38.6 38.6"><g transform="translate(-59.172 -91.92)" stroke="#000" fill="none"><path d="M66.595 111.162h9.997M66.595 103.805h11.4m-11.4 14.714h11.4" stroke-width="3.165"/><rect width="34.535" height="34.535" x="61.205" y="93.952" overflow="visible" rx="5.481" ry="5.481" style="marker:none" color="#000" stroke-width="4.065" stroke-linecap="round" paint-order="fill markers stroke"/></g></svg>
@@ -65,29 +65,68 @@ class CssController extends Controller

    protected function getConfig(): array
    {
-        $backgroundColor = $this->config->getAppValue('background-color', '#333333');
-        $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
        $isForced = $this->config->getAppValueBool('force', '0');
        $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');

+        $isAccessibilityAppEnabled = $this->config->getAppValueBool('enabled', '0', 'accessibility');
+        $isBreezeDarkAppEnabled = $this->config->getAppValueBool('enabled', '0', 'breezedark');
+        $isBreezeDarkGlobalEnabled = $this->config->getAppValueBool('theme_enabled', '0', 'breezedark');
+
        if ($this->user) {
            $userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]');

            if (!empty($userTopMenuApps) && !$isForced) {
                $topMenuApps = $userTopMenuApps;
            }
+
+            $isDarkThemeUserEnabled = $this->config->getUserValue($this->user, 'theme', '', 'accessibility') === 'dark';
+            $isBreezeDarkUserEnabled = $this->config->getUserValue($this->user, 'theme_enabled', '', 'breezedark');
+
+            $isBreezeDarkUserEnabled = $isBreezeDarkUserEnabled === '1' || ($isBreezeDarkGlobalEnabled && $isBreezeDarkUserEnabled === '');
+        } else {
+            $isDarkThemeUserEnabled = false;
+            $isBreezeDarkUserEnabled = false;
        }

+        $isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) || ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled);
+
+        if ($isDarkMode) {
+            $backgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333');
+            $backgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $backgroundColor);
+            $currentAppBackgroundColor = $this->config->getAppValue('dark-mode-current-app-background-color', '#444444');
+            $loaderColor = $this->config->getAppValue('dark-mode-loader-color', '#cccccc');
+            $textColor = $this->config->getAppValue('dark-mode-text-color', '#FFFFFF');
+            $iconInvertFilter = abs($this->config->getAppValueInt('dark-mode-icon-invert-filter', '0')).'%';
+            $iconOpacity = abs($this->config->getAppValueInt('dark-mode-icon-opacity', '100') / 100);
+            $opener = $this->config->getAppValue('dark-mode-opener', 'side-menu-opener');
+
+            $backgroundOpacity = dechex($this->config->getAppValueInt('dark-mode-background-color-opacity', '100') * 255 / 100);
+        } else {
+            $backgroundColor = $this->config->getAppValue('background-color', '#333333');
+            $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
+            $currentAppBackgroundColor = $this->config->getAppValue('current-app-background-color', '#444444');
+            $loaderColor = $this->config->getAppValue('loader-color', '#0e75ac');
+            $textColor = $this->config->getAppValue('text-color', '#FFFFFF');
+            $iconInvertFilter = abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%';
+            $iconOpacity = abs($this->config->getAppValueInt('icon-opacity', '100') / 100);
+            $opener = $this->config->getAppValue('opener', 'side-menu-opener');
+
+            $backgroundOpacity = dechex($this->config->getAppValueInt('background-color-opacity', '100') * 255 / 100);
+        }
+
+        $backgroundColor .= $backgroundOpacity;
+        $backgroundColorTo .= $backgroundOpacity;
+
        return [
            'vars' => [
                'background-color' => $backgroundColor,
                'background-color-to' => $backgroundColorTo,
-                'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'),
-                'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
-                'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
-                'opener' => $this->config->getAppValue('opener', 'side-menu-opener'),
-                'icon-invert-filter' => abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%',
-                'icon-opacity' => abs($this->config->getAppValueInt('icon-opacity', '100') / 100),
+                'current-app-background-color' => $currentAppBackgroundColor,
+                'loader-color' => $loaderColor,
+                'text-color' => $textColor,
+                'opener' => $opener,
+                'icon-invert-filter' => $iconInvertFilter,
+                'icon-opacity' => $iconOpacity,
            ],
            'display-logo' => $this->config->getAppValueBool('display-logo', '1'),
            'opener-only' => $this->config->getAppValueBool('opener-only', '0'),
@@ -23,43 +23,47 @@ class ConfigProxy
        $this->config = $config;
    }

-    public function getAppValue(string $name, string $default): string
+    public function getAppValue(string $name, string $default, $appId = null): string
    {
-        return (string) $this->config->getAppValue(Application::APP_ID, $name, $default);
+        return (string) $this->config->getAppValue($appId ?? Application::APP_ID, $name, $default);
    }

-    public function getUserValue(User $user, string $name, string $default): string
+    public function getUserValue(User $user, string $name, string $default, $appId = null): string
    {
-        return (string) $this->config->getUserValue($user->getUid(), Application::APP_ID, $name, $default);
+        return (string) $this->config->getUserValue($user->getUid(), $appId ?? Application::APP_ID, $name, $default);
    }

-    public function getAppValueBool(string $name, string $default): bool
+    public function getAppValueBool(string $name, string $default, $appId = null): bool
    {
-        return (bool) $this->getAppValue($name, $default);
+        return (bool) $this->getAppValue($name, $default, $appId);
    }

-    public function getAppValueArray(string $name, string $default): array
+    public function getAppValueArray(string $name, string $default, $appId = null): array
    {
-        return (array) json_decode($this->getAppValue($name, $default), true);
+        return (array) json_decode($this->getAppValue($name, $default, $appId), true);
    }

-    public function getAppValueInt(string $name, string $default): int
+    public function getAppValueInt(string $name, string $default, $appId = null): int
    {
-        return (int) $this->getAppValue($name, $default);
+        return (int) $this->getAppValue($name, $default, $appId);
    }

-    public function getUserValueBool(User $user, string $name, string $default): bool
+    public function getUserValueBool(User $user, string $name, string $default, $appId = null): bool
    {
-        return (bool) $this->getUserValue($user, $name, $default);
+        return (bool) str_replace(
+            ['yes', 'no'],
+            ['1', '0'],
+            $this->getUserValue($user, $name, $default, $appId)
+        );
    }

-    public function getUserValueArray(User $user, string $name, string $default): array
+    public function getUserValueArray(User $user, string $name, string $default, $appId = null): array
    {
-        return (array) json_decode($this->getUserValue($user, $name, $default), true);
+        return (array) json_decode($this->getUserValue($user, $name, $default, $appId), true);
    }

-    public function getUserValueInt(User $user, string $name, string $default): int
+    public function getUserValueInt(User $user, string $name, string $default, $appId = null): int
    {
-        return (int) $this->getUserValue($user, $name, $default);
+        return (int) $this->getUserValue($user, $name, $default, $appId);
    }
 }
@@ -76,17 +76,30 @@ class Admin implements ISettings
        $backgroundColor = $this->config->getAppValue('background-color', '#333333');
        $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);

+        $darkModeBackgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333');
+        $darkModeBackgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkModeBackgroundColor);
+
        $parameters = [
            'background-color' => $backgroundColor,
            'background-color-to' => $backgroundColorTo,
+            'background-color-opacity' => $this->config->getAppValueInt('background-color-opacity', '100'),
            'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'),
            'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
            'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
            'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'),
-            'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
            'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
-            'cache' => $this->config->getAppValue('cache', '0'),
+            'dark-mode-background-color' => $darkModeBackgroundColor,
+            'dark-mode-background-color-to' => $darkModeBackgroundColorTo,
+            'dark-mode-background-color-opacity' => $this->config->getAppValueInt('dark-mode-background-color-opacity', '100'),
+            'dark-mode-current-app-background-color' => $this->config->getAppValue('dark-mode-current-app-background-color', '#444444'),
+            'dark-mode-loader-color' => $this->config->getAppValue('dark-mode-loader-color', '#cccccc'),
+            'dark-mode-icon-invert-filter' => $this->config->getAppValueInt('dark-mode-icon-invert-filter', '0'),
+            'dark-mode-icon-opacity' => $this->config->getAppValueInt('dark-mode-icon-opacity', '100'),
+            'dark-mode-text-color' => $this->config->getAppValue('dark-mode-text-color', '#FFFFFF'),
+            'dark-mode-opener' => $this->config->getAppValue('dark-mode-opener', 'side-menu-opener'),
            'opener' => $this->config->getAppValue('opener', 'side-menu-opener'),
+            'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
+            'cache' => $this->config->getAppValue('cache', '0'),
            'always-displayed' => $this->config->getAppValue('always-displayed', '0'),
            'big-menu' => $this->config->getAppValue('big-menu', '0'),
            'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'),
@@ -45,7 +45,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                v-bind:icon="app.icon"
                v-bind:label="app.name"
                v-bind:href="app.href"
-                v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
+                v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
            />
        </ul>
    </div>
@@ -110,6 +110,12 @@ jQuery(document).ready(() => {
        var name = target.attr('name')
        var value = target.val()

+        if ('background-color-opacity' === name) {
+            return $('#side-menu-background-color, #side-menu-background-color-to').trigger('change');
+        } else if ('dark-mode-background-color-opacity' === name) {
+            return $('#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to').trigger('change');
+        }
+
        if (name === 'opener') {
            var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')

@@ -120,6 +126,16 @@ jQuery(document).ready(() => {
            value/=100;
        }

+        if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
+            var opacity = parseInt($('#side-menu-dark-mode-background-color-opacity').val() * 255 / 100);
+
+            value = [value, opacity.toString(16)].join('');
+        } else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
+            var opacity = parseInt($('#side-menu-background-color-opacity').val() * 255 / 100);
+
+            value = [value, opacity.toString(16)].join('');
+        }
+
        document.documentElement.style.setProperty('--side-menu-' + name, value)
    })

@@ -74,3 +74,5 @@
 "Name": "Name"
 "Customed": "Kundenspezifisch"
 "Show and hide the list of categories": "Liste der Kategorien ein- und ausblenden"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Diese Parameter werden verwendet, wenn Dark Theme oder Breeze Dark Theme aktiviert sind."
+"Dark mode colors": "Dunkle Modusfarben"
@@ -74,3 +74,5 @@
 "Name": "Nom"
 "Customed": "Personnalisé"
 "Show and hide the list of categories": "Afficher et masquer la liste des catégories"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Ces paramètres sont utilisés lorsque le thème sombre ou le thème Breeze Dark sont activés."
+"Dark mode colors": "Couleurs du mode sombre"
@@ -0,0 +1,78 @@
+"Custom menu": "自定义菜单"
+"Enable the custom menu": "激活自定义菜单"
+"No": "取消"
+"Yes": "确定"
+"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.": "使用快捷键 <span class=\"keyboard-key\">Ctrl<\/span>+<span class=\"keyboard-key\">o<\/span> 打开或隐藏侧边栏菜单。使用<span class=\"keyboard-key\">tab<\/span> 来导航。"
+"Top menu": "顶部菜单"
+"Apps that not must be moved in the side menu": "禁止在侧边栏菜单移动的应用"
+"If there is no selection then the global configuration is applied.": "如不选择，将应用全局设定。"
+"Experimental": "实验性"
+"Save": "保存"
+"You like this app and you want to support me?": "喜欢本应用并支持我一下？"
+"Buy me a coffee ☕": "赏一杯咖啡 ☕ 给我"
+"Hidden": "隐藏"
+"Small": "小型"
+"Normal": "标准"
+"Big": "大型"
+"Colors": "颜色"
+"Background color": "背景颜色"
+"Background color of current app": "当前应用的背景色"
+"Text color": "文字颜色"
+"Loader": "菜单指示器"
+"Icon": "图标"
+"Same color": "相同颜色"
+"Opposite color": "相反颜色"
+"Transparent": "透明"
+"Opaque": "不透明"
+"Opener": "容器"
+"Default": "默认"
+"Default (dark)": "默认(深色)"
+"Hamburger": "Hamburger"
+"Hamburger (dark)": "Hamburger (深色)"
+"Hamburger 2": "Hamburger 2"
+"Hamburger 2 (dark)": "Hamburger 2 (深色)"
+"Before the logo": "在logo前"
+"After the logo": "在logo后"
+"Position": "位置"
+"Show only the opener (hidden logo)": "只显示容器 (隐藏logo)"
+"Do not display the side menu and the opener if there is no application (eg: public pages).": "N如果没有应用，不显示侧边栏菜单和容器 (例如 : 公共页面)。"
+"Panel": "面板"
+"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "鼠标悬停时打开菜单 (触摸屏时将自动禁用)"
+"Display the big menu": "显示大型菜单"
+"The big menu is not compatible with AppOrder.": "大型菜单与应用顺序不兼容"
+"Display the logo": "显示logo"
+"This feature is not compatible with the <code>big menu<\/code> display.": "此功能与显示<code>大型菜单<\/code>不兼容。"
+"Icons and texts": "图标与文字"
+"Loader enabled": "菜单指示器已激活"
+"Tips": "技巧"
+"Always displayed": "一直显示"
+"The logo will be hidden when the menu is always displayed.": "一直显示菜单时logo将被隐藏。"
+"This is the automatic behavior when the menu is always displayed.": "一直显示菜单时的自动动作。"
+"Not compatible with touch screens.": "与触屏不兼容。"
+"Big menu": "大型菜单"
+"Live preview": "实时预览"
+"Open apps in new tab": "在新标签中打开应用"
+"Use the global setting": "使用全局设定"
+"Use my selection": "使用自定义设定"
+"Show and hide the list of applications": "显示或隐藏应用列表"
+"Use the avatar instead of the logo": "使用头像代替logo"
+"You do not have permission to change the settings.": "没有更改设置的权限。"
+"Force this configuration to users": "强制用户使用此设置"
+"Export the configuration": "导出设置"
+"Purge the cache": "清除缓存"
+"Show the link to settings": "显示设置链接"
+"The menu is enabled by default for users": "用户的默认菜单已激活"
+"Except when the configuration is forced.": "除非设置被强制使用。"
+"Apps that should not be displayed in the menu": "禁止在菜单中显示的应用"
+"This feature is only compatible with the <code>big menu<\/code> display.": "此功能只和<code>大型菜单<\/code>兼容。"
+"The logo is a link to the default app": "logo链接到默认应用"
+"Others": "其他"
+"Categories": "类别"
+"Customize sorting": "自定义顺序"
+"Order by": "排序规则"
+"Name": "名称"
+"Customed": "自定义"
+"Show and hide the list of categories": "显示或隐藏类别列表"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "此参数将应用于暗黑主题激活时。"
+"Dark mode colors": "暗黑模式颜色"
@@ -48,118 +48,143 @@ $choicesSizes = [
            <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
        </h2>

-        <div>
-            <label for="side-menu-background-color">
-                <?php p($l->t('Background color')); ?>
-            </label>
-        </div>
-        <div>
-            <input
-                id="side-menu-background-color"
-                name="background-color"
-                type="color"
-                class="side-menu-setting side-menu-setting-live"
-                value="<?php print_unescaped($_['background-color']); ?>">
-            <input
-                id="side-menu-background-color-to"
-                name="background-color-to"
-                type="color"
-                class="side-menu-setting side-menu-setting-live"
-                value="<?php print_unescaped($_['background-color-to']); ?>">
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Background color')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        id="side-menu-background-color"
+                        name="background-color"
+                        type="color"
+                        class="side-menu-setting side-menu-setting-live"
+                        value="<?php print_unescaped($_['background-color']); ?>">
+                    <input
+                        id="side-menu-background-color-to"
+                        name="background-color-to"
+                        type="color"
+                        class="side-menu-setting side-menu-setting-live"
+                        value="<?php print_unescaped($_['background-color-to']); ?>">
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-background-color-opacity"
+                            name="background-color-opacity"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['background-color-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
+                </div>
+
+            </div>
        </div>

-        <div>
-            <label for="side-menu-current-app-background-color">
-                <?php p($l->t('Background color of current app')); ?>
-            </label>
-        </div>
-        <div>
-            <input
-                id="side-menu-current-app-background-color"
-                name="current-app-background-color"
-                type="color"
-                class="side-menu-setting side-menu-setting-live"
-                value="<?php print_unescaped($_['current-app-background-color']); ?>">
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Background color of current app')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        id="side-menu-current-app-background-color"
+                        name="current-app-background-color"
+                        type="color"
+                        class="side-menu-setting side-menu-setting-live"
+                        value="<?php print_unescaped($_['current-app-background-color']); ?>">
+                </div>
+            </div>
        </div>

-        <div>
-            <label for="side-menu-text-color">
-                <?php p($l->t('Text color')); ?>
-            </label>
-        </div>
-        <div>
-            <input
-                id="side-menu-text-color"
-                name="text-color"
-                type="color"
-                class="side-menu-setting side-menu-setting-live"
-                value="<?php print_unescaped($_['text-color']); ?>">
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Text color')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        id="side-menu-text-color"
+                        name="text-color"
+                        type="color"
+                        class="side-menu-setting side-menu-setting-live"
+                        value="<?php print_unescaped($_['text-color']); ?>">
+                </div>
+            </div>
        </div>

-        <div>
-            <label for="side-menu-text-color">
-                <?php p($l->t('Loader')); ?>
-            </label>
-        </div>
-        <div>
-            <input
-                id="side-menu-loader-color"
-                name="loader-color"
-                type="color"
-                class="side-menu-setting"
-                value="<?php print_unescaped($_['loader-color']); ?>">
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Loader')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        id="side-menu-loader-color"
+                        name="loader-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['loader-color']); ?>">
+                </div>
+            </div>
        </div>

-        <div>
-            <label for="side-menu-icon-invert-filter">
-                <?php p($l->t('Icon')); ?>
-            </label>
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Icon')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <div>
+                        <em>
+                            <?php p($l->t('Same color')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-icon-invert-filter"
+                            name="icon-invert-filter"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['icon-invert-filter'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opposite color')); ?>
+                        </em>
+                    </div>
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-icon-opacity"
+                            name="icon-opacity"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['icon-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
+                </div>
+            </div>
        </div>

-        <div>
-            <em>
-                <?php p($l->t('Same color')); ?>
-            </em>
-
-            <input
-                type="range"
-                min="0" max="100"
-                id="side-menu-icon-invert-filter"
-                name="icon-invert-filter"
-                class="side-menu-setting side-menu-setting-live"
-                value="<?php echo $_['icon-invert-filter'] ?>"
-            >
-
-            <em>
-                <?php p($l->t('Opposite color')); ?>
-            </em>
-        </div>
-
-        <div>
-            <em>
-                <?php p($l->t('Transparent')); ?>
-            </em>
-
-            <input
-                type="range"
-                min="0" max="100"
-                id="side-menu-icon-opacity"
-                name="icon-opacity"
-                class="side-menu-setting side-menu-setting-live"
-                value="<?php echo $_['icon-opacity'] ?>"
-            >
-
-            <em>
-                <?php p($l->t('Opaque')); ?>
-            </em>
-        </div>
-    </div>
-
-    <div class="section">
-        <h2>
-            <?php p($l->t('Opener')); ?>
-        </h2>
-
        <div class="side-menu-setting-table">
            <?php
                $choices = [
@@ -172,11 +197,10 @@ $choicesSizes = [
                ];
            ?>
            <div class="side-menu-setting-row">
-                <div class="side-menu-setting-label">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
                    <?php p($l->t('Icon')); ?>
-                    <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
                </div>
-                <div class="side-menu-setting-form">
+                <div class="side-menu-setting-form side-menu-setting-form-long">
                    <select id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live">
                        <?php foreach ($choices as $label => $value): ?>
                            <option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
@@ -186,7 +210,179 @@ $choicesSizes = [
                    </select>
                </div>
            </div>
+        </div>

+        <h2>
+            <?php p($l->t('Dark mode colors')); ?>
+        </h2>
+
+        <p>
+            <?php p($l->t('This parameters are used when Dark theme or Breeze Dark Theme are enabled.')); ?>
+        </p>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Background color')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-background-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-background-color']); ?>">
+                    <input
+                        name="dark-mode-background-color-to"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-background-color-to']); ?>">
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-dark-mode-background-color-opacity"
+                            name="dark-mode-background-color-opacity"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['dark-mode-background-color-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Background color of current app')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-current-app-background-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-current-app-background-color']); ?>">
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Text color')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-text-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-text-color']); ?>">
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Loader')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-loader-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-loader-color']); ?>">
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Icon')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <div>
+                        <em>
+                            <?php p($l->t('Same color')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            name="dark-mode-icon-invert-filter"
+                            class="side-menu-setting"
+                            value="<?php echo $_['dark-mode-icon-invert-filter'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opposite color')); ?>
+                        </em>
+                    </div>
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            name="dark-mode-icon-opacity"
+                            class="side-menu-setting"
+                            value="<?php echo $_['dark-mode-icon-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <?php
+                $choices = [
+                    'Default' => 'side-menu-opener',
+                    'Default (dark)' => 'side-menu-opener-dark',
+                    'Hamburger' => 'side-menu-opener-hamburger',
+                    'Hamburger (dark)' => 'side-menu-opener-hamburger-dark',
+                    'Hamburger 2' => 'side-menu-opener-hamburger-2',
+                    'Hamburger 2 (dark)' => 'side-menu-opener-hamburger-2-dark',
+                ];
+            ?>
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Icon')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <select name="dark-mode-opener" class="side-menu-setting">
+                        <?php foreach ($choices as $label => $value): ?>
+                            <option value="<?php echo $value ?>" <?php if ($value === $_['dark-mode-opener']): ?>selected<?php endif; ?>>
+                                <?php echo $l->t($label);  ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="section">
+        <h2>
+            <?php p($l->t('Opener')); ?>
+        </h2>
+
+        <div class="side-menu-setting-table">
            <div class="side-menu-setting-row">
                <?php
                    $choices = [
Author	SHA1	Message	Date
Simon Vieille	04d161ad9b	Merge branch 'develop'	2021-07-09 12:55:07 +02:00
Simon Vieille	1dcf1b7938	update changelog	2021-07-09 12:55:05 +02:00
Simon Vieille	dab5566be4	Merge branch 'develop'	2021-07-09 12:54:32 +02:00
Simon Vieille	143ece3be8	update changelog	2021-07-09 12:54:28 +02:00
Simon Vieille	d735e1cfa6	Merge branch 'develop'	2021-07-09 12:43:01 +02:00
Simon Vieille	f86ec1de52	update changelog	2021-07-09 12:42:51 +02:00
Simon Vieille	b780f53e0b	add PHP version as dependency	2021-07-09 12:42:43 +02:00
Simon Vieille	96a4235a10	Merge branch 'develop'	2021-07-09 11:52:28 +02:00
Simon Vieille	86be38af6c	add translations: zh_CN	2021-07-09 11:52:05 +02:00
Simon Vieille	4413623618	merge develop	2021-07-07 21:36:02 +02:00
Simon Vieille	7887a441b3	add compatibility with Nextcloud 22, add CHANGELOG.md, update app icon	2021-07-07 21:35:25 +02:00
Simon Vieille	44478af3a2	release v1.24.0	2021-07-03 20:33:42 +02:00
Simon Vieille	7306a31a7d	release v1.24.0	2021-07-03 20:32:39 +02:00
Simon Vieille	d2a8b05772	add background opacity (fix #58 )	2021-07-03 20:23:39 +02:00
Simon Vieille	fba980416d	fix translations	2021-03-02 19:16:53 +01:00
Simon Vieille	95c840ae83	release v1.23.1	2021-03-02 19:16:44 +01:00
Simon Vieille	f021c9f0cd	fix issue with opener selector	2021-03-02 19:16:37 +01:00
Simon Vieille	58e03e903c	release v1.23.0	2021-02-27 14:28:02 +01:00
Simon Vieille	9747820cb8	add dark mode colors	2021-02-27 14:21:55 +01:00
Simon Vieille	d8d6aededa	add compatibility with nextcloud 21	2021-02-24 15:16:29 +01:00
Simon Vieille	a27e723657	Merge branch 'feature/issue55' into develop	2021-02-09 16:51:29 +01:00
Simon Vieille	c7db75cea3	release v1.22.2	2021-02-09 16:51:27 +01:00
Simon Vieille	4cd5421e53	fix regression: apps does not open in the tab	2021-02-09 16:50:16 +01:00
Simon Vieille	f2d1de1cbe	release v1.22.1	2021-02-05 17:57:46 +01:00