From d2a8b05772ec3b09efea081fdbf4d756446f9222 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sat, 3 Jul 2021 20:23:39 +0200
Subject: [PATCH] add background opacity (fix #58)

---
 lib/Controller/CssController.php  |  7 ++++++
 lib/Settings/Admin.php            |  2 ++
 src/admin.js                      | 16 +++++++++++++
 templates/settings/admin-form.php | 39 +++++++++++++++++++++++++++++++
 4 files changed, 64 insertions(+)

diff --git a/lib/Controller/CssController.php b/lib/Controller/CssController.php
index 79b9570..cdbf11a 100644
--- a/lib/Controller/CssController.php
+++ b/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,
diff --git a/lib/Settings/Admin.php b/lib/Settings/Admin.php
index cf357a1..d77978c 100644
--- a/lib/Settings/Admin.php
+++ b/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'),
diff --git a/src/admin.js b/src/admin.js
index 436b44a..2a0a668 100644
--- a/src/admin.js
+++ b/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)
     })
 
diff --git a/templates/settings/admin-form.php b/templates/settings/admin-form.php
index af66d35..82196eb 100644
--- a/templates/settings/admin-form.php
+++ b/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>