feat(ui): use modal dialog display settings page

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

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

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

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;

src/main/frontend/components/theme.css

@@ -205,3 +205,7 @@ html.is-electron {
     }
   }
 }
+
+html.locked-scroll {
+  overflow: hidden !important;
+}

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
 
 

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!

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

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]

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