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

feat(ColumnDesc): Info Tooltip with column desc in DetailView

Browse Source
This commit is contained in:
Camille
2023-01-19 18:37:24 +01:00
parent 969280629b
commit f0dc24306a
10 changed files with 120 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,13 +37,6 @@
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;
@@ -237,7 +230,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;
@@ -248,16 +241,11 @@
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;
.detail_theme_field_form .info_toggle_icon {
width: 13px;
height: 13px;
}
/* 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.

15
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 {withInfoTooltip} = require('../ui/tooltips');
/**
* DetailView component implements a list of record layouts.
@@ -227,8 +228,11 @@ 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_description', field.description),
field.description.peek() ?
withInfoTooltip(
dom('div.g_record_detail_label', kd.text(field.displayLabel)),
dom('div.g_record_detail_description', kd.text(field.description)),
) : dom('div.g_record_detail_label', kd.text(field.displayLabel)),
dom('div.g_record_detail_value', field.value)
);
}
@@ -258,8 +262,11 @@ 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_description', kd.text(field.description)),
field.description.peek() ?
withInfoTooltip(
dom('div.g_record_detail_label', kd.text(field.displayLabel)),
dom('div.g_record_detail_description', kd.text(field.description)),
) : dom('div.g_record_detail_label', kd.text(field.displayLabel)),
dom('div.g_record_detail_value',
kd.toggleClass('scissors', isCopyActive),
kd.toggleClass('record-add', row._isAddRow),

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

@@ -2,7 +2,7 @@ import {DocPageModel} from 'app/client/models/DocPageModel';
import {urlState} from 'app/client/models/gristUrlState';
import {docListHeader} from 'app/client/ui/DocMenuCss';
import {GristTooltips, TooltipContentFunc} from 'app/client/ui/GristTooltips';
import {withInfoTooltip} from 'app/client/ui/tooltips';
import { withQuestionMarkTooltip } from 'app/client/ui/tooltips';
import {mediaXSmall, theme} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {loadingDots, loadingSpinner} from 'app/client/ui2018/loaders';
@@ -284,7 +284,7 @@ function buildUsageMetric(options: MetricOptions, ...domArgs: DomElementArg[]) {
return cssUsageMetric(
cssMetricName(
tooltipContentFunc
? withInfoTooltip(
? withQuestionMarkTooltip(
cssOverflowableText(name, testId('name')),
tooltipContentFunc()
)