From 0dc61453914e46baf652e0da50df2ec76ed4c730 Mon Sep 17 00:00:00 2001 From: charlie Date: Sun, 6 Nov 2022 15:27:01 +0800 Subject: [PATCH] enhance(mobile): onboarding graph picker for non-login user --- .../components/onboarding/setups.cljs | 11 ++- src/main/frontend/components/repo.cljs | 2 +- src/main/frontend/handler/events.cljs | 13 +-- src/main/frontend/handler/web/nfs.cljs | 3 +- src/main/frontend/mobile/graph_picker.cljs | 79 ++++++++++++------- src/main/frontend/mobile/index.css | 21 ++++- 6 files changed, 88 insertions(+), 41 deletions(-) diff --git a/src/main/frontend/components/onboarding/setups.cljs b/src/main/frontend/components/onboarding/setups.cljs index 598d366e5..b0c0d586a 100644 --- a/src/main/frontend/components/onboarding/setups.cljs +++ b/src/main/frontend/components/onboarding/setups.cljs @@ -67,8 +67,11 @@ (rum/defcs picker < rum/reactive [_state onboarding-and-home?] - (let [parsing? (state/sub :repo/parsing-files?) - native-ios? (mobile-util/native-ios?)] + (let [parsing? (state/sub :repo/parsing-files?) + _ (state/sub :auth/id-token) + native-ios? (mobile-util/native-ios?) + native-icloud? (not (string/blank? (state/sub [:mobile/container-urls :iCloudContainerUrl]))) + logged? (user-handler/logged-in?)] (setups-container :picker @@ -81,7 +84,9 @@ (if native-ios? ;; TODO: open for all native mobile platforms - (graph-picker/graph-picker-cp {:onboarding-and-home? onboarding-and-home?}) + (graph-picker/graph-picker-cp {:onboarding-and-home? onboarding-and-home? + :logged? logged? + :native-icloud? native-icloud?}) (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 index 69650d431..d3ac43ee2 100644 --- a/src/main/frontend/components/repo.cljs +++ b/src/main/frontend/components/repo.cljs @@ -195,7 +195,7 @@ (->> (concat repo-links [(when (seq repo-links) {:hr true}) - {:title (t :new-graph) :options {:on-click #(page-handler/ls-dir-files! shortcut/refresh!)}} + {:title (t :new-graph) :options {:on-click #(state/pub-event! [:graph/setup-a-repo])}} {:title (t :all-graphs) :options {:href (rfe/href :repos)}} refresh-link reindex-link diff --git a/src/main/frontend/handler/events.cljs b/src/main/frontend/handler/events.cljs index 9079d5e1a..d90580062 100644 --- a/src/main/frontend/handler/events.cljs +++ b/src/main/frontend/handler/events.cljs @@ -725,11 +725,14 @@ (fs/watch-dir! dir)))) (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))) + (let [opts' (merge {:picked-root-fn #(state/close-modal!) + :native-icloud? (not (string/blank? (state/get-icloud-container-root-url))) + :logged? (user-handler/logged-in?)} opts)] + (if (mobile-util/native-ios?) + (do (state/set-modal! + #(graph-picker/graph-picker-cp opts') + {: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})] diff --git a/src/main/frontend/handler/web/nfs.cljs b/src/main/frontend/handler/web/nfs.cljs index b0705cce9..cef7e215d 100644 --- a/src/main/frontend/handler/web/nfs.cljs +++ b/src/main/frontend/handler/web/nfs.cljs @@ -122,7 +122,7 @@ (defn ^:large-vars/cleanup-todo ls-dir-files-with-handler! "Read files from directory and setup repo (for the first time setup a repo)" ([ok-handler] (ls-dir-files-with-handler! ok-handler nil)) - ([ok-handler {:keys [empty-dir?-or-pred dir-result-fn ios-logseq-sync?]}] + ([ok-handler {:keys [empty-dir?-or-pred dir-result-fn picked-root-fn ios-logseq-sync?]}] (let [path-handles (atom {}) electron? (util/electron?) mobile-native? (mobile-util/native-platform?) @@ -149,6 +149,7 @@ (fn? empty-dir?-or-pred) (empty-dir?-or-pred result))) root-handle (first result) + _ (when (fn? picked-root-fn) (picked-root-fn root-handle)) dir-name (if nfs? (gobj/get root-handle "name") root-handle) diff --git a/src/main/frontend/mobile/graph_picker.cljs b/src/main/frontend/mobile/graph_picker.cljs index 7a97f848e..bcc9dcf5c 100644 --- a/src/main/frontend/mobile/graph_picker.cljs +++ b/src/main/frontend/mobile/graph_picker.cljs @@ -21,34 +21,52 @@ ;; TODO: temporarily just load the existing folder (p/resolved (util/node-path.join root dirname))) +(rum/defc toggle-item + [{:keys [on? disabled? title on-toggle]}] + (ui/button + [:span.flex.items-center.justify-between.w-full.py-1 + [:strong title] + (ui/icon (if on? "toggle-right" "toggle-left"))] + + :class (str "toggle-item " (when on? "is-on")) + :intent "logseq" + :on-mouse-down #(util/stop %) + :on-click #(when (fn? on-toggle) + (on-toggle (not on?))))) + (rum/defc graph-picker-cp - [{:keys [onboarding-and-home?]}] + [{:keys [onboarding-and-home? logged? native-icloud?] :as opts}] (let [[step set-step!] (rum/use-state :init) - *input-ref (rum/create-ref) - native-ios? (mobile-util/native-ios?) + [sync-mode set-sync-mode!] (rum/use-state + (cond + logged? :logseq-sync + native-icloud? :icloud-sync)) + icloud-sync-on? (= sync-mode :icloud-sync) + logseq-sync-on? (= sync-mode :logseq-sync) + *input-ref (rum/create-ref) + native-ios? (mobile-util/native-ios?) - open-picker #(page-handler/ls-dir-files! - (fn [] - (shortcut/refresh!))) - on-create (fn [input-val] - (let [graph-name (util/safe-sanitize-file-name input-val)] - (if (string/blank? graph-name) - (notification/show! "Illegal graph folder name.") + open-picker #(page-handler/ls-dir-files! shortcut/refresh! opts) + on-create (fn [input-val] + (let [graph-name (util/safe-sanitize-file-name input-val)] + (if (string/blank? graph-name) + (notification/show! "Illegal graph folder name.") - ;; create graph directory under Logseq document folder - ;; TODO: icloud sync - (when-let [root (state/get-local-container-root-url)] - (-> (validate-graph-dirname root graph-name) - (p/then (fn [graph-path] - (-> (fs/mkdir! graph-path) - (p/then (fn [] - (web-nfs/ls-dir-files-with-path! graph-path) - (notification/show! (str "Create graph: " graph-name) :success)))))) - (p/catch (fn [^js e] - (notification/show! (str e) :error) - (js/console.error e))) - (p/finally - #()))))))] + ;; create graph directory under Logseq document folder + ;; TODO: icloud sync + (when-let [root (if icloud-sync-on? (state/get-icloud-container-root-url) + (state/get-local-container-root-url))] + (-> (validate-graph-dirname root graph-name) + (p/then (fn [graph-path] + (-> (fs/mkdir! graph-path) + (p/then (fn [] + (web-nfs/ls-dir-files-with-path! graph-path opts) + (notification/show! (str "Create graph: " graph-name) :success)))))) + (p/catch (fn [^js e] + (notification/show! (str e) :error) + (js/console.error e))) + (p/finally + #()))))))] (rum/use-effect! (fn [] @@ -100,13 +118,14 @@ :ref *input-ref :placeholder "What's the graph name?"}] - (ui/button - [:span.flex.items-center.justify-between.w-full.py-1 - [:strong "Logseq sync"] - (ui/icon "toggle-right")] + (when logged? + (toggle-item {:title "Logseq sync" + :on? logseq-sync-on?})) - :intent "logseq" - :on-click #()) + (when (and native-icloud? (not logseq-sync-on?)) + (toggle-item {:title "iCloud sync" + :on? icloud-sync-on? + :on-toggle #(set-sync-mode! (if % :icloud-sync nil))})) [:div.flex.justify-between.items-center.pt-2 (ui/button [:span.flex.items-center diff --git a/src/main/frontend/mobile/index.css b/src/main/frontend/mobile/index.css index 8069152e4..659dff1e0 100644 --- a/src/main/frontend/mobile/index.css +++ b/src/main/frontend/mobile/index.css @@ -199,12 +199,31 @@ html.is-zoomed-native-ios { } } + +.cp__graph-picker { + button.toggle-item { + @apply opacity-90 hover:text-inherit; + + .ui__icon { + @apply scale-150; + } + + &.is-on { + @apply opacity-100; + + .ui__icon { + @apply text-indigo-600; + } + } + } +} + .ui__modal { &[label=graph-setup] { align-items: center; .ui__modal-panel { - transform: translate3d(0, -60px, 0); + transform: translate3d(0, -70px, 0); } .panel-content {