From d15ed939aa3cfb32931f66c6616268fcde7f3978 Mon Sep 17 00:00:00 2001 From: NoelKova Date: Mon, 29 Jul 2024 12:46:00 +0200 Subject: [PATCH] after_review_fixes --- .../login/auth-override-skeleton.tsx | 3 +- .../src/components/login/login-page.tsx | 2 +- .../components/settings/settings-table.tsx | 108 ++++++++++++++---- apps/sensenet/src/components/tree/tree.tsx | 4 +- .../components/view-controls/common/styles.ts | 1 - .../src/fieldcontrols/date-picker.tsx | 2 +- .../src/fieldcontrols/dropdown-list.tsx | 2 +- .../src/fieldcontrols/number.tsx | 1 + .../src/viewcontrols/browse-view.tsx | 5 +- .../src/viewcontrols/edit-view.tsx | 6 +- .../src/components/menu-bar.tsx | 28 +++-- 11 files changed, 121 insertions(+), 41 deletions(-) diff --git a/apps/sensenet/src/components/login/auth-override-skeleton.tsx b/apps/sensenet/src/components/login/auth-override-skeleton.tsx index 627503882..a0c25b016 100644 --- a/apps/sensenet/src/components/login/auth-override-skeleton.tsx +++ b/apps/sensenet/src/components/login/auth-override-skeleton.tsx @@ -17,7 +17,8 @@ const useStyles = makeStyles((theme: Theme) => justifyContent: 'space-between', height: '100%', paddingRight: 0, - paddingLeft: '32px', + paddingLeft: '16px', + marginTop: '-12px', }, contentWrapper: { minHeight: 'calc(100vh - 180px)', diff --git a/apps/sensenet/src/components/login/login-page.tsx b/apps/sensenet/src/components/login/login-page.tsx index a00efc62f..2c9e40059 100644 --- a/apps/sensenet/src/components/login/login-page.tsx +++ b/apps/sensenet/src/components/login/login-page.tsx @@ -75,7 +75,7 @@ export default function LoginPage({ handleSubmit, isLoginInProgress }: LoginPage - + sensenet logo diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx index 9c2bdf421..c5047a787 100644 --- a/apps/sensenet/src/components/settings/settings-table.tsx +++ b/apps/sensenet/src/components/settings/settings-table.tsx @@ -7,13 +7,16 @@ import { TableContainer, TableHead, TableRow, + TableSortLabel, Theme, + Tooltip, + Typography, } from '@material-ui/core' 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' +import React, { useContext, useState } from 'react' import { Link, useHistory } from 'react-router-dom' import { ResponsivePersonalSettings } from '../../context' import { useLocalization } from '../../hooks' @@ -26,11 +29,11 @@ const useStyles = makeStyles((theme: Theme) => ({ cursor: 'default', }, tableHeadCell: { - color: theme.palette.type === 'dark' ? 'white' : '#666666', + color: theme.palette.type === 'dark' ? 'hsl(0deg 0% 60%)' : '#666666', fontSize: '1.1rem', }, stickyTableHeadCell: { - color: theme.palette.type === 'dark' ? 'white' : '#666666', + color: theme.palette.type === 'dark' ? 'hsl(0deg 0% 60%)' : '#666666', padding: '0px 1px 0px 0px', margin: 0, textAlign: 'center', @@ -80,11 +83,45 @@ const isSystemSettings = [ ] export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}` +export interface UpdatedSettings extends Settings { + nameToDisplay: string + nameToTest: string +} + export interface SettingsTableProps { settings: Settings[] onContextMenu: (ev: React.MouseEvent, setting: Settings) => void } +const stripHtml = (html: string) => { + const div = document.createElement('div') + div.innerHTML = html + return div.textContent || div.innerText || '' +} + +const sortArray = (array: UpdatedSettings[], order: 'asc' | 'desc', orderBy: keyof UpdatedSettings) => { + return array.sort((a, b) => { + const aO = a[orderBy] + const bO = b[orderBy] + if (!aO) { + return order === 'asc' ? -1 : 1 + } else if (!bO) { + return order === 'asc' ? 1 : -1 + } else if (aO && bO) { + const aValue = orderBy === 'Description' ? stripHtml(aO.toLocaleString()) : aO.toLocaleString() + const bValue = orderBy === 'Description' ? stripHtml(bO.toLocaleString()) : bO.toLocaleString() + if (aValue < bValue) { + return order === 'asc' ? -1 : 1 + } else if (aValue > bValue) { + return order === 'asc' ? 1 : -1 + } else { + return 0 + } + } + return 0 + }) +} + export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) => { const classes = useStyles() const localization = useLocalization().settings @@ -92,27 +129,54 @@ export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) = const uiSettings = useContext(ResponsivePersonalSettings) const history = useHistory() 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(), - } - }) - .sort((a, b) => a.Name.localeCompare(b.Name)) + + const [order, setOrder] = useState<'asc' | 'desc'>('asc') + const [orderBy, setOrderBy] = useState('nameToDisplay') + + const handleRequestSort = (property: keyof UpdatedSettings) => { + const isAsc = orderBy === property && order === 'asc' + setOrder(isAsc ? 'desc' : 'asc') + setOrderBy(property) + } + + const updatedSettings: UpdatedSettings[] = settings.map((setting: Settings) => ({ + ...setting, + nameToDisplay: setting.Name.split('.')[0] + .replace(/([A-Z])/g, ' $1') + .trim(), + nameToTest: setting.Name.replace(/\.settings/gi, '') + .replace(/\s+/g, '-') + .toLowerCase(), + })) + + const sortedSettings = sortArray(updatedSettings, order, orderBy) const hasDeletableSetting = updatedSettings.some((setting) => !isSystemSettings.includes(setting.Name.split('.')[0])) + return ( - {localization.name} - {localization.description} + + + handleRequestSort('nameToDisplay')}> + {localization.name} + + + + + + handleRequestSort('Description')}> + {localization.description} + + + {localization.edit} {localization.learnMore} {hasDeletableSetting && ( @@ -121,7 +185,7 @@ export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) = - {updatedSettings.map((setting) => ( + {sortedSettings.map((setting: UpdatedSettings) => ( - {setting.Description || '-'} + { - return renderItem(child, `${keyPrefix}-${index}`, paddingLeft + 20) + return renderItem(child, `${keyPrefix}-${index}`, paddingLeft + 12) }) } @@ -178,7 +178,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac style={{ paddingLeft }} data-item-name={item.Name} button> - +
diff --git a/apps/sensenet/src/components/view-controls/common/styles.ts b/apps/sensenet/src/components/view-controls/common/styles.ts index cbb9f6f46..1b13733a3 100644 --- a/apps/sensenet/src/components/view-controls/common/styles.ts +++ b/apps/sensenet/src/components/view-controls/common/styles.ts @@ -10,7 +10,6 @@ const useStyles = makeStyles(() => { maxHeight: `calc(100% - ${globals.common.formActionButtonsHeight}px - ${globals.common.formTitleHeight}px)`, }, fieldWrapper: { - display: 'flex', alignItems: 'center', flexFlow: 'column', padding: '15px !important', diff --git a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx index 898559505..b95848d8d 100644 --- a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx +++ b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx @@ -113,7 +113,7 @@ export const DatePicker: React.FC> InputLabelProps={{ shrink: true }} required={settings.Compulsory} format="yyyy MMMM dd hh:mm aaaa" - InputProps={{ readOnly: true, style: { minWidth: '200px' } }} + InputProps={{ readOnly: true, style: { minWidth: '200px', width: '100%' } }} /> )} {!hideDescription && {settings.Description}} diff --git a/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx b/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx index b574879b9..2e2e4efcf 100644 --- a/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx +++ b/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx @@ -57,7 +57,7 @@ export const DropDownList: React.FC> case 'new': return ( diff --git a/packages/sn-controls-react/src/fieldcontrols/number.tsx b/packages/sn-controls-react/src/fieldcontrols/number.tsx index d93a6bafa..a7241511b 100644 --- a/packages/sn-controls-react/src/fieldcontrols/number.tsx +++ b/packages/sn-controls-react/src/fieldcontrols/number.tsx @@ -58,6 +58,7 @@ export const NumberField: React.FC { return createStyles({ - grid: {}, + grid: { + margin: '0 auto', + maxWidth: '750px', + }, fieldWrapper: {}, field: {}, fieldFullWidth: {}, diff --git a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx index c4a675192..70b430281 100644 --- a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx +++ b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx @@ -47,10 +47,13 @@ const useStyles = makeStyles((theme: Theme) => { return createStyles({ grid: { margin: '0 auto', + maxWidth: '750px', }, fieldWrapper: {}, field: {}, - fieldFullWidth: {}, + fieldFullWidth: { + width: '100%', + }, actionButtonWrapper: { textAlign: 'right', }, @@ -168,6 +171,7 @@ export const EditView: React.FC = (props) => { }, [actionName, schema]) const renderField = (field: { fieldSettings: FieldSetting; actionName: ActionName; controlType: any }) => { + field.fieldSettings.DisplayName = field.fieldSettings.DisplayName ?? field.fieldSettings.Name const autoFocus = hasInputField.includes(field.controlType.name) && !isAutofocusSet const fieldControl = createElement( controlMapper.getControlForContentField(props.contentTypeName, field.fieldSettings.Name, actionName), diff --git a/packages/sn-editor-react/src/components/menu-bar.tsx b/packages/sn-editor-react/src/components/menu-bar.tsx index 422b6b164..e545eb5d2 100644 --- a/packages/sn-editor-react/src/components/menu-bar.tsx +++ b/packages/sn-editor-react/src/components/menu-bar.tsx @@ -197,20 +197,24 @@ export const MenuBar: FC = ({ editor }) => { - editor.chain().focus().undo().run()} - disabled={!editor.can().undo()} - classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}> - - + + editor.chain().focus().undo().run()} + disabled={!editor.can().undo()} + classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}> + + + - editor.chain().focus().redo().run()} - disabled={!editor.can().redo()} - classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}> - - + + editor.chain().focus().redo().run()} + disabled={!editor.can().redo()} + classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}> + + +