Skip to content
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

Show title on blocks too #2376

Merged
merged 4 commits into from
Sep 24, 2022
Merged

Show title on blocks too #2376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d94095d
feat: showing current block title in toolbar
shanberg Sep 21, 2022
86b2215
rfct: cleanpup
shanberg Sep 21, 2022
c674c6d
chore: lint
shanberg Sep 21, 2022
2ed1e79
Merge branch 'main' into show-title-on-blocks-too
shanberg Sep 23, 2022
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
87 changes: 49 additions & 38 deletions src/cljs/athens/views/app_toolbar.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
(ns athens.views.app-toolbar
(:require
["/components/AppToolbar/AppToolbar" :refer [AppToolbar]]
[athens.common-db :as common-db]
[athens.db :as db]
[athens.electron.db-menu.core :refer [db-menu]]
[athens.electron.utils :as electron.utils]
[athens.router :as router]
Expand All @@ -10,11 +12,16 @@
[athens.util :as util]
[athens.views.comments.core :as comments]
[athens.views.notifications.core :as notifications]
[athens.views.notifications.popover :refer [notifications-popover]]
[athens.views.notifications.popover :refer [notifications-popover]]
[re-frame.core :as rf]
[reagent.core :as r]))


(def name-from-route
{:home "Daily Notes"
:graph "Graph"})


(defn app-toolbar
[]
(let [current-page-title (rf/subscribe [:current-route/page-title])
Expand All @@ -24,6 +31,7 @@
athena-open? (rf/subscribe [:athena/open])
show-comments? (rf/subscribe [:comment/show-comments?])
route-name (rf/subscribe [:current-route/name])
route-uid (rf/subscribe [:current-route/uid])
theme-dark (rf/subscribe [:theme/dark])
selected-db (rf/subscribe [:db-picker/selected-db])
notificationsPopoverOpen? (rf/subscribe [:notification/show-popover?])
Expand Down Expand Up @@ -74,40 +82,43 @@
on-minimize #(rf/dispatch [:minimize-win])
on-close #(rf/dispatch [:close-win])]

[:> AppToolbar (merge
{:style (unzoom)
:os os
:isElectron electron?
:route @route-name
:isWinFullscreen @win-fullscreen?
:isWinMaximized @win-maximized?
:isWinFocused @win-focused?
:isHelpOpen @help-open?
:isThemeDark @theme-dark
:isLeftSidebarOpen @left-open?
:isRightSidebarOpen @right-open?
:isCommandBarOpen @athena-open?
:onPressLeftSidebarToggle on-left-sidebar-toggle
:onPressHistoryBack on-back
:onPressHistoryForward on-forward
:onPressDailyNotes on-daily-pages
:onPressAllPages on-all-pages
:onPressGraph on-graph
:onPressCommandBar on-athena
:onPressHelp on-help
:onPressThemeToggle on-theme
:onPressSettings on-settings
:onPressRightSidebarToggle on-right-sidebar
:onPressMaximizeRestore on-maximize
:onPressMinimize on-minimize
:currentPageTitle (or @current-page-title nil)
:onPressClose on-close
:workspacesMenu (r/as-element [db-menu])
:presenceDetails (when (electron.utils/remote-db? @selected-db)
(r/as-element [toolbar-presence-el]))}
(when (notifications/enabled?)
{:notificationPopover (r/as-element [notifications-popover])
:isNotificationsPopoverOpen @notificationsPopoverOpen?})
(when (comments/enabled?)
{:isShowComments @show-comments?
:onClickComments #(rf/dispatch [:comment/toggle-comments])}))]))
[:> AppToolbar
(merge
{:style (unzoom)
:os os
:isElectron electron?
:currentLocationName (or @current-page-title
(common-db/get-block-string @db/dsdb @route-uid)
(name-from-route @route-name))
:isWinFullscreen @win-fullscreen?
:isWinMaximized @win-maximized?
:isWinFocused @win-focused?
:isHelpOpen @help-open?
:isThemeDark @theme-dark
:isLeftSidebarOpen @left-open?
:isRightSidebarOpen @right-open?
:isCommandBarOpen @athena-open?
:onPressLeftSidebarToggle on-left-sidebar-toggle
:onPressHistoryBack on-back
:onPressHistoryForward on-forward
:onPressDailyNotes on-daily-pages
:onPressAllPages on-all-pages
:onPressGraph on-graph
:onPressCommandBar on-athena
:onPressHelp on-help
:onPressThemeToggle on-theme
:onPressSettings on-settings
:onPressRightSidebarToggle on-right-sidebar
:onPressMaximizeRestore on-maximize
:onPressMinimize on-minimize
:currentPageTitle (or @current-page-title nil)
:onPressClose on-close
:workspacesMenu (r/as-element [db-menu])
:presenceDetails (when (electron.utils/remote-db? @selected-db)
(r/as-element [toolbar-presence-el]))}
(when (notifications/enabled?)
{:notificationPopover (r/as-element [notifications-popover])
:isNotificationsPopoverOpen @notificationsPopoverOpen?})
(when (comments/enabled?)
{:isShowComments @show-comments?
:onClickComments #(rf/dispatch [:comment/toggle-comments])}))]))
23 changes: 7 additions & 16 deletions src/js/components/AppToolbar/AppToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
ChatBubbleFillIcon,
ChevronLeftIcon,
ChevronRightIcon,
ContrastIcon,
EllipsisHorizontalCircleIcon,
ChatBubbleIcon,
} from '@/Icons/Icons';
Expand Down Expand Up @@ -48,7 +47,7 @@ export interface AppToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* The application's current route
*/
route: string;
currentLocationName: string;
/**
* If the app is in Electron, whether or not it has user focus
*/
Expand Down Expand Up @@ -156,7 +155,7 @@ const secondaryToolbarOverflowMenu = (items) => {
export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
const {
os,
route,
currentLocationName,
isElectron,
isWinFullscreen,
isWinFocused,
Expand All @@ -178,9 +177,9 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
onPressClose: handlePressClose,
workspacesMenu,
notificationPopover,
currentPageTitle,
presenceDetails,
} = props;

const { colorMode, toggleColorMode } = useColorMode();
const [canShowFullSecondaryMenu] = useMediaQuery('(min-width: 900px)');
const {
Expand All @@ -189,11 +188,8 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
mainSidebarWidth,
isScrolledPastTitle,
} = React.useContext(LayoutContext);

const toast = useToast();
const commentsToggleToastRef = React.useRef(null);


const shouldShowUnderlay = isScrolledPastTitle["mainContent"] || (isScrolledPastTitle["rightSidebar"] && isRightSidebarOpen);

// If the workspace color mode doesn't match
Expand Down Expand Up @@ -262,7 +258,6 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
alignItems="center"
justifyContent="flex-start"
>

{isElectron && os === "mac" && (
<FakeTrafficLights opacity={isWinFocused ? 1 : 0} />
)}
Expand Down Expand Up @@ -330,14 +325,10 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
display="flex"
justifyContent="flex-start"
>
{currentPageTitle && (
<LocationIndicator
isVisible={isScrolledPastTitle["mainContent"]}
type="node"
uid="123"
title={currentPageTitle}
/>
)}
<LocationIndicator
isVisible={isScrolledPastTitle["mainContent"]}
currentLocationName={currentLocationName}
/>
</ToolbarButtonGroup>
)

Expand Down
102 changes: 54 additions & 48 deletions src/js/components/AppToolbar/components/LocationIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import { ChevronDownIcon } from '@/Icons/Icons';
import { mapActionsToMenuList, ActionsListItem } from '@/utils/mapActionsToMenuList';
import { Heading, VStack, Menu, MenuButton, MenuList, Portal, Button, Breadcrumb, BreadcrumbLink, BreadcrumbItem } from '@chakra-ui/react';
import { ActionsListItem, mapActionsToMenuList } from '@/utils/mapActionsToMenuList';
import { Heading, VStack, Menu, MenuButton, MenuList, Portal, Button } from '@chakra-ui/react';

interface LocationIndicatorProps {
title: string;
uid: string;
currentLocationName: string;
isVisible: boolean;
type: "node" | "block",
path?: { label: string, path: string }[]
actions?: ActionsListItem[];
breadcrumbs?: {}[],
actions?: ActionsListItem[],
uid?: string
}

export const LocationIndicator = (props: LocationIndicatorProps) => {
const { isVisible, ...locationProps } = props;
const { title, uid, type, path, actions } = locationProps;
if (type !== 'node') return null;
const { isVisible,
currentLocationName,
breadcrumbs,
actions,
uid
} = props;

return <VStack
opacity={isVisible ? 1 : 0}
Expand All @@ -25,42 +27,46 @@ export const LocationIndicator = (props: LocationIndicatorProps) => {
tabIndex={isVisible ? 0 : -1}
pointerEvents={isVisible ? 'all' : 'none'}
>
<Menu placement="bottom" isLazy>
<MenuButton
as={Button}
variant="ghost"
fontSize="sm"
size="sm"
overflow="hidden"
textAlign="start"
sx={{
"> span": {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
alignItems: "flex-start",
justifyContent: "flex-start"
},
...(path && {
".chakra-button__icon": {
alignSelf: "flex-end"
}
})
}}
{...(path && {
height: "auto",
py: 1,
px: 2
})}
rightIcon={actions ? <ChevronDownIcon color="foreground.secondary" /> : undefined}>
{path && <Heading noOfLines={0} maxWidth="100%" display="block" textTransform="uppercase" textAlign="start" color="foreground.secondary" fontSize="50%">{path[0].label}</Heading>}
{title}
</MenuButton>
<Portal>
<MenuList>
{mapActionsToMenuList({ target: uid, menuItems: actions })}
</MenuList>
</Portal>
</Menu>
</VStack >
{(actions) ? (
<Menu placement="bottom" isLazy>
<MenuButton
as={Button}
variant="ghost"
fontSize="sm"
size="sm"
overflow="hidden"
textAlign="start"
sx={{
"> span": {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
alignItems: "flex-start",
justifyContent: "flex-start"
},
...(breadcrumbs && {
".chakra-button__icon": {
alignSelf: "flex-end"
}
})
}}
{...(breadcrumbs && {
height: "auto",
py: 1,
px: 2
})}
rightIcon={actions ? <ChevronDownIcon color="foreground.secondary" /> : undefined}>
{breadcrumbs && <Heading noOfLines={0} maxWidth="100%" display="block" textTransform="uppercase" textAlign="start" color="foreground.secondary" fontSize="50%">{breadcrumbs[0].label}</Heading>}
{currentLocationName}
</MenuButton>
<Portal>
<MenuList>
{mapActionsToMenuList({ target: uid, menuItems: actions })}
</MenuList>
</Portal>
</Menu>
) : (
<Heading pl={2} whiteSpace="nowrap" noOfLines={0} color="foreground.secondary" size="xs">{currentLocationName}</Heading>
)}
</VStack>
}