From e9a42bbc697de63cbcda2c57bcd0ed7ecc8d581a Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 1 Dec 2023 14:26:17 +0100 Subject: [PATCH] :lipstick: Small visual fixes --- .../src/app/main/ui/components/forms.scss | 3 +- frontend/src/app/main/ui/dashboard/grid.scss | 10 ++-- .../app/main/ui/dashboard/placeholder.cljs | 3 +- .../app/main/ui/dashboard/placeholder.scss | 4 +- .../src/app/main/ui/dashboard/projects.scss | 2 +- .../src/app/main/ui/dashboard/sidebar.scss | 2 +- frontend/src/app/main/ui/dashboard/team.scss | 4 ++ frontend/src/app/main/ui/hooks.cljs | 3 +- .../src/app/main/ui/settings/profile.scss | 2 +- frontend/src/app/main/ui/workspace.cljs | 3 +- .../main/ui/workspace/viewport/top_bar.cljs | 47 +++++++++++++------ .../main/ui/workspace/viewport/top_bar.scss | 47 +++++++++++++++++++ 12 files changed, 101 insertions(+), 29 deletions(-) create mode 100644 frontend/src/app/main/ui/workspace/viewport/top_bar.scss diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss index 2bb900528..e0d10993b 100644 --- a/frontend/src/app/main/ui/components/forms.scss +++ b/frontend/src/app/main/ui/components/forms.scss @@ -31,6 +31,7 @@ margin-top: 0; width: 100%; height: 100%; + padding: 0 $s-16; &:focus { outline: none; @@ -82,7 +83,7 @@ position: relative; width: var(--input-width, calc(100% - $s-1)); min-width: var(--input-min-width); - height: var(--input-height, $s-32); + height: var(--input-height, $s-40); } .help-icon { diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss index 777381711..55d63faee 100644 --- a/frontend/src/app/main/ui/dashboard/grid.scss +++ b/frontend/src/app/main/ui/dashboard/grid.scss @@ -14,12 +14,13 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 height: 100%; overflow-y: auto; overflow-x: hidden; + padding: 0 $s-16; } .grid-row { display: flex; width: 100%; - gap: 24px; + gap: $s-24; } .grid-item { @@ -45,7 +46,6 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 .grid-item-th { border-radius: $br-4; text-align: initial; - width: var(--th-width, #{$thumbnail-default-width}); height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration}); @@ -56,7 +56,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 &.dragged { border-radius: $br-4; - border: $br-2 solid $da-primary; + outline: $br-4 solid $da-primary; text-align: initial; width: calc(var(--th-width) + $s-12); height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration}); @@ -200,7 +200,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 .selected { .grid-item-th { - border: 2px solid $da-tertiary; + outline: $s-4 solid $da-tertiary; } } } @@ -302,7 +302,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 flex-direction: column; height: 90%; justify-content: flex-start; - max-height: 550px; + max-height: $s-580; padding: $s-32; .asset-section { diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs index 6125dd166..37fd949f3 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.cljs +++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs @@ -36,8 +36,7 @@ :else [:div - {:class (stl/css :grid-empty-placeholder) - :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}} + {:class (stl/css :grid-empty-placeholder)} [:button {:class (stl/css :create-new) :on-click on-click} i/add-refactor]]) diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss index 38a62c6b5..9b10a5a09 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.scss +++ b/frontend/src/app/main/ui/dashboard/placeholder.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "common/refactor/common-refactor.scss" as *; -@use "./grid.scss"; +@use "./grid.scss" as g; .grid-empty-placeholder { border-radius: $br-12; @@ -64,6 +64,8 @@ margin: $s-8; text-transform: uppercase; border: $s-2 solid transparent; + width: var(--th-width, #{g.$thumbnail-default-width}); + height: calc(var(--th-width, #{g.$thumbnail-default-width}) * #{g.$thumbnail-aspect-ration}); svg { width: $s-32; diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss index 33f686b62..da1e4d4ff 100644 --- a/frontend/src/app/main/ui/dashboard/projects.scss +++ b/frontend/src/app/main/ui/dashboard/projects.scss @@ -147,7 +147,7 @@ .grid-container { width: 100%; - padding: 0 $s-16; + padding: 0 $s-4; } &:hover, diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 9b4bceddb..8d357be39 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -321,7 +321,7 @@ width: $s-32; position: absolute; - top: $s-12; + top: calc(50% - $s-12); right: $s-2; svg { diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index 25f9ed985..83c5eff7c 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -623,6 +623,10 @@ height: $s-32; border-radius: $br-8; background-color: var(--alert-background-color-warning); + padding: $s-24 $s-8; + gap: $s-8; + margin-bottom: $s-16; + .icon { @include flexCenter; width: $s-16; diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs index 6610c84b1..f1f607729 100644 --- a/frontend/src/app/main/ui/hooks.cljs +++ b/frontend/src/app/main/ui/hooks.cljs @@ -366,7 +366,8 @@ limit (mth/min 10 nitems) limit (mth/max 1 limit) - th-size (- (/ (- width (* (dec limit) 24)) limit) 12)] + th-size (when width + (- (/ (- width 32 (* (dec limit) 24)) limit) 12))] (mf/with-effect [th-size] diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss index 44004ae5c..e33ef5a3a 100644 --- a/frontend/src/app/main/ui/settings/profile.scss +++ b/frontend/src/app/main/ui/settings/profile.scss @@ -48,7 +48,7 @@ } .fields-row { - --input-height: $s-40; + --input-height: #{$s-40}; margin-bottom: $s-20; flex-direction: column; diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 99546edeb..4f015168b 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -81,7 +81,8 @@ node-ref (use-resize-observer on-resize)] [:* (if new-css-system - [:& palette {:layout layout}] + (when (not hide-ui?) + [:& palette {:layout layout}]) [:* (when (and colorpalette? (not hide-ui?)) [:& colorpalette]) diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs index 15293c929..cba3e74a2 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs @@ -5,6 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.viewport.top-bar + (:require-macros [app.main.style :as stl]) (:require [app.common.files.helpers :as cfh] [app.common.types.shape.layout :as ctl] @@ -18,6 +19,35 @@ [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) +(mf/defc view-only-actions + [] + (let [new-css-system (mf/use-ctx ctx/new-css-system) + handle-close-view-mode + (mf/use-callback + (fn [] + (st/emit! :interrupt + (dw/set-options-mode :design) + (dw/set-workspace-read-only false))))] + (if new-css-system + [:div {:class (stl/css :viewport-actions)} + [:div {:class (stl/css :viewport-actions-container)} + [:div {:class (stl/css :viewport-actions-title)} + [:& i18n/tr-html {:tag-name "span" + :label "workspace.top-bar.read-only"}]] + [:button {:class (stl/css :done-btn) + :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")] + [:button {:class (stl/css :close-btn) + :on-click handle-close-view-mode} i/close-refactor]]] + + ;; OLD + [:div.viewport-actions + [:div.viewport-actions-container + [:div.viewport-actions-title + [:& i18n/tr-html {:tag-name "span" + :label "workspace.top-bar.read-only"}]] + [:button.btn-primary {:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")] + [:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]]))) + (mf/defc top-bar {::mf/wrap [mf/memo]} [] @@ -40,24 +70,11 @@ (not (cfh/frame-shape? shape)))) draw-path?) - grid-edition? (and single? editing? (ctl/grid-layout? shape)) - - handle-close-view-mode - (mf/use-callback - (fn [] - (st/emit! :interrupt - (dw/set-options-mode :design) - (dw/set-workspace-read-only false))))] + grid-edition? (and single? editing? (ctl/grid-layout? shape))] (cond workspace-read-only? - [:div.viewport-actions - [:div.viewport-actions-container - [:div.viewport-actions-title - [:& i18n/tr-html {:tag-name "span" - :label "workspace.top-bar.read-only"}]] - [:button.btn-primary {:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")] - [:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]] + [:& view-only-actions] path-edition? [:div.viewport-actions diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss new file mode 100644 index 000000000..67114b50e --- /dev/null +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss @@ -0,0 +1,47 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.viewport-actions { + pointer-events: none; + position: absolute; + top: $s-44; + left: 50%; + + .viewport-actions-container { + @include flexRow; + background: var(--panel-background-color); + border-radius: $br-12; + box-shadow: 0 0 $s-12 0 var(--menu-shadow-color); + gap: $s-8; + height: $s-48; + margin-left: -50%; + padding: $s-8; + pointer-events: initial; + width: $s-512; + } + + .viewport-actions-title { + flex: 1; + font-size: $fs-12; + color: var(--color-foreground-secondary); + padding-left: $s-8; + } + + .done-btn { + @extend .button-primary; + text-transform: uppercase; + padding: $s-8 $s-20; + font-size: $fs-11; + } + .close-btn { + @extend .button-tertiary; + svg { + @extend .button-icon; + } + } +}