From a6c7e0664577cf5dad2f00b083a3f0b72276cc81 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Thu, 7 Nov 2024 14:57:06 +0300 Subject: [PATCH] #6008 Refactoring search component (#6026) * #6008 Refactoring search component Fixes #6008 * rename main search class * #6008 fixed styles * #6008 - fixed toolbox search color * #6008 - fix toolbox search placeholder text * #6008 remove search from toolbox styles * #6008 fix propertygrid search placeholder * #6008 fix search clear button size --- functionalTests/designer/toolbox.ts | 6 +- .../src/angular-ui.module.ts | 2 +- .../survey-creator-angular/src/angular-ui.ts | 2 +- .../src/components/search.component.html | 13 ++ .../search.component.ts | 0 .../src/side-bar/search.component.html | 13 -- .../src/components/search-manager.ts | 54 ++++++ .../src/components/search.scss | 74 ++++++++ .../components/toolbox/toolbox-animation.scss | 2 +- .../src/components/toolbox/toolbox-right.scss | 2 +- .../toolbox/toolbox-search-manager.ts | 24 +++ .../components/toolbox/toolbox-search.scss | 45 +++++ .../src/components/toolbox/toolbox.scss | 36 +--- .../survey-creator-core/src/entries/index.ts | 4 + .../blocks/spg-question.scss | 33 ++++ .../blocks/spg-search-editor.scss | 167 +++++------------- .../src/property-grid/search-manager.ts | 93 ++-------- packages/survey-creator-core/src/toolbox.ts | 2 +- .../property-grid/search-manager.tests.ts | 2 +- .../src/{side-bar => components}/search.html | 10 +- .../src/{side-bar => components}/search.ts | 0 .../src/entries/index.ts | 2 +- .../src/{side-bar => components}/Search.tsx | 10 +- .../survey-creator-react/src/entries/index.ts | 2 +- .../src/side-bar/PropertyGrid.tsx | 2 +- .../src/toolbox/AdaptiveToolbox.tsx | 2 +- .../src/{side-bar => components}/Search.vue | 10 +- packages/survey-creator-vue/src/index.ts | 2 +- .../tests/designer/side-bar.ts | 12 +- 29 files changed, 335 insertions(+), 291 deletions(-) create mode 100644 packages/survey-creator-angular/src/components/search.component.html rename packages/survey-creator-angular/src/{side-bar => components}/search.component.ts (100%) delete mode 100644 packages/survey-creator-angular/src/side-bar/search.component.html create mode 100644 packages/survey-creator-core/src/components/search-manager.ts create mode 100644 packages/survey-creator-core/src/components/search.scss create mode 100644 packages/survey-creator-core/src/components/toolbox/toolbox-search-manager.ts create mode 100644 packages/survey-creator-core/src/components/toolbox/toolbox-search.scss rename packages/survey-creator-knockout/src/{side-bar => components}/search.html (62%) rename packages/survey-creator-knockout/src/{side-bar => components}/search.ts (100%) rename packages/survey-creator-react/src/{side-bar => components}/Search.tsx (81%) rename packages/survey-creator-vue/src/{side-bar => components}/Search.vue (79%) diff --git a/functionalTests/designer/toolbox.ts b/functionalTests/designer/toolbox.ts index 02e0835339..b0dbd3b386 100644 --- a/functionalTests/designer/toolbox.ts +++ b/functionalTests/designer/toolbox.ts @@ -460,10 +460,10 @@ test("toolbox search in compact mode - clear but do not close", async (t) => { await t .click(".svc-toolbox__search-button") - .typeText(".spg-search-editor_input", "d") - .expect(Selector(".spg-search-editor_input").value).eql("d") + .typeText(".svc-search__input", "d") + .expect(Selector(".svc-search__input").value).eql("d") .expect(Selector(".svc-toolbox").hasClass("svc-toolbox--flyout")).ok() .click(".svc-toolbox #svd-grid-search-close") - .expect(Selector(".spg-search-editor_input").value).eql("") + .expect(Selector(".svc-search__input").value).eql("") .expect(Selector(".svc-toolbox").hasClass("svc-toolbox--flyout")).ok(); }); \ No newline at end of file diff --git a/packages/survey-creator-angular/src/angular-ui.module.ts b/packages/survey-creator-angular/src/angular-ui.module.ts index 0df792fc7d..9f2d84b08b 100644 --- a/packages/survey-creator-angular/src/angular-ui.module.ts +++ b/packages/survey-creator-angular/src/angular-ui.module.ts @@ -21,7 +21,7 @@ import { SidebarHeaderComponent } from "./side-bar/side-bar-header.component"; import { ObjectSelectorComponent } from "./side-bar/object-selector.component"; import { PropertyGridComponent } from "./side-bar/property-grid.component"; -import { SearchComponent } from "./side-bar/search.component"; +import { SearchComponent } from "./components/search.component"; import { TextareaJsonEditorComponent } from "./tabs/json/json-editor-textarea.component"; import { AceJsonEditorComponent } from "./tabs/json/json-editor-ace.component"; import { LogicTabComponent } from "./tabs/logic/logic.component"; diff --git a/packages/survey-creator-angular/src/angular-ui.ts b/packages/survey-creator-angular/src/angular-ui.ts index a444dfb3a1..c13ff1acd9 100644 --- a/packages/survey-creator-angular/src/angular-ui.ts +++ b/packages/survey-creator-angular/src/angular-ui.ts @@ -18,7 +18,7 @@ export * from "./side-bar/side-bar-header.component"; export * from "./side-bar/object-selector.component"; export * from "./side-bar/property-grid.component"; -export * from "./side-bar/search.component"; +export * from "./components/search.component"; export * from "./tabs/json/json-editor-textarea.component"; export * from "./tabs/json/json-editor-ace.component"; export * from "./tabs/logic/logic.component"; diff --git a/packages/survey-creator-angular/src/components/search.component.html b/packages/survey-creator-angular/src/components/search.component.html new file mode 100644 index 0000000000..44bd00e686 --- /dev/null +++ b/packages/survey-creator-angular/src/components/search.component.html @@ -0,0 +1,13 @@ + +
+
+ +
+ +
+
{{model.matchCounterText}}
+ +
+
+ \ No newline at end of file diff --git a/packages/survey-creator-angular/src/side-bar/search.component.ts b/packages/survey-creator-angular/src/components/search.component.ts similarity index 100% rename from packages/survey-creator-angular/src/side-bar/search.component.ts rename to packages/survey-creator-angular/src/components/search.component.ts diff --git a/packages/survey-creator-angular/src/side-bar/search.component.html b/packages/survey-creator-angular/src/side-bar/search.component.html deleted file mode 100644 index a6611b988d..0000000000 --- a/packages/survey-creator-angular/src/side-bar/search.component.html +++ /dev/null @@ -1,13 +0,0 @@ - -
-
- -
- -
-
{{model.matchCounterText}}
- -
-
- \ No newline at end of file diff --git a/packages/survey-creator-core/src/components/search-manager.ts b/packages/survey-creator-core/src/components/search-manager.ts new file mode 100644 index 0000000000..41ad7b3484 --- /dev/null +++ b/packages/survey-creator-core/src/components/search-manager.ts @@ -0,0 +1,54 @@ +import { Action, ActionContainer, Base, ComputedUpdater, property } from "survey-core"; +import { getLocString } from "../editorLocalization"; + +export abstract class SearchManager extends Base { + public searchActionBar: ActionContainer = new ActionContainer(); + public get filterStringPlaceholder(): string { return this.getFilterStringPlaceholder(); } + @property() filterString: string; + @property() isVisible: boolean; + @property() matchCounterText: string; + + protected getSearchActions() { + return [new Action({ + id: "svd-grid-search-close", + iconName: "icon-clear_16x16", + component: "sv-action-bar-item", + title: getLocString("ed.clear"), + showTitle: false, + iconSize: "auto", + disableTabStop: true, + innerCss: "svc-search__bar-item", + visible: new ComputedUpdater(() => !!this.filterString), + action: () => { + this.clearFilterString(); + } + })]; + } + initActionBar() { + this.searchActionBar.setItems(this.getSearchActions()); + } + public clearFilterString(): void { + this.filterString = ""; + } + + protected abstract setFiterString(newValue: string, oldValue: string); + protected abstract getFilterStringPlaceholder(): string; + + protected onPropertyValueChanged(name: string, oldValue: any, newValue: any) { + super.onPropertyValueChanged(name, oldValue, newValue); + + if (name === "filterString") { + this.setFiterString(newValue, oldValue); + } + } + + constructor() { + super(); + this.initActionBar(); + } + + dispose(): void { + this.searchActionBar.dispose(); + super.dispose(); + } +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/components/search.scss b/packages/survey-creator-core/src/components/search.scss new file mode 100644 index 0000000000..fc90a64a6c --- /dev/null +++ b/packages/survey-creator-core/src/components/search.scss @@ -0,0 +1,74 @@ +@import "../variables.scss"; +.svc-search { + // TODO remove v2 + --sjs-general-forecolor: rgba(0, 0, 0, 0.91); + --sjs-general-forecolor-light: rgba(0, 0, 0, 0.45); +} + +.svc-search { + display: flex; + align-items: center; +} + +.svc-search__input { + @include textEllipsis; + @include ctrSmallBoldFont; + + border: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + display: block; + background: transparent; + box-sizing: border-box; + outline: none; + padding: 0; + width: 0; + flex-grow: 1; +} + +.svc-creator--mobile .svc-search__input { + $fontSize: var(--ctr-font-small-size, #{calcSize(1.5)}); + font-size: Max(16px, #{$fontSize}); +} + + +.svc-search__toolbar { + display: flex; + gap: var(--ctr-search-toolbar-gap, calcSize(1.5)); + justify-content: flex-end; + align-items: center; + flex-shrink: 0; +} + +.svc-search__toolbar .sv-action-bar { + gap: var(--ctr-search-toolbar-gap, calcSize(0.5)); + margin: 0; + flex-shrink: 0; +} + +.svc-search__toolbar .sv-action--hidden { + display: none; +} + +.svc-search__toolbar .svc-search__bar-item { + height: min-content; + margin: 0; + border-radius: var(--ctr-search-button-corner-radius); + padding: var(--ctr-search-button-padding-vertical, calcSize(0.5)) + var(--ctr-search-button-padding-horizontal, calcSize(0.5)) var(--ctr-search-button-padding-vertical, calcSize(0.5)) + var(--ctr-search-button-padding-horizontal, calcSize(0.5)); + border-radius: 100px; + + .sv-svg-icon { + width: var(--ctr-search-button-icon-width, calcSize(2)); + height: var(--ctr-search-button-icon-height, calcSize(2)); + } +} + +.svc-search__toolbar-counter { + @include ctrSmallBoldFont; + display: flex; + flex-shrink: 0; +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss b/packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss index 22e51d2f75..b3b1088816 100644 --- a/packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss +++ b/packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss @@ -74,7 +74,7 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0); } .svc-toolbox__item-submenu-button, .svc-toolbox__item-title, - .spg-search-editor_input { + .svc-search__input { animation-duration: var(--fade-animation-duration); animation-delay: var(--fade-animation-delay); animation-direction: var(--animation-direction); diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox-right.scss b/packages/survey-creator-core/src/components/toolbox/toolbox-right.scss index 0babf5c096..87d925e384 100644 --- a/packages/survey-creator-core/src/components/toolbox/toolbox-right.scss +++ b/packages/survey-creator-core/src/components/toolbox/toolbox-right.scss @@ -19,7 +19,7 @@ } .svc-creator__toolbox--right { .sv-popup__body-content, - .spg-search-editor_container + .svc-search { direction: initial; } diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox-search-manager.ts b/packages/survey-creator-core/src/components/toolbox/toolbox-search-manager.ts new file mode 100644 index 0000000000..b501e3f100 --- /dev/null +++ b/packages/survey-creator-core/src/components/toolbox/toolbox-search-manager.ts @@ -0,0 +1,24 @@ +import { property } from "survey-core"; +import { getLocString } from "../../editorLocalization"; + +import { QuestionToolbox } from "../../toolbox"; +import { SearchManager } from "../search-manager"; + +export class SearchManagerToolbox extends SearchManager { + @property() toolbox: QuestionToolbox; + protected getFilterStringPlaceholder(): string { return getLocString("ed.toolboxFilteredTextPlaceholder"); } + protected setFiterString(newValue: string, oldValue: string) { + this.toolbox.showSeparators = !newValue; + this.toolbox.items.forEach(item => item.visible = item.hasText(newValue)); + this.toolbox.showPlaceholder = !this.toolbox.items.filter(i => i.visible).length; + this.toolbox.categories.forEach(category => { + category.forceExpand = !!newValue; + category.empty = category.items.filter(item => item.visible).length == 0; + }); + } + + public clearFilterString(): void { + this.filterString = ""; + this.toolbox.rootElement.querySelector("input").focus(); + } +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox-search.scss b/packages/survey-creator-core/src/components/toolbox/toolbox-search.scss new file mode 100644 index 0000000000..6a682fa328 --- /dev/null +++ b/packages/survey-creator-core/src/components/toolbox/toolbox-search.scss @@ -0,0 +1,45 @@ +@import "../../variables.scss"; + +.svc-toolbox { + .svc-search { + padding-top: var(--ctr-toolbox-search-padding-top, calcSize(2.5)); + padding-inline-end: var(--ctr-toolbox-search-padding-right, calcSize(2)); + padding-bottom: var(--ctr-toolbox-search-padding-bottom, calcSize(2.5)); + padding-inline-start: var(--ctr-toolbox-search-padding-left, calcSize(3)); + gap: var(--ctr-toolbox-search-gap, calcSize(1)); + height: unset; + + width: unset; + flex-grow: 1; + border-bottom: none; + } + + .svc-search__input { + color: var(--ctr-toolbox-search-text-color, $foreground); + } + .svc-search__input::placeholder { + color: var(--ctr-toolbox-search-text-color-placeholder, $foreground-light); + } + .svc-search__bar-item { + &:hover:enabled { + background-color: var(--ctr-toolbox-search-clear-button-background-color-hovered, $red-light); + svg use { + fill: var(--ctr-toolbox-search-clear-button-icon-color-hovered, $red); + } + } + } + + .svc-search__search-icon { + width: var(--ctr-toolbox-search-icon-width, calcSize(3)); + height: var(--ctr-toolbox-search-icon-height, calcSize(3)); + + .sv-svg-icon { + width: var(--ctr-toolbox-search-icon-width, calcSize(3)); + height: var(--ctr-toolbox-search-icon-height, calcSize(3)); + + use { + fill: var(--ctr-toolbox-search-icon-color, $foreground-light); + } + } + } +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox.scss b/packages/survey-creator-core/src/components/toolbox/toolbox.scss index 643692c09c..e2bc82a27f 100644 --- a/packages/survey-creator-core/src/components/toolbox/toolbox.scss +++ b/packages/survey-creator-core/src/components/toolbox/toolbox.scss @@ -46,38 +46,6 @@ svc-toolbox { height: 100%; display: flex; flex-direction: column; - .spg-search-editor_container { - background: var(--ctr-toolbox-background-color, $background-dim); - padding-top: var(--ctr-toolbox-search-padding-top, calcSize(2.5)); - padding-inline-end: var(--ctr-toolbox-search-padding-right, calcSize(2)); - padding-bottom: var(--ctr-toolbox-search-padding-bottom, calcSize(2.5)); - padding-inline-start: var(--ctr-toolbox-search-padding-left, calcSize(3)); - height: unset; - - width: unset; - flex-grow: 1; - border-bottom: none; - } - - .spg-search-editor_input { - width: 0; - flex-grow: 1; - } - - .spg-search-editor_toolbar-counter { - display: none; - } - - .spg-search-editor_bar-item.sv-action-bar-item:not(.sv-action-bar-item--pressed) { - &:hover:enabled { - background-color: var(--ctr-toolbox-search-clear-button-background-color-hovered, $red-light); - border-radius: 100px; - - svg use { - fill: var(--ctr-toolbox-search-clear-button-icon-color-hovered, $red); - } - } - } } .svc-toolbox__panel { @@ -165,7 +133,7 @@ svc-toolbox { var(--ctr-toolbox-padding-bottom, calcSize(2)) var(--ctr-toolbox-group-padding-left-compact, calcSize(1.5)); pointer-events: none; } - .spg-search-editor_container { + .svc-search { opacity: 0; position: absolute; } @@ -205,7 +173,7 @@ svc-toolbox { overflow: visible; border-inline-end: var(--ctr-toolbox-border-width-right, 0px) solid transparent; - .spg-search-editor_container { + .svc-search { opacity: 1; position: relative; } diff --git a/packages/survey-creator-core/src/entries/index.ts b/packages/survey-creator-core/src/entries/index.ts index 840ed46672..24a6044df0 100644 --- a/packages/survey-creator-core/src/entries/index.ts +++ b/packages/survey-creator-core/src/entries/index.ts @@ -39,6 +39,7 @@ export * from "../components/tabs/logic-plugin"; export * from "../components/tabs/logic-theme"; export * from "../components/toolbox/toolbox-tool"; +export * from "../components/toolbox/toolbox-search-manager"; export * from "../components/page-navigator/page-navigator"; export * from "../components/page"; export * from "../components/row"; @@ -55,6 +56,7 @@ export * from "../components/header/logo-image"; export * from "../components/string-editor"; export * from "../components/embedded-survey"; export * from "../components/link-value"; +export * from "../components/search-manager"; export * from "../editorLocalization"; export * from "../json5"; @@ -105,6 +107,7 @@ export * from "../presets/presets-tabs"; export * from "../presets/presets-toolbox"; export * from "../survey-elements"; +require("../components/search.scss"); require("../components/property-panel/property-panel-item.scss"); require("../components/property-panel/property-panel.scss"); require("../components/tabbed-menu/tabbed-menu-item.scss"); @@ -112,6 +115,7 @@ require("../components/tabbed-menu/tabbed-menu.scss"); require("../components/toolbox/toolbox-tool.scss"); require("../components/question-dropdown.scss"); require("../components/toolbox/toolbox.scss"); +require("../components/toolbox/toolbox-search.scss"); require("../components/toolbox/toolbox-right.scss"); require("../components/toolbox/toolbox-animation.scss"); require("../components/side-bar/side-bar.scss"); diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss index 6b4e350b3e..f709d8d637 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss @@ -187,3 +187,36 @@ sv-question-error { } } } + +.spg-question--highlighted { + .spg-input, + .spg-input-container, + .spg-question--location--left, + .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input { + box-shadow: 0 0 0 2px $secondary; + } + + .spg-checkbox__control:focus + .spg-checkbox__rectangle, + .spg-matrixdynamic__content.spg-text__content { + outline: 2px solid $secondary; + outline-offset: -2px; + + .spg-input { + box-shadow: none; + } + } + + .svc-action-button { + background-color: $secondary-light; + } + + .sv-button-group { + box-shadow: 0 0 0 1px $secondary; + border-color: $secondary; + } + + .spg-checkbox__control + .spg-checkbox__rectangle { + outline: 2px solid $secondary; + outline-offset: -2px; + } +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-search-editor.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-search-editor.scss index 4d4d825e15..6f00940684 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-search-editor.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-search-editor.scss @@ -1,137 +1,50 @@ -.spg-editor--highlighted { - .spg-input, - .spg-input-container, - .spg-question--location--left, - .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input { - box-shadow: 0 0 0 2px $secondary; +@import "../variables.scss"; +.svc-side-bar { + .svc-search { + border-bottom: 1px solid var(--ctr-property-grid-search-border-color, $border); + background: var(--ctr-property-grid-search-background-color, $background-dim); + gap: var(--ctr-property-grid-search-gap, calcSize(1)); + + padding: var(--ctr-property-grid-search-padding-top, calcSize(2)) + var(--ctr-property-grid-search-padding-right, calcSize(2)) + var(--ctr-property-grid-search-padding-bottom, calcSize(2)) + var(--ctr-property-grid-search-padding-left, calcSize(2)); } - - .spg-checkbox__control:focus + .spg-checkbox__rectangle, - .spg-matrixdynamic__content.spg-text__content { - outline: 2px solid $secondary; - outline-offset: -2px; - - .spg-input { - box-shadow: none; - } + + .svc-search__input { + color: var(--ctr-property-grid-search-text-color, $foreground); } - - .svc-action-button { - background-color: $secondary-light; + + .svc-search__input::placeholder { + color: var(--ctr-property-grid-search-text-color-placeholder, $foreground-light); } - - .sv-button-group { - box-shadow: 0 0 0 1px $secondary; - border-color: $secondary; + + .svc-search__bar-item:not(.sv-action-bar-item--pressed) { + &:hover:enabled, + &:focus:enabled { + background-color: var(--ctr-property-grid-search-button-background-color-hovered, $background-dim); + } } - - .spg-checkbox__control + .spg-checkbox__rectangle { - outline: 2px solid $secondary; - outline-offset: -2px; + + .svc-search__toolbar .sv-action-bar-item__icon use { + fill: var(--ctr-property-grid-search-button-icon-color, $foreground-light); } -} - -.spg-search-editor_container { - // TODO remove v2 - --sjs-general-forecolor: rgba(0, 0, 0, 0.91); - --sjs-general-forecolor-light: rgba(0, 0, 0, 0.45); -} - -.spg-search-editor_container { - border-bottom: 1px solid var(--ctr-property-grid-search-border-color, $border); - background: var(--ctr-property-grid-search-background-color, $background-dim); - display: flex; - align-items: center; - gap: var(--ctr-property-grid-search-gap, calcSize(1)); - - padding: var(--ctr-property-grid-search-padding-top, calcSize(2)) - var(--ctr-property-grid-search-padding-right, calcSize(2)) - var(--ctr-property-grid-search-padding-bottom, calcSize(2)) - var(--ctr-property-grid-search-padding-left, calcSize(2)); -} - -.spg-search-editor_input { - @include textEllipsis; - @include ctrSmallBoldFont; - - color: var(--ctr-property-grid-search-text-color, $foreground); - border: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - display: block; - background: transparent; - box-sizing: border-box; - width: 100%; - outline: none; - padding: 0; -} - -.svc-creator--mobile .spg-search-editor_input { - $fontSize: var(--ctr-font-small-size, #{calcSize(1.5)}); - font-size: Max(16px, #{$fontSize}); -} - -.spg-search-editor_input::placeholder { - color: var(--ctr-property-grid-search-text-color-placeholder, $foreground-light); -} - -.spg-search-editor_toolbar { - display: flex; - gap: var(--ctr-search-toolbar-gap, calcSize(1.5)); - justify-content: flex-end; - align-items: center; - flex-shrink: 0; -} - -.spg-search-editor_toolbar .sv-action-bar { - gap: var(--ctr-search-toolbar-gap, calcSize(0.5)); - margin: 0; - flex-shrink: 0; -} - -.spg-search-editor_toolbar .sv-action--hidden { - display: none; -} - -.spg-search-editor_toolbar .spg-search-editor_bar-item { - height: min-content; - margin: 0; - border-radius: var(--ctr-search-button-corner-radius); - padding: var(--ctr-search-button-padding-vertical, calcSize(0.5)) - var(--ctr-search-button-padding-horizontal, calcSize(0.5)) var(--ctr-search-button-padding-vertical, calcSize(0.5)) - var(--ctr-search-button-padding-horizontal, calcSize(0.5)); -} - -.spg-search-editor_bar-item:not(.sv-action-bar-item--pressed) { - &:hover:enabled, - &:focus:enabled { - background-color: var(--ctr-property-grid-search-button-background-color-hovered, $background-dim); + + .svc-search__toolbar-counter { + color: var(--ctr-property-grid-search-count-text-color, $foreground-light); } -} - -.spg-search-editor_toolbar .sv-action-bar-item__icon use { - fill: var(--ctr-property-grid-search-button-icon-color, $foreground-light); -} - -.spg-search-editor_toolbar-counter { - @include ctrSmallBoldFont; - color: var(--ctr-property-grid-search-count-text-color, $foreground-light); - display: flex; - flex-shrink: 0; -} - -.spg-search-editor_search-icon { - width: var(--ctr-property-grid-search-icon-width, calcSize(3)); - height: var(--ctr-property-grid-search-icon-height, calcSize(3)); - - .sv-svg-icon { + + .svc-search__search-icon { width: var(--ctr-property-grid-search-icon-width, calcSize(3)); height: var(--ctr-property-grid-search-icon-height, calcSize(3)); - - use { - fill: var(--ctr-property-grid-search-icon-color, $foreground-light); + + .sv-svg-icon { + width: var(--ctr-property-grid-search-icon-width, calcSize(3)); + height: var(--ctr-property-grid-search-icon-height, calcSize(3)); + + use { + fill: var(--ctr-property-grid-search-icon-color, $foreground-light); + } } } -} +} \ No newline at end of file diff --git a/packages/survey-creator-core/src/property-grid/search-manager.ts b/packages/survey-creator-core/src/property-grid/search-manager.ts index 88db4efb60..b14f2a8f0d 100644 --- a/packages/survey-creator-core/src/property-grid/search-manager.ts +++ b/packages/survey-creator-core/src/property-grid/search-manager.ts @@ -1,80 +1,9 @@ -import { Action, ActionContainer, Base, ComputedUpdater, IElement, Question, SurveyModel, property, settings } from "survey-core"; +import { Action, ComputedUpdater, IElement, Question, SurveyModel, property, settings } from "survey-core"; import { getLocString } from "../editorLocalization"; import { scrollElementIntoView } from "../utils/utils"; -import { QuestionToolbox } from "../toolbox"; - -export abstract class SearchManager extends Base { - public searchActionBar: ActionContainer = new ActionContainer(); - public get filterStringPlaceholder(): string { return this.getFilterStringPlaceholder(); } - @property() filterString: string; - @property() isVisible: boolean; - @property() matchCounterText: string; - - protected getSearchActions() { - return [new Action({ - id: "svd-grid-search-close", - iconName: "icon-clear_16x16", - component: "sv-action-bar-item", - title: getLocString("ed.clear"), - showTitle: false, - iconSize: 16, - disableTabStop: true, - innerCss: "spg-search-editor_bar-item", - visible: new ComputedUpdater(() => !!this.filterString), - action: () => { - this.clearFilterString(); - } - })]; - } - initActionBar() { - this.searchActionBar.setItems(this.getSearchActions()); - } - public clearFilterString(): void { - this.filterString = ""; - } - - protected abstract setFiterString(newValue: string, oldValue: string); - protected abstract getFilterStringPlaceholder(): string; - - protected onPropertyValueChanged(name: string, oldValue: any, newValue: any) { - super.onPropertyValueChanged(name, oldValue, newValue); - - if (name === "filterString") { - this.setFiterString(newValue, oldValue); - } - } - - constructor() { - super(); - this.initActionBar(); - } - - dispose(): void { - this.searchActionBar.dispose(); - super.dispose(); - } -} - -export class SearchManagerToolbox extends SearchManager { - @property() toolbox: QuestionToolbox; - protected setFiterString(newValue: string, oldValue: string) { - this.toolbox.showSeparators = !newValue; - this.toolbox.items.forEach(item => item.visible = item.hasText(newValue)); - this.toolbox.showPlaceholder = !this.toolbox.items.filter(i => i.visible).length; - this.toolbox.categories.forEach(category => { - category.forceExpand = !!newValue; - category.empty = category.items.filter(item => item.visible).length == 0; - }); - } - protected getFilterStringPlaceholder(): string { return getLocString("ed.toolboxFilteredTextPlaceholder"); } - public clearFilterString(): void { - this.filterString = ""; - this.toolbox.rootElement.querySelector("input").focus(); - } -} - +import { SearchManager } from "../components/search-manager"; export class SearchManagerPropertyGrid extends SearchManager { - private highlightedEditorClass = " spg-editor--highlighted"; + private highlightedEditorClass = " spg-question--highlighted"; private currentMatchIndex: number; private currentMatch: Question; @@ -87,7 +16,7 @@ export class SearchManagerPropertyGrid extends SearchManager { private expandAllParents(element: IElement) { if (!element) return; - if((element).page && (element).survey) { + if ((element).page && (element).survey) { (element).survey.currentPage = (element).page; } if (element.isCollapsed) { @@ -113,9 +42,9 @@ export class SearchManagerPropertyGrid extends SearchManager { } private updatedMatchCounterText(index: number) { const count = this.allMatches.length; - if(count === 1) { + if (count === 1) { this.matchCounterText = ""; - } else if(this.currentMatch) { + } else if (this.currentMatch) { const value = index + 1; this.matchCounterText = [value, count].join("/"); } else { @@ -138,7 +67,7 @@ export class SearchManagerPropertyGrid extends SearchManager { const visibleQuestions = this.survey.getAllQuestions().filter(q => q.isVisible); return visibleQuestions.filter(q => { let srcString = q.name + "|" + q.title + "|" + q.description; - if(!!srcString) { + if (!!srcString) { srcString = normalize(srcString, "search"); srcString = srcString.toLocaleLowerCase().trim(); } @@ -146,13 +75,13 @@ export class SearchManagerPropertyGrid extends SearchManager { }); } protected setFiterString(newValue: string, oldValue: string) { - if(!newValue) { + if (!newValue) { this.reset(); return; } this.allMatches = this.getAllMatches(newValue); - if(this.allMatches.length === 0) { + if (this.allMatches.length === 0) { this.reset(); return; } @@ -179,7 +108,7 @@ export class SearchManagerPropertyGrid extends SearchManager { title: getLocString("ed.nextFocus"), showTitle: false, iconSize: 16, - innerCss: "spg-search-editor_bar-item", + innerCss: "svc-search__bar-item", visible: new ComputedUpdater(() => this.allMatches.length > 1), action: () => { if (this.allMatches.length > 0) { @@ -195,7 +124,7 @@ export class SearchManagerPropertyGrid extends SearchManager { title: getLocString("ed.prevFocus"), showTitle: false, iconSize: 16, - innerCss: "spg-search-editor_bar-item", + innerCss: "svc-search__bar-item", visible: new ComputedUpdater(() => this.allMatches.length > 1), action: () => { if (this.allMatches.length > 0) { diff --git a/packages/survey-creator-core/src/toolbox.ts b/packages/survey-creator-core/src/toolbox.ts index 7e31dd64ff..3cd83caa04 100644 --- a/packages/survey-creator-core/src/toolbox.ts +++ b/packages/survey-creator-core/src/toolbox.ts @@ -25,7 +25,7 @@ import { SurveyCreatorModel, toolboxLocationType } from "./creator-base"; import { editorLocalization, getLocString } from "./editorLocalization"; import { settings } from "./creator-settings"; import { DragDropSurveyElements } from "./survey-elements"; -import { SearchManagerToolbox } from "./property-grid/search-manager"; +import { SearchManagerToolbox } from "./components/toolbox/toolbox-search-manager"; export type overflowBehaviorType = "hideInMenu" | "scroll"; diff --git a/packages/survey-creator-core/tests/property-grid/search-manager.tests.ts b/packages/survey-creator-core/tests/property-grid/search-manager.tests.ts index 9943f4d90f..cf346c35c8 100644 --- a/packages/survey-creator-core/tests/property-grid/search-manager.tests.ts +++ b/packages/survey-creator-core/tests/property-grid/search-manager.tests.ts @@ -23,7 +23,7 @@ function createSurvey(): SurveyModel { }); } function getHighlightedEditors(survey: SurveyModel) { - const highlightedEditorClass = "spg-editor--highlighted"; + const highlightedEditorClass = "spg-question--highlighted"; return survey.getAllQuestions().filter(q => q.getRootCss().indexOf(highlightedEditorClass) !== -1); } test("SearchManager init state", () => { diff --git a/packages/survey-creator-knockout/src/side-bar/search.html b/packages/survey-creator-knockout/src/components/search.html similarity index 62% rename from packages/survey-creator-knockout/src/side-bar/search.html rename to packages/survey-creator-knockout/src/components/search.html index 91065f1bb7..14ad62db2e 100644 --- a/packages/survey-creator-knockout/src/side-bar/search.html +++ b/packages/survey-creator-knockout/src/components/search.html @@ -1,13 +1,13 @@ -
-
+
+
- -
-
+
+
diff --git a/packages/survey-creator-knockout/src/side-bar/search.ts b/packages/survey-creator-knockout/src/components/search.ts similarity index 100% rename from packages/survey-creator-knockout/src/side-bar/search.ts rename to packages/survey-creator-knockout/src/components/search.ts diff --git a/packages/survey-creator-knockout/src/entries/index.ts b/packages/survey-creator-knockout/src/entries/index.ts index 9983fb737f..2c9d0a8a01 100644 --- a/packages/survey-creator-knockout/src/entries/index.ts +++ b/packages/survey-creator-knockout/src/entries/index.ts @@ -45,7 +45,7 @@ export * from "../custom-questions/boolean-switch"; export * from "../page-navigator/page-navigator"; export * from "../page-navigator/page-navigator-item"; export * from "../side-bar/object-selector"; -export * from "../side-bar/search"; +export * from "../components/search"; export * from "../side-bar/property-grid"; export * from "../side-bar/side-bar"; export * from "../side-bar/side-bar-default-header"; diff --git a/packages/survey-creator-react/src/side-bar/Search.tsx b/packages/survey-creator-react/src/components/Search.tsx similarity index 81% rename from packages/survey-creator-react/src/side-bar/Search.tsx rename to packages/survey-creator-react/src/components/Search.tsx index f6c93f6557..36773c3dd3 100644 --- a/packages/survey-creator-react/src/side-bar/Search.tsx +++ b/packages/survey-creator-react/src/components/Search.tsx @@ -31,17 +31,17 @@ export class SearchComponent extends SurveyElementBase -
+
+
- -
-
{(this.model as any).matchCounterText}
+
+
{(this.model as any).matchCounterText}
); diff --git a/packages/survey-creator-react/src/entries/index.ts b/packages/survey-creator-react/src/entries/index.ts index a406f741b1..0b9349fa7e 100644 --- a/packages/survey-creator-react/src/entries/index.ts +++ b/packages/survey-creator-react/src/entries/index.ts @@ -61,7 +61,7 @@ export * from "../tabs/SurveySimulator"; export * from "../events"; export * from "../side-bar/ObjectSelector"; export * from "../side-bar/PropertyGrid"; -export * from "../side-bar/Search"; +export * from "../components/Search"; export * from "../Switcher"; export * from "../tabs/JsonErrorItem"; diff --git a/packages/survey-creator-react/src/side-bar/PropertyGrid.tsx b/packages/survey-creator-react/src/side-bar/PropertyGrid.tsx index 69b1f91bad..69187a69de 100644 --- a/packages/survey-creator-react/src/side-bar/PropertyGrid.tsx +++ b/packages/survey-creator-react/src/side-bar/PropertyGrid.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { PropertyGridViewModel, SearchManager } from "survey-creator-core"; import { Base, SurveyModel, settings } from "survey-core"; import { Survey, SurveyElementBase, ReactQuestionFactory, SurveyQuestionButtonGroup, ReactElementFactory, SvgIcon, SurveyActionBar } from "survey-react-ui"; -import { SearchComponent } from "./Search"; +import { SearchComponent } from "../components/Search"; interface IPropertyGridComponentProps { model: PropertyGridViewModel; diff --git a/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx b/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx index 652c776895..cd994ff47c 100644 --- a/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx +++ b/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx @@ -3,7 +3,7 @@ import { VerticalResponsivityManager } from "survey-core"; import { ReactElementFactory } from "survey-react-ui"; import { ISurveyCreatorToolboxProps, Toolbox } from "./Toolbox"; import { SurveyCreatorToolboxTool } from "./ToolboxItem"; -import { SearchComponent } from "../side-bar/Search"; +import { SearchComponent } from "../components/Search"; export class AdaptiveToolbox extends Toolbox { private manager: VerticalResponsivityManager; diff --git a/packages/survey-creator-vue/src/side-bar/Search.vue b/packages/survey-creator-vue/src/components/Search.vue similarity index 79% rename from packages/survey-creator-vue/src/side-bar/Search.vue rename to packages/survey-creator-vue/src/components/Search.vue index c2cfb0c3a0..5e42e36df0 100644 --- a/packages/survey-creator-vue/src/side-bar/Search.vue +++ b/packages/survey-creator-vue/src/components/Search.vue @@ -1,6 +1,6 @@