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

(core) Add dark mode for comments

Browse Source 
Summary:
Also fixes the CSS for the page/workspace input so that it's always
readable in dark mode.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3682
This commit is contained in:
George Gevoian 2022-10-24 20:10:15 -07:00
parent aa88c156e6
commit 3145af36c6
9 changed files with 92 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/ui/HomeLeftPane.ts
View File

@ -247,7 +247,6 @@ export const cssEditorInput = styled(transientInput, `
height: 24px; height: 24px;
flex: 1 1 0px; flex: 1 1 0px;
min-width: 0px; min-width: 0px;
color: initial;
background-color: ${theme.inputBg}; background-color: ${theme.inputBg};
margin-right: 16px; margin-right: 16px;
font-size: inherit; font-size: inherit;

6
app/client/ui/RightPanel.ts
View File

@ -690,7 +690,7 @@ const cssTopBarIcon = styled(icon, `
margin: 16px; margin: 16px;
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: vars(--icon-color); background-color: var(--icon-color);
`); `);
const cssHoverCircle = styled('div', ` const cssHoverCircle = styled('div', `
@ -705,14 +705,14 @@ const cssHoverCircle = styled('div', `
justify-content: center; justify-content: center;
&:hover { &:hover {
background-color: ${theme.rightPanelTabCloseButtonHoverBg}; background-color: ${theme.rightPanelTabButtonHoverBg};
} }
`); `);
const cssHoverIcon = styled(icon, ` const cssHoverIcon = styled(icon, `
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: vars(--icon-color); background-color: var(--icon-color);
`); `);
const cssSubTabContainer = styled('div', ` const cssSubTabContainer = styled('div', `

1
app/client/ui/TopBar.ts
View File

@ -118,6 +118,7 @@ function buildShowDiscussionButton(pageModel: DocPageModel) {
return cssHoverCircle({ style: `margin: 5px; position: relative;` }, return cssHoverCircle({ style: `margin: 5px; position: relative;` },
cssTopBarBtn('Chat', dom.cls('tour-share-icon')), cssTopBarBtn('Chat', dom.cls('tour-share-icon')),
cssBeta('Beta'), cssBeta('Beta'),
hoverTooltip('Comments', {key: 'topBarBtnTooltip'}),
testId('open-discussion'), testId('open-discussion'),
dom.on('click', () => pageModel.gristDoc.get()!.showTool('discussion')) dom.on('click', () => pageModel.gristDoc.get()!.showTool('discussion'))
); );

13
app/client/ui2018/cssVars.ts
View File

@ -414,7 +414,7 @@ export const theme = {
colors.light), colors.light),
rightPanelTabSelectedBg: new CustomProp('theme-right-panel-tab-selected-bg', undefined, rightPanelTabSelectedBg: new CustomProp('theme-right-panel-tab-selected-bg', undefined,
colors.lightGreen), colors.lightGreen),
rightPanelTabCloseButtonHoverBg: new CustomProp('theme-right-panel-tab-close-button-hover-bg', rightPanelTabButtonHoverBg: new CustomProp('theme-right-panel-tab-button-hover-bg',
undefined, colors.darkGreen), undefined, colors.darkGreen),
rightPanelSubtabFg: new CustomProp('theme-right-panel-subtab-fg', undefined, colors.lightGreen), rightPanelSubtabFg: new CustomProp('theme-right-panel-subtab-fg', undefined, colors.lightGreen),
rightPanelSubtabSelectedFg: new CustomProp('theme-right-panel-subtab-selected-fg', undefined, rightPanelSubtabSelectedFg: new CustomProp('theme-right-panel-subtab-selected-fg', undefined,
@ -651,6 +651,17 @@ export const theme = {
chartLegendBg: new CustomProp('theme-chart-legend-bg', undefined, '#FFFFFF80'), chartLegendBg: new CustomProp('theme-chart-legend-bg', undefined, '#FFFFFF80'),
chartXAxis: new CustomProp('theme-chart-x-axis', undefined, '#444'), chartXAxis: new CustomProp('theme-chart-x-axis', undefined, '#444'),
chartYAxis: new CustomProp('theme-chart-y-axis', undefined, '#444'), chartYAxis: new CustomProp('theme-chart-y-axis', undefined, '#444'),
/* Comments */
commentsPopupHeaderBg: new CustomProp('theme-comments-popup-header-bg', undefined,
colors.lightGrey),
commentsPopupBodyBg: new CustomProp('theme-comments-popup-body-bg', undefined, 'white'),
commentsPopupBorder: new CustomProp('theme-comments-popup-border', undefined, colors.darkGrey),
commentsUserNameFg: new CustomProp('theme-comments-user-name-fg', undefined, colors.darkText),
commentsPanelTopicBg: new CustomProp('theme-comments-panel-topic-bg', undefined, 'white'),
commentsPanelTopicBorder: new CustomProp('theme-comments-panel-topic-border', undefined, '#ccc'),
commentsPanelResolvedTopicBg: new CustomProp('theme-comments-panel-resolved-topic-bg', undefined,
vars.labelActiveBg),
}; };
const cssColors = values(colors).map(v => v.decl()).join('\n'); const cssColors = values(colors).map(v => v.decl()).join('\n');

65
app/client/widgets/DiscussionEditor.ts
View File

@ -8,7 +8,7 @@ import {RowSource, RowWatcher} from 'app/client/models/rowset';
import {createUserImage} from 'app/client/ui/UserImage'; import {createUserImage} from 'app/client/ui/UserImage';
import {basicButton, primaryButton, textButton} from 'app/client/ui2018/buttons'; import {basicButton, primaryButton, textButton} from 'app/client/ui2018/buttons';
import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox'; import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
import {colors, vars} from 'app/client/ui2018/cssVars'; import {theme, vars} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons'; import {icon} from 'app/client/ui2018/icons';
import {menu, menuItem} from 'app/client/ui2018/menus'; import {menu, menuItem} from 'app/client/ui2018/menus';
import {CellInfoType} from 'app/common/gristTypes'; import {CellInfoType} from 'app/common/gristTypes';
@ -446,9 +446,8 @@ class CommentView extends Disposable {
dom.maybe(use => !use(this.isEditing), dom.maybe(use => !use(this.isEditing),
() => dom.domComputed(comment.hidden, (hidden) => { () => dom.domComputed(comment.hidden, (hidden) => {
if (hidden) { if (hidden) {
return dom('div', return cssCommentCensored(
"CENSORED", "CENSORED",
{style: 'margin-top: 4px'},
testId('comment-text'), testId('comment-text'),
); );
} }
@ -1095,7 +1094,7 @@ const cssDropdownMenu = styled('div', `
`); `);
const cssReplyBox = styled(cssCommonPadding, ` const cssReplyBox = styled(cssCommonPadding, `
border-top: 1px solid ${colors.mediumGrey}; border-top: 1px solid ${theme.commentsPopupBorder};
`); `);
const cssCommentEntry = styled('div', ` const cssCommentEntry = styled('div', `
@ -1130,7 +1129,9 @@ const cssTextArea = styled('textarea', `
min-height: 5em; min-height: 5em;
border-radius: 3px; border-radius: 3px;
padding: 4px 6px; padding: 4px 6px;
border: 1px solid ${colors.darkGrey}; color: ${theme.inputFg};
background-color: ${theme.inputBg};
border: 1px solid ${theme.inputBorder};
outline: none; outline: none;
width: 100%; width: 100%;
resize: none; resize: none;
@ -1139,16 +1140,20 @@ const cssTextArea = styled('textarea', `
min-height: 28px; min-height: 28px;
height: 28px; height: 28px;
} }
&::placeholder {
color: ${theme.inputPlaceholderFg};
}
`); `);
const cssHeaderBox = styled('div', ` const cssHeaderBox = styled('div', `
background-color: ${colors.lightGrey}; color: ${theme.text};
background-color: ${theme.commentsPopupHeaderBg};
padding: 12px; /* 12px * 2 + 24px (size of the icon) == 48px in height */ padding: 12px; /* 12px * 2 + 24px (size of the icon) == 48px in height */
padding-right: 16px; padding-right: 16px;
display: flex; display: flex;
gap: 8px; gap: 8px;
&-border { &-border {
border-bottom: 1px solid ${colors.mediumGrey}; border-bottom: 1px solid ${theme.commentsPopupBorder};
} }
`); `);
@ -1156,9 +1161,9 @@ const cssTopic = styled('div', `
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid #ccc; border: 1px solid ${theme.commentsPopupBorder};
border-radius: 4px; border-radius: 4px;
background-color: ${colors.light}; background-color: ${theme.commentsPopupBodyBg};
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 100; z-index: 100;
width: 325px; width: 325px;
@ -1166,7 +1171,7 @@ const cssTopic = styled('div', `
outline: none; outline: none;
max-height: inherit; max-height: inherit;
&-disabled { &-disabled {
background-color: ${vars.labelActiveBg} background-color: ${theme.commentsPanelResolvedTopicBg}
} }
&-panel { &-panel {
width: unset; width: unset;
@ -1178,14 +1183,14 @@ const cssTopic = styled('div', `
`); `);
const cssDiscussionWrapper = styled('div', ` const cssDiscussionWrapper = styled('div', `
border-bottom: 1px solid ${colors.darkGrey}; border-bottom: 1px solid ${theme.commentsPopupBorder};
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
.${cssTopic.className}-panel & { .${cssTopic.className}-panel & {
border: 1px solid #ccc; border: 1px solid ${theme.commentsPanelTopicBorder};
border-radius: 4px; border-radius: 4px;
background-color: ${colors.light}; background-color: ${theme.commentsPanelTopicBg};
margin-bottom: 4px; margin-bottom: 4px;
} }
`); `);
@ -1195,15 +1200,21 @@ const cssDiscussion = styled('div', `
flex-direction: column; flex-direction: column;
padding: 16px; padding: 16px;
&-resolved { &-resolved {
background-color: ${vars.labelActiveBg}; background-color: ${theme.commentsPanelResolvedTopicBg};
cursor: pointer; cursor: pointer;
} }
&-resolved * { &-resolved * {
color: ${colors.slate} !important; color: ${theme.lightText} !important;
} }
`); `);
const cssCommentCensored = styled('div', `
color: ${theme.text};
margin-top: 4px;
`);
const cssCommentPre = styled('pre', ` const cssCommentPre = styled('pre', `
color: ${theme.text};
padding: 0px; padding: 0px;
font-size: revert; font-size: revert;
border: 0px; border: 0px;
@ -1232,7 +1243,7 @@ const cssCommentReplyWrapper = styled('div', `
`); `);
const cssComment = styled('div', ` const cssComment = styled('div', `
border-bottom: 1px solid ${colors.mediumGrey}; border-bottom: 1px solid ${theme.commentsPopupBorder};
.${cssCommentList.className} &:last-child { .${cssCommentList.className} &:last-child {
border-bottom: 0px; border-bottom: 0px;
} }
@ -1268,9 +1279,9 @@ const cssIconButton = styled('div', `
line-height: 0px; line-height: 0px;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
--icon-color: ${colors.slate}; --icon-color: ${theme.controlSecondaryFg};
&:hover, &.weasel-popup-open { &:hover, &.weasel-popup-open {
background-color: ${colors.darkGrey}; background-color: ${theme.controlSecondaryHoverBg};
} }
`); `);
@ -1283,9 +1294,9 @@ const cssIconButtonMenu = styled('div', `
line-height: 0px; line-height: 0px;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
--icon-color: ${colors.light}; --icon-color: ${theme.rightPanelTabSelectedFg};
&:hover, &.weasel-popup-open { &:hover, &.weasel-popup-open {
background-color: ${colors.darkGreen}; background-color: ${theme.rightPanelTabButtonHoverBg};
} }
`); `);
@ -1297,7 +1308,7 @@ const cssReplyButton = styled(textButton, `
`); `);
const cssTime = styled('div', ` const cssTime = styled('div', `
color: ${colors.slate}; color: ${theme.lightText};
font-size: ${vars.smallFontSize}; font-size: ${vars.smallFontSize};
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -1310,7 +1321,7 @@ const cssNick = styled('div', `
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
color: ${colors.darkText}; color: ${theme.commentsUserNameFg};
&-small { &-small {
font-size: 12px; font-size: 12px;
} }
@ -1325,15 +1336,15 @@ const cssCloseButton = styled('div', `
border-radius: 4px; border-radius: 4px;
line-height: 1px; line-height: 1px;
cursor: pointer; cursor: pointer;
--icon-color: ${colors.slate}; --icon-color: ${theme.controlSecondaryFg};
&:hover { &:hover {
background-color: ${colors.mediumGreyOpaque}; background-color: ${theme.hover};
} }
`); `);
const cssHoverButton = styled(cssCloseButton, ` const cssHoverButton = styled(cssCloseButton, `
&:hover { &:hover {
--icon-color: ${colors.lightGreen}; --icon-color: ${theme.controlPrimaryBg};
} }
`); `);
@ -1360,11 +1371,11 @@ function trigger(element: Element, name: string, args?: any) {
const cssResolvedBlock = styled('div', ` const cssResolvedBlock = styled('div', `
margin-top: 5px; margin-top: 5px;
--icon-color: ${colors.dark}; --icon-color: ${theme.text};
`); `);
const cssResolvedText = styled('span', ` const cssResolvedText = styled('span', `
color: ${colors.dark}; color: ${theme.text};
font-size: ${vars.smallFontSize}; font-size: ${vars.smallFontSize};
margin-left: 5px; margin-left: 5px;
`); `);

9
app/common/ThemePrefs-ti.ts
View File

@ -185,7 +185,7 @@ export const ThemeColors = t.iface([], {
"right-panel-tab-hover-bg": "string", "right-panel-tab-hover-bg": "string",
"right-panel-tab-selected-fg": "string", "right-panel-tab-selected-fg": "string",
"right-panel-tab-selected-bg": "string", "right-panel-tab-selected-bg": "string",
"right-panel-tab-close-button-hover-bg": "string", "right-panel-tab-button-hover-bg": "string",
"right-panel-subtab-fg": "string", "right-panel-subtab-fg": "string",
"right-panel-subtab-selected-fg": "string", "right-panel-subtab-selected-fg": "string",
"right-panel-subtab-selected-underline": "string", "right-panel-subtab-selected-underline": "string",
@ -321,6 +321,13 @@ export const ThemeColors = t.iface([], {
"chart-legend-bg": "string", "chart-legend-bg": "string",
"chart-x-axis": "string", "chart-x-axis": "string",
"chart-y-axis": "string", "chart-y-axis": "string",
"comments-popup-header-bg": "string",
"comments-popup-body-bg": "string",
"comments-popup-border": "string",
"comments-user-name-fg": "string",
"comments-panel-topic-bg": "string",
"comments-panel-topic-border": "string",
"comments-panel-resolved-topic-bg": "string",
}); });
const exportedTypeSuite: t.ITypeSuite = { const exportedTypeSuite: t.ITypeSuite = {

11
app/common/ThemePrefs.ts
View File

@ -239,7 +239,7 @@ export interface ThemeColors {
'right-panel-tab-hover-bg': string; 'right-panel-tab-hover-bg': string;
'right-panel-tab-selected-fg': string; 'right-panel-tab-selected-fg': string;
'right-panel-tab-selected-bg': string; 'right-panel-tab-selected-bg': string;
'right-panel-tab-close-button-hover-bg': string; 'right-panel-tab-button-hover-bg': string;
'right-panel-subtab-fg': string; 'right-panel-subtab-fg': string;
'right-panel-subtab-selected-fg': string; 'right-panel-subtab-selected-fg': string;
'right-panel-subtab-selected-underline': string; 'right-panel-subtab-selected-underline': string;
@ -421,6 +421,15 @@ export interface ThemeColors {
'chart-legend-bg': string; 'chart-legend-bg': string;
'chart-x-axis': string; 'chart-x-axis': string;
'chart-y-axis': string; 'chart-y-axis': string;
/* Comments */
'comments-popup-header-bg': string;
'comments-popup-body-bg': string;
'comments-popup-border': string;
'comments-user-name-fg': string;
'comments-panel-topic-bg': string;
'comments-panel-topic-border': string;
'comments-panel-resolved-topic-bg': string;
} }
export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT<ThemePrefs>; export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT<ThemePrefs>;

11
app/common/themes/GristDark.ts
View File

@ -218,7 +218,7 @@ export const GristDark: ThemeColors = {
'right-panel-tab-hover-bg': 'rgba(111,111,117,0.6)', 'right-panel-tab-hover-bg': 'rgba(111,111,117,0.6)',
'right-panel-tab-selected-fg': '#FFFFFF', 'right-panel-tab-selected-fg': '#FFFFFF',
'right-panel-tab-selected-bg': '#1DA270', 'right-panel-tab-selected-bg': '#1DA270',
'right-panel-tab-close-button-hover-bg': '#157A54', 'right-panel-tab-button-hover-bg': '#157A54',
'right-panel-subtab-fg': '#1DA270', 'right-panel-subtab-fg': '#1DA270',
'right-panel-subtab-selected-fg': '#EFEFEF', 'right-panel-subtab-selected-fg': '#EFEFEF',
'right-panel-subtab-selected-underline': '#1DA270', 'right-panel-subtab-selected-underline': '#1DA270',
@ -400,4 +400,13 @@ export const GristDark: ThemeColors = {
'chart-legend-bg': '#32323F80', 'chart-legend-bg': '#32323F80',
'chart-x-axis': '#A4A4A4', 'chart-x-axis': '#A4A4A4',
'chart-y-axis': '#A4A4A4', 'chart-y-axis': '#A4A4A4',
/* Comments */
'comments-popup-header-bg': '#262633',
'comments-popup-body-bg': '#32323F',
'comments-popup-border': '#69697D',
'comments-user-name-fg': '#DFDFDF',
'comments-panel-topic-bg': '#32323F',
'comments-panel-topic-border': '#555563',
'comments-panel-resolved-topic-bg': '#262634',
}; };

11
app/common/themes/GristLight.ts
View File

@ -218,7 +218,7 @@ export const GristLight: ThemeColors = {
'right-panel-tab-hover-bg': 'rgba(217,217,217,0.6)', 'right-panel-tab-hover-bg': 'rgba(217,217,217,0.6)',
'right-panel-tab-selected-fg': '#FFFFFF', 'right-panel-tab-selected-fg': '#FFFFFF',
'right-panel-tab-selected-bg': '#16B378', 'right-panel-tab-selected-bg': '#16B378',
'right-panel-tab-close-button-hover-bg': '#009058', 'right-panel-tab-button-hover-bg': '#009058',
'right-panel-subtab-fg': '#16B378', 'right-panel-subtab-fg': '#16B378',
'right-panel-subtab-selected-fg': '#262633', 'right-panel-subtab-selected-fg': '#262633',
'right-panel-subtab-selected-underline': '#16B378', 'right-panel-subtab-selected-underline': '#16B378',
@ -400,4 +400,13 @@ export const GristLight: ThemeColors = {
'chart-legend-bg': '#FFFFFF80', 'chart-legend-bg': '#FFFFFF80',
'chart-x-axis': '#444', 'chart-x-axis': '#444',
'chart-y-axis': '#444', 'chart-y-axis': '#444',
/* Comments */
'comments-popup-header-bg': '#F7F7F7',
'comments-popup-body-bg': 'white',
'comments-popup-border': '#D9D9D9',
'comments-user-name-fg': '#494949',
'comments-panel-topic-bg': 'white',
'comments-panel-topic-border': '#ccc',
'comments-panel-resolved-topic-bg': '#F0F0F0',
}; };