From 91950e189182f0f9e1a3a8e01ef4caad636be282 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Tue, 19 Mar 2024 15:37:16 +0100 Subject: [PATCH] ui: redesign --- .../Project/Shared/ScheduledTask/Add.php | 28 +- app/View/Components/Forms/Button.php | 2 +- app/View/Components/Forms/Checkbox.php | 14 +- app/View/Components/Forms/Input.php | 2 +- app/View/Components/Forms/Select.php | 2 +- app/View/Components/Forms/Textarea.php | 4 +- package-lock.json | 20 + package.json | 1 + resources/css/app.css | 163 +++++--- resources/js/components/MagicBar.vue | 1 + .../views/components/forms/checkbox.blade.php | 5 +- .../views/components/forms/input.blade.php | 4 +- resources/views/components/loading.blade.php | 15 +- resources/views/components/navbar.blade.php | 383 ++++++++---------- .../resources/breadcrumbs.blade.php | 2 +- .../views/components/slide-over.blade.php | 2 +- .../components/status/degraded.blade.php | 2 +- .../components/status/restarting.blade.php | 2 +- .../views/components/status/running.blade.php | 2 +- .../views/components/status/stopped.blade.php | 2 +- resources/views/layouts/app.blade.php | 14 +- resources/views/layouts/base.blade.php | 19 +- resources/views/livewire/dashboard.blade.php | 2 +- .../project/application/advanced.blade.php | 6 +- .../application/configuration.blade.php | 32 +- .../project/application/general.blade.php | 1 + .../views/livewire/project/edit.blade.php | 2 +- .../project/environment-edit.blade.php | 2 +- .../views/livewire/project/index.blade.php | 9 +- .../livewire/project/resource/index.blade.php | 56 +-- .../project/shared/destination.blade.php | 8 +- .../shared/environment-variable/all.blade.php | 3 +- .../shared/scheduled-task/add.blade.php | 25 +- .../shared/scheduled-task/all.blade.php | 14 +- .../views/livewire/server/index.blade.php | 1 - .../dynamic-configuration-navbar.blade.php | 2 +- .../proxy/dynamic-configurations.blade.php | 2 +- .../team-shared-variables-index.blade.php | 6 +- resources/views/livewire/upgrade.blade.php | 12 +- tailwind.config.js | 45 +- 40 files changed, 481 insertions(+), 436 deletions(-) diff --git a/app/Livewire/Project/Shared/ScheduledTask/Add.php b/app/Livewire/Project/Shared/ScheduledTask/Add.php index 3cc5428b8..3a7a3fa23 100644 --- a/app/Livewire/Project/Shared/ScheduledTask/Add.php +++ b/app/Livewire/Project/Shared/ScheduledTask/Add.php @@ -33,19 +33,23 @@ public function mount() public function submit() { - $this->validate(); - $isValid = validate_cron_expression($this->frequency); - if (!$isValid) { - $this->dispatch('error', 'Invalid Cron / Human expression.'); - return; + try { + $this->validate(); + $isValid = validate_cron_expression($this->frequency); + if (!$isValid) { + $this->dispatch('error', 'Invalid Cron / Human expression.'); + return; + } + $this->dispatch('saveScheduledTask', [ + 'name' => $this->name, + 'command' => $this->command, + 'frequency' => $this->frequency, + 'container' => $this->container, + ]); + $this->clear(); + } catch (\Exception $e) { + return handleError($e, $this); } - $this->dispatch('saveScheduledTask', [ - 'name' => $this->name, - 'command' => $this->command, - 'frequency' => $this->frequency, - 'container' => $this->container, - ]); - $this->clear(); } public function clear() diff --git a/app/View/Components/Forms/Button.php b/app/View/Components/Forms/Button.php index c9f4ebdc0..350039fce 100644 --- a/app/View/Components/Forms/Button.php +++ b/app/View/Components/Forms/Button.php @@ -16,7 +16,7 @@ public function __construct( public bool $isModal = false, public bool $noStyle = false, public ?string $modalId = null, - public string $defaultClass = "btn btn-primary btn-sm font-normal text-white normal-case no-animation rounded border-none" + public string $defaultClass = "button" ) { if ($this->noStyle) { $this->defaultClass = ""; diff --git a/app/View/Components/Forms/Checkbox.php b/app/View/Components/Forms/Checkbox.php index 0bbbc1e04..5361be4e7 100644 --- a/app/View/Components/Forms/Checkbox.php +++ b/app/View/Components/Forms/Checkbox.php @@ -12,14 +12,14 @@ class Checkbox extends Component * Create a new component instance. */ public function __construct( - public string|null $id = null, - public string|null $name = null, - public string|null $value = null, - public string|null $label = null, - public string|null $helper = null, - public string|bool $instantSave = false, + public ?string $id = null, + public ?string $name = null, + public ?string $value = null, + public ?string $label = null, + public ?string $helper = null, + public string|bool $instantSave = false, public bool $disabled = false, - public string $defaultClass = "toggle toggle-xs toggle-warning rounded disabled:bg-coolgray-200 disabled:opacity-50 placeholder:text-neutral-700", + public string $defaultClass = "border-coolgray-500 text-warning focus:ring-warning bg-coolgray-100 rounded cursor-pointer", ) { // } diff --git a/app/View/Components/Forms/Input.php b/app/View/Components/Forms/Input.php index a55f9b9d2..c1c60e8a0 100644 --- a/app/View/Components/Forms/Input.php +++ b/app/View/Components/Forms/Input.php @@ -21,7 +21,7 @@ public function __construct( public ?string $helper = null, public bool $allowToPeak = true, public bool $isMultiline = false, - public string $defaultClass = "input input-sm bg-coolgray-100 rounded text-white w-full disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50" + public string $defaultClass = "block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:ring-coolgray-300 dark:placeholder:text-neutral-700 focus:ring-2 focus:ring-inset dark:focus:ring-coolgray-500 dark:bg-coolgray-100 dark:text-white text-black dark:read-only:text-neutral-500 dark:read-only:bg-coolgray-100/20" ) { } diff --git a/app/View/Components/Forms/Select.php b/app/View/Components/Forms/Select.php index e1f2fc759..eadb8dcac 100644 --- a/app/View/Components/Forms/Select.php +++ b/app/View/Components/Forms/Select.php @@ -19,7 +19,7 @@ public function __construct( public string|null $label = null, public string|null $helper = null, public bool $required = false, - public string $defaultClass = "select select-sm w-full rounded text-sm bg-coolgray-100 font-normal disabled:bg-coolgray-200/50 disabled:border-none" + public string $defaultClass = "block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:ring-coolgray-300 dark:placeholder:text-neutral-700 focus:ring-2 focus:ring-inset dark:focus:ring-coolgray-500 dark:bg-coolgray-100 dark:text-white text-black " ) { // } diff --git a/app/View/Components/Forms/Textarea.php b/app/View/Components/Forms/Textarea.php index 8c50af533..58a1af67a 100644 --- a/app/View/Components/Forms/Textarea.php +++ b/app/View/Components/Forms/Textarea.php @@ -25,8 +25,8 @@ public function __construct( public ?string $helper = null, public bool $realtimeValidation = false, public bool $allowToPeak = true, - public string $defaultClass = "textarea leading-normal bg-coolgray-100 rounded text-white w-full scrollbar disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50", - public string $defaultClassInput = "input input-sm bg-coolgray-100 rounded text-white w-full disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50" + public string $defaultClass = "block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:ring-coolgray-300 dark:placeholder:text-neutral-700 focus:ring-2 focus:ring-inset dark:focus:ring-coolgray-500 dark:bg-coolgray-100 dark:text-white text-black dark:read-only:text-neutral-500 dark:read-only:bg-coolgray-100/20 scrollbar", + public string $defaultClassInput = "block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:ring-coolgray-300 dark:placeholder:text-neutral-700 focus:ring-2 focus:ring-inset dark:focus:ring-coolgray-500 dark:bg-coolgray-100 dark:text-white text-black dark:read-only:text-neutral-500 dark:read-only:bg-coolgray-100/20" ) { // } diff --git a/package-lock.json b/package-lock.json index b2124e9df..cc9889a18 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "@tailwindcss/forms": "^0.5.7", "@tailwindcss/typography": "0.5.10", "alpinejs": "3.13.5", "daisyui": "4.7.2", @@ -484,6 +485,17 @@ "node": ">= 8" } }, + "node_modules/@tailwindcss/forms": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz", + "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==", + "dependencies": { + "mini-svg-data-uri": "^1.2.3" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1" + } + }, "node_modules/@tailwindcss/typography": { "version": "0.5.10", "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz", @@ -1462,6 +1474,14 @@ "node": ">= 0.6" } }, + "node_modules/mini-svg-data-uri": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", + "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", + "bin": { + "mini-svg-data-uri": "cli.js" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", diff --git a/package.json b/package.json index 8568525e6..69c5c560a 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "vue": "3.4.21" }, "dependencies": { + "@tailwindcss/forms": "^0.5.7", "@tailwindcss/typography": "0.5.10", "alpinejs": "3.13.5", "daisyui": "4.7.2", diff --git a/resources/css/app.css b/resources/css/app.css index 1080a84f4..b7eec46fb 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -2,8 +2,9 @@ @tailwind components; @tailwind utilities; -html { - @apply text-neutral-400; +html, +body { + @apply text-black bg-white dark:bg-base dark:text-neutral-400; } body { @@ -18,6 +19,101 @@ button[isHighlighted] { @apply bg-coollabs hover:bg-coollabs-100; } +h1 { + @apply pb-6 text-2xl font-bold dark:text-white text-neutral-800; +} + +h2 { + @apply text-xl font-bold dark:text-white text-neutral-800; +} + +h3 { + @apply text-lg font-bold dark:text-white text-neutral-800; +} + +h4 { + @apply text-base font-bold dark:text-white text-neutral-800; +} + +a { + @apply dark:text-neutral-400 text-neutral-600; +} + +label { + @apply dark:text-neutral-400 text-neutral-600; +} + +table { + @apply min-w-full divide-y divide-coolgray-200; +} + +thead { + @apply uppercase; +} + +tbody { + @apply divide-y divide-coolgray-200; +} + +tr { + @apply text-neutral-400; +} + +tr th { + @apply px-3 py-3.5 text-left text-white; +} + +tr th:first-child { + @apply py-3.5 pl-4 pr-3 sm:pl-6; +} + +tr td { + @apply px-3 py-4 whitespace-nowrap; +} + +tr td:first-child { + @apply pl-4 pr-3 font-bold sm:pl-6; +} + +input.input-sm { + @apply pr-10; +} + +option { + @apply text-white; +} +.badge { + @apply inline-block w-3 h-3 text-xs font-bold leading-none border border-black rounded-full ; +} +.badge-success { + @apply bg-success; +} +.badge-warning { + @apply bg-warning; +} +.badge-error { + @apply bg-error; +} +.button { + @apply px-3 py-1 text-sm font-normal normal-case rounded dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100; +} +[type='checkbox']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} + +.menu { + @apply flex items-center gap-1; +} +.menu-item { + @apply flex items-center w-full gap-2 px-4 py-1 min-w-48 hover:bg-coolgray-100 dark:hover:text-white; +} +.menu-item-active { + @apply rounded-none bg-coolgray-200 text-warning; +} +.icon { + @apply w-4 h-4; +} + .scrollbar { @apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-2; } @@ -27,13 +123,9 @@ .main { } .custom-modal { - @apply flex flex-col gap-2 px-8 py-4 border bg-base-100 border-coolgray-200; + @apply flex flex-col gap-2 px-8 py-4 border bg-coolgray-100 border-coolgray-200; } -.label-text, -label { - @apply text-neutral-400; -} .navbar-main { @apply flex items-end gap-6 py-2 border-b-2 border-solid border-coolgray-200; @@ -43,26 +135,6 @@ .loading { @apply w-4 text-warning; } -h1 { - @apply text-3xl font-bold text-white; -} - -h2 { - @apply text-2xl font-bold text-white; -} - -h3 { - @apply text-xl font-bold text-white; -} - -h4 { - @apply text-base font-bold text-white; -} - -a { - @apply text-neutral-400 hover:text-white link link-hover hover:bg-transparent; -} - .kbd-custom { @apply px-2 text-xs border border-dashed rounded border-neutral-700 text-warning; } @@ -125,37 +197,7 @@ .text-helper { @apply inline-block font-bold text-warning; } -table { - @apply min-w-full divide-y divide-coolgray-200; -} -thead { - @apply uppercase; -} - -tbody { - @apply divide-y divide-coolgray-200; -} - -tr { - @apply text-neutral-400; -} - -tr th { - @apply px-3 py-3.5 text-left text-white; -} - -tr th:first-child { - @apply py-3.5 pl-4 pr-3 sm:pl-6; -} - -tr td { - @apply px-3 py-4 whitespace-nowrap; -} - -tr td:first-child { - @apply pl-4 pr-3 font-bold sm:pl-6; -} .buyme { @apply block px-3 py-2 mt-10 text-sm font-semibold leading-6 text-center text-white rounded-md shadow-sm bg-coolgray-200 hover:bg-coolgray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-coolgray-200 hover:no-underline; @@ -168,10 +210,3 @@ .subtitle { .fullscreen { @apply fixed top-0 left-0 w-full h-full z-[9999] bg-coolgray-100 overflow-y-auto scrollbar pb-4; } - -input.input-sm { - @apply pr-10; -} -option{ - @apply text-white; -} diff --git a/resources/js/components/MagicBar.vue b/resources/js/components/MagicBar.vue index 386a267b1..7fe770279 100644 --- a/resources/js/components/MagicBar.vue +++ b/resources/js/components/MagicBar.vue @@ -9,6 +9,7 @@ + / 'max-w-4xl w-screen' => $fullScreen, ])>
+ class="flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-base border-neutral-800">

diff --git a/resources/views/components/status/degraded.blade.php b/resources/views/components/status/degraded.blade.php index 490ecc239..4b687c269 100644 --- a/resources/views/components/status/degraded.blade.php +++ b/resources/views/components/status/degraded.blade.php @@ -3,7 +3,7 @@ ])
-
+
{{ str($status)->before(':')->headline() }}
diff --git a/resources/views/components/status/restarting.blade.php b/resources/views/components/status/restarting.blade.php index d9c353d02..12a99194d 100644 --- a/resources/views/components/status/restarting.blade.php +++ b/resources/views/components/status/restarting.blade.php @@ -3,7 +3,7 @@ ])
-
+
{{ str($status)->before(':')->headline() }}
diff --git a/resources/views/components/status/running.blade.php b/resources/views/components/status/running.blade.php index 4751204ce..37ec2b030 100644 --- a/resources/views/components/status/running.blade.php +++ b/resources/views/components/status/running.blade.php @@ -3,7 +3,7 @@ ])
-
+
{{ str($status)->before(':')->headline() }}
diff --git a/resources/views/components/status/stopped.blade.php b/resources/views/components/status/stopped.blade.php index ef84e915a..e97cf8f3f 100644 --- a/resources/views/components/status/stopped.blade.php +++ b/resources/views/components/status/stopped.blade.php @@ -3,6 +3,6 @@ ])
-
+
{{ str($status)->before(':')->headline() }}
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 7d74f7acb..8c6e4e5dc 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,17 +1,15 @@ @extends('layouts.base') @section('body') @parent - - @persist('magic-bar') -
- -
- @endpersist + @auth @endauth -
- {{ $slot }} +
+ +
+ {{ $slot }} +
@endsection diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php index 44ef50f53..91dec5b7b 100644 --- a/resources/views/layouts/base.blade.php +++ b/resources/views/layouts/base.blade.php @@ -1,5 +1,5 @@ - + @@ -38,6 +38,7 @@ @section('body') + {{-- --}} @livewire('wire-elements-modal') @@ -48,6 +49,22 @@