diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index d5595397a..4289e81c9 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -721,6 +721,12 @@ "fr" : "Mettre à jour les paramètres" } }, + "workspace.viewport.click-to-close-path": { + "translations": { + "en": "Click to close the path" + } + }, + "workspace.header.canvas" : { "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:95" ], "translations" : { diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 140967b34..eb3e932f9 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -734,9 +734,16 @@ (rx/of (deactivate-flag flag)) (rx/of (activate-flag flag))))))) -(defn set-tooltip - [txt] - ::todo) +;; --- Tooltip + +(defn assign-cursor-tooltip + [content] + (ptk/reify ::assign-cursor-tooltip + ptk/UpdateEvent + (update [_ state] + (if (string? content) + (assoc-in state [:workspace-local :tooltip] content) + (assoc-in state [:workspace-local :tooltip] nil))))) ;; --- Workspace Ruler diff --git a/frontend/src/uxbox/main/ui/workspace/drawarea.cljs b/frontend/src/uxbox/main/ui/workspace/drawarea.cljs index 999dc5175..33a95c45f 100644 --- a/frontend/src/uxbox/main/ui/workspace/drawarea.cljs +++ b/frontend/src/uxbox/main/ui/workspace/drawarea.cljs @@ -24,6 +24,7 @@ [uxbox.util.geom.matrix :as gmt] [uxbox.util.geom.path :as path] [uxbox.util.geom.point :as gpt] + [uxbox.util.i18n :as i18n :refer [t]] [uxbox.util.uuid :as uuid])) ;; --- Events @@ -319,16 +320,23 @@ (mf/defc path-draw-area [{:keys [shape] :as props}] - (letfn [(on-click [event] - (dom/stop-propagation event) - (st/emit! (dw/set-tooltip nil) - close-drawing-path - ::end-path-drawing)) + (let [locale (i18n/use-locale) - (on-mouse-enter [event] - (st/emit! (dw/set-tooltip "Click to close the path"))) - (on-mouse-leave [event] - (st/emit! (dw/set-tooltip nil)))] + on-click + (fn [event] + (dom/stop-propagation event) + (st/emit! (dw/assign-cursor-tooltip nil) + close-drawing-path + ::end-path-drawing)) + + on-mouse-enter + (fn [event] + (let [msg (t locale "workspace.viewport.click-to-close-path")] + (st/emit! (dw/assign-cursor-tooltip msg)))) + + on-mouse-leave + (fn [event] + (st/emit! (dw/assign-cursor-tooltip nil)))] (when-let [{:keys [x y] :as segment} (first (:segments shape))] [:g [:& shapes/shape-wrapper {:shape shape}] diff --git a/frontend/src/uxbox/main/ui/workspace/ruler.cljs b/frontend/src/uxbox/main/ui/workspace/ruler.cljs index 633abf90a..c3627f9b9 100644 --- a/frontend/src/uxbox/main/ui/workspace/ruler.cljs +++ b/frontend/src/uxbox/main/ui/workspace/ruler.cljs @@ -56,7 +56,7 @@ (letfn [(on-mouse-down [event] (dom/stop-propagation event) (st/emit! :interrupt - (udw/set-tooltip nil) + (udw/assign-cursor-tooltip nil) (udw/start-ruler))) (on-mouse-up [event] (dom/stop-propagation event) diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs index f8a76a047..55b13a4cc 100644 --- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs +++ b/frontend/src/uxbox/main/ui/workspace/viewport.cljs @@ -46,6 +46,16 @@ [:span {:alt "y"} (str "Y: " (:y coords "-"))]])) +(mf/defc cursor-tooltip + [{:keys [zoom tooltip] :as props}] + (let [coords (some-> (use-rxsub ms/mouse-position) + (gpt/divide (gpt/point zoom zoom))) + pos-x (- (:x coords) 100) + pos-y (+ (:y coords) 30)] + [:g {:transform (str "translate(" pos-x "," pos-y ")")} + [:foreignObject {:width 200 :height 100 :style {:text-align "center"}} + [:span tooltip]]])) + ;; --- Cursor tooltip (defn- get-shape-tooltip @@ -60,17 +70,6 @@ :circle "Drag to draw a Circle" nil)) -;; (mf/defc cursor-tooltip -;; {:wrap [mf/wrap-memo]} -;; [{:keys [tooltip]}] -;; (let [coords (mf/deref refs/window-mouse-position)] -;; [:span.cursor-tooltip -;; {:style -;; {:position "fixed" -;; :left (str (+ (:x coords) 5) "px") -;; :top (str (- (:y coords) 25) "px")}} -;; tooltip])) - ;; --- Selection Rect (defn- selection->rect @@ -166,6 +165,7 @@ zoom flags edition + tooltip selected] :as local} (mf/deref refs/workspace-local) viewport-ref (mf/use-ref nil) @@ -291,6 +291,9 @@ (if (contains? flags :grid) [:& grid])] + (when tooltip + [:& cursor-tooltip {:zoom zoom :tooltip tooltip}]) + (when (contains? flags :ruler) [:& ruler {:zoom zoom :ruler (:ruler local)}])