From a95bb29ce5334d5f1e57be49a4ea920f2d11f0f1 Mon Sep 17 00:00:00 2001 From: NoelKova Date: Tue, 9 Jul 2024 14:57:01 +0200 Subject: [PATCH 1/9] remove whitespaces and configuration settings refactor --- apps/sensenet/src/components/AddButton.tsx | 3 +- apps/sensenet/src/components/PageTitle.tsx | 3 +- .../src/components/appbar/desktop-app-bar.tsx | 3 +- .../components/appbar/desktop-nav-menu.tsx | 1 + .../command-palette/CommandPalette.tsx | 5 +- .../components/content-list/content-list.tsx | 7 +- .../src/components/content/Explore.tsx | 1 - .../context-menu/content-context-menu.tsx | 2 +- .../src/components/drawer/PermanentDrawer.tsx | 5 +- .../components/drawer/PermanentDrawerItem.tsx | 3 +- .../src/components/event-list/event-list.tsx | 2 +- .../src/components/layout/DesktopLayout.tsx | 5 +- .../src/components/settings/content-card.tsx | 130 ++++++++-------- .../components/settings/settings-table.tsx | 140 ++++++++++++++++++ .../src/components/settings/setup.tsx | 7 +- apps/sensenet/src/components/tree/tree.tsx | 2 +- apps/sensenet/src/globalStyles.ts | 12 +- apps/sensenet/src/localization/default.ts | 1 + 18 files changed, 245 insertions(+), 87 deletions(-) create mode 100644 apps/sensenet/src/components/settings/settings-table.tsx diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx index d9e5633b9..eed47f8a0 100644 --- a/apps/sensenet/src/components/AddButton.tsx +++ b/apps/sensenet/src/components/AddButton.tsx @@ -47,7 +47,8 @@ const useStyles = makeStyles((theme: Theme) => { display: 'flex', alignItems: 'center', justifyContent: 'space-evenly', - height: globals.common.drawerItemHeight, + height: globals.common.addButtonHeight, + paddingLeft: '2px', }, listDropdown: { padding: '10px 0 10px 10px', diff --git a/apps/sensenet/src/components/PageTitle.tsx b/apps/sensenet/src/components/PageTitle.tsx index fdb7f5abb..a7a1372f6 100644 --- a/apps/sensenet/src/components/PageTitle.tsx +++ b/apps/sensenet/src/components/PageTitle.tsx @@ -10,7 +10,8 @@ const useStyles = makeStyles((theme: Theme) => { pageTitle: { color: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white, fontFamily: '"Larsseit", Roboto', - fontSize: '20px', + fontSize: '24px', + padding: '8px 16px', }, }) }) diff --git a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx b/apps/sensenet/src/components/appbar/desktop-app-bar.tsx index 8e9d99dff..9a0ee8135 100644 --- a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx +++ b/apps/sensenet/src/components/appbar/desktop-app-bar.tsx @@ -21,7 +21,8 @@ const useStyles = makeStyles(() => { toolBar: { position: 'static', height: '100%', - paddingLeft: '32px', + minHeight: '42px', + paddingLeft: '16px', paddingRight: 0, }, logo: { diff --git a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx index 15707159a..10dbcebf1 100644 --- a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx +++ b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx @@ -21,6 +21,7 @@ const useStyles = makeStyles((theme: Theme) => viewOptions: { cursor: 'pointer', marginRight: '16px', + padding: '7px', }, navMenu: { height: '100%', diff --git a/apps/sensenet/src/components/command-palette/CommandPalette.tsx b/apps/sensenet/src/components/command-palette/CommandPalette.tsx index 3fca3a95f..18d58ff52 100644 --- a/apps/sensenet/src/components/command-palette/CommandPalette.tsx +++ b/apps/sensenet/src/components/command-palette/CommandPalette.tsx @@ -45,9 +45,8 @@ const useStyles = makeStyles(() => { }, iconButton: { color: globals.common.headerText, - '&:hover': { - backgroundColor: 'initial', - }, + padding: '7px', + marginRight: '6px', }, comboBox: { position: 'relative', diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx index bbcab9528..f9844a164 100644 --- a/apps/sensenet/src/components/content-list/content-list.tsx +++ b/apps/sensenet/src/components/content-list/content-list.tsx @@ -93,7 +93,7 @@ export const isReferenceField = (fieldName: string, repo: Repository, schema = ' } const rowHeightConst = 67 -const headerHeightConst = 58 +const headerHeightConst = 48 /** * Compare passed minutes with @@ -747,9 +747,9 @@ export const ContentList = (props: Co rowStyle: { position: 'relative', top: 'unset', - height: 'auto', + height: '48px', overflow: 'initial', - padding: '5px 0px', + padding: '0', }, onRowDoubleClick: onItemDoubleClickFunc, disableHeader: props.hideHeader, @@ -757,7 +757,6 @@ export const ContentList = (props: Co display: 'flex', flexDirection: 'column', overflowY: 'auto', - paddingBottom: '15px', minHeight: '100%', height: 'inherit', maxHeight: 'inherit', diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx index 78dd8f518..cf5bd08ca 100644 --- a/apps/sensenet/src/components/content/Explore.tsx +++ b/apps/sensenet/src/components/content/Explore.tsx @@ -50,7 +50,6 @@ const useStyles = makeStyles((theme: Theme) => { width: '100%', position: 'relative', overflow: 'hidden', - paddingTop: '8px', }, }) }) diff --git a/apps/sensenet/src/components/context-menu/content-context-menu.tsx b/apps/sensenet/src/components/context-menu/content-context-menu.tsx index 7b40b9989..2965f6277 100644 --- a/apps/sensenet/src/components/context-menu/content-context-menu.tsx +++ b/apps/sensenet/src/components/context-menu/content-context-menu.tsx @@ -79,7 +79,7 @@ export const ContentContextMenu: React.FunctionComponent - + {actions?.map((action) => { return ( { width: '100%', }, listButton: { - height: '65px', + height: '60px', + paddingLeft: '2px', }, expandCollapseWrapper: { height: '49px', @@ -126,7 +127,7 @@ export const PermanentDrawer = () => { {systemItems && ( - + {systemItems.map((item) => { return (
  • diff --git a/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx b/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx index dafaab592..56645b3b1 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx @@ -30,7 +30,8 @@ const useStyles = makeStyles((theme: Theme) => { }, }, listButton: { - height: '65px', + height: '60px', + paddingLeft: '2px', }, listItemIconDark: { color: theme.palette.common.white, diff --git a/apps/sensenet/src/components/event-list/event-list.tsx b/apps/sensenet/src/components/event-list/event-list.tsx index 90a104bcd..ecd150cde 100644 --- a/apps/sensenet/src/components/event-list/event-list.tsx +++ b/apps/sensenet/src/components/event-list/event-list.tsx @@ -54,7 +54,7 @@ export default function EventList() { {currentEvent ? ( ) : ( - + )} diff --git a/apps/sensenet/src/components/layout/DesktopLayout.tsx b/apps/sensenet/src/components/layout/DesktopLayout.tsx index 8b9530377..b47a5858d 100644 --- a/apps/sensenet/src/components/layout/DesktopLayout.tsx +++ b/apps/sensenet/src/components/layout/DesktopLayout.tsx @@ -35,10 +35,7 @@ const useStyles = makeStyles((theme: Theme) => { boxSizing: 'border-box', overflow: 'hidden', height: '100%', - paddingTop: '10px', - '& > *': { - paddingLeft: `${globals.common.explorePaddingLeft}`, - }, + padding: '0px', }, executeActionPaper: { height: '100%', diff --git a/apps/sensenet/src/components/settings/content-card.tsx b/apps/sensenet/src/components/settings/content-card.tsx index f926e0abf..30a74338f 100644 --- a/apps/sensenet/src/components/settings/content-card.tsx +++ b/apps/sensenet/src/components/settings/content-card.tsx @@ -1,4 +1,15 @@ -import { createStyles, IconButton, makeStyles, Theme, Tooltip } from '@material-ui/core' +import { + createStyles, + IconButton, + makeStyles, + Table, + TableCell, + TableContainer, + TableHead, + TableRow, + Theme, + Tooltip, +} from '@material-ui/core' import Button from '@material-ui/core/Button' import Card from '@material-ui/core/Card' import CardActions from '@material-ui/core/CardActions' @@ -82,67 +93,70 @@ export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => { const dataTestName = settingsTitle.replace(/\s+/g, '-').toLowerCase() return ( - { - ev.preventDefault() - onContextMenu(ev) - }} - className={classes.card} - data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}> - - - - {settingsTitle} - - - - - - {!isSystemSettings.includes(settingsTitle) && ( - { - openDialog({ - name: 'delete', - props: { content: [settings] }, - dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, - }) - }}> - - - )} - - - - {hasDocumentation.includes(settingsTitle) && ( - + ) } diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx new file mode 100644 index 000000000..9d4b640aa --- /dev/null +++ b/apps/sensenet/src/components/settings/settings-table.tsx @@ -0,0 +1,140 @@ +import { + Button, + createStyles, + IconButton, + makeStyles, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Theme, + Tooltip, +} from '@material-ui/core' + +import { Edit, InfoOutlined } from '@material-ui/icons' +import { Settings } from '@sensenet/default-content-types' +import { useRepository } from '@sensenet/hooks-react' +import React, { useContext } from 'react' +import { Link, useHistory } from 'react-router-dom' +import { ResponsivePersonalSettings } from '../../context' +import { useLocalization } from '../../hooks' +import { getPrimaryActionUrl } from '../../services' + +const useStyles = makeStyles((theme) => ({ + tableHead: { + backgroundColor: 'hsl(0deg 0% 24%)', + cursor: 'default', + }, + tableHeadCell: { + color: 'white', + fontSize: '1.1rem', + }, + tableCell: { + verticalAlign: 'middle', + }, + tableCellName: { + fontSize: '1.1rem', + }, + descriptionCell: { + textAlign: 'left', + whiteSpace: 'normal', + wordBreak: 'break-word', + paddingTop: '12px', + paddingBottom: '12px', + }, + tableRow: { + '&:hover': { + backgroundColor: 'rgba(255, 255, 255, 0.08)', + }, + }, +})) + +export interface SettingsTableProps { + settings: Settings[] +} +export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup' +const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing'] +const isSystemSettings = [ + 'DocumentPreview', + 'OAuth', + 'OfficeOnline', + 'Indexing', + 'Sharing', + 'Logging', + 'Portal', + 'Permission', + 'MailProcessor', + 'UserProfile', + 'ColumnSettings', + 'TaskManagement', + 'MultiFactorAuthentication', +] +export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}` + +export const SettingsTable = ({ settings }: SettingsTableProps) => { + console.log(settings) + const classes = useStyles() + const localization = useLocalization().settings + const repository = useRepository() + const uiSettings = useContext(ResponsivePersonalSettings) + const history = useHistory() + if (!settings) { + return
    Loading
    + } + return ( + + + + + {localization.name} + {localization.description} + {localization.edit} + {localization.learnMore} + + + + {settings.map((setting) => ( + + + {setting.Name.split('.')[0] + .replace(/([A-Z])/g, ' $1') + .trim()} + + + {setting.Description || '-'} + + + + + + + + + + {hasDocumentation.includes( + (setting.Name || setting.DisplayName || '')?.replace(/\.settings/gi, ''), + ) && ( + + + + + + )} + + + ))} + +
    +     + ) +} diff --git a/apps/sensenet/src/components/settings/setup.tsx b/apps/sensenet/src/components/settings/setup.tsx index 495e78e93..a9750ae14 100644 --- a/apps/sensenet/src/components/settings/setup.tsx +++ b/apps/sensenet/src/components/settings/setup.tsx @@ -12,6 +12,7 @@ import { ContentContextMenu } from '../context-menu/content-context-menu' import { EditBinary } from '../edit/edit-binary' import { BrowseView, EditView, NewView, VersionView } from '../view-controls' import { ContentCard } from './content-card' +import { SettingsTable } from './settings-table' const Setup = () => { const repository = useRepository() @@ -62,6 +63,7 @@ const Setup = () => { ]) const renderContent = () => { + console.log(settings) switch (activeAction) { case 'browse': return @@ -104,7 +106,8 @@ const Setup = () => { }, }} /> - {settings.map((s) => { + + {/* {settings.map((s) => { return ( { }} /> ) - })} + })} */} ) : null} diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx index 347d92dcd..69a10010c 100644 --- a/apps/sensenet/src/components/tree/tree.tsx +++ b/apps/sensenet/src/components/tree/tree.tsx @@ -219,7 +219,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac ) } return ( - + {renderItem(treeData.children?.[index], index.toString(), 10)} ) diff --git a/apps/sensenet/src/globalStyles.ts b/apps/sensenet/src/globalStyles.ts index 55eed16b3..a1326dc37 100644 --- a/apps/sensenet/src/globalStyles.ts +++ b/apps/sensenet/src/globalStyles.ts @@ -4,18 +4,18 @@ import { clsx } from 'clsx' export const globals = { common: { //Fix sizes - headerHeight: 80, - drawerWidthCollapsed: 90, - drawerWidthExpanded: 250, - drawerItemHeight: 65, + headerHeight: 42, + drawerWidthCollapsed: 60, + drawerWidthExpanded: 240, + drawerItemHeight: 42, formTitleHeight: 68, formActionButtonsHeight: 80, settingsDrawerWidth: 250, + addButtonHeight: 60, //Colors headerBackground: '#353B4E', headerText: 'rgba(255,255,255,0.87)', secondaryIconSize: '16px', - explorePaddingLeft: '15px', elavationShadow: '1px 1px 3px 0px hsl(0deg 0% 0% / 28%)', }, light: { @@ -106,7 +106,7 @@ export const useGlobalStyles = makeStyles((theme: Theme) => { backgroundColor: theme.palette.primary.main, }, drawerIconButtonWrapper: { - height: globals.common.drawerItemHeight, + height: globals.common.addButtonHeight, width: '100%', display: 'flex', justifyContent: 'center', diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts index d5b3137d6..2274233fe 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -442,6 +442,7 @@ const values = { }, }, settings: { + name: 'Name', edit: 'Edit', learnMore: 'Learn more', stats: 'Stats', From 3c7cff61e41f2081138101e0587255a60e439b8a Mon Sep 17 00:00:00 2001 From: NoelKova Date: Thu, 11 Jul 2024 10:50:01 +0200 Subject: [PATCH 2/9] add delete column and fix minor issues --- .../context-menu/content-context-menu.tsx | 2 +- .../src/components/event-list/event-list.tsx | 2 +- .../src/components/settings/content-card.tsx | 136 ++++++++---------- .../components/settings/settings-table.tsx | 52 ++++--- .../src/components/settings/setup.tsx | 15 -- apps/sensenet/src/localization/default.ts | 1 + 6 files changed, 96 insertions(+), 112 deletions(-) diff --git a/apps/sensenet/src/components/context-menu/content-context-menu.tsx b/apps/sensenet/src/components/context-menu/content-context-menu.tsx index 2965f6277..7b40b9989 100644 --- a/apps/sensenet/src/components/context-menu/content-context-menu.tsx +++ b/apps/sensenet/src/components/context-menu/content-context-menu.tsx @@ -79,7 +79,7 @@ export const ContentContextMenu: React.FunctionComponent - + {actions?.map((action) => { return ( ) : ( - + )} diff --git a/apps/sensenet/src/components/settings/content-card.tsx b/apps/sensenet/src/components/settings/content-card.tsx index 30a74338f..98ef9b8d9 100644 --- a/apps/sensenet/src/components/settings/content-card.tsx +++ b/apps/sensenet/src/components/settings/content-card.tsx @@ -1,15 +1,4 @@ -import { - createStyles, - IconButton, - makeStyles, - Table, - TableCell, - TableContainer, - TableHead, - TableRow, - Theme, - Tooltip, -} from '@material-ui/core' +import { createStyles, IconButton, makeStyles, Theme, Tooltip } from '@material-ui/core' import Button from '@material-ui/core/Button' import Card from '@material-ui/core/Card' import CardActions from '@material-ui/core/CardActions' @@ -25,7 +14,6 @@ import { ResponsivePersonalSettings } from '../../context' import { useLocalization } from '../../hooks' import { getPrimaryActionUrl } from '../../services' import { useDialog } from '../dialogs' - const useStyles = makeStyles((theme: Theme) => { return createStyles({ card: { @@ -54,16 +42,12 @@ const useStyles = makeStyles((theme: Theme) => { }, }) }) - export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup' - export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}` - type ContentCardProps = { settings: Settings onContextMenu: (ev: React.MouseEvent) => void } - const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing'] const isSystemSettings = [ 'DocumentPreview', @@ -80,7 +64,6 @@ const isSystemSettings = [ 'TaskManagement', 'MultiFactorAuthentication', ] - export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => { const localization = useLocalization().settings const repository = useRepository() @@ -93,70 +76,67 @@ export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => { const dataTestName = settingsTitle.replace(/\s+/g, '-').toLowerCase() return ( -
    -
    - { - ev.preventDefault() - onContextMenu(ev) - }} - className={classes.card} - data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}> - - - - {settingsTitle} - - - - - - {!isSystemSettings.includes(settingsTitle) && ( - { - openDialog({ - name: 'delete', - props: { content: [settings] }, - dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, - }) - }}> - - - )} - { + ev.preventDefault() + onContextMenu(ev) + }} + className={classes.card} + data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}> + + + + {settingsTitle} + + + + + + {!isSystemSettings.includes(settingsTitle) && ( + { + openDialog({ + name: 'delete', + props: { content: [settings] }, + dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, + }) + }}> + + + )} + + + + {hasDocumentation.includes(settingsTitle) && ( + - - {hasDocumentation.includes(settingsTitle) && ( - - - - )} - - -
    + + )} + + ) } diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx index 9d4b640aa..3f55ff0f4 100644 --- a/apps/sensenet/src/components/settings/settings-table.tsx +++ b/apps/sensenet/src/components/settings/settings-table.tsx @@ -1,6 +1,4 @@ import { - Button, - createStyles, IconButton, makeStyles, Table, @@ -9,11 +7,9 @@ import { TableContainer, TableHead, TableRow, - Theme, - Tooltip, } from '@material-ui/core' -import { Edit, InfoOutlined } from '@material-ui/icons' +import { Delete, Edit, InfoOutlined } from '@material-ui/icons' import { Settings } from '@sensenet/default-content-types' import { useRepository } from '@sensenet/hooks-react' import React, { useContext } from 'react' @@ -21,6 +17,7 @@ import { Link, useHistory } from 'react-router-dom' import { ResponsivePersonalSettings } from '../../context' import { useLocalization } from '../../hooks' import { getPrimaryActionUrl } from '../../services' +import { useDialog } from '../dialogs' const useStyles = makeStyles((theme) => ({ tableHead: { @@ -74,15 +71,24 @@ const isSystemSettings = [ export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}` export const SettingsTable = ({ settings }: SettingsTableProps) => { - console.log(settings) const classes = useStyles() const localization = useLocalization().settings const repository = useRepository() const uiSettings = useContext(ResponsivePersonalSettings) const history = useHistory() - if (!settings) { - return
    Loading
    - } + const { openDialog } = useDialog() + const updatedSettings = settings.map((setting: Settings) => { + return { + ...setting, + nameToDisplay: setting.Name.split('.')[0] + .replace(/([A-Z])/g, ' $1') + .trim(), + nameToTest: setting.Name.replace(/\.settings/gi, '') + .replace(/\s+/g, '-') + .toLowerCase(), + } + }) + const hasDeletableSetting = updatedSettings.some((setting) => !isSystemSettings.includes(setting.Name.split('.')[0])) return ( @@ -92,15 +98,14 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { {localization.description}{localization.edit}{localization.learnMore} + {hasDeletableSetting && {localization.delete}} - {settings.map((setting) => ( + {updatedSettings.map((setting) => ( - {setting.Name.split('.')[0] - .replace(/([A-Z])/g, ' $1') - .trim()} + {setting.nameToDisplay} {setting.Description || '-'} @@ -109,10 +114,7 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { - + @@ -131,6 +133,22 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { )} + {hasDeletableSetting && !isSystemSettings.includes(setting.Name.split('.')[0]) && ( + + { + openDialog({ + name: 'delete', + props: { content: [setting] }, + dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, + }) + }}> + + + + )} ))} diff --git a/apps/sensenet/src/components/settings/setup.tsx b/apps/sensenet/src/components/settings/setup.tsx index a9750ae14..898cf9353 100644 --- a/apps/sensenet/src/components/settings/setup.tsx +++ b/apps/sensenet/src/components/settings/setup.tsx @@ -63,7 +63,6 @@ const Setup = () => { ]) const renderContent = () => { - console.log(settings) switch (activeAction) { case 'browse': return @@ -107,20 +106,6 @@ const Setup = () => { }} /> - {/* {settings.map((s) => { - return ( - { - ev.preventDefault() - setContextMenuAnchor((ev.currentTarget as HTMLElement) || null) - setContextMenuItem(s) - setIsContextMenuOpened(true) - }} - /> - ) - })} */} ) : null} diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts index 2274233fe..2ad618f45 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -443,6 +443,7 @@ const values = { }, settings: { name: 'Name', + delete: 'Delete', edit: 'Edit', learnMore: 'Learn more', stats: 'Stats', From 148e19a252dc71a4bc4277c04846926e6436936b Mon Sep 17 00:00:00 2001 From: NoelKova Date: Fri, 12 Jul 2024 13:48:39 +0200 Subject: [PATCH 3/9] adding context menu and fix positioning --- .../components/settings/settings-table.tsx | 74 ++++++++++++------- .../src/components/settings/setup.tsx | 19 ++++- 2 files changed, 64 insertions(+), 29 deletions(-) diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx index 3f55ff0f4..bbeb5ed0c 100644 --- a/apps/sensenet/src/components/settings/settings-table.tsx +++ b/apps/sensenet/src/components/settings/settings-table.tsx @@ -19,7 +19,7 @@ import { useLocalization } from '../../hooks' import { getPrimaryActionUrl } from '../../services' import { useDialog } from '../dialogs' -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ tableHead: { backgroundColor: 'hsl(0deg 0% 24%)', cursor: 'default', @@ -28,6 +28,14 @@ const useStyles = makeStyles((theme) => ({ color: 'white', fontSize: '1.1rem', }, + stickyTableHeadCell: { + color: 'white', + padding: 0, + margin: 0, + textAlign: 'center', + maxWidth: '20px', + minWidth: '20px', + }, tableCell: { verticalAlign: 'middle', }, @@ -41,6 +49,10 @@ const useStyles = makeStyles((theme) => ({ paddingTop: '12px', paddingBottom: '12px', }, + stickyCell: { + maxWidth: '32px', + paddingLeft: '16px', + }, tableRow: { '&:hover': { backgroundColor: 'rgba(255, 255, 255, 0.08)', @@ -48,9 +60,6 @@ const useStyles = makeStyles((theme) => ({ }, })) -export interface SettingsTableProps { - settings: Settings[] -} export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup' const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing'] const isSystemSettings = [ @@ -70,7 +79,12 @@ const isSystemSettings = [ ] export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}` -export const SettingsTable = ({ settings }: SettingsTableProps) => { +export interface SettingsTableProps { + settings: Settings[] + onContextMenu: (ev: React.MouseEvent, setting: Settings) => void +} + +export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) => { const classes = useStyles() const localization = useLocalization().settings const repository = useRepository() @@ -96,21 +110,29 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { {localization.name} {localization.description} - {localization.edit} - {localization.learnMore} - {hasDeletableSetting && {localization.delete}} + {localization.edit} + {localization.learnMore} + {hasDeletableSetting && ( + {localization.delete} + )} {updatedSettings.map((setting) => ( - + { + ev.preventDefault() + onContextMenu(ev, setting) + }}> {setting.nameToDisplay} {setting.Description || '-'} - + @@ -119,7 +141,7 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { - + {hasDocumentation.includes( (setting.Name || setting.DisplayName || '')?.replace(/\.settings/gi, ''), ) && ( @@ -133,20 +155,22 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { )} - {hasDeletableSetting && !isSystemSettings.includes(setting.Name.split('.')[0]) && ( - - { - openDialog({ - name: 'delete', - props: { content: [setting] }, - dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, - }) - }}> - - + {hasDeletableSetting && ( + + {!isSystemSettings.includes(setting.Name.split('.')[0]) && ( + { + openDialog({ + name: 'delete', + props: { content: [setting] }, + dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, + }) + }}> + + + )} )} diff --git a/apps/sensenet/src/components/settings/setup.tsx b/apps/sensenet/src/components/settings/setup.tsx index 898cf9353..ac8a9f0c9 100644 --- a/apps/sensenet/src/components/settings/setup.tsx +++ b/apps/sensenet/src/components/settings/setup.tsx @@ -11,7 +11,6 @@ import { navigateToAction } from '../../services/content-context-service' import { ContentContextMenu } from '../context-menu/content-context-menu' import { EditBinary } from '../edit/edit-binary' import { BrowseView, EditView, NewView, VersionView } from '../view-controls' -import { ContentCard } from './content-card' import { SettingsTable } from './settings-table' const Setup = () => { @@ -23,7 +22,10 @@ const Setup = () => { const [reloadToken, setReloadToken] = useState(Date.now()) const [settings, setSettings] = useState([]) const [isContextMenuOpened, setIsContextMenuOpened] = useState(false) - const [contextMenuAnchor, setContextMenuAnchor] = useState(null) + const [contextMenuAnchorPos, setContextMenuAnchorPos] = useState<{ top: number; left: number }>({ + top: 0, + left: 0, + }) const [contextMenuItem, setContextMenuItem] = useState(null) const requestReload = useCallback(() => setReloadToken(Date.now()), []) @@ -98,14 +100,23 @@ const Setup = () => { content={contextMenuItem ?? settings[0]} onClose={() => setIsContextMenuOpened(false)} menuProps={{ - anchorEl: contextMenuAnchor, + anchorReference: 'anchorPosition' as const, + anchorPosition: contextMenuAnchorPos, BackdropProps: { onClick: () => setIsContextMenuOpened(false), onContextMenu: (ev) => ev.preventDefault(), }, }} /> - + { + ev.preventDefault() + setContextMenuAnchorPos({ top: ev.clientY, left: ev.clientX }) + setContextMenuItem(setting) + setIsContextMenuOpened(true) + }} + /> ) : null} From 65953b1f6c506e91d5c08dde70a7c76c4be153fd Mon Sep 17 00:00:00 2001 From: NoelKova Date: Fri, 12 Jul 2024 15:18:23 +0200 Subject: [PATCH 4/9] fix console error about missing key prop --- apps/sensenet/src/components/tree/tree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx index 69a10010c..6a1d351c3 100644 --- a/apps/sensenet/src/components/tree/tree.tsx +++ b/apps/sensenet/src/components/tree/tree.tsx @@ -162,7 +162,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac ) const nodeItem = ( - + Date: Fri, 12 Jul 2024 15:18:23 +0200 Subject: [PATCH 5/9] fix console error about missing key prop --- apps/sensenet/src/components/tree/tree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx index 69a10010c..6a1d351c3 100644 --- a/apps/sensenet/src/components/tree/tree.tsx +++ b/apps/sensenet/src/components/tree/tree.tsx @@ -162,7 +162,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac ) const nodeItem = ( - + Date: Tue, 9 Jul 2024 14:57:01 +0200 Subject: [PATCH 6/9] remove whitespaces and configuration settings refactor --- apps/sensenet/src/components/AddButton.tsx | 3 +- apps/sensenet/src/components/PageTitle.tsx | 3 +- .../src/components/appbar/desktop-app-bar.tsx | 3 +- .../components/appbar/desktop-nav-menu.tsx | 1 + .../command-palette/CommandPalette.tsx | 5 +- .../components/content-list/content-list.tsx | 7 +- .../src/components/content/Explore.tsx | 1 - .../context-menu/content-context-menu.tsx | 2 +- .../src/components/drawer/PermanentDrawer.tsx | 5 +- .../components/drawer/PermanentDrawerItem.tsx | 3 +- .../src/components/event-list/event-list.tsx | 2 +- .../src/components/layout/DesktopLayout.tsx | 5 +- .../src/components/settings/content-card.tsx | 130 ++++++++-------- .../components/settings/settings-table.tsx | 140 ++++++++++++++++++ .../src/components/settings/setup.tsx | 7 +- apps/sensenet/src/components/tree/tree.tsx | 2 +- apps/sensenet/src/globalStyles.ts | 12 +- apps/sensenet/src/localization/default.ts | 1 + 18 files changed, 245 insertions(+), 87 deletions(-) create mode 100644 apps/sensenet/src/components/settings/settings-table.tsx diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx index d9e5633b9..eed47f8a0 100644 --- a/apps/sensenet/src/components/AddButton.tsx +++ b/apps/sensenet/src/components/AddButton.tsx @@ -47,7 +47,8 @@ const useStyles = makeStyles((theme: Theme) => { display: 'flex', alignItems: 'center', justifyContent: 'space-evenly', - height: globals.common.drawerItemHeight, + height: globals.common.addButtonHeight, + paddingLeft: '2px', }, listDropdown: { padding: '10px 0 10px 10px', diff --git a/apps/sensenet/src/components/PageTitle.tsx b/apps/sensenet/src/components/PageTitle.tsx index fdb7f5abb..a7a1372f6 100644 --- a/apps/sensenet/src/components/PageTitle.tsx +++ b/apps/sensenet/src/components/PageTitle.tsx @@ -10,7 +10,8 @@ const useStyles = makeStyles((theme: Theme) => { pageTitle: { color: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white, fontFamily: '"Larsseit", Roboto', - fontSize: '20px', + fontSize: '24px', + padding: '8px 16px', }, }) }) diff --git a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx b/apps/sensenet/src/components/appbar/desktop-app-bar.tsx index 8e9d99dff..9a0ee8135 100644 --- a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx +++ b/apps/sensenet/src/components/appbar/desktop-app-bar.tsx @@ -21,7 +21,8 @@ const useStyles = makeStyles(() => { toolBar: { position: 'static', height: '100%', - paddingLeft: '32px', + minHeight: '42px', + paddingLeft: '16px', paddingRight: 0, }, logo: { diff --git a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx index 15707159a..10dbcebf1 100644 --- a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx +++ b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx @@ -21,6 +21,7 @@ const useStyles = makeStyles((theme: Theme) => viewOptions: { cursor: 'pointer', marginRight: '16px', + padding: '7px', }, navMenu: { height: '100%', diff --git a/apps/sensenet/src/components/command-palette/CommandPalette.tsx b/apps/sensenet/src/components/command-palette/CommandPalette.tsx index 3fca3a95f..18d58ff52 100644 --- a/apps/sensenet/src/components/command-palette/CommandPalette.tsx +++ b/apps/sensenet/src/components/command-palette/CommandPalette.tsx @@ -45,9 +45,8 @@ const useStyles = makeStyles(() => { }, iconButton: { color: globals.common.headerText, - '&:hover': { - backgroundColor: 'initial', - }, + padding: '7px', + marginRight: '6px', }, comboBox: { position: 'relative', diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx index bbcab9528..f9844a164 100644 --- a/apps/sensenet/src/components/content-list/content-list.tsx +++ b/apps/sensenet/src/components/content-list/content-list.tsx @@ -93,7 +93,7 @@ export const isReferenceField = (fieldName: string, repo: Repository, schema = ' } const rowHeightConst = 67 -const headerHeightConst = 58 +const headerHeightConst = 48 /** * Compare passed minutes with @@ -747,9 +747,9 @@ export const ContentList = (props: Co rowStyle: { position: 'relative', top: 'unset', - height: 'auto', + height: '48px', overflow: 'initial', - padding: '5px 0px', + padding: '0', }, onRowDoubleClick: onItemDoubleClickFunc, disableHeader: props.hideHeader, @@ -757,7 +757,6 @@ export const ContentList = (props: Co display: 'flex', flexDirection: 'column', overflowY: 'auto', - paddingBottom: '15px', minHeight: '100%', height: 'inherit', maxHeight: 'inherit', diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx index 78dd8f518..cf5bd08ca 100644 --- a/apps/sensenet/src/components/content/Explore.tsx +++ b/apps/sensenet/src/components/content/Explore.tsx @@ -50,7 +50,6 @@ const useStyles = makeStyles((theme: Theme) => { width: '100%', position: 'relative', overflow: 'hidden', - paddingTop: '8px', }, }) }) diff --git a/apps/sensenet/src/components/context-menu/content-context-menu.tsx b/apps/sensenet/src/components/context-menu/content-context-menu.tsx index 7b40b9989..2965f6277 100644 --- a/apps/sensenet/src/components/context-menu/content-context-menu.tsx +++ b/apps/sensenet/src/components/context-menu/content-context-menu.tsx @@ -79,7 +79,7 @@ export const ContentContextMenu: React.FunctionComponent - + {actions?.map((action) => { return ( { width: '100%', }, listButton: { - height: '65px', + height: '60px', + paddingLeft: '2px', }, expandCollapseWrapper: { height: '49px', @@ -126,7 +127,7 @@ export const PermanentDrawer = () => { {systemItems && ( - + {systemItems.map((item) => { return (
  • diff --git a/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx b/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx index dafaab592..56645b3b1 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx @@ -30,7 +30,8 @@ const useStyles = makeStyles((theme: Theme) => { }, }, listButton: { - height: '65px', + height: '60px', + paddingLeft: '2px', }, listItemIconDark: { color: theme.palette.common.white, diff --git a/apps/sensenet/src/components/event-list/event-list.tsx b/apps/sensenet/src/components/event-list/event-list.tsx index 90a104bcd..ecd150cde 100644 --- a/apps/sensenet/src/components/event-list/event-list.tsx +++ b/apps/sensenet/src/components/event-list/event-list.tsx @@ -54,7 +54,7 @@ export default function EventList() { {currentEvent ? ( ) : ( - + )} diff --git a/apps/sensenet/src/components/layout/DesktopLayout.tsx b/apps/sensenet/src/components/layout/DesktopLayout.tsx index 8b9530377..b47a5858d 100644 --- a/apps/sensenet/src/components/layout/DesktopLayout.tsx +++ b/apps/sensenet/src/components/layout/DesktopLayout.tsx @@ -35,10 +35,7 @@ const useStyles = makeStyles((theme: Theme) => { boxSizing: 'border-box', overflow: 'hidden', height: '100%', - paddingTop: '10px', - '& > *': { - paddingLeft: `${globals.common.explorePaddingLeft}`, - }, + padding: '0px', }, executeActionPaper: { height: '100%', diff --git a/apps/sensenet/src/components/settings/content-card.tsx b/apps/sensenet/src/components/settings/content-card.tsx index f926e0abf..30a74338f 100644 --- a/apps/sensenet/src/components/settings/content-card.tsx +++ b/apps/sensenet/src/components/settings/content-card.tsx @@ -1,4 +1,15 @@ -import { createStyles, IconButton, makeStyles, Theme, Tooltip } from '@material-ui/core' +import { + createStyles, + IconButton, + makeStyles, + Table, + TableCell, + TableContainer, + TableHead, + TableRow, + Theme, + Tooltip, +} from '@material-ui/core' import Button from '@material-ui/core/Button' import Card from '@material-ui/core/Card' import CardActions from '@material-ui/core/CardActions' @@ -82,67 +93,70 @@ export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => { const dataTestName = settingsTitle.replace(/\s+/g, '-').toLowerCase() return ( - { - ev.preventDefault() - onContextMenu(ev) - }} - className={classes.card} - data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}> - - - - {settingsTitle} - - - - - - {!isSystemSettings.includes(settingsTitle) && ( - { - openDialog({ - name: 'delete', - props: { content: [settings] }, - dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, - }) - }}> - - - )} - - - - {hasDocumentation.includes(settingsTitle) && ( - + ) } diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx new file mode 100644 index 000000000..9d4b640aa --- /dev/null +++ b/apps/sensenet/src/components/settings/settings-table.tsx @@ -0,0 +1,140 @@ +import { + Button, + createStyles, + IconButton, + makeStyles, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Theme, + Tooltip, +} from '@material-ui/core' + +import { Edit, InfoOutlined } from '@material-ui/icons' +import { Settings } from '@sensenet/default-content-types' +import { useRepository } from '@sensenet/hooks-react' +import React, { useContext } from 'react' +import { Link, useHistory } from 'react-router-dom' +import { ResponsivePersonalSettings } from '../../context' +import { useLocalization } from '../../hooks' +import { getPrimaryActionUrl } from '../../services' + +const useStyles = makeStyles((theme) => ({ + tableHead: { + backgroundColor: 'hsl(0deg 0% 24%)', + cursor: 'default', + }, + tableHeadCell: { + color: 'white', + fontSize: '1.1rem', + }, + tableCell: { + verticalAlign: 'middle', + }, + tableCellName: { + fontSize: '1.1rem', + }, + descriptionCell: { + textAlign: 'left', + whiteSpace: 'normal', + wordBreak: 'break-word', + paddingTop: '12px', + paddingBottom: '12px', + }, + tableRow: { + '&:hover': { + backgroundColor: 'rgba(255, 255, 255, 0.08)', + }, + }, +})) + +export interface SettingsTableProps { + settings: Settings[] +} +export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup' +const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing'] +const isSystemSettings = [ + 'DocumentPreview', + 'OAuth', + 'OfficeOnline', + 'Indexing', + 'Sharing', + 'Logging', + 'Portal', + 'Permission', + 'MailProcessor', + 'UserProfile', + 'ColumnSettings', + 'TaskManagement', + 'MultiFactorAuthentication', +] +export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}` + +export const SettingsTable = ({ settings }: SettingsTableProps) => { + console.log(settings) + const classes = useStyles() + const localization = useLocalization().settings + const repository = useRepository() + const uiSettings = useContext(ResponsivePersonalSettings) + const history = useHistory() + if (!settings) { + return
    Loading
    + } + return ( + +
    • + + + {localization.name} + {localization.description} + {localization.edit} + {localization.learnMore} + + + + {settings.map((setting) => ( + + + {setting.Name.split('.')[0] + .replace(/([A-Z])/g, ' $1') + .trim()} + + + {setting.Description || '-'} + + + + + + + + + + {hasDocumentation.includes( + (setting.Name || setting.DisplayName || '')?.replace(/\.settings/gi, ''), + ) && ( + + + + + + )} + + + ))} + +
    +     + ) +} diff --git a/apps/sensenet/src/components/settings/setup.tsx b/apps/sensenet/src/components/settings/setup.tsx index 495e78e93..a9750ae14 100644 --- a/apps/sensenet/src/components/settings/setup.tsx +++ b/apps/sensenet/src/components/settings/setup.tsx @@ -12,6 +12,7 @@ import { ContentContextMenu } from '../context-menu/content-context-menu' import { EditBinary } from '../edit/edit-binary' import { BrowseView, EditView, NewView, VersionView } from '../view-controls' import { ContentCard } from './content-card' +import { SettingsTable } from './settings-table' const Setup = () => { const repository = useRepository() @@ -62,6 +63,7 @@ const Setup = () => { ]) const renderContent = () => { + console.log(settings) switch (activeAction) { case 'browse': return @@ -104,7 +106,8 @@ const Setup = () => { }, }} /> - {settings.map((s) => { + + {/* {settings.map((s) => { return ( { }} /> ) - })} + })} */}
    ) : null} diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx index 347d92dcd..69a10010c 100644 --- a/apps/sensenet/src/components/tree/tree.tsx +++ b/apps/sensenet/src/components/tree/tree.tsx @@ -219,7 +219,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac ) } return ( - + {renderItem(treeData.children?.[index], index.toString(), 10)} ) diff --git a/apps/sensenet/src/globalStyles.ts b/apps/sensenet/src/globalStyles.ts index 55eed16b3..a1326dc37 100644 --- a/apps/sensenet/src/globalStyles.ts +++ b/apps/sensenet/src/globalStyles.ts @@ -4,18 +4,18 @@ import { clsx } from 'clsx' export const globals = { common: { //Fix sizes - headerHeight: 80, - drawerWidthCollapsed: 90, - drawerWidthExpanded: 250, - drawerItemHeight: 65, + headerHeight: 42, + drawerWidthCollapsed: 60, + drawerWidthExpanded: 240, + drawerItemHeight: 42, formTitleHeight: 68, formActionButtonsHeight: 80, settingsDrawerWidth: 250, + addButtonHeight: 60, //Colors headerBackground: '#353B4E', headerText: 'rgba(255,255,255,0.87)', secondaryIconSize: '16px', - explorePaddingLeft: '15px', elavationShadow: '1px 1px 3px 0px hsl(0deg 0% 0% / 28%)', }, light: { @@ -106,7 +106,7 @@ export const useGlobalStyles = makeStyles((theme: Theme) => { backgroundColor: theme.palette.primary.main, }, drawerIconButtonWrapper: { - height: globals.common.drawerItemHeight, + height: globals.common.addButtonHeight, width: '100%', display: 'flex', justifyContent: 'center', diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts index d5b3137d6..2274233fe 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -442,6 +442,7 @@ const values = { }, }, settings: { + name: 'Name', edit: 'Edit', learnMore: 'Learn more', stats: 'Stats', From a7ae2c142fbc573feb1f3aaf55730c84e36e8c08 Mon Sep 17 00:00:00 2001 From: NoelKova Date: Thu, 11 Jul 2024 10:50:01 +0200 Subject: [PATCH 7/9] add delete column and fix minor issues --- .../context-menu/content-context-menu.tsx | 2 +- .../src/components/event-list/event-list.tsx | 2 +- .../src/components/settings/content-card.tsx | 136 ++++++++---------- .../components/settings/settings-table.tsx | 52 ++++--- .../src/components/settings/setup.tsx | 15 -- apps/sensenet/src/localization/default.ts | 1 + 6 files changed, 96 insertions(+), 112 deletions(-) diff --git a/apps/sensenet/src/components/context-menu/content-context-menu.tsx b/apps/sensenet/src/components/context-menu/content-context-menu.tsx index 2965f6277..7b40b9989 100644 --- a/apps/sensenet/src/components/context-menu/content-context-menu.tsx +++ b/apps/sensenet/src/components/context-menu/content-context-menu.tsx @@ -79,7 +79,7 @@ export const ContentContextMenu: React.FunctionComponent - + {actions?.map((action) => { return ( ) : ( - + )} diff --git a/apps/sensenet/src/components/settings/content-card.tsx b/apps/sensenet/src/components/settings/content-card.tsx index 30a74338f..98ef9b8d9 100644 --- a/apps/sensenet/src/components/settings/content-card.tsx +++ b/apps/sensenet/src/components/settings/content-card.tsx @@ -1,15 +1,4 @@ -import { - createStyles, - IconButton, - makeStyles, - Table, - TableCell, - TableContainer, - TableHead, - TableRow, - Theme, - Tooltip, -} from '@material-ui/core' +import { createStyles, IconButton, makeStyles, Theme, Tooltip } from '@material-ui/core' import Button from '@material-ui/core/Button' import Card from '@material-ui/core/Card' import CardActions from '@material-ui/core/CardActions' @@ -25,7 +14,6 @@ import { ResponsivePersonalSettings } from '../../context' import { useLocalization } from '../../hooks' import { getPrimaryActionUrl } from '../../services' import { useDialog } from '../dialogs' - const useStyles = makeStyles((theme: Theme) => { return createStyles({ card: { @@ -54,16 +42,12 @@ const useStyles = makeStyles((theme: Theme) => { }, }) }) - export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup' - export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}` - type ContentCardProps = { settings: Settings onContextMenu: (ev: React.MouseEvent) => void } - const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing'] const isSystemSettings = [ 'DocumentPreview', @@ -80,7 +64,6 @@ const isSystemSettings = [ 'TaskManagement', 'MultiFactorAuthentication', ] - export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => { const localization = useLocalization().settings const repository = useRepository() @@ -93,70 +76,67 @@ export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => { const dataTestName = settingsTitle.replace(/\s+/g, '-').toLowerCase() return ( -
    -
    - { - ev.preventDefault() - onContextMenu(ev) - }} - className={classes.card} - data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}> - - - - {settingsTitle} - - - - - - {!isSystemSettings.includes(settingsTitle) && ( - { - openDialog({ - name: 'delete', - props: { content: [settings] }, - dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, - }) - }}> - - - )} - { + ev.preventDefault() + onContextMenu(ev) + }} + className={classes.card} + data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}> + + + + {settingsTitle} + + + + + + {!isSystemSettings.includes(settingsTitle) && ( + { + openDialog({ + name: 'delete', + props: { content: [settings] }, + dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, + }) + }}> + + + )} + + + + {hasDocumentation.includes(settingsTitle) && ( + - - {hasDocumentation.includes(settingsTitle) && ( - - - - )} - - -
    + + )} + + ) } diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx index 9d4b640aa..3f55ff0f4 100644 --- a/apps/sensenet/src/components/settings/settings-table.tsx +++ b/apps/sensenet/src/components/settings/settings-table.tsx @@ -1,6 +1,4 @@ import { - Button, - createStyles, IconButton, makeStyles, Table, @@ -9,11 +7,9 @@ import { TableContainer, TableHead, TableRow, - Theme, - Tooltip, } from '@material-ui/core' -import { Edit, InfoOutlined } from '@material-ui/icons' +import { Delete, Edit, InfoOutlined } from '@material-ui/icons' import { Settings } from '@sensenet/default-content-types' import { useRepository } from '@sensenet/hooks-react' import React, { useContext } from 'react' @@ -21,6 +17,7 @@ import { Link, useHistory } from 'react-router-dom' import { ResponsivePersonalSettings } from '../../context' import { useLocalization } from '../../hooks' import { getPrimaryActionUrl } from '../../services' +import { useDialog } from '../dialogs' const useStyles = makeStyles((theme) => ({ tableHead: { @@ -74,15 +71,24 @@ const isSystemSettings = [ export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}` export const SettingsTable = ({ settings }: SettingsTableProps) => { - console.log(settings) const classes = useStyles() const localization = useLocalization().settings const repository = useRepository() const uiSettings = useContext(ResponsivePersonalSettings) const history = useHistory() - if (!settings) { - return
    Loading
    - } + const { openDialog } = useDialog() + const updatedSettings = settings.map((setting: Settings) => { + return { + ...setting, + nameToDisplay: setting.Name.split('.')[0] + .replace(/([A-Z])/g, ' $1') + .trim(), + nameToTest: setting.Name.replace(/\.settings/gi, '') + .replace(/\s+/g, '-') + .toLowerCase(), + } + }) + const hasDeletableSetting = updatedSettings.some((setting) => !isSystemSettings.includes(setting.Name.split('.')[0])) return ( @@ -92,15 +98,14 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { {localization.description}{localization.edit}{localization.learnMore} + {hasDeletableSetting && {localization.delete}} - {settings.map((setting) => ( + {updatedSettings.map((setting) => ( - {setting.Name.split('.')[0] - .replace(/([A-Z])/g, ' $1') - .trim()} + {setting.nameToDisplay} {setting.Description || '-'} @@ -109,10 +114,7 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { - + @@ -131,6 +133,22 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { )} + {hasDeletableSetting && !isSystemSettings.includes(setting.Name.split('.')[0]) && ( + + { + openDialog({ + name: 'delete', + props: { content: [setting] }, + dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, + }) + }}> + + + + )} ))} diff --git a/apps/sensenet/src/components/settings/setup.tsx b/apps/sensenet/src/components/settings/setup.tsx index a9750ae14..898cf9353 100644 --- a/apps/sensenet/src/components/settings/setup.tsx +++ b/apps/sensenet/src/components/settings/setup.tsx @@ -63,7 +63,6 @@ const Setup = () => { ]) const renderContent = () => { - console.log(settings) switch (activeAction) { case 'browse': return @@ -107,20 +106,6 @@ const Setup = () => { }} /> - {/* {settings.map((s) => { - return ( - { - ev.preventDefault() - setContextMenuAnchor((ev.currentTarget as HTMLElement) || null) - setContextMenuItem(s) - setIsContextMenuOpened(true) - }} - /> - ) - })} */} ) : null} diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts index 2274233fe..2ad618f45 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -443,6 +443,7 @@ const values = { }, settings: { name: 'Name', + delete: 'Delete', edit: 'Edit', learnMore: 'Learn more', stats: 'Stats', From f04f535587ce74b7af89d4a7ae3279f813472082 Mon Sep 17 00:00:00 2001 From: NoelKova Date: Fri, 12 Jul 2024 13:48:39 +0200 Subject: [PATCH 8/9] adding context menu and fix positioning --- .../components/settings/settings-table.tsx | 74 ++++++++++++------- .../src/components/settings/setup.tsx | 19 ++++- 2 files changed, 64 insertions(+), 29 deletions(-) diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx index 3f55ff0f4..bbeb5ed0c 100644 --- a/apps/sensenet/src/components/settings/settings-table.tsx +++ b/apps/sensenet/src/components/settings/settings-table.tsx @@ -19,7 +19,7 @@ import { useLocalization } from '../../hooks' import { getPrimaryActionUrl } from '../../services' import { useDialog } from '../dialogs' -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ tableHead: { backgroundColor: 'hsl(0deg 0% 24%)', cursor: 'default', @@ -28,6 +28,14 @@ const useStyles = makeStyles((theme) => ({ color: 'white', fontSize: '1.1rem', }, + stickyTableHeadCell: { + color: 'white', + padding: 0, + margin: 0, + textAlign: 'center', + maxWidth: '20px', + minWidth: '20px', + }, tableCell: { verticalAlign: 'middle', }, @@ -41,6 +49,10 @@ const useStyles = makeStyles((theme) => ({ paddingTop: '12px', paddingBottom: '12px', }, + stickyCell: { + maxWidth: '32px', + paddingLeft: '16px', + }, tableRow: { '&:hover': { backgroundColor: 'rgba(255, 255, 255, 0.08)', @@ -48,9 +60,6 @@ const useStyles = makeStyles((theme) => ({ }, })) -export interface SettingsTableProps { - settings: Settings[] -} export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup' const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing'] const isSystemSettings = [ @@ -70,7 +79,12 @@ const isSystemSettings = [ ] export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}` -export const SettingsTable = ({ settings }: SettingsTableProps) => { +export interface SettingsTableProps { + settings: Settings[] + onContextMenu: (ev: React.MouseEvent, setting: Settings) => void +} + +export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) => { const classes = useStyles() const localization = useLocalization().settings const repository = useRepository() @@ -96,21 +110,29 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { {localization.name} {localization.description} - {localization.edit} - {localization.learnMore} - {hasDeletableSetting && {localization.delete}} + {localization.edit} + {localization.learnMore} + {hasDeletableSetting && ( + {localization.delete} + )} {updatedSettings.map((setting) => ( - + { + ev.preventDefault() + onContextMenu(ev, setting) + }}> {setting.nameToDisplay} {setting.Description || '-'} - + @@ -119,7 +141,7 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { - + {hasDocumentation.includes( (setting.Name || setting.DisplayName || '')?.replace(/\.settings/gi, ''), ) && ( @@ -133,20 +155,22 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => { )} - {hasDeletableSetting && !isSystemSettings.includes(setting.Name.split('.')[0]) && ( - - { - openDialog({ - name: 'delete', - props: { content: [setting] }, - dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, - }) - }}> - - + {hasDeletableSetting && ( + + {!isSystemSettings.includes(setting.Name.split('.')[0]) && ( + { + openDialog({ + name: 'delete', + props: { content: [setting] }, + dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, + }) + }}> + + + )} )} diff --git a/apps/sensenet/src/components/settings/setup.tsx b/apps/sensenet/src/components/settings/setup.tsx index 898cf9353..ac8a9f0c9 100644 --- a/apps/sensenet/src/components/settings/setup.tsx +++ b/apps/sensenet/src/components/settings/setup.tsx @@ -11,7 +11,6 @@ import { navigateToAction } from '../../services/content-context-service' import { ContentContextMenu } from '../context-menu/content-context-menu' import { EditBinary } from '../edit/edit-binary' import { BrowseView, EditView, NewView, VersionView } from '../view-controls' -import { ContentCard } from './content-card' import { SettingsTable } from './settings-table' const Setup = () => { @@ -23,7 +22,10 @@ const Setup = () => { const [reloadToken, setReloadToken] = useState(Date.now()) const [settings, setSettings] = useState([]) const [isContextMenuOpened, setIsContextMenuOpened] = useState(false) - const [contextMenuAnchor, setContextMenuAnchor] = useState(null) + const [contextMenuAnchorPos, setContextMenuAnchorPos] = useState<{ top: number; left: number }>({ + top: 0, + left: 0, + }) const [contextMenuItem, setContextMenuItem] = useState(null) const requestReload = useCallback(() => setReloadToken(Date.now()), []) @@ -98,14 +100,23 @@ const Setup = () => { content={contextMenuItem ?? settings[0]} onClose={() => setIsContextMenuOpened(false)} menuProps={{ - anchorEl: contextMenuAnchor, + anchorReference: 'anchorPosition' as const, + anchorPosition: contextMenuAnchorPos, BackdropProps: { onClick: () => setIsContextMenuOpened(false), onContextMenu: (ev) => ev.preventDefault(), }, }} /> - + { + ev.preventDefault() + setContextMenuAnchorPos({ top: ev.clientY, left: ev.clientX }) + setContextMenuItem(setting) + setIsContextMenuOpened(true) + }} + /> ) : null} From 697241a79f5c09a9d9fa2892b85e66098e4f3107 Mon Sep 17 00:00:00 2001 From: NoelKova Date: Fri, 12 Jul 2024 15:18:23 +0200 Subject: [PATCH 9/9] fix console error about missing key prop --- apps/sensenet/src/components/tree/tree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx index 69a10010c..6a1d351c3 100644 --- a/apps/sensenet/src/components/tree/tree.tsx +++ b/apps/sensenet/src/components/tree/tree.tsx @@ -162,7 +162,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac ) const nodeItem = ( - +