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

This commit is contained in:
Eliseu Amaro 2021-11-26 14:44:35 +00:00
parent 7fa2418e54
commit 180ae15647
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
6 changed files with 121 additions and 51 deletions

View File

@ -23,13 +23,20 @@ declare(strict_types = 1);
namespace Plugin\Oomox\Controller; namespace Plugin\Oomox\Controller;
use App\Core\Cache;
use App\Core\DB\DB; use App\Core\DB\DB;
use App\Core\Event;
use App\Core\Form; 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 function App\Core\I18n\_m;
use App\Util\Common; use App\Util\Common;
use App\Util\Exception\RedirectException; use App\Util\Exception\RedirectException;
use App\Util\Exception\ServerException; 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\ColorType;
use Symfony\Component\Form\Extension\Core\Type\HiddenType; use Symfony\Component\Form\Extension\Core\Type\HiddenType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType; use Symfony\Component\Form\Extension\Core\Type\SubmitType;
@ -52,11 +59,12 @@ class Oomox
* *
* @throws RedirectException * @throws RedirectException
* @throws ServerException * @throws ServerException
* @throws \App\Util\Exception\NoLoggedInUser
*/ */
public static function oomoxSettings(Request $request): array 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]); $current_oomox_settings = DB::find('profile_color', ['actor_id' => $actor_id]);
@ -121,12 +129,28 @@ class Oomox
'colour_shadow' => $data['colour_shadow'], 'colour_shadow' => $data['colour_shadow'],
] ]
); );
DB::persist($current_oomox_settings); DB::merge($current_oomox_settings);
DB::flush(); DB::flush();
Cache::delete(\Plugin\Oomox\Oomox::cacheKey($user));
throw new RedirectException(); throw new RedirectException();
} }
return ['_template' => 'oomox/oomoxSettings.html.twig', 'oomox' => $form->createView()]; 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']);
}
} }

View File

@ -41,10 +41,14 @@ class Oomox extends Entity
// {{{ Autocode // {{{ Autocode
// @codeCoverageIgnoreStart // @codeCoverageIgnoreStart
private int $actor_id; 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 public function setActorId(int $actor_id): self
{ {
@ -57,50 +61,95 @@ class Oomox extends Entity
return $this->actor_id; 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; 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; 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; $this->created = $created;
return $this; return $this;
} }
public function getCreated(): DateTimeInterface public function getCreated(): \DateTimeInterface
{ {
return $this->created; return $this->created;
} }
public function setModified(DateTimeInterface $modified): self public function setModified(\DateTimeInterface $modified): self
{ {
$this->modified = $modified; $this->modified = $modified;
return $this; return $this;
} }
public function getModified(): DateTimeInterface public function getModified(): \DateTimeInterface
{ {
return $this->modified; return $this->modified;
} }
// @codeCoverageIgnoreEnd // @codeCoverageIgnoreEnd
// }}} Autocode // }}} Autocode
public static function schemaDef(): array public static function schemaDef(): array

View File

@ -22,10 +22,14 @@ declare(strict_types = 1);
namespace Plugin\Oomox; namespace Plugin\Oomox;
use App\Core\Cache;
use App\Core\DB\DB; use App\Core\DB\DB;
use App\Core\Event; use App\Core\Event;
use App\Core\Modules\Plugin; use App\Core\Modules\Plugin;
use App\Core\Router\RouteLoader; 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\Common;
use App\Util\Exception\NotFoundException; use App\Util\Exception\NotFoundException;
use App\Util\Exception\RedirectException; use App\Util\Exception\RedirectException;
@ -53,7 +57,8 @@ class Oomox extends Plugin
*/ */
public function onAddRoute(RouteLoader $r): bool 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; return Event::next;
} }
@ -72,23 +77,15 @@ class Oomox extends Plugin
return Event::next; 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; return Event::next;
} }
} }

View File

@ -8,12 +8,12 @@
@media(prefers-color-scheme:dark) { @media(prefers-color-scheme:dark) {
:root { :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); --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; --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) { @media(prefers-color-scheme:light) {
:root { :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); --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; --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;

View File

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

View File

@ -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/root.css') }}">
<link rel="stylesheet" type='text/css' href="{{ asset('assets/default_theme/css/base.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')) %} {% 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) }}"> <link rel='stylesheet' type='text/css' href="{{ asset(stylesheet) }}">
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}