♻️ Minor lightbox refactor.

frontend/resources/styles/main-default.scss

@@ -58,7 +58,6 @@
 @import 'main/partials/forms';
 @import 'main/partials/left-toolbar';
 @import 'main/partials/library-bar';
-@import 'main/partials/lightbox';
 @import 'main/partials/loader';
 @import 'main/partials/main-bar';
 @import 'main/partials/modal';

frontend/resources/styles/main/partials/lightbox.scss

@@ -1,425 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-
-.lightbox {
-  align-items: center;
-  background-color: $color-dark-bg;
-  display: flex;
-  justify-content: center;
-  position: fixed;
-  height: 100%;
-  left: 0;
-  top: 0;
-  width: 100%;
-  z-index: 1000;
-
-  &.transparent {
-    background-color: rgba(0,0,0,0);
-  }
-
-  .lightbox-body {
-    align-items: center;
-    background-color: $color-gray-60;
-    border-radius: $br-medium;
-    display: flex;
-    flex-direction: column;
-    padding: $medium $x-big;
-    position: relative;
-    width: 500px;
-    @include animation(.1s,.5s,fadeInDown);
-
-    .lightbox-label {
-      display: flex;
-      font-weight: bold;
-      margin: $medium 0;
-      width: 100%;
-    }
-
-    form {
-      width: 100%;
-    }
-
-    .input-text {
-      margin: 1rem 0;
-      width: 100%;
-    }
-
-    .project-size {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-
-      .input-text {
-        margin-right: $small;
-        margin-top: 0;
-       }
-
-      .toggle-layout {
-
-        svg {
-          fill: $color-gray-30;
-          height: 20px;
-          width: 20px;
-
-          &:hover {
-            fill: $color-gray-50;
-          }
-
-        }
-
-      }
-
-    }
-
-    .close {
-      position: absolute;
-      right: -30px;
-      transform: rotate(45deg);
-      top: -30px;
-
-      svg {
-        fill: $color-white;
-        height: 20px;
-        width: 20px;
-
-        &:hover {
-          fill: $color-danger;
-        }
-
-      }
-
-    }
-
-    .btn-primary {
-      margin: $big auto 0 auto;
-      min-width: 120px;
-    }
-
-    // Export dialog
-    &.export-dialog {
-      width: auto;
-    }
-
-    &.big-lightbox {
-      width: 800px;
-    }
-
-    .input-element {
-      flex-direction: column;
-
-      &::after {
-        top: 50%;
-      }
-
-      span {
-        color: $color-gray-60;
-        font-size: $fs12;
-        margin-left: $small;
-      }
-
-    }
-  }
-}
-
-.lightbox-big-btn {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  margin: 1rem;
-
-  .big-svg {
-    background-color: $color-gray-10;
-    border-radius: $br-medium;
-    padding: 3rem;
-
-    svg {
-      fill: $color-gray-30;
-      height: 40px;
-      width: 40px;
-    }
-
-    &.upload {
-
-      svg {
-        transform: rotate(-90deg);
-      }
-
-    }
-
-  }
-
-  .text {
-    color: $color-gray-20;
-    margin-top: .5rem;
-  }
-
-  &:hover {
-
-    .big-svg {
-      background-color: $color-primary;
-
-      svg {
-        fill: $color-white;
-      }
-
-    }
-
-  }
-
-}
-
-// Clipboard
-.clipboard {
-  max-width: 350px;
-
-  .clipboard-list {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    .clipboard-item {
-      align-items: center;
-      border-bottom: 1px solid $color-gray-60;
-      cursor: pointer;
-      display: flex;
-      padding: $small;
-      width: 100%;
-
-
-      span {
-
-        svg {
-          height: 20px;
-          fill: $color-gray-20;
-          margin-right: $medium;
-          width: 20px;
-        }
-
-      }
-
-      &:hover {
-
-        span {
-          color: $color-primary;
-
-          svg {
-            fill: $color-primary
-          }
-
-        }
-
-      }
-
-    }
-
-  }
-
-}
-
-.lightbox .confirm-dialog {
-    background-color: $color-white;
-    width: 23rem;
-
-    & .close {
-        right: 1rem;
-        top: 1rem;
-
-        & svg {
-            fill: $color-black;
-        }
-    }
-}
-
-.lightbox .confirm-dialog-title {
-    font-size: 24px;
-    color: $color-black;
-    font-weight: normal;
-    text-align: center;
-}
-
-.confirm-dialog-buttons {
-    display: flex;
-    flex-direction: row;
-    margin-top: 5rem;
-    width: 100%;
-}
-
-.confirm-dialog-cancel-button {
-    border: 1px solid $color-gray-30;
-    background: $color-canvas;
-    border-radius: 2px;
-    padding: 0.5rem;
-    margin-right: 1rem;
-    justify-content: space-evenly;
-    margin-bottom: 0;
-    width: 100%;
-    cursor: pointer;
-
-    &:hover {
-        background: $color-gray-20;
-    }
-}
-
-.confirm-dialog-accept-button {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid $color-danger;
-    background: $color-danger;
-    color: $color-white;
-    margin-bottom: 0;
-    cursor: pointer;
-
-    &:hover {
-        background: $color-danger-dark;
-    }
-}
-
-// Export dialog
-.content-col {
-  align-items: center;
-  border-right: 1px solid $color-gray-60;
-  display: flex;
-  flex-direction: column;
-  flex: 300px;
-  height: 450px;
-  padding: 2rem;
-
-  &:first-child{
-    padding-left: 1rem;
-  }
-
-  &:last-child {
-    border: none;
-    padding-right: 1rem;
-  }
-
-  .icon {
-    align-items: center;
-    background-color: $color-gray-60;
-    border-radius: $br-medium;
-    display: flex;
-    flex-shrink: 0;
-    height: 120px;
-    justify-content: center;
-    width: 120px;
-
-    svg {
-      fill: $color-gray-30;
-      height: 50px;
-      width: 50px;
-    }
-  }
-
-  .title {
-    font-size: $fs20;
-    font-weight: 500;
-    margin: 1rem 0;
-  }
-
-  .info {
-    font-size: $fs16;
-    text-align: center;
-  }
-
-  .btn-primary {
-    margin-top: auto !important;
-  }
-}
-
-
-// Import image library
-.import-img-library {
-  display: flex;
-  flex-direction: column;
-  padding: $medium;
-  width: 100%;
-
-  .library-actions {
-    display: flex;
-  }
-
-  .toggle-library {
-    display: flex;
-    margin-right: $medium;
-
-    :first-child {
-      border-top-left-radius: $br-medium;
-      border-bottom-left-radius: $br-medium;
-    }
-
-    :last-child {
-      border-right: 1px solid $color-gray-60;
-      border-top-right-radius: $br-medium;
-      border-bottom-right-radius: $br-medium;
-    }
-
-    li {
-      align-items: center;
-      border: 1px solid $color-gray-60;
-      border-right: none;
-      cursor: pointer;
-      display: flex;
-      font-size: $fs13;
-      font-weight: bold;
-      padding: $medium;
-      white-space: nowrap;
-
-      &:hover {
-        color: $color-gray-60;
-      }
-
-      &.current {
-        color: $color-primary;
-      }
-    }
-  }
-
-  .library-content {
-    display: flex;
-    flex-wrap: wrap;
-    max-height: 500px;
-    overflow-y: scroll;
-  }
-
-  .library-item {
-    border-radius: $br-medium;
-    border: 1px solid $color-gray-60;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    margin: $x-small;
-    width: 23.5%;
-
-    .library-item-th {
-      background-position: center;
-      background-size: cover;
-      border-top-left-radius: $br-medium;
-      border-top-right-radius: $br-medium;
-      height: 100px;
-      width: 100%
-    }
-
-    span {
-      @include text-ellipsis;
-      padding: $small;
-    }
-
-    &:hover {
-      border-color: $color-primary;
-
-      .library-item-th {
-        opacity: .6;
-      }
-
-      span {
-        color: $color-primary;
-      }
-    }
-  }
-}

frontend/resources/styles/main/partials/modal.scss

@@ -1,3 +1,23 @@
+.modal-wrapper {}
+
+.modal-overlay {
+  align-items: center;
+  background-color: $color-dark-bg;
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+
+  &.transparent {
+    background-color: rgba($color-white, 0)
+  }
+}
+
+.modal,
 .generic-modal {
   background-color: $color-white;
   width: 565px;
@@ -53,3 +73,57 @@
 
   }
 }
+
+.confirm-dialog {
+  background-color: $color-white;
+  width: 23rem;
+
+  .modal-content {
+    padding: 20px 40px;
+  }
+
+  .dialog-title {
+    font-size: 24px;
+    color: $color-black;
+    font-weight: normal;
+    text-align: center;
+  }
+
+  .dialog-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-top: 3rem;
+    width: 100%;
+  }
+
+  .dialog-cancel-button {
+    border: 1px solid $color-gray-30;
+    background: $color-canvas;
+    border-radius: 2px;
+    padding: 0.5rem;
+    margin-right: 1rem;
+    justify-content: space-evenly;
+    margin-bottom: 0;
+    width: 100%;
+    cursor: pointer;
+
+    &:hover {
+      background: $color-gray-20;
+    }
+  }
+
+  .dialog-accept-button {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid $color-danger;
+    background: $color-danger;
+    color: $color-white;
+    margin-bottom: 0;
+    cursor: pointer;
+
+    &:hover {
+      background: $color-danger-dark;
+    }
+  }
+}
+

frontend/src/uxbox/main/ui/confirm.cljs

@@ -31,19 +31,19 @@
           (modal/hide!)
           (when on-cancel
             (on-cancel (dissoc ctx :on-accept :on-cancel))))]
-    [:div.lightbox-body.confirm-dialog
+    [:div.modal-overlay
-     [:h3.confirm-dialog-title message]
+     [:div.modal.confirm-dialog
-     (if hint [:span hint])
+      [:a.close {:on-click cancel} i/close]
+      [:div.modal-content
+       [:h3.dialog-title message]
+       (if hint [:span hint])
+       [:div.dialog-buttons
+        [:input.dialog-cancel-button
+         {:type "button"
+          :value cancel-text
+          :on-click cancel}]
 
-     [:div.confirm-dialog-buttons
+        [:input.dialog-accept-button
-      [:input.confirm-dialog-cancel-button
+         {:type "button"
-       {:type "button"
+          :value accept-text
-        :value cancel-text
+          :on-click accept}]]]]]))
-        :on-click cancel}]
-
-      [:input.confirm-dialog-accept-button
-       {:type "button"
-        :value accept-text
-        :on-click accept}]]
-
-     [:a.close {:href "#" :on-click cancel} i/close]]))

frontend/src/uxbox/main/ui/modal.cljs

@@ -1,5 +1,6 @@
 (ns uxbox.main.ui.modal
   (:require
+   [cuerdas.core :as str]
    [goog.events :as events]
    [rumext.alpha :as mf]
    [uxbox.main.store :as st]
@@ -28,28 +29,29 @@
   [event parent-ref]
   (let [parent (mf/ref-val parent-ref)
         current (dom/get-target event)]
-    (when (dom/equals? parent current)
+    ;; (js/console.log current (.-className ^js current))
+    (when (and (dom/equals? (.-firstElementChild ^js parent) current)
+               (str/includes? (.-className ^js current) "modal-overlay"))
       (dom/stop-propagation event)
       (dom/prevent-default event)
       (reset! state nil))))
 
 (mf/defc modal-wrapper
   [{:keys [component props]}]
+
   (mf/use-effect
    (fn []
      (let [key (events/listen js/document EventType.KEYDOWN on-esc-clicked)]
        #(events/unlistenByKey %))))
 
-  (let [classes (classnames :transparent (:transparent? props))
+  (let [ref (mf/use-ref nil)]
-        parent-ref (mf/use-ref nil)]
+    [:div.modal-wrapper
-    [:div.lightbox {:class classes
+     {:ref ref
-                    :ref parent-ref
+      :on-click #(on-parent-clicked % ref)}
-                    :on-click #(on-parent-clicked % parent-ref)
+     [:& component props]]))
-                    }
-     (mf/element component props)]))
 
 (mf/defc modal
-  [_]
+  []
   (when-let [{:keys [component props]} (mf/deref state)]
     [:& modal-wrapper {:component component
                        :props props

frontend/src/uxbox/main/ui/settings/change_email.cljs

@@ -101,8 +101,9 @@
   [props]
   (let [locale (mf/deref i18n/locale)
         profile (mf/deref refs/profile)]
-    [:section.generic-modal.change-email-modal
+    [:div.modal-overlay
-     [:span.close {:on-click #(modal/hide!)} i/close]
+     [:div.generic-modal.change-email-modal
-     (if (:pending-email profile)
+      [:span.close {:on-click #(modal/hide!)} i/close]
-       [:& change-email-confirmation {:locale locale :profile profile}]
+      (if (:pending-email profile)
-       [:& change-email-form {:locale locale :profile profile}])]))
+        [:& change-email-confirmation {:locale locale :profile profile}]
+        [:& change-email-form {:locale locale :profile profile}])]]))

frontend/src/uxbox/main/ui/workspace/colorpicker.cljs

@@ -15,13 +15,14 @@
 
 (mf/defc colorpicker-modal
   [{:keys [x y default value opacity page on-change disable-opacity] :as props}]
-  [:div.colorpicker-tooltip
+  [:div.modal-overlay.transparent
-   {:style {:left (str (- x 270) "px")
+   [:div.colorpicker-tooltip
-            :top (str (- y 50) "px")}}
+    {:style {:left (str (- x 270) "px")
-   [:& cp/colorpicker {:value (or value default)
+             :top (str (- y 50) "px")}}
-                       :opacity (or opacity 1)
+    [:& cp/colorpicker {:value (or value default)
-                       :colors (into-array @cp/most-used-colors)
+                        :opacity (or opacity 1)
-                       :on-change on-change
+                        :colors (into-array @cp/most-used-colors)
-                       :disable-opacity disable-opacity}]])
+                        :on-change on-change
+                        :disable-opacity disable-opacity}]]])
 
 

frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -18,7 +18,8 @@
    [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
    [uxbox.common.data :as d]))
 
-(defn color-picker-callback [color handle-change-color disable-opacity]
+(defn color-picker-callback
+  [color handle-change-color disable-opacity]
   (fn [event]
     (let [x (.-clientX event)
           y (.-clientY event)
@@ -27,7 +28,6 @@
                  :on-change handle-change-color
                  :value (:value color)
                  :opacity (:opacity color)
-                 :transparent? true
                  :disable-opacity disable-opacity}]
       (modal/show! colorpicker-modal props))))