💄 Update inspect tab in code area

frontend/src/app/main/ui/viewer/inspect/code.cljs

@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.viewer.inspect.code
+  (:require-macros [app.main.style :as stl])
   (:require
    ["js-beautify" :as beautify]
    [app.common.data :as d]
@@ -14,13 +15,14 @@
    [app.common.types.shape-tree :as ctst]
    [app.config :as cfg]
    [app.main.data.events :as ev]
-   ;; [app.main.data.preview :as dp]
    [app.main.fonts :as fonts]
+   ;; [app.main.data.preview :as dp]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.code-block :refer [code-block]]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.select :refer [select]]
+   [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as i]
@@ -108,7 +110,8 @@
 
 (mf/defc code
   [{:keys [shapes frame on-expand from]}]
-  (let [style-type*    (mf/use-state "css")
+  (let [new-css-system (mf/use-ctx ctx/new-css-system)
+        style-type*    (mf/use-state "css")
         markup-type*   (mf/use-state "html")
         fontfaces-css* (mf/use-state nil)
         images-data*   (mf/use-state nil)
@@ -227,55 +230,120 @@
             (fn [result]
               (reset! images-data* result)))))
 
-    [:div.element-options
-     [:div.attributes-block
-      [:button.download-button {:on-click handle-copy-all-code}
-       "Copy all code"]]
+    (if new-css-system
+      [:div {:class (stl/css :element-options)}
+       [:div {:class (stl/css :attributes-block)}
+        [:button {:class (stl/css :download-button)
+                  :on-click handle-copy-all-code}
+         "Copy all code"]]
 
-     #_[:div.attributes-block
-      [:button.download-button {:on-click handle-open-review}
-       "Preview"]]
+       #_[:div.attributes-block
+          [:button.download-button {:on-click handle-open-review}
+           "Preview"]]
 
-     [:div.code-block
-      [:div.code-row-lang
-       [:& select {:default-value style-type
-                   :class "custom-select"
-                   :options [{:label "CSS" :value "css"}]
-                   :on-change set-style}]
-       [:button.expand-button
-        {:on-click on-expand}
-        i/full-screen]
+       [:div {:class (stl/css :code-block)}
+        [:div {:class (stl/css :code-row-lang)}
+         [:span {:class (stl/css :code-lang)} "CSS"]
+        ;;   Active select when we have more than one option
+        ;;  [:& select {:default-value style-type
+        ;;              :class (stl/css :code-lang-select)
+        ;;              :options [{:label "CSS" :value "css"}]
+        ;;              :on-change set-style}]
+         [:div {:class (stl/css :action-btns)}
+          [:button {:class (stl/css :expand-button)
+                    :on-click on-expand}
+           i/code-refactor]
 
-       [:& copy-button {:data style-code
-                        :on-copied on-style-copied}]]
+          [:& copy-button {:data style-code
+                           :on-copied on-style-copied}]]]
 
-      [:div.code-row-display {:style #js {"--code-height" (str (or style-size 400) "px")}}
-       [:& code-block {:type style-type
-                       :code style-code}]]
+        [:div {:class (stl/css :code-row-display)
+               :style #js {"--code-height" (str (or style-size 400) "px")}}
+         [:& code-block {:type style-type
+                         :code style-code}]]
 
-      [:div.resize-area {:on-pointer-down on-style-pointer-down
-                         :on-lost-pointer-capture on-style-lost-pointer-capture
-                         :on-pointer-move on-style-pointer-move}]]
+        [:div {:class (stl/css :resize-area)
+               :on-pointer-down on-style-pointer-down
+               :on-lost-pointer-capture on-style-lost-pointer-capture
+               :on-pointer-move on-style-pointer-move}]]
 
-     [:div.code-block
-      [:div.code-row-lang
-       [:& select {:default-value markup-type
-                   :class "input-option"
-                   :options [{:label "HTML" :value "html"}
-                             {:label "SVG" :value "svg"}]
-                   :on-change set-markup}]
+       [:div {:class (stl/css :code-block)}
+        [:div {:class (stl/css :code-row-lang)}
+         [:& select {:default-value markup-type
+                     :class (stl/css :code-lang-select)
+                     :options [{:label "HTML" :value "html"}
+                               {:label "SVG" :value "svg"}]
+                     :on-change set-markup}]
 
-       [:button.expand-button
-        {:on-click on-expand}
-        i/full-screen]
+         [:div {:class (stl/css :action-btns)}
+          [:button {:class (stl/css :expand-button)
+                    :on-click on-expand}
+           i/code-refactor]
 
-       [:& copy-button {:data #(replace-map markup-code images-data)
-                        :on-copied on-markup-copied}]]
+          [:& copy-button {:data #(replace-map markup-code images-data)
+                           :on-copied on-markup-copied}]]]
 
-      [:div.code-row-display {:style #js {"--code-height" (str (or markup-size 400) "px")}}
-       [:& code-block {:type markup-type
-                       :code markup-code}]]
+        [:div {:class (stl/css :code-row-display)
+               :style #js {"--code-height" (str (or markup-size 400) "px")}}
+         [:& code-block {:type markup-type
+                         :code markup-code}]]
 
-      [:div.resize-area {:on-pointer-down on-markup-pointer-down
-                         :on-lost-pointer-capture on-markup-lost-pointer-capture
-                         :on-pointer-move on-markup-pointer-move}]]]))
+        [:div {:class (stl/css :resize-area)
+               :on-pointer-down on-markup-pointer-down
+               :on-lost-pointer-capture on-markup-lost-pointer-capture
+               :on-pointer-move on-markup-pointer-move}]]]
+
+
+
+      [:div.element-options
+       [:div.attributes-block
+        [:button.download-button {:on-click handle-copy-all-code}
+         "Copy all code"]]
+
+       #_[:div.attributes-block
+          [:button.download-button {:on-click handle-open-review}
+           "Preview"]]
+
+       [:div.code-block
+        [:div.code-row-lang
+         [:& select {:default-value style-type
+                     :class "custom-select"
+                     :options [{:label "CSS" :value "css"}]
+                     :on-change set-style}]
+         [:button.expand-button
+          {:on-click on-expand}
+          i/full-screen]
+
+         [:& copy-button {:data style-code
+                          :on-copied on-style-copied}]]
+
+        [:div.code-row-display {:style #js {"--code-height" (str (or style-size 400) "px")}}
+         [:& code-block {:type style-type
+                         :code style-code}]]
+
+        [:div.resize-area {:on-pointer-down on-style-pointer-down
+                           :on-lost-pointer-capture on-style-lost-pointer-capture
+                           :on-pointer-move on-style-pointer-move}]]
+
+       [:div.code-block
+        [:div.code-row-lang
+         [:& select {:default-value markup-type
+                     :class "input-option"
+                     :options [{:label "HTML" :value "html"}
+                               {:label "SVG" :value "svg"}]
+                     :on-change set-markup}]
+
+         [:button.expand-button
+          {:on-click on-expand}
+          i/full-screen]
+
+         [:& copy-button {:data #(replace-map markup-code images-data)
+                          :on-copied on-markup-copied}]]
+
+        [:div.code-row-display {:style #js {"--code-height" (str (or markup-size 400) "px")}}
+         [:& code-block {:type markup-type
+                         :code markup-code}]]
+
+        [:div.resize-area {:on-pointer-down on-markup-pointer-down
+                           :on-lost-pointer-capture on-markup-lost-pointer-capture
+                           :on-pointer-move on-markup-pointer-move}]]])))