diff --git a/plugins/Oomox/Controller/Oomox.php b/plugins/Oomox/Controller/Oomox.php index 42c1093fe8..ed639d1359 100644 --- a/plugins/Oomox/Controller/Oomox.php +++ b/plugins/Oomox/Controller/Oomox.php @@ -1,6 +1,6 @@ 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([ - ['colour_foreground', ColorType::class, [ - 'html5' => true, - '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(); + $form_light->handleRequest($request); + if ($form_light->isSubmitted() && $form_light->isValid()) { + $data = $form_light->getData(); $current_oomox_settings = Entity\Oomox::create( [ 'actor_id' => $actor_id, - 'colour_foreground' => $data['colour_foreground'], - 'colour_background_hard' => $data['colour_background_hard'], - 'colour_background_card' => $data['colour_background_card'], - 'colour_border' => $data['colour_border'], - 'colour_accent' => $data['colour_accent'], - 'colour_shadow' => $data['colour_shadow'], + 'colour_foreground_light' => $data['colour_foreground'], + 'colour_background_hard_light' => $data['colour_background_hard'], + 'colour_background_card_light' => $data['colour_background_card'], + 'colour_border_light' => $data['colour_border'], + 'colour_accent_light' => $data['colour_accent'], + '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); diff --git a/plugins/Oomox/Entity/Oomox.php b/plugins/Oomox/Entity/Oomox.php index 57e4c670b0..cf928f43d1 100644 --- a/plugins/Oomox/Entity/Oomox.php +++ b/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_background_hard; - private ?string $colour_background_card; - private ?string $colour_border; - private ?string $colour_accent; - private ?string $colour_shadow; + private ?string $colour_foreground_light; + private ?string $colour_background_hard_light; + private ?string $colour_background_card_light; + private ?string $colour_border_light; + private ?string $colour_accent_light; + 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_background_hard' => ['type' => 'text', 'description' => 'color hex code'], - 'colour_background_card' => ['type' => 'text', 'description' => 'color hex code'], - 'colour_border' => ['type' => 'text', 'description' => 'color hex code'], - 'colour_accent' => ['type' => 'text', 'description' => 'color hex code'], - 'colour_shadow' => ['type' => 'text', 'description' => 'color hex code'], + 'colour_foreground_light' => ['type' => 'text', 'description' => 'color hex code'], + 'colour_background_hard_light' => ['type' => 'text', 'description' => 'color hex code'], + 'colour_background_card_light' => ['type' => 'text', 'description' => 'color hex code'], + 'colour_border_light' => ['type' => 'text', 'description' => 'color hex code'], + 'colour_accent_light' => ['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'], ], diff --git a/plugins/Oomox/Oomox.php b/plugins/Oomox/Oomox.php index 1cf361bdaf..5b5d1399d8 100644 --- a/plugins/Oomox/Oomox.php +++ b/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; diff --git a/plugins/Oomox/templates/oomox/oomoxSettings.html.twig b/plugins/Oomox/templates/oomox/oomoxSettings.html.twig deleted file mode 100644 index d3155154c3..0000000000 --- a/plugins/Oomox/templates/oomox/oomoxSettings.html.twig +++ /dev/null @@ -1,3 +0,0 @@ -
- {{ form(oomox) }} -
\ No newline at end of file diff --git a/plugins/Oomox/templates/oomox/oomoxSettingsDark.html.twig b/plugins/Oomox/templates/oomox/oomoxSettingsDark.html.twig new file mode 100644 index 0000000000..5504812e1d --- /dev/null +++ b/plugins/Oomox/templates/oomox/oomoxSettingsDark.html.twig @@ -0,0 +1,3 @@ +
+ {{ form(oomoxDark) }} +
\ No newline at end of file diff --git a/plugins/Oomox/templates/oomox/oomoxSettingsLight.html.twig b/plugins/Oomox/templates/oomox/oomoxSettingsLight.html.twig new file mode 100644 index 0000000000..5106dc9f4e --- /dev/null +++ b/plugins/Oomox/templates/oomox/oomoxSettingsLight.html.twig @@ -0,0 +1,3 @@ +
+ {{ form(oomoxLight) }} +
\ No newline at end of file diff --git a/plugins/Oomox/templates/oomox/root_override.css.twig b/plugins/Oomox/templates/oomox/root_override.css.twig index c16ca1c52a..e52363e774 100644 --- a/plugins/Oomox/templates/oomox/root_override.css.twig +++ b/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; - --background-hard: {{ oomox.getColourBackgroundHard() | default('#141216') | raw }}; - --background-card: {{ oomox.getColourBackgroundCard() | default('#131217') | raw }}; - --border: {{ oomox.getColourBorder() | default('#201f25') | raw }}; - --accent: {{ oomox.getColourAccent() | default('#5ddbcf') | raw }}; - --shadow: 0 0 12px 0 {{ oomox.getColourShadow() | default('#01010166') | raw }}; + --foreground: {{ oomox.getColourForegroundDark() | default('#f0f6f6') | raw }}; + --background-hard: {{ oomox.getColourBackgroundHardDark() | default('#141216') | raw }}; + --background-card: {{ oomox.getColourBackgroundCardDark() | default('#131217') | raw }}; + --border: {{ oomox.getColourBorderDark() | default('#201f25') | raw }}; + --accent: {{ oomox.getColourAccentDark() | default('#5ddbcf') | 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 }}; - --background-hard: {{ oomox.getColourBackgroundHard() | default('#ebebeb') | raw }}; - --background-card: {{ oomox.getColourBackgroundCard() | default('#f0f0f0') | raw }}; - --border: {{ oomox.getColourBorder() | default('#d5d5d5') | raw }}; - --accent: {{ oomox.getColourAccent() | default('#a22430') | raw }}; - --shadow: 0 0 12px 0 {{ oomox.getColourShadow() | default('#24243416') | raw }}; + --foreground: {{ oomox.getColourForegroundLight() | default('#09090d') | raw }}; + --background-hard: {{ oomox.getColourBackgroundHardLight() | default('#ebebeb') | raw }}; + --background-card: {{ oomox.getColourBackgroundCardLight() | default('#f0f0f0') | raw }}; + --border: {{ oomox.getColourBorderLight() | default('#d5d5d5') | raw }}; + --accent: {{ oomox.getColourAccentLight() | default('#a22430') | 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; diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css index e6b2a8fc43..961585f0bf 100644 --- a/public/assets/default_theme/css/widgets/buttons.css +++ b/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;