From e2446fcc62429bd68d20692597d4e0efad1f3a8f Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 13 Dec 2023 12:42:19 +0100 Subject: [PATCH] :bug: Fix problems in inspect tab --- .../main/ui/components/color_bullet_new.cljs | 16 ++-- .../main/ui/components/color_bullet_new.scss | 2 +- .../src/app/main/ui/viewer/inspect/code.cljs | 5 +- .../src/app/main/ui/viewer/inspect/code.scss | 76 ++++++++++--------- .../app/main/ui/workspace/right_header.cljs | 2 + .../app/main/ui/workspace/right_header.scss | 6 +- .../main/ui/workspace/viewport/top_bar.cljs | 4 +- .../main/ui/workspace/viewport/top_bar.scss | 2 +- 8 files changed, 65 insertions(+), 48 deletions(-) diff --git a/frontend/src/app/main/ui/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs index 4281edf62..6af3f502b 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.cljs +++ b/frontend/src/app/main/ui/components/color_bullet_new.cljs @@ -17,11 +17,13 @@ {::mf/wrap [mf/memo] ::mf/wrap-props false} [{:keys [color on-click mini? area]}] - (let [on-click (mf/use-fn - (mf/deps color on-click) - (fn [event] - (when (fn? on-click) - (^function on-click color event))))] + (let [read-only? (nil? on-click) + on-click + (mf/use-fn + (mf/deps color on-click) + (fn [event] + (when (fn? on-click) + (^function on-click color event))))] (if (uc/multiple? color) [:div {:on-click on-click :class (stl/css :color-bullet :multiple)}] @@ -39,7 +41,9 @@ :is-not-library-color (nil? id) :is-gradient (some? gradient) :is-transparent (and opacity (> 1 opacity)) - :grid-area area) + :grid-area area + :read-only read-only?) + :data-readonly (str read-only?) :on-click on-click} (cond diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet_new.scss index a57c1c395..9da025115 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.scss +++ b/frontend/src/app/main/ui/components/color_bullet_new.scss @@ -64,7 +64,7 @@ height: 100%; background-color: var(--color-bullet-background-color); } - &:hover { + &:hover:not(.read-only) { border: $s-2 solid var(--color-bullet-border-color-selected); } } diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs index ca54120fd..698d84613 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs @@ -261,7 +261,10 @@ :collapsabled-icon true :rotated collapsed-css?)} i/arrow-refactor]] - [:span {:class (stl/css :code-lang)} "CSS"] + + [:& select {:default-value style-type + :class (stl/css :code-lang-select) + :options [{:label "CSS" :value "css"}]}] [:div {:class (stl/css :action-btns)} [:button {:class (stl/css :expand-button) diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss index 1eb6f5db3..9b4fc8866 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.scss +++ b/frontend/src/app/main/ui/viewer/inspect/code.scss @@ -17,45 +17,51 @@ } } .code-block { + font-size: $fs-14; padding: 0 $s-4 $s-8 0; - .code-row-lang { - display: flex; - justify-content: space-between; - gap: $s-4; - width: 100%; - .code-lang { - @include tabTitleTipography; - display: flex; - align-items: center; - } - .action-btns { - display: flex; - gap: $s-4; - flex: 1; - justify-content: end; - .expand-button { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } - } - .code-lang-select { - @include tabTitleTipography; - width: $s-92; - border: $s-1 solid transparent; - background-color: transparent; - color: var(--menu-foreground-color-disabled); + pre { + border-radius: $br-8; + border: $s-1 solid $db-secondary; + padding: $s-16; + } + } + + .code-row-lang { + display: flex; + justify-content: space-between; + gap: $s-4; + width: 100%; + } + .code-lang { + @include tabTitleTipography; + display: flex; + align-items: center; + } + .action-btns { + display: flex; + gap: $s-4; + flex: 1; + justify-content: end; + .expand-button { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); } } - - .code-row-display { - margin-bottom: $s-8; - } + } + .code-lang-select { + @include tabTitleTipography; + width: $s-72; + border: $s-1 solid transparent; + background-color: transparent; + color: var(--menu-foreground-color-disabled); + } + .code-row-display { + margin-bottom: $s-8; } } diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index 78b410c61..2359cf725 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -203,6 +203,8 @@ [:& persistence-state-widget] + [:div {:class (stl/css :separator)}] + [:div {:class (stl/css :zoom-section)} [:& zoom-widget-workspace diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index d5f2d457f..6b54cb390 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -11,7 +11,7 @@ align-items: center; min-width: $s-256; padding: $s-8; - gap: $s-2; + gap: $s-8; background-color: var(--panel-background-color); .users-section { position: relative; @@ -19,6 +19,9 @@ max-width: $s-72; padding: $s-4 $s-6; } + .separator { + flex: 1; + } .zoom-section { .zoom-widget { @include buttonStyle; @@ -27,6 +30,7 @@ justify-content: center; height: $s-28; max-width: $s-48; + width: $s-48; border-radius: $br-8; .label { @include titleTipography; 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 cba3e74a2..c3efb3278 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs @@ -35,9 +35,7 @@ [:& 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]]] + :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]] ;; OLD [: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 index 67114b50e..4b615961a 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss @@ -22,7 +22,7 @@ margin-left: -50%; padding: $s-8; pointer-events: initial; - width: $s-512; + width: $s-400; } .viewport-actions-title {