mirror of https://github.com/logseq/logseq
UI tweaks
Tienson Qin
parent
06e4993057
commit
736077e1ef
|
|
@ -1,6 +1,7 @@
|
|||
(ns frontend.components.repo
|
||||
(:require [rum.core :as rum]
|
||||
[frontend.components.widgets :as widgets]
|
||||
[frontend.ui :as ui]
|
||||
[frontend.state :as state]
|
||||
[frontend.db :as db]
|
||||
[frontend.handler :as handler]
|
||||
|
|
@ -17,18 +18,27 @@
|
|||
(if (seq repos)
|
||||
[:div#repos
|
||||
[:h1.title "Your Repos: "]
|
||||
(for [{:keys [id url] :as repo} repos]
|
||||
[:div.flex.justify-between.mb-1 {:key id}
|
||||
[:a {:target "_blank"
|
||||
:href url}
|
||||
(db/get-repo-path url)]
|
||||
[:div.controls
|
||||
[:a.control {:title "Clone again and rebuild the db"
|
||||
:on-click (fn []
|
||||
(handler/rebuild-index! repo)
|
||||
(handler/redirect! {:to :home}))}
|
||||
"Rebuild index"]
|
||||
[:a.text-gray-400.ml-4 {:on-click (fn []
|
||||
(handler/remove-repo! repo))}
|
||||
"Remove"]]])]
|
||||
|
||||
[:div.pl-1.content
|
||||
[:a {:href "/repo/add"}
|
||||
"Add another repo"]
|
||||
;; (ui/button
|
||||
;; :href "/repo/add")
|
||||
|
||||
[:hr]
|
||||
|
||||
(for [{:keys [id url] :as repo} repos]
|
||||
[:div.flex.justify-between.mb-1 {:key id}
|
||||
[:a {:target "_blank"
|
||||
:href url}
|
||||
(db/get-repo-path url)]
|
||||
[:div.controls
|
||||
[:a.control {:title "Clone again and rebuild the db"
|
||||
:on-click (fn []
|
||||
(handler/rebuild-index! repo)
|
||||
(handler/redirect! {:to :home}))}
|
||||
"Rebuild index"]
|
||||
[:a.text-gray-400.ml-4 {:on-click (fn []
|
||||
(handler/remove-repo! repo))}
|
||||
"Remove"]]])]]
|
||||
(widgets/add-repo))))
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
(rum/defc sidebar-item < rum/reactive
|
||||
[idx db-id block-type block-data]
|
||||
(let [collapse? (state/sub [:ui/sidebar-collapsed-blocks db-id])]
|
||||
[:div.sidebar-item
|
||||
[:div.sidebar-item.content
|
||||
(let [[title component] (build-sidebar-item db-id block-type block-data)]
|
||||
[:div.flex.flex-col
|
||||
[:div.flex.flex-row.justify-between
|
||||
|
|
@ -62,9 +62,7 @@
|
|||
[:div.ml-1 {:style {:font-size "1.5rem"}} title]]
|
||||
[:a.close.hover:text-gray-900.text-gray-500.flex.items-center
|
||||
{:on-click (fn []
|
||||
(state/sidebar-remove-block! idx)
|
||||
(when (empty? (state/get-sidebar-blocks))
|
||||
(handler/hide-right-sidebar)))}
|
||||
(state/sidebar-remove-block! idx))}
|
||||
svg/close]]
|
||||
[:div {:class (if collapse? "hidden" "initial")}
|
||||
component]])]))
|
||||
|
|
@ -106,10 +104,22 @@
|
|||
|
||||
(rum/defcs sidebar < rum/reactive
|
||||
[state]
|
||||
(let [blocks (state/sub :sidebar/blocks)]
|
||||
[:div#right-sidebar.flex.flex-col.p-2.shadow-xs.overflow-y-auto.content {:style {:padding-bottom 300}}
|
||||
(let [blocks (state/sub :sidebar/blocks)
|
||||
repo (state/sub :git/current-repo)
|
||||
starred (state/sub [:config repo :starred])]
|
||||
[:div#right-sidebar.flex.flex-col.p-2.shadow-xs.overflow-y-auto {:style {:padding-bottom 300}}
|
||||
(for [[idx [db-id block-type block-data]] (medley/indexed blocks)]
|
||||
(rum/with-key
|
||||
(sidebar-item idx db-id block-type block-data)
|
||||
(str "sidebar-block-" idx)))
|
||||
(graph)]))
|
||||
(graph)
|
||||
(when (and repo (seq starred))
|
||||
[:div.sidebar-item.flex-col.flex-1.content
|
||||
[:div.flex.flex-row
|
||||
[:div.ml-2.font-bold "Starred pages"]]
|
||||
(for [page starred]
|
||||
(let [encoded-page (util/url-encode page)]
|
||||
[:a.mt-1.flex.items-center.pl-2.py-2.text-base.leading-6
|
||||
{:key encoded-page
|
||||
:href (str "/page/" encoded-page)}
|
||||
(util/capitalize-all page)]))])]))
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
(let [search-result (state/sub :search/result)
|
||||
search-q (state/sub :search/q)
|
||||
show-result? (boolean (seq search-result))]
|
||||
[:div#search.flex-1.flex.ml-0.md:ml-10.sidebar-open
|
||||
[:div#search.flex-1.flex.ml-0.md:ml-12
|
||||
[:div.w-full.flex.md:ml-0
|
||||
[:label.sr-only {:for "search_field"} "Search"]
|
||||
[:div.relative.w-full.text-gray-400.focus-within:text-gray-600
|
||||
|
|
|
|||
|
|
@ -26,29 +26,37 @@
|
|||
:src "/static/img/logo.png"}]]])
|
||||
|
||||
(rum/defc repos < rum/reactive
|
||||
[current-repo close-modal-fn]
|
||||
(if current-repo
|
||||
(let [repos (state/sub [:me :repos])]
|
||||
(if (> (count repos) 1)
|
||||
(ui/dropdown-with-links
|
||||
(fn [{:keys [toggle-fn]}]
|
||||
[:a.hover:text-gray-200.text-gray-500.font-bold {:on-click toggle-fn}
|
||||
[:span (string/capitalize (util/take-at-most (db/get-repo-name current-repo) 20))]
|
||||
[:span.dropdown-caret.ml-1 {:style {:border-top-color "#6b7280"}}]])
|
||||
(mapv
|
||||
(fn [{:keys [id url]}]
|
||||
{:title (db/get-repo-name url)
|
||||
:options {:on-click (fn []
|
||||
(state/set-current-repo! url))}})
|
||||
(remove (fn [repo]
|
||||
(= current-repo (:url repo)))
|
||||
repos))
|
||||
(util/hiccup->class
|
||||
"origin-top-right.absolute.left-0.mt-2.w-48.rounded-md.shadow-lg "))
|
||||
[:a.hover:text-gray-300.text-gray-400.font-bold
|
||||
{:href current-repo
|
||||
:target "_blank"}
|
||||
(string/capitalize (util/take-at-most (db/get-repo-name current-repo) 20))]))))
|
||||
[current-repo head?]
|
||||
(let [class (if head?
|
||||
"hover:text-gray-900.text-gray-500"
|
||||
"hover:text-gray-200.text-gray-500.font-bold")
|
||||
get-repo-name-f (fn [repo]
|
||||
(if head?
|
||||
(db/get-repo-path repo)
|
||||
(util/take-at-most (db/get-repo-name repo) 20)))]
|
||||
(if current-repo
|
||||
(let [repos (state/sub [:me :repos])]
|
||||
(if (> (count repos) 1)
|
||||
(ui/dropdown-with-links
|
||||
(fn [{:keys [toggle-fn]}]
|
||||
[:a#repo-switch {:on-click toggle-fn
|
||||
:class (util/hiccup->class class)}
|
||||
[:span (get-repo-name-f current-repo)]
|
||||
[:span.dropdown-caret.ml-1 {:style {:border-top-color "#6b7280"}}]])
|
||||
(mapv
|
||||
(fn [{:keys [id url]}]
|
||||
{:title (get-repo-name-f url)
|
||||
:options {:on-click (fn []
|
||||
(state/set-current-repo! url))}})
|
||||
(remove (fn [repo]
|
||||
(= current-repo (:url repo)))
|
||||
repos))
|
||||
(util/hiccup->class
|
||||
"origin-top-right.absolute.left-0.mt-2.w-48.rounded-md.shadow-lg "))
|
||||
[:a.hover:text-gray-300.text-gray-400.font-bold
|
||||
{:href current-repo
|
||||
:target "_blank"}
|
||||
(get-repo-name-f current-repo)])))))
|
||||
|
||||
(defn nav-item
|
||||
[title href svg-d active? close-modal-fn]
|
||||
|
|
@ -180,24 +188,6 @@
|
|||
:exit 300}}
|
||||
(custom-context-menu-content))))
|
||||
|
||||
(rum/defc left-sidebar < rum/reactive
|
||||
[current-repo route-match close-fn]
|
||||
[:div#left-sidebar.flex.flex-col.w-64.sidebar.enter
|
||||
[:div.flex.items-center.flex-shrink-0.px-4.h-10
|
||||
[:div.flex.flex-row.align-center.whitespace-no-wrap
|
||||
[:a.hover:text-gray-200.text-gray-500
|
||||
{:style {:margin-right 13
|
||||
:margin-top -1}
|
||||
:on-click handler/hide-left-sidebar}
|
||||
(svg/menu "currentColor")]
|
||||
(repos current-repo close-fn)
|
||||
]]
|
||||
|
||||
[:div.h-0.flex-1.flex.flex-col.overflow-y-auto
|
||||
(sidebar-nav route-match close-fn)]
|
||||
|
||||
(logo)])
|
||||
|
||||
(rum/defcs sidebar < (mixins/modal)
|
||||
rum/reactive
|
||||
[state route-match main-content]
|
||||
|
|
@ -231,13 +221,11 @@
|
|||
:stroke-linejoin "round",
|
||||
:stroke-linecap "round"}]]]])
|
||||
[:div.flex-shrink-0.flex.items-center.px-4.h-16 {:style {:background-color "#002b36"}}
|
||||
(repos current-repo close-fn)]
|
||||
(repos current-repo false)]
|
||||
[:div.flex-1.h-0.overflow-y-auto
|
||||
(sidebar-nav route-match close-fn)]]]
|
||||
[:div.hidden.md:flex.md:flex-shrink-0
|
||||
(left-sidebar current-repo route-match close-fn)]
|
||||
[:div.flex.flex-col.w-0.flex-1.overflow-hidden
|
||||
[:div.relative.z-10.flex-shrink-0.flex.bg-base-3.sm:bg-transparent.shadow.sm:shadow-none.h-16.sm:h-10
|
||||
[:div.relative.z-10.flex-shrink-0.flex.bg-base-3.sm:bg-transparent.shadow.sm:shadow-none.h-16.sm:h-10#head
|
||||
[:button.px-4.text-gray-400.focus:outline-none.focus:text-gray-400.md:hidden.menu
|
||||
{:on-click open-fn}
|
||||
[:svg.h-6.w-6
|
||||
|
|
@ -250,22 +238,23 @@
|
|||
[:div.flex-1.px-4.flex.justify-between
|
||||
(search/search)
|
||||
[:div.ml-4.flex.items-center.md:ml-6
|
||||
[:a {:title "Draw with Excalidraw"
|
||||
:href "/draw"}
|
||||
(repos current-repo true)
|
||||
[:a.ml-1 {:title "Draw with Excalidraw"
|
||||
:href "/draw"}
|
||||
[:button.p-1.rounded-full.focus:outline-none.focus:shadow-outline.pull
|
||||
(svg/excalidraw-logo)]]
|
||||
[:div {:class (if pulling? "loader")}
|
||||
[:a {:title "Git pull"}
|
||||
[:button.p-1.m-2.text-gray-400.rounded-full.focus:outline-none.focus:shadow-outline.focus:text-gray-700.pull
|
||||
{:on-click handler/pull-current-repo}
|
||||
[:svg.h-6.w-6
|
||||
{:viewBox "0 0 24 24", :fill "none", :stroke "currentColor"}
|
||||
[:path
|
||||
{:d
|
||||
"M6 18.7V21a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7.1A7 7 0 0 0 19 12a1 1 0 1 1 2 0 9 9 0 0 1-15 6.7zM18 5.3V3a1 1 0 0 1 2 0v5a1 1 0 0 1-1 1h-5a1 1 0 0 1 0-2h2.9A7 7 0 0 0 5 12a1 1 0 1 1-2 0 9 9 0 0 1 15-6.7z"
|
||||
:stroke-width "1",
|
||||
:stroke-linejoin "round",
|
||||
:stroke-linecap "round"}]]]]]
|
||||
;; [:div {:class (if pulling? "loader")}
|
||||
;; [:a {:title "Git pull"}
|
||||
;; [:button.p-1.m-2.text-gray-400.rounded-full.focus:outline-none.focus:shadow-outline.focus:text-gray-700.pull
|
||||
;; {:on-click handler/pull-current-repo}
|
||||
;; [:svg.h-6.w-6
|
||||
;; {:viewBox "0 0 24 24", :fill "none", :stroke "currentColor"}
|
||||
;; [:path
|
||||
;; {:d
|
||||
;; "M6 18.7V21a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7.1A7 7 0 0 0 19 12a1 1 0 1 1 2 0 9 9 0 0 1-15 6.7zM18 5.3V3a1 1 0 0 1 2 0v5a1 1 0 0 1-1 1h-5a1 1 0 0 1 0-2h2.9A7 7 0 0 0 5 12a1 1 0 1 1-2 0 9 9 0 0 1 15-6.7z"
|
||||
;; :stroke-width "1",
|
||||
;; :stroke-linejoin "round",
|
||||
;; :stroke-linecap "round"}]]]]]
|
||||
(ui/dropdown-with-links
|
||||
(fn [{:keys [toggle-fn]}]
|
||||
[:button.max-w-xs.flex.items-center.text-sm.rounded-full.focus:outline-none.focus:shadow-outline
|
||||
|
|
@ -274,18 +263,30 @@
|
|||
[:img.h-7.w-7.rounded-full
|
||||
{:src avatar}]
|
||||
[:div.h-7.w-7.rounded-full.bg-base-3])])
|
||||
(->>
|
||||
[(when (:email me)
|
||||
{:title "Your repos"
|
||||
:options {:href "/repos"}})
|
||||
{:title "Add another repo"
|
||||
:options {:href "/repo/add"}}
|
||||
{:title "Settings"
|
||||
:options {:href (str "/file/" (util/url-encode config/config-file))}}
|
||||
(when (:email me)
|
||||
{:title "Sign out"
|
||||
:options {:on-click handler/sign-out!}})]
|
||||
(remove nil?)))
|
||||
(let [logged? (:email me)]
|
||||
(->>
|
||||
[(when logged?
|
||||
{:title "New page"
|
||||
:options {:href "/page/new"}})
|
||||
(when logged?
|
||||
{:title "Your repos"
|
||||
:options {:href "/repos"}})
|
||||
(when logged?
|
||||
{:title "Your pages"
|
||||
:options {:href "/all-pages"}})
|
||||
(when logged?
|
||||
{:title "Your files"
|
||||
:options {:href "/all-files"}})
|
||||
{:title "Settings"
|
||||
:options {:href (str "/file/" (util/url-encode config/config-file))}}
|
||||
{:title "Bug report"
|
||||
:options {:href "https://github.com/logseq/issues/issues/new"}}
|
||||
{:title "Feature request"
|
||||
:options {:href "https://github.com/logseq/issues/issues/new"}}
|
||||
(when logged?
|
||||
{:title "Sign out"
|
||||
:options {:on-click handler/sign-out!}})]
|
||||
(remove nil?))))
|
||||
|
||||
[:a.hover:text-gray-900.text-gray-500.ml-3
|
||||
{:on-click (fn []
|
||||
|
|
@ -294,7 +295,7 @@
|
|||
(handler/hide-right-sidebar)
|
||||
(handler/show-right-sidebar))))}
|
||||
(svg/menu)]]]]
|
||||
[:main#main.flex-1.relative.z-0.py-6.focus:outline-none.sidebar-open.overflow-hidden
|
||||
[:main#main.flex-1.relative.z-0.py-6.focus:outline-none.overflow-hidden
|
||||
{:tabIndex "0"
|
||||
:style {:width "100%"
|
||||
:height "100%"}}
|
||||
|
|
@ -311,12 +312,12 @@
|
|||
:margin-bottom 200}}
|
||||
main-content]]]
|
||||
(right-sidebar/sidebar)]
|
||||
[:a#menu.mr-4.hover:text-gray-700.text-gray-500.absolute.hidden
|
||||
{:style {:position "absolute"
|
||||
[:a.opacity-50.hover:opacity-100.absolute.hidden.md:block
|
||||
{:href "/"
|
||||
:style {:position "absolute"
|
||||
:top 6
|
||||
:left 16
|
||||
:z-index 111}
|
||||
:on-click handler/show-left-sidebar}
|
||||
(svg/menu "currentColor")]
|
||||
:z-index 111} }
|
||||
(svg/logo)]
|
||||
(ui/notification)
|
||||
(custom-context-menu)]]))
|
||||
|
|
|
|||
|
|
@ -167,3 +167,59 @@
|
|||
{:d
|
||||
"M1050 2180 c0 -5 -6 -10 -13 -10 -6 0 -23 -28 -36 -62 -40 -104 -440 -895 -441 -870 0 13 -6 22 -16 22 -14 0 -16 -8 -10 -47 6 -45 2 -55 -140 -331 -80 -157 -166 -321 -191 -365 -26 -46 -46 -96 -48 -117 -3 -36 1 -41 88 -116 50 -44 114 -99 142 -124 126 -115 185 -161 201 -158 24 4 395 393 396 415 0 10 -18 162 -40 338 -38 300 -74 651 -70 685 3 21 -12 127 -23 173 -9 36 -5 51 67 215 42 97 97 216 121 264 23 48 43 90 43 93 0 3 -7 5 -15 5 -8 0 -15 -4 -15 -10z m-230 -747 c11 -70 33 -238 49 -373 31 -248 67 -523 77 -593 6 -35 2 -42 -63 -114 -113 -127 -233 -252 -274 -284 l-38 -30 -195 182 c-180 166 -195 183 -184 203 6 11 57 104 113 206 56 102 130 238 164 302 35 65 67 121 73 124 7 4 9 -97 7 -312 -4 -321 -3 -322 29 -315 4 0 7 162 7 359 l0 358 105 210 c58 116 106 209 108 208 2 -1 12 -60 22 -131z"}]]]
|
||||
)
|
||||
|
||||
(rum/defc logo
|
||||
[]
|
||||
[:svg
|
||||
{:fill "none", :viewbox "0 0 24 24", :height "24", :width "24"}
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M2.15592 19.2498C1.36836 19.0534 0.949256 17.9725 1.21983 16.8356C1.49041 15.6987 2.3482 14.9362 3.13576 15.1326C3.92332 15.329 4.34242 16.4099 4.07185 17.5468C3.80127 18.6838 2.94348 19.4462 2.15592 19.2498Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M11.4134 21.9396C11.3864 22.7539 10.2246 23.3745 8.81844 23.3256C7.41231 23.2768 6.2943 22.577 6.32131 21.7627C6.34831 20.9484 7.51009 20.3278 8.91622 20.3767C10.3223 20.4256 11.4404 21.1253 11.4134 21.9396Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M3.60601 11.5688C4.1496 11.9697 4.09019 13.0052 3.4733 13.8817C2.85641 14.7581 1.91565 15.1436 1.37205 14.7427C0.828456 14.3417 0.88787 13.3062 1.50476 12.4298C2.12165 11.5533 3.06241 11.1678 3.60601 11.5688Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M5.80617 22.2547C5.49718 23.4297 3.95914 24.1864 2.37085 23.9448C0.782563 23.7033 -0.254521 22.555 0.054461 21.3801C0.363443 20.2051 1.90148 19.4484 3.48977 19.69C5.07806 19.9315 6.11515 21.0798 5.80617 22.2547Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M2.22629 11.1687C0.946374 11.0033 -0.0174028 9.64953 0.0736304 8.14495C0.164664 6.64037 1.27603 5.55475 2.55595 5.72016C3.83586 5.88556 4.79963 7.23935 4.7086 8.74393C4.61757 10.2485 3.5062 11.3341 2.22629 11.1687Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M17.6471 22.265C17.3381 23.4399 15.8001 24.1966 14.2118 23.9551C12.6235 23.7136 11.5864 22.5653 11.8954 21.3903C12.2044 20.2154 13.7424 19.4587 15.3307 19.7002C16.919 19.9417 17.9561 21.09 17.6471 22.265Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M8.45435 13.5463C7.66679 13.3499 7.24769 12.269 7.51827 11.1321C7.78884 9.99515 8.64663 9.23269 9.43419 9.4291C10.2218 9.62551 10.6409 10.7064 10.3703 11.8433C10.0997 12.9803 9.24192 13.7427 8.45435 13.5463Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M17.7118 16.2361C17.6848 17.0504 16.523 17.671 15.1169 17.6221C13.7107 17.5732 12.5927 16.8735 12.6197 16.0592C12.6467 15.2449 13.8085 14.6243 15.2147 14.6732C16.6208 14.722 17.7388 15.4218 17.7118 16.2361Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M9.90444 5.86526C10.448 6.2662 10.3886 7.30173 9.77174 8.17818C9.15485 9.05463 8.21409 9.44011 7.67049 9.03917C7.12689 8.63823 7.1863 7.6027 7.80319 6.72625C8.42008 5.8498 9.36084 5.46432 9.90444 5.86526Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M12.1046 16.5512C11.7956 17.7262 10.2576 18.4829 8.66929 18.2413C7.081 17.9998 6.04391 16.8515 6.3529 15.6766C6.66188 14.5016 8.19992 13.7449 9.78821 13.9865C11.3765 14.228 12.4136 15.3763 12.1046 16.5512Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M8.52472 5.46522C7.24481 5.29981 6.28103 3.94603 6.37206 2.44145C6.4631 0.936865 7.57447 -0.148753 8.85438 0.0166502C10.1343 0.182053 11.0981 1.53584 11.007 3.04042C10.916 4.545 9.80463 5.63062 8.52472 5.46522Z"}]
|
||||
[:path
|
||||
{:fill "currentColor",
|
||||
:d
|
||||
"M23.9455 16.5615C23.6366 17.7364 22.0985 18.4931 20.5102 18.2516C18.9219 18.01 17.8849 16.8618 18.1938 15.6868C18.5028 14.5119 20.0409 13.7552 21.6291 13.9967C23.2174 14.2382 24.2545 15.3865 23.9455 16.5615Z"}]]
|
||||
|
||||
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1019,7 +1019,6 @@
|
|||
(defn show-right-sidebar
|
||||
[]
|
||||
(let [sidebar (dom/by-id "right-sidebar")]
|
||||
(hide-left-sidebar)
|
||||
(dom/add-class! sidebar "enter")
|
||||
(dom/add-class! (dom/by-id "main-content-container")
|
||||
"right-sidebar-open")))
|
||||
|
|
|
|||
Loading…
Reference in New Issue