You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by am...@apache.org on 2019/05/07 15:21:17 UTC
[ignite] 09/41: WC-930 Web Console: Use native select for
"form-field-dropdown" component.
This is an automated email from the ASF dual-hosted git repository.
amashenkov pushed a commit to branch gg-18540
in repository https://gitbox.apache.org/repos/asf/ignite.git
commit 86b691abe457ec53b5f0b62775b12f0a2d3d3dc6
Author: Ilya Borisov <ib...@gridgain.com>
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;
+ }
+ }
}
}