modal / modal-alpha setup

src/cljs/ulysses/components/layout.cljs

@@ -1,17 +1,40 @@
 (ns ulysses.components.layout
   (:require [reagent.core :as r]
+            [re-frame.core :refer [subscribe dispatch]]
+            [re-com.core :refer [modal-panel]]
             [ulysses.components.header :refer [header]]
             [ulysses.components.basic :refer [css-transition-group-standard]]
+            [ulysses.components.misc :refer [modal-dialog]]
+            [ulysses.utils :refer [classes]]
             [ulysses.lib.moment :as m]))
 
 (defn footer []
   (let [year (-> (m/moment) m/year)]
     [:footer.footer "©" year " Office of the Vice President for Research"]))
 
+(defn modal-alpha []
+  (let [mss (subscribe [:modal])
+        on-close (partial dispatch [:modal-close])]
+    (fn []
+      (when-let [ms @mss]
+        (let [{:keys [title action-label on-action children]} ms]
+          [modal-panel
+            :wrap-nicely? false
+            :backdrop-on-click on-close
+            :class (classes :modal-alpha)
+            :child
+            [modal-dialog
+              title
+              action-label
+              on-action
+              on-close
+              children]])))))
+
 (defn shell [page-name page]
   [:div.shell
     [header]
     ; page
     [css-transition-group-standard
       [^{:key (name page-name)} [:div.page page]]]
-    [footer]])
+    [footer]
+    [modal-alpha]])

src/cljs/ulysses/components/misc.cljs

@@ -1,5 +1,5 @@
 (ns ulysses.components.misc
-  (:require [ulysses.utils :refer [mechanism-to-contextual]]
+  (:require [ulysses.utils :refer [classes mechanism-to-contextual]]
             [ulysses.components.basic :refer [label tooltip]]
             [ulysses.lib.moment :as m]))
 
@@ -22,3 +22,19 @@
   [:div.grant-op-meta
     [grant-op-fm-label funding-mechanism]
     [grant-op-time-left-label due-date]])
+
+;; ----------------------------------------------------------------------------
+;; modal dialog
+;; ----------------------------------------------------------------------------
+
+(defn modal-dialog
+  [title action-label on-action on-close & body]
+  [:div.modal-content
+    [:div.modal-header
+      [:button {:type :button :class :close :on-click on-close}
+        [:span "×"]]
+      [:h4.modal-title title]]
+    (into [:div.modal-body] body)
+    [:div.modal-footer
+      [:button {:type :button :class (classes :btn :btn-secondary) :on-click on-close} "Close"]
+      [:button {:type :button :class (classes :btn :btn-primary) :on-click on-action} action-label]]])

src/cljs/ulysses/db.cljs

@@ -93,7 +93,14 @@
                                :recentGrantFunds 0}}
 
    ; user workspace-faculty hover (id)
-   :builder-workspace-faculty-hover nil})
+   :builder-workspace-faculty-hover nil
+
+   ;; -------------------------------------------------------------------------
+   ;; interface
+   ;; -------------------------------------------------------------------------
+
+   ; modal: {:title String :action-label String :on-action Function :children Hiccup}
+   :modal nil})
 
 (defn refresh-keys
   "given a db, set the given keys to their original state"

src/cljs/ulysses/handlers.cljs

@@ -299,8 +299,8 @@
                   (remove
                     (fn [fw]
                       (and
-                        (= faculty-id (:faculty-id %))
-                        (= current-id (:workspace-id %))))
+                        (= faculty-id (:faculty-id fw))
+                        (= current-id (:workspace-id fw))))
                     fws))))))
       ; TODO create new workspace from default,
       ; then remove this new working faculty
@@ -367,7 +367,7 @@
     (assoc db :builder-workspace-faculty-hover
       nil)))
 
-;; builder nil
+;; builder nil ----
 
 (register-handler
   :nil-workspace
@@ -387,3 +387,19 @@
        :builder-workspace-faculties
        :builder-filters
        :builder-workspace-faculty-hover])))
+
+;; ----------------------------------------------------------------------------
+;; interface
+;; ----------------------------------------------------------------------------
+
+;; modal ----
+
+(register-handler
+  :modal
+  (fn [db [_ modal]]
+    (assoc db :modal modal)))
+
+(register-handler
+  :modal-close
+  (fn [db _]
+    (db/refresh-keys db [:modal])))

src/cljs/ulysses/subs.cljs

@@ -149,3 +149,12 @@
       (let [{:keys [faculties builder-workspace-faculty-hover]} @db]
         (when builder-workspace-faculty-hover
           (get faculties builder-workspace-faculty-hover))))))
+
+;; ----------------------------------------------------------------------------
+;; interface
+;; ----------------------------------------------------------------------------
+
+(register-sub
+  :modal
+  (fn [db _]
+    (reaction (:modal @db))))

src/sass/_common.scss

@@ -115,6 +115,16 @@ a.fancy-switch {
   position: relative;
 }
 
+.display-flex {
+  display: -webkit-flex;
+  display: flex;
+}
+
+.display-inline-flex {
+  display: -webkit-inline-flex;
+  display: inline-flex;
+}
+
 .multi-select {
   width: 100%;
 }

src/sass/_layout.scss

@@ -5,7 +5,7 @@
   flex-direction: column; // for sticky footer
   min-height: 100vh; // for sticky footer
 
-  > div:nth-of-type(2) {
+  > div:nth-of-type(1) {
     flex: 1; // for sticky footer
   }
 

src/sass/app.scss

@@ -59,6 +59,7 @@
 @import 'components/grant-op-filters';
 @import 'components/grant-op-pagination';
 @import 'components/main-logo';
+@import 'components/modal-alpha';
 @import 'components/not-found';
 @import 'components/center-message';
 @import 'components/progress';

src/sass/components/_modal-alpha.scss

@@ -0,0 +1,5 @@
+.modal-alpha {
+  .modal-content {
+    min-width: 33vw;
+  }
+}