Commit b05d177f authored by Yassine Doghri's avatar Yassine Doghri
Browse files

fix: update MarkdownEditor component + restyle Button and other components

parent 746b5187
......@@ -57,14 +57,14 @@ if (! function_exists('data_table')) {
'table_open' => '<table class="w-full whitespace-no-wrap">',
'thead_open' =>
'<thead class="text-xs font-semibold text-left text-gray-500 uppercase border-b">',
'<thead class="text-xs font-semibold text-left text-gray-500 uppercase">',
'heading_cell_start' => '<th class="px-4 py-2">',
'cell_start' => '<td class="px-4 py-2">',
'cell_alt_start' => '<td class="px-4 py-2">',
'row_start' => '<tr class="bg-gray-50 hover:bg-pine-50">',
'row_alt_start' => '<tr class="hover:bg-pine-50">',
'row_start' => '<tr class="border-t hover:bg-pine-50">',
'row_alt_start' => '<tr class="border-t hover:bg-pine-50">',
];
$table->setTemplate($template);
......@@ -89,7 +89,7 @@ if (! function_exists('data_table')) {
return lang('Common.no_data');
}
return '<div class="overflow-x-auto bg-white rounded-lg shadow ' . $class . '" >' .
return '<div class="overflow-x-auto bg-white rounded-lg border-3 border-pine-100 ' . $class . '" >' .
$table->generate() .
'</div>';
}
......
......@@ -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',
......
......@@ -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',
];
......
......@@ -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;
}
}
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`<slot name="write" @click="${this.write}"></slot>
return html`<slot name="write" class="active" @click="${this.write}"></slot>
<slot name="preview" @click="${this.preview}"></slot>`;
}
}
......@@ -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 = '<Icon glyph="' . $this->iconLeft . '" class="mr-2" />' . $this->slot;
$this->slot = '<Icon glyph="' . $this->iconLeft . '" class="mr-2 opacity-75" />' . $this->slot;
}
if ($this->iconRight !== '') {
$this->slot .= '<Icon glyph="' . $this->iconRight . '" class="ml-2" />';
$this->slot .= '<Icon glyph="' . $this->iconRight . '" class="ml-2 opacity-75" />';
}
unset($this->attributes['slot']);
......
......@@ -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
......
......@@ -36,31 +36,33 @@ class MarkdownEditor extends FormComponent
return <<<HTML
<div class="{$editorClass}">
<header class="sticky top-0 z-20 flex flex-wrap justify-between bg-white border-b border-black">
<markdown-write-preview for="{$this->id}" class="relative inline-flex h-8">
<button type="button" slot="write" class="px-2 font-semibold focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">{$translations['write']}</button>
<button type="button" slot="preview" class="px-2 focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">{$translations['preview']}</button>
</markdown-write-preview>
<markdown-toolbar for=" {$this->id} " class="flex gap-4 px-2 py-1">
<div class="inline-flex text-2xl gap-x-1">
<md-header class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['heading']}</md-header>
<md-bold class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['bold']}</md-bold>
<md-italic class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['italic']}</md-italic>
</div>
<div class="inline-flex text-2xl gap-x-1">
<md-unordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['list-unordered']}</md-unordered-list>
<md-ordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['list-ordered']}</md-ordered-list>
</div>
<div class="inline-flex text-2xl gap-x-1">
<md-quote class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['quote']}</md-quote>
<md-link class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['link']}</md-link>
<md-image class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['image-add']}</md-image>
</div>
</markdown-toolbar>
<header class="px-2">
<div class="sticky top-0 z-20 flex flex-wrap justify-between bg-white border-b border-gray-300">
<markdown-write-preview for="{$this->id}" class="relative inline-flex h-8">
<button type="button" slot="write" class="px-2 font-semibold focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">{$translations['write']}</button>
<button type="button" slot="preview" class="px-2 font-semibold focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">{$translations['preview']}</button>
</markdown-write-preview>
<markdown-toolbar for="{$this->id}" class="flex gap-4 px-2 py-1">
<div class="inline-flex text-2xl gap-x-1">
<md-header class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['heading']}</md-header>
<md-bold class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['bold']}</md-bold>
<md-italic class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['italic']}</md-italic>
</div>
<div class="inline-flex text-2xl gap-x-1">
<md-unordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['list-unordered']}</md-unordered-list>
<md-ordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['list-ordered']}</md-ordered-list>
</div>
<div class="inline-flex text-2xl gap-x-1">
<md-quote class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['quote']}</md-quote>
<md-link class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['link']}</md-link>
<md-image class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['image-add']}</md-image>
</div>
</markdown-toolbar>
</div>
</header>
<div class="relative">
{$textarea}
<markdown-preview for=" {$this->id} " class="absolute top-0 left-0 hidden w-full h-full p-2 overflow-y-auto prose bg-gray-50" showClass="bg-white" />
<markdown-preview for="{$this->id}" class="absolute top-0 left-0 hidden w-full h-full p-2 overflow-y-auto prose bg-gray-50" showClass="bg-white" />
</div>
<footer class="flex px-2 py-1 bg-gray-100 border-t">
<a href="https://commonmark.org/help/" class="inline-flex items-center text-xs font-semibold text-gray-500 hover:text-gray-700" target="_blank" rel="noopener noreferrer">{$icons['markdown']}{$translations['help']}</a>
......
......@@ -19,7 +19,7 @@ class Section extends Component
$subtitle = $this->subtitle === null ? '' : '<p class="text-sm text-gray-600 clear-left ' . $this->subtitleClass . '">' . $this->subtitle . '</p>';
return <<<HTML
<fieldset class="w-full max-w-xl p-8 bg-white border-2 border-black rounded-xl {$this->class}">
<fieldset class="w-full max-w-xl p-8 bg-white border-3 border-pine-100 rounded-xl {$this->class}">
<Heading tagName="legend" class="float-left">{$this->title}</Heading>
{$subtitle}
<div class="flex flex-col gap-4 py-4 clear-left">{$this->slot}</div>
......
......@@ -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'),
......
......@@ -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'),
......
......@@ -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',
......
......@@ -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);"><?= icon('menu') ?></button>
</body>
</body>
\ No newline at end of file
......@@ -9,7 +9,7 @@
<?= $this->endSection() ?>
<?= $this->section('headerRight') ?>
<Button uri="<?= route_to('contributor-add', $podcast->id) ?>" variant="accent" iconLeft="add"><?= lang('Contributor.add') ?></Button>
<Button uri="<?= route_to('contributor-add', $podcast->id) ?>" variant="primary" iconLeft="add"><?= lang('Contributor.add') ?></Button>
<?= $this->endSection() ?>
......@@ -32,8 +32,8 @@
[
'header' => lang('Common.actions'),
'cell' => function ($contributor, $podcast) {
return '<Button uri="' . route_to('contributor-edit', $podcast->id, $contributor->id) . '" variant="info" size="small">' . lang('Contributor.edit') . '</Button>' .
'<Button uri="' . route_to('contributor-remove', $podcast->id, $contributor->id) . '" variant="danger" size="small">' . lang('Contributor.remove') . '</Button>';
return '<Button uri="' . route_to('contributor-edit', $podcast->id, $contributor->id) . '" variant="secondary" iconLeft="edit" size="small">' . lang('Contributor.edit') . '</Button>' .
'<Button uri="' . route_to('contributor-remove', $podcast->id, $contributor->id) . '" variant="danger" iconLeft="delete-bin" size="small">' . lang('Contributor.remove') . '</Button>';
},
],
],
......
......@@ -9,7 +9,7 @@
<?= $this->endSection() ?>
<?= $this->section('headerRight') ?>
<Button uri="<?= route_to('episode-create', $podcast->id) ?>" variant="accent" iconLeft="add"><?= lang('Episode.create') ?></Button>
<Button uri="<?= route_to('episode-create', $podcast->id) ?>" variant="primary" iconLeft="add"><?= lang('Episode.create') ?></Button>
<?= $this->endSection() ?>
......
......@@ -55,9 +55,10 @@
],
],
$episode->persons,
'max-w-xl'
) ?>
<form action="<?= route_to('episode-person-edit', $episode->id) ?>" method="POST" class="mt-6">
<form action="<?= route_to('episode-persons-manage', $episode->id) ?>" method="POST" class="mt-6">
<?= csrf_field() ?>
<Forms.Section
......
......@@ -12,7 +12,7 @@
<?= $this->section('content') ?>
<form action="<?= route_to('fediverse-attempt-block-actor') ?>" method="POST" class="flex flex-col max-w-md">
<Forms.Field name="handle" label="<?= lang('Fediverse.block_lists_form.handle') ?>" hint="<?= lang('Fediverse.block_lists_form.handle_hint') ?>" />
<Forms.Field name="handle" label="<?= lang('Fediverse.block_lists_form.handle') ?>" hint="<?= lang('Fediverse.block_lists_form.handle_hint') ?>" required="true" />
<Button variant="primary" type="submit" class="self-end"><?= lang('Fediverse.block_lists_form.submit') ?></Button>
</form>
......
......@@ -12,7 +12,7 @@
<?= $this->section('content') ?>
<form action="<?= route_to('fediverse-attempt-block-domain') ?>" method="POST" class="flex flex-col max-w-md">
<Forms.Field name="domain" label="<?= lang('Fediverse.block_lists_form.domain') ?>" />
<Forms.Field name="domain" label="<?= lang('Fediverse.block_lists_form.domain') ?>" required="true" />
<Button variant="primary" type="submit" class="self-end"><?= lang('Fediverse.block_lists_form.submit') ?></Button>
</form>
......
......@@ -21,10 +21,10 @@
data-slugify="title"
class="max-w-sm" />
<div>
<div class="flex flex-col max-w-sm">
<Forms.Label for="slug"><?= lang('Page.form.permalink') ?></Forms.Label>
<permalink-edit class="inline-flex items-center text-xs" edit-label="<?= lang('Common.edit') ?>" copy-label="<?= lang('Common.copy') ?>" copied-label="<?= lang('Common.copied') ?>">
<span slot="domain"><?= base_url('pages') . '/' ?></span>
<span slot="domain" class="flex-shrink-0"><?= base_url('pages') . '/' ?></span>
<Forms.Input name="slug" required="true" data-slugify="slug" slot="slug-input" class="flex-1 text-xs" />
</permalink-edit>
</div>
......
......@@ -11,23 +11,23 @@
<?= $this->section('content') ?>
<form action="<?= route_to('page-edit', $page->id) ?>" method="POST" class="flex flex-col max-w-3xl">
<form action="<?= route_to('page-edit', $page->id) ?>" method="POST" class="flex flex-col max-w-3xl gap-y-4">
<?= csrf_field() ?>
<Forms.Field
name="title"
label="<?= lang('Page.form.title') ?>"
required="true"
data-slugify="title"
value="<?= $page->title ?>"
slot="slug-input" />
slot="slug-input"
class="max-w-sm" />
<div>
<div class="flex flex-col max-w-sm">
<Forms.Label for="slug"><?= lang('Page.form.permalink') ?></Forms.Label>
<permalink-edit class="inline-flex items-center text-xs" edit-label="<?= lang('Common.edit') ?>" copy-label="<?= lang('Common.copy') ?>" copied-label="<?= lang('Common.copied') ?>">
<span slot="domain"><?= base_url('pages') . '/' ?></span>
<Forms.Input name="slug" value="<?= $episode->slug ?>" required="true" data-slugify="slug" slot="slug-input" class="flex-1 text-xs" value="<?= $page->slug ?>"/>
<span slot="domain" class="flex-shrink-0"><?= base_url('pages') . '/' ?></span>
<Forms.Input name="slug" value="<?= $page->slug ?>" required="true" data-slugify="slug" slot="slug-input" class="flex-1 text-xs" value="<?= $page->slug ?>"/>
</permalink-edit>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment