Merge pull request 'release v2.4.0' (#104) from develop into master

Reviewed-on: #104
4 weeks ago · 1d914458d0
16 changed files with 212 additions and 80 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,21 @@
 ## [Unreleased]

+## 2.4.0
+### Added
+* remove focus on opener after click
+* add button to set default colors
+* add menu hover effect
+* add translations
+### Fixed
+* fix deprecated app.php file
+* fix menu with categories header
+* fix minor issues
+### Changed
+* change saving progression
+### Removed
+* Nextcloud 19 is not supported anymore
+* PHP 7.3 is not supported anymore
+
 ## 2.3.5
 ### Fixed
 * fix white square (#99)
--- a/appinfo/app.php
+++ b/appinfo/app.php
@ -1,10 +0,0 @@
-<?php
-
-use OCA\SideMenu\AppInfo\Application;
-
-$app = new Application();
-
-if ($app->isEnabled()) {
-    $app->registerAssets();
-    $app->registerServices();
-}
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@ -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>2.3.5</version>
+    <version>2.4.0</version>
    <licence>agpl</licence>
    <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
    <namespace>SideMenu</namespace>
@ -46,8 +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="19" max-version="24"/>
-        <php min-version="7.3"/>
+        <nextcloud min-version="20" max-version="24"/>
+        <php min-version="7.4"/>
    </dependencies>
    <settings>
        <admin>OCA\SideMenu\Settings\Admin</admin>
--- a/css/admin.css
+++ b/css/admin.css
@ -129,3 +129,18 @@
 .side-menu-setting-form-long {
    width: 400px;
 }
+
+#side-menu-save-progress {
+    display: inline-block;
+    width: 0;
+    height: 15px;
+    background: #fff;
+}
+
+.btn-reset {
+    display: inline-block;
+    cursor: pointer;
+    position: absolute;
+    margin-top: 17px;
+    margin-left: 5px;
+}
--- a/css/sideMenu.css
+++ b/css/sideMenu.css
@ -29,6 +29,10 @@
    display: none;
 }

+#side-menu a {
+    transition: 0.2s;
+}
+
 #side-menu.open {
    display: block;
 }
@ -59,6 +63,8 @@
 .side-menu-settings img {
    vertical-align: bottom;
    margin-left: 3px;
+    width: 32px;
+    height: 32px;
 }

 #side-menu.open .side-menu-settings {
@ -78,7 +84,7 @@
    margin-left: 3px !important;
 }

-.side-menu-opener:active {
+.side-menu-opener:active, .side-menu-opener:focus {
    background-color: var(--side-menu-current-app-background-color, #444) !important;
 }

@ -151,6 +157,10 @@
    top: 0;
 }

+#side-menu.side-menu-with-categories .side-menu-header {
+    max-width: 295px;
+}
+
 #side-menu.hide-opener .side-menu-logo {
    margin-top: 20px;
 }
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@ -9,6 +9,9 @@ use OCA\SideMenu\Service\AppRepository;
 use OCA\SideMenu\Service\CategoryRepository;
 use OCA\SideMenu\Service\ConfigProxy;
 use OCP\AppFramework\App;
+use OCP\AppFramework\Bootstrap\IBootContext;
+use OCP\AppFramework\Bootstrap\IBootstrap;
+use OCP\AppFramework\Bootstrap\IRegistrationContext;
 use OCP\IUserSession;
 use OCP\Util;
 use Psr\Container\ContainerInterface;
@ -18,7 +21,7 @@ use Psr\Container\ContainerInterface;
 *
 * @author Simon Vieille <simon@deblan.fr>
 */
-class Application extends App
+class Application extends App implements IBootstrap
 {
    public const APP_ID = 'side_menu';

@ -44,16 +47,9 @@ class Application extends App
    public function __construct(array $urlParams = [])
    {
        parent::__construct(self::APP_ID, $urlParams);
-
-        $this->config = OC::$server->getConfig();
-        $this->cspnm = OC::$server->getContentSecurityPolicyNonceManager();
-        $this->user = OC::$server[IUserSession::class]->getUser();
    }

-    /**
-     * Checks if this app is enabled.
-     */
-    public function isEnabled(): bool
+    protected function isEnabled(): bool
    {
        $enabled = true;
        $isForced = (bool) $this->config->getAppValue(self::APP_ID, 'force', '0');
@ -74,64 +70,65 @@ class Application extends App
        return $enabled;
    }

-    /**
-     * Registes services.
-     */
-    public function registerServices()
+    protected function addAssets()
    {
-        $container = $this->getContainer();
+        Util::addScript(self::APP_ID, 'sideMenu');
+        Util::addStyle(self::APP_ID, 'sideMenu');
+
+        $assets = [
+            'stylesheet' => [
+                'route' => 'side_menu.Css.stylesheet',
+                'type' => 'link',
+                'route_attr' => 'href',
+                'attr' => [
+                    'rel' => 'stylesheet',
+                ],
+            ],
+            'script' => [
+                'route' => 'side_menu.Js.script',
+                'type' => 'script',
+                'route_attr' => 'src',
+                'attr' => [
+                    'nonce' => $this->cspnm->getNonce(),
+                ],
+            ],
+        ];
+
+        $cache = $this->config->getAppValue(self::APP_ID, 'cache', '0');
+
+        foreach ($assets as $key => $value) {
+            $route = OC::$server->getURLGenerator()->linkToRoute($value['route'], ['v' => $cache]);
+            $value['attr'][$value['route_attr']] = $route;

-        $container->registerService('AppRepository', function (ContainerInterface $c) {
+            Util::addHeader($value['type'], $value['attr'], '');
+        }
+    }
+
+    public function register(IRegistrationContext $context): void
+    {
+        $context->registerService('AppRepository', function (ContainerInterface $c) {
            return new AppRepository();
        });

-        $container->registerService('CategoryRepository', function (ContainerInterface $c) {
+        $context->registerService('CategoryRepository', function (ContainerInterface $c) {
            return new CategoryRepository();
        });

-        $container->registerService('ConfigProxy', function (ContainerInterface $c) {
+        $context->registerService('ConfigProxy', function (ContainerInterface $c) {
            return new ConfigProxy();
        });
    }

-    /**
-     * Registers assets.
-     */
-    public function registerAssets()
+    public function boot(IBootContext $context): void
    {
-        Util::addScript(self::APP_ID, 'sideMenu');
-        Util::addStyle(self::APP_ID, 'sideMenu');
+        $this->config = OC::$server->getConfig();
+        $this->cspnm = OC::$server->getContentSecurityPolicyNonceManager();
+        $this->user = OC::$server[IUserSession::class]->getUser();

-        $stylesheet = OC::$server->getURLGenerator()->linkToRoute(
-            'side_menu.Css.stylesheet',
-            [
-                'v' => $this->config->getAppValue(self::APP_ID, 'cache', '0'),
-            ]
-        );
-
-        $script = OC::$server->getURLGenerator()->linkToRoute(
-            'side_menu.Js.script',
-            [
-                'v' => $this->config->getAppValue(self::APP_ID, 'cache', '0'),
-            ]
-        );
-
-        Util::addHeader(
-            'link',
-            [
-                'href' => $stylesheet,
-                'rel' => 'stylesheet',
-            ],
-            ''
-        );
-
-        Util::addHeader(
-            'script',
-            [
-                'src' => $script,
-                'nonce' => $this->cspnm->getNonce(),
-            ],
-            ''
-        );
+        if (!$this->isEnabled()) {
+            return;
+        }
+
+        $this->addAssets();
    }
 }
--- a/lib/Settings/Admin.php
+++ b/lib/Settings/Admin.php
@ -110,6 +110,18 @@ class Admin implements ISettings
        $darkModeBackgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkenPrimaryColor);

        $parameters = [
+            'defaults' => [
+                'background-color' => $darkenPrimaryColor,
+                'background-color-to' => $darkenPrimaryColor,
+                'current-app-background-color' => $darkenPrimaryColor2,
+                'text-color' => $textColor,
+                'loader-color' => $lightenPrimaryColor,
+                'dark-mode-background-color' => $darkenPrimaryColor,
+                'dark-mode-background-color-to' => $darkenPrimaryColor,
+                'dark-mode-current-app-background-color' => $darkenPrimaryColor2,
+                'dark-mode-text-color' => $textColor,
+                'dark-mode-loader-color' => $textColor,
+            ],
            'background-color' => $backgroundColor,
            'background-color-to' => $backgroundColorTo,
            'background-color-opacity' => $this->config->getAppValueInt('background-color-opacity', '100'),
--- a/screenshots/admin_settings.png
+++ b/screenshots/admin_settings.png
--- a/src/admin.js
+++ b/src/admin.js
@ -79,17 +79,20 @@ const saveSettings = (key) => {
        ++value
    }

+    const progress = document.querySelector('#side-menu-save-progress')
+
+    progress.style.width = '40px';
+    progress.style.marginLeft = '5px';
+
    const callbacks = {
        success: () => {
-            OC.msg.finishedSuccess(
-                selector,
-                t('side_menu', (key + 1) + '/' + size)
-            )
+            const percent = parseInt((key + 1) * 100 / size);
+
+            progress.setAttribute('value', percent)

            if (key < size - 1) {
                saveSettings(key + 1)
            } else {
-                OC.msg.finishedSuccess(selector, t('side_menu', 'Saved! Page is reloading...'))
                location.reload()
            }
        },
@ -131,6 +134,8 @@ const updateAppsCategoriesCustom = () => {
 }

 document.addEventListener('DOMContentLoaded', () => {
+    $('*[data-toggle="tooltip"]').tooltip();
+
    if (document.querySelector('#side-menu-categories-custom')) {
        const View = Vue.extend(AdminCategoriesCustom)
        const adminCategoriesCustom = new View({})
@ -147,6 +152,19 @@ document.addEventListener('DOMContentLoaded', () => {
        saveSettings(0)
    })

+    const resets = document.querySelectorAll('.btn-reset')
+
+    for (let btn of resets) {
+        btn.addEventListener('click', (event) => {
+            const target = event.target
+            const values = JSON.parse(target.getAttribute('data-reset'))
+
+            for (let i in values) {
+                document.querySelector(`#${i}`).value = values[i]
+            }
+        })
+    }
+
    const displays = document.querySelectorAll('.side-menu-display')

    for (let display of displays) {
--- a/src/l10n/fixtures/cs.yaml
+++ b/src/l10n/fixtures/cs.yaml
@ -82,3 +82,12 @@
 "Customize application categories": "Přizpůsobte kategorie aplikací"
 "Apps only visible in the top menu": "Aplikace jsou viditelné pouze v horní nabídce "
 "Apps visible in the top and side menus": "Aplikace viditelné v horní a boční nabídce"
+"Reset to default": "Vrátit zpět na výchozí hodnoty"
+"Hidden icon": "Skrytá ikona"
+"Small icon": "Malá ikona"
+"Normal icon": "Normální ikona"
+"Big icon": "Velká ikona"
+"Hidden text": "Skrytý text"
+"Small text": "Malý text"
+"Normal text": "Normální text"
+"Big text": "Velký text"
--- a/src/l10n/fixtures/de.yaml
+++ b/src/l10n/fixtures/de.yaml
@ -81,3 +81,12 @@
 "Customize application categories": "Anwendungskategorien anpassen"
 "Apps only visible in the top menu": "Apps nur im oberen Menü sichtbar "
 "Apps visible in the top and side menus": "Apps im oberen und seitlichen Menü sichtbar"
+"Reset to default": "Auf Standard zurücksetzen"
+"Hidden icon": "Verstecktes Symbol"
+"Small icon": "Kleines Symbol"
+"Normal icon": "Normales Symbol"
+"Big icon": "Große Ikone"
+"Hidden text": "Versteckter Text"
+"Small text": "Kleiner Text"
+"Normal text": "Normaler Text"
+"Big text": "Großer Text"
--- a/src/l10n/fixtures/fr.yaml
+++ b/src/l10n/fixtures/fr.yaml
@ -15,6 +15,14 @@
 "Small": "Petit"
 "Normal": "Normal"
 "Big": "Gros"
+"Hidden icon": "Icône masqué"
+"Small icon": "Petit icône"
+"Normal icon": "Icône normal"
+"Big icon": "Gros icône"
+"Hidden text": "Text masqué"
+"Small text": "Texte petit"
+"Normal text": "Texte normal"
+"Big text": "Gros texte"
 "Colors": "Couleurs"
 "Background color": "Couleur de fond"
 "Background color of current app": "Couleur de fond de l'application en cours"
@ -81,3 +89,4 @@
 "Customize application categories": "Personnaliser les catégories des applications"
 "Apps only visible in the top menu": "Applications visibles uniquement dans le menu supérieur"
 "Apps visible in the top and side menus": "Applications visibles dans le menus supérieur et latéral"
+"Reset to default": "Restaurer les valeurs par défaut"
--- a/src/l10n/fixtures/zh_CN.yaml
+++ b/src/l10n/fixtures/zh_CN.yaml
@ -81,3 +81,12 @@
 "Customize application categories": "自定义应用程序类别"
 "Apps only visible in the top menu": "应用程序仅在顶部菜单中可见"
 "Apps visible in the top and side menus": "顶部和侧边菜单中可见的应用程序"
+"Reset to default": "重置为默认设置"
+"Hidden icon": "隐藏图标"
+"Small icon": "小图标"
+"Normal icon": "正常图标"
+"Big icon": "大图标"
+"Hidden text": "隐藏文字"
+"Small text": "小文本"
+"Normal text": "普通文本"
+"Big text": "大文本"
--- a/templates/js/_topMenuApps.js
+++ b/templates/js/_topMenuApps.js
@ -201,7 +201,7 @@ const updateTopMenu = function() {
    menuCache = menu.innerHTML + menu.nextSibling.innerHTML
 }

-for (let i = 0; i < 3000; i+= 100) {
+for (let i = 0; i < 4000; i+= 100) {
    setTimeout(updateTopMenu, i)
 }

--- a/templates/js/script.php
+++ b/templates/js/script.php
@ -149,6 +149,8 @@ if ($_['always-displayed']) {
            if (a !== null) {
                a.focus()
            }
+
+            headerMenuOpener.blur()
        })

        for (let opener of sideMenuOpener) {
--- a/templates/settings/admin-form.php
+++ b/templates/settings/admin-form.php
@ -67,6 +67,10 @@ $choicesSizes = [
                        class="side-menu-setting side-menu-setting-live"
                        value="<?php print_unescaped($_['background-color-to']); ?>">

+                        <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t('Reset to default')); ?>" data-reset="<?php echo htmlentities(json_encode([
+                            'side-menu-background-color' => $_['defaults']['background-color'],
+                            'side-menu-background-color-to' => $_['defaults']['background-color-to'],
+                        ])) ?>"></div>
                    <div>
                        <em>
                            <?php p($l->t('Transparent')); ?>
@ -102,6 +106,10 @@ $choicesSizes = [
                        type="color"
                        class="side-menu-setting side-menu-setting-live"
                        value="<?php print_unescaped($_['current-app-background-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t('Reset to default')); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-current-app-background-color' => $_['defaults']['current-app-background-color'],
+                    ])) ?>"></div>
                </div>
            </div>
        </div>
@ -118,6 +126,10 @@ $choicesSizes = [
                        type="color"
                        class="side-menu-setting side-menu-setting-live"
                        value="<?php print_unescaped($_['text-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t('Reset to default')); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-text-color' => $_['defaults']['text-color'],
+                    ])) ?>"></div>
                </div>
            </div>
        </div>
@ -134,6 +146,10 @@ $choicesSizes = [
                        type="color"
                        class="side-menu-setting"
                        value="<?php print_unescaped($_['loader-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t('Reset to default')); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-loader-color' => $_['defaults']['loader-color'],
+                    ])) ?>"></div>
                </div>
            </div>
        </div>
@ -227,16 +243,23 @@ $choicesSizes = [
                </div>
                <div class="side-menu-setting-form side-menu-setting-form-long">
                    <input
+                        id="side-menu-dark-mode-background-color"
                        name="dark-mode-background-color"
                        type="color"
                        class="side-menu-setting"
                        value="<?php print_unescaped($_['dark-mode-background-color']); ?>">
                    <input
+                        id="side-menu-dark-mode-background-color-to"
                        name="dark-mode-background-color-to"
                        type="color"
                        class="side-menu-setting"
                        value="<?php print_unescaped($_['dark-mode-background-color-to']); ?>">

+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t('Reset to default')); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-dark-mode-background-color' => $_['defaults']['dark-mode-background-color'],
+                        'side-menu-dark-mode-background-color-to' => $_['defaults']['dark-mode-background-color-to'],
+                    ])) ?>"></div>
+
                    <div>
                        <em>
                            <?php p($l->t('Transparent')); ?>
@ -266,10 +289,15 @@ $choicesSizes = [
                </div>
                <div class="side-menu-setting-form side-menu-setting-form-long">
                    <input
+                        id="side-menu-dark-mode-current-app-background-color"
                        name="dark-mode-current-app-background-color"
                        type="color"
                        class="side-menu-setting"
                        value="<?php print_unescaped($_['dark-mode-current-app-background-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t('Reset to default')); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-dark-mode-current-app-background-color' => $_['defaults']['dark-mode-current-app-background-color'],
+                    ])) ?>"></div>
                </div>
            </div>
        </div>
@ -281,10 +309,15 @@ $choicesSizes = [
                </div>
                <div class="side-menu-setting-form side-menu-setting-form-long">
                    <input
+                        id="side-menu-dark-mode-text-color"
                        name="dark-mode-text-color"
                        type="color"
                        class="side-menu-setting"
                        value="<?php print_unescaped($_['dark-mode-text-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t('Reset to default')); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-dark-mode-text-color' => $_['defaults']['dark-mode-text-color'],
+                    ])) ?>"></div>
                </div>
            </div>
        </div>
@ -296,10 +329,15 @@ $choicesSizes = [
                </div>
                <div class="side-menu-setting-form side-menu-setting-form-long">
                    <input
+                        id="side-menu-dark-mode-loader-color"
                        name="dark-mode-loader-color"
                        type="color"
                        class="side-menu-setting"
                        value="<?php print_unescaped($_['dark-mode-loader-color']); ?>">
+
+                    <div class="theme-undo icon icon-history btn-reset" data-toggle="tooltip" data-original-title="<?php echo p($l->t('Reset to default')); ?>" data-reset="<?php echo htmlentities(json_encode([
+                        'side-menu-dark-mode-loader-color' => $_['defaults']['dark-mode-loader-color'],
+                    ])) ?>"></div>
                </div>
            </div>
        </div>
@ -659,7 +697,7 @@ $choicesSizes = [
                    <select id="side-menu-size-icon" name="size-icon" class="side-menu-setting">
                        <?php foreach ($choicesSizes as $label => $value): ?>
                            <option value="<?php echo $value ?>" <?php if ($value === $_['size-icon']): ?>selected<?php endif; ?>>
-                                <?php echo $l->t($label);  ?> icon
+                                <?php echo $l->t($label.' icon');  ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
@ -667,7 +705,7 @@ $choicesSizes = [
                    <select id="side-menu-size-text" name="size-text" class="side-menu-setting">
                        <?php foreach ($choicesSizes as $label => $value): ?>
                            <option value="<?php echo $value ?>" <?php if ($value === $_['size-text']): ?>selected<?php endif; ?>>
-                                <?php echo $l->t($label);  ?> text
+                                <?php echo $l->t($label.' text'); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
@ -837,13 +875,12 @@ $choicesSizes = [
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
                    <?php p($l->t('Customize application categories')); ?>
-                    <small><span class="warning"><?php p($l->t('Experimental')); ?></span></small>
                </div>
                <div class="side-menu-setting-form">
                    <a class="side-menu-toggler" data-target="#apps-categories-custom-list" href="#_">
                        🖱️ <?php p($l->t('Show and hide the list of applications')); ?>
                    </a>
-
+-to
                    <div id="apps-categories-custom-list" style="display: none">
                        <ul class="side-menu-setting-list">
                            <?php foreach ($_['apps'] as $app): ?>
@ -957,10 +994,9 @@ $choicesSizes = [
    <div class="section" id="more">
        <button id="side-menu-save" class="btn btn-info">
            <?php p($l->t('Save')); ?>
+            <progress max="100" value="0" id="side-menu-save-progress"></progress>
        </button>

-        <span id="side-menu-message" class="msg"></span>
-
        <a href="<?php echo $urlGenerator->linkToRoute('side_menu.AdminSetting.exportConfiguration') ?>" target="_blank">
            <button class="btn btn-primary" >
                <?php p($l->t('Export the configuration')); ?>