This is an automated email from the ASF dual-hosted git repository. amashenkov pushed a commit to branch gg-17462 in repository https://gitbox.apache.org/repos/asf/ignite.git
commit 86b691abe457ec53b5f0b62775b12f0a2d3d3dc6 Author: Ilya Borisov <[email protected]> AuthorDate: Wed Apr 24 15:57:32 2019 +0700 WC-930 Web Console: Use native select for "form-field-dropdown" component. --- .../components/queries-notebook/template.tpl.pug | 6 ++- .../modal-import-models/template.tpl.pug | 11 ++-- .../cache-edit-form/templates/memory.pug | 2 +- .../cluster-edit-form/templates/collision.pug | 2 +- .../cluster-edit-form/templates/load-balancing.pug | 1 + .../cluster-edit-form/templates/memory.pug | 1 + .../igfs-edit-form/templates/general.pug | 2 +- .../components/igfs-edit-form/templates/misc.pug | 2 +- .../components/model-edit-form/templates/query.pug | 4 +- .../frontend/app/configuration/services/Models.ts | 8 +-- .../frontend/app/configuration/types/index.ts | 11 +++- .../app/primitives/form-field/dropdown.pug | 60 +++++++++++++++------- .../frontend/app/primitives/form-field/index.scss | 45 +++++++++++----- 13 files changed, 105 insertions(+), 50 deletions(-) diff --git a/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/template.tpl.pug b/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/template.tpl.pug index ea7108b..d5f0276 100644 --- a/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/template.tpl.pug +++ b/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/template.tpl.pug @@ -77,7 +77,8 @@ mixin query-settings label: 'Rows per page:', model: 'paragraph.pageSize', name: '"pageSize" + paragraph.id', - options: 'pageSizesOptions' + options: 'pageSizesOptions', + inline: true }) .form-field--inline( @@ -89,7 +90,8 @@ mixin query-settings label: 'Max pages:', model: 'paragraph.maxPages', name: '"maxPages" + paragraph.id', - options: 'maxPages' + options: 'maxPages', + inline: true }) .form-field--inline( diff --git a/modules/web-console/frontend/app/configuration/components/modal-import-models/template.tpl.pug b/modules/web-console/frontend/app/configuration/components/modal-import-models/template.tpl.pug index 76d6a48..71bb3a8 100644 --- a/modules/web-console/frontend/app/configuration/components/modal-import-models/template.tpl.pug +++ b/modules/web-console/frontend/app/configuration/components/modal-import-models/template.tpl.pug @@ -130,16 +130,15 @@ mixin td-ellipses-lbl(w, lbl) .pc-form-grid-col-30 +form-field__dropdown({ label: 'Action:', - model: 'importCommon.action' - })( - bs-options='item.value as item.label for item in importActions' - ) + model: 'importCommon.action', + options: 'importActions' + }) .pc-form-grid-col-30 +form-field__dropdown({ label: 'Cache:', - model: 'importCommon.cacheOrTemplate' + model: 'importCommon.cacheOrTemplate', + options: 'importCommon.cachesOrTemplates' })( - bs-options='item.value as item.label for item in importCommon.cachesOrTemplates' ng-change='$ctrl.onCacheSelect(importCommon.cacheOrTemplate)' ) .pc-form-grid-col-60.pc-form-grid__text-only-item diff --git a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cache-edit-form/templates/memory.pug b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cache-edit-form/templates/memory.pug index a3504e5..657ccb6 100644 --- a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cache-edit-form/templates/memory.pug +++ b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cache-edit-form/templates/memory.pug @@ -148,7 +148,7 @@ panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`) name: '"offHeapMode"', required: `$ctrl.Caches.offHeapMode.required(${model})`, placeholder: '{{::$ctrl.Caches.offHeapMode.default}}', - options: '{{::$ctrl.Caches.offHeapModes}}', + options: '::$ctrl.Caches.offHeapModes', tip: `Off-heap storage mode <ul> <li>Disabled - Off-heap storage is disabled</li> diff --git a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/collision.pug b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/collision.pug index 24d7d3f..457389e 100644 --- a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/collision.pug +++ b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/collision.pug @@ -33,7 +33,7 @@ panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`) label:'CollisionSpi:', model: modelCollisionKind, name: '"collisionKind"', - placeholder: 'Choose discovery', + placeholder: 'Choose collision SPI', options: '[\ {value: "JobStealing", label: "Job stealing"},\ {value: "FifoQueue", label: "FIFO queue"},\ diff --git a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/load-balancing.pug b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/load-balancing.pug index 8728869..75c17a5 100644 --- a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/load-balancing.pug +++ b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/load-balancing.pug @@ -48,6 +48,7 @@ panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`) model: '$item.kind', name: '"loadBalancingKind"', required: true, + placeholder: 'Choose among the following...', options: '::$ctrl.Clusters.loadBalancingKinds', tip: `Provides the next best balanced node for job execution <ul> diff --git a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/memory.pug b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/memory.pug index ca25dd0..f9f69a1 100644 --- a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/memory.pug +++ b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/cluster-edit-form/templates/memory.pug @@ -37,6 +37,7 @@ ng-show='$ctrl.available(["2.0.0", "2.3.0"])' label: 'Page size:', model: `${model}.pageSize`, name: '"MemoryConfigurationPageSize"', + placeholder: 'Choose among the following...', options: `$ctrl.Clusters.memoryConfiguration.pageSize.values`, tip: 'Every memory region is split on pages of fixed size' }) diff --git a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/igfs-edit-form/templates/general.pug b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/igfs-edit-form/templates/general.pug index 0b03e7e..66fd2d8 100644 --- a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/igfs-edit-form/templates/general.pug +++ b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/igfs-edit-form/templates/general.pug @@ -46,7 +46,7 @@ panel-collapsible(opened=`::true` ng-form=form) model: `${model}.defaultMode`, name: '"defaultMode"', placeholder: '{{::$ctrl.IGFSs.defaultMode.default}}', - options: '{{::$ctrl.IGFSs.defaultMode.values}}', + options: '::$ctrl.IGFSs.defaultMode.values', tip: ` Mode to specify how IGFS interacts with Hadoop file system <ul> diff --git a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/igfs-edit-form/templates/misc.pug b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/igfs-edit-form/templates/misc.pug index 92fe130..3d58f03b 100644 --- a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/igfs-edit-form/templates/misc.pug +++ b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/igfs-edit-form/templates/misc.pug @@ -191,7 +191,7 @@ panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`) name: '"mode"', required: true, placeholder: 'Choose igfs mode', - options: '{{::$ctrl.IGFSs.defaultMode.values}}' + options: '::$ctrl.IGFSs.defaultMode.values' })( ng-model-options='{allowInvalid: true}' ) diff --git a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/model-edit-form/templates/query.pug b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/model-edit-form/templates/query.pug index b1df8db..089865b 100644 --- a/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/model-edit-form/templates/query.pug +++ b/modules/web-console/frontend/app/configuration/components/page-configure-advanced/components/model-edit-form/templates/query.pug @@ -264,7 +264,7 @@ panel-collapsible(ng-form=form opened=`!!${model}.queryMetadata`) model: `queryIndex.inlineSizeType`, name: '"InlineSizeKind"', placeholder: '{{::$ctrl.Models.inlineSizeType.default}}', - options: '{{::$ctrl.Models.inlineSizeTypes}}', + options: '::$ctrl.Models.inlineSizeTypes', tip: `Inline size <ul> <li>Auto - Determine inline size automatically</li> @@ -314,7 +314,7 @@ panel-collapsible(ng-form=form opened=`!!${model}.queryMetadata`) placeholder: `{{ ${queryFields}.length > 0 ? 'Choose index field' : 'No fields configured' }}`, options: queryFields })( - bs-options=`queryField.name as queryField.name for queryField in ${queryFields}` + ng-options=`queryField.name as queryField.name for queryField in ${queryFields}` ng-disabled=`${queryFields}.length === 0` ng-model-options='{allowInvalid: true}' ignite-unique='queryIndex.fields' diff --git a/modules/web-console/frontend/app/configuration/services/Models.ts b/modules/web-console/frontend/app/configuration/services/Models.ts index 76aaa5e..63e6575 100644 --- a/modules/web-console/frontend/app/configuration/services/Models.ts +++ b/modules/web-console/frontend/app/configuration/services/Models.ts @@ -16,7 +16,7 @@ import ObjectID from 'bson-objectid'; import omit from 'lodash/fp/omit'; -import {DomainModel, IndexField, ShortDomainModel, Index, Field, KeyField, ValueField} from '../types'; +import {DomainModel, IndexField, ShortDomainModel, Index, Field, KeyField, ValueField, InlineSizeType} from '../types'; export default class Models { static $inject = ['$http']; @@ -59,10 +59,12 @@ export default class Models { ]; inlineSizeType = { - _val(queryIndex) { + _val(queryIndex: Index): InlineSizeType { return (queryIndex.inlineSizeType === null || queryIndex.inlineSizeType === void 0) ? -1 : queryIndex.inlineSizeType; }, - onChange: (queryIndex) => { + onChange: (queryIndex?: Index): void => { + // Undefined queryIndex did not happen until native selects were introduced + if (!queryIndex) return; const inlineSizeType = this.inlineSizeType._val(queryIndex); switch (inlineSizeType) { case 1: diff --git a/modules/web-console/frontend/app/configuration/types/index.ts b/modules/web-console/frontend/app/configuration/types/index.ts index 22e7754..f37cda2 100644 --- a/modules/web-console/frontend/app/configuration/types/index.ts +++ b/modules/web-console/frontend/app/configuration/types/index.ts @@ -65,11 +65,20 @@ export interface IndexField { name?: string, direction?: boolean } + +export enum InlineSizeType { + 'AUTO' = -1, + 'DISABLED' = 0, + 'CUSTOM' = 1 +} + export interface Index { _id: string, name: string, indexType: IndexTypes, - fields: Array<IndexField> + fields: Array<IndexField>, + inlineSize: number | null, + inlineSizeType: InlineSizeType } export interface DomainModel { diff --git a/modules/web-console/frontend/app/primitives/form-field/dropdown.pug b/modules/web-console/frontend/app/primitives/form-field/dropdown.pug index d7bb278..a259e15 100644 --- a/modules/web-console/frontend/app/primitives/form-field/dropdown.pug +++ b/modules/web-console/frontend/app/primitives/form-field/dropdown.pug @@ -14,32 +14,56 @@ limitations under the License. -mixin form-field__dropdown({ label, model, name, disabled, required, multiple, placeholder, placeholderEmpty, options, optionLabel = 'label', tip, tipOpts, change }) +mixin form-field__dropdown({ label, model, name, disabled, required, multiple, placeholder, placeholderEmpty, options, optionLabel = 'label', tip, tipOpts, inline = false, change }) -var errLbl = label ? label.substring(0, label.length - 1) : 'Field'; mixin __form-field__input() - button.select-toggle( - type='button' - id=`{{ ${name} }}Input` - name=`{{ ${name} }}` + if !inline && !multiple - data-placeholder=placeholderEmpty ? `{{ ${options}.length > 0 ? '${placeholder}' : '${placeholderEmpty}' }}` : placeholder - - ng-model=model - ng-disabled=disabled && `${disabled}` - ng-required=required && `${required}` - ng-ref='$input' - ng-ref-read='ngModel' + select( + id=`{{ ${name} }}Input` + name=`{{ ${name} }}` - ng-change=change && `${change}` + ng-model=model + ng-disabled=disabled && `${disabled}` + ng-required=required && `${required}` + ng-ref='$input' + ng-ref-read='ngModel' + ng-change=change && `${change}` - bs-select - bs-options=`item.value as item.${optionLabel} for item in ${options}` + multiple=multiple ? '' : false + )&attributes(attributes.attributes) + if !multiple && placeholder + option(value='' hidden) #{placeholderEmpty ? `{{ ${options}.length > 0 ? '${placeholder}' : '${placeholderEmpty}' }}` : placeholder} + option( + ng-repeat=`item in ${options} track by item.value` + ng-value='item.value' + ng-bind=`item.${optionLabel}` + ) - data-multiple=multiple ? '1' : false + else - tabindex='0' - )&attributes(attributes.attributes) + button.select-toggle( + type='button' + id=`{{ ${name} }}Input` + name=`{{ ${name} }}` + + data-placeholder=placeholderEmpty ? `{{ ${options}.length > 0 ? '${placeholder}' : '${placeholderEmpty}' }}` : placeholder + + ng-model=model + ng-disabled=disabled && `${disabled}` + ng-required=required && `${required}` + ng-ref='$input' + ng-ref-read='ngModel' + ng-change=change && `${change}` + + bs-select + bs-options=`item.value as item.${optionLabel} for item in ${options}` + + data-multiple=multiple ? '1' : false + + tabindex='0' + )&attributes(attributes.attributes) .form-field.form-field__dropdown.ignite-form-field(id=`{{ ${name} }}Field`) +form-field__label({ label, name, required, disabled }) diff --git a/modules/web-console/frontend/app/primitives/form-field/index.scss b/modules/web-console/frontend/app/primitives/form-field/index.scss index e4367a9..f068d1d 100644 --- a/modules/web-console/frontend/app/primitives/form-field/index.scss +++ b/modules/web-console/frontend/app/primitives/form-field/index.scss @@ -88,16 +88,6 @@ &:disabled { opacity: .5; } - - - &:focus { - border-color: $ignite-brand-success; - box-shadow: inset 0 1px 3px 0 rgba($ignite-brand-success, .5); - } - - &:disabled { - opacity: .5; - } } & > input[type='number'] { @@ -219,6 +209,7 @@ } & > input, + & > select:not([multiple]), & > button:not(.btn-ignite) { outline: none; overflow: visible; @@ -274,6 +265,10 @@ right: 36px; } } + & > select.ng-invalid.ng-touched:not([multiple]) { + background-position: calc(100% - 36px) 50%; + padding-right: calc(28px + 26px); + } } &__control-group { @@ -375,12 +370,16 @@ right: 10px; } } + & > select.ng-invalid.ng-touched:not([multiple]) { + background-position: calc(100% - 10px) 50%; + padding-right: calc(28px + 26px); + } } .form-field__errors { position: relative; - padding: 5px 10px 0px; + padding: 5px 10px 0; color: $ignite-brand-primary; font-size: 12px; @@ -594,14 +593,14 @@ border: none; box-shadow: none; - background: linear-gradient(to right, rgb(0, 103, 185), transparent) 0px 25px / 0px, + background: linear-gradient(to right, rgb(0, 103, 185), transparent) 0 25px / 0px, linear-gradient(to right, rgb(0, 103, 185) 70%, transparent 0%) 0% 0% / 8px 1px repeat-x, 0% 0% / 0px, 0% 0% / 4px; background-size: 0, 8px 1px, 0, 0; background-position: 1px 25px; - padding-left: 0px; - padding-right: 0px; + padding-left: 0; + padding-right: 0; margin-left: 10px; margin-right: 10px; @@ -648,6 +647,24 @@ > button:not(.btn-ignite) { padding-top: 10px; } + select:not([multiple]) { + -webkit-appearance: unset; + appearance: unset; + background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA4IDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTAgMGg4bC00IDR6IiBmaWxsPSIjMzkzOTM5Ii8+PC9zdmc+); + background-size: 8px 4px; + background-repeat: no-repeat; + background-position: calc(100% - 10px) 50%; + padding-right: 28px; + } + // "Placeholder" color + select.ng-empty { + color: rgba(66, 66, 66, 0.5); + + // Resets option color back to normal + option { + color: #393939; + } + } } }
