fix: various ux fixes

unigraph-dev · Apr 5, 2022 · 788c021 · 788c021
1 parent eb96dca
commit 788c021
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/BacklinkView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/BacklinkView.tsx
@@ -74,6 +74,7 @@ export function BacklinkView({
             }}
             callbacks={{ ...callbacks, isBacklink: true }}
             noRemover
+            noHoverHighlight
             viewOptions={(object: any) => {
                 if (object?.type?.['unigraph.id'] === '$/schema/note_block') {
                     return {

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/DynamicObjectListView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/DynamicObjectListView.tsx
@@ -20,7 +20,7 @@ import {
     Box,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { ExpandMore, ClearAll, InboxOutlined } from '@mui/icons-material';
+import { ExpandMore, ClearAll, InboxOutlined, ExpandLess } from '@mui/icons-material';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 import { useDrop } from 'react-dnd';
@@ -117,14 +117,15 @@ function DynamicListItem({
     compact,
     itemStyle,
     viewOptions,
+    noHoverHighlight,
 }: any) {
     const [itemHovered, setItemHovered] = React.useState<boolean>(false);
     const isRemoverActive = React.useCallback(() => {
         return !(itemRemover === _.noop || isMobile() || noRemover);
     }, [itemRemover, noRemover]);
     return (
         <ListItem
-            sx={hoverSx}
+            sx={noHoverHighlight ? {} : hoverSx}
             style={{
                 ...(compact ? { paddingTop: '2px', paddingBottom: '2px' } : {}),
                 ...itemStyle,
@@ -205,6 +206,7 @@ export type DynamicObjectListViewProps = {
     components?: any;
     initialTab?: string;
     viewOptions?: any;
+    noHoverHighlight?: boolean;
 };
 
 function DynamicListBasic({
@@ -223,6 +225,7 @@ function DynamicListBasic({
     components,
     itemStyle,
     viewOptions,
+    noHoverHighlight,
 }: any) {
     const tabContext = React.useContext(TabContext);
     return (
@@ -251,6 +254,7 @@ function DynamicListBasic({
                     removeOnEnter={removeOnEnter}
                     components={components}
                     viewOptions={viewOptions}
+                    noHoverHighlight={noHoverHighlight}
                 />
             ))}
         </DragandDrop>
@@ -275,6 +279,7 @@ function DynamicList({
     components,
     itemStyle,
     viewOptions,
+    noHoverHighlight,
 }: any) {
     const tabContext = React.useContext(TabContext);
     const [loadedItems, setLoadedItems] = React.useState<any[]>([]);
@@ -358,6 +363,7 @@ function DynamicList({
                         removeOnEnter={removeOnEnter}
                         components={components}
                         viewOptions={viewOptions}
+                        noHoverHighlight={noHoverHighlight}
                     />
                 ))}
             </DragandDrop>
@@ -475,6 +481,7 @@ export const DynamicObjectListView: React.FC<DynamicObjectListViewProps> = ({
     itemAdder,
     initialTab,
     viewOptions,
+    noHoverHighlight,
 }) => {
     const tabContext = React.useContext(TabContext);
 
@@ -596,7 +603,16 @@ export const DynamicObjectListView: React.FC<DynamicObjectListViewProps> = ({
                                 }}
                             >
                                 <AccordionSummary
-                                    expandIcon={<ExpandMore onClick={() => setOptionsOpen(!optionsOpen)} />}
+                                    expandIcon={React.createElement(optionsOpen ? ExpandLess : ExpandMore, {
+                                        onClick: () => setOptionsOpen(!optionsOpen),
+                                        sx: {
+                                            cursor: 'pointer',
+                                            borderRadius: '16px',
+                                            '&:hover': {
+                                                backgroundColor: '#f5f5f5',
+                                            },
+                                        },
+                                    })}
                                     aria-controls="panel1bh-content"
                                     id="panel1bh-header"
                                     classes={{ content: classes.content }}
@@ -730,6 +746,7 @@ export const DynamicObjectListView: React.FC<DynamicObjectListViewProps> = ({
                               removeOnEnter,
                               components,
                               viewOptions,
+                              noHoverHighlight,
                           })
                         : groupers[groupBy](procItems.map(itemGetter)).map((el: Group) => (
                               <>
@@ -759,6 +776,7 @@ export const DynamicObjectListView: React.FC<DynamicObjectListViewProps> = ({
                                       removeOnEnter,
                                       components,
                                       viewOptions,
+                                      noHoverHighlight,
                                   })}
                               </>
                           ))}

diff --git a/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx b/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx
@@ -336,6 +336,7 @@ export function ParentsAndReferences({ data }: any) {
                 noDrop
                 titleBar=" parents"
                 loadAll
+                noHoverHighlight
                 components={{
                     '$/schema/note_block': {
                         view: NoChildrenReferenceNoteView,
@@ -356,6 +357,7 @@ export function ParentsAndReferences({ data }: any) {
                 noDrop
                 titleBar=" linked references"
                 loadAll
+                noHoverHighlight
                 components={{
                     '$/schema/note_block': {
                         view: ReferenceNoteView,

diff --git a/packages/unigraph-dev-explorer/src/examples/todo/TodoTagView.tsx b/packages/unigraph-dev-explorer/src/examples/todo/TodoTagView.tsx
@@ -22,7 +22,7 @@ export function TodoTagView({
     callbacks,
     reverse,
     uid,
-    titleBar = ' tagged tasks',
+    titleBar = ' tagged items',
     ...attributes
 }: any) {
     const [objects, setObjects]: [any[], any] = React.useState([]);