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}