✨ Adds highlightjs dependency.

frontend/src/app/main/ui/viewer/handoff/attributes.cljs

@@ -20,13 +20,23 @@
    [app.main.ui.viewer.handoff.attributes.image :refer [image-panel]]
    [app.main.ui.viewer.handoff.attributes.text :refer [text-panel]]))
 
-(mf/defc attributes
-  [{:keys [shapes frame options]}]
-  (let [locale (mf/deref i18n/locale)
-        shapes (->> shapes
-                    (map #(gsh/translate-to-frame % frame)))
+(def type->options
+  {:multiple [:fill :stroke :image :text :shadow :blur]
+   :frame    [:layout :fill]
+   :group    [:layout]
+   :rect     [:layout :fill :stroke :shadow :blur]
+   :circle   [:layout :fill :stroke :shadow :blur]
+   :path     [:layout :fill :stroke :shadow :blur]
+   :curve    [:layout :fill :stroke :shadow :blur]
+   :image    [:image :layout :shadow :blur]
+   :text     [:layout :text :shadow :blur]})
 
-        shape (first shapes)]
+(mf/defc attributes
+  [{:keys [shapes frame]}]
+  (let [locale  (mf/deref i18n/locale)
+        shapes  (->> shapes (map #(gsh/translate-to-frame % frame)))
+        type    (if (= (count shapes) 1) (-> shapes first :type) :multiple)
+        options (type->options type)]
     [:div.element-options
      (for [option options]
        [:> (case option

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

@@ -0,0 +1,80 @@
+;; 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/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.viewer.handoff.code
+  (:require
+   ["highlight.js" :as hljs]
+   [rumext.alpha :as mf]
+   [app.util.i18n :as i18n]
+   [app.main.ui.icons :as i]
+   [app.common.geom.shapes :as gsh]))
+
+(def css-example
+  "/* text layer name */
+.shape {
+    width: 142px;
+    height: 40px;
+    border-radius: 20px;
+    background-color: var(--tiffany-blue);
+}")
+
+(def svg-example
+  "<g class=\"shape\">
+  <rect fill=\"#ffffff\" fill-opacity=\"1\" x=\"629\" y=\"169\" id=\"shape-eee5fa10-5336-11ea-
+8394-2dd26e322db3\" width=\"176\" height=\"211\">
+  </rect>
+</g>")
+
+(mf/defc code-block [{:keys [code type]}]
+  (let [block-ref (mf/use-ref)]
+    (mf/use-effect
+     (mf/deps block-ref)
+     (fn []
+       (hljs/highlightBlock (mf/ref-val block-ref))))
+    [:pre.code-display {:class type
+                        :ref block-ref} code]))
+
+(mf/defc code
+  [{:keys [shapes frame]}]
+  (let [locale (mf/deref i18n/locale)
+        shapes (->> shapes
+                    (map #(gsh/translate-to-frame % frame)))]
+    [:div.element-options
+     [:div.code-block
+      [:div.code-row-lang
+       [:select.code-selection
+        [:option "CSS"]
+        [:option "SASS"]
+        [:option "Less"]
+        [:option "Stylus"]]
+
+       [:button.attributes-copy-button
+        {:on-click #(prn "??")}
+        i/copy]]
+
+      [:div.code-row-display
+       [:& code-block {:type "css"
+                       :code css-example}]]]
+
+     [:div.code-block
+      [:div.code-row-lang
+       [:select.code-selection
+        [:option "SVG"]
+        [:option "HTML"]]
+
+       [:button.attributes-copy-button
+        {:on-click #(prn "??")}
+        i/copy]]
+
+      [:div.code-row-display
+       [:& code-block {:type "svg"
+                       :code svg-example}]]]
+
+     ]))
+

frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs

@@ -15,8 +15,9 @@
    [app.main.store :as st]
    [app.main.ui.icons :as i]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
+   [app.main.ui.workspace.sidebar.layers :refer [element-icon]]
    [app.main.ui.viewer.handoff.attributes :refer [attributes]]
-   [app.main.ui.workspace.sidebar.layers :refer [element-icon]]))
+   [app.main.ui.viewer.handoff.code :refer [code]]))
 
 (defn make-selected-shapes-iref
   []
@@ -28,28 +29,9 @@
             (mapv resolve-shape selected)))]
     #(l/derived selected->shapes st/state)))
 
-(mf/defc attributes-panel [{:keys [frame shapes]}]
-  (let [type (if (= (count shapes) 1)
-               (-> shapes first :type)
-               :multiple)]
-    (let [options (case type
-                    :multiple [:fill :stroke :image :text :shadow :blur]
-                    :frame    [:layout :fill]
-                    :group    [:layout]
-                    :rect     [:layout :fill :stroke :shadow :blur]
-                    :circle   [:layout :fill :stroke :shadow :blur]
-                    :path     [:layout :fill :stroke :shadow :blur]
-                    :curve    [:layout :fill :stroke :shadow :blur]
-                    :image    [:image :layout :shadow :blur]
-                    :text     [:layout :text :shadow :blur])]
-      [:& attributes {:frame frame
-                      :shapes shapes
-                      :options options}])))
 
-(mf/defc code-panel []
-  [:div.element-options])
-
-(mf/defc right-sidebar [{:keys [frame]}]
+(mf/defc right-sidebar
+  [{:keys [frame]}]
   (let [locale (mf/deref i18n/locale)
         section (mf/use-state :info #_:code)
         selected-ref (mf/use-memo (make-selected-shapes-iref))
@@ -72,8 +54,9 @@
           [:& tab-container {:on-change-tab #(reset! section %)
                              :selected @section}
            [:& tab-element {:id :info :title (t locale "handoff.tabs.info")}
-            [:& attributes-panel {:frame frame
-                                  :shapes shapes}]]
+            [:& attributes {:frame frame
+                            :shapes shapes}]]
 
            [:& tab-element {:id :code :title (t locale "handoff.tabs.code")}
-            [:& code-panel]]]]])]]))
+            [:& code {:frame frame
+                      :shapes shapes}]]]]])]]))