Skip to content

Improve top bar design #5858

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
+290 −223
Closed

Improve top bar design #5858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/js/dashboard/components/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ const panel = {
const toggleButton = {
classNames: {
rounded:
'flex items-center rounded text-sm leading-tight h-9 transition-all duration-150',
'flex items-center rounded text-sm py-2.5 px-3 transition-all duration-150',
shadow:
'bg-white dark:bg-gray-750 shadow-sm text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
ghost:
'text-gray-700 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-900',
'text-gray-700 dark:text-gray-100 hover:bg-gray-150 dark:hover:bg-gray-900',
truncatedText: 'truncate block font-medium',
linkLike:
'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-150'
Expand Down
2 changes: 1 addition & 1 deletion assets/js/dashboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function Dashboard() {

return (
<div className="mb-16">
<TopBar showCurrentVisitors={!isRealTimeDashboard} />
<TopBar />
<DashboardStats
importedDataInView={
isRealTimeDashboard ? undefined : importedDataInView
Expand Down
52 changes: 35 additions & 17 deletions assets/js/dashboard/nav-menu/filter-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,29 @@ import {
} from '../util/filters'
import { PlausibleSite, useSiteContext } from '../site-context'
import { filterRoute } from '../router'
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
import { Popover, Transition } from '@headlessui/react'
import { popover, BlurMenuButtonOnEscape } from '../components/popover'
import classNames from 'classnames'
import { AppNavigationLink } from '../navigation/use-app-navigate'
import { SearchableSegmentsSection } from './segments/searchable-segments-section'
import { MenuSeparator } from './nav-menu-components'

const FilterIcon = ({ className }: { className?: string }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
className={className}
fill="none"
>
<path
d="M6 12h12M2 5h20M10 19h4"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)

export function getFilterListItems({
propsAvailable
Expand Down Expand Up @@ -58,10 +75,10 @@ const FilterMenuItems = ({ closeDropdown }: { closeDropdown: () => void }) => {
className={classNames(
popover.toggleButton.classNames.rounded,
popover.toggleButton.classNames.ghost,
'justify-center gap-1 px-3'
'justify-center gap-2'
)}
>
<MagnifyingGlassIcon className="block h-4 w-4" />
<FilterIcon className="block size-4 text-gray-500" />
<span className={popover.toggleButton.classNames.truncatedText}>
Filter
</span>
Expand All @@ -71,19 +88,20 @@ const FilterMenuItems = ({ closeDropdown }: { closeDropdown: () => void }) => {
{...popover.transition.props}
className={classNames(
popover.transition.classNames.fullwidth,
'mt-2 md:left-auto md:w-80 md:origin-top-right'
'mt-2 md:left-auto md:w-72 md:origin-top-right'
)}
>
<Popover.Panel
ref={panelRef}
className={classNames(popover.panel.classNames.roundedSheet)}
data-testid="filtermenu"
>
<div className="flex">
{columns.map((filterGroups, index) => (
<div key={index} className="flex flex-col w-1/2">
{filterGroups.map(({ title, modals }) => (
<div key={title}>
<div className="flex flex-col max-h-[420px] overflow-y-auto overscroll-contain">
{columns
.flat()
.map(({ title, modals }) => (
<React.Fragment key={title}>
<div className="pb-0.5">
<div className={titleClassName}>{title}</div>
{modals
.filter((m) => !!m)
Expand All @@ -103,14 +121,14 @@ const FilterMenuItems = ({ closeDropdown }: { closeDropdown: () => void }) => {
</AppNavigationLink>
))}
</div>
))}
</div>
))}
<MenuSeparator />
</React.Fragment>
))}
<SearchableSegmentsSection
closeList={closeDropdown}
tooltipContainerRef={panelRef}
/>
</div>
<SearchableSegmentsSection
closeList={closeDropdown}
tooltipContainerRef={panelRef}
/>
</Popover.Panel>
</Transition>
</>
Expand All @@ -124,4 +142,4 @@ export const FilterMenu = () => (
)

const titleClassName =
'text-sm pb-1 px-4 pt-2 font-bold uppercase text-indigo-500 dark:text-indigo-400'
'text-xs pb-1 px-4 pt-2 font-semibold uppercase text-gray-400 dark:text-indigo-400'
10 changes: 5 additions & 5 deletions assets/js/dashboard/nav-menu/filter-pill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
AppNavigationLink,
AppNavigationTarget
} from '../navigation/use-app-navigate'
import { XMarkIcon } from '@heroicons/react/20/solid'
import { XMarkIcon } from '@heroicons/react/24/outline'
import classNames from 'classnames'

export type FilterPillProps = {
Expand Down Expand Up @@ -32,12 +32,12 @@ export function FilterPill({
interactive,
actions
}: FilterPillProps) {
const contentClassName = 'flex w-full h-full items-center py-2 pl-3 last:pr-3'
const contentClassName = 'flex items-center'

return (
<div
className={classNames(
'flex h-9 shadow rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm items-center',
'flex items-center gap-x-1 py-2 px-3 rounded-md bg-white border border-gray-200 text-gray-700 dark:text-gray-300 text-xs uppercase font-medium tracking-tight',
className
)}
>
Expand All @@ -53,10 +53,10 @@ export function FilterPill({
{!!interactive.onRemoveClick && (
<button
title={`Remove filter: ${plainText}`}
className="flex items-center h-full px-2 mr-1 cursor-pointer hover:text-indigo-700 dark:hover:text-indigo-500 "
className="flex items-center mt-px cursor-pointer hover:text-indigo-700 dark:hover:text-indigo-500 "
onClick={interactive.onRemoveClick}
>
<XMarkIcon className="w-4 h-4" />
<XMarkIcon className="size-3.5 stroke-2" />
</button>
)}
{actions}
Expand Down
46 changes: 19 additions & 27 deletions assets/js/dashboard/nav-menu/filter-pills-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import { useAppNavigate } from '../navigation/use-app-navigate'
import classNames from 'classnames'
import { filterRoute } from '../router'

export const PILL_X_GAP_PX = 16
export const PILL_Y_GAP_PX = 8
export const PILL_X_GAP_PX = 8
export const PILL_Y_GAP_PX = 4

type SliceStartEnd = {
/** The beginning index of the specified portion of the array. If start is undefined, then the slice begins at index 0. */
Expand Down Expand Up @@ -109,32 +109,24 @@ export const FilterPillsList = React.forwardRef<
HTMLDivElement,
FilterPillsListProps
>(({ className, style, direction, pills }, ref) => {
// this padding allows pill dropshadows to be visible
// even when overflow:hidden is given to pill parent container
// box-content guarantees width given as style to apply to available space
const innerClassName = 'p-1 box-content'
// this hides the padding of the inner component to ease placement
const wrapperClassName = '-m-1'

return (
<div className={wrapperClassName}>
<div
ref={ref}
className={classNames(
'flex',
{
'flex-row': direction === 'horizontal',
'flex-col items-start': direction === 'vertical'
},
innerClassName,
className
)}
// gaps given as style to be able to use their numeric values in calculations
style={{ columnGap: PILL_X_GAP_PX, rowGap: PILL_Y_GAP_PX, ...style }}
>
{pills.map((options, index) => (
<FilterPill key={index} {...options} />
))}
</div>
<div
ref={ref}
className={classNames(
'flex',
{
'flex-row': direction === 'horizontal',
'flex-col items-start': direction === 'vertical'
},
className
)}
// gaps given as style to be able to use their numeric values in calculations
style={{ columnGap: PILL_X_GAP_PX, rowGap: PILL_Y_GAP_PX, ...style }}
>
{pills.map((options, index) => (
<FilterPill key={index} {...options} />
))}
</div>
)
})
43 changes: 20 additions & 23 deletions assets/js/dashboard/nav-menu/filters-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ import { popover, BlurMenuButtonOnEscape } from '../components/popover'
import { isSegmentFilter } from '../filtering/segments'
import { useRoutelessModalsContext } from '../navigation/routeless-modals-context'
import { DashboardQuery } from '../query'
import { MenuSeparator } from './nav-menu-components'

// Component structure is
// `..[ filter (x) ]..[ filter (x) ]..[ three dot menu ]..`
// where `..` represents an ideally equal length.
// The following calculations guarantee that.
const BUFFER_RIGHT_PX = 16 - PILL_X_GAP_PX
const BUFFER_LEFT_PX = 16
const SEE_MORE_WIDTH_PX = 36
const BUFFER_LEFT_PX = 8
const SEE_MORE_RIGHT_MARGIN_PX = PILL_X_GAP_PX
const SEE_MORE_LEFT_MARGIN_PX = 0

Expand Down Expand Up @@ -160,7 +160,6 @@ export const FiltersBar = ({ accessors }: FiltersBarProps) => {
: null,
seeMoreWidth:
SEE_MORE_LEFT_MARGIN_PX +
SEE_MORE_WIDTH_PX +
Copy link
Contributor

@apata apata Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this is a draft, so feel free to ignore, but for the math to work out, this value needed to be known and used in the calculations.

If you open https://pr-5858.review.plausible.io/plausible.io?f=is,country,US&f=is,page,/open-source-website-analytics&f=is,region,US-TX&l=US,United%20States&l=US-TX,Texas at 550px width (just random example), we expect the query period menu not to overflow the bar, but it does, even though it would be possible to avoid overflow if the Country is United States filter wrapped into the vertical menu.
Left: PR, right: staging
Image

I know it's weird to hard code the width of the button in PX: I used to dynamically measure it, but it created a loop where it first needed to be drawn (let's say with size-5), then measured, then maybe thrown away.

Copy link
Contributor Author

@sanne-san sanne-san Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, thank you! That's good to know.

Closing this PR for now as we concluded that the top area will need a bit of a bigger rethink, probably after the migration.

SEE_MORE_RIGHT_MARGIN_PX,
mustShowSeeMoreMenu
})
Expand Down Expand Up @@ -248,24 +247,26 @@ const SeeMoreMenu = ({
ref={seeMoreRef}
className={classNames(
popover.toggleButton.classNames.rounded,
popover.toggleButton.classNames.shadow,
popover.toggleButton.classNames.ghost,
'justify-center',
'relative group'
'relative group',
'!py-1.5 !px-2',
'rounded-md',
'bg-white border border-gray-200',
'hover:bg-white hover:border-gray-300'
)}
style={{
height: SEE_MORE_WIDTH_PX,
width: SEE_MORE_WIDTH_PX,
marginLeft: SEE_MORE_LEFT_MARGIN_PX,
marginRight: SEE_MORE_RIGHT_MARGIN_PX
}}
>
<EllipsisHorizontalIcon className="block h-5 w-5" />
<EllipsisHorizontalIcon className="block size-5" />
{showMoreFilters && (
<div
aria-hidden="true"
className="absolute flex justify-end left-0 right-0 bottom-0 translate-y-1/4 pr-[3px]"
className="absolute flex justify-end left-0 right-0 bottom-0 translate-y-1/4 translate-x-1/4"
>
<div className="text-[10px] leading-[10px] min-w-[10px] font-medium shadow-sm px-[3px] py-[1px] flex items-center rounded-xs bg-gray-100 dark:bg-gray-850">
<div className="text-[10px] leading-[10px] min-w-[10px] font-bold shadow-sm px-1 py-0.5 flex items-center rounded-sm bg-indigo-100 text-indigo-600 dark:bg-gray-850">
+{filtersInMenuCount}
</div>
</div>
Expand All @@ -287,19 +288,15 @@ const SeeMoreMenu = ({
>
{showMoreFilters && (
<>
<div className="py-4 px-4">
<AppliedFilterPillsList
direction="vertical"
pillClassName="!shadow-none !bg-gray-100 dark:!bg-gray-700"
slice={{
type: 'no-render-outside',
start: visibleFiltersCount
}}
/>
</div>
{showSomeActions && (
<div className="mb-1 border-gray-200 dark:border-gray-700 border-b"></div>
)}
<AppliedFilterPillsList
direction="vertical"
pillClassName="!shadow-none border-none !bg-gray-100 dark:!bg-gray-700"
slice={{
type: 'no-render-outside',
start: visibleFiltersCount
}}
/>
{showSomeActions && <MenuSeparator />}
</>
)}
{showSomeActions && (
Expand Down
10 changes: 9 additions & 1 deletion assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
import { DateRangeCalendar } from './date-range-calendar'
import { formatISO, nowForSite } from '../../util/date'
import { MenuSeparator } from '../nav-menu-components'
import { CalendarIcon } from '@heroicons/react/24/outline'

export const ComparisonPeriodMenuItems = ({
closeDropdown,
Expand Down Expand Up @@ -123,7 +124,14 @@ export const ComparisonPeriodMenu = ({
return (
<>
<BlurMenuButtonOnEscape targetRef={buttonRef} />
<Popover.Button className={datemenuButtonClassName} ref={buttonRef}>
<Popover.Button
className={classNames(
datemenuButtonClassName,
'bg-gray-150 dark:bg-gray-800'
)}
ref={buttonRef}
>
<CalendarIcon className="mr-1.5 size-4 stroke-2 text-gray-500" />
<span className={popover.toggleButton.classNames.truncatedText}>
{getCurrentComparisonPeriodDisplayName({ site, query })}
</span>
Expand Down
14 changes: 7 additions & 7 deletions assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function ArrowIcon({
return (
<svg
className={classNames(
'feather size-4',
'size-3.5',
disabled
? 'text-gray-400 dark:text-gray-600'
: 'text-gray-700 dark:text-gray-300'
Expand Down Expand Up @@ -86,21 +86,21 @@ export function MovePeriodArrows({ className }: { className?: string }) {
getDateForShiftedPeriod({ site, query, direction: 1 }) !== null

const sharedClass =
'flex items-center px-1 sm:px-2 dark:text-gray-100 transition-colors duration-150'
const enabledClass = 'hover:bg-gray-100 dark:hover:bg-gray-700'
const disabledClass = 'bg-gray-200 dark:bg-gray-850 cursor-not-allowed'
'flex items-center px-3 rounded-md dark:text-gray-100 transition-colors duration-150'
const enabledClass = 'bg-gray-150 dark:bg-gray-800'
const disabledClass = 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed'

return (
<div
className={classNames(
'flex rounded shadow bg-white mr-2 sm:mr-4 cursor-pointer focus:z-10 dark:bg-gray-750',
'flex gap-0.5 rounded-md mr-2 cursor-pointer focus:z-10',
className
)}
>
<AppNavigationLink
className={classNames(
sharedClass,
'rounded-l border-gray-300 dark:border-gray-500 focus:z-10',
'border-gray-300 dark:border-gray-500 focus:z-10',
{ [enabledClass]: canGoBack, [disabledClass]: !canGoBack }
)}
search={
Expand All @@ -117,7 +117,7 @@ export function MovePeriodArrows({ className }: { className?: string }) {
<ArrowIcon direction="left" disabled={!canGoBack} />
</AppNavigationLink>
<AppNavigationLink
className={classNames(sharedClass, 'rounded-r', {
className={classNames(sharedClass, {
[enabledClass]: canGoForward,
[disabledClass]: !canGoForward
})}
Expand Down
Loading
Loading