From 3f04b687ac03dd9eea37e4dbe56181f644a2ccf1 Mon Sep 17 00:00:00 2001 From: charlie Date: Sat, 5 Nov 2022 12:31:42 +0800 Subject: [PATCH] improve(mobile): WIP onboarding for set-up a graph --- .../components/onboarding/setups.cljs | 51 +++++++++++-------- src/main/frontend/handler/notification.cljs | 2 + src/main/frontend/mobile/graph_picker.cljs | 22 ++++++++ src/main/frontend/ui.cljs | 41 +++++---------- 4 files changed, 65 insertions(+), 51 deletions(-) create mode 100644 src/main/frontend/mobile/graph_picker.cljs diff --git a/src/main/frontend/components/onboarding/setups.cljs b/src/main/frontend/components/onboarding/setups.cljs index f9d5ec0c81..bc74687fe3 100644 --- a/src/main/frontend/components/onboarding/setups.cljs +++ b/src/main/frontend/components/onboarding/setups.cljs @@ -10,9 +10,11 @@ [frontend.util :as util] [frontend.handler.web.nfs :as nfs] [frontend.mobile.util :as mobile-util] + [frontend.mobile.graph-picker :as graph-picker] [frontend.handler.notification :as notification] [frontend.handler.external :as external-handler] [frontend.modules.shortcut.core :as shortcut] + [frontend.handler.user :as user-handler] [clojure.string :as string] [goog.object :as gobj])) @@ -65,7 +67,8 @@ (rum/defcs picker < rum/reactive [_state] - (let [parsing? (state/sub :repo/parsing-files?)] + (let [parsing? (state/sub :repo/parsing-files?) + native-ios? (mobile-util/native-ios?)] (setups-container :picker @@ -73,30 +76,34 @@ [:section.a [:strong "Let’s get you set up."] [:small (str "Where on your " DEVICE " do you want to save your work?") - (when (mobile-util/native-platform?) + (when (and (mobile-util/native-platform?) (not native-ios?)) (mobile-intro))] - (if (or (nfs/supported?) (mobile-util/native-platform?)) - [:div.choose.flex.flex-col.items-center - {:on-click #(page-handler/ls-dir-files! - (fn [] - (shortcut/refresh!)))} - [:i] - [:div.control - [:label.action-input.flex.items-center.justify-center.flex-col - {:disabled parsing?} + (if native-ios? + ;; TODO: open for all native mobile platforms + (graph-picker/graph-picker-cp) - (if parsing? - (ui/loading "") - [[:strong "Choose a folder"] - [:small "Open existing directory or Create a new one"]])]]] - [:div.px-5 - (ui/admonition :warning - [:p "It seems that your browser doesn't support the " - [:a {:href "https://web.dev/file-system-access/" - :target "_blank"} - "new native filesystem API"] - [:span ", please use any Chromium 86+ based browser like Chrome, Vivaldi, Edge, etc. Notice that the API doesn't support mobile browsers at the moment."]])])] + (if (or (nfs/supported?) (mobile-util/native-platform?)) + [:div.choose.flex.flex-col.items-center + {:on-click #(page-handler/ls-dir-files! + (fn [] + (shortcut/refresh!)))} + [:i] + [:div.control + [:label.action-input.flex.items-center.justify-center.flex-col + {:disabled parsing?} + + (if parsing? + (ui/loading "") + [[:strong "Choose a folder"] + [:small "Open existing directory or Create a new one"]])]]] + [:div.px-5 + (ui/admonition :warning + [:p "It seems that your browser doesn't support the " + [:a {:href "https://web.dev/file-system-access/" + :target "_blank"} + "new native filesystem API"] + [:span ", please use any Chromium 86+ based browser like Chrome, Vivaldi, Edge, etc. Notice that the API doesn't support mobile browsers at the moment."]])]))] [:section.b.flex.items-center.flex-col [:p.flex [:i.as-flex-center (ui/icon "zoom-question" {:style {:fontSize "22px"}})] diff --git a/src/main/frontend/handler/notification.cljs b/src/main/frontend/handler/notification.cljs index 5d755aad0c..71bd164500 100644 --- a/src/main/frontend/handler/notification.cljs +++ b/src/main/frontend/handler/notification.cljs @@ -13,6 +13,8 @@ (state/set-state! :notification/contents nil)) (defn show! + ([content] + (show! content :info true nil 1500)) ([content status] (show! content status true nil 1500)) ([content status clear?] diff --git a/src/main/frontend/mobile/graph_picker.cljs b/src/main/frontend/mobile/graph_picker.cljs new file mode 100644 index 0000000000..c023918d71 --- /dev/null +++ b/src/main/frontend/mobile/graph_picker.cljs @@ -0,0 +1,22 @@ +(ns frontend.mobile.graph-picker + (:require [rum.core :as rum] + [frontend.ui :as ui] + [frontend.handler.notification :as notification])) + +(rum/defc graph-picker-cp + [] + [:div.flex.flex-col.w-full.px-10.space-y-4.pt-8 + (ui/button + [:span.flex.items-center.justify-between.w-full.py-1 + [:strong "Create a new graph"] + (ui/icon "chevron-right")] + + :on-click #(notification/show! "Hi Graph :)")) + + (ui/button + [:span.flex.items-center.justify-between.w-full.py-1 + [:strong "Select an existing graph"] + (ui/icon "folder-plus")] + + :intent "logseq" + :on-click #(notification/show! "Hi Folder :)"))]) diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 4fbc340c7a..e49b9fb71d 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -36,6 +36,8 @@ [promesa.core :as p] [rum.core :as rum])) +(declare icon) + (defonce transition-group (r/adapt-class TransitionGroup)) (defonce css-transition (r/adapt-class CSSTransition)) (defonce textarea (r/adapt-class (gobj/get TextareaAutosize "default"))) @@ -216,29 +218,15 @@ (let [svg (case status :success - [:svg.h-6.w-6.text-green-400 - {:stroke "var(--ls-success-color)", :viewBox "0 0 24 24", :fill "none"} - [:path - {:d "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" - :stroke-width "2" - :stroke-linejoin "round" - :stroke-linecap "round"}]] - :warning - [:svg.h-6.w-6.text-yellow-500 - {:stroke "var(--ls-warning-color)", :viewBox "0 0 24 24", :fill "none"} - [:path - {:d "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" - :stroke-width "2" - :stroke-linejoin "round" - :stroke-linecap "round"}]] + (icon "circle-check" {:class "text-green-500" :size "22"}) - [:svg.h-6.w-6.text-red-500 - {:view-box "0 0 20 20", :fill "var(--ls-error-color)"} - [:path - {:clip-rule "evenodd" - :d - "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" - :fill-rule "evenodd"}]])] + :warning + (icon "alert-circle" {:class "text-yellow-500" :size "22"}) + + :error + (icon "circle-x" {:class "text-red-500" :size "22"}) + + (icon "info-circle" {:class "text-indigo-500" :size "22"}))] [:div.ui__notifications-content {:style (when (or (= state "exiting") @@ -264,13 +252,8 @@ [:button.inline-flex.text-gray-400.focus:outline-none.focus:text-gray-500.transition.ease-in-out.duration-150.notification-close-button {:on-click (fn [] (notification/clear! uid))} - [:svg.h-5.w-5 - {:fill "currentColor", :view-Box "0 0 20 20"} - [:path - {:clip-rule "evenodd" - :d - "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" - :fill-rule "evenodd"}]]]]]]]]]))) + + (icon "x" {:fill "currentColor"})]]]]]]]))) (rum/defc notification < rum/reactive []