✨ Add penpot look and feel to multiuser pointers

CHANGES.md

@@ -5,6 +5,7 @@
 ### :boom: Breaking changes
 ### :sparkles: New features
 
+- Add penpot look and feel to multiuser cursors [Taiga #1387](https://tree.taiga.io/project/penpot/us/1387)
 - Add actions to go to main component context menu option [Taiga #2053](https://tree.taiga.io/project/penpot/us/2053).
 - Add contrast between component select color and shape select color [Taiga #2121](https://tree.taiga.io/project/penpot/issue/2121).
 - Add animations in interactions [Taiga #2244](https://tree.taiga.io/project/penpot/us/2244).

frontend/resources/styles/main/partials/workspace.scss

@@ -234,27 +234,20 @@
 }
 
 .multiuser-cursor {
-  align-items: center;
-  display: flex;
-  left: 0;
-  position: absolute;
-  top: 0;
   z-index: 10000;
+  pointer-events: none;
+}
 
-  svg {
+.profile-name {
-    height: 15px;
+  width: fit-content;
-    fill: #f3dd14;
+  font-family: worksans;
-    width: 15px;
+  padding: 2px 12px;
-  }
+  border-radius: 4px;
-
+  display:flex;
-  span {
+  align-items: center;
-    background-color: #f3dd14;
+  height: 20px;
-    border-radius: $br-small;
+  font-size: 12px;
-    color: $color-black;
+  line-height: 1.5;
-    font-size: $fs12;
-    margin-left: $size-2;
-    padding: $size-1;
-  }
 }
 
 .viewport-actions {

frontend/src/app/main/data/workspace/notifications.cljs

@@ -131,17 +131,17 @@
 ;; --- Handle: Presence
 
 (def ^:private presence-palette
-  #{"#2e8b57" ; seagreen
+  #{"#02bf51" ; darkpastelgreen text white
-    "#808000" ; olive
+    "#00fa9a" ; mediumspringgreen text black
-    "#b22222" ; firebrick
+    "#b22222" ; firebrick text white
-    "#ff8c00" ; darkorage
+    "#ff8c00" ; darkorage text white
-    "#ffd700" ; gold
+    "#ffd700" ; gold text black
-    "#ba55d3" ; mediumorchid
+    "#ba55d3" ; mediumorchid text white
-    "#00fa9a" ; mediumspringgreen
+    "#dda0dd" ; plum text black
-    "#00bfff" ; deepskyblue
+    "#008ab8" ; blueNCS text white
-    "#dda0dd" ; plum
+    "#00bfff" ; deepskyblue text white
-    "#ff1493" ; deeppink
+    "#ff1493" ; deeppink text white
-    "#ffa07a" ; lightsalmon
+    "#ffafda" ; carnationpink text black
     })
 
 (defn handle-presence
@@ -164,7 +164,10 @@
                 (assoc :id session-id)
                 (assoc :profile-id profile-id)
                 (assoc :updated-at (dt/now))
-                (update :color update-color presence)))
+                (update :color update-color presence)
+                (assoc :text-color (if (contains? ["#00fa9a" "#ffd700" "#dda0dd" "#ffafda"] (update-color (:color presence) presence))
+                                     "#000"
+                                     "#fff"))))
 
           (update-presence [presence]
             (-> presence

frontend/src/app/main/ui/workspace/viewport/presence.cljs

@@ -14,45 +14,34 @@
    [rumext.alpha :as mf]))
 
 (def pointer-icon-path
-  (str "M5.292 4.027L1.524.26l-.05-.01L0 0l.258 1.524 3.769 3.768zm-.45 "
+  (str "M11.58,-0.47L11.47,-0.35L0.34,10.77L0.30,10.96L-0.46,"
-       "0l-.313.314L1.139.95l.314-.314zm-.5.5l-.315.316-3.39-3.39.315-.315 "
+       "15.52L4.29,14.72L15.53,3.47L11.58,-0.47ZL11.58,"
-       "3.39 3.39zM1.192.526l-.668.667L.431.646.64.43l.552.094z"))
+       "-0.47ZL11.58,-0.47ZM11.58,1.3C12.31,2.05,13.02,"
+       "2.742,13.76,3.47L4.0053,13.23C3.27,12.50,2.55,"
+       "11.78,1.82,11.05L11.58,1.30ZL11.58,1.30ZM1.37,12.15L2.90,"
+       "13.68L1.67,13.89L1.165,13.39L1.37,12.15ZL1.37,12.15Z"))
 
 (mf/defc session-cursor
   [{:keys [session profile] :as props}]
-  (let [zoom      (mf/deref refs/selected-zoom)
+  (let [zoom             (mf/deref refs/selected-zoom)
-        point     (:point session)
+        point            (:point session)
-        color     (:color session "var(--color-black)")
+        background-color (:color session "var(--color-black)")
-        transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 4 zoom))]
+        text-color       (:text-color session "var(--color-white)")
+        transform        (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
+        shown-name       (if (> (count (:fullname profile)) 16)
+                           (str (str/slice (:fullname profile) 0 12) "...")
+                           (:fullname profile))]
     [:g.multiuser-cursor {:transform transform}
-     [:path {:fill color
+     [:path {:fill background-color
-             :d pointer-icon-path
+             :d pointer-icon-path}]
-             }]
+     [:g {:transform "translate(17 -10)"}
-     [:g {:transform "translate(0 -291.708)"}
+      [:foreignObject {:x -0.3
-      [:rect {:width 25
+                       :y -12.5
-              :height 5
+                       :width 300
-              :x 7
+                       :height 120}
-              :y 291.5
+       [:div.profile-name {:style {:background-color background-color
-              :fill color
+                                   :color text-color}}
-              :fill-opacity 0.8
+        shown-name]]]]))
-              :paint-order "stroke fill markers"
-              :rx 1
-              :ry 1}]
-      [:text {:x 8
-              :y 295
-              :width 25
-              :height 5
-              :overflow "hidden"
-              :fill "var(--color-white)"
-              :stroke-width 1
-              :font-family "Works Sans"
-              :font-size 3
-              :font-weight 400
-              :letter-spacing 0
-              :style { :line-height 1.25 }
-              :word-spacing 0}
-       (str (str/slice (:fullname profile) 0 14)
-            (when (> (count (:fullname profile)) 14) "..."))]]]))
 
 (mf/defc active-cursors
   {::mf/wrap [mf/memo]}