enhance: display a warning button for the demo graph

gombiuda · Aug 25, 2021 · 3c4ad52 · 3c4ad52
1 parent 6e3d09d
commit 3c4ad52
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs
@@ -169,7 +169,9 @@
         repos (->> (state/sub [:me :repos])
                    (remove #(= (:url %) config/local-repo)))
         electron-mac? (and util/mac? (util/electron?))
-        electron-not-mac? (and (util/electron?) (not electron-mac?))]
+        electron-not-mac? (and (util/electron?) (not electron-mac?))
+        show-open-folder? (and (nfs/supported?) (empty? repos)
+                               (not config/publishing?))]
     (rum/with-context [[t] i18n/*tongue-context*]
       [:div.cp__header#head
        {:class (when electron-mac? "electron-mac")
@@ -210,8 +212,14 @@
        [:div.repos
         (repo/repos-dropdown nil)]
 
-       (when (and (nfs/supported?) (empty? repos)
-                  (not config/publishing?))
+       (when show-open-folder?
+         (ui/tippy {:html            [:div.font-medium "Feel free to edit anything, no change will be saved at this moment. If you do want to persist your work, click the right button to open a local directory or connect Logseq to Github."]
+                    :interactive     true
+                    :delay           [1000, 100]
+                    :position        "down"}
+                   [:a.button (svg/warning)]))
+
+       (when show-open-folder?
          [:a.text-sm.font-medium.button
           {:on-click #(page-handler/ls-dir-files! shortcut/refresh!)}
           [:div.flex.flex-row.text-center.open-button__inner.items-center

diff --git a/src/main/frontend/components/header.css b/src/main/frontend/components/header.css
@@ -31,6 +31,11 @@
   a.button {
     margin: 0 4px;
   }
+
+  svg.warning {
+    transform: scale(0.6);
+    color: red;
+  }
 }
 
 .is-electron.is-mac .cp__header {

diff --git a/templates/tutorial-en.md b/templates/tutorial-en.md
@@ -1,7 +1,6 @@
 ## Hi, welcome to Logseq!
 - Logseq is a _privacy-first_, _open-source_ platform for _knowledge_ management and collaboration.
 - This is a 3 minute tutorial on how to use Logseq. Let's get started!
-- [:div.warning-text "Feel free to edit anything, no change will be saved at this moment. If you do want to persist your work, click the top-right corner of the screen to either open a local directory or connect Logseq to Github."]
 - Here are some tips might be useful.
 #+BEGIN_TIP
 Click to edit any block.