🎉 Add close on click and background overlays

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)

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);
+  }
+}
+
+

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;

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

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,10 +147,22 @@
 
             (for [overlay (:overlays local)]
               (let [size-over (calculate-size (:frame overlay) zoom)]
-                [:div.viewport-container
+                [:*
+                 (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)
-                          :position "absolute"
                            :left (* (:x (:position overlay)) zoom)
                            :top (* (:y (:position overlay)) zoom)}}
                   [:& interactions/viewport
@@ -154,7 +171,7 @@
                     :page page
                     :file file
                     :users users
-                   :local local}]]))]))]]]))
+                    :local local}]]]))]))]]]))
 
 ;; --- Component: Viewer Page
 

frontend/src/app/main/ui/viewer/shapes.cljs

@@ -40,9 +40,14 @@
 
       :open-overlay
       (let [frame-id            (:destination interaction)
-            position (:overlay-position 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)

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

@@ -65,6 +65,8 @@
 
         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}]

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"

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"