Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Polish dark mode and remove beta tag

Browse Source 
Summary:
Polishes support for dark mode and enables syncing with the OS theme
by default.

Test Plan: Manual.

Reviewers: JakubSerafin

Reviewed By: JakubSerafin

Subscribers: JakubSerafin

Differential Revision: https://phab.getgrist.com/D4041
This commit is contained in:
George Gevoian
2023-09-21 12:57:58 -04:00
parent d1826987bb
commit 273b976cab
87 changed files with 979 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/client/components/AceEditor.css
View File

@@ -2,6 +2,16 @@
background-color: var(--grist-theme-ace-editor-bg, white);
}
.ace_editor .ace_placeholder {
font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, "Source Code Pro", source-code-pro, monospace;
font-size: 11px;
color: var(--grist-theme-text-light, #929299);
font-style: italic;
white-space: nowrap;
opacity: 1.0;
transform: none;
}
.ace_grist_link_hidden {
display: none;
}

33
app/client/components/ActionLog.css
View File

@@ -31,7 +31,7 @@
}
.action_desc {
color: var(--grist-theme-document-history-activity-text-light, unset);
color: var(--grist-theme-document-history-activity-text, unset);
}
.action_log_item.undone > .action_info,
@@ -68,37 +68,38 @@
text-align: center;
margin-top: 0;
padding-top: 0;
color: var(--grist-theme-document-history-activity-text, #000);
color: var(--grist-theme-document-history-activity-text-light, #333);
}
.action_log_table td {
border-left: 1px solid #888;
border-right: 1px solid #888;
border-bottom: 1px solid #888;
border-top: 1px solid #888;
border: 1px solid var(--grist-theme-document-history-table-border, lightgray);
cursor: pointer;
}
.action_log_table th {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
color: #888;
border-top: 1px solid var(--grist-theme-document-history-table-border-light, #D9D9D9);
border-left: 1px solid var(--grist-theme-document-history-table-border-light, #D9D9D9);
border-right: 1px solid var(--grist-theme-document-history-table-border-light, #D9D9D9);
color: var(--grist-theme-document-history-table-header-fg, #000);
}
.action_log_table th:first-child {
border: none;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid var(--grist-theme-document-history-table-border-light, #D9D9D9);
}
.action_log_table td:first-child {
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #888;
border-left: 1px solid var(--grist-theme-document-history-table-border-light, #D9D9D9);
border-bottom: 1px solid var(--grist-theme-document-history-table-border-light, #D9D9D9);
color: var(--grist-theme-document-history-table-header-fg, #000);
cursor: inherit;
}
.action_log_table td:not(:first-child) {
background-color: var(--grist-theme-table-body-bg);
}
.action_log_table td, .action_log_table th {
padding-left: 3px;
padding-right: 3px;
@@ -127,3 +128,7 @@
.action_comment {
display: none;
}
.action_info {
color: var(--grist-theme-document-history-activity-text-light, #929299);
}

14
app/client/components/ActionLog.ts
View File

@@ -10,15 +10,15 @@ import * as ko from 'knockout';
import koArray from 'app/client/lib/koArray';
import {KoArray} from 'app/client/lib/koArray';
import * as koDom from 'app/client/lib/koDom';
import * as koForm from 'app/client/lib/koForm';
import {GristDoc} from 'app/client/components/GristDoc';
import {ActionGroup} from 'app/common/ActionGroup';
import {ActionSummary, asTabularDiffs, defunctTableName, getAffectedTables,
LabelDelta} from 'app/common/ActionSummary';
import {CellDelta, TabularDiff} from 'app/common/TabularDiff';
import {DomContents, IDomComponent} from 'grainjs';
import {DomContents, fromKo, IDomComponent} from 'grainjs';
import {makeT} from 'app/client/lib/localization';
import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
/**
*
@@ -230,10 +230,12 @@ export class ActionLog extends dispose.Disposable implements IDomComponent {
this._loadActionSummaries().catch(() => gristNotify(t("Action Log failed to load")));
return dom('div.action_log',
{tabIndex: '-1'},
dom('div.preference_item',
koForm.checkbox(this._showAllTables,
dom.testId('ActionLog_allTables'),
dom('span.preference_desc', 'All tables'))),
dom('div',
labeledSquareCheckbox(fromKo(this._showAllTables),
t('All tables'),
dom.testId('ActionLog_allTables'),
),
),
dom('div.action_log_load',
koDom.show(() => this._loading()),
'Loading...'),

2
app/client/components/ColumnTransform.ts
View File

@@ -97,6 +97,8 @@ export class ColumnTransform extends Disposable {
}));
}
return this.editor.buildDom((aceObj: any) => {
aceObj.setOptions({placeholder: 'Enter formula.'});
aceObj.setHighlightActiveLine(false);
this.editor.adjustContentToWidth();
this.editor.attachSaveCommand();
aceObj.on('change', () => {

19
app/client/components/DetailView.css
View File

@@ -97,8 +97,25 @@
margin-right: 2px;
}
.detail-buttons {
display: flex;
align-items: center;
gap: 4px;
}
.detail-left, .detail-right, .detail-add-btn {
--icon-color: var(--grist-theme-control-secondary-fg, #929299);
padding: 3px;
border-radius: 4px;
}
.detail-left.disabled, .detail-right.disabled, .detail-add-btn.disabled {
cursor: default !important;
--icon-color: var(--grist-theme-control-secondary-disabled-fg, #D9D9D9);
}
.detail-button:not(.disabled):hover {
cursor: pointer;
background-color: var(--grist-theme-hover, rgba(217,217,217,0.6));
}
.detail-add-grp {

32
app/client/components/DetailView.js
View File

@@ -6,6 +6,7 @@ const kd = require('app/client/lib/koDom');
const koDomScrolly = require('app/client/lib/koDomScrolly');
const {renderAllRows} = require('app/client/components/Printing');
const {isNarrowScreen} = require('app/client/ui2018/cssVars');
const {icon} = require('app/client/ui2018/icons');
require('app/client/lib/koUtil'); // Needed for subscribeInit.
@@ -381,28 +382,29 @@ DetailView.prototype.buildTitleControls = function() {
kd.text(() => this._isAddRow() ? 'Add record' :
`${this.cursor.rowIndex() + 1} of ${this.getLastDataRowIndex() + 1}`)
),
dom('div.btn-group.btn-group-xs',
dom('div.btn.btn-default.detail-left',
dom('span.glyphicon.glyphicon-chevron-left'),
dom('div.detail-buttons',
dom('div.detail-button.detail-left',
icon('ArrowLeft'),
dom.on('click', () => { this.cursor.rowIndex(this.cursor.rowIndex() - 1); }),
kd.toggleClass('disabled', () => this.cursor.rowIndex() === 0)
kd.toggleClass('disabled', () => this.cursor.rowIndex() === 0),
dom.testId('detailView_detail_left'),
),
dom('div.btn.btn-default.detail-right',
dom('span.glyphicon.glyphicon-chevron-right'),
dom('div.detail-button.detail-right',
icon('ArrowRight'),
dom.on('click', () => { this.cursor.rowIndex(this.cursor.rowIndex() + 1); }),
kd.toggleClass('disabled', () => this.cursor.rowIndex() >= this.viewData.all().length - 1)
)
),
dom('div.btn-group.btn-group-xs.detail-add-grp',
dom('div.btn.btn-default.detail-add-btn',
dom('span.glyphicon.glyphicon-plus'),
kd.toggleClass('disabled', () => this.cursor.rowIndex() >= this.viewData.all().length - 1),
dom.testId('detailView_detail_right'),
),
dom('div.detail-button.detail-add-btn',
icon('Plus'),
dom.on('click', () => {
let addRowIndex = this.viewData.getRowIndex('new');
this.cursor.rowIndex(addRowIndex);
}),
kd.toggleClass('disabled', () => this.viewData.getRowId(this.cursor.rowIndex()) === 'new')
)
)
kd.toggleClass('disabled', () => this.viewData.getRowId(this.cursor.rowIndex()) === 'new'),
dom.testId('detailView_detail_add'),
),
),
))
);
};

12
app/client/components/GridView.css
View File

@@ -71,7 +71,7 @@
width: 4rem; /* Also should match width for .gridview_header_corner, and the overlay elements */
flex: none;
border-bottom: 1px solid var(--grist-theme-table-header-border-dark, var(--grist-color-dark-grey));
border-bottom: 1px solid var(--grist-theme-table-header-border, lightgray);
color: var(--grist-theme-table-header-fg, unset);
background-color: var(--grist-theme-table-header-bg, var(--grist-color-light-grey));
z-index: 20; /* goes over data cells */
@@ -102,7 +102,7 @@
* do not want !important, as it interferes with row selection.
*/
.gridview_data_row_num {
background-color: var(--grist-theme-table-header-bg , var(--grist-color-light-grey)) !important;
background-color: var(--grist-color-light-grey) !important;
}
.gridview_header_backdrop_top {
display: none;
@@ -111,7 +111,7 @@
display: none;
}
.gridview_data_header {
background-color: var(--grist-theme-table-header-bg, var(--grist-color-light-grey)) !important;
background-color: var(--grist-color-light-grey) !important;
}
.print-widget .gridview_header_backdrop_left, .print-widget .gridview_data_corner_overlay {
display: none;
@@ -127,15 +127,15 @@
display: table-header-group;
break-inside: avoid;
position: static;
border-top: 1px solid var(--grist-theme-table-header-border-dark, var(--grist-color-dark-grey));
border-left: 1px solid var(--grist-theme-table-header-border-dark, var(--grist-color-dark-grey));
border-top: 1px solid var(--grist-color-dark-grey);
border-left: 1px solid var(--grist-color-dark-grey);
}
.print-widget .gridview_data_header {
padding-left: 4rem !important;
}
.print-widget .gridview_data_pane .print-all-rows {
display: table-row-group;
border-left: 1px solid var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
border-left: 1px solid var(--grist-color-dark-grey);
}
.print-widget .gridview_data_pane .print-row {
display: table-row;

44
app/client/components/Preferences.css
View File

@@ -1,44 +0,0 @@
.preference_mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(1, 1, 1, 0.3);
}
.preference_window {
position: absolute;
background-color: white;
display: inline-block;
padding: 10px 20px;
width: 60%;
margin: 20%;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.8);
}
.preference_title {
color: #546e7a;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,.12);
font-family: 'Roboto', Helvetica, Arial, sans-serif;
width: 100%;
height: 40px;
}
.preference_content {
width: 100%;
font-size: 1.4rem;
}
.preference_desc {
color: var(--grist-theme-document-history-activity-text, unset);
margin-left: 5px;
cursor: pointer;
font-weight: normal;
}
.preference_footer > .kf_elem {
flex: 1 1 100%;
}

2
app/client/components/RawDataPage.ts
View File

@@ -152,7 +152,7 @@ const cssSectionWrapper = styled('div', `
border-bottom-right-radius: 0px;
& .viewsection_content {
margin: 0px;
margin-top: 12px;
margin-top: 8px;
}
& .viewsection_title {
padding: 0px 12px;

19
app/client/components/RefSelect.ts
View File

@@ -4,14 +4,13 @@ import * as tableUtil from 'app/client/lib/tableUtil';
import {ColumnRec, DocModel, ViewFieldRec} from 'app/client/models/DocModel';
import {KoSaveableObservable} from 'app/client/models/modelUtil';
import {cssFieldEntry, cssFieldLabel} from 'app/client/ui/VisibleFieldsConfig';
import {colors, testId} from 'app/client/ui2018/cssVars';
import {testId, theme} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {menuText} from 'app/client/ui2018/menus';
import {menu, menuItem, menuText} from 'app/client/ui2018/menus';
import {FieldBuilder} from 'app/client/widgets/FieldBuilder';
import * as gutil from 'app/common/gutil';
import {Disposable, dom, fromKo, styled} from 'grainjs';
import ko from 'knockout';
import {menu, menuItem} from 'popweasel';
import {makeT} from 'app/client/lib/localization';
const t = makeT('RefSelect');
@@ -89,7 +88,7 @@ export class RefSelect extends Disposable {
testId('ref-select'),
dom.forEach(fromKo(this._added.getObservable()), (col) =>
cssFieldEntry(
cssFieldLabel(dom.text(col.label)),
cssColumnLabel(dom.text(col.label)),
cssRemoveIcon('Remove',
dom.on('click', () => this._removeFormulaField(col)),
testId('ref-select-remove'),
@@ -233,15 +232,15 @@ const cssEmptyMenuText = styled(menuText, `
const cssAddLink = styled('div', `
display: flex;
cursor: pointer;
color: ${colors.lightGreen};
--icon-color: ${colors.lightGreen};
color: ${theme.controlFg};
--icon-color: ${theme.controlFg};
&:not(:first-child) {
margin-top: 8px;
}
&:hover, &:focus, &:active {
color: ${colors.darkGreen};
--icon-color: ${colors.darkGreen};
color: ${theme.controlHoverFg};
--icon-color: ${theme.controlHoverFg};
}
`);
@@ -258,3 +257,7 @@ const cssRemoveIcon = styled(icon, `
display: block;
}
`);
const cssColumnLabel = styled(cssFieldLabel, `
line-height: 16px;
`);

4
app/client/components/SelectionSummary.ts
View File

@@ -6,7 +6,7 @@ import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
import {UserError} from 'app/client/models/errors';
import {ALL, RowsChanged, SortedRowSet} from "app/client/models/rowset";
import {showTransientTooltip} from 'app/client/ui/tooltips';
import {colors, isNarrowScreen, isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars';
import {isNarrowScreen, isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {CellValue} from 'app/common/DocActions';
import {isEmptyList, isListType, isRefListType} from "app/common/gristTypes";
@@ -314,7 +314,7 @@ const cssSummaryPart = styled('div', `
left: 0;
bottom: 0;
right: 0;
background-color: ${colors.mediumGrey};
background-color: ${theme.tableCellSummaryBg};
opacity: 0.8;
z-index: -1;
}

12
app/client/components/TypeConversion.ts
View File

@@ -160,9 +160,10 @@ export async function prepTransformColInfo(docModel: DocModel, origCol: ColumnRe
// trouble than desired behavior. For many choices, recommend using a Ref to helper table.
const columnData = tableData.getDistinctValues(sourceCol.colId(), 100);
if (columnData) {
columnData.delete("");
columnData.delete(null);
widgetOptions = {...widgetOptions, choices: Array.from(columnData, String)};
const choices = Array.from(columnData, String).filter((choice) => {
return choice !== null && choice.trim() !== '';
});
widgetOptions = {...widgetOptions, choices};
}
}
break;
@@ -178,11 +179,12 @@ export async function prepTransformColInfo(docModel: DocModel, origCol: ColumnRe
value = String(decodeObject(value)).trim();
const tags: unknown[] = (value.startsWith('[') && gutil.safeJsonParse(value, null)) || csvDecodeRow(value);
for (const tag of tags) {
choices.add(String(tag).trim());
const choice = String(tag).trim();
if (choice === '') { continue; }
choices.add(choice);
if (choices.size > 100) { break; } // Don't suggest excessively many choices.
}
}
choices.delete("");
widgetOptions = {...widgetOptions, choices: Array.from(choices)};
}
break;

11
app/client/components/ViewConfigTab.js
View File

@@ -131,13 +131,12 @@ ViewConfigTab.prototype._buildAdvancedSettingsDom = function() {
kd.style('margin-top', '1.5rem')
),
kf.row(kd.hide(isCollapsed),
kf.label('Table ', dom('b', kd.text(table.tableId)), ':')
),
kf.row(kd.hide(isCollapsed),
kf.buttonGroup(kf.button(() => this._makeOnDemand(table),
dom('div', primaryButton(
kd.text(() => table.onDemand() ? t("Unmark On-Demand") : t("Make On-Demand")),
dom.testId('ViewConfig_onDemandBtn')
))
kd.style('margin-top', '1rem'),
dom.on('click', () => this._makeOnDemand(table)),
dom.testId('ViewConfig_onDemandBtn'),
)),
),
];
});

5
app/client/components/ViewLayout.css
View File

@@ -9,14 +9,15 @@
align-items: center;
gap: 8px;
align-self: flex-start;
margin-top: -1px;
}
.viewsection_title {
align-items: center;
flex-shrink: 0;
cursor: default;
height: 24px;
min-height: 24px;
margin-left: -16px; /* to include drag handle that shows up on hover */
margin-bottom: 4px;
white-space: nowrap;
}

2
app/client/components/ViewLayout.ts
View File

@@ -456,7 +456,7 @@ const cssLayoutWrapper = styled('div', `
}
&-active .viewsection_content {
margin: 0px;
margin-top: 12px;
margin-top: 8px;
}
&-active .viewsection_title {
padding: 0px 12px;

8
app/client/components/buildViewSectionDom.ts
View File

@@ -7,7 +7,7 @@ import {cssIcon} from 'app/client/ui/RightPanelStyles';
import {makeCollapsedLayoutMenu} from 'app/client/ui/ViewLayoutMenu';
import {cssDotsIconWrapper, cssMenu, viewSectionMenu} from 'app/client/ui/ViewSectionMenu';
import {buildWidgetTitle} from 'app/client/ui/WidgetTitle';
import {colors, isNarrowScreenObs, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
import {isNarrowScreenObs, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {menu} from 'app/client/ui2018/menus';
import {getWidgetTypes} from "app/client/ui/widgetTypesMap";
@@ -128,7 +128,6 @@ const cssTestClick = styled(`div`, `
`);
const cssSigmaIcon = styled(icon, `
bottom: 1px;
margin-right: 5px;
background-color: ${theme.lightText}
`);
@@ -186,8 +185,7 @@ const cssViewLeafInactive = styled('div', `
// z-index ensure it's above the resizer line, since it's hard to grab otherwise
const cssDragIcon = styled(icon, `
visibility: hidden;
--icon-color: ${colors.slate};
top: -1px;
--icon-color: ${theme.lightText};
z-index: 100;
.viewsection_title:hover &.layout_grabbable {
@@ -204,7 +202,7 @@ const cssResizing = styled('div', `
`);
const cssMiniSection = styled('div.mini_section_container', `
--icon-color: ${colors.lightGreen};
--icon-color: ${theme.accentIcon};
display: flex;
align-items: center;
padding-right: 8px;

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

@@ -350,7 +350,8 @@ const cssBehavioralPromptModal = styled('div', `
@media ${mediaXSmall} {
& {
width: 320px;
/* Allocate 32px of space for the left and right margins. */
width: calc(100% - 64px);
}
}
`);

5
app/client/components/viewCommon.css
View File

@@ -12,6 +12,7 @@
border-style: none;
border-color: var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
border-left-style: solid; /* left border, against rownumbers div, always on */
border-left-color: var(--grist-theme-table-header-border, lightgray);
border-bottom-width: 1px; /* style: none, set by record-hlines*/
/* Record background is white (or theme default) by default.
It gets overridden by the add row, zebra stripes.
@@ -203,11 +204,11 @@
text-align: center;
cursor: pointer;
/* Column headers always show vertical gridlines, to make it clear how to resize them */
border-right-color: var(--grist-theme-table-header-border-dark, var(--grist-color-dark-grey));
border-right-color: var(--grist-theme-table-header-border, lightgray);
}
.column_names.record {
border-left-color: var(--grist-theme-table-header-border, var(--grist-color-dark-grey));
border-left-color: var(--grist-theme-table-header-border, lightgray);
}
.column_name.selected > .selection {