add background opacity (fix #58)

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>1.23.0</version>
+    <version>1.23.1</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>

lib/Controller/CssController.php

@@ -99,6 +99,8 @@ class CssController extends Controller
             $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);
@@ -108,8 +110,13 @@ class CssController extends Controller
             $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,

lib/Settings/Admin.php

@@ -82,6 +82,7 @@ class Admin implements ISettings
         $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'),
@@ -89,6 +90,7 @@ class Admin implements ISettings
             'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
             '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'),

src/admin.js

@@ -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)
     })
 

src/l10n/fixtures/de.yaml

@@ -75,3 +75,4 @@
 "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"

src/l10n/fixtures/fr.yaml

@@ -75,3 +75,4 @@
 "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"

templates/settings/admin-form.php

@@ -66,7 +66,27 @@ $choicesSizes = [
                         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>
 
@@ -216,6 +236,25 @@ $choicesSizes = [
                         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>
@@ -326,7 +365,7 @@ $choicesSizes = [
                     <?php p($l->t('Icon')); ?>
                 </div>
                 <div class="side-menu-setting-form side-menu-setting-form-long">
-                    <select name="dark-opener" class="side-menu-setting">
+                    <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);  ?>