lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

sidebar refactor

Browse Source
This commit is contained in:
Alex Lingris
2024-03-20 01:57:17 +02:00
parent 1f03eebd08
commit bb77a37ff7
11 changed files with 141 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/records/Edit.svelte
+1 -3
View File
@@ -156,9 +156,7 @@
<EditHeader {schema} {record} {isCreateMode} {graph} bind:activeContentTab/> <EditHeader {schema} {record} {isCreateMode} {graph} bind:activeContentTab/>
{#if !["_graph", "_info"].includes(activeContentTab) && isWritable} {#if !["_graph", "_info"].includes(activeContentTab) && isWritable}
<div class="shadow-lg " <div class="shadow-lg record-status-bar">
style="position:fixed;bottom:0;left:0px;width:100%;background: rgb(206, 223, 210);z-index:1050"
>
<div <div
class="d-flex mt-3 mb-3 align-items-center justify-content-center" class="d-flex mt-3 mb-3 align-items-center justify-content-center"
> >
front/sass/_nav.scss
+6 -6
View File
@@ -40,32 +40,32 @@
} }
.accordion-button:not(.collapsed) { .accordion-button:not(.collapsed) {
background: rgba(11, 93, 30, 0.2) !important; background: rgba(var(--lucent-bg), 0.2) !important;
font-weight: bold; font-weight: bold;
} }
.accordion .list-group-item { .accordion .list-group-item {
margin-left: 20px; 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-top: none;
border-bottom: none; border-bottom: none;
} }
.accordion .list-group-item:hover { .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 { .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-top: none;
border-bottom: 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); color: var(--bs-primary);
} }
.sidebar-logo{ .sidebar-logo{
padding: 5px 20px; 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{ .sidebar-logo a{
text-decoration: none; text-decoration: none;
front/sass/_record-status-bar.scss
+8
View File
@@ -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;
}
front/sass/app.scss
+12 -74
View File
@@ -3,86 +3,21 @@
/* SCSS HEX */ /* SCSS HEX */
$green-crayola: #0dab76ff; $green-crayola: #0dab76ff;
$green-pigment: #139a43ff; $green-pigment: #139a43ff;
$lincoln-green: #0b5d1eff; $lincoln-green: #3e5d8f;
$forest-green-traditional: #053b06ff; $forest-green-traditional: #053b06ff;
$black: #000000ff; $black: #000000ff;
/* SCSS Gradient */ :root {
$gradient-top: linear-gradient( /* #f0f0f0 in decimal RGB */
0deg, --lucent-bg:216, 223, 233; //old 11, 93, 30
#0dab76ff, --lucent-bg-dark:34, 44, 60; //old 11, 93, 30
#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
);
$primary: $lincoln-green; $primary: $lincoln-green;
$table-striped-bg-factor: 0.03; $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 "../node_modules/bootstrap/scss/bootstrap";
@import "./sidebar"; @import "./sidebar";
@@ -96,6 +31,9 @@ $dropdown-bg: rgb(206, 223, 210);
@import "./nav"; @import "./nav";
@import "./files"; @import "./files";
@import "./revisions"; @import "./revisions";
@import "./record-status-bar";
body { body {
background-color: rgba(11, 93, 30, 0.04); background-color: rgba(11, 93, 30, 0.04);
src/Schema/Sidebar/Sidebar.php
+7 -6
View File
@@ -2,7 +2,13 @@
namespace Lucent\Schema\Sidebar; namespace Lucent\Schema\Sidebar;
use Hoa\File\Link\Link;
use Lucent\Channel\Channel;
use Lucent\Primitive\Collection; 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 class Sidebar
{ {
@@ -20,10 +26,5 @@ class Sidebar
return new self((new Collection($data))->map(fn($sectionData) => Section::fromArray($sectionData))); 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());
}, []);
}
} }
src/Schema/Sidebar/SidebarService.php
+47 -9
View File
@@ -4,35 +4,73 @@ namespace Lucent\Schema\Sidebar;
use Lucent\Channel\Channel; 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 PhpOption\Option;
use Symfony\Component\Yaml\Yaml; use Symfony\Component\Yaml\Yaml;
class SidebarService class SidebarService
{ {
public function __construct() public function __construct(
private ChannelService $channelService,
)
{ {
} }
/** /**
* @param Channel $channel
* @param array<string> $readableSchemas * @param array<string> $readableSchemas
* @param string $currentSchema * @param string $currentSchema
* @return string * @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', [ return view('lucent::sidebar.sidebar', [
'sidebar' => $this->fromConfig(), 'channel' => $this->channelService->channel,
'schemas' => $schemas, 'sections' => $sections,
'channel' => $channel,
'currentSchema' => $currentSchema,
'lucentUrl' => $channel->lucentUrl,
])->render(); ])->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<Sidebar> * @return Option<Sidebar>
*/ */
src/Schema/Sidebar/View/ItemData.php
+15
View File
@@ -0,0 +1,15 @@
<?php
namespace Lucent\Schema\Sidebar\View;
class ItemData
{
public function __construct(
public string $label,
public string $href,
public bool $isActive,
public bool $isLink,
)
{
}
}
src/Schema/Sidebar/View/SectionData.php
+19
View File
@@ -0,0 +1,19 @@
<?php
namespace Lucent\Schema\Sidebar\View;
class SectionData
{
/**
* @param string $label
* @param bool $isOpen
* @param array<ItemData> $ItemData
*/
public function __construct(
public string $label,
public bool $isOpen,
public array $items,
)
{
}
}
src/Svelte/Svelte.php
+1 -1
View File
@@ -25,7 +25,7 @@ class Svelte
$context["user"] = session('user'); $context["user"] = session('user');
$context["view"] = $view; $context["view"] = $view;
$context["layout"] = $layout; $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["title"] = $title;
$context["data"] = $data; $context["data"] = $data;
$context["channel"] = $this->channelService->channel; $context["channel"] = $this->channelService->channel;
src/Views/sidebar/accordion-item.blade.php
+24 -30
View File
@@ -1,33 +1,27 @@
<div class="accordion-item"> @foreach($sections as $index => $section)
@php <div class="accordion-item ">
$show = $schemas->where("name", $currentSchema)->isNotEmpty() || $main; <h2 class="accordion-header" id="panelsStayOpen-heading-{{$index}}">
@endphp <button class="accordion-button rounded-0 bg-primary-subtle {{$section->isOpen ? "" : "collapsed"}}"
type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapse-{{$index}}" aria-expanded="{{$section->isOpen}}"
aria-controls="panelsStayOpen-collapse-{{$index}}">
{{$section->label}}
</button>
</h2>
<h2 class="accordion-header" id="panelsStayOpen-headingMain"> <div id="panelsStayOpen-collapse-{{$index}}"
<button class="accordion-button bg-primary-subtle {{$show ? "" : "collapsed"}}" type="button" class="accordion-collapse collapse {{$section->isOpen ? "show" : ""}}"
data-bs-toggle="collapse" aria-labelledby="panelsStayOpen-heading-{{$index}}"
data-bs-target="#panelsStayOpen-collapseMain" aria-expanded="{{$show}}" data-bs-parent="#main-sidebar">
aria-controls="panelsStayOpen-collapseMain"> <div class="list-group list-group-flush bg-primary-subtle">
@if($main) @foreach($section->items as $item)
Content <a class="list-group-item list-group-item-action bg-primary-subtle {{ $item->isActive ? "active" : ""}}"
@else aria-current="page"
Other href="{{$item->href}}"
@endif {{ $item->isLink ? ' target="_blank"' : ""}}
>{{$item->label}}</a>
</button> @endforeach
</h2> </div>
<div id="panelsStayOpen-collapseMain" class="accordion-collapse collapse {{$show ? "show" : ""}}"
aria-labelledby="panelsStayOpen-headingMain"
data-bs-parent="#main-sidebar">
<div class="list-group list-group-flush">
@foreach($schemas as $schema)
<a class="list-group-item list-group-item-action bg-primary-subtle {{ $schema->name == $currentSchema ? "active" : ""}}"
aria-current="page"
href="{{$lucentUrl}}/content/{{$schema->name}}">{{$schema->label}}</a>
@endforeach
</div> </div>
</div> </div>
</div> @endforeach
src/Views/sidebar/sidebar.blade.php
+1 -47
View File
@@ -2,51 +2,5 @@
<a href="{{$channel->lucentUrl}}">{{$channel->name}}</a> <a href="{{$channel->lucentUrl}}">{{$channel->name}}</a>
</div> </div>
<div class="accordion" id="main-sidebar"> <div class="accordion" id="main-sidebar">
@if($sidebar->isEmpty()) @include("lucent::sidebar.accordion-item")
@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
<div class="accordion-item ">
<h2 class="accordion-header" id="panelsStayOpen-heading-{{$index}}">
<button class="accordion-button rounded-0 bg-primary-subtle {{$show ? "" : "collapsed"}}"
type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapse-{{$index}}" aria-expanded="{{$show}}"
aria-controls="panelsStayOpen-collapse-{{$index}}">
{{$section->label}}
</button>
</h2>
<div id="panelsStayOpen-collapse-{{$index}}"
class="accordion-collapse collapse {{$show ? "show" : ""}}"
aria-labelledby="panelsStayOpen-heading-{{$index}}"
data-bs-parent="#main-sidebar">
<div class="list-group list-group-flush bg-primary-subtle">
@foreach($section->items as $item)
@if(isset($item->href))
<a class="list-group-item list-group-item-action bg-primary-subtle"
aria-current="page"
href="{{$item->href}}"
target="_blank"
>{{$item->label}}</a>
@else
@php
$schema = $schemas->where("name",$item->schema)->first();
@endphp
<a class="list-group-item list-group-item-action bg-primary-subtle {{ $schema->name == $currentSchema ? "active" : ""}}"
aria-current="page"
href="{{$lucentUrl}}/content/{{$schema->name}}">{{$item->label}}</a>
@endif
@endforeach
</div>
</div>
</div>
@endforeach
@include("lucent::sidebar.accordion-item", ["schemas" => $schemas->whereNotIn("name",$sidebar->get()->getUsedSchemas()), "currentSchema" => $currentSchema, "lucentUrl" => $lucentUrl, "main" => false])
@endif
</div> </div>