Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-17 18:21:23 -05:00
Code Issues Activity

🎉 Add close on click and background overlays

Browse source
This commit is contained in:
Andrés Moya 2021-09-20 14:20:52 +02:00
parent f208731746
commit bbdf1152c1
9 changed files with 153 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -55,6 +55,8 @@
:bottom-center})
(s/def ::overlay-position ::point)
(s/def ::url ::us/string)
(s/def ::close-click-outside ::us/boolean)
(s/def ::background-overlay ::us/boolean)
(defmulti action-opts-spec :action-type)
@ -64,7 +66,9 @@
(defmethod action-opts-spec :open-overlay [_]
(s/keys :req-un [::destination
::overlay-position
::overlay-pos-type]))
::overlay-pos-type]
:opt-un [::close-click-outside
::background-overlay]))
(defmethod action-opts-spec :close-overlay [_]
(s/keys :req-un [::destination]))
@ -221,6 +225,20 @@
:overlay-pos-type :manual
:overlay-position overlay-position))
(defn set-close-click-outside
[interaction close-click-outside]
(us/verify ::interaction interaction)
(us/verify ::us/boolean close-click-outside)
(assert #(= :open-overlay (:action-type interaction)))
(assoc interaction :close-click-outside close-click-outside))
(defn set-background-overlay
[interaction background-overlay]
(us/verify ::interaction interaction)
(us/verify ::us/boolean background-overlay)
(assert #(= :open-overlay (:action-type interaction)))
(assoc interaction :background-overlay background-overlay))
(defn- calc-overlay-position
[destination interaction shape objects overlay-pos-type]
(if (nil? destination)

16
frontend/resources/styles/main/layouts/viewer.scss
View file

@ -43,3 +43,19 @@
grid-row: 1 / span 2;
}
}
.viewer-overlay {
position: absolute;
}
.viewer-overlay-background {
position: absolute;
top: 0;
left: 0;
&.visible {
background-color: rgb(0, 0, 0, 0.2);
}
}

25
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -222,6 +222,31 @@
}
}
.input-checkbox {
label {
color: $color-gray-20;
}
label::before {
background-color: transparent;
width: 16px;
height: 16px;
}
label::after {
width: 16px;
height: 16px;
}
input:checked + label::before {
border-width: 1px;
}
input:checked + label::after {
font-size: 0.8rem;
}
}
.element-set-subtitle {
color: $color-gray-20;
font-size: $fs11;

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

@ -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

45
frontend/src/app/main/ui/viewer.cljs
View file

@ -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

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

@ -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)

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

@ -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}]

8
frontend/translations/en.po
View file

@ -2405,6 +2405,14 @@ msgstr "Click the + button to add interactions."
msgid "workspace.options.interaction-action"
msgstr "Action"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-background"
msgstr "Add background overlay"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-close-outside"
msgstr "Close when clicking outside"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-close-overlay"
msgstr "Close overlay"

8
frontend/translations/es.po
View file

@ -2288,6 +2288,14 @@ msgstr "Pulsa el botón + para añadir interacciones."
msgid "workspace.options.interaction-action"
msgstr "Acción"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-background"
msgstr "Añadir sombreado de fondo"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-close-outside"
msgstr "Cerrar al pulsar fuera"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-close-overlay"
msgstr "Close overlay"