From f9806f60c9ef7f682875b11f3acd9920cd06ef29 Mon Sep 17 00:00:00 2001 From: lexx Date: Thu, 15 Aug 2024 14:44:53 +0300 Subject: [PATCH] filters and sidebar --- front/js/helpers.js | 20 +++ front/js/svelte/Channel.svelte | 15 +- front/js/svelte/Navbar.svelte | 126 -------------- front/js/svelte/NavbarMenu.svelte | 16 -- front/js/svelte/common/Dropdown.svelte | 44 ++--- front/js/svelte/common/Icon.svelte | 2 + front/js/svelte/content/Index.svelte | 4 +- front/js/svelte/content/Table.svelte | 2 +- .../js/svelte/content/tools/SortFields.svelte | 155 +++++++++--------- front/js/svelte/content/tools/Tools.svelte | 79 ++++----- front/js/svelte/files/Preview.svelte | 87 ++++++---- front/js/svelte/home/Index.svelte | 33 ++-- front/js/svelte/home/RecordRow.svelte | 22 +-- front/js/svelte/layout/Header.svelte | 26 +++ front/js/svelte/layout/Navbar.svelte | 42 +++++ front/js/svelte/layout/NavbarMenu.svelte | 34 ++++ front/sass/_button.scss | 20 +++ front/sass/_dropdown.scss | 60 +++++++ front/sass/_form.scss | 2 +- front/sass/_helpers.scss | 5 +- front/sass/_layout.scss | 4 +- front/sass/_notice.scss | 14 +- front/sass/_sidebar.scss | 74 +++++++-- front/sass/_table.scss | 27 ++- front/sass/_toolbar.scss | 9 + front/sass/_wrappers.scss | 7 +- front/sass/app.scss | 51 +++--- front/views/includes/header.blade.php | 2 +- front/views/layouts/channel.blade.php | 12 +- front/views/records/card-row.blade.php | 8 +- front/views/sidebar/sidebar.blade.php | 2 + src/Http/Controller/HomeController.php | 36 +--- 32 files changed, 584 insertions(+), 456 deletions(-) delete mode 100644 front/js/svelte/Navbar.svelte delete mode 100644 front/js/svelte/NavbarMenu.svelte create mode 100644 front/js/svelte/layout/Header.svelte create mode 100644 front/js/svelte/layout/Navbar.svelte create mode 100644 front/js/svelte/layout/NavbarMenu.svelte create mode 100644 front/sass/_button.scss create mode 100644 front/sass/_dropdown.scss create mode 100644 front/sass/_toolbar.scss diff --git a/front/js/helpers.js b/front/js/helpers.js index 4d052ae..63aafea 100644 --- a/front/js/helpers.js +++ b/front/js/helpers.js @@ -30,3 +30,23 @@ export function stripHtml(html = "") { export function randomId(length = 10) { return Math.random().toString(36).substring(2, length + 2); } + +export function clickOutside(node) { + + const handleClick = event => { + if (node && !node.contains(event.target) && !event.defaultPrevented) { + node.dispatchEvent( + new CustomEvent('click_outside', node) + ) + } + } + + document.addEventListener('click', handleClick, true); + + return { + destroy() { + document.removeEventListener('click', handleClick, true); + } + } +} + diff --git a/front/js/svelte/Channel.svelte b/front/js/svelte/Channel.svelte index 5e90282..46c8f02 100644 --- a/front/js/svelte/Channel.svelte +++ b/front/js/svelte/Channel.svelte @@ -4,9 +4,10 @@ import RecordEdit from "./records/Edit.svelte"; import ContentIndex from "./content/Index.svelte"; import {setContext} from "svelte"; - import Navbar from "./Navbar.svelte"; + import Navbar from "./layout/Navbar.svelte"; import HomeIndex from "./home/Index.svelte"; import BuildReport from "./build/Report.svelte"; + import Header from "./layout/Header.svelte"; const components = { members: Members, @@ -35,7 +36,15 @@ - - +
+
+ +
+
+
+ +
+
+ diff --git a/front/js/svelte/Navbar.svelte b/front/js/svelte/Navbar.svelte deleted file mode 100644 index 6b8581b..0000000 --- a/front/js/svelte/Navbar.svelte +++ /dev/null @@ -1,126 +0,0 @@ - - - - -
- - - -
- -
-
-

- -

-
-
- sc.isEntry)} - schema={schema} - /> -
-
-
- {#if otherSchemas.length > 0} -
-

- -

-
-
- -
-
-
- {/if} - {#if fileSchemas.length > 0} -
-

- -

-
-
- -
-
-
- {/if} - -
-
-
\ No newline at end of file diff --git a/front/js/svelte/NavbarMenu.svelte b/front/js/svelte/NavbarMenu.svelte deleted file mode 100644 index b81132e..0000000 --- a/front/js/svelte/NavbarMenu.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - -
- - {#each schemas as aschema} - {aschema.label} - {/each} -
diff --git a/front/js/svelte/common/Dropdown.svelte b/front/js/svelte/common/Dropdown.svelte index 3f89c65..f78271f 100644 --- a/front/js/svelte/common/Dropdown.svelte +++ b/front/js/svelte/common/Dropdown.svelte @@ -1,23 +1,29 @@ +
+ +
+ +
- -
- -
- +
\ No newline at end of file diff --git a/front/js/svelte/common/Icon.svelte b/front/js/svelte/common/Icon.svelte index 6c7253c..b0a4d0a 100644 --- a/front/js/svelte/common/Icon.svelte +++ b/front/js/svelte/common/Icon.svelte @@ -125,6 +125,7 @@ role="presentation" {stroke} {fill} + > {@html selectedIcon.path} @@ -132,5 +133,6 @@ diff --git a/front/js/svelte/content/Index.svelte b/front/js/svelte/content/Index.svelte index 737adec..b979445 100644 --- a/front/js/svelte/content/Index.svelte +++ b/front/js/svelte/content/Index.svelte @@ -46,8 +46,8 @@ } -
-
+
+

{schema.label}

diff --git a/front/js/svelte/content/Table.svelte b/front/js/svelte/content/Table.svelte index ea9bca0..2d2c72a 100644 --- a/front/js/svelte/content/Table.svelte +++ b/front/js/svelte/content/Table.svelte @@ -31,7 +31,7 @@ -
+
diff --git a/front/js/svelte/content/tools/SortFields.svelte b/front/js/svelte/content/tools/SortFields.svelte index 3585b44..be3dd3c 100644 --- a/front/js/svelte/content/tools/SortFields.svelte +++ b/front/js/svelte/content/tools/SortFields.svelte @@ -1,6 +1,7 @@ -
- -
-
- {#each sortableFields as field} -
-
- - - -
-
- {/each} -
-
System
-
- {#each systemFieldsFiltered as field} -
-
- - - -
-
- {/each} -
-
+
+ {#each sortableFields as field} +
+ + + +
+ {/each} +
System
+ {#each systemFieldsFiltered as field} +
+ + + + +
+ {/each} +
+ diff --git a/front/js/svelte/content/tools/Tools.svelte b/front/js/svelte/content/tools/Tools.svelte index 4456185..8e77dea 100644 --- a/front/js/svelte/content/tools/Tools.svelte +++ b/front/js/svelte/content/tools/Tools.svelte @@ -4,7 +4,8 @@ import Icon from "../../common/Icon.svelte"; import SortFields from "./SortFields.svelte"; import AppliedFilter from "./AppliedFilter.svelte"; - import {getContext, createEventDispatcher} from "svelte"; + import {createEventDispatcher, getContext} from "svelte"; + import Dropdown from "../../common/Dropdown.svelte"; const channel = getContext("channel"); @@ -47,8 +48,8 @@ } -
-
+
+
- +
-
+
{#if schema.type === "collection"} {#if !inModal && isWritable} New Record @@ -95,48 +96,34 @@
{/if} {#if !inModal} -
- - -
+ {#if filter["status_in"] === "trashed"} + {#if isWritable} + + Empty trash + {/if} + {:else} + + Export to CSV + View trashed records + {/if} + - -
{/if}
diff --git a/front/js/svelte/files/Preview.svelte b/front/js/svelte/files/Preview.svelte index e2ca4a2..0b6571d 100644 --- a/front/js/svelte/files/Preview.svelte +++ b/front/js/svelte/files/Preview.svelte @@ -28,41 +28,58 @@ fontSize = "13"; } +
+ {#if record} -{#if record} - {#if record._file.mime.startsWith("image")} - - - {record._file.path} - - {:else} - - - .{record._file.path.split(".").pop()} + - + {record._file.path} + + {:else} + + + .{record._file.path.split(".").pop()} + + {/if} {/if} -{/if} -{#if showFilename} - {record._file.path} -{/if} + {#if showFilename} + {record._file.path} + {/if} +
+ + \ No newline at end of file diff --git a/front/js/svelte/home/Index.svelte b/front/js/svelte/home/Index.svelte index e5efa31..f781144 100644 --- a/front/js/svelte/home/Index.svelte +++ b/front/js/svelte/home/Index.svelte @@ -21,24 +21,21 @@ }); -
-

Latest Content changes

- {#if records.length > 0} -
-
-
- - {#each records as record (record.id)} - - - - {/each} - -
-
-
+

Latest Content changes

+{#if records.length > 0} - {/if} +
+ + + {#each records as record (record.id)} + + + + {/each} + +
+
+ +{/if} -
diff --git a/front/js/svelte/home/RecordRow.svelte b/front/js/svelte/home/RecordRow.svelte index 63bd695..c6b1d73 100644 --- a/front/js/svelte/home/RecordRow.svelte +++ b/front/js/svelte/home/RecordRow.svelte @@ -1,7 +1,6 @@ +
+ {#if record.status === "draft"} + DRAFT + {/if} {#if schema.type === "files"} - + {:else} {previewTitle(channel.schemas, record, graph)} {/if} - +
{schema.label}{schema.label} - - - + -
+
{frieldlyUpdatedAt} diff --git a/front/js/svelte/layout/Header.svelte b/front/js/svelte/layout/Header.svelte new file mode 100644 index 0000000..0da0ca3 --- /dev/null +++ b/front/js/svelte/layout/Header.svelte @@ -0,0 +1,26 @@ + + + +
+ Members + + {#if channel.generateCommand} + Build website + {/if} + + + + + + + + + +
+ diff --git a/front/js/svelte/layout/Navbar.svelte b/front/js/svelte/layout/Navbar.svelte new file mode 100644 index 0000000..56eb6c0 --- /dev/null +++ b/front/js/svelte/layout/Navbar.svelte @@ -0,0 +1,42 @@ + +
+ + + + +
+
+ + + sc.isEntry)} + schema={schema} + expanded={true} + /> + + + + +
diff --git a/front/js/svelte/layout/NavbarMenu.svelte b/front/js/svelte/layout/NavbarMenu.svelte new file mode 100644 index 0000000..aba315d --- /dev/null +++ b/front/js/svelte/layout/NavbarMenu.svelte @@ -0,0 +1,34 @@ + + +
+ {title} + {#if expanded} + + {:else} + + {/if} +
+{#if expanded} + {#each schemas as aschema} + {aschema.label} + {/each} +{/if} \ No newline at end of file diff --git a/front/sass/_button.scss b/front/sass/_button.scss new file mode 100644 index 0000000..84a9d35 --- /dev/null +++ b/front/sass/_button.scss @@ -0,0 +1,20 @@ +.button{ + border-radius: 12px; + background: var(--background); + padding: 3px 10px; + cursor: pointer; + filter: brightness(97%); + border: none; + font-size: 14px; + + &:focus { + filter: brightness(94%); + } + + &:hover { + filter: brightness(94%); + } + &.active { + filter: brightness(74%); + } +} diff --git a/front/sass/_dropdown.scss b/front/sass/_dropdown.scss new file mode 100644 index 0000000..f44ee02 --- /dev/null +++ b/front/sass/_dropdown.scss @@ -0,0 +1,60 @@ +.dropdown { + position: relative; +} + +.dropdown-button > div { + display: flex; + align-items: center; + gap: 3px; +} + +.dropdown-menu { + display: flex; + flex-direction: column; + padding: 10px; + overflow: visible; + position: absolute; + border-radius: 12px; + z-index: 9; + background: var(--background); + filter: brightness(97%); + transition: 600ms; + flex-grow: 1; + + &.orientation-right { + right: 0; + } + + &.orientation-left { + left: 0; + } + + min-width: max-content; +} + +.dropdown-header, .dropdown-item { + display: flex; + align-items: center; + gap: 3px; + text-wrap: nowrap; + + +} + +.dropdown-header { + padding: 10px; +} + +.dropdown-item { + font-size: 14px; + padding: 3px 10px; + &:hover{ + background: var(--background); + filter: brightness(97%); + border-radius: 12px; + } + .button-icon { + flex-shrink: 0; + + } +} \ No newline at end of file diff --git a/front/sass/_form.scss b/front/sass/_form.scss index ddd7a10..01801f2 100644 --- a/front/sass/_form.scss +++ b/front/sass/_form.scss @@ -12,7 +12,7 @@ input{ } input,textarea{ background: var(--input-bg); - border: 1px solid $border-color; + border: 1px solid var(--border-color); border-radius: 5px; padding: 5px 7px; font-size: 16px; diff --git a/front/sass/_helpers.scss b/front/sass/_helpers.scss index 8c89f89..2f5fe17 100644 --- a/front/sass/_helpers.scss +++ b/front/sass/_helpers.scss @@ -29,7 +29,10 @@ .gap-5{gap: 20px} .hide{ - display: none; + display: none!important; +} +.hidden{ + visibility: hidden; } .d-block{ diff --git a/front/sass/_layout.scss b/front/sass/_layout.scss index 7993c1e..6aaa10d 100644 --- a/front/sass/_layout.scss +++ b/front/sass/_layout.scss @@ -1,4 +1,6 @@ -.sidebar { +.sidebar-content{ + min-width: 300px; + max-width: 400px; } .main-content { diff --git a/front/sass/_notice.scss b/front/sass/_notice.scss index 6f301d1..e34be0f 100644 --- a/front/sass/_notice.scss +++ b/front/sass/_notice.scss @@ -1,21 +1,21 @@ .notice { - background-color: $background; + background-color: var(--background); padding: 25px 14px 14px; margin: 2rem 0; filter: brightness(1.03); position: relative; font-size: 16px; line-height: 24px; - border: 3px solid $border-color; + border: 3px solid var(--border-color); } .notice .title { content: "NOTE"; position: absolute; - background: $background; + background: var(--background); min-width: 90px; - border: 3px solid $border-color; - color: $text; + border: 3px solid var(--border-color); + color: var(--text); display: block; text-align: center; left: 14px; @@ -25,8 +25,8 @@ } .notice.success{ - border-color: $success; + border-color: var(--success); & .title{ - border-color: $success; + border-color: var(--success); } } \ No newline at end of file diff --git a/front/sass/_sidebar.scss b/front/sass/_sidebar.scss index 79e7ec9..553bd83 100644 --- a/front/sass/_sidebar.scss +++ b/front/sass/_sidebar.scss @@ -1,49 +1,89 @@ +.sidebar-top{ + + font-size: 18px; + padding: 20px 20px ; + display: flex; + align-items: center; + justify-content: space-between; + background: var(--background); + filter: brightness(97%); + margin-bottom: 15px; + border-radius: 12px; +} .sidebar { - border: 1px solid $border-color; + border: 0px solid var(--border-color); border-radius: 12px; - min-height: 100vh; font-size: 15px; line-height: 28px; - min-width: 300px; - max-width: 400px; - background: $background; - filter: brightness(104%); + padding: 20px; + background: var(--background); + filter: brightness(97%); + display: flex; + flex-direction: column; + gap: 3px; } .sidebar-header { - background: $background; + display: flex; + cursor: pointer; + justify-content: space-between; + align-items: center; + background: var(--background); font-size: 16px; - padding: 12px 12px 6px; - color: $text; + padding: 3px 12px 6px; + color: var(--text); filter: brightness(94%); + border-bottom: 0px solid var(--border-color); + border-radius: 12px; + &:hover { + background: var(--secondary); + } &:first-child { + } + + &:last-child { border-bottom: none; - border-radius: 12px 12px 0 0; } } .sidebar-item { - color: $text; + color: var(--text); display: block; font-size: 14px; - padding: 6px 12px; + padding: 3px 12px; text-decoration: none; - border-bottom: 1px solid $border-color; + border-bottom: 0px solid var(--border-color); transition: 600ms; - + border-radius: 12px; &:last-child { border-bottom: none; - border-radius: 0 0 12px 12px; } &:hover { - background: $secondary; + background: var(--secondary); } &.active { - background: $secondary; + background: var(--secondary); } } + +.top-nav{ + display: flex; + justify-content: end; + align-items: center; + gap: 10px; +} +.top-nav-item{ + border-radius: 12px; + font-size: 14px; + filter: brightness(97%); + background: var(--background); + padding: 3px 10px ; + &:hover { + background: var(--secondary); + } +} \ No newline at end of file diff --git a/front/sass/_table.scss b/front/sass/_table.scss index a479974..ed5fee2 100644 --- a/front/sass/_table.scss +++ b/front/sass/_table.scss @@ -1,8 +1,12 @@ -.lx-table { +.table { min-width: 600px; overflow: auto; + border-radius: 12px; + padding: 20px; + background: var(--background); + filter: brightness(97%); table { - min-width: 600px; + width: 100%; } th { @@ -13,7 +17,6 @@ // height: 34px; padding: 8px 16px; // border-bottom: 1px solid #ccc; - background: #eee; &.is-sort { background-color: rgba($primary, 0.1); } @@ -26,20 +29,34 @@ max-width: 400px; height: 48px; padding: 4px 16px; + overflow: hidden; &.is-sort { background-color: rgba($primary, 0.1); } + + img{ + width: 48px; + } + + .status{ + color:var(--accent); + font-size: 80%; + } + .row-name{ + display: flex; + align-items: center; + gap: 6px; + } } tr { - background-color: #fff; &:hover { box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1); } } tr:nth-child(odd) { - background-color: #f9f9f9; + //background-color: #f9f9f9; } td:nth-child(odd) { diff --git a/front/sass/_toolbar.scss b/front/sass/_toolbar.scss new file mode 100644 index 0000000..5101d29 --- /dev/null +++ b/front/sass/_toolbar.scss @@ -0,0 +1,9 @@ +.toolbar{ + display: flex; + align-items: center; + gap: 5px; + justify-content: space-between; +} +.toolbar-filters{ display: flex; + align-items: center; + gap: 5px;} \ No newline at end of file diff --git a/front/sass/_wrappers.scss b/front/sass/_wrappers.scss index 38ea762..d20243f 100644 --- a/front/sass/_wrappers.scss +++ b/front/sass/_wrappers.scss @@ -116,10 +116,13 @@ } .header-normal { - text-align: center; + text-align: left; + font-weight: 400; + font-size: 20px; } .header-small { text-align: left; - font-size: 26px; + font-weight: 400; + font-size: 20px; } diff --git a/front/sass/app.scss b/front/sass/app.scss index c892dcc..bb4c018 100644 --- a/front/sass/app.scss +++ b/front/sass/app.scss @@ -90,9 +90,7 @@ $success: #80c671; $background: #f4f6fa; $table-striped-bg-factor: 0.03; $dropdown-bg: rgb(206, 223, 210); -$border-color: #000; -$text: #04060b; -$accent: #80c671; + //https://www.realtimecolors.com/?colors=04060b-f4f6fa-5b86be-d9cca1-80c671&fonts=Anek Telugu-Anek Telugu $themes: ( @@ -111,7 +109,25 @@ $themes: ( accent: #488e39, ), ); +:root{ + --linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1); + --linearPrimaryAccent: linear-gradient(#5b86be, #80c671); + --linearSecondaryAccent: linear-gradient(#d9cca1, #80c671); + --radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1); + --radialPrimaryAccent: radial-gradient(#5b86be, #80c671); + --radialSecondaryAccent: radial-gradient(#d9cca1, #80c671); + --border-color: #000; + --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif; + --main-font-color: #444; + --input-bg: rgb(245,245,249); + --text: #010b05; + --background: #f7fefa; + --primary: #1ce776; + --secondary: #7bc8f1; + --accent: #5086ed; + --success: #80c671; +} //@import "../node_modules/bootstrap/scss/bootstrap"; @@ -130,25 +146,17 @@ $themes: ( @import "./card"; @import "./files"; @import "./revisions"; +@import "./toolbar"; +@import "./dropdown"; +@import "./button"; -:root{ - --linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1); - --linearPrimaryAccent: linear-gradient(#5b86be, #80c671); - --linearSecondaryAccent: linear-gradient(#d9cca1, #80c671); - --radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1); - --radialPrimaryAccent: radial-gradient(#5b86be, #80c671); - --radialSecondaryAccent: radial-gradient(#d9cca1, #80c671); - --border-color: $border-color; - --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif; - --main-font-color: #444; - --input-bg: rgb(245,245,249); -} body { - background-color: $background; + background-color: var(--background); + font-family: var(--main-font), sans-serif; } .btn-spinner .spinner-border { @@ -168,9 +176,8 @@ body { border-color: transparent; } -.dropdown-menu { - border: 0; - border-radius: 15px; - box-shadow: 0 0 4px #ccc; - padding: 30px 15px; -} + +a{ + color: var(--text); + text-decoration: none; +} \ No newline at end of file diff --git a/front/views/includes/header.blade.php b/front/views/includes/header.blade.php index 9348870..089113a 100644 --- a/front/views/includes/header.blade.php +++ b/front/views/includes/header.blade.php @@ -1,5 +1,5 @@
- {{$channel->name}} + Members @if($channel->generateCommand) diff --git a/front/views/layouts/channel.blade.php b/front/views/layouts/channel.blade.php index f5ac320..6ad4973 100644 --- a/front/views/layouts/channel.blade.php +++ b/front/views/layouts/channel.blade.php @@ -23,13 +23,11 @@ -@include("lucent::includes.header") -
- @include("lucent::sidebar.sidebar") -
- @yield('content') -
-
+ + + @yield('content') + + diff --git a/front/views/records/card-row.blade.php b/front/views/records/card-row.blade.php index 240e376..325a3d4 100644 --- a/front/views/records/card-row.blade.php +++ b/front/views/records/card-row.blade.php @@ -2,9 +2,9 @@ $schema = $schemas->where("name",$record->schema)->first(); @endphp -{{-- {#if schema.type === "files"}--}} -{{-- --}} -{{-- {:else}--}} + @if($schema->type === "files") + + @else {{$record->status->value === "draft" ? "Draft" : ""}} -{{-- {/if}--}} + @endif {{$channel->name}}
+
Content
diff --git a/src/Http/Controller/HomeController.php b/src/Http/Controller/HomeController.php index 7d7b937..049708b 100644 --- a/src/Http/Controller/HomeController.php +++ b/src/Http/Controller/HomeController.php @@ -21,36 +21,14 @@ class HomeController extends Controller { } - public function home(Request $request): View + public function home(): View { - $urlParams = $request->all(); - $users = $this->accountService->all(); - - $sort = data_get($urlParams, "sort") ?? "-_sys.updatedAt"; - $filter = data_get($urlParams, "filter") ?? []; - $arguments = array_merge([ - "schema_in" => $this->accountService->currentReadableSchemas(), - "status_in" => ["draft", "published"] - ], $filter); - - $limit = 10; - - $graph = $this->query - ->filter($arguments) - ->limit($limit) - ->childrenDepth(1) - ->parentsDepth(0) - ->sort($sort) - ->run(); - - - return view("lucent::home", [ - "users" => $users, - "records" => $graph->getRootRecords(), - "graph" => toArray($graph), - "modalUrl" => $request->fullUrl(), - ]); + return $this->svelte->render( + layout: "channel", + view: "homeIndex", + title: "Records", + ); } public function records(Request $request): Response @@ -65,7 +43,7 @@ class HomeController extends Controller "status_in" => ["draft", "published"] ], $filter); - $limit = 30; + $limit = 20; $graph = $this->query ->filter($arguments)