Various UI improvements

browser/CHANGELOG.md

@@ -16,6 +16,9 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - Fix an issue where the resource-array properties would be set to an empty array instead of removing the property when removing all items in the input.
 - Fix an issue where dropdown menus sometimes jump from the upper left corner of the screen.
 - Added a full page view for tags.
+- Redesigned the ontology page.
+- Moved the resource context menu to the top of the page.
+- [#861](https://github.com/atomicdata-dev/atomic-server/issues/861) Fix long usernames overflowing on the share page.
 
 ### @tomic/lib
 

browser/data-browser/src/components/Card.tsx

@@ -3,6 +3,7 @@ import {
   RESOURCE_PAGE_TRANSITION_TAG,
   getTransitionStyle,
 } from '../helpers/transitionName';
+import { CARD_CONTAINER } from '../helpers/containers';
 
 type CardProps = {
   /** Adds a colorful border */
@@ -16,20 +17,19 @@ export const Card = styled.div.attrs<CardProps>(p => ({
   // When we render a lot of cards it is more performant to use styles instead of classes when each card has a unique style
   style: getTransitionStyle(RESOURCE_PAGE_TRANSITION_TAG, p.about),
 }))`
-  background-color: ${props => props.theme.colors.bg};
-
+  background-color: ${p => p.theme.colors.bg};
+  container: ${CARD_CONTAINER} / inline-size;
   border: solid 1px
-    ${props =>
-      props.highlight ? props.theme.colors.main : props.theme.colors.bg2};
-  box-shadow: ${props =>
-    props.highlight
-      ? `0 0 0 1px ${props.theme.colors.main}, ${props.theme.boxShadow}`
-      : props.theme.boxShadow};
-
-  padding: ${props => props.theme.margin}rem;
-  border-radius: ${props => props.theme.radius};
-  max-height: ${props => (props.small ? '10rem' : 'none')};
-  overflow: ${props => (props.small ? 'hidden' : 'visible')};
+    ${p => (p.highlight ? p.theme.colors.main : p.theme.colors.bg2)};
+  box-shadow: ${p =>
+    p.highlight
+      ? `0 0 0 1px ${p.theme.colors.main}, ${p.theme.boxShadow}`
+      : p.theme.boxShadow};
+
+  padding: ${p => p.theme.size()};
+  border-radius: ${p => p.theme.radius};
+  max-height: ${p => (p.small ? p.theme.size(12) : 'initial')};
+  overflow: ${p => (p.small ? 'hidden' : 'visible')};
 `;
 
 export interface CardRowProps {
@@ -38,20 +38,19 @@ export interface CardRowProps {
 
 /** A Row in a Card. Should probably be used inside a CardInsideFull */
 export const CardRow = styled.div<CardRowProps>`
-  --border: solid 1px ${props => props.theme.colors.bg2};
+  --border: solid 1px ${p => p.theme.colors.bg2};
   display: block;
-  border-top: ${props => (props.noBorder ? 'none' : 'var(--border)')};
-  padding: ${props => props.theme.margin / 3}rem
-    ${props => props.theme.margin}rem;
+  border-top: ${p => (p.noBorder ? 'none' : 'var(--border)')};
+  padding: ${p => p.theme.size(2)} ${p => p.theme.size()};
 `;
 
 /** A block inside a Card which has full width */
 export const CardInsideFull = styled.div`
-  margin-left: -${props => props.theme.margin}rem;
-  margin-right: -${props => props.theme.margin}rem;
+  margin-left: -${p => p.theme.size()};
+  margin-right: -${p => p.theme.size()};
 `;
 
 export const Margin = styled.div`
   display: block;
-  height: ${props => props.theme.margin}rem;
+  height: ${p => p.theme.size()};
 `;

browser/data-browser/src/components/Main.tsx

@@ -7,26 +7,35 @@ import {
 } from '../helpers/transitionName';
 import { ViewTransitionProps } from '../helpers/ViewTransitionProps';
 import { MAIN_CONTAINER } from '../helpers/containers';
+import Parent from './Parent';
+import { useResource } from '@tomic/react';
 
 /** Main landmark. Every page should have one of these.
  * If the pages shows a resource a subject can be passed that enables view transitions to work. */
 export function Main({
   subject,
   children,
 }: PropsWithChildren<ViewTransitionProps>): JSX.Element {
+  const resource = useResource(subject);
+
   return (
-    <StyledMain subject={subject} about={subject}>
-      <VisuallyHidden>
-        <a href='#skip-to-content' id='skip-to-content' tabIndex={-1}>
-          Start of main content
-        </a>
-      </VisuallyHidden>
-      {children}
-    </StyledMain>
+    <>
+      {subject && <Parent resource={resource} />}
+      <StyledMain subject={subject} about={subject}>
+        <VisuallyHidden>
+          <a href='#skip-to-content' id='skip-to-content' tabIndex={-1}>
+            Start of main content
+          </a>
+        </VisuallyHidden>
+        {children}
+      </StyledMain>
+    </>
   );
 }
 
 const StyledMain = memo(styled.main<ViewTransitionProps>`
   container: ${MAIN_CONTAINER} / inline-size;
-  ${p => transitionName(RESOURCE_PAGE_TRANSITION_TAG, p.subject)}
+  ${p => transitionName(RESOURCE_PAGE_TRANSITION_TAG, p.subject)};
+  height: calc(100vh - ${p => p.theme.heights.breadCrumbBar});
+  overflow-y: auto;
 `);

browser/data-browser/src/components/Navigation.tsx

@@ -8,14 +8,13 @@ import { ButtonBar } from './Button';
 import { useCurrentSubject } from '../helpers/useCurrentSubject';
 import { useSettings } from '../helpers/AppSettings';
 import { SideBar } from './SideBar';
-import ResourceContextMenu from './ResourceContextMenu';
 import { isRunningInTauri } from '../helpers/tauri';
 import { shortcuts } from './HotKeyWrapper';
-import { MenuBarDropdownTrigger } from './ResourceContextMenu/MenuBarDropdownTrigger';
 import { NavBarSpacer } from './NavBarSpacer';
 import { Searchbar } from './Searchbar';
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import { useNavigateWithTransition } from '../hooks/useNavigateWithTransition';
+import { NAVBAR_TRANSITION_TAG } from '../helpers/transitionName';
 
 interface NavWrapperProps {
   children: React.ReactNode;
@@ -134,14 +133,6 @@ function NavBar(): JSX.Element {
         onFocus={maybeHideButtons}
         onBlur={() => setShowButtons(true)}
       />
-
-      {showButtons && subject && (
-        <ResourceContextMenu
-          isMainMenu
-          subject={subject}
-          trigger={MenuBarDropdownTrigger}
-        />
-      )}
     </ConditionalNavbar>
   );
 }
@@ -160,7 +151,7 @@ const NavBarBase = styled.div<NavBarStyledProps>`
   display: flex;
   border: solid 1px ${props => props.theme.colors.bg2};
   background-color: ${props => props.theme.colors.bg};
-  view-transition-name: navbar;
+  view-transition-name: ${NAVBAR_TRANSITION_TAG};
 `;
 
 /** Width of the floating navbar in rem */

browser/data-browser/src/components/Parent.tsx

@@ -8,60 +8,55 @@ import {
   server,
 } from '@tomic/react';
 import { constructOpenURL } from '../helpers/navigation';
-import { FaSearch } from 'react-icons/fa';
 import { Row } from './Row';
-import { useQueryScopeHandler } from '../hooks/useQueryScope';
-import { IconButton } from './IconButton/IconButton';
 import { useNavigateWithTransition } from '../hooks/useNavigateWithTransition';
 import { useSettings } from '../helpers/AppSettings';
 import { Button } from './Button';
+import { BREADCRUMB_BAR_TRANSITION_TAG } from '../helpers/transitionName';
+import ResourceContextMenu from './ResourceContextMenu';
+import { MenuBarDropdownTrigger } from './ResourceContextMenu/MenuBarDropdownTrigger';
 
 type ParentProps = {
   resource: Resource;
 };
 
-export const PARENT_PADDING_BLOCK = '0.2rem';
-
 /** Breadcrumb list. Recursively renders parents. */
 function Parent({ resource }: ParentProps): JSX.Element {
   const [parent] = useString(resource, core.properties.parent);
-  const { enableScope } = useQueryScopeHandler(resource.getSubject());
 
   return (
     <ParentWrapper aria-label='Breadcrumbs'>
       <Row fullWidth center gap='initial'>
         {parent ? (
           <NestedParent subject={parent} depth={0} />
         ) : (
-          <DriveMismatch subject={resource.getSubject()} />
+          <DriveMismatch subject={resource.subject} />
         )}
         <BreadCrumbCurrent>{resource.title}</BreadCrumbCurrent>
         <Spacer />
-        <ScopedSearchButton
-          onClick={enableScope}
-          title={`Search in ${resource.title}`}
-          color='textLight'
-        >
-          <FaSearch />
-        </ScopedSearchButton>
+        <ButtonArea>
+          <ResourceContextMenu
+            isMainMenu
+            subject={resource.subject}
+            trigger={MenuBarDropdownTrigger}
+          />
+        </ButtonArea>
       </Row>
     </ParentWrapper>
   );
 }
 
 const ParentWrapper = styled.nav`
   height: ${p => p.theme.heights.breadCrumbBar};
-  padding-block: ${PARENT_PADDING_BLOCK};
-  padding-inline: 0.5rem;
-  color: ${props => props.theme.colors.textLight2};
+  padding-inline: ${p => p.theme.size(2)};
   border-bottom: 1px solid ${props => props.theme.colors.bg2};
   background-color: ${props => props.theme.colors.bg};
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
 
-  view-transition-name: breadcrumb-bar;
+  view-transition-name: ${BREADCRUMB_BAR_TRANSITION_TAG};
 `;
 
 type NestedParentProps = {
@@ -111,10 +106,10 @@ function NestedParent({ subject, depth }: NestedParentProps): JSX.Element {
     return <Breadcrumb>Set as drive</Breadcrumb>;
   }
 
-  function handleClick(e) {
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = e => {
     e.preventDefault();
     navigate(constructOpenURL(subject));
-  }
+  };
 
   return (
     <>
@@ -170,7 +165,7 @@ const Spacer = styled.span`
   flex: 1;
 `;
 
-const ScopedSearchButton = styled(IconButton)`
+const ButtonArea = styled.div`
   justify-self: flex-end;
 `;
 

browser/data-browser/src/components/ResourceContextMenu/MenuBarDropdownTrigger.tsx

@@ -1,24 +1,22 @@
-import { ButtonBar } from '../Button';
 import { FaEllipsisV } from 'react-icons/fa';
 import { DropdownTriggerRenderFunction } from '../Dropdown/DropdownTrigger';
 import { shortcuts } from '../HotKeyWrapper';
+import { IconButton } from '../IconButton/IconButton';
 
 export const MenuBarDropdownTrigger: DropdownTriggerRenderFunction = (
-  { onClick, isActive, menuId },
+  { onClick, menuId },
   ref,
 ) => (
-  <ButtonBar
+  <IconButton
     aria-controls={menuId}
-    selected={isActive}
     ref={ref}
     title={`Open menu (${shortcuts.menu})`}
     type='button'
     data-test='context-menu'
     onClick={onClick}
-    rightPadding
   >
     <FaEllipsisV />
-  </ButtonBar>
+  </IconButton>
 );
 
 MenuBarDropdownTrigger.displayName = 'MenuBarDropdownTrigger';

browser/data-browser/src/components/forms/BasicSelect.tsx

@@ -6,10 +6,11 @@ type Props = React.SelectHTMLAttributes<HTMLSelectElement>;
 
 export const BasicSelect: FC<PropsWithChildren<Props>> = ({
   children,
+  className,
   ...props
 }) => {
   return (
-    <StyledInputWrapper>
+    <StyledInputWrapper className={className}>
       <SelectWrapper disabled={!!props.disabled}>
         <Select {...props}>{children}</Select>
       </SelectWrapper>

browser/data-browser/src/components/forms/InputString.tsx

@@ -20,7 +20,7 @@ export default function InputString({
   });
 
   function handleUpdate(event: React.ChangeEvent<HTMLInputElement>): void {
-    const newval = event.target.value;
+    const newval = event.target.value || undefined;
     setValue(newval);
 
     try {

browser/data-browser/src/helpers/containers.ts

@@ -1,2 +1,3 @@
 export const MAIN_CONTAINER = 'main';
 export const ALL_PROPS_CONTAINER = 'all-props';
+export const CARD_CONTAINER = 'card';

browser/data-browser/src/helpers/transitionName.ts

@@ -2,12 +2,14 @@ export const FILE_IMAGE_TRANSITION_TAG = 'file-image';
 export const SIDEBAR_TRANSITION_TAG = 'sidebar';
 export const PAGE_TITLE_TRANSITION_TAG = 'page-title';
 export const RESOURCE_PAGE_TRANSITION_TAG = 'resource-page';
+export const BREADCRUMB_BAR_TRANSITION_TAG = 'breadcrumb-bar';
+export const NAVBAR_TRANSITION_TAG = 'navbar';
 
-const hashStringWithCYRB53 = (str, seed = 0) => {
+const hashStringWithCYRB53 = (str: string, seed = 0) => {
   let h1 = 0xdeadbeef ^ seed,
     h2 = 0x41c6ce57 ^ seed;
 
-  for (let i = 0, ch; i < str.length; i++) {
+  for (let i = 0, ch: number; i < str.length; i++) {
     ch = str.charCodeAt(i);
     h1 = Math.imul(h1 ^ ch, 2654435761);
     h2 = Math.imul(h2 ^ ch, 1597334677);

browser/data-browser/src/routes/DataRoute.tsx

@@ -75,8 +75,8 @@ function Data(): JSX.Element {
   };
 
   return (
-    <ContainerNarrow about={subject}>
-      <Main>
+    <Main subject={subject}>
+      <ContainerNarrow about={subject}>
         <Column>
           <Row center gap='1ch'>
             <IconButton
@@ -145,8 +145,8 @@ function Data(): JSX.Element {
           <h2>Usage</h2>
           <ResourceUsage resource={resource} />
         </Column>
-      </Main>
-    </ContainerNarrow>
+      </ContainerNarrow>
+    </Main>
   );
 }