From 6184bf21e28e67b25f50b31e19f1e327efa78a92 Mon Sep 17 00:00:00 2001 From: Nathan Marrs Date: Wed, 11 Oct 2023 00:53:56 +0200 Subject: [PATCH] Canvas: Add standard text config options to button element (#76160) Co-authored-by: Adela Almasan --- .betterer.results | 4 - public/app/features/canvas/element.ts | 3 +- .../app/features/canvas/elements/button.tsx | 74 +++++++++++++++---- .../features/canvas/elements/rectangle.tsx | 29 ++++---- 4 files changed, 79 insertions(+), 31 deletions(-) diff --git a/.betterer.results b/.betterer.results index 115753f74addc..0f4e3f641939c 100644 --- a/.betterer.results +++ b/.betterer.results @@ -2907,10 +2907,6 @@ exports[`better eslint`] = { [0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "2"] ], - "public/app/features/canvas/elements/rectangle.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "public/app/features/canvas/elements/server/server.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "1"], diff --git a/public/app/features/canvas/element.ts b/public/app/features/canvas/element.ts index e156860313ae2..b7b0bf069dd34 100644 --- a/public/app/features/canvas/element.ts +++ b/public/app/features/canvas/element.ts @@ -91,4 +91,5 @@ export interface CanvasElementItem extends RegistryI export const defaultBgColor = '#D9D9D9'; export const defaultTextColor = '#000000'; -export const defaultThemeTextColor = config.theme2.colors.text.primary; +export const defaultLightTextColor = '#F0F4FD'; +export const defaultThemeTextColor = config.theme2.colors.background.primary; diff --git a/public/app/features/canvas/elements/button.tsx b/public/app/features/canvas/elements/button.tsx index 981bc02b36a3a..e0f3f46f3bf80 100644 --- a/public/app/features/canvas/elements/button.tsx +++ b/public/app/features/canvas/elements/button.tsx @@ -3,26 +3,26 @@ import React, { PureComponent } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { PluginState } from '@grafana/data/src'; -import { TextDimensionConfig, TextDimensionMode } from '@grafana/schema'; +import { TextDimensionMode } from '@grafana/schema'; import { Button, stylesFactory } from '@grafana/ui'; import { config } from 'app/core/config'; import { DimensionContext } from 'app/features/dimensions/context'; +import { ColorDimensionEditor } from 'app/features/dimensions/editors'; import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor'; import { APIEditor, APIEditorConfig } from 'app/plugins/panel/canvas/editor/element/APIEditor'; import { ButtonStyleConfig, ButtonStyleEditor } from 'app/plugins/panel/canvas/editor/element/ButtonStyleEditor'; import { callApi } from 'app/plugins/panel/canvas/editor/element/utils'; import { HttpRequestMethod } from 'app/plugins/panel/canvas/panelcfg.gen'; -import { CanvasElementItem, CanvasElementProps } from '../element'; +import { CanvasElementItem, CanvasElementProps, defaultLightTextColor } from '../element'; +import { Align, TextConfig, TextData } from '../types'; -interface ButtonData { - text?: string; +interface ButtonData extends Omit { api?: APIEditorConfig; style?: ButtonStyleConfig; } -interface ButtonConfig { - text?: TextDimensionConfig; +interface ButtonConfig extends Omit { api?: APIEditorConfig; style?: ButtonStyleConfig; } @@ -61,9 +61,16 @@ class ButtonDisplay extends PureComponent ({ button: css({ - position: 'absolute', height: '100%', width: '100%', + display: 'grid', + + '> span': { + display: 'inline-grid', + textAlign: data?.align, + fontSize: `${data?.size}px`, + color: data?.color, + }, }), })); @@ -80,8 +87,8 @@ export const buttonItem: CanvasElementItem = { display: ButtonDisplay, defaultSize: { - width: 78, - height: 32, + width: 150, + height: 45, }, getNewOptions: (options) => ({ @@ -91,6 +98,11 @@ export const buttonItem: CanvasElementItem = { mode: TextDimensionMode.Fixed, fixed: 'Button', }, + align: Align.Center, + color: { + fixed: defaultLightTextColor, + }, + size: 14, api: defaultApiConfig, style: defaultStyleConfig, }, @@ -124,10 +136,16 @@ export const buttonItem: CanvasElementItem = { const data: ButtonData = { text: cfg?.text ? ctx.getText(cfg.text).value() : '', + align: cfg.align ?? Align.Center, + size: cfg.size, api: getCfgApi(), style: cfg?.style ?? defaultStyleConfig, }; + if (cfg.color) { + data.color = ctx.getColor(cfg.color).value(); + } + return data; }, @@ -135,6 +153,13 @@ export const buttonItem: CanvasElementItem = { registerOptionsUI: (builder) => { const category = ['Button']; builder + .addCustomEditor({ + category, + id: 'styleSelector', + path: 'config.style', + name: 'Style', + editor: ButtonStyleEditor, + }) .addCustomEditor({ category, id: 'textSelector', @@ -144,10 +169,33 @@ export const buttonItem: CanvasElementItem = { }) .addCustomEditor({ category, - id: 'styleSelector', - path: 'config.style', - name: 'Style', - editor: ButtonStyleEditor, + id: 'config.color', + path: 'config.color', + name: 'Text color', + editor: ColorDimensionEditor, + settings: {}, + defaultValue: {}, + }) + .addRadio({ + category, + path: 'config.align', + name: 'Align text', + settings: { + options: [ + { value: Align.Left, label: 'Left' }, + { value: Align.Center, label: 'Center' }, + { value: Align.Right, label: 'Right' }, + ], + }, + defaultValue: Align.Left, + }) + .addNumberInput({ + category, + path: 'config.size', + name: 'Text size', + settings: { + placeholder: 'Auto', + }, }) .addCustomEditor({ category, diff --git a/public/app/features/canvas/elements/rectangle.tsx b/public/app/features/canvas/elements/rectangle.tsx index af9d427b84810..4f0f515dc1a54 100644 --- a/public/app/features/canvas/elements/rectangle.tsx +++ b/public/app/features/canvas/elements/rectangle.tsx @@ -15,6 +15,7 @@ class RectangleDisplay extends PureComponent {data?.text} @@ -22,21 +23,23 @@ class RectangleDisplay extends PureComponent ({ - container: css` - position: absolute; - height: 100%; - width: 100%; - display: table; - `, - span: css` - display: table-cell; - vertical-align: ${data?.valign}; - text-align: ${data?.align}; - font-size: ${data?.size}px; - color: ${data?.color}; - `, + container: css({ + position: 'absolute', + height: '100%', + width: '100%', + display: 'table', + }), + span: css({ + display: 'table-cell', + verticalAlign: data?.valign, + textAlign: data?.align, + fontSize: `${data?.size}px`, + color: data?.color, + }), })); + export const rectangleItem: CanvasElementItem = { id: 'rectangle', name: 'Rectangle',