首頁 探索 說明
註冊 登入
Apq
/
logseq
镜像来自 https://github.com/logseq/logseq.git
1
0
複刻 0
檔案 問題管理 0 Wiki
瀏覽代碼

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

charlie 3 年之前
父節點
cb307d3cec
當前提交
d976eb5182
共有 9 個文件被更改，包括 64 次插入 和 43 次删除
分割檢視 顯示文件統計
  1. 1 1
      resources/index.html
  2. 2 2
      src/main/frontend/components/header.css
  3. 2 2
      src/main/frontend/components/onboarding.cljs
  4. 10 5
      src/main/frontend/components/onboarding/index.css
  5. 2 2
      src/main/frontend/components/onboarding/setups.cljs
  6. 8 9
      src/main/frontend/components/sidebar.cljs
  7. 7 5
      src/main/frontend/components/sidebar.css
  8. 20 16
      src/main/frontend/fs/capacitor_fs.cljs
  9. 12 1
      src/main/frontend/mobile/graph_picker.cljs

+ 1 - 1
resources/index.html
查看文件 

@@ -2,7 +2,7 @@
 
 <html>
 
 <head>
 
   <meta charset="utf-8">
 
-  <meta content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" name="viewport">
 
+  <meta content="minimum-scale=1, initial-scale=1, maximum-scale=1, width=device-width, shrink-to-fit=no" name="viewport">
 
   <link rel="stylesheet" type="text/css" href="./css/tabler-icons.min.css">
 
   <link href="./css/style.css" rel="stylesheet" type="text/css">
 
   <link href="./img/logo.png" rel="shortcut icon" type="image/png">

+ 2 - 2
src/main/frontend/components/header.css
查看文件 

@@ -229,7 +229,7 @@ html.is-native-iphone-without-notch,
 
 html.is-native-ipad {
 
 
   #main-container {
 
-    padding-top: 0px;
 
+    padding-top: 0;
 
     display: flex;
 
     flex-direction: column;
 
   }
 
@@ -237,7 +237,7 @@ html.is-native-ipad {
 
   #main-content-container {
 
     padding-left: 22px;
 
     padding-right: 14px;
 
-    padding-top: 0px;
 
+    padding-top: 0;
 
     height: calc(100vh - var(--ls-headbar-inner-top-padding) - var(--ls-headbar-height));
 
 
     @screen sm {

+ 2 - 2
src/main/frontend/components/onboarding.cljs
查看文件 

@@ -6,8 +6,8 @@
 
             [frontend.components.onboarding.setups :as setups]))
 
 
 (rum/defc intro
 
-  []
 
-  (setups/picker))
 
+  [onboarding-and-home?]
 
+  (setups/picker onboarding-and-home?))
 
 
 (defn help
 
   []

+ 10 - 5
src/main/frontend/components/onboarding/index.css
查看文件 

@@ -568,16 +568,13 @@ html.is-native-iphone,
 
 html.is-native-iphone-without-notch {
 
   .cp__onboarding {
 
     &-setups {
 
-      position: absolute;
 
       width: 100%;
 
-      top: 0;
 
-      left: 0;
 
-      height: 100vh;
 
+      height: 100%;
 
       overflow-y: auto;
 
 
       .inner-card {
 
         padding-top: 30px;
 
-        min-height: 100vh;
 
+        min-height: 100%;
 
         width: 100%;
 
 
         > h2 {
 
@@ -617,3 +614,11 @@ html.is-native-iphone-without-notch {
 
     }
 
   }
 
 }
 
+
 
+html.is-native-android {
 
+  .cp__onboarding-setups {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+  }
 
+}

+ 2 - 2
src/main/frontend/components/onboarding/setups.cljs
查看文件 

@@ -66,7 +66,7 @@
 
      nil)])
 
 
 (rum/defcs picker < rum/reactive
 
-  [_state]
 
+  [_state onboarding-and-home?]
 
   (let [parsing?    (state/sub :repo/parsing-files?)
 
         native-ios? (mobile-util/native-ios?)]
 
 
@@ -81,7 +81,7 @@
 
 
        (if native-ios?
 
          ;; TODO: open for all native mobile platforms
 
-         (graph-picker/graph-picker-cp)
 
+         (graph-picker/graph-picker-cp onboarding-and-home?)
 
 
          (if (or (nfs/supported?) (mobile-util/native-platform?))
 
            [:div.choose.flex.flex-col.items-center

+ 8 - 9
src/main/frontend/components/sidebar.cljs
查看文件 

@@ -397,7 +397,8 @@
 
   (let [left-sidebar-open? (state/sub :ui/left-sidebar-open?)
 
         onboarding-and-home? (and (or (nil? (state/get-current-repo)) (config/demo-graph?))
 
                                   (not config/publishing?)
 
-                                  (= :home route-name))]
 
+                                  (= :home route-name))
 
+        margin-less-pages? (or onboarding-and-home? margin-less-pages?)]
 
     [:div#main-container.cp__sidebar-main-layout.flex-1.flex
 
      {:class (util/classnames [{:is-left-sidebar-open left-sidebar-open?}])}
 
 
@@ -442,17 +443,15 @@
 
 
          :else
 
          [:div
 
-          {:class (if margin-less-pages? "" (util/hiccup->class "mx-auto.pb-24"))
 
-           :style {:margin-bottom (cond
 
-                                    margin-less-pages? 0
 
-                                    onboarding-and-home? -48
 
-                                    :else 120)
 
-                   :padding-bottom (when (mobile-util/native-iphone?) "7rem")}}
 
+          {:class (if (or onboarding-and-home? margin-less-pages?) "" (util/hiccup->class "mx-auto.pb-24"))
 
+           :style {:margin-bottom  (cond
 
+                                     margin-less-pages? 0
 
+                                     onboarding-and-home? 0
 
+                                     :else 120)}}
 
           main-content])
 
 
        (when onboarding-and-home?
 
-         [:div {:style {:padding-bottom 200}}
 
-          (onboarding/intro)])]]]))
 
+         (onboarding/intro onboarding-and-home?))]]]))
 
 
 (defonce sidebar-inited? (atom false))
 
 ;; TODO: simplify logic

+ 7 - 5
src/main/frontend/components/sidebar.css
查看文件 

@@ -65,11 +65,12 @@
 
 
 #main-content-container {
 
   @apply p-4 sm:px-8;
 
+
 
   font-size: 1em;
 
 }
 
 
 #main-content-container[data-is-margin-less-pages=true] {
 
-  padding: 0;
 
+  padding: 0 !important;
 
   position: relative;
 
 }
 
 
@@ -614,13 +615,14 @@ html[data-theme='dark'] {
 
 }
 
 
 a.ui__modal-close svg, a.close svg, span.rotating-arrow svg {
 
-    color: var(--ls-primary-text-color);
 
+  color: var(--ls-primary-text-color);
 
 }
 
+
 
 a.ui__modal-close, a.close {
 
-    color: var(--ls-primary-text-color);
 
-    opacity: 0.6;
 
+  color: var(--ls-primary-text-color);
 
+  opacity: 0.6;
 
 }
 
 
 a.ui__modal-close:hover, a.close:hover {
 
-    opacity: 1;
 
+  opacity: 1;
 
 }

+ 20 - 16
src/main/frontend/fs/capacitor_fs.cljs
查看文件 

@@ -219,29 +219,33 @@
 
                       (log/error :write-file-failed error)))))))))
 
 
 (defn normalize-file-protocol-path [dir path]
 
-  (let [dir        (some-> dir (string/replace #"/+$" ""))
 
-        dir        (if (and (not-empty dir) (string/starts-with? dir "/"))
 
-                     (do
 
-                       (js/console.trace "WARN: detect absolute path, use URL instead")
 
-                       (str "file://" (js/encodeURI dir)))
 
-                     dir)
 
-        path       (some-> path (string/replace #"^/+" ""))
 
-        encode-url #(let [encoded-chars?
 
-                          (and (string? %) (boolean (re-find #"(?i)%[0-9a-f]{2}" %)))]
 
-                      (cond-> %
 
-                        (not encoded-chars?)
 
-                        (js/encodeURI path)))]
 
+  (let [dir             (some-> dir (string/replace #"/+$" ""))
 
+        dir             (if (and (not-empty dir) (string/starts-with? dir "/"))
 
+                          (do
 
+                            (js/console.trace "WARN: detect absolute path, use URL instead")
 
+                            (str "file://" (js/encodeURI dir)))
 
+                          dir)
 
+        path            (some-> path (string/replace #"^/+" ""))
 
+        safe-encode-url #(let [encoded-chars?
 
+                               (and (string? %) (boolean (re-find #"(?i)%[0-9a-f]{2}" %)))]
 
+                           (cond
 
+                             (not encoded-chars?)
 
+                             (js/encodeURI %)
 
+
 
+                             :else
 
+                             (js/encodeURI (js/decodeURI %))))]
 
+
 
     (cond (string/blank? path)
 
-          (encode-url dir)
 
+          (safe-encode-url dir)
 
 
           (string/blank? dir)
 
-          (encode-url path)
 
+          (safe-encode-url path)
 
 
           (string/starts-with? path dir)
 
-          (encode-url path)
 
+          (safe-encode-url path)
 
 
           :else
 
-          (let [path' (encode-url path)]
 
+          (let [path' (safe-encode-url path)]
 
             (str dir "/" path')))))
 
 
 (defn- local-container-path?

+ 12 - 1
src/main/frontend/mobile/graph_picker.cljs
查看文件 

@@ -20,7 +20,7 @@
 
   (p/resolved (util/node-path.join root dirname)))
 
 
 (rum/defc graph-picker-cp
 
-  []
 
+  [onboarding-and-home?]
 
   (let [[step set-step!] (rum/use-state :init)
 
         *input-ref  (rum/create-ref)
 
         native-ios? (mobile-util/native-ios?)
 
@@ -48,6 +48,17 @@
 
                                 (p/finally
 
                                  #()))))))]
 
 
+    (rum/use-effect!
 
+     (fn []
 
+       (when-let [^js input (and onboarding-and-home?
 
+                                 (rum/deref *input-ref))]
 
+         (let [handle (fn [] (js/setTimeout
 
+                              #(.scrollIntoView
 
+                                input #js {:behavior "smooth", :block "center", :inline "nearest"}) 100))]
 
+           (.addEventListener input "focus" handle)
 
+           (handle))))
 
+     [step])
 
+
 
     [:div.cp__graph-picker.px-10.py-10.w-full
 
 
      (case step