[PLUGINS][Oomox] WIP Settings for both the light and dark themes.

plugins/Oomox/Controller/Oomox.php

@@ -1,6 +1,6 @@
 <?php
 
-declare(strict_types = 1);
+declare(strict_types=1);
 
 // {{{ License
 
@@ -25,22 +25,21 @@ namespace Plugin\Oomox\Controller;
 
 use App\Core\Cache;
 use App\Core\DB\DB;
-use App\Core\Event;
 use App\Core\Form;
-use App\Util\Exception\ClientException;
-use App\Util\Exception\NotFoundException;
-use App\Util\Formatting;
-use http\Client\Curl\User;
-use Symfony\Component\HttpFoundation\Response;
-use function App\Core\I18n\_m;
 use App\Util\Common;
+use App\Util\Exception\ClientException;
+use App\Util\Exception\NoLoggedInUser;
 use App\Util\Exception\RedirectException;
 use App\Util\Exception\ServerException;
+use App\Util\Formatting;
 use Plugin\Oomox\Entity;
 use Symfony\Component\Form\Extension\Core\Type\ColorType;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\Form\FormInterface;
 use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use function App\Core\I18n\_m;
 
 /**
  * Oomox controller
@@ -59,93 +58,135 @@ class Oomox
      *
      * @throws RedirectException
      * @throws ServerException
-     * @throws \App\Util\Exception\NoLoggedInUser
+     * @throws NoLoggedInUser
      */
-    public static function oomoxSettings(Request $request): array
+    public static function oomoxSettingsLight(Request $request): array
     {
-        $user    = Common::ensureLoggedIn();
+        $user = Common::ensureLoggedIn();
         $actor_id = $user->getId();
 
-        $current_oomox_settings = DB::find('profile_color', ['actor_id' => $actor_id]);
+        $current_oomox_settings = \Plugin\Oomox\Oomox::getEntity($user);
+        $form_light = (new Oomox)->getOomoxForm($current_oomox_settings, true);
 
-        $form = Form::create([
+        $form_light->handleRequest($request);
-            ['colour_foreground',   ColorType::class, [
+        if ($form_light->isSubmitted() && $form_light->isValid()) {
-                'html5' => true,
+            $data = $form_light->getData();
-                'data'  => $current_oomox_settings?->getColourForeground(),
-                'label' => _m('Foreground colour'),
-                'help'  => _m('Choose the foreground colour'), ],
-            ],
-            ['colour_background_hard',   ColorType::class, [
-                'html5' => true,
-                'data'  => $current_oomox_settings?->getColourBackgroundHard(),
-                'label' => _m('Background colour'),
-                'help'  => _m('Choose the background colour'), ],
-            ],
-            ['colour_background_card',   ColorType::class, [
-                'html5' => true,
-                'data'  => $current_oomox_settings?->getColourBackgroundCard(),
-                'label' => _m('Card background colour'),
-                'help'  => _m('Choose the card background colour'), ],
-            ],
-            ['colour_border',   ColorType::class, [
-                'html5' => true,
-                'data'  => $current_oomox_settings?->getColourBorder(),
-                'label' => _m('Border colour'),
-                'help'  => _m('Choose colour of borders'), ],
-            ],
-            ['colour_accent',   ColorType::class, [
-                'html5' => true,
-                'data'  => $current_oomox_settings?->getColourAccent(),
-                'label' => _m('Accent colour'),
-                'help'  => _m('Choose the accent colour'), ],
-            ],
-            ['colour_shadow',   ColorType::class, [
-                'html5' => true,
-                'data'  => $current_oomox_settings?->getColourShadow(),
-                'label' => _m('Shadow colour'),
-                'help'  => _m('Choose color of shadows'), ],
-            ],
-            ['hidden', HiddenType::class, []],
-            ['save_oomox_colours',   SubmitType::class, ['label' => _m('Submit')]],
-        ]);
-
-        $form->handleRequest($request);
-
-        if ($form->isSubmitted() && $form->isValid()) {
-            if ($current_oomox_settings !== null) {
-                DB::remove($current_oomox_settings);
-                DB::flush();
-            }
-
-            $data = $form->getData();
             $current_oomox_settings = Entity\Oomox::create(
                 [
                     'actor_id' => $actor_id,
-                    'colour_foreground' => $data['colour_foreground'],
+                    'colour_foreground_light' => $data['colour_foreground'],
-                    'colour_background_hard' => $data['colour_background_hard'],
+                    'colour_background_hard_light' => $data['colour_background_hard'],
-                    'colour_background_card' => $data['colour_background_card'],
+                    'colour_background_card_light' => $data['colour_background_card'],
-                    'colour_border' => $data['colour_border'],
+                    'colour_border_light' => $data['colour_border'],
-                    'colour_accent' => $data['colour_accent'],
+                    'colour_accent_light' => $data['colour_accent'],
-                    'colour_shadow' => $data['colour_shadow'],
+                    'colour_shadow_light' => $data['colour_shadow'],
                 ]
             );
             DB::merge($current_oomox_settings);
             DB::flush();
 
-            Cache::set(\Plugin\Oomox\Oomox::cacheKey($user), $current_oomox_settings);
+            Cache::delete(\Plugin\Oomox\Oomox::cacheKey($user));
 
             throw new RedirectException();
         }
 
-        return ['_template' => 'oomox/oomoxSettings.html.twig', 'oomox' => $form->createView()];
+        return ['_template' => 'oomox/oomoxSettingsLight.html.twig', 'oomoxLight' => $form_light->createView()];
+    }
+
+    public static function oomoxSettingsDark(Request $request): array
+    {
+        $user = Common::ensureLoggedIn();
+        $actor_id = $user->getId();
+
+        $current_oomox_settings = \Plugin\Oomox\Oomox::getEntity($user);
+        $form_dark = (new Oomox)->getOomoxForm($current_oomox_settings, false);
+
+        if (is_null($current_oomox_settings)) {
+            Entity\Oomox::create([]);
+        }
+
+        $form_dark->handleRequest($request);
+        if ($form_dark->isSubmitted() && $form_dark->isValid()) {
+            $data = $form_dark->getData();
+            $current_oomox_settings = Entity\Oomox::create(
+                [
+                    'actor_id' => $actor_id,
+                    'colour_foreground_dark' => $data['colour_foreground'],
+                    'colour_background_hard_dark' => $data['colour_background_hard'],
+                    'colour_background_card_dark' => $data['colour_background_card'],
+                    'colour_border_dark' => $data['colour_border'],
+                    'colour_accent_dark' => $data['colour_accent'],
+                    'colour_shadow_dark' => $data['colour_shadow'],
+                ]
+            );
+            DB::merge($current_oomox_settings);
+            DB::flush();
+
+            Cache::delete(\Plugin\Oomox\Oomox::cacheKey($user));
+
+            throw new RedirectException();
+        }
+
+        return ['_template' => 'oomox/oomoxSettingsDark.html.twig', 'oomoxDark' => $form_dark->createView()];
+    }
+
+
+    /**
+     * @param Entity\Oomox $current_oomox_settings
+     * @return FormInterface
+     * @throws ServerException
+     */
+    public function getOomoxForm(?Entity\Oomox $current_oomox_settings, bool $is_light): FormInterface
+    {
+        return Form::create([
+            ['colour_foreground', ColorType::class, [
+                'html5' => true,
+                'data' => '',
+                'label' => _m('Foreground colour'),
+                'help' => _m('Choose the foreground colour'),],
+            ],
+            ['colour_background_hard', ColorType::class, [
+                'html5' => true,
+                'data' => '',
+                'label' => _m('Background colour'),
+                'help' => _m('Choose the background colour'),],
+            ],
+            ['colour_background_card', ColorType::class, [
+                'html5' => true,
+                'data' => '',
+                'label' => _m('Card background colour'),
+                'help' => _m('Choose the card background colour'),],
+            ],
+            ['colour_border', ColorType::class, [
+                'html5' => true,
+                'data' => '',
+                'label' => _m('Border colour'),
+                'help' => _m('Choose colour of borders'),],
+            ],
+            ['colour_accent', ColorType::class, [
+                'html5' => true,
+                'data' => '',
+                'label' => _m('Accent colour'),
+                'help' => _m('Choose the accent colour'),],
+            ],
+            ['colour_shadow', ColorType::class, [
+                'html5' => true,
+                'data' => '',
+                'label' => _m('Shadow colour'),
+                'help' => _m('Choose color of shadows'),],
+            ],
+            ['hidden', HiddenType::class, []],
+            ['save_oomox_colours', SubmitType::class, ['label' => _m('Submit')]],
+        ]);
     }
 
     /**
      * @throws ClientException
-     * @throws \App\Util\Exception\NoLoggedInUser
+     * @throws NoLoggedInUser
      * @throws ServerException
      */
-    public function oomoxCSS() {
+    public function oomoxCSS()
+    {
         $user = Common::ensureLoggedIn();
 
         $oomox_table = \Plugin\Oomox\Oomox::getEntity($user);

plugins/Oomox/Entity/Oomox.php

@@ -41,12 +41,18 @@ class Oomox extends Entity
     // {{{ Autocode
     // @codeCoverageIgnoreStart
     private int $actor_id;
-    private ?string $colour_foreground;
+    private ?string $colour_foreground_light;
-    private ?string $colour_background_hard;
+    private ?string $colour_background_hard_light;
-    private ?string $colour_background_card;
+    private ?string $colour_background_card_light;
-    private ?string $colour_border;
+    private ?string $colour_border_light;
-    private ?string $colour_accent;
+    private ?string $colour_accent_light;
-    private ?string $colour_shadow;
+    private ?string $colour_shadow_light;
+    private ?string $colour_foreground_dark;
+    private ?string $colour_background_hard_dark;
+    private ?string $colour_background_card_dark;
+    private ?string $colour_border_dark;
+    private ?string $colour_accent_dark;
+    private ?string $colour_shadow_dark;
     private \DateTimeInterface $created;
     private \DateTimeInterface $modified;
 
@@ -61,70 +67,136 @@ class Oomox extends Entity
         return $this->actor_id;
     }
 
-    public function setColourForeground(?string $colour_foreground): self
+    public function setColourForegroundLight(?string $colour_foreground_light): self
     {
-        $this->colour_foreground = $colour_foreground;
+        $this->colour_foreground_light = $colour_foreground_light;
         return $this;
     }
 
-    public function getColourForeground(): ?string
+    public function getColourForegroundLight(): ?string
     {
-        return $this->colour_foreground;
+        return $this->colour_foreground_light;
     }
 
-    public function setColourBackgroundHard(?string $colour_background_hard): self
+    public function setColourBackgroundHardLight(?string $colour_background_hard_light): self
     {
-        $this->colour_background_hard = $colour_background_hard;
+        $this->colour_background_hard_light = $colour_background_hard_light;
         return $this;
     }
 
-    public function getColourBackgroundHard(): ?string
+    public function getColourBackgroundHardLight(): ?string
     {
-        return $this->colour_background_hard;
+        return $this->colour_background_hard_light;
     }
 
-    public function setColourBackgroundCard(?string $colour_background_card): self
+    public function setColourBackgroundCardLight(?string $colour_background_card_light): self
     {
-        $this->colour_background_card = $colour_background_card;
+        $this->colour_background_card_light = $colour_background_card_light;
         return $this;
     }
 
-    public function getColourBackgroundCard(): ?string
+    public function getColourBackgroundCardLight(): ?string
     {
-        return $this->colour_background_card;
+        return $this->colour_background_card_light;
     }
 
-    public function setColourBorder(?string $colour_border): self
+    public function setColourBorderLight(?string $colour_border_light): self
     {
-        $this->colour_border = $colour_border;
+        $this->colour_border_light = $colour_border_light;
         return $this;
     }
 
-    public function getColourBorder(): ?string
+    public function getColourBorderLight(): ?string
     {
-        return $this->colour_border;
+        return $this->colour_border_light;
     }
 
-    public function setColourAccent(?string $colour_accent): self
+    public function setColourAccentLight(?string $colour_accent_light): self
     {
-        $this->colour_accent = $colour_accent;
+        $this->colour_accent_light = $colour_accent_light;
         return $this;
     }
 
-    public function getColourAccent(): ?string
+    public function getColourAccentLight(): ?string
     {
-        return $this->colour_accent;
+        return $this->colour_accent_light;
     }
 
-    public function setColourShadow(?string $colour_shadow): self
+    public function setColourShadowLight(?string $colour_shadow_light): self
     {
-        $this->colour_shadow = $colour_shadow;
+        $this->colour_shadow_light = $colour_shadow_light;
         return $this;
     }
 
-    public function getColourShadow(): ?string
+    public function getColourShadowLight(): ?string
     {
-        return $this->colour_shadow;
+        return $this->colour_shadow_light;
+    }
+
+    public function setColourForegroundDark(?string $colour_foreground_dark): self
+    {
+        $this->colour_foreground_dark = $colour_foreground_dark;
+        return $this;
+    }
+
+    public function getColourForegroundDark(): ?string
+    {
+        return $this->colour_foreground_dark;
+    }
+
+    public function setColourBackgroundHardDark(?string $colour_background_hard_dark): self
+    {
+        $this->colour_background_hard_dark = $colour_background_hard_dark;
+        return $this;
+    }
+
+    public function getColourBackgroundHardDark(): ?string
+    {
+        return $this->colour_background_hard_dark;
+    }
+
+    public function setColourBackgroundCardDark(?string $colour_background_card_dark): self
+    {
+        $this->colour_background_card_dark = $colour_background_card_dark;
+        return $this;
+    }
+
+    public function getColourBackgroundCardDark(): ?string
+    {
+        return $this->colour_background_card_dark;
+    }
+
+    public function setColourBorderDark(?string $colour_border_dark): self
+    {
+        $this->colour_border_dark = $colour_border_dark;
+        return $this;
+    }
+
+    public function getColourBorderDark(): ?string
+    {
+        return $this->colour_border_dark;
+    }
+
+    public function setColourAccentDark(?string $colour_accent_dark): self
+    {
+        $this->colour_accent_dark = $colour_accent_dark;
+        return $this;
+    }
+
+    public function getColourAccentDark(): ?string
+    {
+        return $this->colour_accent_dark;
+    }
+
+    public function setColourShadowDark(?string $colour_shadow_dark): self
+    {
+        $this->colour_shadow_dark = $colour_shadow_dark;
+        return $this;
+    }
+
+    public function getColourShadowDark(): ?string
+    {
+        return $this->colour_shadow_dark;
     }
 
     public function setCreated(\DateTimeInterface $created): self
@@ -158,12 +230,18 @@ class Oomox extends Entity
             'name'   => 'oomox',
             'fields' => [
                 'actor_id' => ['type' => 'int', 'foreign key' => true, 'target' => 'Actor.id', 'multiplicity' => 'one to one', 'not null' => true, 'description' => 'foreign key to actor table'],
-                'colour_foreground'         => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_foreground_light'         => ['type' => 'text',      'description' => 'color hex code'],
-                'colour_background_hard'    => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_background_hard_light'    => ['type' => 'text',      'description' => 'color hex code'],
-                'colour_background_card'    => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_background_card_light'    => ['type' => 'text',      'description' => 'color hex code'],
-                'colour_border'             => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_border_light'             => ['type' => 'text',      'description' => 'color hex code'],
-                'colour_accent'             => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_accent_light'             => ['type' => 'text',      'description' => 'color hex code'],
-                'colour_shadow'             => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_shadow_light'             => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_foreground_dark'         => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_background_hard_dark'    => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_background_card_dark'    => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_border_dark'             => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_accent_dark'             => ['type' => 'text',      'description' => 'color hex code'],
+                'colour_shadow_dark'             => ['type' => 'text',      'description' => 'color hex code'],
                 'created'    => ['type' => 'datetime',  'not null' => true, 'description' => 'date this record was created',  'default' => 'CURRENT_TIMESTAMP'],
                 'modified'   => ['type' => 'timestamp', 'not null' => true, 'description' => 'date this record was modified', 'default' => 'CURRENT_TIMESTAMP'],
             ],

plugins/Oomox/Oomox.php

@@ -71,9 +71,15 @@ class Oomox extends Plugin
     public function onPopulateProfileSettingsTabs(Request $request, array &$tabs): bool
     {
         $tabs[] = [
-            'title'      => 'Theme colours',
+            'title'      => 'Light theme colours',
             'desc'       => 'Change the theme colours.',
-            'controller' => C\Oomox::oomoxSettings($request),
+            'controller' => C\Oomox::oomoxSettingsLight($request),
+        ];
+
+        $tabs[] = [
+            'title'      => 'Dark theme colours',
+            'desc'       => 'Change the theme colours.',
+            'controller' => C\Oomox::oomoxSettingsDark($request),
         ];
 
         return Event::next;

plugins/Oomox/templates/oomox/oomoxSettings.html.twig

@@ -1,3 +0,0 @@
-<div class='form'>
-    {{ form(oomox) }}
-</div>

plugins/Oomox/templates/oomox/oomoxSettingsDark.html.twig

@@ -0,0 +1,3 @@
+<div>
+    {{ form(oomoxDark) }}
+</div>

plugins/Oomox/templates/oomox/oomoxSettingsLight.html.twig

@@ -0,0 +1,3 @@
+<div>
+    {{ form(oomoxLight) }}
+</div>

plugins/Oomox/templates/oomox/root_override.css.twig

@@ -8,12 +8,12 @@
 
 @media(prefers-color-scheme:dark) {
     :root {
-        --foreground: {{ oomox.getColourForeground() | default('#f0f6f6') | raw }} !important;
+        --foreground: {{ oomox.getColourForegroundDark() | default('#f0f6f6') | raw }};
-        --background-hard: {{ oomox.getColourBackgroundHard() | default('#141216') | raw }};
+        --background-hard: {{ oomox.getColourBackgroundHardDark() | default('#141216') | raw }};
-        --background-card: {{ oomox.getColourBackgroundCard() | default('#131217') | raw }};
+        --background-card: {{ oomox.getColourBackgroundCardDark() | default('#131217') | raw }};
-        --border: {{ oomox.getColourBorder() | default('#201f25') | raw }};
+        --border: {{ oomox.getColourBorderDark() | default('#201f25') | raw }};
-        --accent: {{ oomox.getColourAccent() | default('#5ddbcf') | raw }};
+        --accent: {{ oomox.getColourAccentDark() | default('#5ddbcf') | raw }};
-        --shadow: 0 0 12px 0 {{ oomox.getColourShadow() | default('#01010166') | raw }};
+        --shadow: 0 0 12px 0 {{ oomox.getColourShadowDark() | default('#01010166') | raw }};
 
         --shadow-inset-accent: inset 0 0 0 2px var(--accent);
         --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
@@ -24,12 +24,12 @@
 
 @media(prefers-color-scheme:light) {
     :root {
-        --foreground: {{ oomox.getColourForeground() | default('#09090d') | raw }};
+        --foreground: {{ oomox.getColourForegroundLight() | default('#09090d') | raw }};
-        --background-hard: {{ oomox.getColourBackgroundHard() | default('#ebebeb') | raw }};
+        --background-hard: {{ oomox.getColourBackgroundHardLight() | default('#ebebeb') | raw }};
-        --background-card: {{ oomox.getColourBackgroundCard() | default('#f0f0f0') | raw }};
+        --background-card: {{ oomox.getColourBackgroundCardLight() | default('#f0f0f0') | raw }};
-        --border: {{ oomox.getColourBorder() | default('#d5d5d5') | raw }};
+        --border: {{ oomox.getColourBorderLight() | default('#d5d5d5') | raw }};
-        --accent: {{ oomox.getColourAccent() | default('#a22430') | raw }};
+        --accent: {{ oomox.getColourAccentLight() | default('#a22430') | raw }};
-        --shadow: 0 0 12px 0 {{ oomox.getColourShadow() | default('#24243416') | raw }};
+        --shadow: 0 0 12px 0 {{ oomox.getColourShadowLight() | default('#24243416') | raw }};
 
         --shadow-inset-accent: inset 0 0 0 2px var(--accent);
         --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;

public/assets/default_theme/css/widgets/buttons.css

@@ -145,7 +145,7 @@ button,input,select,textarea {
     display: inline-flex;
     overflow: hidden;
     font-size: inherit;
-    padding: 6px 8px;
+    padding: 6px 8px !important;
     -webkit-border-radius: .6rem;
     -moz-border-radius: .6rem;
     border-radius: .6rem;