Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

feat: update UX according figma

Browse Source
This commit is contained in:
Grégoire Cutzach 2024-08-20 17:48:44 +02:00
parent f40bd9d075
commit cc8c6003f0
No known key found for this signature in database
GPG Key ID: AA4155BE23C375E6
3 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/client/ui/DocumentSettings.ts
View File

@ -65,7 +65,7 @@ export class DocSettingsPage extends Disposable {
const isDocEditor = isOwnerOrEditor(docPageModel.currentDoc.get()); const isDocEditor = isOwnerOrEditor(docPageModel.currentDoc.get());
return cssContainer( return cssContainer(
dom.create(AdminSection, t('Document Settings'), [ dom.create(cssAdminSection, t('Document Settings'), [
dom.create(AdminSectionItem, { dom.create(AdminSectionItem, {
id: 'timezone', id: 'timezone',
name: t('Time Zone'), name: t('Time Zone'),
@ -89,7 +89,7 @@ export class DocSettingsPage extends Disposable {
}), }),
]), ]),
dom.create(AdminSection, t('Data Engine'), [ dom.create(cssAdminSection, t('Data Engine'), [
dom.create(AdminSectionItem, { dom.create(AdminSectionItem, {
id: 'timings', id: 'timings',
name: t('Formula timer'), name: t('Formula timer'),
@ -122,7 +122,6 @@ export class DocSettingsPage extends Disposable {
)), )),
disabled: isDocOwner ? false : t('Only available to document owners'), disabled: isDocOwner ? false : t('Only available to document owners'),
}), }),
dom.create(AdminSectionItem, { dom.create(AdminSectionItem, {
id: 'reload', id: 'reload',
name: t('Reload'), name: t('Reload'),
@ -130,7 +129,6 @@ export class DocSettingsPage extends Disposable {
value: cssSmallButton(t('Reload data engine'), dom.on('click', this._reloadEngine.bind(this, true))), value: cssSmallButton(t('Reload data engine'), dom.on('click', this._reloadEngine.bind(this, true))),
disabled: isDocEditor ? false : t('Only available to document editors'), disabled: isDocEditor ? false : t('Only available to document editors'),
}), }),
canChangeEngine ? dom.create(AdminSectionItem, { canChangeEngine ? dom.create(AdminSectionItem, {
id: 'python', id: 'python',
name: t('Python'), name: t('Python'),
@ -139,7 +137,7 @@ export class DocSettingsPage extends Disposable {
}) : null, }) : null,
]), ]),
dom.create(AdminSection, t('API'), [ dom.create(cssAdminSection, t('API'), [
dom.create(AdminSectionItem, { dom.create(AdminSectionItem, {
id: 'documentId', id: 'documentId',
name: t('Document ID'), name: t('Document ID'),
@ -188,7 +186,6 @@ export class DocSettingsPage extends Disposable {
href: getApiConsoleLink(docPageModel), href: getApiConsoleLink(docPageModel),
}), }),
}), }),
dom.create(AdminSectionItem, { dom.create(AdminSectionItem, {
id: 'webhooks', id: 'webhooks',
name: t('Webhooks'), name: t('Webhooks'),
@ -196,7 +193,8 @@ export class DocSettingsPage extends Disposable {
value: cssSmallLinkButton(t('Manage webhooks'), urlState().setLinkUrl({docPage: 'webhook'})), value: cssSmallLinkButton(t('Manage webhooks'), urlState().setLinkUrl({docPage: 'webhook'})),
}), }),
]), ]),
dom.create(AdminSection, t('Document conversion'), [
dom.create(cssAdminSection, t('Document conversion'), [
dom.create(AdminSectionItem, { dom.create(AdminSectionItem, {
id: 'document-type', id: 'document-type',
name: t('Document type'), name: t('Document type'),
@ -566,3 +564,7 @@ const cssWrap = styled('p', `
const cssRedText = styled('span', ` const cssRedText = styled('span', `
color: ${theme.errorText}; color: ${theme.errorText};
`); `);
const cssAdminSection = styled(AdminSection, `
max-width: 750px;
`);

5
app/client/ui2018/checkbox.ts
View File

@ -25,6 +25,9 @@ export const cssLabel = styled('label', `
margin-bottom: 0px; margin-bottom: 0px;
flex-shrink: 0; flex-shrink: 0;
align-items: center;
justify-content: center;
outline: none; outline: none;
user-select: none; user-select: none;
@ -226,6 +229,8 @@ const cssBlockCheckbox = styled('div', `
} }
&-block { &-block {
pointer-events: none; pointer-events: none;
border-color: ${theme.controlFg};
border-width: 2px;
} }
&-block a { &-block a {
pointer-events: all; pointer-events: all;

3
app/client/ui2018/modals.ts
View File

@ -623,10 +623,11 @@ export const cssModalBody = styled('div', `
export const cssModalButtons = styled('div', ` export const cssModalButtons = styled('div', `
margin: 40px 0 0 0; margin: 40px 0 0 0;
text-align: right;
& > button, & > button,
& > .${cssButton.className} { & > .${cssButton.className} {
margin: 0 8px 0 0; margin: 0 0 0 8px;
} }
`); `);