enhance(mobile): polish interaction for the onboarding graph picker

logseq · Nov 7, 2022 · 854f837 · 854f837
1 parent 2697ffd
commit 854f837
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 142 deletions.
diff --git a/src/main/frontend/components/onboarding/setups.cljs b/src/main/frontend/components/onboarding/setups.cljs
@@ -81,7 +81,7 @@
 
        (if native-ios?
          ;; TODO: open for all native mobile platforms
-         (graph-picker/graph-picker-cp onboarding-and-home?)
+         (graph-picker/graph-picker-cp {:onboarding-and-home? onboarding-and-home?})
 
          (if (or (nfs/supported?) (mobile-util/native-platform?))
            [:div.choose.flex.flex-col.items-center

diff --git a/src/main/frontend/components/repo.cljs b/src/main/frontend/components/repo.cljs
@@ -119,7 +119,7 @@
             [:div.mr-8
              (ui/button
                (t :open-a-directory)
-               :on-click #(page-handler/ls-dir-files! shortcut/refresh!))])]]
+               :on-click #(state/pub-event! [:graph/setup-a-repo]))])]]
 
         (when (seq remote-graphs)
           [:div

diff --git a/src/main/frontend/handler/events.cljs b/src/main/frontend/handler/events.cljs
@@ -42,6 +42,7 @@
             [frontend.handler.web.nfs :as nfs-handler]
             [frontend.mobile.core :as mobile]
             [frontend.mobile.util :as mobile-util]
+            [frontend.mobile.graph-picker :as graph-picker]
             [frontend.modules.instrumentation.posthog :as posthog]
             [frontend.modules.outliner.file :as outliner-file]
             [frontend.modules.shortcut.core :as st]
@@ -761,6 +762,13 @@
    :warning
    false))
 
+(defmethod handle :graph/setup-a-repo [[_ opts]]
+  (if (mobile-util/native-ios?)
+    (do (state/set-modal!
+         #(graph-picker/graph-picker-cp {})
+         {:label "graph-setup"}))
+    (page-handler/ls-dir-files! st/refresh! opts)))
+
 (defmethod handle :file/alter [[_ repo path content]]
   (p/let [_ (file-handler/alter-file repo path content {:from-disk? true})]
     (ui-handler/re-render-root!)))

diff --git a/src/main/frontend/mobile/graph_picker.cljs b/src/main/frontend/mobile/graph_picker.cljs
@@ -11,16 +11,18 @@
    [frontend.state :as state]
    [frontend.mobile.util :as mobile-util]
    [frontend.fs :as fs]
+   [frontend.components.svg :as svg]
    [promesa.core :as p]))
 
 (defn validate-graph-dirname
   [root dirname]
 
-  ;; TODO: call plugin api
+  ;; TODO: how to handle existing graph name directory?
+  ;; TODO: temporarily just load the existing folder
   (p/resolved (util/node-path.join root dirname)))
 
 (rum/defc graph-picker-cp
-  [onboarding-and-home?]
+  [{:keys [onboarding-and-home?]}]
   (let [[step set-step!] (rum/use-state :init)
         *input-ref  (rum/create-ref)
         native-ios? (mobile-util/native-ios?)
@@ -59,12 +61,18 @@
            (handle))))
      [step])
 
-    [:div.cp__graph-picker.px-10.py-10.w-full
+    [:div.cp__graph-picker.w-full
+     {:class (when onboarding-and-home? (util/hiccup->class "px-10.py-10"))}
+
+     (when-not onboarding-and-home?
+       [:h1.flex.items-center
+        [:span.scale-75 (svg/logo false)]
+        [:span.pl-1 "Set up a graph"]])
 
      (case step
        ;; step 0
        :init
-       [:div.flex.flex-col.w-full.space-y-4
+       [:div.flex.flex-col.w-full.space-y-3
         (ui/button
          [:span.flex.items-center.justify-between.w-full.py-1
           [:strong "Create a new graph"]