diff --git a/src/cljs/ulysses/components/layout.cljs b/src/cljs/ulysses/components/layout.cljs index 22c869e..bcf47b2 100644 --- a/src/cljs/ulysses/components/layout.cljs +++ b/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]]) diff --git a/src/cljs/ulysses/components/misc.cljs b/src/cljs/ulysses/components/misc.cljs index 525f60b..5505220 100644 --- a/src/cljs/ulysses/components/misc.cljs +++ b/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]]]) diff --git a/src/cljs/ulysses/db.cljs b/src/cljs/ulysses/db.cljs index 1dc7205..61251f2 100644 --- a/src/cljs/ulysses/db.cljs +++ b/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" diff --git a/src/cljs/ulysses/handlers.cljs b/src/cljs/ulysses/handlers.cljs index 4668646..b2a820b 100644 --- a/src/cljs/ulysses/handlers.cljs +++ b/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]))) diff --git a/src/cljs/ulysses/subs.cljs b/src/cljs/ulysses/subs.cljs index 766c92a..d952bbf 100644 --- a/src/cljs/ulysses/subs.cljs +++ b/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)))) diff --git a/src/sass/_common.scss b/src/sass/_common.scss index 40c6940..7f48bc9 100644 --- a/src/sass/_common.scss +++ b/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%; } diff --git a/src/sass/_layout.scss b/src/sass/_layout.scss index ef37f06..6942b4f 100644 --- a/src/sass/_layout.scss +++ b/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 } diff --git a/src/sass/app.scss b/src/sass/app.scss index 3c0bf18..16ec49c 100644 --- a/src/sass/app.scss +++ b/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'; diff --git a/src/sass/components/_modal-alpha.scss b/src/sass/components/_modal-alpha.scss new file mode 100644 index 0000000..23a3eff --- /dev/null +++ b/src/sass/components/_modal-alpha.scss @@ -0,0 +1,5 @@ +.modal-alpha { + .modal-content { + min-width: 33vw; + } +}