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

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

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

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!)))

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"]

src/main/frontend/mobile/index.css

@@ -1,66 +1,66 @@
 .cp__footer {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  padding: 10px 20px;
+  background-color: var(--ls-primary-background-color);
+  z-index: 10;
+  display: flex;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  height: 80px;
+  align-items: start;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
+
+  .bottom-action {
+    width: 23px;
+    height: 23px;
+  }
+
+  .ti, .timer {
+    color: var(--ls-primary-text-color);
+  }
+
+  .timer {
     position: absolute;
-    bottom: 0px;
-    left: 0px;
-    padding: 10px 20px;
-    background-color: var(--ls-primary-background-color);
-    z-index: 10;
-    display: flex;
-    flex: 0 0 auto;
-    white-space: nowrap;
-    height: 80px;
-    align-items: start;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
-
-    .bottom-action {
-        width: 23px;
-        height: 23px;
-    }
-                                                             
-    .ti, .timer {
-        color: var(--ls-primary-text-color);
-    }
-
-    .timer {
-        position: absolute;
-        left: 40px;
-    }
+    left: 40px;
+  }
 }
 
 .action-bar {
-    position: absolute;
-    bottom: 100px;
-    height: 70px;
-    padding: 6px;
-    border-radius: 10px;
-    background-color: var(--ls-secondary-background-color);
-    overflow-x: overlay;
-    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(27, 31, 35, 0.10) 0px 0px 0px 1px;
-    z-index: 100;
-        
-    .action-bar-commands {
-        position: relative;
-        display: flex;
-        justify-content: space-around;
-        width: 120%;
-        
-        
-        .ti, .tie {
-            color: var(--ls-primary-text-color);
-            font-size: 23px;
-            opacity: 50%;
-        }
-        
-        .description {
-            color: var(--ls-primary-text-color);
-            font-size: 13px;
-            opacity: 60%;
-        }
-        
-        button {
-            padding: 5px 10px
-        }
+  position: absolute;
+  bottom: 100px;
+  height: 70px;
+  padding: 6px;
+  border-radius: 10px;
+  background-color: var(--ls-secondary-background-color);
+  overflow-x: overlay;
+  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(27, 31, 35, 0.10) 0px 0px 0px 1px;
+  z-index: 100;
+
+  .action-bar-commands {
+    position: relative;
+    display: flex;
+    justify-content: space-around;
+    width: 120%;
+
+
+    .ti, .tie {
+      color: var(--ls-primary-text-color);
+      font-size: 23px;
+      opacity: 50%;
     }
+
+    .description {
+      color: var(--ls-primary-text-color);
+      font-size: 13px;
+      opacity: 60%;
+    }
+
+    button {
+      padding: 5px 10px
+    }
+  }
 }
 
 #mobile-editor-toolbar {
@@ -78,23 +78,23 @@
   justify-content: space-between;
 
   button {
-      padding: 7px 10px;
+    padding: 7px 10px;
 
-      .submenu {
-          background-color: red;
-          z-index: 100;
-          background-color: var(--ls-secondary-background-color);
-          border-radius: 5px;
-          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
-          overflow-x: overlay;
-          overflow-y: hidden;
-          left: 0px;
-          height: 40px;
-      }
+    .submenu {
+      background-color: red;
+      z-index: 100;
+      background-color: var(--ls-secondary-background-color);
+      border-radius: 5px;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
+      overflow-x: overlay;
+      overflow-y: hidden;
+      left: 0px;
+      height: 40px;
+    }
 
-      .show-submenu {
-          display: block;
-      }
+    .show-submenu {
+      display: block;
+    }
   }
 
   .toolbar-commands {
@@ -112,90 +112,117 @@
   }
 }
 
-
 html.is-native-ipad {
-    .cp__footer {
-        height: 55px;
-        right: 0;
-        box-shadow: none;
-        flex: 1;
-        index: 0;
-    }
-    
-    .action-bar {
-        width: 70%;
-        min-width:550px;
-        
-        .action-bar-commands {
-            width: 100%;
-        }
+  .cp__footer {
+    height: 55px;
+    right: 0;
+    box-shadow: none;
+    flex: 1;
+    index: 0;
+  }
 
-        @media (orientation: landscape) {
-            width: 50%;
-        }
+  .action-bar {
+    width: 70%;
+    min-width: 550px;
+
+    .action-bar-commands {
+      width: 100%;
     }
+
+    @media (orientation: landscape) {
+      width: 50%;
+    }
+  }
 }
 
 html.is-native-iphone {
 
+  .action-bar {
+    left: 3%;
+    right: 3%;
+  }
+
+  @media (orientation: landscape) {
+    .cp__footer {
+      height: 45px;
+    }
+
     .action-bar {
-        left: 3%;
-        right: 3%;
-    }
-    
-    @media (orientation: landscape) {
-        .cp__footer {
-            height: 45px;
-        }
+      bottom: 50px;
+      left: 15%;
+      right: 15%;
+      width: 70%;
+      min-width: 450px;
 
-        .action-bar {
-            bottom: 50px;
-            left: 15%;
-            right: 15%;
-            width: 70%;
-            min-width: 450px;
-
-            .action-bar-commands {
-                width: 100%;
-            }
-        }
+      .action-bar-commands {
+        width: 100%;
+      }
     }
+  }
 }
 
 html.is-native-iphone-without-notch,
 html.is-native-android {
-    .cp__footer {
-        height: 45px;
-    }
-    
+  .cp__footer {
+    height: 45px;
+  }
+
+  .action-bar {
+    left: 5%;
+    right: 5%;
+  }
+
+  @media (orientation: landscape) {
+
     .action-bar {
-        left: 5%;
-        right: 5%;
-    }
+      bottom: 50px;
+      left: 15%;
+      right: 15%;
+      width: 70%;
 
-    @media (orientation: landscape) {
-        
-        .action-bar {
-            bottom: 50px;
-            left: 15%;
-            right: 15%;
-            width: 70%;
-
-            .action-bar-commands {
-                width: 100%;
-            }
-        }
+      .action-bar-commands {
+        width: 100%;
+      }
     }
+  }
 }
 
 html.is-zoomed-native-ios {
+  .cp__footer {
+    height: 70px;
+  }
+
+  @media (orientation: landscape) {
     .cp__footer {
-        height: 70px;
+      height: 50px;
+    }
+  }
+}
+
+.ui__modal {
+  &[label=graph-setup] {
+    align-items: center;
+
+    .ui__modal-panel {
+      transform: translate3d(0, -60px, 0);
     }
 
-    @media (orientation: landscape) {
-        .cp__footer {
-            height: 50px;
-        }
+    .panel-content {
+      padding: 0;
     }
-}
+
+    .cp__graph-picker {
+      padding: 58px 20px 26px 20px;
+      background: var(--ls-search-background-color);
+
+      > h1 {
+        position: absolute;
+        font-size: 18px;
+        font-weight: 500;
+        top: 12px;
+        left: 20px;
+        opacity: .9;
+      }
+    }
+  }
+}

src/main/frontend/ui.css

@@ -106,7 +106,7 @@
     .panel-content {
       overflow-y: auto;
       overflow-x: hidden;
-      width: 94vw;
+      width: calc(94vw - 2rem);
       max-height: 89vh;
       padding: 2rem 1.5rem;