[PLUGINS][Oomox] User theme CSS file is served. Settings page needs polish, and option to revert changes.

plugins/Oomox/Controller/Oomox.php

@@ -23,13 +23,20 @@ declare(strict_types = 1);
 
 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\RedirectException;
 use App\Util\Exception\ServerException;
-use Plugin\ProfileColor\Entity;
+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;
@@ -52,11 +59,12 @@ class Oomox
      *
      * @throws RedirectException
      * @throws ServerException
+     * @throws \App\Util\Exception\NoLoggedInUser
      */
     public static function oomoxSettings(Request $request): array
     {
-        $actor    = Common::actor();
+        $user    = Common::ensureLoggedIn();
-        $actor_id = $actor->getId();
+        $actor_id = $user->getId();
 
         $current_oomox_settings = DB::find('profile_color', ['actor_id' => $actor_id]);
 
@@ -121,12 +129,28 @@ class Oomox
                     'colour_shadow' => $data['colour_shadow'],
                 ]
             );
-            DB::persist($current_oomox_settings);
+            DB::merge($current_oomox_settings);
             DB::flush();
 
+            Cache::delete(\Plugin\Oomox\Oomox::cacheKey($user));
+
             throw new RedirectException();
         }
 
         return ['_template' => 'oomox/oomoxSettings.html.twig', 'oomox' => $form->createView()];
     }
+
+    public function oomoxCSS() {
+        $user = Common::ensureLoggedIn();
+        $actor_id = $user->getId();
+
+        try {
+            $oomox_table = Cache::get("oomox-css-{$actor_id}", fn() => DB::findOneBy('oomox', ['actor_id' => $actor_id]));
+        } catch (NotFoundException $e) {
+            throw new ClientException(_m('No custom colours defined.'),404, $e);
+        }
+
+        $content = Formatting::twigRenderFile('/oomox/root_override.css.twig', ['oomox' => $oomox_table]);
+        return new Response($content, status: 200, headers: ['content-type' => 'text/css']);
+    }
 }

plugins/Oomox/Entity/Oomox.php

@@ -41,10 +41,14 @@ class Oomox extends Entity
     // {{{ Autocode
     // @codeCoverageIgnoreStart
     private int $actor_id;
-    private ?string $color;
+    private ?string $colour_foreground;
-    private ?string $background;
+    private ?string $colour_background_hard;
-    private DateTimeInterface $created;
+    private ?string $colour_background_card;
-    private DateTimeInterface $modified;
+    private ?string $colour_border;
+    private ?string $colour_accent;
+    private ?string $colour_shadow;
+    private \DateTimeInterface $created;
+    private \DateTimeInterface $modified;
 
     public function setActorId(int $actor_id): self
     {
@@ -57,50 +61,95 @@ class Oomox extends Entity
         return $this->actor_id;
     }
 
-    public function setColor(string $color): self
+    public function setColourForeground(?string $colour_foreground): self
     {
-        $this->color = $color;
+        $this->colour_foreground = $colour_foreground;
         return $this;
     }
 
-    public function getColor(): ?string
+    public function getColourForeground(): ?string
     {
-        return $this->color;
+        return $this->colour_foreground;
     }
 
-    public function setBackground(string $background): self
+    public function setColourBackgroundHard(?string $colour_background_hard): self
     {
-        $this->background = $background;
+        $this->colour_background_hard = $colour_background_hard;
         return $this;
     }
 
-    public function getBackground(): ?string
+    public function getColourBackgroundHard(): ?string
     {
-        return $this->background;
+        return $this->colour_background_hard;
     }
 
-    public function setCreated(DateTimeInterface $created): self
+    public function setColourBackgroundCard(?string $colour_background_card): self
+    {
+        $this->colour_background_card = $colour_background_card;
+        return $this;
+    }
+
+    public function getColourBackgroundCard(): ?string
+    {
+        return $this->colour_background_card;
+    }
+
+    public function setColourBorder(?string $colour_border): self
+    {
+        $this->colour_border = $colour_border;
+        return $this;
+    }
+
+    public function getColourBorder(): ?string
+    {
+        return $this->colour_border;
+    }
+
+    public function setColourAccent(?string $colour_accent): self
+    {
+        $this->colour_accent = $colour_accent;
+        return $this;
+    }
+
+    public function getColourAccent(): ?string
+    {
+        return $this->colour_accent;
+    }
+
+    public function setColourShadow(?string $colour_shadow): self
+    {
+        $this->colour_shadow = $colour_shadow;
+        return $this;
+    }
+
+    public function getColourShadow(): ?string
+    {
+        return $this->colour_shadow;
+    }
+
+    public function setCreated(\DateTimeInterface $created): self
     {
         $this->created = $created;
         return $this;
     }
 
-    public function getCreated(): DateTimeInterface
+    public function getCreated(): \DateTimeInterface
     {
         return $this->created;
     }
 
-    public function setModified(DateTimeInterface $modified): self
+    public function setModified(\DateTimeInterface $modified): self
     {
         $this->modified = $modified;
         return $this;
     }
 
-    public function getModified(): DateTimeInterface
+    public function getModified(): \DateTimeInterface
     {
         return $this->modified;
     }
 
+
     // @codeCoverageIgnoreEnd
     // }}} Autocode
     public static function schemaDef(): array

plugins/Oomox/Oomox.php

@@ -22,10 +22,14 @@ declare(strict_types = 1);
 
 namespace Plugin\Oomox;
 
+use App\Core\Cache;
 use App\Core\DB\DB;
 use App\Core\Event;
 use App\Core\Modules\Plugin;
 use App\Core\Router\RouteLoader;
+use App\Core\Router\Router;
+use App\Entity\Actor;
+use App\Entity\LocalUser;
 use App\Util\Common;
 use App\Util\Exception\NotFoundException;
 use App\Util\Exception\RedirectException;
@@ -53,7 +57,8 @@ class Oomox extends Plugin
      */
     public function onAddRoute(RouteLoader $r): bool
     {
-        $r->connect('settings_oomox', 'settings/oomox', [Controller\Oomox::class, 'oomoxSettings']);
+        $r->connect('oomox_settings', 'settings/oomox', [Controller\Oomox::class, 'oomoxSettings']);
+        $r->connect('oomox_css', 'plugins/oomox/colours', [Controller\Oomox::class, 'oomoxCSS']);
         return Event::next;
     }
 
@@ -72,23 +77,15 @@ class Oomox extends Plugin
         return Event::next;
     }
 
-    public function onOverrideStylesheet(string $original_stylesheet, string &$response)
+    public static function cacheKey(LocalUser $user) :string {
+        return "oomox-css-{$user->getId()}";
+    }
+    public function onEndShowStyles(array &$styles, string $route)
     {
-        $check_user = !\is_null(Common::user());
+        $user = Common::user();
-
+        if (!is_null($user) && !is_null(Cache::get(self::cacheKey($user), fn() => null))) {
-        if ($check_user && $original_stylesheet === 'assets/default_theme/css/root.css') {
+            $styles[] = Router::url('oomox_css');
-            $actor_id = Common::actor()->getId();
-
-            try {
-                $oomox_table = DB::findOneBy('oomox', ['actor_id' => $actor_id]);
-            } catch (NotFoundException $e) {
-                return Event::next;
         }
-
-            $res[] = Formatting::twigRenderFile('/oomox/root_override.css.twig', ['oomox' => $oomox_table]);
-            return Event::stop;
-        }
-
         return Event::next;
     }
 }

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

@@ -8,12 +8,12 @@
 
 @media(prefers-color-scheme:dark) {
     :root {
-        --foreground: {{ oomox.getColourForeground() | default('#f0f6f6') }};
+        --foreground: {{ oomox.getColourForeground() | default('#f0f6f6') | raw }} !important;
-        --background-hard: {{ oomox.getColourBackgroundHard() | default('#141216') }};
+        --background-hard: {{ oomox.getColourBackgroundHard() | default('#141216') | raw }};
-        --background-card: {{ oomox.getColourBackgroundCard() | default('#131217') }};
+        --background-card: {{ oomox.getColourBackgroundCard() | default('#131217') | raw }};
-        --border: {{ oomox.getColourBorder() | default('#201f25') }};
+        --border: {{ oomox.getColourBorder() | default('#201f25') | raw }};
-        --accent: {{ oomox.getColourAccent() | default('#5ddbcf') }};
+        --accent: {{ oomox.getColourAccent() | default('#5ddbcf') | raw }};
-        --shadow: 0 0 12px 0 {{ oomox.getColourShadow() | default('#01010166') }};
+        --shadow: 0 0 12px 0 {{ oomox.getColourShadow() | 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') }};
+        --foreground: {{ oomox.getColourForeground() | default('#09090d') | raw }};
-        --background-hard: {{ oomox.getColourBackgroundHard() | default('#ebebeb') }};
+        --background-hard: {{ oomox.getColourBackgroundHard() | default('#ebebeb') | raw }};
-        --background-card: {{ oomox.getColourBackgroundCard() | default('#f0f0f0') }};
+        --background-card: {{ oomox.getColourBackgroundCard() | default('#f0f0f0') | raw }};
-        --border: {{ oomox.getColourBorder() | default('#d5d5d5') }};
+        --border: {{ oomox.getColourBorder() | default('#d5d5d5') | raw }};
-        --accent: {{ oomox.getColourAccent() | default('#a22430') }};
+        --accent: {{ oomox.getColourAccent() | default('#a22430') | raw }};
-        --shadow: 0 0 12px 0 {{ oomox.getColourShadow() | default('#24243416') }};
+        --shadow: 0 0 12px 0 {{ oomox.getColourShadow() | 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;

src/Twig/Extension.php

@@ -70,6 +70,8 @@ class Extension extends AbstractExtension
             new TwigFunction('icon', [Runtime::class, 'embedSvgIcon'], ['needs_environment' => true]),
             new TwigFunction('is_firefox', [Runtime::class, 'isFirefox']),
             new TwigFunction('handle_override_template_import', [Runtime::class, 'handleOverrideTemplateImport']),
+            new TwigFunction('handle_override_stylesheet', [Runtime::class, 'handleOverrideStylesheet']),
+
             new TwigFunction('open_details', [Runtime::class, 'openDetails']),
         ];
     }

templates/base.html.twig

@@ -17,10 +17,8 @@
         <link rel="stylesheet" type='text/css' href="{{ asset('assets/default_theme/css/root.css') }}">
         <link rel="stylesheet" type='text/css' href="{{ asset('assets/default_theme/css/base.css') }}">
 
-        {% set root_override = handle_override_stylesheet('assets/default_theme/css/root.css') %}
-
         {% for stylesheet in show_stylesheets(app.request.get('_route')) %}
-            <link rel="preload" {{ preload(asset(stylesheet), { as: 'style', nopush: true }) }}>
+            <link rel="preload" href="{{ preload(asset(stylesheet), { as: 'style', nopush: true }) }}">
             <link rel='stylesheet' type='text/css' href="{{ asset(stylesheet) }}">
         {% endfor %}
     {% endblock %}