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

Visually identify that a field is a drop-down list (single choice) #491 (#525)

Browse Source 
* Visually identify that a field is a drop-down list (single choice) #491

---------

Co-authored-by: Florent <florent.fayolle@beta.gouv.fr>
This commit is contained in:
Florent
2023-06-13 19:14:01 +02:00
committed by GitHub
parent 1e7cf9001e
commit 3d808f67f1
3 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/client/widgets/ChoiceTextBox.ts
View File

@@ -4,7 +4,8 @@ import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
import {KoSaveableObservable} from 'app/client/models/modelUtil';
import {Style} from 'app/client/models/Styles';
import {cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
import {testId} from 'app/client/ui2018/cssVars';
import {colors, testId} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {ChoiceListEntry} from 'app/client/widgets/ChoiceListEntry';
import {choiceToken, DEFAULT_FILL_COLOR, DEFAULT_TEXT_COLOR} from 'app/client/widgets/ChoiceToken';
import {NTextBox} from 'app/client/widgets/NTextBox';
@@ -45,9 +46,13 @@ export class ChoiceTextBox extends NTextBox {
public buildDom(row: DataRowModel) {
const value = row.cells[this.field.colId()];
const isSingle = this.field.viewSection().parentKey() === "single";
const maybeDropDownCssChoiceEditIcon = isSingle ? cssChoiceEditIcon('Dropdown') : null;
return cssChoiceField(
cssChoiceTextWrapper(
dom.style('justify-content', (use) => use(this.alignment) === 'right' ? 'flex-end' : use(this.alignment)),
maybeDropDownCssChoiceEditIcon,
dom.domComputed((use) => {
if (this.isDisposed() || use(row._isAddRow)) { return null; }
@@ -150,3 +155,9 @@ const cssChoiceText = styled('div', `
height: min-content;
line-height: 16px;
`);
const cssChoiceEditIcon = styled(icon, `
background-color: ${colors.slate};
display: block;
height: inherit;
`);