diff --git a/docs/spec.md b/docs/spec.md index be60ffa0..dd92167b 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -145,10 +145,15 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; #### MonacoParams -| Property | Type | Required | Description | -| :------- | :------- | :------: | :--------------------------- | -| language | `string` | yes | Syntax highlighting language | -| fontSize | `string` | | Font size | +| Property | Type | Required | Description | +| :--------------------- | :------- | :------: | :--------------------------- | +| language | `string` | yes | Syntax highlighting language | +| fontSize | `string` | | Font size | +| headerIconSize | `number` | | Size of the header icon | +| headerIconIndent | `number` | | Indent of the header icon | +| headerTitleVariant | `string` | | Variant of the header title | +| headerDialogButtonSize | `string` | | Size of the dialog button | +| headerDialogIconSize | `number` | | Size of the dialog icon | #### OneOfParams diff --git a/docs/styles.md b/docs/styles.md index 8746df8d..f8872ea7 100644 --- a/docs/styles.md +++ b/docs/styles.md @@ -393,11 +393,14 @@ Variables for the Checkbox Group View component: Variables for the Monaco Input View component: -| Variable | Default Value | Description | -| :--------------------------------------- | :-----------: | :----------------------------- | -| `--df-monaco-base-view-width` | `550px` | Width of the Monaco input view | -| `--df-monaco-view-dialog-footer-padding` | `16px` | Padding of the dialog footer | -| `--df-monaco-view-dialog-header-height` | `48px` | Height of the dialog header | +| Variable | Default Value | Description | +| :--------------------------------------- | :-----------: | :------------------------------- | +| `--df-monaco-base-view-width` | `550px` | Width of the Monaco input view | +| `--df-monaco-base-view-height` | `354px` | Height of the Monaco base view | +| `--df-monaco-view-dialog-footer-padding` | `16px` | Padding of the dialog footer | +| `--df-monaco-view-dialog-header-height` | `48px` | Height of the dialog header | +| `--df-monaco-view-dialog-width` | `966px` | Width of the Monaco view dialog | +| `--df-monaco-view-dialog-height` | `804px` | Height of the Monaco view dialog | --- diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts index 3f87c92f..28e330ab 100644 --- a/src/lib/core/types/specs.ts +++ b/src/lib/core/types/specs.ts @@ -1,4 +1,4 @@ -import type {AlertProps, LabelProps} from '@gravity-ui/uikit'; +import type {AlertProps, ButtonSize, LabelProps, TextProps} from '@gravity-ui/uikit'; import type {ColorTextBaseProps} from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText'; import type {ReadAsMethod, SpecTypes} from '../constants'; @@ -164,6 +164,11 @@ export interface StringSpec< monacoParams?: { language?: string; fontSize?: number; + headerIconSize?: number; + headerIconIndent?: number; + headerTitleVariant?: TextProps['variant']; + headerDialogButtonSize?: ButtonSize; + headerDialogIconSize?: number; }; hideValues?: string[]; placeholder?: string; diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss b/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss index f7633144..ed865ebe 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss @@ -8,4 +8,9 @@ align-items: center; background-color: var(--g-color-base-float-hover); box-sizing: border-box; + + &__title { + display: flex; + align-items: center; + } } diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.tsx b/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.tsx index c215e4b8..56640e3d 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.tsx +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {File} from '@gravity-ui/icons'; -import {Icon, Text} from '@gravity-ui/uikit'; +import {Icon, Text, type TextProps} from '@gravity-ui/uikit'; import {block} from '../../../utils'; @@ -10,16 +10,27 @@ import './MonacoHeader.scss'; const b = block('monaco-header'); interface MonacoHeaderProps { - language?: string; - editButton?: React.ReactNode; + language: string; + dialogButton?: React.ReactNode; + headerIconSize: number; + headerIconIndent: number; + headerTitleVariant: TextProps['variant']; } -export const MonacoHeader: React.FC = ({language, editButton}) => ( +export const MonacoHeader: React.FC = ({ + language, + dialogButton, + headerIconSize, + headerIconIndent, + headerTitleVariant, +}) => (
-
- - {language} +
+
+ +
+ {language}
- {editButton ?? null} + {dialogButton ?? null}
); diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss index a499c6dc..a567cf3f 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss @@ -5,10 +5,11 @@ height: var(--df-monaco-input-height, 354px); &__container { - height: 100%; + height: calc(100% - 2px); display: flex; flex-direction: column; border: 1px solid var(--g-color-line-generic); + box-sizing: content-box; } &__editor { diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.tsx b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.tsx index e7ac75d3..509d713e 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.tsx +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.tsx @@ -34,7 +34,15 @@ export const MonacoInputBase: React.FC = ({ const {monacoParams, disabled, layoutTitle} = spec.viewSpec; - const {language, fontSize} = monacoParams ?? {language: 'plaintext', fontSize: 11}; + const { + language = 'plaintext', + fontSize = 11, + headerIconSize = 18, + headerIconIndent = 5, + headerTitleVariant = 'body-2', + headerDialogButtonSize = 'm', + headerDialogIconSize = 16, + } = monacoParams || {}; const [monacoEditorDialog, setMonacoEditorDialog] = React.useState(false); @@ -45,14 +53,18 @@ export const MonacoInputBase: React.FC = ({ const dialogButton = React.useMemo(() => { if (!withoutDialog) { return ( - ); } return; - }, [withoutDialog, setMonacoEditorDialog, name]); + }, [withoutDialog, setMonacoEditorDialog, name, headerDialogButtonSize, headerDialogIconSize]); React.useEffect(() => onChange(monacoValue), [monacoValue]); @@ -65,7 +77,13 @@ export const MonacoInputBase: React.FC = ({ return (
- +
= ({ onChange={onChange} onClose={handleMonacoEditorDialogClose} MonacoComponent={MonacoComponent} + headerIconSize={headerIconSize} + headerIconIndent={headerIconIndent} + headerTitleVariant={headerTitleVariant} />
); diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss index 3f5fe014..aee298b1 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss @@ -12,10 +12,11 @@ } &__container { - height: 100%; + height: calc(100% - 2px); display: flex; flex-direction: column; border: 1px solid var(--g-color-line-generic); + box-sizing: content-box; } &__editor { diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx index 0f6364b6..54296318 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {Dialog} from '@gravity-ui/uikit'; +import {Dialog, type TextProps} from '@gravity-ui/uikit'; import type {MonacoEditorProps} from 'react-monaco-editor/lib/types'; import {useMonaco} from '../../../../core/components/Form/hooks'; @@ -18,13 +18,16 @@ interface MonacoInputDialogProps { name: string; visible: boolean; value: string; - language?: string; + language: string; title: string | undefined; fontSize: number | undefined; onChange: (value: string) => void; onClose: () => void; changeMonacoValue: (value: string) => void; MonacoComponent?: React.ComponentType; + headerIconSize: number; + headerIconIndent: number; + headerTitleVariant: TextProps['variant']; } export const MonacoInputDialog: React.FC = ({ @@ -38,6 +41,9 @@ export const MonacoInputDialog: React.FC = ({ changeMonacoValue, fontSize, MonacoComponent, + headerIconSize, + headerIconIndent, + headerTitleVariant, }) => { const MonacoEditor = useMonaco() || MonacoComponent; @@ -57,7 +63,12 @@ export const MonacoInputDialog: React.FC = ({
- +
= ({value, spec}) => { +const MonacoBaseView: React.FC = ({value, spec, name}) => { const {monacoParams, layoutTitle} = spec.viewSpec; const MonacoEditor = useMonaco(); - const {language, fontSize} = monacoParams ?? {language: 'plaintext', fontSize: 12}; + const { + language = 'plaintext', + fontSize = 11, + headerIconSize = 18, + headerIconIndent = 5, + headerTitleVariant = 'body-2', + headerDialogButtonSize = 'm', + headerDialogIconSize = 16, + } = monacoParams || {}; const options = useMonacoOptions(fontSize, true); @@ -27,21 +35,36 @@ const MonacoBaseView: React.FC = ({value, spec}) => { const handleMonacoEditorDialogClose = React.useCallback(() => setMonacoEditorDialog(false), []); + const dialogButton = React.useMemo(() => { + return ( + + ); + }, [setMonacoEditorDialog, name, headerDialogButtonSize, headerDialogIconSize]); + if (!value || !MonacoEditor) { return null; } return (
- setMonacoEditorDialog(true)}> - - - } - /> - +
+ +
+ +
+
= ({value, spec}) => { visible={monacoEditorDialog} language={language} onClose={handleMonacoEditorDialogClose} + headerIconSize={headerIconSize} + headerIconIndent={headerIconIndent} + headerTitleVariant={headerTitleVariant} />
); diff --git a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss index b0c59780..7f1ccc7b 100644 --- a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss +++ b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss @@ -1,12 +1,23 @@ @import '../../../styles/variables.scss'; .#{$ns}monaco-view-dialog { + width: var(--df-monaco-view-dialog-width, 966px); + height: var(--df-monaco-view-dialog-height, 804px); + .g-dialog-footer { padding: var(--df-monaco-view-dialog-footer-padding, var(--g-spacing-4)); } &__container { + height: calc(100% - 2px); + display: flex; + flex-direction: column; border: 1px solid var(--g-color-line-generic); + box-sizing: content-box; + } + + &__editor { + flex: 1; } &__dialog-header { diff --git a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.tsx b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.tsx index 5086bb16..f556dcd5 100644 --- a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.tsx +++ b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {Dialog} from '@gravity-ui/uikit'; +import {Dialog, type TextProps} from '@gravity-ui/uikit'; import {useMonaco} from '../../../../core/components/View/hooks'; import i18n from '../../../i18n'; @@ -15,10 +15,13 @@ const b = block('monaco-view-dialog'); interface MonacoViewDialogProps { visible: boolean; value: string; - language?: string; + language: string; title: string | undefined; fontSize: number | undefined; onClose: () => void; + headerIconSize: number; + headerIconIndent: number; + headerTitleVariant: TextProps['variant']; } export const MonacoViewDialog: React.FC = ({ @@ -28,6 +31,9 @@ export const MonacoViewDialog: React.FC = ({ language, onClose, fontSize, + headerIconSize, + headerIconIndent, + headerTitleVariant, }) => { const MonacoEditor = useMonaco(); @@ -46,14 +52,15 @@ export const MonacoViewDialog: React.FC = ({
- - +
+ +