💄 Update inspect tab in code area

frontend/src/app/main/ui/components/code_block.cljs

@@ -5,17 +5,21 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.code-block
+  (:require-macros [app.main.style :as stl])
   (:require
    ["highlight.js" :as hljs]
+   [app.common.data.macros :as dm]
+   [app.main.ui.context :as ctx]
    [rumext.v2 :as mf]))
 
 (mf/defc code-block
   {::mf/wrap-props false}
   [{:keys [code type]}]
-  (let [block-ref (mf/use-ref)]
+  (let [new-css-system (mf/use-ctx ctx/new-css-system)
+        block-ref (mf/use-ref)]
     (mf/with-effect [code type]
       (when-let [node (mf/ref-val block-ref)]
         (hljs/highlightElement node)))
 
-    [:pre.code-display {:class type :ref block-ref} code]))
+    [:pre {:class (dm/str type " " (stl/css new-css-system :code-display)) :ref block-ref} code]))
 

frontend/src/app/main/ui/components/code_block.scss

@@ -0,0 +1,14 @@
+// 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";
+
+.code-display {
+  border-radius: $br-8;
+  margin-top: $s-8;
+  padding: $s-12;
+  background-color: var(--menu-background-color);
+}

frontend/src/app/main/ui/components/color_bullet_new.cljs

@@ -36,7 +36,6 @@
                   :is-gradient (some? gradient)
                   :is-transparent (and opacity (> 1 opacity))
                   :grid-area area)
-
           :on-click on-click}
 
          (if (some? gradient)
@@ -56,8 +55,9 @@
   (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
     (when (or (not size) (> size 64))
       [:span {:class (stl/css-case
-                      :color-text true
-                      :small-text (and (>= size 64) (< size 72)))
+                      :color-text (< size 72)
+                      :small-text (and (>= size 64) (< size 72))
+                      :big-text   (>= size 72))
               :on-click on-click
               :on-double-click on-double-click}
        (or name color (uc/gradient-type->string (:type gradient)))])))

frontend/src/app/main/ui/components/color_bullet_new.scss

@@ -80,6 +80,11 @@
   }
 }
 
+.big-text {
+  @include inspectValue;
+  height: $s-16;
+}
+
 .no-text {
   display: none;
 }

frontend/src/app/main/ui/components/copy_button.cljs

@@ -5,15 +5,19 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.copy-button
+  (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.util.timers :as timers]
    [app.util.webapi :as wapi]
    [beicon.core :as rx]
    [rumext.v2 :as mf]))
 
-(mf/defc copy-button [{:keys [data on-copied]}]
-  (let [just-copied (mf/use-state false)]
+(mf/defc copy-button [{:keys [data on-copied children class]}]
+  (let [new-css-system  (mf/use-ctx ctx/new-css-system)
+        just-copied (mf/use-state false)]
     (mf/use-effect
      (mf/deps @just-copied)
      (fn []
@@ -23,11 +27,24 @@
          (let [sub (timers/schedule 1000 #(reset! just-copied false))]
            ;; On unmount we dispose the timer
            #(rx/-dispose sub)))))
+    (if new-css-system
+      [:button {:class (dm/str class " " (stl/css-case :copy-button true
+                                     :copy-wrapper (some? children)))
+                :on-click #(when-not @just-copied
+                             (reset! just-copied true)
+                             (wapi/write-to-clipboard (if (fn? data) (data) data)))}
 
-    [:button.copy-button
-     {:on-click #(when-not @just-copied
-                   (reset! just-copied true)
-                   (wapi/write-to-clipboard (if (fn? data) (data) data)))}
-     (if @just-copied
-       i/tick
-       i/copy)]))
+       (when children
+         children)
+       [:span {:class (stl/css :icon-btn)}
+        (if @just-copied
+         i/tick-refactor
+         i/clipboard-refactor)]]
+
+      [:button.copy-button
+       {:on-click #(when-not @just-copied
+                     (reset! just-copied true)
+                     (wapi/write-to-clipboard (if (fn? data) (data) data)))}
+       (if @just-copied
+         i/tick
+         i/copy)])))

frontend/src/app/main/ui/components/copy_button.scss

@@ -0,0 +1,77 @@
+// 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";
+
+.copy-button {
+  @include buttonStyle;
+  @include flexCenter;
+  height: $s-32;
+  width: $s-28;
+  border: $s-1 solid transparent;
+  border-radius: $br-8;
+  background-color: transparent;
+  box-sizing: border-box;
+  .icon-btn {
+    @include flexCenter;
+    height: $s-32;
+    min-width: $s-28;
+    width: $s-28;
+    svg {
+      @extend .button-icon-small;
+      stroke: var(--icon-foreground);
+    }
+  }
+
+  &:hover {
+    background-color: var(--color-background-tertiary);
+    color: var(--color-foreground-primary);
+    border: $s-1 solid var(--color-background-tertiary);
+    .icon-btn {
+      svg {
+        stroke: var(--button-tertiary-foreground-color-active);
+      }
+    }
+  }
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border: $s-1 solid var(--button-tertiary-border-color-focus);
+    background-color: transparent;
+    color: var(--button-tertiary-foreground-color-focus);
+    .icon-btn svg {
+      stroke: var(--button-tertiary-foreground-color-active);
+    }
+  }
+
+  &.copy-wrapper {
+    @include copyWrapper;
+    height: fit-content;
+    text-align: left;
+    .icon-btn {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: 0;
+      right: 0;
+      height: 32px;
+      width: 28px;
+      svg {
+        @extend .button-icon-small;
+        display: none;
+      }
+    }
+    &:hover {
+      .icon-btn {
+        svg {
+          display: flex;
+          stroke: var(--button-tertiary-foreground-color-active);
+        }
+      }
+    }
+  }
+}

frontend/src/app/main/ui/components/shape_icon.cljs

@@ -47,3 +47,39 @@
               #_:default    i/bool-union)
       :svg-raw i/file-svg
       nil)))
+
+(mf/defc element-icon-refactor
+  [{:keys [shape main-instance?] :as props}]
+  (if (ctk/instance-head? shape)
+    (if main-instance?
+      i/component-refactor
+      i/copy-refactor)
+    (case (:type shape)
+      :frame (cond
+               (and (ctl/flex-layout? shape) (ctl/col? shape))
+               i/flex-vertical-refactor
+
+               (and (ctl/flex-layout? shape) (ctl/row? shape))
+               i/flex-horizontal-refactor
+
+               (ctl/grid-layout? shape)
+               i/grid-refactor
+
+               :else
+               i/board-refactor)
+      :image i/img-refactor
+      :line i/path-refactor
+      :circle i/elipse-refactor
+      :path i/curve-refactor
+      :rect i/rectangle-refactor
+      :text i/text-refactor
+      :group (if (:masked-group shape)
+               i/mask-refactor
+               i/group-refactor)
+      :bool (case (:bool-type shape)
+              :difference   i/boolean-difference-refactor
+              :exclude      i/boolean-exclude-refactor
+              :intersection i/boolean-intersection-refactor
+              #_:default    i/boolean-union-refactor)
+      :svg-raw i/svg-refactor
+      nil)))

frontend/src/app/main/ui/components/title_bar.cljs

@@ -26,7 +26,6 @@
                            :rotated collapsed?)}
             i/arrow-refactor]
            [:div {:class (stl/css :title)} title]]
-
           [:*
            [:button {:class (stl/css-case
                              :collapsabled-icon true