diff --git a/CHANGES.md b/CHANGES.md index 1f3977252..7c2d99ac9 100644 --- a/CHANGES.md +++ b/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). diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 40424d672..287d64582 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/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 { - height: 15px; - fill: #f3dd14; - width: 15px; - } - - span { - background-color: #f3dd14; - border-radius: $br-small; - color: $color-black; - font-size: $fs12; - margin-left: $size-2; - padding: $size-1; - } +.profile-name { + width: fit-content; + font-family: worksans; + padding: 2px 12px; + border-radius: 4px; + display:flex; + align-items: center; + height: 20px; + font-size: 12px; + line-height: 1.5; } .viewport-actions { diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index 6775a0e31..73172018c 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/frontend/src/app/main/data/workspace/notifications.cljs @@ -131,17 +131,17 @@ ;; --- Handle: Presence (def ^:private presence-palette - #{"#2e8b57" ; seagreen - "#808000" ; olive - "#b22222" ; firebrick - "#ff8c00" ; darkorage - "#ffd700" ; gold - "#ba55d3" ; mediumorchid - "#00fa9a" ; mediumspringgreen - "#00bfff" ; deepskyblue - "#dda0dd" ; plum - "#ff1493" ; deeppink - "#ffa07a" ; lightsalmon + #{"#02bf51" ; darkpastelgreen text white + "#00fa9a" ; mediumspringgreen text black + "#b22222" ; firebrick text white + "#ff8c00" ; darkorage text white + "#ffd700" ; gold text black + "#ba55d3" ; mediumorchid text white + "#dda0dd" ; plum text black + "#008ab8" ; blueNCS text white + "#00bfff" ; deepskyblue text white + "#ff1493" ; deeppink text white + "#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 diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.cljs b/frontend/src/app/main/ui/workspace/viewport/presence.cljs index 2293bd178..a6059fcf3 100644 --- a/frontend/src/app/main/ui/workspace/viewport/presence.cljs +++ b/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 " - "0l-.313.314L1.139.95l.314-.314zm-.5.5l-.315.316-3.39-3.39.315-.315 " - "3.39 3.39zM1.192.526l-.668.667L.431.646.64.43l.552.094z")) + (str "M11.58,-0.47L11.47,-0.35L0.34,10.77L0.30,10.96L-0.46," + "15.52L4.29,14.72L15.53,3.47L11.58,-0.47ZL11.58," + "-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) - point (:point session) - color (:color session "var(--color-black)") - transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 4 zoom))] + (let [zoom (mf/deref refs/selected-zoom) + point (:point session) + background-color (:color session "var(--color-black)") + 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 - :d pointer-icon-path - }] - [:g {:transform "translate(0 -291.708)"} - [:rect {:width 25 - :height 5 - :x 7 - :y 291.5 - :fill color - :fill-opacity 0.8 - :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) "..."))]]])) + [:path {:fill background-color + :d pointer-icon-path}] + [:g {:transform "translate(17 -10)"} + [:foreignObject {:x -0.3 + :y -12.5 + :width 300 + :height 120} + [:div.profile-name {:style {:background-color background-color + :color text-color}} + shown-name]]]])) (mf/defc active-cursors {::mf/wrap [mf/memo]}