#896 Fix double tap on ios + move new resource buttons

browser/CHANGELOG.md

@@ -8,6 +8,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 
 - [#855](https://github.com/atomicdata-dev/atomic-server/issues/855) Add a dialog that shows how to fetch and use the current resource in your code.
 - [#825](https://github.com/atomicdata-dev/atomic-server/issues/825) Folder display styles are now saved locally instead of on the resource. The display style property will now act as the default view style.
+- [#896](https://github.com/atomicdata-dev/atomic-server/issues/896) Fix issue where sidebar items require a double tap on ios.
 - Updated look of the default resource form.
 
 ### @tomic/react

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

@@ -1,7 +1,7 @@
 import { Resource, useCanWrite, useTitle } from '@tomic/react';
 import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { FaEdit } from 'react-icons/fa';
+import { FaPencil } from 'react-icons/fa6';
 import { styled, css } from 'styled-components';
 import { transitionName } from '../helpers/transitionName';
 import { ViewTransitionProps } from '../helpers/ViewTransitionProps';
@@ -107,8 +107,6 @@ const Title = styled.h1<TitleProps & ViewTransitionProps>`
   display: flex;
   align-items: center;
   gap: ${p => p.theme.margin}rem;
-  justify-content: space-between;
-  cursor: pointer;
   cursor: ${props => (props.canEdit ? 'pointer' : 'initial')};
   opacity: ${props => (props.subtle ? 0.5 : 1)};
 
@@ -138,14 +136,10 @@ const TitleInput = styled.input`
   }
 `;
 
-const Icon = styled(FaEdit)`
+const Icon = styled(FaPencil)`
   opacity: 0;
   font-size: 0.8em;
   ${Title}:hover & {
     opacity: 0.5;
-
-    &:hover {
-      opacity: 1;
-    }
   }
 `;

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

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Client, core, useResource, useStore } from '@tomic/react';
+import { Client, core, useCanWrite, useResource } from '@tomic/react';
 import {
   editURL,
   dataURL,
@@ -19,13 +19,13 @@ import {
   FaClock,
   FaCode,
   FaDownload,
-  FaEdit,
-  FaEllipsisV,
-  FaRedo,
-  FaSearch,
-  FaShareSquare,
+  FaPencil,
+  FaEllipsisVertical,
+  FaMagnifyingGlass,
+  FaShare,
   FaTrash,
-} from 'react-icons/fa';
+  FaPlus,
+} from 'react-icons/fa6';
 import { useQueryScopeHandler } from '../../hooks/useQueryScope';
 import {
   ConfirmationDialog,
@@ -35,18 +35,20 @@ import { ResourceInline } from '../../views/ResourceInline';
 import { ResourceUsage } from '../ResourceUsage';
 import { useCurrentSubject } from '../../helpers/useCurrentSubject';
 import { ResourceCodeUsageDialog } from '../../views/CodeUsage/ResourceCodeUsageDialog';
+import { useNewRoute } from '../../helpers/useNewRoute';
+import { addIf } from '../../helpers/addIf';
 
 export enum ContextMenuOptions {
   View = 'view',
   Data = 'data',
   Edit = 'edit',
-  Refresh = 'refresh',
   Scope = 'scope',
   Share = 'share',
   Delete = 'delete',
   History = 'history',
   Import = 'import',
   UseInCode = 'useInCode',
+  NewChild = 'newChild',
 }
 
 export interface ResourceContextMenuProps {
@@ -74,15 +76,14 @@ function ResourceContextMenu({
   bindActive,
   onAfterDelete,
 }: ResourceContextMenuProps) {
-  const store = useStore();
   const navigate = useNavigate();
   const location = useLocation();
   const resource = useResource(subject);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [showCodeUsageDialog, setShowCodeUsageDialog] = useState(false);
-
+  const handleAddClick = useNewRoute(subject);
   const [currentSubject] = useCurrentSubject();
-
+  const [canWrite] = useCanWrite(resource);
   const { enableScope } = useQueryScopeHandler(subject);
   // Try to not have a useResource hook in here, as that will lead to many costly fetches when the user enters a new subject
 
@@ -111,43 +112,44 @@ function ResourceContextMenu({
   }
 
   const items: DropdownItem[] = [
-    ...(simple
-      ? []
-      : [
-          {
-            disabled: location.pathname.startsWith(paths.show),
-            id: ContextMenuOptions.View,
-            label: 'normal view',
-            helper: 'Open the regular, default View.',
-            onClick: () => navigate(constructOpenURL(subject)),
-          },
-          {
-            disabled: location.pathname.startsWith(paths.data),
-            id: ContextMenuOptions.Data,
-            label: 'data view',
-            helper: 'View the resource and its properties in the Data View.',
-            shortcut: shortcuts.data,
-            onClick: () => navigate(dataURL(subject)),
-          },
-          DIVIDER,
-          {
-            id: ContextMenuOptions.Refresh,
-            icon: <FaRedo />,
-            label: 'refresh',
-            helper:
-              'Fetch the resouce again from the server, possibly see new changes.',
-            onClick: () => store.fetchResourceFromServer(subject),
-          },
-        ]),
-    {
-      // disabled: !canWrite || location.pathname.startsWith(paths.edit),
-      id: ContextMenuOptions.Edit,
-      label: 'edit',
-      helper: 'Open the edit form.',
-      icon: <FaEdit />,
-      shortcut: simple ? '' : shortcuts.edit,
-      onClick: () => navigate(editURL(subject)),
-    },
+    ...addIf<DropdownItem>(
+      !simple,
+      {
+        disabled: location.pathname.startsWith(paths.show),
+        id: ContextMenuOptions.View,
+        label: 'normal view',
+        helper: 'Open the regular, default View.',
+        onClick: () => navigate(constructOpenURL(subject)),
+      },
+      {
+        disabled: location.pathname.startsWith(paths.data),
+        id: ContextMenuOptions.Data,
+        label: 'data view',
+        helper: 'View the resource and its properties in the Data View.',
+        shortcut: shortcuts.data,
+        onClick: () => navigate(dataURL(subject)),
+      },
+      DIVIDER,
+    ),
+    ...addIf(
+      canWrite,
+      {
+        // disabled: !canWrite || location.pathname.startsWith(paths.edit),
+        id: ContextMenuOptions.Edit,
+        label: 'edit',
+        helper: 'Open the edit form.',
+        icon: <FaPencil />,
+        shortcut: simple ? '' : shortcuts.edit,
+        onClick: () => navigate(editURL(subject)),
+      },
+      {
+        id: ContextMenuOptions.NewChild,
+        label: 'add child',
+        helper: 'Create a new resource under this resource.',
+        icon: <FaPlus />,
+        onClick: handleAddClick,
+      },
+    ),
     {
       id: ContextMenuOptions.UseInCode,
       label: 'use in code',
@@ -158,41 +160,44 @@ function ResourceContextMenu({
     },
     {
       id: ContextMenuOptions.Scope,
-      label: 'search in',
+      label: 'search children',
       helper: 'Scope search to resource',
-      icon: <FaSearch />,
+      icon: <FaMagnifyingGlass />,
       onClick: enableScope,
     },
     {
-      // disabled: !canWrite || history.location.pathname.startsWith(paths.edit),
       id: ContextMenuOptions.Share,
       label: 'share',
-      icon: <FaShareSquare />,
+      icon: <FaShare />,
       helper: 'Open the share menu',
       onClick: () => navigate(shareURL(subject)),
     },
-    {
-      // disabled: !canWrite,
-      id: ContextMenuOptions.Delete,
-      icon: <FaTrash />,
-      label: 'delete',
-      helper: 'Delete this resource.',
-      onClick: () => setShowDeleteDialog(true),
-    },
+
     {
       id: ContextMenuOptions.History,
       icon: <FaClock />,
       label: 'history',
       helper: 'Show the history of this resource',
       onClick: () => navigate(historyURL(subject)),
     },
-    {
-      id: ContextMenuOptions.Import,
-      icon: <FaDownload />,
-      label: 'import',
-      helper: 'Import Atomic Data to this resource',
-      onClick: () => navigate(importerURL(subject)),
-    },
+    ...addIf(
+      canWrite,
+      {
+        id: ContextMenuOptions.Import,
+        icon: <FaDownload />,
+        label: 'import',
+        helper: 'Import Atomic Data to this resource',
+        onClick: () => navigate(importerURL(subject)),
+      },
+      {
+        disabled: !canWrite,
+        id: ContextMenuOptions.Delete,
+        icon: <FaTrash />,
+        label: 'delete',
+        helper: 'Delete this resource.',
+        onClick: () => setShowDeleteDialog(true),
+      },
+    ),
   ];
 
   const filteredItems = showOnly
@@ -205,7 +210,7 @@ function ResourceContextMenu({
   const triggerComp =
     trigger ??
     buildDefaultTrigger(
-      <FaEllipsisV />,
+      <FaEllipsisVertical />,
       title ?? `Open ${resource.title} menu`,
     );
 

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

@@ -1,20 +1,21 @@
-import { Resource, classes, useCollection } from '@tomic/react';
+import { Resource, core, useCollection } from '@tomic/react';
 
 import { PropertyUsage } from './PropertyUsage';
 import { UsageCard } from './UsageCard';
 import { ClassUsage } from './ClassUsage';
 import { ChildrenUsage } from './ChildrenUsage';
+import { Column } from '../Row';
 
 interface ResourceUsageProps {
   resource: Resource;
 }
 
 export function ResourceUsage({ resource }: ResourceUsageProps): JSX.Element {
-  if (resource.hasClasses(classes.property)) {
+  if (resource.hasClasses(core.classes.property)) {
     return <PropertyUsage resource={resource} />;
   }
 
-  if (resource.hasClasses(classes.class)) {
+  if (resource.hasClasses(core.classes.class)) {
     return <ClassUsage resource={resource} />;
   }
 
@@ -23,11 +24,11 @@ export function ResourceUsage({ resource }: ResourceUsageProps): JSX.Element {
 
 function BasicUsage({ resource }: ResourceUsageProps): JSX.Element {
   const { collection } = useCollection({
-    value: resource.getSubject(),
+    value: resource.subject,
   });
 
   return (
-    <>
+    <Column>
       <ChildrenUsage resource={resource} />
       <UsageCard
         collection={collection}
@@ -38,6 +39,6 @@ function BasicUsage({ resource }: ResourceUsageProps): JSX.Element {
           </span>
         }
       />
-    </>
+    </Column>
   );
 }

browser/data-browser/src/components/SideBar/ResourceSideBar/DropEdge.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { transition } from '../../../helpers/transition';
 import { SideBarDropData } from '../useSidebarDnd';
 import { useCanWrite, useResource } from '@tomic/react';
+import { SIDEBAR_WIDTH_PROP } from '../SidebarCSSVars';
 
 interface DropEdgeProps {
   parentHierarchy: string[];
@@ -62,7 +63,7 @@ const DropEdgeElement = styled.div<{ visible: boolean; active: boolean }>`
   background: ${p => p.theme.colors.main};
   opacity: ${p => (p.active ? 1 : 0)};
   z-index: 2;
-  width: calc(var(--width) - 2rem);
+  width: calc(var(${SIDEBAR_WIDTH_PROP}) - 2rem);
 
   ${transition('opacity', 'transform')}
 `;

browser/data-browser/src/components/SideBar/ResourceSideBar/FloatingActions.tsx

@@ -1,10 +1,7 @@
-import { useCanWrite, useResource, useTitle } from '@tomic/react';
 import { useState } from 'react';
-import { FaEllipsisV, FaPlus } from 'react-icons/fa';
+import { FaEllipsisVertical } from 'react-icons/fa6';
 import { styled, css } from 'styled-components';
-import { useNewRoute } from '../../../helpers/useNewRoute';
 import { buildDefaultTrigger } from '../../Dropdown/DefaultTrigger';
-import { IconButton } from '../../IconButton/IconButton';
 import ResourceContextMenu from '../../ResourceContextMenu';
 
 export interface FloatingActionsProps {
@@ -17,24 +14,10 @@ export function FloatingActions({
   subject,
   className,
 }: FloatingActionsProps): JSX.Element {
-  const parentResource = useResource(subject);
-  const [parentName] = useTitle(parentResource);
   const [dropdownActive, setDropdownActive] = useState(false);
-  const [canWrite] = useCanWrite(parentResource);
-
-  const handleAddClick = useNewRoute(subject);
 
   return (
     <Wrapper className={className} dropdownActive={dropdownActive}>
-      {canWrite && (
-        <IconButton
-          data-test='add-subresource'
-          onClick={handleAddClick}
-          title={`Create new resource under ${parentName}`}
-        >
-          <FaPlus />
-        </IconButton>
-      )}
       <ResourceContextMenu
         simple
         subject={subject}
@@ -46,17 +29,23 @@ export function FloatingActions({
 }
 
 const Wrapper = styled.span<{ dropdownActive: boolean }>`
-  visibility: ${p => (p.dropdownActive ? 'visible' : 'hidden')};
+  visibility: hidden;
   font-size: 0.9rem;
   color: ${p => p.theme.colors.main};
+
+  @media (pointer: fine) {
+    visibility: ${p => (p.dropdownActive ? 'visible' : 'hidden')};
+  }
 `;
 
 export const floatingHoverStyles = css`
   position: relative;
 
   &:hover ${Wrapper}, &:focus-within ${Wrapper} {
-    visibility: visible;
+    @media (pointer: fine) {
+      visibility: visible;
+    }
   }
 `;
 
-const SideBarDropDownTrigger = buildDefaultTrigger(<FaEllipsisV />);
+const SideBarDropDownTrigger = buildDefaultTrigger(<FaEllipsisVertical />);