From 461e00380580320502f0571f61bca11eb073f92f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Wed, 25 Mar 2020 12:15:27 +0100
Subject: [PATCH] :tada: Add a label to frames in workspace.

---
 .../resources/styles/main/partials/workspace.scss    | 10 ++++++++++
 frontend/src/uxbox/main/ui/shapes/frame.cljs         | 12 ++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index 1d453d55a..ff623ca27 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -173,3 +173,13 @@
   }
 
 }
+
+.workspace-frame-label {
+  fill: $color-gray-dark;
+  font-size: $fs12;
+}
+
+.selected .workspace-frame-label {
+  fill: $color-primary-dark;
+}
+
diff --git a/frontend/src/uxbox/main/ui/shapes/frame.cljs b/frontend/src/uxbox/main/ui/shapes/frame.cljs
index 328fd9194..d645b150a 100644
--- a/frontend/src/uxbox/main/ui/shapes/frame.cljs
+++ b/frontend/src/uxbox/main/ui/shapes/frame.cljs
@@ -94,9 +94,14 @@
           on-mouse-down #(common/on-mouse-down % shape)
           on-context-menu #(common/on-context-menu % shape)
           shape (merge frame-default-props shape)
+          {:keys [x y width height]} shape
 
           childs (mapv #(get objects %) (:shapes shape))
 
+          ds-modifier (:displacement-modifier shape)
+          label-pos (cond-> (gpt/point x (- y 10))
+                      (gmt/matrix? ds-modifier) (gpt/transform ds-modifier))
+
           on-double-click
           (fn [event]
             (dom/prevent-default event)
@@ -106,6 +111,13 @@
            :on-context-menu on-context-menu
            :on-double-click on-double-click
            :on-mouse-down on-mouse-down}
+       [:text {:x (:x label-pos)
+               :y (:y label-pos)
+               :width width
+               :height 20
+               :class-name "workspace-frame-label"
+               :on-click on-double-click} ; user may also select with single click in the label
+        (:name shape)]
        [:& frame-shape {:shape shape :childs childs}]])))
 
 (mf/defc frame-shape