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

Merge pull request #406 from incubateur-territoires/column-description

Browse Source 
feat: Add a description to a grist table column
This commit is contained in:
jarek
2023-02-23 17:16:17 +01:00
committed by GitHub
parent b86701a28f 5e244a9a24
commit cee0cdcd67
14 changed files with 269 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,6 +30,17 @@
padding: .5rem;
}
.g_record_detail_label_container {
display: flex;
justify-content: flex-start;
gap: 3px;
}
.g_record_detail_label_container .info_toggle_icon {
width: 13px;
height: 13px;
margin-bottom: 3px;
}
.g_record_detail_label {
min-height: 1rem;
color: #666;
@@ -150,7 +161,7 @@
-webkit-flex-direction: column-reverse;
}
.detail_theme_field_under > .g_record_detail_label {
.detail_theme_field_under .g_record_detail_label {
border-top: 1px solid #333;
}
@@ -208,7 +219,7 @@
line-height: 1.2;
}
.detail_theme_field_compact > .g_record_detail_label {
.detail_theme_field_compact .g_record_detail_label {
font-weight: normal;
font-size: var(--grist-small-font-size);
color: var(--grist-theme-card-compact-label, var(--grist-color-slate));
@@ -230,7 +241,7 @@
padding: 1px 1px 1px 5px;
}
.detail_theme_field_form > .g_record_detail_label {
.detail_theme_field_form .g_record_detail_label {
font-size: var(--grist-small-font-size);
color: var(--grist-theme-card-form-label, var(--grist-color-slate));
font-weight: bold;
@@ -241,6 +252,10 @@
margin-right: -8px;
}
.detail_theme_field_form .g_record_detail_label_container {
gap: 8px;
}
/* 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
* needs to learn to match the value box's style. Right now, the cell editor style is hard-coded.
@@ -288,7 +303,7 @@
border-radius: 2px;
}
.detail_theme_field_blocks > .g_record_detail_label {
.detail_theme_field_blocks .g_record_detail_label {
font-size: var(--grist-small-font-size);
color: var(--grist-theme-card-blocks-label, var(--grist-color-slate));
font-weight: normal;

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

@@ -15,6 +15,7 @@ const RecordLayout = require('./RecordLayout');
const commands = require('./commands');
const {RowContextMenu} = require('../ui/RowContextMenu');
const {parsePasteForView} = require("./BaseView2");
const {columnInfoTooltip} = require("../ui/tooltips");
/**
* DetailView component implements a list of record layouts.
@@ -227,8 +228,10 @@ DetailView.prototype.buildFieldDom = function(field, row) {
if (field.isNewField) {
return dom('div.g_record_detail_el.flexitem',
kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }),
dom('div.g_record_detail_label', field.label),
dom('div.g_record_detail_value', field.value)
dom('div.g_record_detail_label_container',
dom('div.g_record_detail_label', kd.text(field.displayLabel)),
kd.scope(field.description, desc => desc ? columnInfoTooltip(kd.text(field.description)) : null)
),
);
}
@@ -257,7 +260,10 @@ DetailView.prototype.buildFieldDom = function(field, row) {
dom.autoDispose(isCellSelected),
dom.autoDispose(isCellActive),
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_container',
dom('div.g_record_detail_label', kd.text(field.displayLabel)),
kd.scope(field.description, desc => desc ? columnInfoTooltip(kd.text(field.description)) : null)
),
dom('div.g_record_detail_value',
kd.toggleClass('scissors', isCopyActive),
kd.toggleClass('record-add', row._isAddRow),