Skip to content

Commit

Permalink
Sidebar facelift
Browse files Browse the repository at this point in the history
  • Loading branch information
Polleps committed Sep 6, 2023
1 parent 0cd7868 commit fe16f1d
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 81 deletions.
29 changes: 26 additions & 3 deletions browser/data-browser/src/components/IconButton/IconButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export enum IconButtonVariant {
Outline,
Fill,
Colored,
Square,
}

type ColorProp = keyof DefaultTheme['colors'] | 'inherit';
Expand Down Expand Up @@ -56,7 +57,7 @@ export const IconButtonLink = React.forwardRef<
HTMLAnchorElement,
React.PropsWithChildren<IconButtonLinkProps>
>(({ variant, children, color, ...props }, ref) => {
const Comp = ComponentMap.get(variant!) ?? SimpleIconButton;
const Comp = ComponentMap.get(variant ?? IconButtonVariant.Simple)!;

return (
<Comp ref={ref} color={color!} as='a' {...props}>
Expand Down Expand Up @@ -84,8 +85,8 @@ const IconButtonBase = styled.button<ButtonBaseProps>`
border: none;
padding: var(--button-padding);
width: calc(1em + var(--button-padding) * 2);
height: calc(1em + var(--button-padding) * 2);
width: calc(${p => p.size} + var(--button-padding) * 2);
height: calc(${p => p.size} + var(--button-padding) * 2);
&[disabled] {
opacity: 0.5;
Expand Down Expand Up @@ -134,6 +135,27 @@ const OutlineIconButton = styled(IconButtonBase)<ButtonStyleProps>`
}
`;

const SquareIconButton = styled(IconButtonBase)<ButtonStyleProps>`
color: ${p => (p.color === 'inherit' ? 'inherit' : p.theme.colors[p.color])};
background-color: ${p => p.theme.colors.bg};
border-radius: ${p => p.theme.radius};
border: 1px solid ${p => p.theme.colors.bg2};
&:not([disabled]) {
&:hover,
&:focus-visible {
color: ${p => p.theme.colors.main};
border-color: ${p => p.theme.colors.main};
box-shadow: ${p => p.theme.boxShadowSoft};
}
}
&&:active {
background-color: ${p => p.theme.colors.main};
color: white;
}
`;

const FillIconButton = styled(IconButtonBase)<ButtonStyleProps>`
color: ${p => (p.color === 'inherit' ? 'inherit' : p.theme.colors[p.color])};
background-color: unset;
Expand Down Expand Up @@ -164,4 +186,5 @@ const ComponentMap = new Map([
[IconButtonVariant.Outline, OutlineIconButton],
[IconButtonVariant.Fill, FillIconButton],
[IconButtonVariant.Colored, ColoredIconButton],
[IconButtonVariant.Square, SquareIconButton],
]);
8 changes: 4 additions & 4 deletions browser/data-browser/src/components/SideBar/About.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Logo } from '../Logo';
import { SideBarHeader } from './SideBarHeader';
import React from 'react';
import { FaGithub, FaDiscord, FaBook } from 'react-icons/fa';
import { IconButtonLink } from '../IconButton/IconButton';
import { IconButtonLink, IconButtonVariant } from '../IconButton/IconButton';

interface AboutItem {
icon: React.ReactNode;
Expand Down Expand Up @@ -32,9 +32,9 @@ const aboutMenuItems: AboutItem[] = [
export function About() {
return (
<>
<SideBarHeader>
{/* <SideBarHeader>
<Logo style={{ height: '1.1rem', maxWidth: '100%' }} />
</SideBarHeader>
</SideBarHeader> */}
<AboutWrapper>
{aboutMenuItems.map(({ href, icon, helper }) => (
<IconButtonLink
Expand All @@ -45,6 +45,7 @@ export function About() {
title={helper}
size='1.2em'
color='textLight'
variant={IconButtonVariant.Square}
>
{icon}
</IconButtonLink>
Expand All @@ -57,7 +58,6 @@ export function About() {
const AboutWrapper = styled.div`
--inner-padding: 0.5rem;
display: flex;
/* flex-direction: column; */
align-items: center;
gap: 0.5rem;
margin-left: calc(1rem - var(--inner-padding));
Expand Down
90 changes: 55 additions & 35 deletions browser/data-browser/src/components/SideBar/AppMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { FaPlusCircle } from 'react-icons/fa';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
FaCog,
FaInfo,
FaKeyboard,
FaPlusCircle,
FaUser,
} from 'react-icons/fa';
import { constructOpenURL } from '../../helpers/navigation';
import { useCurrentSubject } from '../../helpers/useCurrentSubject';
import { appMenuItems } from './menuItems';
import { SideBarHeader } from './SideBarHeader';
import { SideBarMenuItem } from './SideBarMenuItem';
import styled from 'styled-components';
import { paths } from '../../routes/paths';
import { unknownSubject, useCurrentAgent, useResource } from '@tomic/react';

// Non standard event type so we have to type it ourselfs for now.
type BeforeInstallPromptEvent = {
Expand All @@ -26,6 +27,8 @@ export function AppMenu({ onItemClick }: AppMenuProps): JSX.Element {
const event = useRef<BeforeInstallPromptEvent | null>(null);
const [subject] = useCurrentSubject();
const [showInstallButton, setShowInstallButton] = useState(false);
const [agent] = useCurrentAgent();
const agentResource = useResource(agent?.subject ?? unknownSubject);

const install = useCallback(() => {
if (!event.current) {
Expand Down Expand Up @@ -53,33 +56,50 @@ export function AppMenu({ onItemClick }: AppMenuProps): JSX.Element {
return () => window.removeEventListener('beforeinstallprompt', listener);
}, []);

const items = useMemo(() => {
if (!showInstallButton) {
return appMenuItems;
}

return [
{
icon: <FaPlusCircle />,
label: 'Install App',
helper: 'Install app to desktop',
handleClickItem: install,
path: constructOpenURL(subject ?? window.location.href),
},
...appMenuItems,
];
}, [appMenuItems, showInstallButton, subject]);

return (
<>
<SideBarHeader>App</SideBarHeader>
{items.map(p => (
<Section aria-label='App menu'>
<SideBarMenuItem
icon={<FaUser />}
label={agent ? agentResource.title : 'Login'}
helper='See and edit the current Agent / User (u)'
path={paths.agentSettings}
onClick={onItemClick}
/>
<SideBarMenuItem
icon={<FaCog />}
label='Settings'
helper='Edit the theme (t)'
path={paths.themeSettings}
onClick={onItemClick}
/>
<SideBarMenuItem
icon={<FaKeyboard />}
label='Keyboard Shortcuts'
helper='View the keyboard shortcuts (?)'
path={paths.shortcuts}
onClick={onItemClick}
/>
<SideBarMenuItem
icon={<FaInfo />}
label='About'
helper='Welcome page, tells about this app'
path={paths.about}
onClick={onItemClick}
/>
{showInstallButton && (
<SideBarMenuItem
key={p.label}
{...p}
handleClickItem={p.handleClickItem ?? onItemClick}
icon={<FaPlusCircle />}
label='Install App'
helper='Install app to desktop'
path={constructOpenURL(subject ?? window.location.href)}
onClick={install}
/>
))}
</>
)}
</Section>
);
}

const Section = styled.section`
border-top: 1px solid ${p => p.theme.colors.bg2};
padding-top: ${p => p.theme.margin}rem;
`;
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export interface SideBarMenuItemProps extends AtomicLinkProps {
icon?: React.ReactNode;
disabled?: boolean;
/** Is called when clicking on the item. Used for closing the menu. */
handleClickItem?: () => void;
onClick?: () => void;
}

export function SideBarMenuItem({
Expand All @@ -19,11 +19,11 @@ export function SideBarMenuItem({
path,
href,
subject,
handleClickItem,
onClick,
}: SideBarMenuItemProps) {
return (
<AtomicLink href={href} subject={subject} path={path} clean>
<SideBarItem key={label} title={helper} onClick={handleClickItem}>
<SideBarItem key={label} title={helper} onClick={onClick}>
{icon && <SideBarIcon>{icon}</SideBarIcon>}
{label}
</SideBarItem>
Expand Down
14 changes: 9 additions & 5 deletions browser/data-browser/src/components/SideBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { NavBarSpacer } from '../NavBarSpacer';
import { AppMenu } from './AppMenu';
import { About } from './About';
import { useMediaQuery } from '../../hooks/useMediaQuery';
import { Column } from '../Row';

/** Amount of pixels where the sidebar automatically shows */
export const SIDEBAR_TOGGLE_WIDTH = 600;
Expand Down Expand Up @@ -47,6 +48,7 @@ export function SideBar(): JSX.Element {

return (
<SideBarContainer>
{/* @ts-ignore */}
<SideBarStyled
ref={mountRefs}
size={size}
Expand All @@ -59,8 +61,10 @@ export function SideBar(): JSX.Element {
{/* The key is set to make sure the component is re-loaded when the baseURL changes */}
<SideBarDriveMemo handleClickItem={closeSideBar} key={drive} />
<MenuWrapper>
<AppMenu onItemClick={closeSideBar} />
<About />
<Column>
<AppMenu onItemClick={closeSideBar} />
<About />
</Column>
</MenuWrapper>
<NavBarSpacer baseMargin='1rem' position='bottom' />
<SideBarDragArea ref={dragAreaRef} isDragging={isDragging} />
Expand All @@ -83,12 +87,12 @@ interface SideBarOverlayProps {
visible: boolean;
}

// eslint-disable-next-line prettier/prettier
const SideBarStyled = styled('nav').attrs<SideBarStyledProps>(p => ({
//@ts-ignore
const SideBarStyled = styled.nav.attrs<SideBarStyledProps>(p => ({
style: {
'--width': p.size,
},
}))<SideBarStyledProps>`
}))`
z-index: ${p => p.theme.zIndex.sidebar};
box-sizing: border-box;
background: ${p => p.theme.colors.bg};
Expand Down
31 changes: 0 additions & 31 deletions browser/data-browser/src/components/SideBar/menuItems.tsx

This file was deleted.

0 comments on commit fe16f1d

Please sign in to comment.