diff --git a/common/src/app/common/types/interactions.cljc b/common/src/app/common/types/interactions.cljc index aa28a6425..f506ea7ea 100644 --- a/common/src/app/common/types/interactions.cljc +++ b/common/src/app/common/types/interactions.cljc @@ -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) diff --git a/frontend/resources/styles/main/layouts/viewer.scss b/frontend/resources/styles/main/layouts/viewer.scss index 7e05a861b..296322332 100644 --- a/frontend/resources/styles/main/layouts/viewer.scss +++ b/frontend/resources/styles/main/layouts/viewer.scss @@ -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); + } +} + + diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 5eee36b8d..1c38124e5 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -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; diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index 9b4ba9af4..75063ce04 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -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 diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 99fa30d33..e84fc0361 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -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 diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs index f743f4c92..a39d11894 100644 --- a/frontend/src/app/main/ui/viewer/shapes.cljs +++ b/frontend/src/app/main/ui/viewer/shapes.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index 3bdd854d1..7a77359d8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -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}] diff --git a/frontend/translations/en.po b/frontend/translations/en.po index a49fdf5a1..2a28ffd7a 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 1e48f671a..344baeabd 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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"