@formicoidea/labre-core 0.49.0 → 0.51.0

package/dist/_pkgs/data-view/view-presets/table/pc/header/database-header-column.js

@@ -34,21 +34,23 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { menu, popMenu, popupTargetFromElement, } from '../../../../../affine-components/context-menu/index.js';
 import { SignalWatcher, WithDisposable } from '../../../../../global/lit/index.js';
-import { DeleteIcon, DuplicateIcon, FilterIcon, InsertLeftIcon, InsertRightIcon, MoveLeftIcon, MoveRightIcon, SortIcon, ViewIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../../std/index.js';
+import { FilterIcon, InsertLeftIcon, InsertRightIcon, MoveLeftIcon, MoveRightIcon, SortIcon, } from '@blocksuite/icons/lit';
+import { ShadowlessElement, stdContext } from '../../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
-import { inputConfig, typeConfig, } from '../../../../core/common/property-menu.js';
+import { popPropertyMenu } from '../../../../core/common/property-menu.js';
 import { filterTraitKey } from '../../../../core/filter/trait.js';
 import { firstFilterByRef } from '../../../../core/filter/utils.js';
 import { renderUniLit } from '../../../../core/index.js';
 import { sortTraitKey } from '../../../../core/sort/manager.js';
 import { createSortUtils } from '../../../../core/sort/utils.js';
 import { draggable, dragHandler, droppable, } from '../../../../core/utils/wc-dnd/dnd-context.js';
+import { wordingOf } from '../../../../core/utils/wording.js';
 import { numberFormats } from '../../../../property-presets/number/utils/formats.js';
 import { createDefaultShowQuickSettingBar, ShowQuickSettingBarKey, } from '../../../../widget-presets/quick-setting-bar/context.js';
 import { DEFAULT_COLUMN_TITLE_HEIGHT } from '../../consts.js';
@@ -58,6 +60,9 @@ let DatabaseHeaderColumn = (() => {
     let _column_decorators;
     let _column_initializers = [];
     let _column_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _grabStatus_decorators;
     let _grabStatus_initializers = [];
     let _grabStatus_extraInitializers = [];
@@ -68,9 +73,11 @@ let DatabaseHeaderColumn = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _column_decorators = [property({ attribute: false })];
+            _std_decorators = [consume({ context: stdContext })];
             _grabStatus_decorators = [property({ attribute: false })];
             _tableViewLogic_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _column_decorators, { kind: "accessor", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _grabStatus_decorators, { kind: "accessor", name: "grabStatus", static: false, private: false, access: { has: obj => "grabStatus" in obj, get: obj => obj.grabStatus, set: (obj, value) => { obj.grabStatus = value; } }, metadata: _metadata }, _grabStatus_initializers, _grabStatus_extraInitializers);
             __esDecorate(this, null, _tableViewLogic_decorators, { kind: "accessor", name: "tableViewLogic", static: false, private: false, access: { has: obj => "tableViewLogic" in obj, get: obj => obj.tableViewLogic, set: (obj, value) => { obj.tableViewLogic = value; } }, metadata: _metadata }, _tableViewLogic_initializers, _tableViewLogic_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -132,179 +139,141 @@ let DatabaseHeaderColumn = (() => {
         }
         popMenu(ele) {
             const enableNumberFormatting = this.tableViewManager.featureFlags$.value.enable_number_formatting;
-            popMenu(popupTargetFromElement(ele ?? this), {
-                options: {
-                    items: [
-                        inputConfig(this.column),
-                        typeConfig(this.column),
-                        // Number format begin
-                        ...(enableNumberFormatting
-                            ? [
-                                menu.subMenu({
-                                    name: 'Number Format',
-                                    hide: () => !this.column.dataUpdate ||
-                                        this.column.type$.value !== 'number',
-                                    options: {
-                                        items: [
-                                            numberFormatConfig(this.column),
-                                            ...numberFormats.map(format => {
-                                                const data = this.column.data$.value;
-                                                return menu.action({
-                                                    isSelected: data.format === format.type,
-                                                    prefix: html `<span
-                            style="font-size: var(--affine-font-base); scale: 1.2;"
-                            >${format.symbol}</span
-                          >`,
-                                                    name: format.label,
-                                                    select: () => {
-                                                        if (data.format === format.type)
-                                                            return;
-                                                        this.column.dataUpdate(() => ({
-                                                            format: format.type,
-                                                        }));
-                                                    },
-                                                });
-                                            }),
-                                        ],
-                                    },
-                                }),
-                            ]
-                            : []),
-                        // Number format end
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Hide In View',
-                                    prefix: ViewIcon(),
-                                    hide: () => !this.column.hideCanSet,
-                                    select: () => {
-                                        this.column.hideSet(true);
-                                    },
-                                }),
-                            ],
-                        }),
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Filter',
-                                    prefix: FilterIcon(),
-                                    select: () => this._addFilter(),
-                                }),
-                                menu.action({
-                                    name: 'Sort Ascending',
-                                    prefix: SortIcon(),
-                                    select: () => this._addSort(false),
-                                }),
-                                menu.action({
-                                    name: 'Sort Descending',
-                                    prefix: SortIcon(),
-                                    select: () => this._addSort(true),
-                                }),
-                            ],
-                        }),
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Insert Left Column',
-                                    prefix: InsertLeftIcon(),
-                                    select: () => {
-                                        this.tableViewManager.propertyAdd({
-                                            id: this.column.id,
-                                            before: true,
-                                        });
-                                        Promise.resolve()
-                                            .then(() => {
-                                            const pre = this.previousElementSibling?.previousElementSibling;
-                                            if (pre instanceof DatabaseHeaderColumn) {
-                                                pre.editTitle();
-                                                pre.scrollIntoView({
-                                                    inline: 'nearest',
-                                                    block: 'nearest',
-                                                });
-                                            }
-                                        })
-                                            .catch(console.error);
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Insert Right Column',
-                                    prefix: InsertRightIcon(),
-                                    select: () => {
-                                        this.tableViewManager.propertyAdd({
-                                            id: this.column.id,
-                                            before: false,
-                                        });
-                                        Promise.resolve()
-                                            .then(() => {
-                                            const next = this.nextElementSibling?.nextElementSibling;
-                                            if (next instanceof DatabaseHeaderColumn) {
-                                                next.editTitle();
-                                                next.scrollIntoView({
-                                                    inline: 'nearest',
-                                                    block: 'nearest',
-                                                });
-                                            }
-                                        })
-                                            .catch(console.error);
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Move Left',
-                                    prefix: MoveLeftIcon(),
-                                    hide: () => this.column.isFirst$.value,
-                                    select: () => {
-                                        const prev = this.column.prev$.value;
-                                        if (!prev) {
-                                            return;
+            popPropertyMenu(popupTargetFromElement(ele ?? this), this.column, {
+                wording: wordingOf(this.std),
+                afterType: [
+                    ...(enableNumberFormatting
+                        ? [
+                            menu.subMenu({
+                                name: 'Number Format',
+                                hide: () => !this.column.dataUpdate ||
+                                    this.column.type$.value !== 'number',
+                                options: {
+                                    items: [
+                                        numberFormatConfig(this.column),
+                                        ...numberFormats.map(format => {
+                                            const data = this.column.data$.value;
+                                            return menu.action({
+                                                isSelected: data.format === format.type,
+                                                prefix: html `<span
+                          style="font-size: var(--affine-font-base); scale: 1.2;"
+                          >${format.symbol}</span
+                        >`,
+                                                name: format.label,
+                                                select: () => {
+                                                    if (data.format === format.type)
+                                                        return;
+                                                    this.column.dataUpdate(() => ({
+                                                        format: format.type,
+                                                    }));
+                                                },
+                                            });
+                                        }),
+                                    ],
+                                },
+                            }),
+                        ]
+                        : []),
+                ],
+                beforeOperations: [
+                    menu.group({
+                        items: [
+                            menu.action({
+                                name: 'Filter',
+                                prefix: FilterIcon(),
+                                select: () => this._addFilter(),
+                            }),
+                            menu.action({
+                                name: 'Sort Ascending',
+                                prefix: SortIcon(),
+                                select: () => this._addSort(false),
+                            }),
+                            menu.action({
+                                name: 'Sort Descending',
+                                prefix: SortIcon(),
+                                select: () => this._addSort(true),
+                            }),
+                        ],
+                    }),
+                    menu.group({
+                        items: [
+                            menu.action({
+                                name: 'Insert Left Column',
+                                prefix: InsertLeftIcon(),
+                                select: () => {
+                                    this.tableViewManager.propertyAdd({
+                                        id: this.column.id,
+                                        before: true,
+                                    });
+                                    Promise.resolve()
+                                        .then(() => {
+                                        const pre = this.previousElementSibling?.previousElementSibling;
+                                        if (pre instanceof DatabaseHeaderColumn) {
+                                            pre.editTitle();
+                                            pre.scrollIntoView({
+                                                inline: 'nearest',
+                                                block: 'nearest',
+                                            });
                                         }
-                                        this.column.move({
-                                            id: prev.id,
-                                            before: true,
-                                        });
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Move Right',
-                                    prefix: MoveRightIcon(),
-                                    hide: () => this.column.isLast$.value,
-                                    select: () => {
-                                        const next = this.column.next$.value;
-                                        if (!next) {
-                                            return;
+                                    })
+                                        .catch(console.error);
+                                },
+                            }),
+                            menu.action({
+                                name: 'Insert Right Column',
+                                prefix: InsertRightIcon(),
+                                select: () => {
+                                    this.tableViewManager.propertyAdd({
+                                        id: this.column.id,
+                                        before: false,
+                                    });
+                                    Promise.resolve()
+                                        .then(() => {
+                                        const next = this.nextElementSibling?.nextElementSibling;
+                                        if (next instanceof DatabaseHeaderColumn) {
+                                            next.editTitle();
+                                            next.scrollIntoView({
+                                                inline: 'nearest',
+                                                block: 'nearest',
+                                            });
                                         }
-                                        this.column.move({
-                                            id: next.id,
-                                            before: false,
-                                        });
-                                    },
-                                }),
-                            ],
-                        }),
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Duplicate',
-                                    prefix: DuplicateIcon(),
-                                    hide: () => !this.column.canDuplicate,
-                                    select: () => {
-                                        this.column.duplicate?.();
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Delete',
-                                    prefix: DeleteIcon(),
-                                    hide: () => !this.column.canDelete,
-                                    select: () => {
-                                        this.column.delete?.();
-                                    },
-                                    class: {
-                                        'delete-item': true,
-                                    },
-                                }),
-                            ],
-                        }),
-                    ],
-                },
+                                    })
+                                        .catch(console.error);
+                                },
+                            }),
+                            menu.action({
+                                name: 'Move Left',
+                                prefix: MoveLeftIcon(),
+                                hide: () => this.column.isFirst$.value,
+                                select: () => {
+                                    const prev = this.column.prev$.value;
+                                    if (!prev) {
+                                        return;
+                                    }
+                                    this.column.move({
+                                        id: prev.id,
+                                        before: true,
+                                    });
+                                },
+                            }),
+                            menu.action({
+                                name: 'Move Right',
+                                prefix: MoveRightIcon(),
+                                hide: () => this.column.isLast$.value,
+                                select: () => {
+                                    const next = this.column.next$.value;
+                                    if (!next) {
+                                        return;
+                                    }
+                                    this.column.move({
+                                        id: next.id,
+                                        before: false,
+                                    });
+                                },
+                            }),
+                        ],
+                    }),
+                ],
             });
         }
         widthDragStart(event) {
@@ -385,6 +354,10 @@ let DatabaseHeaderColumn = (() => {
         #column_accessor_storage;
         get column() { return this.#column_accessor_storage; }
         set column(value) { this.#column_accessor_storage = value; }
+        #std_accessor_storage;
+        /** Absent outside an editor (a unit test): the menu reads English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         #grabStatus_accessor_storage;
         get grabStatus() { return this.#grabStatus_accessor_storage; }
         set grabStatus(value) { this.#grabStatus_accessor_storage = value; }
@@ -461,7 +434,8 @@ let DatabaseHeaderColumn = (() => {
                 this._clickColumn();
             };
             this.#column_accessor_storage = __runInitializers(this, _column_initializers, void 0);
-            this.#grabStatus_accessor_storage = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _grabStatus_initializers, 'grabEnd'));
+            this.#std_accessor_storage = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _std_initializers, void 0));
+            this.#grabStatus_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _grabStatus_initializers, 'grabEnd'));
             this.#tableViewLogic_accessor_storage = (__runInitializers(this, _grabStatus_extraInitializers), __runInitializers(this, _tableViewLogic_initializers, void 0));
             __runInitializers(this, _tableViewLogic_extraInitializers);
         }

package/dist/_pkgs/data-view/view-presets/table/pc/row/row.js

@@ -45,6 +45,7 @@ import { html } from 'lit/static-html.js';
 import { TableViewRowSelection, } from '../../selection.js';
 import { cellDivider } from '../../styles.js';
 import { isNewTabClick } from '../../../../core/utils/new-tab-click.js';
+import { paintRowColor, ROW_COLOR_PROPERTY, viewRowColor, } from '../../../../core/view/color-rules.js';
 import { openDetail, popRowMenu } from '../menu.js';
 let TableRowView = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
@@ -69,6 +70,10 @@ let TableRowView = (() => {
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = css `
+    /* A colour rule (ADR 0036) first, so the selection below still wins. */
+    .affine-database-block-row {
+      background-color: var(${unsafeCSS(ROW_COLOR_PROPERTY)}, transparent);
+    }
     .affine-database-block-row:has(.row-select-checkbox.selected) {
       background: var(--affine-primary-color-04);
     }
@@ -180,6 +185,7 @@ let TableRowView = (() => {
         }
         render() {
             const view = this.view;
+            paintRowColor(this, viewRowColor(view, this.rowId));
             return html `
       ${view.readonly$.value
                 ? nothing

package/dist/_pkgs/data-view/widget-presets/tools/presets/view-options/color-rules-menu.d.ts

@@ -0,0 +1,12 @@
+import { type PopupTarget } from '../../../../../affine-components/context-menu/index.js';
+import type { DataViewUILogicBase } from '../../../../core/index.js';
+import type { Wording } from '../../../../core/utils/wording.js';
+/** The list of a view's rules, in order, and "Add a color rule". */
+export declare function popColorRules(target: PopupTarget, dataViewLogic: DataViewUILogicBase, reopen: () => void, wording: Wording): void;
+/**
+ * One rule: its conditions (the view filter's editor), its colour (the
+ * options' palette), its place in the order, its removal. `back` is the
+ * rule list. A rule a peer removed meanwhile shows an empty condition and
+ * writes nothing (`colorRuleUpdate` finds no rule by that id).
+ */
+export declare function popColorRule(target: PopupTarget, dataViewLogic: DataViewUILogicBase, ruleId: string, back: () => void, wording: Wording): void;

package/dist/_pkgs/data-view/widget-presets/tools/presets/view-options/color-rules-menu.js

@@ -0,0 +1,206 @@
+import { menu, popMenu, popupTargetFromElement, subMenuMiddleware, } from '../../../../../affine-components/context-menu/index.js';
+import { TOOLBAR_DELETE } from '../../../../../affine-shared/services/index.js';
+import { ArrowDownSmallIcon, ArrowRightSmallIcon, ArrowUpSmallIcon, DeleteIcon, PlusIcon, } from '@blocksuite/icons/lit';
+import { computed } from '@preact/signals-core';
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { selectOptionColorGrid } from '../../../../core/component/tags/color-menu.js';
+import { selectOptionColors } from '../../../../core/component/tags/colors.js';
+import { popCreateFilter } from '../../../../core/filter/add-filter.js';
+import { emptyFilterGroup } from '../../../../core/filter/utils.js';
+import { colorRuleAdd, colorRuleDelete, colorRuleMove, colorRulePaint, colorRuleUpdate, viewColorRules, } from '../../../../core/view/color-rules.js';
+import { DATA_VIEW_COLOR_RULE, DATA_VIEW_COLOR_RULE_ADD_CONDITION, DATA_VIEW_COLOR_RULE_MOVE_DOWN, DATA_VIEW_COLOR_RULE_MOVE_UP, DATA_VIEW_COLOR_RULE_NO_CONDITION, DATA_VIEW_COLOR_RULES, DATA_VIEW_COLOR_RULES_ADD, } from '../../../../translations.js';
+/**
+ * The editor of a view's conditional colours (ADR 0036, labre PRD
+ * REQ-DB-10): a view setting, opened from the view settings menu and from
+ * the full page's "This view" (`openViewSetting(…, 'color-rules')`). Made of
+ * what the view's filter and an option's colour already use, nothing drawn
+ * anew: the rule list is a menu, a rule's condition is edited by the view
+ * filter's own `<filter-root-view>` and `popCreateFilter`, its colour picked
+ * from the select options' swatch grid (`selectOptionColorGrid`).
+ */
+function swatch(color) {
+    const paint = colorRulePaint(color);
+    return html ` <div
+    style=${styleMap({
+        backgroundColor: paint ?? 'transparent',
+        border: paint ? 'none' : '1px dashed var(--affine-border-color)',
+        boxSizing: 'border-box',
+        borderRadius: '50%',
+        width: '20px',
+        height: '20px',
+        flexShrink: '0',
+    })}
+  ></div>`;
+}
+/** The property names a rule reads, in the order its conditions name them. */
+function ruleSummary(filter, vars, wording) {
+    const names = [];
+    const walk = (condition) => {
+        if (condition.type === 'group') {
+            condition.conditions.forEach(walk);
+            return;
+        }
+        const name = vars.find(v => v.id === condition.left.name)?.name;
+        if (name && !names.includes(name))
+            names.push(name);
+    };
+    filter.conditions.forEach(walk);
+    return names.length
+        ? names.join(', ')
+        : wording(DATA_VIEW_COLOR_RULE_NO_CONDITION);
+}
+function colorName(color, wording) {
+    const item = selectOptionColors.find(entry => entry.color === colorRulePaint(color));
+    if (!item)
+        return '';
+    return item.wording ? wording(item.wording) : item.name;
+}
+/** The list of a view's rules, in order, and "Add a color rule". */
+export function popColorRules(target, dataViewLogic, reopen, wording) {
+    const view = dataViewLogic.view;
+    const rules = viewColorRules(view.manager.dataSource.viewDataGet(view.id));
+    const self = () => popColorRules(target, dataViewLogic, reopen, wording);
+    popMenu(target, {
+        options: {
+            title: { text: wording(DATA_VIEW_COLOR_RULES), onBack: reopen },
+            items: [
+                menu.group({
+                    items: rules.map(rule => menu.action({
+                        name: ruleSummary(rule.filter, view.vars$.value, wording),
+                        prefix: swatch(rule.color),
+                        postfix: html `<div style="font-size: 14px;">
+                  ${colorName(rule.color, wording)}
+                </div>
+                ${ArrowRightSmallIcon()}`,
+                        testId: 'dv-color-rule',
+                        select: () => {
+                            popColorRule(target, dataViewLogic, rule.id, self, wording);
+                        },
+                    })),
+                }),
+                menu.group({
+                    items: [
+                        menu.action({
+                            name: wording(DATA_VIEW_COLOR_RULES_ADD),
+                            prefix: PlusIcon(),
+                            testId: 'dv-color-rule-add',
+                            select: () => {
+                                popCreateFilter(target, {
+                                    vars: view.vars$,
+                                    onBack: self,
+                                    onSelect: filter => {
+                                        const id = colorRuleAdd(view, filter);
+                                        if (id)
+                                            popColorRule(target, dataViewLogic, id, self, wording);
+                                    },
+                                });
+                            },
+                        }),
+                    ],
+                }),
+            ],
+        },
+    });
+}
+/**
+ * One rule: its conditions (the view filter's editor), its colour (the
+ * options' palette), its place in the order, its removal. `back` is the
+ * rule list. A rule a peer removed meanwhile shows an empty condition and
+ * writes nothing (`colorRuleUpdate` finds no rule by that id).
+ */
+export function popColorRule(target, dataViewLogic, ruleId, back, wording) {
+    const view = dataViewLogic.view;
+    const dataSource = view.manager.dataSource;
+    const rule$ = computed(() => viewColorRules(dataSource.viewDataGet(view.id)).find(rule => rule.id === ruleId));
+    const filter$ = computed(() => rule$.value?.filter ?? emptyFilterGroup);
+    const setFilter = (filter) => {
+        colorRuleUpdate(view, ruleId, { filter });
+    };
+    const self = () => popColorRule(target, dataViewLogic, ruleId, back, wording);
+    const rules = viewColorRules(dataSource.viewDataGet(view.id));
+    const index = rules.findIndex(rule => rule.id === ruleId);
+    popMenu(target, {
+        options: {
+            title: { text: wording(DATA_VIEW_COLOR_RULE), onBack: back },
+            items: [
+                menu.group({
+                    items: [
+                        () => html `<filter-root-view
+                data-testid="dv-color-rule-conditions"
+                .onBack="${back}"
+                .vars="${view.vars$}"
+                .filterGroup="${filter$}"
+                .onChange="${setFilter}"
+              ></filter-root-view>`,
+                    ],
+                }),
+                menu.group({
+                    items: [
+                        menu.action({
+                            name: wording(DATA_VIEW_COLOR_RULE_ADD_CONDITION),
+                            prefix: PlusIcon(),
+                            select: ele => {
+                                popCreateFilter(popupTargetFromElement(ele), {
+                                    vars: view.vars$,
+                                    onSelect: filter => {
+                                        const value = filter$.peek();
+                                        setFilter({
+                                            ...value,
+                                            conditions: [...value.conditions, filter],
+                                        });
+                                    },
+                                }, { middleware: subMenuMiddleware });
+                                return false;
+                            },
+                        }),
+                    ],
+                }),
+                menu.group({
+                    name: 'color',
+                    items: selectOptionColorGrid({
+                        current: colorRulePaint(rule$.peek()?.color ?? ''),
+                        say: wording,
+                        std: dataViewLogic.root.dataViewRenderer?.std,
+                        select: color => {
+                            colorRuleUpdate(view, ruleId, { color });
+                            self();
+                        },
+                    }),
+                }),
+                menu.group({
+                    items: [
+                        menu.action({
+                            name: wording(DATA_VIEW_COLOR_RULE_MOVE_UP),
+                            prefix: ArrowUpSmallIcon(),
+                            hide: () => index <= 0,
+                            select: () => {
+                                colorRuleMove(view, ruleId, -1);
+                                self();
+                            },
+                        }),
+                        menu.action({
+                            name: wording(DATA_VIEW_COLOR_RULE_MOVE_DOWN),
+                            prefix: ArrowDownSmallIcon(),
+                            hide: () => index < 0 || index >= rules.length - 1,
+                            select: () => {
+                                colorRuleMove(view, ruleId, 1);
+                                self();
+                            },
+                        }),
+                        menu.action({
+                            name: wording(TOOLBAR_DELETE),
+                            prefix: DeleteIcon(),
+                            class: { 'delete-item': true },
+                            testId: 'dv-color-rule-delete',
+                            select: () => {
+                                colorRuleDelete(view, ruleId);
+                                back();
+                            },
+                        }),
+                    ],
+                }),
+            ],
+        },
+    });
+}