mirror of
https://github.com/penpot/penpot.git
synced 2025-05-23 19:06:13 +02:00
🎉 Add close on click and background overlays
This commit is contained in:
Andrés Moya
parent
f208731746
commit
bbdf1152c1
9 changed files with 153 additions and 24 deletions
|
|
@ -328,9 +328,11 @@
|
|||
;; --- Overlays
|
||||
|
||||
(defn open-overlay
|
||||
[frame-id position]
|
||||
[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 ::open-overlay
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
|
|
@ -343,7 +345,9 @@
|
|||
(if-not (some #(= % frame) overlays)
|
||||
(update-in state [:viewer-local :overlays] conj
|
||||
{:frame frame
|
||||
:position position})
|
||||
:position position
|
||||
:close-click-outside close-click-outside
|
||||
:background-overlay background-overlay})
|
||||
state)))))
|
||||
|
||||
(defn close-overlay
|
||||
|
|
|
|||
|
|
@ -65,7 +65,12 @@
|
|||
(mf/deps section)
|
||||
(fn [_]
|
||||
(when (= section :comments)
|
||||
(st/emit! (dcm/close-thread)))))]
|
||||
(st/emit! (dcm/close-thread)))))
|
||||
|
||||
close-overlay
|
||||
(mf/use-callback
|
||||
(fn [frame]
|
||||
(st/emit! (dv/close-overlay (:id frame)))))]
|
||||
|
||||
(hooks/use-shortcuts ::viewer sc/shortcuts)
|
||||
|
||||
|
|
@ -142,19 +147,31 @@
|
|||
|
||||
(for [overlay (:overlays local)]
|
||||
(let [size-over (calculate-size (:frame overlay) zoom)]
|
||||
[:div.viewport-container
|
||||
{:style {:width (:width size-over)
|
||||
:height (:height size-over)
|
||||
:position "absolute"
|
||||
:left (* (:x (:position overlay)) zoom)
|
||||
:top (* (:y (:position overlay)) zoom)}}
|
||||
[:& interactions/viewport
|
||||
{:frame (:frame overlay)
|
||||
:size size-over
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:local local}]]))]))]]]))
|
||||
[:*
|
||||
(when (or (:close-click-outside overlay)
|
||||
(:background-overlay overlay))
|
||||
[:div.viewer-overlay-background
|
||||
{:class (dom/classnames
|
||||
:visible (:background-overlay overlay))
|
||||
:style {:width (:width frame)
|
||||
:height (:height frame)
|
||||
:position "absolute"
|
||||
:left 0
|
||||
:top 0}
|
||||
:on-click #(when (:close-click-outside overlay)
|
||||
(close-overlay (:frame overlay)))}])
|
||||
[:div.viewport-container.viewer-overlay
|
||||
{:style {:width (:width size-over)
|
||||
:height (:height size-over)
|
||||
:left (* (:x (:position overlay)) zoom)
|
||||
:top (* (:y (:position overlay)) zoom)}}
|
||||
[:& interactions/viewport
|
||||
{:frame (:frame overlay)
|
||||
:size size-over
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:local local}]]]))]))]]]))
|
||||
|
||||
;; --- Component: Viewer Page
|
||||
|
||||
|
|
|
|||
|
|
@ -39,10 +39,15 @@
|
|||
(st/emit! (dv/go-to-frame frame-id)))
|
||||
|
||||
:open-overlay
|
||||
(let [frame-id (:destination interaction)
|
||||
position (:overlay-position interaction)]
|
||||
(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)
|
||||
(st/emit! (dv/open-overlay frame-id position)))
|
||||
(st/emit! (dv/open-overlay frame-id
|
||||
position
|
||||
close-click-outside
|
||||
background-overlay)))
|
||||
|
||||
:close-overlay
|
||||
(let [frame-id (or (:destination interaction)
|
||||
|
|
|
|||
|
|
@ -63,8 +63,10 @@
|
|||
frames (mf/use-memo (mf/deps objects)
|
||||
#(cp/select-frames objects))
|
||||
|
||||
action-type (:action-type interaction)
|
||||
overlay-pos-type (:overlay-pos-type interaction)
|
||||
action-type (:action-type interaction)
|
||||
overlay-pos-type (:overlay-pos-type interaction)
|
||||
close-click-outside? (:close-click-outside interaction)
|
||||
background-overlay? (:background-overlay interaction)
|
||||
|
||||
extended-open? (mf/use-state false)
|
||||
|
||||
|
|
@ -91,7 +93,17 @@
|
|||
|
||||
toggle-overlay-pos-type
|
||||
(fn [pos-type]
|
||||
(update-interaction index #(cti/toggle-overlay-pos-type % pos-type shape objects)))]
|
||||
(update-interaction index #(cti/toggle-overlay-pos-type % pos-type shape objects)))
|
||||
|
||||
change-close-click-outside
|
||||
(fn [event]
|
||||
(let [value (-> event dom/get-target dom/checked?)]
|
||||
(update-interaction index #(cti/set-close-click-outside % value))))
|
||||
|
||||
change-background-overlay
|
||||
(fn [event]
|
||||
(let [value (-> event dom/get-target dom/checked?)]
|
||||
(update-interaction index #(cti/set-background-overlay % value))))]
|
||||
|
||||
[:*
|
||||
[:div.element-set-options-group
|
||||
|
|
@ -167,7 +179,23 @@
|
|||
[:div.element-set-actions-button
|
||||
{:class (dom/classnames :active (= overlay-pos-type :bottom-center))
|
||||
:on-click #(toggle-overlay-pos-type :bottom-center)}
|
||||
i/position-bottom-center]]])]])]))
|
||||
i/position-bottom-center]]
|
||||
[:div.interactions-element
|
||||
[:div.input-checkbox
|
||||
[:input {:type "checkbox"
|
||||
:id (str "close-" index)
|
||||
:checked close-click-outside?
|
||||
:on-change change-close-click-outside}]
|
||||
[:label {:for (str "close-" index)}
|
||||
(tr "workspace.options.interaction-close-outside")]]]
|
||||
[:div.interactions-element
|
||||
[:div.input-checkbox
|
||||
[:input {:type "checkbox"
|
||||
:id (str "background-" index)
|
||||
:checked background-overlay?
|
||||
:on-change change-background-overlay}]
|
||||
[:label {:for (str "background-" index)}
|
||||
(tr "workspace.options.interaction-background")]]]])]])]))
|
||||
|
||||
(mf/defc interactions-menu
|
||||
[{:keys [shape] :as props}]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue