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(columnDesc): add front description in single card widget

Browse Source
This commit is contained in:
Camille 2023-01-18 18:48:02 +01:00
parent 66cb283075
commit 0a90fc0c7b
3 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,6 +37,13 @@
font-weight: bold; font-weight: bold;
} }
.g_record_detail_description {
min-height: 1rem;
color: #666;
font-size: 0.9rem;
font-weight: normal;
margin-bottom: 2px;
}
.g_record_detail_value { .g_record_detail_value {
position: relative; position: relative;
min-height: 16px; min-height: 16px;
@ -241,6 +248,16 @@
margin-right: -8px; margin-right: -8px;
} }
.detail_theme_field_form>.g_record_detail_description {
font-size: var(--grist-small-font-size);
color: var(--grist-theme-card-form-label, var(--grist-color-slate));
font-weight: normal;
min-height: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: -8px;
}
/* TODO want to style better the values themselves (e.g. more padding, rounded corners, move label /* TODO want to style better the values themselves (e.g. more padding, rounded corners, move label
* inside value box for compact view for better cursor looks, etc), but first the cell editor * inside value box for compact view for better cursor looks, etc), but first the cell editor
* needs to learn to match the value box's style. Right now, the cell editor style is hard-coded. * needs to learn to match the value box's style. Right now, the cell editor style is hard-coded.

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

@ -228,6 +228,7 @@ DetailView.prototype.buildFieldDom = function(field, row) {
return dom('div.g_record_detail_el.flexitem', return dom('div.g_record_detail_el.flexitem',
kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }), kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }),
dom('div.g_record_detail_label', field.label), dom('div.g_record_detail_label', field.label),
dom('div.g_record_detail_description', field.description),
dom('div.g_record_detail_value', field.value) dom('div.g_record_detail_value', field.value)
); );
} }
@ -258,6 +259,8 @@ DetailView.prototype.buildFieldDom = function(field, row) {
dom.autoDispose(isCellActive), dom.autoDispose(isCellActive),
kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }), kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }),
dom('div.g_record_detail_label', kd.text(field.displayLabel)), dom('div.g_record_detail_label', kd.text(field.displayLabel)),
// TODO : show the real description
dom('div.g_record_detail_description', kd.text("Description testing")),
dom('div.g_record_detail_value', dom('div.g_record_detail_value',
kd.toggleClass('scissors', isCopyActive), kd.toggleClass('scissors', isCopyActive),
kd.toggleClass('record-add', row._isAddRow), kd.toggleClass('record-add', row._isAddRow),

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

@ -605,6 +605,11 @@ export const theme = {
menuToggleBg: new CustomProp('theme-menu-toggle-bg', undefined, 'white'), menuToggleBg: new CustomProp('theme-menu-toggle-bg', undefined, 'white'),
menuToggleBorder: new CustomProp('theme-menu-toggle-border', undefined, colors.slate), menuToggleBorder: new CustomProp('theme-menu-toggle-border', undefined, colors.slate),
/* Info Toggles */
infoToggleFg: new CustomProp('theme-info-toggle-fg', undefined, "#8F8F8F"),
infoToggleHoverFg: new CustomProp('theme-info-toggle-hover-fg', undefined, "#707070"),
infoToggleActiveFg: new CustomProp('theme-info-toggle-active-fg', undefined, "#5C5C5C"),
/* Button Groups */ /* Button Groups */
buttonGroupFg: new CustomProp('theme-button-group-fg', undefined, colors.dark), buttonGroupFg: new CustomProp('theme-button-group-fg', undefined, colors.dark),
buttonGroupLightFg: new CustomProp('theme-button-group-light-fg', undefined, colors.slate), buttonGroupLightFg: new CustomProp('theme-button-group-light-fg', undefined, colors.slate),