feat(columnDesc): add front description in single card widget

app/client/components/DetailView.css

@@ -37,6 +37,13 @@
   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 {
   position: relative;
   min-height: 16px;
@@ -241,6 +248,16 @@
   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
  * 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.

app/client/components/DetailView.js

@@ -228,6 +228,7 @@ DetailView.prototype.buildFieldDom = function(field, row) {
     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_description', field.description),
       dom('div.g_record_detail_value', field.value)
     );
   }
@@ -258,6 +259,8 @@ DetailView.prototype.buildFieldDom = function(field, row) {
     dom.autoDispose(isCellActive),
     kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }),
     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',
       kd.toggleClass('scissors', isCopyActive),
       kd.toggleClass('record-add', row._isAddRow),

app/client/ui2018/cssVars.ts

@@ -605,6 +605,11 @@ export const theme = {
   menuToggleBg: new CustomProp('theme-menu-toggle-bg', undefined, 'white'),
   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 */
   buttonGroupFg: new CustomProp('theme-button-group-fg', undefined, colors.dark),
   buttonGroupLightFg: new CustomProp('theme-button-group-light-fg', undefined, colors.slate),