From c61c6dd4f4998619e636ae494ced5ae5bef0c224 Mon Sep 17 00:00:00 2001 From: charlie Date: Fri, 26 Feb 2021 19:57:44 +0800 Subject: [PATCH] feat(ui): use modal dialog display settings page --- src/main/frontend/components/header.cljs | 3 ++- src/main/frontend/components/page.cljs | 2 +- src/main/frontend/components/sidebar.cljs | 20 ++++++++++++++++- src/main/frontend/components/sidebar.css | 10 +++++++++ src/main/frontend/components/theme.css | 4 ++++ src/main/frontend/handler/ui.cljs | 4 ++++ src/main/frontend/state.cljs | 6 ++++- src/main/frontend/ui.cljs | 6 ++--- src/main/frontend/util.cljc | 11 +++++++-- tailwind.config.js | 27 +++++++++++++++++++++++ 10 files changed, 84 insertions(+), 9 deletions(-) diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs index 1e3f49205..7c588975f 100644 --- a/src/main/frontend/components/header.cljs +++ b/src/main/frontend/components/header.cljs @@ -9,6 +9,7 @@ [frontend.storage :as storage] [frontend.config :as config] [frontend.context.i18n :as i18n] + [frontend.handler.ui :as ui-handler] [frontend.handler.user :as user-handler] [frontend.handler.export :as export] [frontend.components.svg :as svg] @@ -120,7 +121,7 @@ (when current-repo {:title (t :settings) - :options {:href (rfe/href :settings)} + :options {:on-click #(ui-handler/toggle-settings-modal!)} :icon svg/settings-sm}) (when current-repo diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index cd91f59b5..77e203fc6 100644 --- a/src/main/frontend/components/page.cljs +++ b/src/main/frontend/components/page.cljs @@ -176,7 +176,7 @@ [state page-name close-fn] (let [input (get state ::input)] (rum/with-context [[t] i18n/*tongue-context*] - [:div + [:div.w-full.sm:max-w-lg.sm:w-96 [:div.sm:flex.sm:items-start [:div.mt-3.text-center.sm:mt-0.sm:text-left [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900 diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs index 873614c36..36d9fb622 100644 --- a/src/main/frontend/components/sidebar.cljs +++ b/src/main/frontend/components/sidebar.cljs @@ -17,6 +17,7 @@ [frontend.storage :as storage] [frontend.util :as util] [frontend.state :as state] + [frontend.handler.ui :as ui-handler] [frontend.handler.user :as user-handler] [frontend.handler.editor :as editor-handler] [frontend.handler.route :as route-handler] @@ -243,6 +244,21 @@ (state/sidebar-add-block! (state/get-current-repo) "help" :help nil))} "?"]))) +(rum/defc settings-modal + [setting-open?] + (rum/use-effect! + (fn [] + (if setting-open? + (state/set-modal! + (fn [close-fn] + (gobj/set close-fn "user-close" #(ui-handler/toggle-settings-modal!)) + [:div.settings-modal (settings/settings)])) + (state/set-modal! nil)) + + (util/lock-global-scroll setting-open?) + #()) + [setting-open?]) nil) + (rum/defcs sidebar < (mixins/modal :modal/show?) rum/reactive @@ -302,7 +318,8 @@ granted? (state/sub [:nfs/user-granted? (state/get-current-repo)]) theme (state/sub :ui/theme) white? (= "white" (state/sub :ui/theme)) - sidebar-open? (state/sub :ui/sidebar-open?) + setting-open? (state/sub :ui/setting-open?) + sidebar-open? (state/sub :ui/sidebar-open?) route-name (get-in route-match [:data :name]) global-graph-pages? (= :graph route-name) logged? (:name me) @@ -349,6 +366,7 @@ (ui/notification) (ui/modal) + (settings-modal setting-open?) (custom-context-menu) [:a#download.hidden] (when diff --git a/src/main/frontend/components/sidebar.css b/src/main/frontend/components/sidebar.css index 4a1d27228..f5010a7c0 100644 --- a/src/main/frontend/components/sidebar.css +++ b/src/main/frontend/components/sidebar.css @@ -52,6 +52,16 @@ } } +.settings-modal { + background-color: var(--ls-primary-background-color); + + max-height: 70vh; + max-width: 800px; + overflow: auto; + margin: -25px; + padding: 20px; +} + .cp__sidebar-layout { display: flex; flex-direction: column; diff --git a/src/main/frontend/components/theme.css b/src/main/frontend/components/theme.css index bd9966606..67ff1bb72 100644 --- a/src/main/frontend/components/theme.css +++ b/src/main/frontend/components/theme.css @@ -205,3 +205,7 @@ html.is-electron { } } } + +html.locked-scroll { + overflow: hidden !important; +} \ No newline at end of file diff --git a/src/main/frontend/handler/ui.cljs b/src/main/frontend/handler/ui.cljs index 4bf9d81f8..53b359cbb 100644 --- a/src/main/frontend/handler/ui.cljs +++ b/src/main/frontend/handler/ui.cljs @@ -33,6 +33,10 @@ (state/sidebar-remove-block! id) (state/sidebar-add-block! current-repo id :contents nil))))) +(defn toggle-settings-modal! + ([] (toggle-settings-modal! (not (:ui/setting-open? @state/state)))) + ([v] (state/set-state! :ui/setting-open? v))) + ;; FIXME: re-render all embedded blocks since they will not be re-rendered automatically diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs index af62a5bae..4f13511ae 100644 --- a/src/main/frontend/state.cljs +++ b/src/main/frontend/state.cljs @@ -46,7 +46,11 @@ ;; custom shortcuts :shortcuts {:editor/new-block "enter"} + ;; modals + :modal/show? false + ;; right sidebar + :ui/setting-open? false :ui/sidebar-open? false :ui/left-sidebar-open? false :ui/theme (or (storage/get :ui/theme) "dark") @@ -897,7 +901,7 @@ (defn set-modal! [modal-panel-content] (swap! state assoc - :modal/show? true + :modal/show? (boolean modal-panel-content) :modal/panel-content modal-panel-content)) (defn close-modal! diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 85f3aa90f..e4db613bf 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -422,17 +422,17 @@ (rum/defc modal-panel [panel-content state close-fn] - [:div.relative.bg-white.rounded-lg.px-4.pt-5.pb-4.overflow-hidden.shadow-xl.transform.transition-all.sm:max-w-lg.sm:w-full.sm:p-6 + [:div.relative.bg-white.rounded-md.px-4.pt-5.pb-4.overflow-hidden.shadow-xl.transform.transition-all.sm:min-w-lg.sm:p-6 {:class (case state "entering" "ease-out duration-300 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" "entered" "ease-out duration-300 opacity-100 translate-y-0 sm:scale-100" "exiting" "ease-in duration-200 opacity-100 translate-y-0 sm:scale-100" "exited" "ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95")} - [:div.absolute.top-0.right-0.pt-4.pr-4 + [:div.absolute.top-0.right-0.pt-2.pr-2 [:button.text-gray-400.hover:text-gray-500.focus:outline-none.focus:text-gray-500.transition.ease-in-out.duration-150 {:aria-label "Close" :type "button" - :on-click close-fn} + :on-click (fn [] (apply (or (gobj/get close-fn "user-close") close-fn) []))} [:svg.h-6.w-6 {:stroke "currentColor", :view-box "0 0 24 24", :fill "none"} [:path diff --git a/src/main/frontend/util.cljc b/src/main/frontend/util.cljc index a09064968..f5b61fdb4 100644 --- a/src/main/frontend/util.cljc +++ b/src/main/frontend/util.cljc @@ -375,8 +375,15 @@ (def moving-frequency 15) #?(:cljs - (defn cur-doc-top [] - (.. js/document -documentElement -scrollTop))) + (defn cur-doc-top [] + (.. js/document -documentElement -scrollTop))) + +#?(:cljs + (defn lock-global-scroll + ([] (lock-global-scroll true)) + ([v] (js-invoke (.-classList (app-scroll-container-node)) + (if v "add" "remove") + "locked-scroll")))) #?(:cljs (defn element-top [elem top] diff --git a/tailwind.config.js b/tailwind.config.js index 6e5d86d8e..7538b57b9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,5 @@ +const colors = require('tailwindcss/colors') + module.exports = { purge: [ './src/**/*.js', @@ -6,4 +8,29 @@ module.exports = { ], plugins: [require('@tailwindcss/ui')], darkMode: 'class', + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + black: colors.black, + white: colors.white, + gray: colors.trueGray, + indigo: { + 50: '#f0f9ff', + 100: '#e0f2fe', + 200: '#bae6fd', + 300: '#7dd3fc', + 400: '#38bdf8', + 500: '#0ea5e9', + 600: '#0284c7', + 700: '#005b8a', + 800: '#075985', + 900: '#0c4a6e', + }, + red: colors.rose, + yellow: colors.amber, + orange: colors.orange, + rose: colors.rose + } + } }