From b05d177f1b7f44fef043ac5eb41f07133a2cf52d Mon Sep 17 00:00:00 2001 From: Yassine Doghri Date: Tue, 21 Sep 2021 15:51:04 +0000 Subject: [PATCH] fix: update MarkdownEditor component + restyle Button and other components --- app/Helpers/components_helper.php | 8 ++-- app/Language/en/Podcast.php | 4 +- app/Models/PersonModel.php | 2 +- app/Models/PodcastModel.php | 20 +++++++- .../js/modules/markdown-write-preview.ts | 40 +++++++++++++--- app/Views/Components/Button.php | 22 ++++----- app/Views/Components/Forms/FormComponent.php | 5 -- app/Views/Components/Forms/MarkdownEditor.php | 46 ++++++++++--------- app/Views/Components/Forms/Section.php | 2 +- .../Admin/Controllers/PodcastController.php | 1 - .../Controllers/PodcastImportController.php | 4 +- modules/Admin/Language/en/Podcast.php | 4 +- themes/cp_admin/_layout.php | 2 +- themes/cp_admin/contributor/list.php | 6 +-- themes/cp_admin/episode/list.php | 2 +- themes/cp_admin/episode/persons.php | 3 +- themes/cp_admin/fediverse/blocked_actors.php | 2 +- themes/cp_admin/fediverse/blocked_domains.php | 2 +- themes/cp_admin/page/create.php | 4 +- themes/cp_admin/page/edit.php | 12 ++--- themes/cp_admin/page/list.php | 2 +- themes/cp_admin/page/view.php | 2 +- themes/cp_admin/person/create.php | 2 +- themes/cp_admin/podcast/list.php | 4 +- themes/cp_admin/podcast/persons.php | 30 ++++++------ themes/cp_admin/podcast/platforms.php | 8 ++-- themes/cp_admin/podcast/view.php | 4 +- themes/cp_admin/user/create.php | 2 +- themes/cp_admin/user/list.php | 2 +- themes/cp_auth/_layout.php | 14 +++--- themes/cp_auth/_message_block.php | 20 ++++++++ themes/cp_auth/forgot.php | 2 +- themes/cp_auth/login.php | 2 +- themes/cp_auth/register.php | 3 +- themes/cp_auth/reset.php | 3 +- 35 files changed, 176 insertions(+), 115 deletions(-) create mode 100644 themes/cp_auth/_message_block.php diff --git a/app/Helpers/components_helper.php b/app/Helpers/components_helper.php index a858da80..f77d66ad 100644 --- a/app/Helpers/components_helper.php +++ b/app/Helpers/components_helper.php @@ -57,14 +57,14 @@ if (! function_exists('data_table')) { 'table_open' => '', 'thead_open' => - '', + '', 'heading_cell_start' => '', - 'row_alt_start' => '', + 'row_start' => '', + 'row_alt_start' => '', ]; $table->setTemplate($template); @@ -89,7 +89,7 @@ if (! function_exists('data_table')) { return lang('Common.no_data'); } - return '
' . + return '
' . $table->generate() . '
'; } diff --git a/app/Language/en/Podcast.php b/app/Language/en/Podcast.php index ec83a05e..0683cb2d 100644 --- a/app/Language/en/Podcast.php +++ b/app/Language/en/Podcast.php @@ -11,8 +11,8 @@ declare(strict_types=1); return [ 'all_podcasts' => 'All podcasts', 'no_podcast' => 'No podcast found!', - 'create' => 'Create a podcast', - 'import' => 'Import a podcast', + 'create' => 'Create podcast', + 'import' => 'Import podcast', 'new_episode' => 'New Episode', 'feed' => 'RSS', 'view' => 'View podcast', diff --git a/app/Models/PersonModel.php b/app/Models/PersonModel.php index 41cc30a2..36fba45c 100644 --- a/app/Models/PersonModel.php +++ b/app/Models/PersonModel.php @@ -62,7 +62,7 @@ class PersonModel extends Model protected $validationRules = [ 'full_name' => 'required', 'unique_name' => - 'required|regex_match[/^[a-z0-9\-]{1,191}$/]|is_unique[persons.unique_name,id,{id}]', + 'required|regex_match[/^[a-z0-9\-]{1,32}$/]|is_unique[persons.unique_name,id,{id}]', 'created_by' => 'required', 'updated_by' => 'required', ]; diff --git a/app/Models/PodcastModel.php b/app/Models/PodcastModel.php index 8022db3a..5e185491 100644 --- a/app/Models/PodcastModel.php +++ b/app/Models/PodcastModel.php @@ -10,6 +10,7 @@ declare(strict_types=1); namespace App\Models; +use App\Entities\Actor; use App\Entities\Podcast; use CodeIgniter\Database\Query; use CodeIgniter\HTTP\URI; @@ -88,7 +89,7 @@ class PodcastModel extends Model protected $validationRules = [ 'title' => 'required', 'handle' => - 'required|regex_match[/^[a-zA-Z0-9\_]{1,191}$/]|is_unique[podcasts.handle,id,{id}]', + 'required|regex_match[/^[a-zA-Z0-9\_]{1,32}$/]|is_unique[podcasts.handle,id,{id}]', 'description_markdown' => 'required', 'image_path' => 'required', 'language_code' => 'required', @@ -102,7 +103,7 @@ class PodcastModel extends Model /** * @var string[] */ - protected $beforeInsert = ['createPodcastActor']; + protected $beforeInsert = ['setPodcastGUID', 'createPodcastActor']; /** * @var string[] @@ -489,4 +490,19 @@ class PodcastModel extends Model return $data; } + + /** + * @param mixed[] $data + * + * @return mixed[] + */ + protected function setPodcastGUID(array $data): array + { + if (! array_key_exists('guid', $data['data']) || $data['data']['guid'] === null) { + helper('misc'); + $data['data']['guid'] = podcast_uuid(url_to('podcast_feed', $data['data']['handle'])); + } + + return $data; + } } diff --git a/app/Resources/js/modules/markdown-write-preview.ts b/app/Resources/js/modules/markdown-write-preview.ts index 7c8947c3..7c10359b 100644 --- a/app/Resources/js/modules/markdown-write-preview.ts +++ b/app/Resources/js/modules/markdown-write-preview.ts @@ -1,4 +1,4 @@ -import { html, LitElement, TemplateResult } from "lit"; +import { css, html, LitElement, TemplateResult } from "lit"; import { customElement, property, queryAssignedNodes } from "lit/decorators.js"; import { MarkdownPreview } from "./markdown-preview"; @@ -28,20 +28,48 @@ export class MarkdownWritePreview extends LitElement { ) as MarkdownPreview; } + firstUpdated(): void { + this.write(); + } + write(): void { this._markdownPreview.hide(); - this._write[0].classList.add("font-semibold"); - this._preview[0].classList.remove("font-semibold"); + this._write[0].classList.add("active"); + this._preview[0].classList.remove("active"); } preview(): void { this._markdownPreview.show(); - this._preview[0].classList.add("font-semibold"); - this._write[0].classList.remove("font-semibold"); + this._preview[0].classList.add("active"); + this._write[0].classList.remove("active"); } + static styles = css` + ::slotted(button) { + opacity: 0.5; + } + + ::slotted(button.active) { + position: relative; + opacity: 1; + } + + ::slotted(button.active)::after { + content: ""; + position: absolute; + bottom: -2px; + left: 0; + right: 0; + width: 80%; + height: 4px; + margin: 0 auto; + background-color: #009486; + border-radius: 9999px; + } + `; + render(): TemplateResult<1> { - return html` + return html` `; } } diff --git a/app/Views/Components/Button.php b/app/Views/Components/Button.php index 34473df4..dc2080fc 100644 --- a/app/Views/Components/Button.php +++ b/app/Views/Components/Button.php @@ -28,29 +28,29 @@ class Button extends Component public function render(): string { $baseClass = - 'inline-flex items-center justify-center font-semibold shadow-xs rounded-full focus:outline-none focus:ring'; + 'flex-shrink-0 inline-flex items-center justify-center font-semibold shadow-xs rounded-full focus:outline-none focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100'; $variantClass = [ 'default' => 'text-black bg-gray-300 hover:bg-gray-400', 'primary' => 'text-white bg-pine-500 hover:bg-pine-800', - 'secondary' => 'text-white bg-gray-700 hover:bg-gray-800', + 'secondary' => 'border-2 border-pine-500 text-pine-500 bg-pine-100 hover:border-pine-800 hover:text-pine-800', 'accent' => 'text-white bg-rose-600 hover:bg-rose-800', - 'success' => 'text-white bg-green-600 hover:bg-green-700', + 'success' => 'text-white bg-pine-500 hover:bg-pine-800', 'danger' => 'text-white bg-red-600 hover:bg-red-700', 'warning' => 'text-black bg-yellow-500 hover:bg-yellow-600', 'info' => 'text-white bg-blue-500 hover:bg-blue-600', ]; $sizeClass = [ - 'small' => 'text-xs md:text-sm', - 'base' => 'text-sm md:text-base', - 'large' => 'text-lg md:text-xl', + 'small' => 'text-xs leading-6', + 'base' => 'text-sm leading-5', + 'large' => 'text-base leading-6', ]; $basePaddings = [ - 'small' => 'px-2 md:px-3 md:py-1', - 'base' => 'px-3 py-1 md:px-4 md:py-2', - 'large' => 'px-3 py-2 md:px-5', + 'small' => 'px-2 py-1', + 'base' => 'px-3 py-2', + 'large' => 'px-4 py-2', ]; $squaredPaddings = [ @@ -76,11 +76,11 @@ class Button extends Component } if ($this->iconLeft !== '') { - $this->slot = '' . $this->slot; + $this->slot = '' . $this->slot; } if ($this->iconRight !== '') { - $this->slot .= ''; + $this->slot .= ''; } unset($this->attributes['slot']); diff --git a/app/Views/Components/Forms/FormComponent.php b/app/Views/Components/Forms/FormComponent.php index 818f1ff5..251187ef 100644 --- a/app/Views/Components/Forms/FormComponent.php +++ b/app/Views/Components/Forms/FormComponent.php @@ -31,11 +31,6 @@ class FormComponent extends Component public function setRequired(string $value): void { $this->required = $value === 'true'; - if ($this->required) { - $this->attributes['required'] = 'required'; - } else { - unset($this->attributes['required']); - } } public function setReadonly(string $value): void diff --git a/app/Views/Components/Forms/MarkdownEditor.php b/app/Views/Components/Forms/MarkdownEditor.php index 4a729729..1c064ae5 100644 --- a/app/Views/Components/Forms/MarkdownEditor.php +++ b/app/Views/Components/Forms/MarkdownEditor.php @@ -36,31 +36,33 @@ class MarkdownEditor extends FormComponent return << -
- - - - - -
- {$icons['heading']} - {$icons['bold']} - {$icons['italic']} -
-
- {$icons['list-unordered']} - {$icons['list-ordered']} -
-
- {$icons['quote']} - {$icons['link']} - {$icons['image-add']} -
- +
+
+ + + + + +
+ {$icons['heading']} + {$icons['bold']} + {$icons['italic']} +
+
+ {$icons['list-unordered']} + {$icons['list-ordered']} +
+
+ {$icons['quote']} + {$icons['link']} + {$icons['image-add']} +
+ +
{$textarea} -
{$icons['markdown']}{$translations['help']} diff --git a/app/Views/Components/Forms/Section.php b/app/Views/Components/Forms/Section.php index 7458f643..b7aed14b 100644 --- a/app/Views/Components/Forms/Section.php +++ b/app/Views/Components/Forms/Section.php @@ -19,7 +19,7 @@ class Section extends Component $subtitle = $this->subtitle === null ? '' : '

' . $this->subtitle . '

'; return << +
{$this->title} {$subtitle}
{$this->slot}
diff --git a/modules/Admin/Controllers/PodcastController.php b/modules/Admin/Controllers/PodcastController.php index 6999c7ef..dfdfc57b 100644 --- a/modules/Admin/Controllers/PodcastController.php +++ b/modules/Admin/Controllers/PodcastController.php @@ -192,7 +192,6 @@ class PodcastController extends BaseController } $podcast = new Podcast([ - 'guid' => podcast_uuid(url_to('podcast_feed', $this->request->getPost('handle'))), 'title' => $this->request->getPost('title'), 'handle' => $this->request->getPost('handle'), 'description_markdown' => $this->request->getPost('description'), diff --git a/modules/Admin/Controllers/PodcastImportController.php b/modules/Admin/Controllers/PodcastImportController.php index 4d750c44..044f25a6 100644 --- a/modules/Admin/Controllers/PodcastImportController.php +++ b/modules/Admin/Controllers/PodcastImportController.php @@ -128,12 +128,10 @@ class PodcastImportController extends BaseController $nsPodcast->location->attributes()['osm'] === null ? null : (string) $nsPodcast->location->attributes()['osm'], ); } + $guid = null; if (property_exists($nsPodcast, 'guid') && $nsPodcast->guid !== null) { $guid = (string) $nsPodcast->guid; - } else { - $guid = podcast_uuid(url_to('podcast_feed', $this->request->getPost('handle'))); } - $podcast = new Podcast([ 'guid' => $guid, 'handle' => $this->request->getPost('handle'), diff --git a/modules/Admin/Language/en/Podcast.php b/modules/Admin/Language/en/Podcast.php index cd8d0872..2a107c52 100644 --- a/modules/Admin/Language/en/Podcast.php +++ b/modules/Admin/Language/en/Podcast.php @@ -11,8 +11,8 @@ declare(strict_types=1); return [ 'all_podcasts' => 'All podcasts', 'no_podcast' => 'No podcast found!', - 'create' => 'Create a podcast', - 'import' => 'Import a podcast', + 'create' => 'Create podcast', + 'import' => 'Import podcast', 'new_episode' => 'New Episode', 'feed' => 'RSS', 'view' => 'View podcast', diff --git a/themes/cp_admin/_layout.php b/themes/cp_admin/_layout.php index e77eaf7b..efb1eb76 100644 --- a/themes/cp_admin/_layout.php +++ b/themes/cp_admin/_layout.php @@ -102,4 +102,4 @@ id="sidebar-toggler" class="fixed bottom-0 left-0 z-50 p-3 mb-3 ml-3 text-xl transition duration-300 ease-in-out bg-white border-2 rounded-full shadow-lg focus:outline-none md:hidden hover:bg-gray-100 focus:ring" style="transform: translateX(0px);"> - + \ No newline at end of file diff --git a/themes/cp_admin/contributor/list.php b/themes/cp_admin/contributor/list.php index f6e3a6ea..ea6c4750 100644 --- a/themes/cp_admin/contributor/list.php +++ b/themes/cp_admin/contributor/list.php @@ -9,7 +9,7 @@ endSection() ?> section('headerRight') ?> - + endSection() ?> @@ -32,8 +32,8 @@ [ 'header' => lang('Common.actions'), 'cell' => function ($contributor, $podcast) { - return '' . - ''; + return '' . + ''; }, ], ], diff --git a/themes/cp_admin/episode/list.php b/themes/cp_admin/episode/list.php index ec7b2c4d..76936338 100644 --- a/themes/cp_admin/episode/list.php +++ b/themes/cp_admin/episode/list.php @@ -9,7 +9,7 @@ endSection() ?> section('headerRight') ?> - + endSection() ?> diff --git a/themes/cp_admin/episode/persons.php b/themes/cp_admin/episode/persons.php index 2b64fe3c..a903f0ce 100644 --- a/themes/cp_admin/episode/persons.php +++ b/themes/cp_admin/episode/persons.php @@ -55,9 +55,10 @@ ], ], $episode->persons, + 'max-w-xl' ) ?> -
+ section('content') ?> - + diff --git a/themes/cp_admin/fediverse/blocked_domains.php b/themes/cp_admin/fediverse/blocked_domains.php index 65d10ea9..3ff9ae87 100644 --- a/themes/cp_admin/fediverse/blocked_domains.php +++ b/themes/cp_admin/fediverse/blocked_domains.php @@ -12,7 +12,7 @@ section('content') ?>
- + diff --git a/themes/cp_admin/page/create.php b/themes/cp_admin/page/create.php index 0a13133b..50c6351b 100644 --- a/themes/cp_admin/page/create.php +++ b/themes/cp_admin/page/create.php @@ -21,10 +21,10 @@ data-slugify="title" class="max-w-sm" /> -
+
- +
diff --git a/themes/cp_admin/page/edit.php b/themes/cp_admin/page/edit.php index 14ac283e..a8957e20 100644 --- a/themes/cp_admin/page/edit.php +++ b/themes/cp_admin/page/edit.php @@ -11,23 +11,23 @@ section('content') ?> -
+ - + slot="slug-input" + class="max-w-sm" /> -
+
- - + +
diff --git a/themes/cp_admin/page/list.php b/themes/cp_admin/page/list.php index 8925a769..37ba1ad3 100644 --- a/themes/cp_admin/page/list.php +++ b/themes/cp_admin/page/list.php @@ -9,7 +9,7 @@ endSection() ?> section('headerRight') ?> - + endSection() ?> diff --git a/themes/cp_admin/page/view.php b/themes/cp_admin/page/view.php index 97d8bd35..fde36892 100644 --- a/themes/cp_admin/page/view.php +++ b/themes/cp_admin/page/view.php @@ -9,7 +9,7 @@ endSection() ?> section('headerRight') ?> - + endSection() ?> section('content') ?> diff --git a/themes/cp_admin/person/create.php b/themes/cp_admin/person/create.php index dc634870..2b142573 100644 --- a/themes/cp_admin/person/create.php +++ b/themes/cp_admin/person/create.php @@ -11,7 +11,7 @@ section('content') ?> - + endSection() ?> section('headerRight') ?> - - + + endSection() ?> diff --git a/themes/cp_admin/podcast/persons.php b/themes/cp_admin/podcast/persons.php index 2b2f9c3a..f5e2e58a 100644 --- a/themes/cp_admin/podcast/persons.php +++ b/themes/cp_admin/podcast/persons.php @@ -50,31 +50,31 @@ [ 'header' => lang('Common.actions'), 'cell' => function ($person): string { - return ''; + return ''; }, ], ], $podcast->persons, + 'max-w-xl' ) ?> - - + + - + - - + + - - + + - - - + + -endSection() ?> +endSection() ?> \ No newline at end of file diff --git a/themes/cp_admin/podcast/platforms.php b/themes/cp_admin/podcast/platforms.php index 88313a73..2b4cad9a 100644 --- a/themes/cp_admin/podcast/platforms.php +++ b/themes/cp_admin/podcast/platforms.php @@ -8,9 +8,13 @@ endSection() ?> +section('headerRight') ?> + +endSection() ?> + section('content') ?> -
+ @@ -102,8 +106,6 @@ - - endSection() ?> diff --git a/themes/cp_admin/podcast/view.php b/themes/cp_admin/podcast/view.php index a9b141e3..05957008 100644 --- a/themes/cp_admin/podcast/view.php +++ b/themes/cp_admin/podcast/view.php @@ -9,8 +9,8 @@ endSection() ?> section('headerRight') ?> - - + + endSection() ?> section('content') ?> diff --git a/themes/cp_admin/user/create.php b/themes/cp_admin/user/create.php index 6f68d2e9..d81377df 100644 --- a/themes/cp_admin/user/create.php +++ b/themes/cp_admin/user/create.php @@ -11,7 +11,7 @@ section('content') ?> -
+ endSection() ?> section('headerRight') ?> - + endSection() ?> diff --git a/themes/cp_auth/_layout.php b/themes/cp_auth/_layout.php index f2cbc7b0..30fca7a6 100644 --- a/themes/cp_auth/_layout.php +++ b/themes/cp_auth/_layout.php @@ -12,24 +12,24 @@ ->asset('styles/index.css', 'css') ?> - +
+ ) ?>" class="inline-flex items-baseline text-4xl font-bold font-display text-pine-500">
-
-

renderSection( +
+ renderSection( 'title', - ) ?>

- + ) ?> + renderSection('content') ?>
renderSection('footer') ?> - 'Castopod', ]) ?> diff --git a/themes/cp_auth/_message_block.php b/themes/cp_auth/_message_block.php new file mode 100644 index 00000000..3794ba39 --- /dev/null +++ b/themes/cp_auth/_message_block.php @@ -0,0 +1,20 @@ +has('message')): ?> + + + +has('error')): ?> + + + +has('errors')): ?> + +
    + +
    • + +
+ + diff --git a/themes/cp_auth/forgot.php b/themes/cp_auth/forgot.php index 5491648d..3895eb97 100644 --- a/themes/cp_auth/forgot.php +++ b/themes/cp_auth/forgot.php @@ -10,7 +10,7 @@

- + section('content') ?> - + section('content') ?> - + diff --git a/themes/cp_auth/reset.php b/themes/cp_auth/reset.php index 09c597e6..a711430f 100644 --- a/themes/cp_auth/reset.php +++ b/themes/cp_auth/reset.php @@ -5,12 +5,11 @@ endSection() ?> - section('content') ?>

- +
', 'cell_start' => '', 'cell_alt_start' => '', - 'row_start' => '