3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-11 11:06:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add 'toggle overlay' action (and some fixes)

Browse source
This commit is contained in:
Andrés Moya 2021-09-22 14:18:41 +02:00
parent c241100886
commit bc1372c2f9
7 changed files with 107 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

25
common/src/app/common/types/interactions.cljc
View file

@ -40,6 +40,7 @@
(s/def ::action-type #{:navigate (s/def ::action-type #{:navigate
:open-overlay :open-overlay
:toggle-overlay
:close-overlay :close-overlay
:prev-screen :prev-screen
:open-url}) :open-url})
@ -70,6 +71,13 @@
:opt-un [::close-click-outside :opt-un [::close-click-outside
::background-overlay])) ::background-overlay]))
(defmethod action-opts-spec :toggle-overlay [_]
(s/keys :req-un [::destination
::overlay-position
::overlay-pos-type]
:opt-un [::close-click-outside
::background-overlay]))
(defmethod action-opts-spec :close-overlay [_] (defmethod action-opts-spec :close-overlay [_]
(s/keys :req-un [::destination])) (s/keys :req-un [::destination]))
@ -137,7 +145,7 @@
:action-type action-type :action-type action-type
:destination (get interaction :destination)) :destination (get interaction :destination))
:open-overlay (:open-overlay :toggle-overlay)
(let [destination (get interaction :destination) (let [destination (get interaction :destination)
overlay-pos-type (get interaction :overlay-pos-type :center) overlay-pos-type (get interaction :overlay-pos-type :center)
overlay-position (get interaction overlay-position (get interaction
@ -174,12 +182,13 @@
(us/verify ::destination destination) (us/verify ::destination destination)
(assert (or (nil? destination) (assert (or (nil? destination)
(some? (get objects destination)))) (some? (get objects destination))))
(assert #(:navigate :open-overlay :close-overlay) (:action-type interaction)) (assert (#{:navigate :open-overlay :toggle-overlay :close-overlay} (:action-type interaction)))
(cond-> interaction (cond-> interaction
:always :always
(assoc :destination destination) (assoc :destination destination)
(= (:action-type interaction) :open-overlay) (or (= (:action-type interaction) :open-overlay)
(= (:action-type interaction) :toggle-overlay))
(assoc :overlay-pos-type :center (assoc :overlay-pos-type :center
:overlay-position (calc-overlay-position destination :overlay-position (calc-overlay-position destination
interaction interaction
@ -191,7 +200,7 @@
[interaction overlay-pos-type shape objects] [interaction overlay-pos-type shape objects]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::overlay-pos-type overlay-pos-type) (us/verify ::overlay-pos-type overlay-pos-type)
(assert #(= :open-overlay (:action-type interaction))) (assert (#{:open-overlay :toggle-overlay} (:action-type interaction)))
(assoc interaction (assoc interaction
:overlay-pos-type overlay-pos-type :overlay-pos-type overlay-pos-type
:overlay-position (calc-overlay-position (:destination interaction) :overlay-position (calc-overlay-position (:destination interaction)
@ -204,7 +213,7 @@
[interaction overlay-pos-type shape objects] [interaction overlay-pos-type shape objects]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::overlay-pos-type overlay-pos-type) (us/verify ::overlay-pos-type overlay-pos-type)
(assert #(= :open-overlay (:action-type interaction))) (assert (#{:open-overlay :toggle-overlay} (:action-type interaction)))
(let [new-pos-type (if (= (:overlay-pos-type interaction) overlay-pos-type) (let [new-pos-type (if (= (:overlay-pos-type interaction) overlay-pos-type)
:manual :manual
overlay-pos-type)] overlay-pos-type)]
@ -220,7 +229,7 @@
[interaction overlay-position] [interaction overlay-position]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::overlay-position overlay-position) (us/verify ::overlay-position overlay-position)
(assert #(= :open-overlay (:action-type interaction))) (assert (#{:open-overlay :toggle-overlay} (:action-type interaction)))
(assoc interaction (assoc interaction
:overlay-pos-type :manual :overlay-pos-type :manual
:overlay-position overlay-position)) :overlay-position overlay-position))
@ -229,14 +238,14 @@
[interaction close-click-outside] [interaction close-click-outside]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::us/boolean close-click-outside) (us/verify ::us/boolean close-click-outside)
(assert #(= :open-overlay (:action-type interaction))) (assert (#{:open-overlay :toggle-overlay} (:action-type interaction)))
(assoc interaction :close-click-outside close-click-outside)) (assoc interaction :close-click-outside close-click-outside))
(defn set-background-overlay (defn set-background-overlay
[interaction background-overlay] [interaction background-overlay]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::us/boolean background-overlay) (us/verify ::us/boolean background-overlay)
(assert #(= :open-overlay (:action-type interaction))) (assert (#{:open-overlay :toggle-overlay} (:action-type interaction)))
(assoc interaction :background-overlay background-overlay)) (assoc interaction :background-overlay background-overlay))
(defn- calc-overlay-position (defn- calc-overlay-position

43
frontend/src/app/main/data/viewer.cljs
View file

@ -292,6 +292,10 @@
(defn go-to-frame-by-index (defn go-to-frame-by-index
[index] [index]
(ptk/reify ::go-to-frame-by-index (ptk/reify ::go-to-frame-by-index
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:viewer-local :overlays] []))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [route (:route state) (let [route (:route state)
@ -304,6 +308,10 @@
[frame-id] [frame-id]
(us/verify ::us/uuid frame-id) (us/verify ::us/uuid frame-id)
(ptk/reify ::go-to-frame (ptk/reify ::go-to-frame
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:viewer-local :overlays] []))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [route (:route state) (let [route (:route state)
@ -318,6 +326,10 @@
(defn go-to-section (defn go-to-section
[section] [section]
(ptk/reify ::go-to-section (ptk/reify ::go-to-section
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:viewer-local :overlays] []))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [route (:route state) (let [route (:route state)
@ -342,7 +354,7 @@
frames (get-in state [:viewer :pages page-id :frames]) frames (get-in state [:viewer :pages page-id :frames])
frame (d/seek #(= (:id %) frame-id) frames) frame (d/seek #(= (:id %) frame-id) frames)
overlays (get-in state [:viewer-local :overlays])] overlays (get-in state [:viewer-local :overlays])]
(if-not (some #(= % frame) overlays) (if-not (some #(= (:frame %) frame) overlays)
(update-in state [:viewer-local :overlays] conj (update-in state [:viewer-local :overlays] conj
{:frame frame {:frame frame
:position position :position position
@ -350,6 +362,31 @@
:background-overlay background-overlay}) :background-overlay background-overlay})
state))))) state)))))
(defn toggle-overlay
[frame-id position close-click-outside background-overlay]
(us/verify ::us/uuid frame-id)
(us/verify ::us/point position)
(us/verify (s/nilable ::us/boolean) close-click-outside)
(us/verify (s/nilable ::us/boolean) background-overlay)
(ptk/reify ::toggle-overlay
ptk/UpdateEvent
(update [_ state]
(let [route (:route state)
qparams (:query-params route)
page-id (:page-id qparams)
frames (get-in state [:viewer :pages page-id :frames])
frame (d/seek #(= (:id %) frame-id) frames)
overlays (get-in state [:viewer-local :overlays])]
(if-not (some #(= (:frame %) frame) overlays)
(update-in state [:viewer-local :overlays] conj
{:frame frame
:position position
:close-click-outside close-click-outside
:background-overlay background-overlay})
(update-in state [:viewer-local :overlays]
(fn [overlays]
(remove #(= (:id (:frame %)) frame-id) overlays))))))))
(defn close-overlay (defn close-overlay
[frame-id] [frame-id]
(ptk/reify ::close-overlay (ptk/reify ::close-overlay
@ -448,6 +485,10 @@
(defn go-to-page (defn go-to-page
[page-id] [page-id]
(ptk/reify ::go-to-page (ptk/reify ::go-to-page
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:viewer-local :overlays] []))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [route (:route state) (let [route (:route state)

22
frontend/src/app/main/ui/viewer/shapes.cljs
View file

@ -36,7 +36,8 @@
:navigate :navigate
(let [frame-id (:destination interaction)] (let [frame-id (:destination interaction)]
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dv/go-to-frame frame-id))) (when frame-id
(st/emit! (dv/go-to-frame frame-id))))
:open-overlay :open-overlay
(let [frame-id (:destination interaction) (let [frame-id (:destination interaction)
@ -44,14 +45,29 @@
close-click-outside (:close-click-outside interaction) close-click-outside (:close-click-outside interaction)
background-overlay (:background-overlay interaction)] background-overlay (:background-overlay interaction)]
(dom/stop-propagation event) (dom/stop-propagation event)
(when frame-id
(st/emit! (dv/open-overlay frame-id (st/emit! (dv/open-overlay frame-id
position position
close-click-outside close-click-outside
background-overlay))) background-overlay))))
:toggle-overlay
(let [frame-id (:destination interaction)
position (:overlay-position interaction)
close-click-outside (:close-click-outside interaction)
background-overlay (:background-overlay interaction)]
(dom/stop-propagation event)
(when frame-id
(st/emit! (dv/toggle-overlay frame-id
position
close-click-outside
background-overlay))))
:close-overlay :close-overlay
(let [frame-id (or (:destination interaction) (let [frame-id (or (:destination interaction)
(:frame-id shape))] (if (= (:type shape) :frame)
(:id shape)
(:frame-id shape)))]
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dv/close-overlay frame-id))) (st/emit! (dv/close-overlay frame-id)))

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -31,6 +31,7 @@
[] []
{:navigate (tr "workspace.options.interaction-navigate-to") {:navigate (tr "workspace.options.interaction-navigate-to")
:open-overlay (tr "workspace.options.interaction-open-overlay") :open-overlay (tr "workspace.options.interaction-open-overlay")
:toggle-overlay (tr "workspace.options.interaction-toggle-overlay")
:close-overlay (tr "workspace.options.interaction-close-overlay") :close-overlay (tr "workspace.options.interaction-close-overlay")
:prev-screen (tr "workspace.options.interaction-prev-screen")}) :prev-screen (tr "workspace.options.interaction-prev-screen")})
@ -41,6 +42,8 @@
(get destination :name (tr "workspace.options.interaction-none"))) (get destination :name (tr "workspace.options.interaction-none")))
:open-overlay (tr "workspace.options.interaction-open-overlay-dest" :open-overlay (tr "workspace.options.interaction-open-overlay-dest"
(get destination :name (tr "workspace.options.interaction-none"))) (get destination :name (tr "workspace.options.interaction-none")))
:toggle-overlay (tr "workspace.options.interaction-toggle-overlay-dest"
(get destination :name (tr "workspace.options.interaction-none")))
:close-overlay (tr "workspace.options.interaction-close-overlay-dest" :close-overlay (tr "workspace.options.interaction-close-overlay-dest"
(get destination :name (tr "workspace.options.interaction-self"))) (get destination :name (tr "workspace.options.interaction-self")))
"--")) "--"))
@ -131,7 +134,7 @@
:on-change change-action-type} :on-change change-action-type}
(for [[value name] (action-type-names)] (for [[value name] (action-type-names)]
[:option {:value (str value)} name])]] [:option {:value (str value)} name])]]
(when (#{:navigate :open-overlay :close-overlay} action-type) (when (#{:navigate :open-overlay :toggle-overlay :close-overlay} action-type)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")]
[:select.input-select [:select.input-select
@ -142,7 +145,8 @@
(when (and (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself (when (and (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself
(not= (:id frame) (:frame-id shape))) ; nor a shape to its container frame (not= (:id frame) (:frame-id shape))) ; nor a shape to its container frame
[:option {:value (str (:id frame))} (:name frame)]))]]) [:option {:value (str (:id frame))} (:name frame)]))]])
(when (= action-type :open-overlay) (when (or (= action-type :open-overlay)
(= action-type :toggle-overlay))
[:* [:*
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-position")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-position")]

5
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View file

@ -90,6 +90,8 @@
:open-overlay "M-5 -5 h7 v7 h-7 z M2 -2 h3.5 v7 h-7 v-2.5" :open-overlay "M-5 -5 h7 v7 h-7 z M2 -2 h3.5 v7 h-7 v-2.5"
:toggle-overlay "M-5 -5 h7 v7 h-7 z M2 -2 h3.5 v7 h-7 v-2.5"
:close-overlay "M -5 -5 L 5 5 M -5 5 L 5 -5" :close-overlay "M -5 -5 L 5 5 M -5 5 L 5 -5"
nil) nil)
@ -288,7 +290,8 @@
:selected? true :selected? true
:action-type (:action-type interaction) :action-type (:action-type interaction)
:zoom zoom}] :zoom zoom}]
(when (= (:action-type interaction) :open-overlay) (when (or (= (:action-type interaction) :open-overlay)
(= (:action-type interaction) :toggle-overlay))
(if (and (some? move-overlay-to) (if (and (some? move-overlay-to)
(= move-overlay-index index)) (= move-overlay-index index))
[:& overlay-marker {:key (str "pos" (:id shape) "-" index) [:& overlay-marker {:key (str "pos" (:id shape) "-" index)

8
frontend/translations/en.po
View file

@ -2445,10 +2445,18 @@ msgstr "On Click"
msgid "workspace.options.interaction-open-overlay" msgid "workspace.options.interaction-open-overlay"
msgstr "Open overlay" msgstr "Open overlay"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-toggle-overlay"
msgstr "Toggle overlay"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-open-overlay-dest" msgid "workspace.options.interaction-open-overlay-dest"
msgstr "Open overlay: %s" msgstr "Open overlay: %s"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-toggle-overlay-dest"
msgstr "Toggle overlay: %s"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-pos-manual" msgid "workspace.options.interaction-pos-manual"
msgstr "Manual" msgstr "Manual"

8
frontend/translations/es.po
View file

@ -2328,10 +2328,18 @@ msgstr "On Click"
msgid "workspace.options.interaction-open-overlay" msgid "workspace.options.interaction-open-overlay"
msgstr "Open overlay" msgstr "Open overlay"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-toggle-overlay"
msgstr "Toggle overlay"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-open-overlay-dest" msgid "workspace.options.interaction-open-overlay-dest"
msgstr "Open overlay: %s" msgstr "Open overlay: %s"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-toggle-overlay-dest"
msgstr "Toggle overlay: %s"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-pos-manual" msgid "workspace.options.interaction-pos-manual"
msgstr "Manual" msgstr "Manual"