Merge remote-tracking branch 'origin/staging' into develop

CHANGES.md

@@ -64,6 +64,7 @@
 ### :bug: Bugs fixed
 
 - Fix font rendering on grid thumbnails [Taiga #3473](https://tree.taiga.io/project/penpot/issue/3473)
+- Fix inconsistent representation of rectangles [Taiga #3977](https://tree.taiga.io/project/penpot/issue/3977)
 - Fix recent fonts info [Taiga #3953](https://tree.taiga.io/project/penpot/issue/3953)
 - Fix clipped elements affect boards and centering [Taiga #3666](https://tree.taiga.io/project/penpot/issue/3666)
 - Fix intro action in multi input [Taiga #3541](https://tree.taiga.io/project/penpot/issue/3541)
@@ -78,6 +79,7 @@
 - Fix unexpected removal of guides on copy&paste frames [Taiga #3887](https://tree.taiga.io/project/penpot/issue/3887) by @andrewzhurov
 - Fix props preserving on copy&paste texts [Taiga #3629](https://tree.taiga.io/project/penpot/issue/3629) by @andrewzhurov
 - Fix unexpected layers ungrouping on moving it [Taiga #3932](https://tree.taiga.io/project/penpot/issue/3932) by @andrewzhurov
+- Fix unexpected exception and behavior on colorpicker with gradients [Taiga #3448](https://tree.taiga.io/project/penpot/issue/3448)
 
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)

common/src/app/common/path/shapes_to_path.cljc

@@ -224,7 +224,11 @@
              #_:else (rect->path shape))
 
            ;; Apply the transforms that had the shape
-           transform (:transform shape)
+           transform
+           (cond-> (:transform shape (gmt/matrix))
+             (:flip-x shape) (gmt/scale (gpt/point -1 1))
+             (:flip-y shape) (gmt/scale (gpt/point 1 -1)))
+
            new-content (cond-> new-content
                          (some? transform)
                          (gsp/transform-content (gmt/transform-in (gsc/center-shape shape) transform)))]

common/src/app/common/types/shape/radius.cljc

@@ -87,11 +87,17 @@
 
 (defn set-radius-4
   [shape attr value]
+  (let [attr (cond->> attr
+               (:flip-x shape)
+               (get {:r1 :r2 :r2 :r1 :r3 :r4 :r4 :r3})
+
+               (:flip-y shape)
+               (get {:r1 :r4 :r2 :r3 :r3 :r2 :r4 :r1}))]
+
     (cond-> shape
       (:rx shape)
       (-> (dissoc :rx :rx)
           (assoc :r1 0 :r2 0 :r3 0 :r4 0))
 
       :always
-    (assoc attr value)))
+      (assoc attr value))))
-

frontend/resources/styles/main/partials/color-palette.scss

@@ -82,6 +82,7 @@
 
 .color-palette-actions-button {
   cursor: pointer;
+  display: flex;
   & svg {
     width: 1rem;
     height: 1rem;

frontend/src/app/main/broadcast.cljs

@@ -0,0 +1,52 @@
+;; 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/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.broadcast
+  "BroadcastChannel API."
+  (:require
+   [app.common.transit :as t]
+   [beicon.core :as rx]
+   [potok.core :as ptk]))
+
+(defrecord BroadcastMessage [id type data]
+  cljs.core/IDeref
+  (-deref [_] data))
+
+(def ^:const default-topic "penpot")
+
+;; The main broadcast channel instance, used for emit data
+(defonce default-channel
+  (js/BroadcastChannel. default-topic))
+
+(defonce stream
+  (->> (rx/create (fn [subs]
+                    (let [chan (js/BroadcastChannel. default-topic)]
+                      (unchecked-set chan "onmessage" #(rx/push! subs (unchecked-get % "data")))
+                      (fn [] (.close ^js chan)))))
+       (rx/map t/decode-str)
+       (rx/map map->BroadcastMessage)
+       (rx/share)))
+
+(defn emit!
+  ([type data]
+   (.postMessage ^js default-channel (t/encode-str {:id nil :type type :data data}))
+   nil)
+  ([id type data]
+   (.postMessage ^js default-channel (t/encode-str {:id id :type type :data data}))
+   nil))
+
+(defn type?
+  ([type]
+   (fn [obj] (= (:type obj) type)))
+  ([obj type]
+   (= (:type obj) type)))
+
+(defn event
+  [type data]
+  (ptk/reify ::event
+    ptk/EffectEvent
+    (effect [_ _ _]
+      (emit! type data))))

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

@@ -6,55 +6,32 @@
 
 (ns app.main.data.workspace.colors
   (:require
-   [app.common.colors :as clr]
+   [app.common.colors :as colors]
    [app.common.data :as d]
    [app.common.pages.helpers :as cph]
+   [app.main.broadcast :as mbc]
    [app.main.data.modal :as md]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.layout :as layout]
+   [app.main.data.workspace.libraries :as dwl]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.texts :as dwt]
    [app.util.color :as uc]
    [beicon.core :as rx]
    [potok.core :as ptk]))
 
-(defn change-palette-selected
+;; A set of keys that are used for shared state identifiers
-  "Change the library used by the general palette tool"
+(def ^:const colorpicker-selected-broadcast-key ::colorpicker-selected)
-  [selected]
+(def ^:const colorpalette-selected-broadcast-key ::colorpalette-selected)
-  (ptk/reify ::change-palette-selected
-    ptk/UpdateEvent
-    (update [_ state]
-      (assoc-in state [:workspace-global :selected-palette] selected))
-
-    ptk/EffectEvent
-    (effect [_ state _]
-      (let [wglobal (:workspace-global state)]
-        (layout/persist-layout-state! wglobal)))))
-
-(defn change-palette-selected-colorpicker
-  "Change the library used by the color picker"
-  [selected]
-  (ptk/reify ::change-palette-selected-colorpicker
-    ptk/UpdateEvent
-    (update [_ state]
-      (assoc-in state [:workspace-global :selected-palette-colorpicker] selected))
-
-    ptk/EffectEvent
-    (effect [_ state _]
-      (let [wglobal (:workspace-global state)]
-        (layout/persist-layout-state! wglobal)))))
 
 (defn show-palette
   "Show the palette tool and change the library it uses"
   [selected]
   (ptk/reify ::show-palette
-    ptk/UpdateEvent
-    (update [_ state]
-      (assoc-in state [:workspace-global :selected-palette] selected))
-
     ptk/WatchEvent
     (watch [_ _ _]
-      (rx/of (layout/toggle-layout-flag :colorpalette :force? true)))
+      (rx/of (layout/toggle-layout-flag :colorpalette :force? true)
+             (mbc/event colorpalette-selected-broadcast-key selected)))
 
     ptk/EffectEvent
     (effect [_ state _]
@@ -342,45 +319,11 @@
           (-> state
               (assoc-in [:workspace-global :picking-color?] true)
               (assoc ::md/modal {:id (random-uuid)
-                                 :data {:color clr/black :opacity 1}
+                                 :data {:color colors/black :opacity 1}
                                  :type :colorpicker
                                  :props {:on-change handle-change-color}
                                  :allow-click-outside true})))))))
 
-(defn start-gradient
-  [gradient]
-  (ptk/reify ::start-gradient
-    ptk/UpdateEvent
-    (update [_ state]
-      (let [id (-> state wsh/lookup-selected first)]
-        (-> state
-            (assoc-in [:workspace-global :current-gradient] gradient)
-            (assoc-in [:workspace-global :current-gradient :shape-id] id))))))
-
-(defn stop-gradient
-  []
-  (ptk/reify ::stop-gradient
-    ptk/UpdateEvent
-    (update [_ state]
-      (-> state
-          (update :workspace-global dissoc :current-gradient)))))
-
-(defn update-gradient
-  [changes]
-  (ptk/reify ::update-gradient
-    ptk/UpdateEvent
-    (update [_ state]
-      (-> state
-          (update-in [:workspace-global :current-gradient] merge changes)))))
-
-(defn select-gradient-stop
-  [spot]
-  (ptk/reify ::select-gradient-stop
-    ptk/UpdateEvent
-    (update [_ state]
-      (-> state
-          (assoc-in [:workspace-global :editing-stop] spot)))))
-
 (defn color-att->text
   [color]
   {:fill-color (:color color)
@@ -409,7 +352,9 @@
                                  :fill (change-fill [(:shape-id shape)] new-color (:index shape))
                                  :stroke (change-stroke [(:shape-id shape)] new-color (:index shape))
                                  :shadow (change-shadow [(:shape-id shape)] new-color (:index shape))
-                                 :content (dwt/update-text-with-function (:shape-id shape) (partial change-text-color old-color new-color (:index shape))))))))))
+                                 :content (dwt/update-text-with-function
+                                           (:shape-id shape)
+                                           (partial change-text-color old-color new-color (:index shape))))))))))
 
 (defn apply-color-from-palette
   [color is-alt?]
@@ -431,3 +376,177 @@
         (if is-alt?
           (rx/of (change-stroke ids (merge uc/empty-color color) 0))
           (rx/of (change-fill ids (merge uc/empty-color color) 0)))))))
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; COLORPICKER STATE MANAGEMENT
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn split-color-components
+  [{:keys [color opacity] :as data}]
+  (let [value (if (uc/hex? color) color colors/black)
+        [r g b] (uc/hex->rgb value)
+        [h s v] (uc/hex->hsv value)]
+    (merge data
+           {:hex (or value "000000")
+            :alpha (or opacity 1)
+            :r r :g g :b b
+            :h h :s s :v v})))
+
+(defn materialize-color-components
+  [{:keys [hex alpha] :as data}]
+  (-> data
+      (assoc :color hex)
+      (assoc :opacity alpha)))
+
+(defn clear-color-components
+  [data]
+  (dissoc data :hex :alpha :r :g :b :h :s :v))
+
+(defn- create-gradient
+  [type]
+  {:start-x 0.5
+   :start-y (if (= type :linear-gradient) 0.0 0.5)
+   :end-x   0.5
+   :end-y   1
+   :width  1.0})
+
+(defn get-color-from-colorpicker-state
+  [{:keys [type current-color stops gradient] :as state}]
+  (if (= type :color)
+    (clear-color-components current-color)
+    {:gradient (-> gradient
+                   (assoc :type (case type
+                                  :linear-gradient :linear
+                                  :radial-gradient :radial))
+                   (assoc :stops (mapv clear-color-components stops))
+                   (dissoc :shape-id))}))
+
+(defn- colorpicker-onchange-runner
+  "Effect event that runs the on-change callback with the latest
+  colorpicker state converted to color object."
+  [on-change]
+  (ptk/reify ::colorpicker-onchange-runner
+    ptk/WatchEvent
+    (watch [_ state _]
+      (when-let [color (some-> state :colorpicker get-color-from-colorpicker-state)]
+        (on-change color)
+        (rx/of (dwl/add-recent-color color))))))
+
+(defn initialize-colorpicker
+  [on-change]
+  (ptk/reify ::initialize-colorpicker
+    ptk/WatchEvent
+    (watch [_ _ stream]
+      (let [stoper (rx/merge
+                    (rx/filter (ptk/type? ::finalize-colorpicker) stream)
+                    (rx/filter (ptk/type? ::initialize-colorpicker) stream))]
+
+        (->> (rx/merge
+              (->> stream
+                   (rx/filter (ptk/type? ::update-colorpicker-gradient))
+                   (rx/debounce 200))
+              (rx/filter (ptk/type? ::update-colorpicker-color) stream)
+              (rx/filter (ptk/type? ::activate-colorpicker-gradient) stream))
+             (rx/map (constantly (colorpicker-onchange-runner on-change)))
+             (rx/take-until stoper))))))
+
+(defn finalize-colorpicker
+  []
+  (ptk/reify ::finalize-colorpicker
+    ptk/UpdateEvent
+    (update [_ state]
+      (dissoc state :colorpicker))))
+
+(defn update-colorpicker
+  [{:keys [gradient] :as data}]
+  (ptk/reify ::update-colorpicker
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [shape-id (-> state wsh/lookup-selected first)]
+        (update state :colorpicker
+                (fn [state]
+                  (if (some? gradient)
+                    (let [stop  (or (:editing-stop state) 0)
+                          stops (mapv split-color-components (:stops gradient))
+                          type  (case (:type gradient)
+                                  :linear :linear-gradient
+                                  :radial :radial-gradient)]
+                      (-> state
+                          (assoc :type type)
+                          (assoc :current-color (nth stops stop))
+                          (assoc :stops stops)
+                          (assoc :gradient (-> gradient
+                                               (dissoc :stops)
+                                               (assoc :shape-id shape-id)))
+                          (assoc :editing-stop stop)))
+
+                    (-> state
+                        (assoc :type :color)
+                        (assoc :current-color (split-color-components (dissoc data :gradient)))
+                        (dissoc :editing-stop)
+                        (dissoc :gradient)
+                        (dissoc :stops)))))))))
+
+(defn update-colorpicker-color
+  [changes]
+  (ptk/reify ::update-colorpicker-color
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :colorpicker
+              (fn [state]
+                (let [state (-> state
+                                (update :current-color merge changes)
+                                (update :current-color materialize-color-components))]
+                  (if-let [stop (:editing-stop state)]
+                    (update-in state [:stops stop] (fn [data] (->> changes
+                                                                   (merge data)
+                                                                   (materialize-color-components))))
+                    (-> state
+                        (assoc :type :color)
+                        (dissoc :gradient :stops :editing-stop)))))))))
+
+(defn update-colorpicker-gradient
+  [changes]
+  (ptk/reify ::update-colorpicker-gradient
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:colorpicker :gradient] merge changes))))
+
+(defn select-colorpicker-gradient-stop
+  [stop]
+  (ptk/reify ::select-colorpicket-gradient-stop
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :colorpicker
+              (fn [state]
+                (if-let [color (get-in state [:stops stop])]
+                  (assoc state
+                         :current-color color
+                         :editing-stop stop)
+                  state))))))
+
+(defn activate-colorpicker-gradient
+  [type]
+  (ptk/reify ::activate-colorpicker-gradient
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :colorpicker
+              (fn [state]
+                (if (= type (:type state))
+                  (do
+                    (-> state
+                        (assoc :type :color)
+                        (dissoc :editing-stop :stops :gradient)))
+                  (let [gradient (create-gradient type)
+                        color    (:current-color state)]
+                    (-> state
+                        (assoc :type type)
+                        (assoc :gradient gradient)
+                        (cond-> (not (:stops state))
+                          (assoc :editing-stop 0
+                                 :stops  [(assoc color :offset 0)
+                                          (-> color
+                                              (assoc :alpha 0)
+                                              (assoc :offset 1)
+                                              (materialize-color-components))]))))))))))

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

@@ -117,7 +117,7 @@
 
 (defn add-recent-color
   [color]
-  (us/assert ::ctc/recent-color color)
+  (us/assert! ::ctc/recent-color color)
   (ptk/reify ::add-recent-color
     ptk/WatchEvent
     (watch [it _ _]

frontend/src/app/main/refs.cljs

@@ -426,3 +426,6 @@
      (->> ids
           (some #(-> (cph/get-parent objects %) :layout))))
    workspace-page-objects))
+
+(def colorpicker
+  (l/derived :colorpicker st/state))

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -17,9 +17,17 @@
     :radial (tr "workspace.gradients.radial")
     nil))
 
-(mf/defc color-bullet [{:keys [color on-click]}]
+(mf/defc color-bullet
+  {::mf/wrap [mf/memo]}
+  [{:keys [color on-click]}]
+  (let [on-click (mf/use-fn
+                  (mf/deps color on-click)
+                  (fn [event]
+                    (when (fn? on-click)
+                      (^function on-click color event))))]
+
     (if (uc/multiple? color)
-    [:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}]
+      [:div.color-bullet.multiple {:on-click on-click}]
 
       ;; No multiple selection
       (let [color (if (string? color) {:color color :opacity 1} color)]
@@ -27,13 +35,13 @@
          {:class (dom/classnames :is-library-color (some? (:id color))
                                  :is-not-library-color (nil? (:id color))
                                  :is-gradient (some? (:gradient color)))
-        :on-click #(when on-click (on-click %))
+          :on-click on-click
           :alt (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))}
          (if  (:gradient color)
            [:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
            [:div.color-bullet-wrapper
             [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
-          [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])])))
+            [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])]))))
 
 (mf/defc color-name [{:keys [color size on-click on-double-click]}]
   (let [color (if (string? color) {:color color :opacity 1} color)

frontend/src/app/main/ui/hooks.cljs

@@ -7,16 +7,26 @@
 (ns app.main.ui.hooks
   "A collection of general purpose react hooks."
   (:require
+   [app.common.data.macros :as dm]
    [app.common.pages :as cp]
+   [app.common.uuid :as uuid]
+   [app.main.broadcast :as mbc]
    [app.main.data.shortcuts :as dsc]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
+   [app.util.storage :refer [storage]]
    [app.util.timers :as ts]
    [beicon.core :as rx]
+   [goog.functions :as f]
    [rumext.alpha :as mf]))
 
+(defn use-id
+  "Get a stable id value across rerenders."
+  []
+  (mf/use-memo #(dm/str (uuid/next))))
+
 (defn use-rxsub
   [ob]
   (let [[state reset-state!] (mf/useState @ob)]
@@ -191,7 +201,6 @@
 
     [(deref state) ref]))
 
-
 (defn use-stream
   "Wraps the subscription to a stream into a `use-effect` call"
   ([stream on-subscribe]
@@ -205,6 +214,7 @@
 
 ;; https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
 (defn use-previous
+  "Returns the value from previuous render cycle."
   [value]
   (let [ref (mf/use-ref value)]
     (mf/use-effect
@@ -214,13 +224,27 @@
     (mf/ref-val ref)))
 
 (defn use-update-var
+  "Returns a var pointer what automatically updates with latest values."
   [value]
-  (let [ref (mf/use-var value)]
+  (let [ptr (mf/use-var value)]
-    (mf/use-effect
+    (mf/with-effect [value]
-     (mf/deps value)
+      (reset! ptr value))
-     (fn []
+    ptr))
-       (reset! ref value)))
+
-    ref))
+(defn use-ref-callback
+  "Returns a stable callback pointer what calls the interned
+  callback. The interned callback will be automatically updated on
+  each reander if the reference changes and works as noop if the
+  pointer references to nil value."
+  [f]
+  (let [ptr (mf/use-ref nil)]
+    (mf/with-effect [f]
+      (mf/set-ref-val! ptr #js {:f f}))
+    (mf/use-fn
+     (fn [& args]
+       (let [obj  (mf/ref-val ptr)]
+         (when ^boolean obj
+           (apply (.-f obj) args)))))))
 
 (defn use-equal-memo
   [val]
@@ -258,4 +282,34 @@
                   #(cp/focus-objects objects focus))]
      objects)))
 
+(defn use-debounce
+  [ms value]
+  (let [[state update-state-fn] (mf/useState value)
+        update-fn (mf/use-memo (mf/deps ms) #(f/debounce update-state-fn ms))]
+    (mf/with-effect [value]
+      (update-fn value))
+    state))
 
+(defn use-shared-state
+  "A specialized hook that adds persistence and inter-context reactivity
+  to the default mf/use-state hook.
+
+  The state is automatically persisted under the provided key on
+  localStorage. And it will keep watching events with type equals to
+  `key` for new values."
+  [key default]
+  (let [id     (use-id)
+        state  (mf/use-state (get @storage key default))
+        stream (mf/with-memo []
+                 (->> mbc/stream
+                      (rx/filter #(= (:type %) key))
+                      (rx/filter #(not= (:id %) id))
+                      (rx/map deref)))]
+
+    (mf/with-effect [@state key]
+      (mbc/emit! id key @state)
+      (swap! storage assoc key @state))
+
+    (use-stream stream (partial reset! state))
+
+    state))

frontend/src/app/main/ui/hooks/resize.cljs

@@ -8,6 +8,7 @@
   (:require
    [app.common.geom.point :as gpt]
    [app.common.logging :as log]
+   [app.common.spec :as us]
    [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.util.dom :as dom]
@@ -73,43 +74,38 @@
 
 (defn use-resize-observer
   [callback]
-  (assert (some? callback))
+  (us/assert! (some? callback) "the `callback` is mandatory")
 
   (let [prev-val-ref (mf/use-ref nil)
-        current-observer-ref (mf/use-ref nil)
+        observer-ref (mf/use-ref nil)
-
+        callback     (hooks/use-ref-callback callback)
-        callback-ref (hooks/use-update-var {:callback callback})
 
         ;; We use the ref as a callback when the dom node is ready (or change)
-        node-ref
+        node-ref     (mf/use-fn
-        (mf/use-callback
                       (fn [^js node]
                         (when (some? node)
-             (let [^js current-observer (mf/ref-val current-observer-ref)
+                          (let [^js observer (mf/ref-val observer-ref)
                                 ^js prev-val (mf/ref-val prev-val-ref)]
 
-               (when (and (not= prev-val node) (some? current-observer))
+                            (when (and (not= prev-val node) (some? observer))
                               (log/debug :action "disconnect" :js/prev-val prev-val :js/node node)
-                 (.disconnect current-observer)
+                              (.disconnect observer)
-                 (mf/set-ref-val! current-observer-ref nil))
+                              (mf/set-ref-val! observer-ref nil))
 
                             (when (and (not= prev-val node) (some? node))
-                 (let [^js observer
+                              (let [^js observer (js/ResizeObserver.
-                       (js/ResizeObserver.
+                                                  #(callback last-resize-type (dom/get-client-size node)))]
-                        #(let [callback (get @callback-ref :callback)]
+                                (mf/set-ref-val! observer-ref observer)
-                           (callback last-resize-type (dom/get-client-size node))))]
-                   (mf/set-ref-val! current-observer-ref observer)
                                 (log/debug :action "observe"  :js/node node :js/observer observer)
                                 (.observe observer node))))
 
                           (mf/set-ref-val! prev-val-ref node))))]
 
-    (mf/use-effect
+    (mf/with-effect []
-     (fn []
       ;; On dismount we need to disconnect the current observer
       (fn []
-         (let [current-observer (mf/ref-val current-observer-ref)]
+        (when-let [observer (mf/ref-val observer-ref)]
-           (when (some? current-observer)
           (log/debug :action "disconnect")
-             (.disconnect current-observer))))))
+          (.disconnect ^js observer))))
+
     node-ref))

frontend/src/app/main/ui/workspace/colorpalette.cljs

@@ -6,11 +6,13 @@
 
 (ns app.main.ui.workspace.colorpalette
   (:require
+   [app.common.data.macros :as dm]
    [app.main.data.workspace.colors :as mdc]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.main.ui.hooks :as h]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -19,36 +21,21 @@
    [app.util.object :as obj]
    [cuerdas.core :as str]
    [goog.events :as events]
-   [okulary.core :as l]
    [rumext.alpha :as mf]))
 
-;; --- Refs
-
-(def palettes-ref
-  (-> (l/in [:library :palettes])
-      (l/derived st/state)))
-
-(def selected-palette-ref
-  (-> (l/in [:workspace-global :selected-palette])
-      (l/derived st/state)))
-
-(def selected-palette-size-ref
-  (-> (l/in [:workspace-global :selected-palette-size])
-      (l/derived st/state)))
-
 ;; --- Components
-(mf/defc palette-item
-  [{:keys [color]}]
-  (let [select-color
-        (fn [event]
-          (st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))]
 
+(mf/defc palette-item
+  {::mf/wrap [mf/memo]}
+  [{:keys [color]}]
+  (letfn [(select-color [event]
+            (st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))]
     [:div.color-cell {:on-click select-color}
      [:& cb/color-bullet {:color color}]
      [:& cb/color-name {:color color}]]))
 
 (mf/defc palette
-  [{:keys [current-colors recent-colors file-colors shared-libs selected]}]
+  [{:keys [current-colors recent-colors file-colors shared-libs selected on-select]}]
   (let [state      (mf/use-state {:show-menu false})
 
         width      (:width @state 0)
@@ -97,54 +84,66 @@
          (fn [_]
            (let [dom   (mf/ref-val container)
                  width (obj/get dom "clientWidth")]
-             (swap! state assoc :width width))))]
+             (swap! state assoc :width width))))
 
+        on-select-palette
+        (mf/use-fn
+         (mf/deps on-select)
+         (fn [event]
+           (let [node  (dom/get-current-target event)
+                 value (dom/get-attribute node "data-palette")]
+             (on-select (if (or (= "file" value) (= "recent" value))
+                          (keyword value)
+                          (parse-uuid value))))))]
 
     (mf/use-layout-effect
      #(let [dom   (mf/ref-val container)
             width (obj/get dom "clientWidth")]
         (swap! state assoc :width width)))
 
-    (mf/use-effect
+    (mf/with-effect []
-     #(let [key1 (events/listen js/window "resize" on-resize)]
+      (let [key1 (events/listen js/window "resize" on-resize)]
-        (fn []
+        #(events/unlistenByKey key1)))
-          (events/unlistenByKey key1))))
 
     [:div.color-palette {:ref parent-ref
                          :class (dom/classnames :no-text (< size 72))
-                         :style #js {"--height" (str size "px")
+                         :style #js {"--height" (dm/str size "px")
-                                     "--bullet-size" (str (if (< size 72) (- size 15) (- size 30)) "px")}}
+                                     "--bullet-size" (dm/str (if (< size 72) (- size 15) (- size 30)) "px")}}
      [:div.resize-area {:on-pointer-down on-pointer-down
                         :on-lost-pointer-capture on-lost-pointer-capture
                         :on-mouse-move on-mouse-move}]
      [:& dropdown {:show (:show-menu @state)
                    :on-close #(swap! state assoc :show-menu false)}
       [:ul.workspace-context-menu.palette-menu
-       (for [[idx cur-library] (map-indexed vector (vals shared-libs))]
+       (for [{:keys [data id] :as library} (vals shared-libs)]
-         (let [colors (-> cur-library (get-in [:data :colors]) vals)]
+         (let [colors (-> data :colors vals)]
            [:li.palette-library
-            {:key (str "library-" idx)
+            {:key (dm/str "library-" id)
-             :on-click #(st/emit! (mdc/change-palette-selected (:id cur-library)))}
+             :on-click on-select-palette
-            (when (= selected (:id cur-library)) i/tick)
+             :data-palette (dm/str id)}
-            [:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count colors)))]
+            (when (= selected id) i/tick)
+            [:div.library-name (str (:name library) " " (str/ffmt "(%)" (count colors)))]
             [:div.color-sample
-             (for [[idx {:keys [color]}] (map-indexed vector (take 7 colors))]
+             (for [[i {:keys [color]}] (map-indexed vector (take 7 colors))]
-               [:& cb/color-bullet {:key (str "color-" idx)
+               [:& cb/color-bullet {:key (dm/str "color-" i)
                                     :color color}])]]))
 
 
        [:li.palette-library
-        {:on-click #(st/emit! (mdc/change-palette-selected :file))}
+        {:on-click on-select-palette
+         :data-palette "file"}
         (when (= selected :file) i/tick)
-        [:div.library-name (str (tr "workspace.libraries.colors.file-library")
+        [:div.library-name (dm/str
-                                (str/format " (%s)" (count file-colors)))]
+                            (tr "workspace.libraries.colors.file-library")
+                            (str/ffmt " (%)" (count file-colors)))]
         [:div.color-sample
-         (for [[idx color] (map-indexed vector (take 7 (vals file-colors))) ]
+         (for [[i color] (map-indexed vector (take 7 (vals file-colors))) ]
-           [:& cb/color-bullet {:key (str "color-" idx)
+           [:& cb/color-bullet {:key (dm/str "color-" i)
                                 :color color}])]]
 
        [:li.palette-library
-        {:on-click #(st/emit! (mdc/change-palette-selected :recent))}
+        {:on-click on-select-palette
+         :data-palette "recent"}
         (when (= selected :recent) i/tick)
         [:div.library-name (str (tr "workspace.libraries.colors.recent-colors")
                                 (str/format " (%s)" (count recent-colors)))]
@@ -178,34 +177,32 @@
   (let [recent-colors (mf/deref refs/workspace-recent-colors)
         file-colors   (mf/deref refs/workspace-file-colors)
         shared-libs   (mf/deref refs/workspace-libraries)
-        selected      (or (mf/deref selected-palette-ref) :recent)
+        selected      (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
-        current-library-colors (mf/use-state [])]
 
-    (mf/use-effect
+        colors        (mf/use-state [])
-     (mf/deps selected)
+        on-select     (mf/use-fn #(reset! selected %))]
+
+    (mf/with-effect [@selected]
       (fn []
-       (reset! current-library-colors
+        (reset! colors
                 (into []
                       (cond
-                       (= selected :recent) (reverse recent-colors)
+                        (= @selected :recent) (reverse recent-colors)
-                       (= selected :file)   (->> (vals file-colors) (sort-by :name))
+                        (= @selected :file)   (->> (vals file-colors) (sort-by :name))
-                       :else                (->> (library->colors shared-libs selected) (sort-by :name)))))))
+                        :else                 (->> (library->colors shared-libs @selected) (sort-by :name)))))))
 
-    (mf/use-effect
+    (mf/with-effect [recent-colors @selected]
-     (mf/deps recent-colors)
+      (when (= @selected :recent)
-     (fn []
+        (reset! colors (reverse recent-colors))))
-       (when (= selected :recent)
-         (reset! current-library-colors (reverse recent-colors)))))
 
-    (mf/use-effect
+    (mf/with-effect [file-colors @selected]
-     (mf/deps file-colors)
+      (when (= @selected :file)
-     (fn []
+        (reset! colors (into [] (->> (vals file-colors)
-       (when (= selected :file)
+                                     (sort-by :name))))))
-         (reset! current-library-colors (into [] (->> (vals file-colors)
-                                                      (sort-by :name)))))))
 
-    [:& palette {:current-colors @current-library-colors
+    [:& palette {:current-colors @colors
                  :recent-colors recent-colors
                  :file-colors file-colors
                  :shared-libs shared-libs
-                 :selected selected}]))
+                 :selected @selected
+                 :on-select on-select}]))

frontend/src/app/main/ui/workspace/colorpicker.cljs

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.workspace.colorpicker
   (:require
-   [app.common.colors :as clr]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.colors :as dc]
    [app.main.data.workspace.libraries :as dwl]
@@ -41,171 +40,74 @@
 (def viewport
   (l/derived :vport refs/workspace-local))
 
-(def editing-spot-state-ref
-  (l/derived :editing-stop refs/workspace-global))
-
-(def current-gradient-ref
-  (l/derived :current-gradient refs/workspace-global))
-
 ;; --- Color Picker Modal
 
-(defn color->components [value opacity]
-  (let [value (if (uc/hex? value) value clr/black)
-        [r g b] (uc/hex->rgb value)
-        [h s v] (uc/hex->hsv value)]
-
-    {:hex (or value "000000")
-     :alpha (or opacity 1)
-     :r r :g g :b b
-     :h h :s s :v v}))
-
-(defn data->state [{:keys [color opacity gradient]}]
-  (let [type (cond
-               (nil? gradient) :color
-               (= :linear (:type gradient)) :linear-gradient
-               (= :radial (:type gradient)) :radial-gradient)
-
-        parse-stop (fn [{:keys [offset color opacity]}]
-                     (vector offset (color->components color opacity)))
-
-        stops (when gradient
-                (map parse-stop (:stops gradient)))
-
-        current-color (if (nil? gradient)
-                        (color->components color opacity)
-                        (-> stops first second))
-
-        gradient-data (select-keys gradient [:start-x :start-y
-                                             :end-x :end-y
-                                             :width])]
-
-    (cond-> {:type type
-             :current-color current-color}
-      gradient (assoc :gradient-data gradient-data)
-      stops    (assoc :stops (into {} stops))
-      stops    (assoc :editing-stop (-> stops first first)))))
-
-(defn state->data [{:keys [type current-color stops gradient-data]}]
-  (if (= type :color)
-    {:color (:hex current-color)
-     :opacity (:alpha current-color)}
-
-    (let [gradient-type (case type
-                          :linear-gradient :linear
-                          :radial-gradient :radial)
-          parse-stop (fn [[offset {:keys [hex alpha]}]]
-                       (hash-map :offset offset
-                                 :color hex
-                                 :opacity alpha))]
-      {:gradient (-> {:type gradient-type
-                      :stops (mapv parse-stop stops)}
-                     (merge gradient-data))})))
-
-(defn create-gradient-data [type]
-  {:start-x 0.5
-   :start-y (if (= type :linear-gradient) 0.0 0.5)
-   :end-x   0.5
-   :end-y   1
-   :width  1.0})
-
 (mf/defc colorpicker
   [{:keys [data disable-gradient disable-opacity on-change on-accept]}]
-  (let [state (mf/use-state (data->state data))
+  (let [state               (mf/deref refs/colorpicker)
-        active-tab (mf/use-state :ramp #_:harmony #_:hsva)
+        node-ref            (mf/use-ref)
-
-        ref-picker (mf/use-ref)
-
-        dirty? (mf/use-var false)
-        last-color (mf/use-var data)
 
+        ;; TODO: I think we need to put all this picking state under
+        ;; the same object for avoid creating adhoc refs for each
+        ;; value
         picking-color?      (mf/deref picking-color?)
         picked-color        (mf/deref picked-color)
         picked-color-select (mf/deref picked-color-select)
 
-        editing-spot-state (mf/deref editing-spot-state-ref)
+        current-color       (:current-color state)
-        current-gradient (mf/deref current-gradient-ref)
 
-        current-color (:current-color @state)
+        active-tab          (mf/use-state :ramp #_:harmony #_:hsva)
-
+        set-ramp-tab!       (mf/use-fn #(reset! active-tab :ramp))
-        change-tab
+        set-harmony-tab!    (mf/use-fn #(reset! active-tab :harmony))
-        (fn [tab]
+        set-hsva-tab!       (mf/use-fn #(reset! active-tab :hsva))
-          #(reset! active-tab tab))
 
         handle-change-color
-        (fn [changes]
+        (mf/use-fn #(st/emit! (dc/update-colorpicker-color %)))
-          (let [editing-stop (:editing-stop @state)]
-            (swap! state #(cond-> %
-                            :always
-                            (update :current-color merge changes)
-
-                            (not editing-stop)
-                            (-> (assoc :type :color)
-                                (dissoc :gradient-data :stops :editing-stops))
-
-                            editing-stop
-                            (update-in [:stops editing-stop] merge changes)))
-            (reset! dirty? true)))
 
         handle-click-picker
+        (mf/use-fn
+         (mf/deps picking-color?)
          (fn []
            (if picking-color?
              (do (modal/disallow-click-outside!)
                  (st/emit! (dc/stop-picker)))
              (do (modal/allow-click-outside!)
-                (st/emit! (dc/start-picker)))))
+                 (st/emit! (dc/start-picker))))))
 
         handle-change-stop
+        (mf/use-fn
          (fn [offset]
-          (when-let [offset-color (get-in @state [:stops offset])]
+           (st/emit! (dc/select-colorpicker-gradient-stop offset))))
-            (swap! state assoc
-                   :current-color offset-color
-                   :editing-stop offset)
-
-            (st/emit! (dc/select-gradient-stop offset))))
 
         on-select-library-color
+        (mf/use-fn
          (fn [color]
-          (let [editing-stop (:editing-stop @state)
+           (on-change color)))
-                is-gradient? (some? (:gradient color))]
-
-            (if is-gradient?
-              (st/emit! (dc/start-gradient (:gradient color)))
-              (st/emit! (dc/stop-gradient)))
-
-            (if (and (some? editing-stop) (not is-gradient?))
-              (handle-change-color (color->components (:color color) (:opacity color)))
-              (do (reset! dirty? false)
-                  (reset! state (-> (data->state color)
-                                    (assoc :editing-stop nil)))
-                  (on-change color)))))
-
 
         on-add-library-color
+        (mf/use-fn
+         (mf/deps state)
          (fn [_]
-          (st/emit! (dwl/add-color (state->data @state))))
+           (st/emit! (dwl/add-color (dc/get-color-from-colorpicker-state state)))))
 
-        on-activate-gradient
+        on-activate-linear-gradient
-        (fn [type]
+        (mf/use-fn #(st/emit! (dc/activate-colorpicker-gradient :linear-gradient)))
-          (fn []
+
-            (reset! dirty? true)
+        on-activate-radial-gradient
-            (if (= type (:type @state))
+        (mf/use-fn #(st/emit! (dc/activate-colorpicker-gradient :radial-gradient)))]
-              (do
+
-                (swap! state assoc :type :color)
+    ;; Initialize colorpicker state
-                (swap! state dissoc :editing-stop :stops :gradient-data)
+    (mf/with-effect []
-                (st/emit! (dc/stop-gradient)))
+      (st/emit! (dc/initialize-colorpicker on-change))
-              (let [gradient-data (create-gradient-data type)]
+      (partial st/emit! (dc/finalize-colorpicker)))
-                (swap! state assoc :type type :gradient-data gradient-data)
+
-                (when (not (:stops @state))
+    ;; Update colorpicker with external color changes
-                  (swap! state assoc
+    (mf/with-effect [data]
-                         :editing-stop 0
+      (st/emit! (dc/update-colorpicker data)))
-                         :stops {0 (:current-color @state)
-                                 1 (-> (:current-color @state)
-                                       (assoc :alpha 0))}))))))]
 
     ;; Updates the CSS color variable when there is a change in the color
-    (mf/use-effect
+    (mf/with-effect [current-color]
-     (mf/deps current-color)
+      (let [node (mf/ref-val node-ref)
-     (fn [] (let [node (mf/ref-val ref-picker)
             {:keys [r g b h v]} current-color
             rgb [r g b]
             hue-rgb (uc/hsv->rgb [h 1.0 255])
@@ -220,19 +122,10 @@
         (dom/set-css-property! node "--color" (str/join ", " rgb))
         (dom/set-css-property! node "--hue-rgb" (str/join ", " hue-rgb))
         (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
-              (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to)))))
+        (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))
-
-    ;; When closing the modal we update the recent-color list
-    (mf/use-effect
-     #(fn []
-        (st/emit! (dc/stop-picker))
-        (when @last-color
-          (st/emit! (dwl/add-recent-color @last-color)))))
 
     ;; Updates color when used el pixel picker
-    (mf/use-effect
+    (mf/with-effect [picking-color? picked-color picked-color-select]
-     (mf/deps picking-color? picked-color picked-color-select)
-     (fn []
       (when (and picking-color? picked-color picked-color-select)
         (let [[r g b alpha] picked-color
               hex (uc/rgb->hex [r g b])
@@ -240,48 +133,9 @@
           (handle-change-color {:hex hex
                                 :r r :g g :b b
                                 :h h :s s :v v
-                                 :alpha (/ alpha 255)})))))
+                                :alpha (/ alpha 255)}))))
 
-    ;; Changes when another gradient handler is selected
+    [:div.colorpicker {:ref node-ref}
-    (mf/use-effect
-     (mf/deps editing-spot-state)
-     #(when (not= editing-spot-state (:editing-stop @state))
-        (handle-change-stop (or editing-spot-state 0))))
-
-    ;; Changes on the viewport when moving a gradient handler
-    (mf/use-effect
-     (mf/deps current-gradient)
-     (fn []
-       (when current-gradient
-         (let [gradient-data (select-keys current-gradient [:start-x :start-y
-                                                            :end-x :end-y
-                                                            :width])]
-           (when (not= (:gradient-data @state) gradient-data)
-             (reset! dirty? true)
-             (swap! state assoc :gradient-data gradient-data))))))
-
-    ;; Check if we've opened a color with gradient
-    (mf/use-effect
-     (fn []
-       (when (:gradient data)
-         (st/emit! (dc/start-gradient (:gradient data))))
-
-       ;; on-unmount we stop the handlers
-       #(st/emit! (dc/stop-gradient))))
-
-    ;; Send the properties to the store
-    (mf/use-effect
-     (mf/deps @state)
-     (fn []
-       (when @dirty?
-         (let [color (state->data @state)]
-           (reset! dirty? false)
-           (reset! last-color color)
-           (when (:gradient color)
-             (st/emit! (dc/start-gradient (:gradient color))))
-           (on-change color)))))
-
-    [:div.colorpicker {:ref ref-picker}
      [:div.colorpicker-content
       [:div.top-actions
        [:button.picker-btn
@@ -292,60 +146,71 @@
        (when (not disable-gradient)
          [:div.gradients-buttons
           [:button.gradient.linear-gradient
-           {:on-click (on-activate-gradient :linear-gradient)
+           {:on-click on-activate-linear-gradient
-            :class (when (= :linear-gradient (:type @state)) "active")}]
+            :class (when (= :linear-gradient (:type state)) "active")}]
 
           [:button.gradient.radial-gradient
-           {:on-click (on-activate-gradient :radial-gradient)
+           {:on-click on-activate-radial-gradient
-            :class (when (= :radial-gradient (:type @state)) "active")}]])]
+            :class (when (= :radial-gradient (:type state)) "active")}]])]
 
-      [:& gradients {:type (:type @state)
+
-                     :stops (:stops @state)
+      (when (or (= (:type state) :linear-gradient)
-                     :editing-stop (:editing-stop @state)
+                (= (:type state) :radial-gradient))
-                     :on-select-stop handle-change-stop}]
+        [:& gradients
+         {:stops (:stops state)
+          :editing-stop (:editing-stop state)
+          :on-select-stop handle-change-stop}])
 
       [:div.colorpicker-tabs
        [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
         {:class (when (= @active-tab :ramp) "active")
          :alt (tr "workspace.libraries.colors.rgba")
-         :on-click (change-tab :ramp)} i/picker-ramp]
+         :on-click set-ramp-tab!} i/picker-ramp]
        [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
         {:class (when (= @active-tab :harmony) "active")
          :alt (tr "workspace.libraries.colors.rgb-complementary")
-         :on-click (change-tab :harmony)} i/picker-harmony]
+         :on-click set-harmony-tab!} i/picker-harmony]
        [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
         {:class (when (= @active-tab :hsva) "active")
          :alt (tr "workspace.libraries.colors.hsv")
-         :on-click (change-tab :hsva)} i/picker-hsv]]
+         :on-click set-hsva-tab!} i/picker-hsv]]
 
       (if picking-color?
         [:div.picker-detail-wrapper
          [:div.center-circle]
          [:canvas#picker-detail {:width 200 :height 160}]]
         (case @active-tab
-          :ramp [:& ramp-selector {:color current-color
+          :ramp
+          [:& ramp-selector
+           {:color current-color
             :disable-opacity disable-opacity
             :on-change handle-change-color
             :on-start-drag #(st/emit! (dwu/start-undo-transaction))
             :on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
-          :harmony [:& harmony-selector {:color current-color
+          :harmony
+          [:& harmony-selector
+           {:color current-color
             :disable-opacity disable-opacity
             :on-change handle-change-color
             :on-start-drag #(st/emit! (dwu/start-undo-transaction))
             :on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
-          :hsva [:& hsva-selector {:color current-color
+          :hsva
+          [:& hsva-selector
+           {:color current-color
             :disable-opacity disable-opacity
             :on-change handle-change-color
             :on-start-drag #(st/emit! (dwu/start-undo-transaction))
             :on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
           nil))
 
-      [:& color-inputs {:type (if (= @active-tab :hsva) :hsv :rgb)
+      [:& color-inputs
+       {:type (if (= @active-tab :hsva) :hsv :rgb)
         :disable-opacity disable-opacity
         :color current-color
         :on-change handle-change-color}]
 
-      [:& libraries {:current-color current-color
+      [:& libraries
+       {:current-color current-color
         :disable-gradient disable-gradient
         :disable-opacity disable-opacity
         :on-select-color on-select-library-color
@@ -355,7 +220,7 @@
         [:div.actions
          [:button.btn-primary.btn-large
           {:on-click (fn []
-                       (on-accept (state->data @state))
+                       (on-accept (dc/get-color-from-colorpicker-state state))
                        (modal/hide!))}
           (tr "workspace.libraries.colors.save-color")]])]]))
 

frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs

@@ -11,13 +11,17 @@
    [app.util.dom :as dom]
    [rumext.alpha :as mf]))
 
+(defn parse-hex
+  [val]
+  (if (= (first val) \#)
+    val
+    (str \# val)))
+
 (mf/defc color-inputs [{:keys [type color disable-opacity on-change]}]
   (let [{red :r green :g blue :b
          hue :h saturation :s value :v
          hex :hex alpha :alpha} color
 
-        parse-hex (fn [val] (if (= (first val) \#) val (str \# val)))
-
         refs {:hex   (mf/use-ref nil)
               :r     (mf/use-ref nil)
               :g     (mf/use-ref nil)

frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs

@@ -6,32 +6,31 @@
 
 (ns app.main.ui.workspace.colorpicker.gradients
   (:require
+   [app.common.data.macros :as dm]
    [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
-(defn gradient->string [stops]
+(defn- format-rgba
-  (let [format-stop
+  [{:keys [r g b alpha offset]}]
-        (fn [[offset {:keys [r g b alpha]}]]
+  (str/ffmt "rgba(%1, %2, %3, %4) %5%%" r g b alpha (* offset 100)))
-          (str/fmt "rgba(%s, %s, %s, %s) %s"
-                   r g b alpha (str (* offset 100) "%")))
 
-        gradient-css (str/join "," (map format-stop stops))]
+(defn- gradient->string [stops]
-    (str/fmt "linear-gradient(90deg, %s)" gradient-css)))
+  (let [gradient-css (str/join ", " (map format-rgba stops))]
+    (str/ffmt "linear-gradient(90deg, %1)" gradient-css)))
 
-(mf/defc gradients [{:keys [type stops editing-stop on-select-stop]}]
+(mf/defc gradients
-  (when (#{:linear-gradient :radial-gradient} type)
+  [{:keys [stops editing-stop on-select-stop]}]
   [:div.gradient-stops
    [:div.gradient-background-wrapper
     [:div.gradient-background {:style {:background (gradient->string stops)}}]]
 
    [:div.gradient-stop-wrapper
-      (for [[offset value] stops]
+    (for [{:keys [offset hex r g b alpha] :as value} stops]
       [:div.gradient-stop
        {:class (when (= editing-stop offset) "active")
         :on-click (partial on-select-stop offset)
-          :style {:left (str (* offset 100) "%")}}
+        :style {:left (dm/str (* offset 100) "%")}
+        :key (dm/str offset)}
 
-         (let [{:keys [hex r g b alpha]} value]
-           [:*
        [:div.gradient-stop-color {:style {:background-color hex}}]
-            [:div.gradient-stop-alpha {:style {:background-color (str/format "rgba(%s, %s, %s, %s)" r g b alpha)}}]])])]]))
+       [:div.gradient-stop-alpha {:style {:background-color (str/ffmt "rgba(%1, %2, %3, %4)" r g b alpha)}}]])]])

frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs

@@ -6,90 +6,85 @@
 
 (ns app.main.ui.workspace.colorpicker.libraries
   (:require
-   [app.common.uuid :refer [uuid]]
+   [app.common.data.macros :as dm]
    [app.main.data.workspace.colors :as dc]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :refer [color-bullet]]
+   [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [okulary.core :as l]
    [rumext.alpha :as mf]))
 
-(def selected-palette-ref
-  (-> (l/in [:workspace-global :selected-palette-colorpicker])
-      (l/derived st/state)))
-
 (mf/defc libraries
   [{:keys [on-select-color on-add-library-color disable-gradient disable-opacity]}]
-  (let [selected-library       (or (mf/deref selected-palette-ref) :recent)
+  (let [selected         (h/use-shared-state dc/colorpicker-selected-broadcast-key :recent)
-        current-library-colors (mf/use-state [])
+        current-colors   (mf/use-state [])
 
         shared-libs      (mf/deref refs/workspace-libraries)
         file-colors      (mf/deref refs/workspace-file-colors)
         recent-colors    (mf/deref refs/workspace-recent-colors)
 
-        parse-selected
+        on-library-change
-        (fn [selected-str]
+        (mf/use-fn
-          (if (#{"recent" "file"} selected-str)
+         (fn [event]
-            (keyword selected-str)
+           (let [val (dom/get-target-val event)]
-            (uuid selected-str)))
+             (reset! selected
+                     (if (or (= val "recent")
+                             (= val "file"))
+                       (keyword val)
+                       (parse-uuid val))))))
 
-        check-valid-color? (fn [color]
+        check-valid-color?
+        (fn [color]
           (and (or (not disable-gradient) (not (:gradient color)))
                (or (not disable-opacity) (= 1 (:opacity color)))))]
 
     ;; Load library colors when the select is changed
-    (mf/use-effect
+    (mf/with-effect [@selected recent-colors file-colors]
-     (mf/deps selected-library)
+      (let [colors (cond
-     (fn []
+                     (= @selected :recent)
-       (let [mapped-colors
-             (cond
-               (= selected-library :recent)
                      ;; The `map?` check is to keep backwards compatibility. We transform from string to map
-               (map #(if (map? %) % (hash-map :color %)) (reverse (or recent-colors [])))
+                     (map #(if (map? %) % {:color %}) (reverse (or recent-colors [])))
 
-               (= selected-library :file)
+                     (= @selected :file)
                      (vals file-colors)
 
                      :else ;; Library UUID
-               (->> (get-in shared-libs [selected-library :data :colors])
+                     (as-> @selected file-id
+                       (->> (get-in shared-libs [file-id :data :colors])
                             (vals)
-                    (map #(merge % {:file-id selected-library}))))]
+                            (map #(assoc % :file-id file-id)))))]
 
-         (reset! current-library-colors (into [] (filter check-valid-color?) mapped-colors)))))
+        (reset! current-colors (into [] (filter check-valid-color?) colors))))
 
     ;; If the file colors change and the file option is selected updates the state
-    (mf/use-effect
+    (mf/with-effect [file-colors]
-     (mf/deps file-colors)
+      (when (= @selected :file)
-     (fn [] (when (= selected-library :file)
         (let [colors (vals file-colors)]
-                (reset! current-library-colors (into [] (filter check-valid-color?) colors))))))
+          (reset! current-colors (into [] (filter check-valid-color?) colors)))))
 
     [:div.libraries
-     [:select {:on-change (fn [e]
+     [:select {:on-change on-library-change :value (name @selected)}
-                            (when-let [val (parse-selected (dom/get-target-val e))]
-                              (st/emit! (dc/change-palette-selected-colorpicker val))))
-               :value (name selected-library)}
       [:option {:value "recent"} (tr "workspace.libraries.colors.recent-colors")]
       [:option {:value "file"} (tr "workspace.libraries.colors.file-library")]
 
       (for [[_ {:keys [name id]}] shared-libs]
-        [:option {:key id
+        [:option {:key id :value id} name])]
-                  :value id} name])]
 
      [:div.selected-colors
-      (when (= selected-library :file)
+      (when (= @selected :file)
         [:div.color-bullet.button.plus-button {:style {:background-color "var(--color-white)"}
                                                :on-click on-add-library-color}
          i/plus])
 
       [:div.color-bullet.button {:style {:background-color "var(--color-white)"}
-                                 :on-click #(st/emit! (dc/show-palette selected-library))}
+                                 :on-click #(st/emit! (dc/show-palette @selected))}
        i/palette]
 
-      (for [[idx color] (map-indexed vector @current-library-colors)]
+      (for [[idx color] (map-indexed vector @current-colors)]
-        [:& color-bullet {:key (str "color-" idx)
+        [:& color-bullet
+         {:key (dm/str "color-" idx)
           :color color
-                          :on-click #(on-select-color color)}])]]))
+          :on-click on-select-color}])]]))

frontend/src/app/main/ui/workspace/shapes/text/editor.cljs

@@ -153,10 +153,7 @@
            (let [old-state (mf/ref-val prev-value)]
              (if (and (some? state) (some? old-state))
                (let [block-changes       (ted/get-content-changes old-state state)
-
+                     prev-data           (ted/get-editor-current-inline-styles old-state)
-                     prev-data (-> (ted/get-editor-current-inline-styles old-state)
-                                   (dissoc :text-align :text-direction))
-
                      block-to-setup      (get-blocks-to-setup block-changes)
                      block-to-add-styles (get-blocks-to-add-styles block-changes)]
                  (-> state
@@ -211,11 +208,12 @@
 
         handle-pasted-text
         (fn [text _ _]
-          (let [style (ted/get-editor-current-inline-styles state)
+          (let [current-block-styles (ted/get-editor-current-block-data state)
+                inline-styles        (ted/get-editor-current-inline-styles state)
+                style                (merge current-block-styles inline-styles)
                 state                (-> (ted/insert-text state text style)
                                          (handle-change))]
             (st/emit! (dwt/update-editor-state shape state)))
-
           "handled")]
 
     (mf/use-layout-effect on-mount)

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -19,7 +19,7 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [clojure.set :refer [union]]
+   [clojure.set :refer [rename-keys union]]
    [rumext.alpha :as mf]))
 
 (def measure-attrs
@@ -46,10 +46,26 @@
    :svg-raw #{:size :position :rotation}
    :text    #{:size :position :rotation}})
 
+(defn select-measure-keys
+  "Consider some shapes can be drawn from bottom to top or from left to right"
+  [shape]
+  (let [shape (cond
+                (and (:flip-x shape) (:flip-y shape))
+                (rename-keys shape {:r1 :r3 :r2 :r4 :r3 :r1 :r4 :r2})
+
+                (:flip-x shape)
+                (rename-keys shape {:r1 :r2 :r2 :r1 :r3 :r4 :r4 :r3})
+
+                (:flip-y shape)
+                (rename-keys shape {:r1 :r4 :r2 :r3 :r3 :r2 :r4 :r1})
+
+                :else
+                shape)]
+    (select-keys shape measure-attrs)))
+
 ;; -- User/drawing coords
 (mf/defc measures-menu
   [{:keys [ids ids-with-children values type all-types shape] :as props}]
-
   (let [options (if (= type :multiple)
                   (reduce #(union %1 %2) (map #(get type->options %) all-types))
                   (get type->options type))

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.rows.color-row
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.pages :as cp]
    [app.main.data.modal :as modal]
    [app.main.refs :as refs]
@@ -22,34 +23,8 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.alpha :as mf]))
 
-(defn color-picker-callback
+(defn opacity->string
-  [color disable-gradient disable-opacity handle-change-color handle-open handle-close]
+  [opacity]
-  (fn [event]
-    (let [color
-          (cond
-            (uc/multiple? color)
-            {:color cp/default-color
-             :opacity 1}
-
-            (= :multiple (:opacity color))
-            (assoc color :opacity 1)
-
-            :else
-            color)
-
-          x (.-clientX event)
-          y (.-clientY event)
-          props {:x x
-                 :y y
-                 :disable-gradient disable-gradient
-                 :disable-opacity disable-opacity
-                 :on-change handle-change-color
-                 :on-close handle-close
-                 :data color}]
-      (handle-open color)
-      (modal/show! :colorpicker props))))
-
-(defn opacity->string [opacity]
   (if (= opacity :multiple)
     ""
     (str (-> opacity
@@ -57,7 +32,8 @@
              (* 100)
              (fmt/format-number)))))
 
-(defn remove-multiple [v]
+(defn remove-multiple
+  [v]
   (if (= v :multiple) nil v))
 
 (mf/defc color-row
@@ -68,64 +44,88 @@
         file-colors     (mf/deref refs/workspace-file-colors)
         shared-libs     (mf/deref refs/workspace-libraries)
         hover-detach    (mf/use-state false)
-
+        on-change       (h/use-ref-callback on-change)
-        on-change-var (h/use-update-var {:fn on-change})
-
         src-colors      (if (= (:file-id color) current-file-id)
                           file-colors
-                     (get-in shared-libs [(:file-id color) :data :colors]))
+                          (dm/get-in shared-libs [(:file-id color) :data :colors]))
 
-        color-name (get-in src-colors [(:id color) :name])
+        color-name       (dm/get-in src-colors [(:id color) :name])
 
-        parse-color (fn [color]
+        parse-color
-                      (-> color
+        (mf/use-fn
-                          (update :color #(or % (:value color)))))
+         (fn [color]
+           (update color :color #(or % (:value color)))))
 
-        detach-value (fn []
+        detach-value
-                       (when on-detach (on-detach color)))
+        (mf/use-fn
+         (mf/deps on-detach color)
+         (fn []
+           (when on-detach
+             (on-detach color))))
 
-        change-value (fn [new-value]
+        handle-select
-                       (when (:fn @on-change-var) ((:fn @on-change-var) (-> color
+        (mf/use-fn
+         (mf/deps select-only color)
+         (fn []
+           (select-only color)))
+
+        handle-value-change
+        (mf/use-fn
+         (mf/deps color on-change)
+         (fn [new-value]
+           (on-change (-> color
                           (assoc :color new-value)
                           (dissoc :gradient)))))
 
-        change-opacity (fn [new-opacity]
+        handle-opacity-change
-                         (when (:fn @on-change-var) ((:fn @on-change-var) (assoc color
+        (mf/use-fn
-                                                           :opacity new-opacity
+         (mf/deps color on-change)
+         (fn [value]
+           (on-change (assoc color
+                             :opacity (/ value 100)
                              :id nil
                              :file-id nil))))
 
-        handle-pick-color (fn [color]
+        handle-click-color
-                            (when (:fn @on-change-var) ((:fn @on-change-var) (merge uc/empty-color color))))
+        (mf/use-fn
+         (mf/deps disable-gradient disable-opacity on-change on-close on-open)
+         (fn [color event]
+           (let [color (cond
+                         (uc/multiple? color)
+                         {:color cp/default-color
+                          :opacity 1}
 
-        handle-select (fn []
+                         (= :multiple (:opacity color))
-                        (select-only color))
+                         (assoc color :opacity 1)
 
-        handle-open (fn [color]
+                         :else
-                      (when on-open (on-open (merge uc/empty-color color))))
+                         color)
 
-        handle-close (fn [value opacity id file-id]
+                 {:keys [x y]} (dom/get-client-position event)
-                       (when on-close (on-close value opacity id file-id)))
 
-        handle-value-change (fn [new-value]
+                 props {:x x
-                              (-> new-value
+                        :y y
-                                  change-value))
+                        :disable-gradient disable-gradient
+                        :disable-opacity disable-opacity
+                        :on-change #(on-change (merge uc/empty-color %))
+                        :on-close (fn [value opacity id file-id]
+                                    (when on-close
+                                      (on-close value opacity id file-id)))
+                        :data color}]
 
-        handle-opacity-change (fn [value]
+             (when on-open
-                                (change-opacity (/ value 100)))
+               (on-open (merge uc/empty-color color)))
+
+             (modal/show! :colorpicker props))))
 
-        handle-click-color (color-picker-callback color
-                                                  disable-gradient
-                                                  disable-opacity
-                                                  handle-pick-color
-                                                  handle-open
-                                                  handle-close)
 
         prev-color (h/use-previous color)
 
         on-drop
+        (mf/use-fn
+         (mf/deps on-reorder)
          (fn [_ data]
-          (on-reorder (:index data)))
+           (on-reorder (:index data))))
 
         [dprops dref] (if (some? on-reorder)
                         (h/use-sortable
@@ -138,11 +138,9 @@
                                 :name (str "Color row" index)})
                         [nil nil])]
 
-    (mf/use-effect
+    (mf/with-effect [color prev-color]
-     (mf/deps color prev-color)
-     (fn []
       (when (not= prev-color color)
-         (modal/update-props! :colorpicker {:data (parse-color color)}))))
+        (modal/update-props! :colorpicker {:data (parse-color color)})))
 
     [:div.row-flex.color-data {:title title
                                :class (dom/classnames

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -21,7 +21,7 @@
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-attrs layout-container-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
-   [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu]]
    [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
    [app.main.ui.workspace.sidebar.options.menus.text :as ot]
@@ -198,7 +198,9 @@
                               ;; are present, with value nil if they are not present in the shape.
                               shape-values (merge
                                             (into {} (map #(vector % nil)) editable-attrs)
-                                             (select-keys shape editable-attrs))]
+                                            (cond
+                                              (= attr-group :measure) (select-measure-keys shape)
+                                              :else (select-keys shape editable-attrs)))]
                           [(conj ids id)
                            (merge-attrs values shape-values)])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs

@@ -12,7 +12,7 @@
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
-   [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
    [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
    [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
@@ -23,8 +23,7 @@
   [{:keys [shape] :as props}]
   (let [ids [(:id shape)]
         type (:type shape)
-
+        measure-values (select-measure-keys shape)
-        measure-values (select-keys shape measure-attrs)
         layer-values (select-keys shape layer-attrs)
         constraint-values (select-keys shape constraint-attrs)
         fill-values (select-keys shape fill-attrs)

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

@@ -19,7 +19,6 @@
    [app.util.dom :as dom]
    [beicon.core :as rx]
    [cuerdas.core :as str]
-   [okulary.core :as l]
    [rumext.alpha :as mf]))
 
 (def gradient-line-stroke-width 2)
@@ -32,12 +31,6 @@
 (def gradient-square-stroke-color "var(--color-white)")
 (def gradient-square-stroke-color-selected "var(--color-select)")
 
-(def editing-spot-ref
-  (l/derived (l/in [:workspace-global :editing-stop]) st/state))
-
-(def current-gradient-ref
-  (l/derived (l/in [:workspace-global :current-gradient]) st/state =))
-
 (mf/defc shadow [{:keys [id x y width height offset]}]
   [:filter {:id id
             :x x
@@ -130,24 +123,29 @@
   (let [moving-point (mf/use-var nil)
         angle (+ 90 (gpt/angle from-p to-p))
 
-        on-click (fn [position event]
+        on-click
+        (fn [position event]
           (dom/stop-propagation event)
           (dom/prevent-default event)
           (when (#{:from-p :to-p} position)
-                     (st/emit! (dc/select-gradient-stop (case position
+            (st/emit! (dc/select-colorpicker-gradient-stop
+                       (case position
                          :from-p 0
                          :to-p 1)))))
 
-        on-mouse-down (fn [position event]
+        on-mouse-down
+        (fn [position event]
           (dom/stop-propagation event)
           (dom/prevent-default event)
           (reset! moving-point position)
           (when (#{:from-p :to-p} position)
-                          (st/emit! (dc/select-gradient-stop (case position
+            (st/emit! (dc/select-colorpicker-gradient-stop
+                       (case position
                          :from-p 0
                          :to-p 1)))))
 
-        on-mouse-up (fn [_position event]
+        on-mouse-up
+        (fn [_position event]
           (dom/stop-propagation event)
           (dom/prevent-default event)
           (reset! moving-point nil))]
@@ -230,32 +228,19 @@
        :on-mouse-down (partial on-mouse-down :to-p)
        :on-mouse-up (partial on-mouse-up :to-p)}]]))
 
-
+(mf/defc gradient-handlers*
-(mf/defc gradient-handlers
+  [{:keys [zoom stops gradient editing-stop shape]}]
-  {::mf/wrap [mf/memo]}
+  (let [transform         (gsh/transform-matrix shape)
-  [{:keys [id zoom]}]
-  (let [current-change (mf/use-state {})
-        shape-ref (mf/use-memo (mf/deps id) #(refs/object-by-id id))
-        shape (mf/deref shape-ref)
-
-        gradient (mf/deref current-gradient-ref)
-        gradient (merge gradient @current-change)
-
-        editing-spot (mf/deref editing-spot-ref)
-
-        transform (gsh/transform-matrix shape)
         transform-inverse (gsh/inverse-transform-matrix shape)
 
         {:keys [x y width height] :as sr} (:selrect shape)
 
         [{start-color :color start-opacity :opacity}
-         {end-color :color end-opacity :opacity}] (:stops gradient)
+         {end-color :color end-opacity :opacity}] stops
 
         from-p (-> (gpt/point (+ x (* width (:start-x gradient)))
                               (+ y (* height (:start-y gradient))))
-
                    (gpt/transform transform))
-
         to-p   (-> (gpt/point (+ x (* width (:end-x gradient)))
                               (+ y (* height (:end-y gradient))))
                    (gpt/transform transform))
@@ -271,13 +256,12 @@
         width-p (gpt/add from-p width-v)
 
         change!
-        (mf/use-callback
+        (mf/use-fn
          (fn [changes]
-           (swap! current-change merge changes)
+           (st/emit! (dc/update-colorpicker-gradient changes))))
-           (st/emit! (dc/update-gradient changes))))
 
         on-change-start
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps transform-inverse width height)
          (fn [point]
            (let [point (gpt/transform point transform-inverse)
@@ -286,7 +270,7 @@
              (change! {:start-x start-x :start-y start-y}))))
 
         on-change-finish
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps transform-inverse width height)
          (fn [point]
            (let [point (gpt/transform point transform-inverse)
@@ -295,7 +279,7 @@
              (change! {:end-x end-x :end-y end-y}))))
 
         on-change-width
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps gradient-length width height)
          (fn [point]
            (let [scale-factor-y (/ gradient-length (/ height 2))
@@ -304,11 +288,8 @@
              (when (and norm-dist (d/num? norm-dist))
                (change! {:width norm-dist})))))]
 
-    (when (and gradient
-               (= id (:shape-id gradient))
-               (not= (:type shape) :text))
     [:& gradient-handler-transformed
-       {:editing editing-spot
+     {:editing editing-stop
       :from-p from-p
       :to-p to-p
       :width-p (when (= :radial (:type gradient)) width-p)
@@ -317,4 +298,25 @@
       :zoom zoom
       :on-change-start on-change-start
       :on-change-finish on-change-finish
-        :on-change-width on-change-width}])))
+      :on-change-width on-change-width}]))
+
+(mf/defc gradient-handlers
+  {::mf/wrap [mf/memo]}
+  [{:keys [id zoom]}]
+  (let [shape-ref    (mf/use-memo (mf/deps id) #(refs/object-by-id id))
+        shape        (mf/deref shape-ref)
+
+        state        (mf/deref refs/colorpicker)
+        gradient     (:gradient state)
+        stops        (:stops state)
+        editing-stop (:editing-stop state)]
+
+    (when (and (some? gradient)
+               (= id (:shape-id gradient))
+               (not= (:type shape) :text))
+      [:& gradient-handlers*
+       {:zoom zoom
+        :gradient gradient
+        :stops stops
+        :editing-stop editing-stop
+        :shape shape}])))

frontend/src/app/util/text_editor.cljs

@@ -72,10 +72,10 @@
 (defn get-editor-current-inline-styles
   [state]
   (if (impl/isCurrentEmpty state)
-    (let [block (impl/getCurrentBlock state)]
+    (get-editor-current-block-data state)
-      (get-editor-block-data block))
     (-> (.getCurrentInlineStyle ^js state)
-        (txt/styles-to-attrs))))
+        (txt/styles-to-attrs)
+        (dissoc :text-align :text-direction))))
 
 (defn update-editor-current-block-data
   [state attrs]
@@ -89,7 +89,8 @@
             (impl/updateBlockData state block-key (clj->js attrs))
 
             (let [attrs (-> (impl/getInlineStyle state block-key 0)
-                            (txt/styles-to-attrs))]
+                            (txt/styles-to-attrs)
+                            (dissoc :text-align :text-direction))]
               (impl/updateBlockData state block-key (clj->js attrs)))))
 
         state (impl/applyInlineStyle state (txt/attrs-to-styles attrs))

frontend/translations/ar.po

@@ -62,23 +62,23 @@ msgstr "سعيد برؤيتك مجددا!"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "تسجيل الدخول عبر Github"
+msgstr "Github"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "تسجيل الدخول عبر Gitlab"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "تسجيل الدخول عبر جوجل"
+msgstr "جوجل"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "تسجيل الدخول باستخدام LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "تسجيل الدخول باستخدام OpenID (SSO)"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/ca.po

@@ -65,23 +65,23 @@ msgstr "Ens agrada tornar a veure-vos!"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "Entra amb GitHub"
+msgstr "GitHub"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "Entra amb Gitlab"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "Entra amb Google"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Entra amb LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "Entra amb OpenID (SSO)"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/da.po

@@ -65,23 +65,23 @@ msgstr "Fedt at se dig igen!"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "Log på med Github"
+msgstr "Github"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "Log på med Gitlab"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "Log på med Google"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Log på med LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "Log på med OpenID (SSO)"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/de.po

@@ -66,23 +66,23 @@ msgstr "Schön, Sie wiederzusehen!"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "Anmelden mit GitHub"
+msgstr "GitHub"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "Einloggen mit Gitlab"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "Anmelden mit Google"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Anmelden mit LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "Anmelden mit OpenID (SSO)"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/el.po

@@ -60,15 +60,15 @@ msgstr "Χαίρομαι που σας ξαναδώ"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "Συνδεθείτε με το Github"
+msgstr "Github"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "Συνδεθείτε με το Gitlab"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Συνδεθείτε με το LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/en.po

@@ -75,11 +75,11 @@ msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Login with LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "OpenID Connect"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/es.po

@@ -78,11 +78,11 @@ msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Entrar con LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "OpenID Connect"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/fa.po

@@ -69,23 +69,23 @@ msgstr "خوشحالم که دوباره شما را می‌بینم!"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "ورود با گیتهاب"
+msgstr "گیتهاب"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "ورود با گیتلب"
+msgstr "گیتلب"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "ورود با گوگل"
+msgstr "گوگل"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "ورود با LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "ورود با OpenID"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/fr.po

@@ -66,23 +66,23 @@ msgstr "Ravi de vous revoir !"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "Se connecter via GitHub"
+msgstr "GitHub"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "Se connecter via GitLab"
+msgstr "GitLab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "Se connecter via Google"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Se connecter via LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "Se connecter via OpenID (SSO)"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/gl.po

@@ -73,11 +73,11 @@ msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Entrar con LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "OpenID Connect"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/he.po

@@ -75,11 +75,11 @@ msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "כניסה עם LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "OpenID Connect"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/id.po

@@ -69,23 +69,23 @@ msgstr "Senang bertemu denganmu lagi!"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "Masuk dengan Github"
+msgstr "Github"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "Masuk dengan Gitlab"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "Masuk dengan Google"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Masuk dengan LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "Masuk dengan OpenID (SSO)"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/lt.po

@@ -79,11 +79,11 @@ msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Prisijungti su LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "OpenID prisijungimas"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/ml.po

@@ -69,23 +69,23 @@ msgstr "നിങ്ങളെ വീണ്ടും കാണാൻ കഴിഞ
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "ഗിറ്റ്ഹബ്ബ് ഉപയോഗിച്ച് ലോഗിൻ ചെയ്യുക"
+msgstr "ഗിറ്റ്ഹബ്ബ്"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "ഗിറ്റ്ലാബ് ഉപയോഗിച്ച് ലോഗിൻ ചെയ്യുക"
+msgstr "ഗിറ്റ്ലാബ്"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "ഗൂഗിൾ ഉപയോഗിച്ച് ലോഗിൻ ചെയ്യുക"
+msgstr "ഗൂഗിൾ"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "LDAP ഉപയോഗിച്ച് ലോഗിൻ ചെയ്യുക"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "ഓപ്പൺഐഡി (SSO) ഉപയോഗിച്ച് ലോഗിൻ ചെയ്യുക"
+msgstr "ഓപ്പൺഐഡി"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/pl.po

@@ -78,11 +78,11 @@ msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Zaloguj się przez LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "OpenID Connect"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/pt_BR.po

@@ -65,23 +65,23 @@ msgstr "Bom te ver de novo!"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "Entrar com o Github"
+msgstr "Github"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "Entrar com o Gitlab"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "Entrar com o Google"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Entrar com LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "Entrar com OpenID (SSO)"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/ro.po

@@ -66,23 +66,23 @@ msgstr "Mă bucur să te văd din nou!"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "Conectează-te cu Github"
+msgstr "Github"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "Conectează-te cu Gitlab"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "Conectează-te cu Google"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Conectează-te cu LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "Conectează-te cu OpenID (SSO)"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/ru.po

@@ -63,23 +63,23 @@ msgstr "Рады видеть Вас снова!"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "Вход через Gitnub"
+msgstr "Gitnub"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "Вход через Gitlab"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "Войти с Google"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "Вход через LDAP"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "Войти с OpenID (SSO)"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/tr.po

@@ -78,11 +78,11 @@ msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "LDAP ile oturum aç"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "OpenID ile Bağlan"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/zh_CN.po

@@ -61,23 +61,23 @@ msgstr "很高兴又见到你！"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "使用GitHub登录"
+msgstr "GitHub"
 
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "使用Gitlab登录"
+msgstr "Gitlab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "使用Google登录"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "使用LDAP登录"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "使用OpenID登录"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"

frontend/translations/zh_Hant.po

@@ -61,23 +61,23 @@ msgstr "很高興再次見到你！"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-github-submit"
-msgstr "透過 GitHub 登入"
+msgstr "GitHub"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-gitlab-submit"
-msgstr "透過 GitLab 登入"
+msgstr "GitLab"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-google-submit"
-msgstr "透過 Google 登入"
+msgstr "Google"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-ldap-submit"
-msgstr "透過 LDAP 登入"
+msgstr "LDAP"
 
 #: src/app/main/ui/auth/login.cljs
 msgid "auth.login-with-oidc-submit"
-msgstr "使用 OpenID (SSO) 登入"
+msgstr "OpenID"
 
 #: src/app/main/ui/auth/recovery.cljs
 msgid "auth.new-password"