From bb77a37ff7cc6068b7ff5ed387703d036775c188 Mon Sep 17 00:00:00 2001 From: lexx Date: Wed, 20 Mar 2024 01:57:17 +0200 Subject: [PATCH] sidebar refactor --- front/js/svelte/records/Edit.svelte | 4 +- front/sass/_nav.scss | 12 +-- front/sass/_record-status-bar.scss | 8 ++ front/sass/app.scss | 86 +++------------------- src/Schema/Sidebar/Sidebar.php | 13 ++-- src/Schema/Sidebar/SidebarService.php | 56 +++++++++++--- src/Schema/Sidebar/View/ItemData.php | 15 ++++ src/Schema/Sidebar/View/SectionData.php | 19 +++++ src/Svelte/Svelte.php | 2 +- src/Views/sidebar/accordion-item.blade.php | 54 ++++++-------- src/Views/sidebar/sidebar.blade.php | 48 +----------- 11 files changed, 141 insertions(+), 176 deletions(-) create mode 100644 front/sass/_record-status-bar.scss create mode 100644 src/Schema/Sidebar/View/ItemData.php create mode 100644 src/Schema/Sidebar/View/SectionData.php diff --git a/front/js/svelte/records/Edit.svelte b/front/js/svelte/records/Edit.svelte index 0e4f64f..048f4cf 100644 --- a/front/js/svelte/records/Edit.svelte +++ b/front/js/svelte/records/Edit.svelte @@ -156,9 +156,7 @@ {#if !["_graph", "_info"].includes(activeContentTab) && isWritable} -
+
diff --git a/front/sass/_nav.scss b/front/sass/_nav.scss index a61453a..e385d83 100644 --- a/front/sass/_nav.scss +++ b/front/sass/_nav.scss @@ -40,32 +40,32 @@ } .accordion-button:not(.collapsed) { - background: rgba(11, 93, 30, 0.2) !important; + background: rgba(var(--lucent-bg), 0.2) !important; font-weight: bold; } .accordion .list-group-item { margin-left: 20px; - border-left: 2px solid rgba(11, 93, 30, 0.2); + border-left: 2px solid rgba(var(--lucent-bg-dark), 0.2); border-top: none; border-bottom: none; } .accordion .list-group-item:hover { - background: rgba(11, 93, 30, 0.1) !important; + background: rgba(var(--lucent-bg-dark), 0.1) !important; } .accordion .list-group-item.active { - border-left: 2px solid rgba(11, 93, 30, 0.8); + border-left: 2px solid rgba(var(--lucent-bg-dark), 0.8); border-top: none; border-bottom: none; - background: rgba(11, 93, 30, 0.1) !important; + background: rgba(var(--lucent-bg-dark), 0.1) !important; color: var(--bs-primary); } .sidebar-logo{ padding: 5px 20px; - border-bottom: 1px solid rgba(11, 93, 30, 0.2); + border-bottom: 1px solid rgba(var(--lucent-bg-dark), 0.2); } .sidebar-logo a{ text-decoration: none; diff --git a/front/sass/_record-status-bar.scss b/front/sass/_record-status-bar.scss new file mode 100644 index 0000000..c395d96 --- /dev/null +++ b/front/sass/_record-status-bar.scss @@ -0,0 +1,8 @@ +.record-status-bar { + position: fixed; + bottom: 0; + left: 0px; + width: 100%; + background: rgb(var(--lucent-bg-dark)); // old 206, 223, 210 + z-index: 1050; +} \ No newline at end of file diff --git a/front/sass/app.scss b/front/sass/app.scss index 5fe0fc7..16e13d6 100644 --- a/front/sass/app.scss +++ b/front/sass/app.scss @@ -3,86 +3,21 @@ /* SCSS HEX */ $green-crayola: #0dab76ff; $green-pigment: #139a43ff; -$lincoln-green: #0b5d1eff; +$lincoln-green: #3e5d8f; $forest-green-traditional: #053b06ff; $black: #000000ff; -/* SCSS Gradient */ -$gradient-top: linear-gradient( - 0deg, - #0dab76ff, - #139a43ff, - #0b5d1eff, - #053b06ff, - #000000ff -); -$gradient-right: linear-gradient( - 90deg, - #0dab76ff, - #139a43ff, - #0b5d1eff, - #053b06ff, - #000000ff -); -$gradient-bottom: linear-gradient( - 180deg, - #0dab76ff, - #139a43ff, - #0b5d1eff, - #053b06ff, - #000000ff -); -$gradient-left: linear-gradient( - 270deg, - #0dab76ff, - #139a43ff, - #0b5d1eff, - #053b06ff, - #000000ff -); -$gradient-top-right: linear-gradient( - 45deg, - #0dab76ff, - #139a43ff, - #0b5d1eff, - #053b06ff, - #000000ff -); -$gradient-bottom-right: linear-gradient( - 135deg, - #0dab76ff, - #139a43ff, - #0b5d1eff, - #053b06ff, - #000000ff -); -$gradient-top-left: linear-gradient( - 225deg, - #0dab76ff, - #139a43ff, - #0b5d1eff, - #053b06ff, - #000000ff -); -$gradient-bottom-left: linear-gradient( - 315deg, - #0dab76ff, - #139a43ff, - #0b5d1eff, - #053b06ff, - #000000ff -); -$gradient-radial: radial-gradient( - #0dab76ff, - #139a43ff, - #0b5d1eff, - #053b06ff, - #000000ff -); +:root { + /* #f0f0f0 in decimal RGB */ + --lucent-bg:216, 223, 233; //old 11, 93, 30 + --lucent-bg-dark:34, 44, 60; //old 11, 93, 30 +} + $primary: $lincoln-green; $table-striped-bg-factor: 0.03; -$dropdown-bg: rgb(206, 223, 210); +$dropdown-bg: rgb(var(--lucent-bg)); //rgb(206, 223, 210) + @import "../node_modules/bootstrap/scss/bootstrap"; @import "./sidebar"; @@ -96,6 +31,9 @@ $dropdown-bg: rgb(206, 223, 210); @import "./nav"; @import "./files"; @import "./revisions"; +@import "./record-status-bar"; + + body { background-color: rgba(11, 93, 30, 0.04); diff --git a/src/Schema/Sidebar/Sidebar.php b/src/Schema/Sidebar/Sidebar.php index 2c28e65..ad72a3c 100644 --- a/src/Schema/Sidebar/Sidebar.php +++ b/src/Schema/Sidebar/Sidebar.php @@ -2,7 +2,13 @@ namespace Lucent\Schema\Sidebar; +use Hoa\File\Link\Link; +use Lucent\Channel\Channel; use Lucent\Primitive\Collection; +use Lucent\Schema\Sidebar\Item\Item; +use Lucent\Schema\Sidebar\Item\LinkItem; +use Lucent\Schema\Sidebar\Item\SchemaItem; +use Lucent\Schema\Sidebar\View\ItemData; class Sidebar { @@ -20,10 +26,5 @@ class Sidebar return new self((new Collection($data))->map(fn($sectionData) => Section::fromArray($sectionData))); } - public function getUsedSchemas(): array - { - return $this->sections->reduce(function (array $carry, Section $section) { - return array_merge($carry, $section->items->pluck("schema")->toArray()); - }, []); - } + } \ No newline at end of file diff --git a/src/Schema/Sidebar/SidebarService.php b/src/Schema/Sidebar/SidebarService.php index 591213e..cebfbaf 100644 --- a/src/Schema/Sidebar/SidebarService.php +++ b/src/Schema/Sidebar/SidebarService.php @@ -4,35 +4,73 @@ namespace Lucent\Schema\Sidebar; use Lucent\Channel\Channel; +use Lucent\Channel\ChannelService; +use Lucent\Primitive\Collection; +use Lucent\Schema\CollectionSchema; +use Lucent\Schema\FilesSchema; +use Lucent\Schema\Schema; +use Lucent\Schema\Sidebar\Item\Item; +use Lucent\Schema\Sidebar\Item\LinkItem; +use Lucent\Schema\Sidebar\Item\SchemaItem; +use Lucent\Schema\Sidebar\View\ItemData; +use Lucent\Schema\Sidebar\View\SectionData; use PhpOption\Option; use Symfony\Component\Yaml\Yaml; class SidebarService { - public function __construct() + public function __construct( + private ChannelService $channelService, + ) { } /** - * @param Channel $channel * @param array $readableSchemas * @param string $currentSchema * @return string */ - public function render(Channel $channel, array $readableSchemas, string $currentSchema): string + public function render(array $readableSchemas, string $currentSchema): string { - $schemas = $channel->schemas->whereIn("name", $readableSchemas); + $schemas = $this->channelService->channel->schemas->whereIn("name", $readableSchemas); + $sidebar = $this->fromConfig(); + $sections = []; + $usedSchemaNames = []; + if ($sidebar->isDefined()) { + $sections = $sidebar->get()->sections->map(function (Section $section) use ($currentSchema): SectionData { + return new SectionData( + label: $section->label, + isOpen: $section->items->where("schema", $currentSchema)->isNotEmpty(), + items: array_map(fn($item) => $this->renderItem($currentSchema, $item), $section->items->toArray()) + ); + })->toArray(); + + $usedSchemaNames =$sidebar->get()->sections->reduce(fn(array $carry, Section $section) => array_merge($carry, $section->items->pluck("schema")->toArray()), []); + } + + $sections[] = new SectionData( + label: $sidebar->isDefined() ? "Rest" : "Content", + isOpen: $schemas->whereNotIn("name",$usedSchemaNames)->where("name",$currentSchema)->isNotEmpty(), + items: array_map(fn($item) => $this->renderItem($currentSchema, $item), $schemas->whereNotIn("name",$usedSchemaNames)->toArray()) + ); return view('lucent::sidebar.sidebar', [ - 'sidebar' => $this->fromConfig(), - 'schemas' => $schemas, - 'channel' => $channel, - 'currentSchema' => $currentSchema, - 'lucentUrl' => $channel->lucentUrl, + 'channel' => $this->channelService->channel, + 'sections' => $sections, ])->render(); } + private function renderItem(string $currentSchema, Item|Schema $item): ItemData + { + return match (get_class($item)) { + LinkItem::class => new ItemData($item->label, $item->href, false, true), + SchemaItem::class => new ItemData($item->label, $this->channelService->channel->lucentUrl . "/content/" . $item->schema, $currentSchema === $item->schema, false), + CollectionSchema::class => new ItemData($item->label, $this->channelService->channel->lucentUrl . "/content/" . $item->name, $currentSchema === $item->name, false), + FilesSchema::class => new ItemData($item->label, $this->channelService->channel->lucentUrl . "/content/" . $item->name, $currentSchema === $item->name, false), + }; + } + /** * @return Option */ diff --git a/src/Schema/Sidebar/View/ItemData.php b/src/Schema/Sidebar/View/ItemData.php new file mode 100644 index 0000000..7d92f1c --- /dev/null +++ b/src/Schema/Sidebar/View/ItemData.php @@ -0,0 +1,15 @@ + $ItemData + */ + public function __construct( + public string $label, + public bool $isOpen, + public array $items, + ) + { + } +} \ No newline at end of file diff --git a/src/Svelte/Svelte.php b/src/Svelte/Svelte.php index 14aa044..6d9a29f 100644 --- a/src/Svelte/Svelte.php +++ b/src/Svelte/Svelte.php @@ -25,7 +25,7 @@ class Svelte $context["user"] = session('user'); $context["view"] = $view; $context["layout"] = $layout; - $context["sidebar"] = $this->sidebarService->render($this->channelService->channel,$readableSchemas, $data["schema"]?->name ?? ""); + $context["sidebar"] = $this->sidebarService->render($readableSchemas, $data["schema"]?->name ?? ""); $context["title"] = $title; $context["data"] = $data; $context["channel"] = $this->channelService->channel; diff --git a/src/Views/sidebar/accordion-item.blade.php b/src/Views/sidebar/accordion-item.blade.php index 5523938..5269198 100644 --- a/src/Views/sidebar/accordion-item.blade.php +++ b/src/Views/sidebar/accordion-item.blade.php @@ -1,33 +1,27 @@ -
- @php - $show = $schemas->where("name", $currentSchema)->isNotEmpty() || $main; - @endphp +@foreach($sections as $index => $section) +
+

+ +

-

- -

- -
-
- @foreach($schemas as $schema) - - {{$schema->label}} - - @endforeach +
+
+ @foreach($section->items as $item) + isLink ? ' target="_blank"' : ""}} + >{{$item->label}} + @endforeach +
-
\ No newline at end of file +@endforeach \ No newline at end of file diff --git a/src/Views/sidebar/sidebar.blade.php b/src/Views/sidebar/sidebar.blade.php index acbfe10..b490d85 100644 --- a/src/Views/sidebar/sidebar.blade.php +++ b/src/Views/sidebar/sidebar.blade.php @@ -2,51 +2,5 @@ {{$channel->name}}
- @if($sidebar->isEmpty()) - @include("lucent::sidebar.accordion-item", ["schemas" => $schemas, "currentSchema" => $currentSchema, "lucentUrl" => $lucentUrl, "main" => true]) - @else - @foreach($sidebar->get()->sections as $index => $section) - @php - $show = $section->items->where("schema", $currentSchema)->isNotEmpty(); - @endphp -
-

- -

- -
-
- @foreach($section->items as $item) - @if(isset($item->href)) - {{$item->label}} - @else - @php - $schema = $schemas->where("name",$item->schema)->first(); - - @endphp - - {{$item->label}} - @endif - - @endforeach -
-
-
- @endforeach - @include("lucent::sidebar.accordion-item", ["schemas" => $schemas->whereNotIn("name",$sidebar->get()->getUsedSchemas()), "currentSchema" => $currentSchema, "lucentUrl" => $lucentUrl, "main" => false]) - @endif + @include("lucent::sidebar.accordion-item")
\ No newline at end of file