add action bar edit/details icons

SenseNet · Oct 26, 2023 · 7276d50 · 7276d50
1 parent 0477960
commit 7276d50
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 32 deletions.
diff --git a/apps/sensenet/src/components/Icon.tsx b/apps/sensenet/src/components/Icon.tsx
@@ -11,6 +11,7 @@ import {
   DeleteOutlined,
   DescriptionOutlined,
   DomainOutlined,
+  Edit,
   ErrorOutlined,
   EventOutlined,
   FiberNew,
@@ -173,6 +174,10 @@ const getIconByName = (name: string | undefined, options: IconOptions) => {
       return <InlineIcon icon={vercelIcon} width="24" />
     case 'Heroku':
       return <InlineIcon icon={herokuIcon} height="24" />
+    case 'Edit':
+      return <Edit style={options.style} />
+    case 'Details':
+      return <Info style={options.style} />
     default:
       return null
   }

diff --git a/apps/sensenet/src/components/view-controls/browse-view.tsx b/apps/sensenet/src/components/view-controls/browse-view.tsx
@@ -63,7 +63,7 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
         ...classes,
         cancel: globalClasses.cancelButton,
       }}
-      renderTitle={() => <ViewTitle titleBold={content?.DisplayName} content={content} />}
+      renderTitle={() => <ViewTitle actionName="browse" titleBold={content?.DisplayName} content={content} />}
     />
   )
 }
diff --git a/apps/sensenet/src/components/view-controls/common/view-title.tsx b/apps/sensenet/src/components/view-controls/common/view-title.tsx
@@ -7,13 +7,14 @@ import { useHistory } from 'react-router'
 import { ResponsivePersonalSettings } from '../../../context'
 import { useGlobalStyles } from '../../../globalStyles'
 import { useSnRoute } from '../../../hooks'
-import { getPrimaryActionUrl } from '../../../services'
+import { getPrimaryActionUrl, getUrlForContent } from '../../../services'
 import { Icon } from '../../Icon'
 
 interface ViewTitleProps {
   title?: string
   titleBold?: string
   content?: GenericContent
+  actionName?: string
 }
 
 const useStyles = makeStyles(() => {
@@ -22,10 +23,15 @@ const useStyles = makeStyles(() => {
       height: '68px',
       fontSize: '20px',
       flexShrink: 0,
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
     },
     textBolder: {
       fontWeight: 500,
     },
+    actionBar: {
+      display: 'flex',
+    },
   })
 })
 
@@ -57,37 +63,93 @@ export const ViewTitle: React.FunctionComponent<ViewTitleProps> = (props) => {
 
   return (
     <div className={clsx(classes.title, globalClasses.centered)}>
-      <span data-test="viewtitle">
+      <div data-test="viewtitle">
         {props.title} <span className={classes.textBolder}>{props.titleBold}</span>
-      </span>
-      {props.content && (
-        <span
-          title={`Open ${contentDisplayName} CTD`}
-          onClick={async () => {
-            const content = await getContentTypeId(props.content!.Type)
-            history.push(
-              getPrimaryActionUrl({
-                content,
-                repository,
-                location: history.location,
-                uiSettings,
-                snRoute,
-                removePath: true,
-              }),
-            )
-          }}
-          className={globalClasses.centered}>
-          <Icon
-            style={{
-              marginLeft: '9px',
-              height: '24px',
-              width: '24px',
-              cursor: 'pointer',
+      </div>
+      <div className={clsx(classes.actionBar)}>
+        {props.actionName === 'browse' && (
+          <span
+            title={`Open ${contentDisplayName} Edit Page`}
+            onClick={async () => {
+              history.push(
+                getUrlForContent({
+                  content: props.content!,
+                  uiSettings,
+                  location: history.location,
+                  action: 'edit',
+                  snRoute,
+                  removePath: true,
+                }),
+              )
+            }}
+            className={globalClasses.centered}>
+            <Icon
+              style={{
+                marginLeft: '9px',
+                height: '24px',
+                width: '24px',
+                cursor: 'pointer',
+              }}
+              item={{ Icon: 'Edit' }}
+            />
+          </span>
+        )}
+        {props.actionName === 'edit' && (
+          <span
+            title={`Open ${contentDisplayName} Details Page`}
+            onClick={async () => {
+              history.push(
+                getUrlForContent({
+                  content: props.content!,
+                  uiSettings,
+                  location: history.location,
+                  action: 'browse',
+                  snRoute,
+                  removePath: true,
+                }),
+              )
+            }}
+            className={globalClasses.centered}>
+            <Icon
+              style={{
+                marginLeft: '9px',
+                height: '24px',
+                width: '24px',
+                cursor: 'pointer',
+              }}
+              item={{ Icon: 'Details' }}
+            />
+          </span>
+        )}
+        {props.content && (
+          <span
+            title={`Open ${contentDisplayName} CTD`}
+            onClick={async () => {
+              const content = await getContentTypeId(props.content!.Type)
+              history.push(
+                getPrimaryActionUrl({
+                  content,
+                  repository,
+                  location: history.location,
+                  uiSettings,
+                  snRoute,
+                  removePath: true,
+                }),
+              )
             }}
-            item={{ ContentTypeName: 'ContentType' }}
-          />
-        </span>
-      )}
+            className={globalClasses.centered}>
+            <Icon
+              style={{
+                marginLeft: '9px',
+                height: '24px',
+                width: '24px',
+                cursor: 'pointer',
+              }}
+              item={{ ContentTypeName: 'ContentType' }}
+            />
+          </span>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/apps/sensenet/src/components/view-controls/edit-view.tsx b/apps/sensenet/src/components/view-controls/edit-view.tsx
@@ -117,9 +117,10 @@ export const EditView: React.FC<EditViewProps> = (props) => {
       }}
       renderTitle={() => (
         <ViewTitle
-          title={props.actionName === 'browse' ? 'Info about' : 'Edit'}
+          title={props.actionName === 'browse' ? '' : 'Edit'}
           titleBold={content?.DisplayName}
           content={content}
+          actionName={props.actionName}
         />
       )}
     />