From 7f6df7d562f6a642f8f58bf1163081828c3d82e9 Mon Sep 17 00:00:00 2001 From: Beka Westberg Date: Tue, 23 Aug 2022 18:18:33 +0000 Subject: [PATCH] chore: format css (#6373) * chore: format css * chore: convert css to templates * chore: disable clang-formatting geras css * chore: clang format --- core/renderers/common/constants.ts | 65 +++++++++++++--- core/renderers/geras/constants.ts | 23 +++--- core/renderers/zelos/constants.ts | 116 +++++++++++++++-------------- 3 files changed, 127 insertions(+), 77 deletions(-) diff --git a/core/renderers/common/constants.ts b/core/renderers/common/constants.ts index 51cc3b3af..013db3a0c 100644 --- a/core/renderers/common/constants.ts +++ b/core/renderers/common/constants.ts @@ -1081,32 +1081,77 @@ export class ConstantProvider { /* eslint-disable indent */ /* clang-format off */ // Text. - selector + ' .blocklyText, ', selector + ' .blocklyFlyoutLabelText {', 'font: ' + this.FIELD_TEXT_FONTWEIGHT + ' ' + this.FIELD_TEXT_FONTSIZE + 'pt ' + this.FIELD_TEXT_FONTFAMILY + ';', '}', + `${selector} .blocklyText, `, + `${selector} .blocklyFlyoutLabelText {`, + `font: ${this.FIELD_TEXT_FONTWEIGHT} ` + + `${this.FIELD_TEXT_FONTSIZE}pt ${this.FIELD_TEXT_FONTFAMILY};`, + `}`, // Fields. - selector + ' .blocklyText {', 'fill: #fff;', '}', selector + ' .blocklyNonEditableText>rect,', selector + ' .blocklyEditableText>rect {', 'fill: ' + this.FIELD_BORDER_RECT_COLOUR + ';', 'fill-opacity: .6;', 'stroke: none;', '}', selector + ' .blocklyNonEditableText>text,', selector + ' .blocklyEditableText>text {', 'fill: #000;', '}', + `${selector} .blocklyText {`, + `fill: #fff;`, + `}`, + `${selector} .blocklyNonEditableText>rect,`, + `${selector} .blocklyEditableText>rect {`, + `fill: ${this.FIELD_BORDER_RECT_COLOUR};`, + `fill-opacity: .6;`, + `stroke: none;`, + `}`, + `${selector} .blocklyNonEditableText>text,`, + `${selector} .blocklyEditableText>text {`, + `fill: #000;`, + `}`, // Flyout labels. - selector + ' .blocklyFlyoutLabelText {', 'fill: #000;', '}', + `${selector} .blocklyFlyoutLabelText {`, + `fill: #000;`, + `}`, // Bubbles. - selector + ' .blocklyText.blocklyBubbleText {', 'fill: #000;', '}', + `${selector} .blocklyText.blocklyBubbleText {`, + `fill: #000;`, + `}`, // Editable field hover. - selector + ' .blocklyEditableText:not(.editing):hover>rect {', 'stroke: #fff;', 'stroke-width: 2;', '}', + `${selector} .blocklyEditableText:not(.editing):hover>rect {`, + `stroke: #fff;`, + `stroke-width: 2;`, + `}`, // Text field input. - selector + ' .blocklyHtmlInput {', 'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';', 'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';', '}', // Selection highlight. - selector + ' .blocklySelected>.blocklyPath {', 'stroke: #fc3;', 'stroke-width: 3px;', '}', + `${selector} .blocklyHtmlInput {`, + `font-family: ${this.FIELD_TEXT_FONTFAMILY};`, + `font-weight: ${this.FIELD_TEXT_FONTWEIGHT};`, + `}`, + + // Selection highlight. + `${selector} .blocklySelected>.blocklyPath {`, + `stroke: #fc3;`, + `stroke-width: 3px;`, + `}`, // Connection highlight. - selector + ' .blocklyHighlightedConnectionPath {', 'stroke: #fc3;', '}', + `${selector} .blocklyHighlightedConnectionPath {`, + `stroke: #fc3;`, + `}`, // Replaceable highlight. - selector + ' .blocklyReplaceable .blocklyPath {', 'fill-opacity: .5;', '}', selector + ' .blocklyReplaceable .blocklyPathLight,', selector + ' .blocklyReplaceable .blocklyPathDark {', 'display: none;', '}', + `${selector} .blocklyReplaceable .blocklyPath {`, + `fill-opacity: .5;`, + `}`, + `${selector} .blocklyReplaceable .blocklyPathLight,`, + `${selector} .blocklyReplaceable .blocklyPathDark {`, + `display: none;`, + `}`, // Insertion marker. - selector + ' .blocklyInsertionMarker>.blocklyPath {', 'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';', 'stroke: none;', '}']; + `${selector} .blocklyInsertionMarker>.blocklyPath {`, + `fill-opacity: ${this.INSERTION_MARKER_OPACITY};`, + `stroke: none;`, + `}`, + /* clang-format on */ + /* eslint-enable indent */ + ]; } } /* clang-format on */ diff --git a/core/renderers/geras/constants.ts b/core/renderers/geras/constants.ts index d4f997a41..d9ca0538c 100644 --- a/core/renderers/geras/constants.ts +++ b/core/renderers/geras/constants.ts @@ -46,16 +46,17 @@ export class ConstantProvider extends BaseConstantProvider { } override getCSS_(selector: string) { - return super.getCSS_(selector) - .concat(/* eslint-enable indent */ - [ - /* eslint-disable indent */ - // Insertion marker. - selector + ' .blocklyInsertionMarker>.blocklyPathLight,', - selector + ' .blocklyInsertionMarker>.blocklyPathDark {', - 'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';', - 'stroke: none;', - '}', - ]); + return super.getCSS_(selector).concat([ + /* eslint-disable indent */ + /* clang-format off */ + // Insertion marker. + `${selector} .blocklyInsertionMarker>.blocklyPathLight,`, + `${selector} .blocklyInsertionMarker>.blocklyPathDark {`, + `fill-opacity: ${this.INSERTION_MARKER_OPACITY};`, + `stroke: none;`, + '}', + /* clang-format on */ + /* eslint-enable indent */ + ]); } } diff --git a/core/renderers/zelos/constants.ts b/core/renderers/zelos/constants.ts index fbc98ef5a..04c71a80e 100644 --- a/core/renderers/zelos/constants.ts +++ b/core/renderers/zelos/constants.ts @@ -780,78 +780,82 @@ export class ConstantProvider extends BaseConstantProvider { return [ /* eslint-disable indent */ // Text. - selector + ' .blocklyText,', - selector + ' .blocklyFlyoutLabelText {', - 'font: ' + this.FIELD_TEXT_FONTWEIGHT + ' ' + this.FIELD_TEXT_FONTSIZE + - 'pt ' + this.FIELD_TEXT_FONTFAMILY + ';', - '}', + `${selector} .blocklyText,`, + `${selector} .blocklyFlyoutLabelText {`, + `font: ${this.FIELD_TEXT_FONTWEIGHT} ${this.FIELD_TEXT_FONTSIZE}` + + `pt ${this.FIELD_TEXT_FONTFAMILY};`, + `}`, // Fields. - selector + ' .blocklyText {', - 'fill: #fff;', - '}', - selector + ' .blocklyNonEditableText>rect:not(.blocklyDropdownRect),', - selector + ' .blocklyEditableText>rect:not(.blocklyDropdownRect) {', - 'fill: ' + this.FIELD_BORDER_RECT_COLOUR + ';', - '}', - selector + ' .blocklyNonEditableText>text,', - selector + ' .blocklyEditableText>text,', - selector + ' .blocklyNonEditableText>g>text,', - selector + ' .blocklyEditableText>g>text {', - 'fill: #575E75;', - '}', // Flyout labels. - selector + ' .blocklyFlyoutLabelText {', - 'fill: #575E75;', - '}', + `${selector} .blocklyText {`, + `fill: #fff;`, + `}`, + `${selector} .blocklyNonEditableText>rect:not(.blocklyDropdownRect),`, + `${selector} .blocklyEditableText>rect:not(.blocklyDropdownRect) {`, + `fill: ${this.FIELD_BORDER_RECT_COLOUR};`, + `}`, + `${selector} .blocklyNonEditableText>text,`, + `${selector} .blocklyEditableText>text,`, + `${selector} .blocklyNonEditableText>g>text,`, + `${selector} .blocklyEditableText>g>text {`, + `fill: #575E75;`, + `}`, + + // Flyout labels. + `${selector} .blocklyFlyoutLabelText {`, + `fill: #575E75;`, + `}`, // Bubbles. - selector + ' .blocklyText.blocklyBubbleText {', - 'fill: #575E75;', - '}', + `${selector} .blocklyText.blocklyBubbleText {`, + `fill: #575E75;`, + `}`, // Editable field hover. - selector + ' .blocklyDraggable:not(.blocklyDisabled)', - ' .blocklyEditableText:not(.editing):hover>rect,', - selector + ' .blocklyDraggable:not(.blocklyDisabled)', - ' .blocklyEditableText:not(.editing):hover>.blocklyPath {', - 'stroke: #fff;', - 'stroke-width: 2;', - '}', + `${selector} .blocklyDraggable:not(.blocklyDisabled)`, + ` .blocklyEditableText:not(.editing):hover>rect,`, + `${selector} .blocklyDraggable:not(.blocklyDisabled)`, + ` .blocklyEditableText:not(.editing):hover>.blocklyPath {`, + `stroke: #fff;`, + `stroke-width: 2;`, + `}`, // Text field input. - selector + ' .blocklyHtmlInput {', - 'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';', - 'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';', - 'color: #575E75;', - '}', + `${selector} .blocklyHtmlInput {`, + `font-family: ${this.FIELD_TEXT_FONTFAMILY};`, + `font-weight: ${this.FIELD_TEXT_FONTWEIGHT};`, + `color: #575E75;`, + `}`, // Dropdown field. - selector + ' .blocklyDropdownText {', - 'fill: #fff !important;', - '}', // Widget and Dropdown Div - selector + '.blocklyWidgetDiv .goog-menuitem,', - selector + '.blocklyDropDownDiv .goog-menuitem {', - 'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';', - '}', - selector + '.blocklyDropDownDiv .goog-menuitem-content {', - 'color: #fff;', - '}', + `${selector} .blocklyDropdownText {`, + `fill: #fff !important;`, + `}`, + + // Widget and Dropdown Div + `${selector}.blocklyWidgetDiv .goog-menuitem,`, + `${selector}.blocklyDropDownDiv .goog-menuitem {`, + `font-family: ${this.FIELD_TEXT_FONTFAMILY};`, + `}`, + `${selector}.blocklyDropDownDiv .goog-menuitem-content {`, + `color: #fff;`, + `}`, // Connection highlight. - selector + ' .blocklyHighlightedConnectionPath {', - 'stroke: ' + this.SELECTED_GLOW_COLOUR + ';', - '}', + `${selector} .blocklyHighlightedConnectionPath {`, + `stroke: ${this.SELECTED_GLOW_COLOUR};`, + `}`, // Disabled outline paths. - selector + ' .blocklyDisabled > .blocklyOutlinePath {', - 'fill: url(#blocklyDisabledPattern' + this.randomIdentifier + ')', - '}', + `${selector} .blocklyDisabled > .blocklyOutlinePath {`, + `fill: url(#blocklyDisabledPattern${this.randomIdentifier})`, + `}`, // Insertion marker. - selector + ' .blocklyInsertionMarker>.blocklyPath {', - 'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';', - 'stroke: none;', - '}', + `${selector} .blocklyInsertionMarker>.blocklyPath {`, + `fill-opacity: ${this.INSERTION_MARKER_OPACITY};`, + `stroke: none;`, + `}`, ]; } }