Skip to content

Commit

Permalink
header: use single menubar instead of individual dropdown menus
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhuebert
mhuebert committed Jan 12, 2024
1 parent db64e41 commit 2aa6cea
Show file tree
Hide file tree
Showing 7 changed files with 95 additions and 35 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Expand Up @@ -22,6 +22,7 @@
"@radix-ui/react-context-menu": "^2.1.5",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-menubar": "^1.0.4",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-select": "^2.0.0",
Expand Down
17 changes: 9 additions & 8 deletions src/sb/app/entity/ui.cljc
View file
Expand Up @@ -81,14 +81,15 @@
[:div.flex.items-center.px-3.leading-snug
[:div.line-clamp-2 title]]])

(ui/defview settings-button [{:as entity :keys [member/roles]}]
(when-let [path (and (or (:role/admin roles)
(:role/org-admin roles))
(some-> (routing/entity-route entity 'admin-ui/settings)
routing/path-for))]
[:a.button
{:href path}
[icons/gear "icon-lg"]]))
(ui/defview settings-button [entity]
(let [roles (az/all-roles nil entity)]
(when-let [path (and (or (:role/admin roles)
(:role/org-admin roles))
(some-> (routing/entity-route entity 'admin-ui/settings)
routing/path-for))]
[:a.button
{:href path}
[icons/gear "icon-lg"]])))

(ui/defview row
{:key :entity/id}
Expand Down
2 changes: 1 addition & 1 deletion src/sb/app/field/ui.cljc
View file
Expand Up @@ -528,7 +528,7 @@
(.preventDefault e)
(some-> (j/get-in e [:dataTransfer :files 0]) on-file))}

[:div.block.absolute.inset-0.rounded.cursor-pointer.flex.items-center.justify-center.rounded-lg
[:div.block.absolute.inset-0.rounded.flex.items-center.justify-center.rounded-lg
(v/props {:class "text-muted-txt hover:text-txt bg-contain bg-no-repeat bg-center"}
(when thumbnail
{:style {:background-image (asset.ui/css-url thumbnail)}})
Expand Down
60 changes: 36 additions & 24 deletions src/sb/app/views/header.cljc
View file
Expand Up @@ -16,7 +16,8 @@
[yawn.hooks :as h]
[yawn.util :as yu]
[sb.routing :as routing]
[sb.query :as q]))
[sb.query :as q]
[yawn.view :as v]))

#?(:cljs
(defn lang-menu-content []
Expand Down Expand Up @@ -52,7 +53,7 @@
(t :tr/view-all)]]
(t :tr/no-messages))))

(ui/defview chat []
(ui/defview chat-old []
(let [!open? (h/use-state false)
unread (some-> (:unread (chat.data/chat-counts {})) (u/guard pos-int?))]
[:el Popover/Root
Expand All @@ -74,17 +75,30 @@
(when @!open?
(chats-list))]]]]))

(ui/defview chat []
(let [unread (some-> (:unread (chat.data/chat-counts {})) (u/guard pos-int?))]
[radix/menubar-menu {:trigger (v/x [:button {:tab-index 0}
(when unread
[:div.z-10.absolute.font-bold.text-xs.text-center.text-focus-accent
{:style {:top 2 :right 0 :width 20}}
unread])
[icons/paper-plane (when unread "text-focus-accent")]])
:content (v/x
[:Suspense {}
[:div.bg-white.p-2
{:style {:width 360}}
[chats-list]]])}]))

(ui/defview account []
(if-let [account (db/get :env/config :account)]
[:<>
(radix/dropdown-menu
(radix/menubar-menu
{:trigger [:button {:tab-index 0}
[:img.rounded-full.icon-lg {:src (asset.ui/asset-src (:image/avatar account) :avatar)}]]
:items [[{:on-click #(routes/nav! 'sb.app.account-ui/show)} (t :tr/home)]
[{:on-click #(routes/nav! 'sb.app.account-ui/logout!)} (t :tr/logout)]
[{:sub? true
:trigger [icons/languages "w-5 h-5"]
:items (lang-menu-content)}]]})]
[{:trigger [icons/languages "w-5 h-5"]
:items (lang-menu-content)}]]})]
[:a.btn.btn-transp.px-3.py-1.h-7
{:href (routes/path-for ['sb.app.account-ui/sign-in])} (t :tr/continue-with-email)]))

Expand All @@ -94,13 +108,11 @@
(when-let [entities (-> (:value (q/use [`member.data/descriptions {:ids @routing/!recent-ids}]))
ui/use-last-some)]
(when (seq entities)
(radix/dropdown-menu
{:id :show-recents
:trigger [:button (t :tr/recent) down-arrow]
:items (into []
(map (fn [entity]
[{:on-select #(routes/nav! (routes/entity-route entity 'ui/show) entity)}
(:entity/title entity)]))
(radix/menubar-menu
{:trigger [:button (t :tr/recent) down-arrow]
:items (mapv (fn [entity]
[{:on-select #(routes/nav! (routes/entity-route entity 'ui/show) entity)}
(:entity/title entity)])
entities)}))))

(ui/defview entity [{:as entity
Expand All @@ -116,14 +128,14 @@
[:a.hover:underline.text-xl.font-semibold.text-ellipsis.truncate.self-center {:href path} title]

[:div.flex-grow]
(into [:div.flex.gap-1]
(concat children
[(entity.ui/settings-button entity)
(recents)
(radix/dropdown-menu
{:id :new
:trigger [:button (t :tr/new) down-arrow]
:items [[{:on-select #(routes/nav! 'sb.app.board.ui/new)} (t :tr/board)]
[{:on-select #(routes/nav! 'sb.app.org.ui/new)} (t :tr/org)]]})
[chat]
[account]]))]))
[:div.flex.gap-1
(entity.ui/settings-button entity)
[radix/menubar-root {:class "contents"}
(concat children
[(recents)
(radix/menubar-menu
{:trigger [:button (t :tr/new) down-arrow]
:items [[{:on-select #(routes/nav! 'sb.app.board.ui/new)} (t :tr/board)]
[{:on-select #(routes/nav! 'sb.app.org.ui/new)} (t :tr/org)]]})
[chat]
[account]])]]]))
31 changes: 30 additions & 1 deletion src/sb/app/views/radix.cljc
View file
Expand Up @@ -8,6 +8,7 @@
#?(:cljs ["@radix-ui/react-select" :as sel])
#?(:cljs ["@radix-ui/react-tabs" :as tabs])
#?(:cljs ["@radix-ui/react-tooltip" :as tooltip])
#?(:cljs ["@radix-ui/react-menubar" :as menubar])
[sb.icons :as icons]
[yawn.view :as v]
[yawn.util]
Expand Down Expand Up @@ -57,6 +58,35 @@
(def menu-trigger (v/from-element :el dm/Trigger {:as-child true}))
(def menu-sub-trigger (v/from-element :el dm/SubTrigger {:class (menu-item-classes false)}))

(defn menubar-root [props children]
(into [:el menubar/Root props] children))

(declare menubar-menu)

(defn menubar-submenu [{:keys [trigger items content]}]
(v/x
[:el menubar/Sub
[:el menubar/SubTrigger {:as-child true} [:el menubar/Item {:class (menu-item-classes false)} trigger]]
[:el menubar/Portal
(into [:el menubar/SubContent {:class menu-content-classes
:collision-padding 8} content]
(for [[props & children] items]
(if (:items props)
(menubar-submenu props)
(into [:el menubar/Item (v/merge-props props {:class (menu-item-classes false)})] children))))]]))

(defn menubar-menu [{:as props :keys [trigger items content]}]
(v/x
[:el menubar/Menu
[:el menubar/Trigger {:as-child true} trigger]
[:el menubar/Portal
(into [:el menubar/Content {:class menu-content-classes
:collision-padding 8} content]
(for [[props & children] items]
(if (:items props)
(menubar-submenu props)
(into [:el menubar/Item (v/merge-props props {:class (menu-item-classes false)})] children))))]]))


(defn dropdown-menu [{:keys [id trigger sub? items] :or {id :radix-portal}}]
(let [root-el (if sub? menu-sub-root menu-root)
Expand Down Expand Up @@ -136,7 +166,6 @@
(def tab-list (v/from-element :el.contents tabs/List))
(def tab-content (v/from-element :el.outline-none tabs/Content))
(def tab-trigger (v/from-element :el tabs/Trigger {:class ["px-1 border-b-2 border-transparent text-txt/50"
"data-[state=active]:cursor-pointer"
"data-[state=active]:border-primary"
"data-[state=active]:text-txt"
"data-[state=inactive]:hover:border-primary/10"
Expand Down
2 changes: 1 addition & 1 deletion src/sb/client/core.cljs
View file
Expand Up @@ -32,7 +32,7 @@
(ui/defview root
[]
(let [{:as match :keys [router/root
router/modal]} (react/useDeferredValue @routing/!location)]
router/modal]} (do #_react/useDeferredValue @routing/!location)]
[:div.w-full.font-sans
(dev-info match)
[:Suspense {:fallback default-loading-bar}
Expand Down
17 changes: 17 additions & 0 deletions yarn.lock
View file
Expand Up @@ -1272,6 +1272,23 @@
aria-hidden "^1.1.1"
react-remove-scroll "2.5.5"

"@radix-ui/react-menubar@^1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-menubar/-/react-menubar-1.0.4.tgz#7d46ababfec63db3868d9ed79366686634c1201a"
integrity sha512-bHgUo9gayKZfaQcWSSLr++LyS0rgh+MvD89DE4fJ6TkGHvjHgPaBZf44hdka7ogOxIOdj9163J+5xL2Dn4qzzg==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/primitive" "1.0.1"
"@radix-ui/react-collection" "1.0.3"
"@radix-ui/react-compose-refs" "1.0.1"
"@radix-ui/react-context" "1.0.1"
"@radix-ui/react-direction" "1.0.1"
"@radix-ui/react-id" "1.0.1"
"@radix-ui/react-menu" "2.0.6"
"@radix-ui/react-primitive" "1.0.3"
"@radix-ui/react-roving-focus" "1.0.4"
"@radix-ui/react-use-controllable-state" "1.0.1"

"@radix-ui/react-popover@^1.0.7":
version "1.0.7"
resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
Expand Down

0 comments on commit 2aa6cea

Please sign in to comment.