From ec7bc9bef3db7a26360ff2f3f7231e6aec5c7095 Mon Sep 17 00:00:00 2001 From: Alex Hall Date: Fri, 4 Feb 2022 12:21:43 +0200 Subject: [PATCH] (core) Remove code related to newui Summary: Change code that conditionally depended on #newui in the URL to assume that everything is always in the new UI now. Test Plan: this Reviewers: dsagal Reviewed By: dsagal Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D3246 --- app/client/components/ChartView.ts | 2 +- app/client/components/DetailView.css | 4 ---- app/client/components/DetailView.js | 1 - app/client/components/GridView.css | 12 ++++------- app/client/components/GridView.js | 1 - app/client/models/gristUrlState.ts | 8 +++---- app/client/ui/App.ts | 13 +---------- app/client/ui/Document.css | 32 ---------------------------- app/client/ui/RightPanel.ts | 2 +- app/client/ui/VisibleFieldsConfig.ts | 13 +++++------ app/common/gristUrls.ts | 9 -------- 11 files changed, 15 insertions(+), 82 deletions(-) delete mode 100644 app/client/ui/Document.css diff --git a/app/client/components/ChartView.ts b/app/client/components/ChartView.ts index d9e768f3..8ec2bd49 100644 --- a/app/client/components/ChartView.ts +++ b/app/client/components/ChartView.ts @@ -431,7 +431,7 @@ function getPlotlyLayout(options: ChartOptions): Partial { export class ChartConfig extends GrainJSDisposable { // helper to build the draggable field list - private _configFieldsHelper = VisibleFieldsConfig.create(this, this._gristDoc, this._section, true); + private _configFieldsHelper = VisibleFieldsConfig.create(this, this._gristDoc, this._section); // The index for the x-axis in the list visible fields. Could be eigther 0 or 1 depending on // whether multiseries is set. diff --git a/app/client/components/DetailView.css b/app/client/components/DetailView.css index 22026796..3516613c 100644 --- a/app/client/components/DetailView.css +++ b/app/client/components/DetailView.css @@ -114,12 +114,8 @@ } .grist-single-record__menu { - padding: .2rem .5rem .2rem 0; align-items: center; flex-shrink: 0; -} - -.grist-single-record__menu.newui { padding: 0; margin-top: -4px; } diff --git a/app/client/components/DetailView.js b/app/client/components/DetailView.js index c5577f7b..b28b5c4c 100644 --- a/app/client/components/DetailView.js +++ b/app/client/components/DetailView.js @@ -331,7 +331,6 @@ DetailView.prototype.buildTitleControls = function() { kd.maybe(this.recordLayout.layoutEditor, (editor) => editor.buildEditorDom()), kd.maybe(showControls, () => dom('div.grist-single-record__menu.flexhbox.flexnone', - this.gristDoc.app.addNewUIClass(), dom('div.grist-single-record__menu__count.flexitem', // Total should not include the add record row kd.text(() => this._isAddRow() ? 'Add record' : diff --git a/app/client/components/GridView.css b/app/client/components/GridView.css index 56d6ba11..6f270bc5 100644 --- a/app/client/components/GridView.css +++ b/app/client/components/GridView.css @@ -10,10 +10,6 @@ user-select: none; -moz-user-select: none; -webkit-user-select: none; - --gridview-header-height: 2.2rem; -} - -.gridview_data_pane.newui { --gridview-header-height: 24px; } @@ -28,7 +24,7 @@ border-top: 1px solid lightgrey; } -.gridview_data_pane.newui > .gridview_data_scroll { +.gridview_data_pane > .gridview_data_scroll { border-top: none; } @@ -253,12 +249,12 @@ z-index: 1; } -.gridview_data_pane.newui > .scroll_shadow_top { +.gridview_data_pane > .scroll_shadow_top { top: var(--gridview-header-height); } -.gridview_data_pane.newui > .gridview_data_corner_overlay, -.gridview_data_pane.newui > .gridview_header_backdrop_top { +.gridview_data_pane > .gridview_data_corner_overlay, +.gridview_data_pane > .gridview_header_backdrop_top { top: 0px; } diff --git a/app/client/components/GridView.js b/app/client/components/GridView.js index 9eed2cd1..14852f94 100644 --- a/app/client/components/GridView.js +++ b/app/client/components/GridView.js @@ -849,7 +849,6 @@ GridView.prototype.buildDom = function() { return dom( 'div.gridview_data_pane.flexvbox', - this.gristDoc.app.addNewUIClass(), // offset for frozen columns - how much move them to the left kd.style('--frozen-offset', this.frozenOffset), // total width of frozen columns diff --git a/app/client/models/gristUrlState.ts b/app/client/models/gristUrlState.ts index af1d9419..87d2ba8a 100644 --- a/app/client/models/gristUrlState.ts +++ b/app/client/models/gristUrlState.ts @@ -24,7 +24,7 @@ */ import {unsavedChanges} from 'app/client/components/UnsavedChanges'; import {UrlState} from 'app/client/lib/UrlState'; -import {decodeUrl, encodeUrl, getSlugIfNeeded, GristLoadConfig, IGristUrlState, useNewUI} from 'app/common/gristUrls'; +import {decodeUrl, encodeUrl, getSlugIfNeeded, GristLoadConfig, IGristUrlState} from 'app/common/gristUrls'; import {addOrgToPath} from 'app/common/urlUtils'; import {Document} from 'app/common/UserAPI'; import isEmpty = require('lodash/isEmpty'); @@ -146,7 +146,7 @@ export class UrlStateImpl { public updateState(prevState: IGristUrlState, newState: IGristUrlState): IGristUrlState { const keepState = (newState.org || newState.ws || newState.homePage || newState.doc || isEmpty(newState) || newState.account || newState.billing || newState.welcome) ? - (prevState.org ? {org: prevState.org, newui: prevState.newui} : {}) : + (prevState.org ? {org: prevState.org} : {}) : prevState; return {...keepState, ...newState}; } @@ -166,14 +166,12 @@ export class UrlStateImpl { const accountReload = Boolean(prevState.account) !== Boolean(newState.account); // Reload when moving to/from a billing page. const billingReload = Boolean(prevState.billing) !== Boolean(newState.billing); - // Reload when changing 'newui' flag. - const newuiReload = useNewUI(prevState.newui) !== useNewUI(newState.newui); // Reload when moving to/from a welcome page. const welcomeReload = Boolean(prevState.welcome) !== Boolean(newState.welcome); // Reload when link keys change, which changes what the user can access const linkKeysReload = !isEqual(prevState.params?.linkParameters, newState.params?.linkParameters); return Boolean(orgReload || accountReload || billingReload || gristConfig.errPage - || docReload || newuiReload || welcomeReload || linkKeysReload); + || docReload || welcomeReload || linkKeysReload); } /** diff --git a/app/client/ui/App.ts b/app/client/ui/App.ts index 6a8282f7..a6246193 100644 --- a/app/client/ui/App.ts +++ b/app/client/ui/App.ts @@ -17,7 +17,7 @@ import {BaseAPI} from 'app/common/BaseAPI'; import {DisposableWithEvents} from 'app/common/DisposableWithEvents'; import {fetchFromHome} from 'app/common/urlUtils'; import {ISupportedFeatures} from 'app/common/UserConfig'; -import {dom, DomElementMethod} from 'grainjs'; +import {dom} from 'grainjs'; import * as ko from 'knockout'; // tslint:disable:no-console @@ -31,9 +31,6 @@ export class App extends DisposableWithEvents { // Used by #newui code to avoid a dependency on commands.js, and by tests to issue commands. public allCommands = commands.allCommands; - // Whether new UI should be produced by code that can do either old or new. - public readonly useNewUI: true = true; - public comm = this.autoDispose(Comm.create()); public clientScope: ClientScope; public features: ko.Computed; @@ -182,14 +179,6 @@ export class App extends DisposableWithEvents { this.topAppModel.reload(); } - // When called as a dom method, adds the "newui" class when ?newui=1 is set. For example - // dom('div.some-old-class', this.app.addNewUIClass(), ...) - // Then you may override newui styles in CSS by using selectors like: - // .some-old-class.newui { ... } - public addNewUIClass(): DomElementMethod { - return (elem) => { if (this.useNewUI) { elem.classList.add('newui'); } }; - } - // Intended to be used by tests to enable specific features. public enableFeature(featureName: keyof ISupportedFeatures, onOff: boolean) { const features = this.features(); diff --git a/app/client/ui/Document.css b/app/client/ui/Document.css deleted file mode 100644 index e91d5172..00000000 --- a/app/client/ui/Document.css +++ /dev/null @@ -1,32 +0,0 @@ -#doc_window { - overflow: hidden; - height: 100%; -} - -#doc_pane { - overflow: hidden; - z-index: 7; - background-color: #f4f4f4; -} - -#doc_pane.newui { - background-color: white; -} - -#view_pane { - position: relative; - min-width: 240px; - - background-color: #f4f4f4; - margin: 3px; -} - -#doc_pane.newui > #view_pane { - background-color: white; - margin: 0px; - padding: 12px; -} - -#view_content { - position: relative; -} diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 278915fd..a5f98ea9 100644 --- a/app/client/ui/RightPanel.ts +++ b/app/client/ui/RightPanel.ts @@ -343,7 +343,7 @@ export class RightPanel extends Disposable { dom.maybe((use) => use(this._pageWidgetType) !== 'chart', () => [ cssSeparator(), - dom.create(VisibleFieldsConfig, this._gristDoc, activeSection, true), + dom.create(VisibleFieldsConfig, this._gristDoc, activeSection), ]), ]); } diff --git a/app/client/ui/VisibleFieldsConfig.ts b/app/client/ui/VisibleFieldsConfig.ts index 19eb474e..b1bbd756 100644 --- a/app/client/ui/VisibleFieldsConfig.ts +++ b/app/client/ui/VisibleFieldsConfig.ts @@ -77,8 +77,7 @@ export class VisibleFieldsConfig extends Disposable { private _hiddenFieldsSelection = new Set(); constructor(private _gristDoc: GristDoc, - private _section: ViewSectionRec, - private _useNewUI: boolean = false) { + private _section: ViewSectionRec) { super(); // Unselects visible fields that are hidden. @@ -98,7 +97,6 @@ export class VisibleFieldsConfig extends Disposable { * Build the draggable list components to show the visible fields of a section. */ public buildVisibleFieldsConfigHelper(options: DraggableFieldsOption) { - const itemClass = this._useNewUI ? cssDragRow.className : 'view_config_draggable_field'; let fields = this._section.viewFields.peek(); if (options.skipFirst || options.filterFunc) { @@ -131,7 +129,7 @@ export class VisibleFieldsConfig extends Disposable { fields, options.itemCreateFunc, { - itemClass, + itemClass: cssDragRow.className, reorder: this.changeFieldPosition.bind(this), remove: this.removeField.bind(this), receive: this.addField.bind(this), @@ -145,8 +143,8 @@ export class VisibleFieldsConfig extends Disposable { * section. Each draggable list can be parametrized using both `options.visibleFields` and * `options.hiddenFields` options. * - * @param {DraggableFieldOption} options.hiddenFields options for the list of hidden fields. - * @param {DraggableFieldOption} options.visibleFields options for the list of visible fields. + * @param {DraggableFieldsOption} options.hiddenFields options for the list of hidden fields. + * @param {DraggableFieldsOption} options.visibleFields options for the list of visible fields. * @return {[Element, Element]} the two draggable elements (ie: koForm.draggableList) showing * respectivelly the list of visible fields and the list of hidden * fields of section. @@ -157,13 +155,12 @@ export class VisibleFieldsConfig extends Disposable { hiddenFields: DraggableFieldsOption, }): [HTMLElement, HTMLElement] { - const itemClass = this._useNewUI ? cssDragRow.className : 'view_config_draggable_field'; const fieldsDraggable = this.buildVisibleFieldsConfigHelper(options.visibleFields); const hiddenFieldsDraggable = kf.draggableList( this._hiddenFields, options.hiddenFields.itemCreateFunc, { - itemClass, + itemClass: cssDragRow.className, reorder() { throw new Error('Hidden Fields cannot be reordered'); }, receive() { throw new Error('Cannot drop items into Hidden Fields'); }, remove(item: ColumnRec) { diff --git a/app/common/gristUrls.ts b/app/common/gristUrls.ts index ff37d856..6f8cc9a9 100644 --- a/app/common/gristUrls.ts +++ b/app/common/gristUrls.ts @@ -64,7 +64,6 @@ export interface IGristUrlState { mode?: OpenDocMode; fork?: UrlIdParts; docPage?: IDocPage; - newui?: boolean; account?: AccountPage; billing?: BillingPage; welcome?: WelcomePage; @@ -198,9 +197,6 @@ export function encodeUrl(gristConfig: Partial, } const queryParams = pickBy(state.params, (v, k) => k !== 'linkParameters') as {[key: string]: string}; - if (state.newui !== undefined) { - queryParams.newui = state.newui ? '1' : '0'; - } for (const [k, v] of Object.entries(state.params?.linkParameters || {})) { queryParams[`${k}_`] = v; } @@ -276,7 +272,6 @@ export function decodeUrl(gristConfig: Partial, location: Locat } } if (map.has('m')) { state.mode = OpenDocMode.parse(map.get('m')); } - if (sp.has('newui')) { state.newui = useNewUI(sp.get('newui') ? sp.get('newui') === '1' : undefined); } if (map.has('account')) { state.account = AccountPage.parse('account') || 'profile'; } if (map.has('billing')) { state.billing = BillingSubPage.parse(map.get('billing')) || 'billing'; } if (map.has('welcome')) { state.welcome = WelcomePage.parse(map.get('welcome')) || 'user'; } @@ -331,10 +326,6 @@ export function decodeUrl(gristConfig: Partial, location: Locat return state; } -export function useNewUI(newui: boolean|undefined) { - return newui !== false; -} - // Returns a function suitable for user with makeUrl/setHref/etc, which updates aclAsUser* // linkParameters in the current state, unsetting them if email is null. Optional extraState // allows setting other properties (e.g. 'docPage') at the same time.