You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by ag...@apache.org on 2018/08/29 16:50:55 UTC
[15/50] [abbrv] ignite git commit: IGNITE-9286 Web Console:
Refactored UI to modern UI/UX. Cleaned old code.
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/helpers/jade/mixins.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/helpers/jade/mixins.pug b/modules/web-console/frontend/app/helpers/jade/mixins.pug
index 62290c4..8927586 100644
--- a/modules/web-console/frontend/app/helpers/jade/mixins.pug
+++ b/modules/web-console/frontend/app/helpers/jade/mixins.pug
@@ -14,120 +14,32 @@
See the License for the specific language governing permissions and
limitations under the License.
-include ./form
include ../../primitives/btn-group/index
include ../../primitives/datepicker/index
include ../../primitives/timepicker/index
include ../../primitives/dropdown/index
-include ../../primitives/tooltip/index
-include ../../primitives/radio/index
include ../../primitives/switcher/index
include ../../primitives/form-field/index
-//- Mixin for advanced options toggle.
-mixin advanced-options-toggle(click, cond, showMessage, hideMessage)
- .advanced-options
- i.fa(
- ng-click=`${click}`
- ng-class=`${cond} ? 'fa-chevron-circle-down' : 'fa-chevron-circle-right'`
- )
- a(ng-click=click) {{ #{cond} ? '#{hideMessage}' : '#{showMessage}' }}
-
-//- Mixin for advanced options toggle with default settings.
-mixin advanced-options-toggle-default
- +advanced-options-toggle('toggleExpanded()', 'ui.expanded', 'Show advanced settings...', 'Hide advanced settings...')
-
-//- Mixin for main table on screen with list of items.
-mixin main-table(title, rows, focusId, click, rowTemplate, searchField)
- .padding-bottom-dflt(ng-show=`${rows} && ${rows}.length > 0`)
- table.links(st-table='displayedRows' st-safe-src=`${rows}`)
- thead
- tr
- th
- label.labelHeader.labelFormField #{title}:
- .col-sm-3.pull-right(style='padding: 0')
- input.form-control(type='text' st-search=`${searchField}` placeholder=`Filter ${title}...`)
- tbody
- tr
- td
- .scrollable-y(ng-show='displayedRows.length > 0' style='max-height: 200px')
- table
- tbody
- tr(ng-repeat='row in displayedRows track by row._id' ignite-bs-affix-update)
- td
- a(ng-class='{active: row._id == selectedItem._id}' ignite-on-click-focus=focusId ng-click=click) #{rowTemplate}
- label.placeholder(ng-show='displayedRows.length == 0') No #{title} found
-
-//- Mixin with save, remove, clone and undo buttons.
-mixin save-remove-clone-undo-buttons(objectName)
- -var removeTip = 'Remove current ' + objectName
- -var cloneTip = '"Clone current ' + objectName + '"'
- -var undoTip = '"Undo all changes for current ' + objectName + '"'
-
- button.btn-ignite.btn-ignite--success(
- ng-disabled='!ui.inputForm.$dirty'
- ng-click='ui.inputForm.$dirty && saveItem()'
- ) Save
- button.btn-ignite.btn-ignite--success(
- ng-show='backupItem._id && contentVisible()'
- type='button'
- id='clone-item'
- ng-click='cloneItem()'
- ) Clone
-
- .btn-ignite-group(ng-show='backupItem._id && contentVisible()')
- button.btn-ignite.btn-ignite--success(
- ng-click='removeItem()'
- type='button'
- )
- | Remove
- button.btn-ignite.btn-ignite--success(
- bs-dropdown='$ctrl.extraFormActions'
- data-placement='top-right'
- type='button'
- )
- span.icon.fa.fa-caret-up
-
- button.btn-ignite.btn-ignite--success(
- ng-show='contentVisible()'
- id='undo-item'
- ng-disabled='!ui.inputForm.$dirty'
- ng-click='ui.inputForm.$dirty && resetAll()'
- bs-tooltip=undoTip
- data-placement='top'
- data-trigger='hover'
- )
- i.icon.fa.fa-undo()
-
-//- Mixin for feedback on specified error.
-mixin error-feedback(visible, error, errorMessage, name)
- i.fa.fa-exclamation-triangle.form-control-feedback(
- ng-if=visible
- bs-tooltip=`'${errorMessage}'`
- ignite-error=error
- ignite-error-message=errorMessage
- name=name
- )
-
//- Mixin for feedback on unique violation.
mixin unique-feedback(name, errorMessage)
- +form-field-feedback(name, 'igniteUnique', errorMessage)
+ +form-field__error({ error: 'igniteUnique', message: errorMessage })
//- Mixin for feedback on IP address violation.
mixin ipaddress-feedback(name)
- +form-field-feedback(name, 'ipaddress', 'Invalid address!')
+ +form-field__error({ error: 'ipaddress', message: 'Invalid address!' })
//- Mixin for feedback on port of IP address violation.
mixin ipaddress-port-feedback(name)
- +form-field-feedback(name, 'ipaddressPort', 'Invalid port!')
+ +form-field__error({ error: 'ipaddressPort', message: 'Invalid port!' })
//- Mixin for feedback on port range violation.
mixin ipaddress-port-range-feedback(name)
- +form-field-feedback(name, 'ipaddressPortRange', 'Invalid port range!')
+ +form-field__error({ error: 'ipaddressPortRange', message: 'Invalid port range!' })
//- Mixin for feedback on UUID violation.
mixin uuid-feedback(name)
- +form-field-feedback(name, 'uuid', 'Invalid node ID!')
+ +form-field__error({ error: 'uuid', message: 'Invalid node ID!' })
//- Function that convert enabled state to corresponding disabled state.
-var enabledToDisabled = function (enabled) {
@@ -135,18 +47,37 @@ mixin uuid-feedback(name)
-}
//- Mixin for checkbox.
-mixin checkbox(lbl, model, name, tip)
- +form-field-checkbox(lbl, model, name, false, false, tip)
+mixin checkbox(label, model, name, tip)
+ +form-field__checkbox({
+ label,
+ model,
+ name,
+ tip
+ })
//- Mixin for checkbox with enabled condition.
-mixin checkbox-enabled(lbl, model, name, enabled, tip)
- +form-field-checkbox(lbl, model, name, enabledToDisabled(enabled), false, tip)
+mixin checkbox-enabled(label, model, name, enabled, tip)
+ +form-field__checkbox({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ tip
+ })
//- Mixin for Java class name field with auto focus condition.
-mixin java-class-autofocus-placholder(lbl, model, name, enabled, required, autofocus, placeholder, tip, validationActive)
- -var errLbl = lbl.substring(0, lbl.length - 1)
-
- +ignite-form-field-text(lbl, model, name, enabledToDisabled(enabled), required, placeholder, tip)(
+mixin java-class-autofocus-placholder(label, model, name, enabled, required, autofocus, placeholder, tip, validationActive)
+ -var errLbl = label.substring(0, label.length - 1)
+
+ +form-field__text({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ tip
+ })(
data-java-identifier='true'
data-java-package-specified='true'
data-java-keywords='true'
@@ -157,10 +88,10 @@ mixin java-class-autofocus-placholder(lbl, model, name, enabled, required, autof
if block
block
- +form-field-feedback(name, 'javaBuiltInClass', errLbl + ' should not be the Java built-in class!')
- +form-field-feedback(name, 'javaKeywords', errLbl + ' could not contains reserved Java keyword!')
- +form-field-feedback(name, 'javaPackageSpecified', errLbl + ' does not have package specified!')
- +form-field-feedback(name, 'javaIdentifier', errLbl + ' is invalid Java identifier!')
+ +form-field__error({ error: 'javaBuiltInClass', message: `${ errLbl } should not be the Java built-in class!` })
+ +form-field__error({ error: 'javaKeywords', message: `${ errLbl } could not contains reserved Java keyword!` })
+ +form-field__error({ error: 'javaPackageSpecified', message: `${ errLbl } does not have package specified!` })
+ +form-field__error({ error: 'javaIdentifier', message: `${ errLbl } is invalid Java identifier!` })
//- Mixin for Java class name field with auto focus condition.
mixin java-class-autofocus(lbl, model, name, enabled, required, autofocus, tip, validationActive)
@@ -169,139 +100,335 @@ mixin java-class-autofocus(lbl, model, name, enabled, required, autofocus, tip,
block
//- Mixin for Java class name field.
-mixin java-class(lbl, model, name, enabled, required, tip, validationActive)
- +java-class-autofocus(lbl, model, name, enabled, required, 'false', tip, validationActive)
+mixin form-field__java-class({ label, model, name, enabled, required, tip, validationActive })
+ +java-class-autofocus(label, model, name, enabled, required, 'false', tip, validationActive)
if block
block
-//- Mixin for text field with enabled condition with options.
-mixin java-class-typeahead(lbl, model, name, options, enabled, required, placeholder, tip, validationActive)
- -var errLbl = lbl.substring(0, lbl.length - 1)
- +form-field-datalist(lbl, model, name, enabledToDisabled(enabled), required, placeholder, options, tip)&attributes(attributes)(
+mixin java-class(label, model, name, enabled, required, tip, validationActive)
+ +form-field__java-class({ label, model, name, enabled, required, tip, validationActive })
+ if block
+ block
+
+
+//- Mixin for text field with enabled condition with options.
+mixin java-class-typeahead(label, model, name, options, enabled, required, placeholder, tip, validationActive)
+ -var errLbl = label.substring(0, label.length - 1)
+
+ +form-field__typeahead({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ options,
+ tip
+ })&attributes(attributes)(
data-java-identifier='true'
data-java-package-specified='allow-built-in'
data-java-keywords='true'
data-validation-active=validationActive ? `{{ ${validationActive} }}` : `'always'`
)
- +form-field-feedback(name, 'javaKeywords', errLbl + ' could not contains reserved Java keyword!')
- +form-field-feedback(name, 'javaPackageSpecified', errLbl + ' does not have package specified!')
- +form-field-feedback(name, 'javaIdentifier', errLbl + ' is invalid Java identifier!')
+ +form-field__error({ error: 'javaKeywords', message: `${ errLbl } could not contains reserved Java keyword!` })
+ +form-field__error({ error: 'javaPackageSpecified', message: `${ errLbl } does not have package specified!` })
+ +form-field__error({ error: 'javaIdentifier', message: `${ errLbl } is invalid Java identifier!` })
//- Mixin for java package field with enabled condition.
-mixin java-package(lbl, model, name, enabled, required, tip)
- +ignite-form-field-text(lbl, model, name, enabledToDisabled(enabled), required, 'Enter package name', tip)(
+mixin java-package(label, model, name, enabled, required, tip)
+ +form-field__java-package({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ tip
+ })
+
+mixin form-field__java-package({ label, model, name, disabled, required, tip, tipOpts, placeholder })
+ +form-field__text({
+ label,
+ model,
+ name,
+ disabled,
+ required,
+ tip,
+ tipOpts,
+ placeholder
+ })(
data-java-keywords='true'
data-java-package-name='package-only'
- )
- +form-field-feedback(name, 'javaPackageName', 'Package name is invalid')
- +form-field-feedback(name, 'javaKeywords', 'Package name could not contains reserved java keyword')
+ )&attributes(attributes)
+ if block
+ block
+
+ +form-field__error({ error: 'javaPackageName', message: 'Package name is invalid!' })
+ +form-field__error({ error: 'javaKeywords', message: 'Package name could not contains reserved java keyword!' })
//- Mixin for text field with IP address check.
-mixin text-ip-address(lbl, model, name, enabled, placeholder, tip)
- +ignite-form-field-text(lbl, model, name, enabledToDisabled(enabled), false, placeholder, tip)(data-ipaddress='true')
+mixin text-ip-address(label, model, name, enabled, placeholder, tip)
+ +form-field__text({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ placeholder,
+ tip
+ })(data-ipaddress='true')
+ipaddress-feedback(name)
//- Mixin for text field with IP address and port range check.
-mixin text-ip-address-with-port-range(lbl, model, name, enabled, placeholder, tip)
- +ignite-form-field-text(lbl, model, name, enabledToDisabled(enabled), false, placeholder, tip)(data-ipaddress='true' data-ipaddress-with-port='true' data-ipaddress-with-port-range='true')
+mixin text-ip-address-with-port-range(label, model, name, enabled, placeholder, tip)
+ +form-field__text({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ placeholder,
+ tip
+ })(
+ data-ipaddress='true'
+ data-ipaddress-with-port='true'
+ data-ipaddress-with-port-range='true'
+ )
+ipaddress-feedback(name)
+ipaddress-port-feedback(name)
+ipaddress-port-range-feedback(name)
//- Mixin for text field.
-mixin text-enabled(lbl, model, name, enabled, required, placeholder, tip)
- +ignite-form-field-text(lbl, model, name, enabledToDisabled(enabled), required, placeholder, tip)
+mixin text-enabled(label, model, name, enabled, required, placeholder, tip)
+ +form-field__text({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ tip
+ })
if block
block
//- Mixin for text field with autofocus.
-mixin text-enabled-autofocus(lbl, model, name, enabled, required, placeholder, tip)
- +ignite-form-field-text(lbl, model, name, enabledToDisabled(enabled), required, placeholder, tip)(
+mixin text-enabled-autofocus(label, model, name, enabled, required, placeholder, tip)
+ +form-field__text--autofocus({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ tip
+ })
+
+mixin form-field__text--autofocus({ label, model, name, disabled = false, required, placeholder, tip })
+ +form-field__text({
+ label,
+ model,
+ name,
+ disabled,
+ required,
+ placeholder,
+ tip
+ })(
data-ignite-form-field-input-autofocus='true'
)&attributes(attributes)
if block
block
//- Mixin for text field.
-mixin text(lbl, model, name, required, placeholder, tip)
- +ignite-form-field-text(lbl, model, name, false, required, placeholder, tip)
+mixin text(label, model, name, required, placeholder, tip)
+ +form-field__text({
+ label,
+ model,
+ name,
+ required,
+ placeholder,
+ tip
+ })&attributes(attributes)
if block
block
//- Mixin for url field.
-mixin url(lbl, model, name, enabled, required, placeholder, tip)
- -var errLbl = lbl.substring(0, lbl.length - 1)
-
- +ignite-form-field-text(lbl, model, name, enabledToDisabled(enabled), required, placeholder, tip)(type='url')
+mixin url(label, model, name, enabled, required, placeholder, tip)
+ -var errLbl = label.substring(0, label.length - 1)
+
+ +form-field__text({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ tip
+ })(
+ type='url'
+ )
if block
block
- +form-field-feedback(name, 'url', errLbl + ' should be a valid URL!')
-
-//- Mixin for password field.
-mixin password(lbl, model, name, required, placeholder, tip)
- +ignite-form-field-password(lbl, model, name, false, required, placeholder, tip)
- if block
- block
+ +form-field__error({ error: 'url', message: `${ errLbl } should be a valid URL!` })
//- Mixin for text field with enabled condition with options.
-mixin text-options(lbl, model, name, options, enabled, required, placeholder, tip)
- +form-field-datalist(lbl, model, name, enabledToDisabled(enabled), required, placeholder, options, tip)
+mixin text-options(label, model, name, options, enabled, required, placeholder, tip)
+ +form-field__typeahead({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ options,
+ tip
+ })
//- Mixin for required numeric field.
-mixin number-required(lbl, model, name, enabled, required, placeholder, min, tip)
- +ignite-form-field-number(lbl, model, name, enabledToDisabled(enabled), required, placeholder, min, false, false, tip)
+mixin number-required(label, model, name, enabled, required, placeholder, min, tip)
+ +form-field__number({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ min,
+ tip
+ })
//- Mixin for required numeric field with maximum and minimum limit.
-mixin number-min-max(lbl, model, name, enabled, placeholder, min, max, tip)
- +ignite-form-field-number(lbl, model, name, enabledToDisabled(enabled), false, placeholder, min, max, '1', tip)
+mixin number-min-max(label, model, name, enabled, placeholder, min, max, tip)
+ +form-field__number({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ placeholder,
+ min,
+ max,
+ tip
+ })
//- Mixin for required numeric field with maximum and minimum limit.
-mixin number-min-max-step(lbl, model, name, enabled, placeholder, min, max, step, tip)
- +ignite-form-field-number(lbl, model, name, enabledToDisabled(enabled), false, placeholder, min, max, step, tip)
+mixin number-min-max-step(label, model, name, enabled, placeholder, min, max, step, tip)
+ +form-field__number({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ placeholder,
+ min,
+ max,
+ step,
+ tip
+ })
//- Mixin for numeric field.
-mixin number(lbl, model, name, enabled, placeholder, min, tip)
- +ignite-form-field-number(lbl, model, name, enabledToDisabled(enabled), false, placeholder, min, false, false, tip)
+mixin number(label, model, name, enabled, placeholder, min, tip)
+ +form-field__number({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ placeholder,
+ min,
+ tip
+ })
//- Mixin for required dropdown field.
-mixin dropdown-required-empty(lbl, model, name, enabled, required, placeholder, placeholderEmpty, options, tip)
- +ignite-form-field-dropdown(lbl, model, name, enabledToDisabled(enabled), required, false, placeholder, placeholderEmpty, options, tip)&attributes(attributes)
+mixin dropdown-required-empty(label, model, name, enabled, required, placeholder, placeholderEmpty, options, tip)
+ +form-field__dropdown({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ placeholderEmpty,
+ options,
+ tip
+ })&attributes(attributes)
if block
block
//- Mixin for required dropdown field with autofocus.
-mixin dropdown-required-empty-autofocus(lbl, model, name, enabled, required, placeholder, placeholderEmpty, options, tip)
- +ignite-form-field-dropdown(lbl, model, name, enabledToDisabled(enabled), required, false, placeholder, placeholderEmpty, options, tip)(
+mixin dropdown-required-empty-autofocus(label, model, name, enabled, required, placeholder, placeholderEmpty, options, tip)
+ +form-field__dropdown({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ placeholderEmpty,
+ options,
+ tip
+ })(
data-ignite-form-field-input-autofocus='true'
)
if block
block
//- Mixin for required dropdown field.
-mixin dropdown-required(lbl, model, name, enabled, required, placeholder, options, tip)
- +ignite-form-field-dropdown(lbl, model, name, enabledToDisabled(enabled), required, false, placeholder, '', options, tip)&attributes(attributes)
+mixin dropdown-required(label, model, name, enabled, required, placeholder, options, tip)
+ +form-field__dropdown({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ options,
+ tip
+ })&attributes(attributes)
if block
block
//- Mixin for required dropdown field with autofocus.
-mixin dropdown-required-autofocus(lbl, model, name, enabled, required, placeholder, options, tip)
- +ignite-form-field-dropdown(lbl, model, name, enabledToDisabled(enabled), required, false, placeholder, '', options, tip)(
+mixin dropdown-required-autofocus(label, model, name, enabled, required, placeholder, options, tip)
+ +form-field__dropdown({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ placeholder,
+ options,
+ tip
+ })(
data-ignite-form-field-input-autofocus='true'
)
if block
block
//- Mixin for dropdown field.
-mixin dropdown(lbl, model, name, enabled, placeholder, options, tip)
- +ignite-form-field-dropdown(lbl, model, name, enabledToDisabled(enabled), false, false, placeholder, '', options, tip)
+mixin dropdown(label, model, name, enabled, placeholder, options, tip)
+ +form-field__dropdown({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ placeholder,
+ options,
+ tip
+ })&attributes(attributes)
if block
block
//- Mixin for dropdown-multiple field.
-mixin dropdown-multiple(lbl, model, name, enabled, placeholder, placeholderEmpty, options, tip)
- +ignite-form-field-dropdown(lbl, model, name, enabledToDisabled(enabled), false, true, placeholder, placeholderEmpty, options, tip)
+mixin dropdown-multiple(label, model, name, enabled, placeholder, placeholderEmpty, options, tip)
+ +form-field__dropdown({
+ label,
+ model,
+ name,
+ disabled: enabledToDisabled(enabled),
+ required,
+ multiple: true,
+ placeholder,
+ placeholderEmpty,
+ options,
+ tip
+ })&attributes(attributes)
if block
block
@@ -311,7 +438,13 @@ mixin list-text-field({ items, lbl, name, itemName, itemsName })
| {{ $item }}
list-editable-item-edit
- +ignite-form-field-text(lbl, '$item', `"${name}"`, false, true, `Enter ${lbl.toLowerCase()}`)(
+ +form-field__text({
+ label: lbl,
+ model: '$item',
+ name: `"${name}"`,
+ required: true,
+ placeholder: `Enter ${lbl.toLowerCase()}`
+ })(
data-ignite-unique=items
data-ignite-form-field-input-autofocus='true'
)
@@ -325,8 +458,14 @@ mixin list-text-field({ items, lbl, name, itemName, itemsName })
label-multiple=itemsName
)
-mixin list-java-class-field(lbl, model, name, items)
- +ignite-form-field-text(lbl, model, name, false, true, 'Enter fully qualified class name')(
+mixin list-java-class-field(label, model, name, items)
+ +form-field__text({
+ label,
+ model,
+ name,
+ required: true,
+ placeholder: 'Enter fully qualified class name'
+ })(
data-java-identifier='true'
data-java-package-specified='true'
data-java-keywords='true'
@@ -335,36 +474,28 @@ mixin list-java-class-field(lbl, model, name, items)
data-ignite-unique=items
data-ignite-form-field-input-autofocus='true'
)
- +form-field-feedback(name, 'javaBuiltInClass', lbl + ' should not be the Java built-in class!')
- +form-field-feedback(name, 'javaKeywords', lbl + ' could not contains reserved Java keyword!')
- +form-field-feedback(name, 'javaPackageSpecified', lbl + ' does not have package specified!')
- +form-field-feedback(name, 'javaIdentifier', lbl + ' is invalid Java identifier!')
-
- if block
- block
-
-mixin list-java-package-field(lbl, model, name, items)
- +ignite-form-field-text(lbl, model, name, false, true, 'Enter package name')(
- data-java-keywords='true'
- data-java-package-name='package-only'
-
- data-ignite-unique=items
- data-ignite-form-field-input-autofocus='true'
- )&attributes(attributes)
- +form-field-feedback(name, 'javaKeywords', 'Package name could not contains reserved Java keyword!')
- +form-field-feedback(name, 'javaPackageName', 'Package name is invalid!')
+ +form-field__error({ error: 'javaBuiltInClass', message: `${ label } should not be the Java built-in class!` })
+ +form-field__error({ error: 'javaKeywords', message: `${ label } could not contains reserved Java keyword!` })
+ +form-field__error({ error: 'javaPackageSpecified', message: `${ label } does not have package specified!` })
+ +form-field__error({ error: 'javaIdentifier', message: `${ label } is invalid Java identifier!` })
if block
block
-mixin list-url-field(lbl, model, name, items)
- +ignite-form-field-text(lbl, model, name, false, true, 'Enter URL')(
+mixin list-url-field(label, model, name, items)
+ +form-field__text({
+ label,
+ model,
+ name,
+ required: true,
+ placeholder: 'Enter URL'
+ })(
type='url'
data-ignite-unique=items
data-ignite-form-field-input-autofocus='true'
)
- +form-field-feedback(name, 'url', 'URL should be valid!')
+ +form-field__error({ error: 'url', message: 'URL should be valid!' })
if block
block
@@ -377,7 +508,13 @@ mixin list-addresses({ items, name, tip, withPortRange = true })
)&attributes(attributes)
list-editable-item-view {{ $item }}
list-editable-item-edit(item-name='address')
- +ignite-form-field-text('Address', 'address', '"address"', false, true, 'IP address:port')(
+ +form-field__text({
+ label: 'Address',
+ model: 'address',
+ name: '"address"',
+ required: true,
+ placeholder: 'IP address:port'
+ })(
data-ipaddress='true'
data-ipaddress-with-port='true'
data-ipaddress-with-port-range=withPortRange
@@ -388,7 +525,7 @@ mixin list-addresses({ items, name, tip, withPortRange = true })
+ipaddress-feedback('"address"')
+ipaddress-port-feedback('"address"')
+ipaddress-port-range-feedback('"address"')
- +form-field-feedback('"address"', 'required', 'IP address:port could not be empty!')
+ +form-field__error({ error: 'required', message: 'IP address:port could not be empty!' })
list-editable-no-items
list-editable-add-item-button(
@@ -398,28 +535,41 @@ mixin list-addresses({ items, name, tip, withPortRange = true })
)
//- Mixin for cache mode.
-mixin cacheMode(lbl, model, name, placeholder)
- +dropdown(lbl, model, name, 'true', placeholder,
- '[\
+mixin cacheMode(label, model, name, placeholder)
+ +form-field__cache-modes({
+ label,
+ model,
+ name,
+ placeholder
+ })&attributes(attributes)
+ if block
+ block
+
+mixin form-field__cache-modes({ label, model, name, placeholder })
+ +form-field__dropdown({
+ label, model, name, placeholder,
+ options: '[\
{value: "LOCAL", label: "LOCAL"},\
{value: "REPLICATED", label: "REPLICATED"},\
{value: "PARTITIONED", label: "PARTITIONED"}\
]',
- 'Cache modes:\
+ tip: 'Cache modes:\
<ul>\
<li>PARTITIONED - in this mode the overall key set will be divided into partitions and all partitions will be split equally between participating nodes</li>\
<li>REPLICATED - in this mode all the keys are distributed to all participating nodes</li>\
<li>LOCAL - in this mode caches residing on different grid nodes will not know about each other</li>\
</ul>'
- )
+ })&attributes(attributes)
+ if block
+ block
//- Mixin for eviction policy.
-mixin evictionPolicy(model, name, enabled, required, tip)
+mixin form-field__eviction-policy({ model, name, enabled, required, tip })
-var kind = model + '.kind'
-var policy = model + '[' + kind + ']'
.pc-form-grid-col-60
- +sane-ignite-form-field-dropdown({
+ +form-field__dropdown({
label: 'Eviction policy:',
model: kind,
name: `${name}+"Kind"`,
@@ -434,7 +584,7 @@ mixin evictionPolicy(model, name, enabled, required, tip)
+number('Batch size', policy + '.batchSize', name + '+ "batchSize"', enabled, '1', '1',
'Number of entries to remove on shrink')
.pc-form-grid-col-30
- pc-form-field-size(
+ form-field-size(
label='Max memory size:'
ng-model=`${policy}.maxMemorySize`
ng-model-options='{allowInvalid: true}'
@@ -446,9 +596,9 @@ mixin evictionPolicy(model, name, enabled, required, tip)
size-scale-label='mb'
size-type='bytes'
)
- +form-field-feedback(null, 'min', 'Either maximum memory size or maximum size should be greater than 0')
+ +form-field__error({ error: 'min', message: 'Either maximum memory size or maximum size should be greater than 0' })
.pc-form-grid-col-60
- +sane-ignite-form-field-number({
+ +form-field__number({
label: 'Max size:',
model: policy + '.maxSize',
name: name + '+ "maxSize"',
@@ -459,7 +609,10 @@ mixin evictionPolicy(model, name, enabled, required, tip)
})(
ng-model-options='{allowInvalid: true}'
)
- +form-field-feedback(null, 'min', 'Either maximum memory size or maximum size should be greater than 0')
+ +form-field__error({ error: 'min', message: 'Either maximum memory size or maximum size should be greater than 0' })
+
+mixin evictionPolicy(model, name, enabled, required, tip)
+ +form-field__eviction-policy({ model, name, enabled, required, tip })
//- Mixin for clusters dropdown.
mixin clusters(model, tip)
@@ -528,14 +681,26 @@ mixin list-pair-edit({ items, keyLbl, valLbl, itemName, itemsName })
- form = '$parent.form'
.pc-form-grid-row
.pc-form-grid-col-30(divider='=')
- +ignite-form-field-text(keyLbl, '$item.name', '"name"', false, true, keyLbl)(
+ +form-field__text({
+ label: keyLbl,
+ model: '$item.name',
+ name: '"name"',
+ required: true,
+ placeholder: keyLbl
+ })(
data-ignite-unique=items
data-ignite-unique-property='name'
ignite-auto-focus
)
+unique-feedback('"name"', 'Property with such name already exists!')
.pc-form-grid-col-30
- +ignite-form-field-text(valLbl, '$item.value', '"value"', false, true, valLbl)
+ +form-field__text({
+ label: valLbl,
+ model: '$item.value',
+ name: '"value"',
+ required: true,
+ placeholder: valLbl
+ })
list-editable-no-items
list-editable-add-item-button(
@@ -545,8 +710,14 @@ mixin list-pair-edit({ items, keyLbl, valLbl, itemName, itemsName })
)
//- Mixin for DB dialect.
-mixin dialect(lbl, model, name, required, tipTitle, genericDialectName, placeholder)
- +dropdown-required(lbl, model, name, 'true', required, placeholder, '[\
+mixin dialect(label, model, name, required, tip, genericDialectName, placeholder)
+ +form-field__dropdown({
+ label,
+ model,
+ name,
+ required,
+ placeholder,
+ options: '[\
{value: "Generic", label: "' + genericDialectName + '"},\
{value: "Oracle", label: "Oracle"},\
{value: "DB2", label: "IBM DB2"},\
@@ -555,13 +726,14 @@ mixin dialect(lbl, model, name, required, tipTitle, genericDialectName, placehol
{value: "PostgreSQL", label: "PostgreSQL"},\
{value: "H2", label: "H2 database"}\
]',
- tipTitle +
- '<ul>\
- <li>' + genericDialectName + '</li>\
- <li>Oracle database</li>\
- <li>IBM DB2</li>\
- <li>Microsoft SQL Server</li>\
- <li>MySQL</li>\
- <li>PostgreSQL</li>\
- <li>H2 database</li>\
- </ul>')
+ tip: `${ tip }
+ <ul>
+ <li>${ genericDialectName }</li>
+ <li>Oracle database</li>
+ <li>IBM DB2</li>
+ <li>Microsoft SQL Server</li>
+ <li>MySQL</li>
+ <li>PostgreSQL</li>
+ <li>H2 database</li>
+ </ul>`
+ })
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/field/down.directive.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/field/down.directive.js b/modules/web-console/frontend/app/modules/form/field/down.directive.js
deleted file mode 100644
index c957e97..0000000
--- a/modules/web-console/frontend/app/modules/form/field/down.directive.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default ['igniteFormFieldDown', ['$tooltip', ($tooltip) => {
- const controller = ['$element', function($element) {
- const ctrl = this;
-
- this.$onInit = () => {
- $tooltip($element, { title: 'Move item down' });
-
- ctrl.down = () => {
- const i = ctrl.models.indexOf(ctrl.model);
-
- ctrl.models.splice(i, 1);
- ctrl.models.splice(i + 1, 0, ctrl.model);
- };
- };
-
-
- }];
-
- return {
- restrict: 'A',
- bindToController: {
- model: '=ngModel',
- models: '=models'
- },
- controller,
- controllerAs: 'vm'
- };
-}]];
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/field/feedback.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/field/feedback.scss b/modules/web-console/frontend/app/modules/form/field/feedback.scss
deleted file mode 100644
index 08d0aef..0000000
--- a/modules/web-console/frontend/app/modules/form/field/feedback.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import "../../../../public/stylesheets/variables";
-
-.form-field-feedback {
- position: relative;
- width: 0;
- height: 28px;
- float: right;
- z-index: 2;
-
- color: $brand-primary;
- line-height: $input-height;
- pointer-events: initial;
- text-align: center;
-
- &:before {
- position: absolute;
- right: 0;
- width: 38px;
- }
-}
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/field/field.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/field/field.scss b/modules/web-console/frontend/app/modules/form/field/field.scss
deleted file mode 100644
index 5717766..0000000
--- a/modules/web-console/frontend/app/modules/form/field/field.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import "../../../../public/stylesheets/variables";
-
-.indexField {
- float: left;
- line-height: 28px;
- margin-right: 5px;
- color: $brand-primary;
-}
-
-.form-field-save {
- position: relative;
- width: 0;
- height: 28px;
- float: right;
- z-index: 2;
-
- line-height: $input-height;
- pointer-events: initial;
- text-align: center;
-
- &:before {
- position: absolute;
- right: 0;
- width: 38px;
- }
-}
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/field/form-control-feedback.directive.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/field/form-control-feedback.directive.js b/modules/web-console/frontend/app/modules/form/field/form-control-feedback.directive.js
deleted file mode 100644
index 797ba69..0000000
--- a/modules/web-console/frontend/app/modules/form/field/form-control-feedback.directive.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default ['formFieldFeedback', [() => {
- const link = ($scope, $element, $attrs, [form]) => {
- let name = $scope.name;
-
- if (_.isNil(name))
- name = $attrs.name;
-
- const err = $attrs.igniteError;
- const msg = $attrs.igniteErrorMessage;
-
- if (name && err && msg) {
- form.$errorMessages = form.$errorMessages || {};
- form.$errorMessages[name] = form.$errorMessages[name] || {};
- form.$errorMessages[name][err] = msg;
- }
- };
-
- return {
- restrict: 'C',
- link,
- require: ['^form']
- };
-}]];
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/field/input/text.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/field/input/text.scss b/modules/web-console/frontend/app/modules/form/field/input/text.scss
deleted file mode 100644
index 658d740..0000000
--- a/modules/web-console/frontend/app/modules/form/field/input/text.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.checkbox label .input-tip {
- position: initial;
- overflow: visible;
-}
-
-.input-tip .fa-floppy-o {
- position: absolute;
- top: 0;
- right: 0;
- z-index: 2;
-
- width: 34px;
- height: 34px;
-
- text-align: center;
-
- display: inline-block;
- line-height: 28px;
- pointer-events: initial;
-}
-
-.input-tip .form-control-feedback {
- height: auto;
-}
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/field/label.directive.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/field/label.directive.js b/modules/web-console/frontend/app/modules/form/field/label.directive.js
deleted file mode 100644
index 94f7889..0000000
--- a/modules/web-console/frontend/app/modules/form/field/label.directive.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default ['igniteFormFieldLabel', [() => {
- return {
- restrict: 'E',
- compile() {
- return {
- post($scope, $element, $attrs, [field], $transclude) {
- $transclude($scope, function(clone) {
- const text = clone.text();
-
- if (/(.*):$/.test(text))
- field.name = /(.*):$/.exec(text)[1];
-
- const $label = $element.parent().parent().find('.group-legend > label, .ignite-field > label');
-
- if ($label[0] && $element[0].id) {
- const id = $element[0].id;
-
- $label[0].id = id.indexOf('+') >= 0 ? $scope.$eval(id) : id;
- }
-
- $label.append(clone);
- });
- }
- };
- },
- replace: true,
- transclude: true,
- require: ['?^igniteFormField']
- };
-}]];
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/field/tooltip.directive.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/field/tooltip.directive.js b/modules/web-console/frontend/app/modules/form/field/tooltip.directive.js
deleted file mode 100644
index 9e764bc..0000000
--- a/modules/web-console/frontend/app/modules/form/field/tooltip.directive.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const template = '<i class="tipField icon-help"></i>';
-
-export default ['igniteFormFieldTooltip', ['$tooltip', ($tooltip) => {
- const link = ($scope, $element, $attrs, [field], $transclude) => {
- const content = Array.prototype.slice
- .apply($transclude($scope))
- .reduce((html, el) => html += el.outerHTML || el.textContent || el, '');
-
- $tooltip($element, { title: content });
-
- if (field)
- $element.attr('id', field.for + 'Tooltip');
-
- // TODO cleanup css styles.
- if ($element.hasClass('tipLabel'))
- $element.removeClass('tipField');
-
- if ($element.parent('label').length)
- $element.addClass('tipLabel').removeClass('tipField');
- };
-
- return {
- priority: 1,
- restrict: 'E',
- scope: {},
- template,
- link,
- replace: true,
- transclude: true,
- require: ['?^igniteFormField']
- };
-}]];
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/field/up.directive.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/field/up.directive.js b/modules/web-console/frontend/app/modules/form/field/up.directive.js
deleted file mode 100644
index 6f87180..0000000
--- a/modules/web-console/frontend/app/modules/form/field/up.directive.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default ['igniteFormFieldUp', ['$tooltip', ($tooltip) => {
- const controller = ['$element', function($element) {
- const ctrl = this;
-
- this.$onInit = () => {
- $tooltip($element, { title: 'Move item up' });
-
- this.up = () => {
- const idx = ctrl.models.indexOf(ctrl.model);
-
- ctrl.models.splice(idx, 1);
- ctrl.models.splice(idx - 1, 0, ctrl.model);
- };
- };
- }];
-
- return {
- restrict: 'A',
- bindToController: {
- model: '=ngModel',
- models: '=models'
- },
- controller,
- controllerAs: 'vm'
- };
-}]];
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/form.module.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/form.module.js b/modules/web-console/frontend/app/modules/form/form.module.js
index 59fedff..ac15c6a 100644
--- a/modules/web-console/frontend/app/modules/form/form.module.js
+++ b/modules/web-console/frontend/app/modules/form/form.module.js
@@ -17,23 +17,9 @@
import angular from 'angular';
-// Fields styles.
-import './field/field.scss';
-import './field/feedback.scss';
-import './field/input/text.scss';
-
-// Panel.
-import igniteFormPanelChevron from './panel/chevron.directive';
-
// Field.
-import igniteFormFieldLabel from './field/label.directive';
-import igniteFormFieldTooltip from './field/tooltip.directive';
import placeholder from './field/bs-select-placeholder.directive';
-// Group.
-import igniteFormGroupAdd from './group/add.directive';
-import igniteFormGroupTooltip from './group/tooltip.directive';
-
// Validators.
import ipaddress from './validator/ipaddress.directive';
import javaKeywords from './validator/java-keywords.directive';
@@ -48,25 +34,14 @@ import uuid from './validator/uuid.directive';
// Helpers.
import igniteFormFieldInputAutofocus from './field/input/autofocus.directive';
-import igniteFormControlFeedback from './field/form-control-feedback.directive';
-import igniteFormFieldUp from './field/up.directive';
-import igniteFormFieldDown from './field/down.directive';
-
import IgniteFormGUID from './services/FormGUID.service.js';
angular
.module('ignite-console.Form', [
])
-// Panel.
-.directive(...igniteFormPanelChevron)
// Field.
-.directive(...igniteFormFieldLabel)
-.directive(...igniteFormFieldTooltip)
.directive(...placeholder)
-// Group.
-.directive(...igniteFormGroupAdd)
-.directive(...igniteFormGroupTooltip)
// Validators.
.directive(...ipaddress)
.directive(...javaKeywords)
@@ -80,9 +55,6 @@ angular
.directive(...uuid)
// Helpers.
.directive(...igniteFormFieldInputAutofocus)
-.directive(...igniteFormControlFeedback)
-.directive(...igniteFormFieldUp)
-.directive(...igniteFormFieldDown)
// Generator of globally unique identifier.
.service('IgniteFormGUID', IgniteFormGUID);
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/group/add.directive.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/group/add.directive.js b/modules/web-console/frontend/app/modules/form/group/add.directive.js
deleted file mode 100644
index 71070cc..0000000
--- a/modules/web-console/frontend/app/modules/form/group/add.directive.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const template = '<i class="group-legend-btn fa fa-plus"></i>';
-
-export default ['igniteFormGroupAdd', ['$tooltip', ($tooltip) => {
- return {
- restrict: 'E',
- scope: {},
- template,
- link($scope, $el, $attr, $ctrl, $transclude) {
- $transclude((clone) => {
- const title = Array.from(clone)
- .reduce((html, el) => html += el.outerHTML || el.textContent || el, '');
- const legend = $el.closest('.group').find('.group-legend');
-
- $tooltip($el, {title});
- legend.append($el);
- });
- },
- replace: true,
- transclude: true
- };
-}]];
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/modules/form/group/tooltip.directive.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/form/group/tooltip.directive.js b/modules/web-console/frontend/app/modules/form/group/tooltip.directive.js
deleted file mode 100644
index 4190dee..0000000
--- a/modules/web-console/frontend/app/modules/form/group/tooltip.directive.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const template = '<i class="group-legend-btn icon-help"></i>';
-
-export default ['igniteFormGroupTooltip', ['$tooltip', ($tooltip) => {
- return {
- restrict: 'E',
- scope: {},
- template,
- link($scope, $el, $attr, $ctrl, $transclude) {
- $transclude((clone) => {
- const title = Array.from(clone)
- .reduce((html, el) => html += el.outerHTML || el.textContent || el, '');
- const legend = $el.closest('.group').find('.group-legend');
-
- $tooltip($el, {title});
- legend.append($el);
- });
- },
- replace: true,
- transclude: true
- };
-}]];
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/btn/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/btn/index.scss b/modules/web-console/frontend/app/primitives/btn/index.scss
index 277b1ae..4401a81 100644
--- a/modules/web-console/frontend/app/primitives/btn/index.scss
+++ b/modules/web-console/frontend/app/primitives/btn/index.scss
@@ -271,7 +271,7 @@ $btn-content-padding-with-border: 9px 11px;
.btn-ignite--secondary {
background-color: white;
color: #424242;
- border: 1px solid #dedede;
+ border: 1px solid #c5c5c5;
padding: $btn-content-padding-with-border;
&:hover, &.hover,
@@ -319,6 +319,9 @@ $btn-content-padding-with-border: 9px 11px;
$line-color: $ignite-brand-success;
border-right-color: change-color($line-color, $saturation: 63%, $lightness: 33%);
}
+ .btn-ignite.btn-ignite--secondary + .btn-ignite.btn-ignite--secondary {
+ border-left: 0;
+ }
&[disabled] .btn-ignite.btn-ignite--primary {
border-right-color: change-color($ignite-brand-primary, $lightness: 83%);
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/checkbox/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/checkbox/index.scss b/modules/web-console/frontend/app/primitives/checkbox/index.scss
index d1e1e83..847e33c 100644
--- a/modules/web-console/frontend/app/primitives/checkbox/index.scss
+++ b/modules/web-console/frontend/app/primitives/checkbox/index.scss
@@ -15,26 +15,6 @@
* limitations under the License.
*/
-input[type='checkbox'] {
- background-image: url(/images/checkbox.svg);
- width: 12px !important;
- height: 12px !important;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background-repeat: no-repeat;
- background-size: 100%;
- padding: 0;
- border: none;
-
- &:checked {
- background-image: url(/images/checkbox-active.svg);
- }
- &:disabled {
- opacity: 0.5;
- }
-}
-
.theme--ignite {
.form-field-checkbox {
z-index: 2;
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/datepicker/index.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/datepicker/index.pug b/modules/web-console/frontend/app/primitives/datepicker/index.pug
index 7120111..110c243 100644
--- a/modules/web-console/frontend/app/primitives/datepicker/index.pug
+++ b/modules/web-console/frontend/app/primitives/datepicker/index.pug
@@ -14,9 +14,9 @@
See the License for the specific language governing permissions and
limitations under the License.
-mixin ignite-form-field-datepicker(label, model, name, mindate, maxdate, minview = 1, format = 'MMM yyyy', disabled, required, placeholder, tip)
- mixin form-field-input()
- input.form-control(
+mixin form-field__datepicker({ label, model, name, mindate, maxdate, minview = 1, format = 'MMM yyyy', disabled, required, placeholder, tip })
+ mixin __form-field__datepicker()
+ input(
id=`{{ ${name} }}Input`
name=`{{ ${name} }}`
@@ -41,19 +41,24 @@ mixin ignite-form-field-datepicker(label, model, name, mindate, maxdate, minview
tabindex='0'
- onkeydown='return false'
+ onkeydown='return false',
+ expose-ignite-form-field-control='$input'
)&attributes(attributes.attributes)
- .datepicker--ignite.ignite-form-field
- if name
- +ignite-form-field__label(label, name, required)
+ .form-field.form-field__datepicker.ignite-form-field(id=`{{ ${name} }}Field`)
+ +form-field__label({ label, name, required, disabled })
+ +form-field__tooltip({ title: tip, options: tipOpts })
- .ignite-form-field__control
- if tip
- i.tipField.icon-help(bs-tooltip='' data-title=tip)
+ .form-field__control
+ - attributes.type='button'
+ +__form-field__datepicker(attributes=attributes)
+ .form-field__errors(
+ ng-messages=`$input.$error`
+ ng-show=`($input.$dirty || $input.$touched || $input.$submitted) && $input.$invalid`
+ )
if block
block
- .input-tip
- +form-field-input(attributes=attributes)
+ if required
+ +form-field__error({ error: 'required', message: `${errLbl} could not be empty!` })
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/datepicker/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/datepicker/index.scss b/modules/web-console/frontend/app/primitives/datepicker/index.scss
index b0c13e6..c8edab5 100644
--- a/modules/web-console/frontend/app/primitives/datepicker/index.scss
+++ b/modules/web-console/frontend/app/primitives/datepicker/index.scss
@@ -39,58 +39,3 @@
}
}
}
-
-.datepicker--ignite {
- $height: 36px;
-
- display: inline-block;
- width: auto;
-
- font-size: 14px;
-
- label.ignite-form-field__label {
- width: auto;
- max-width: initial;
-
- font-size: inherit;
- line-height: $height;
- }
-
- .ignite-form-field__control {
- @import "./../../../public/stylesheets/variables.scss";
-
- width: auto;
-
- input {
- width: auto;
- height: $height;
- min-width: 70px;
- max-width: 70px;
- padding: 0;
- padding-left: 5px;
-
- cursor: pointer;
- color: transparent;
- font-size: inherit;
- line-height: $height;
- text-align: left;
- text-shadow: 0 0 0 $ignite-brand-success;
-
- border: none;
- box-shadow: none;
-
- &:hover, &:focus {
- text-shadow: 0 0 0 change-color($ignite-brand-success, $lightness: 26%);
- }
- }
- }
-}
-
-.theme--ignite {
- .datepicker--ignite {
- display: block;
- width: 100%;
-
- font-size: 14px;
- }
-}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/file/index.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/file/index.pug b/modules/web-console/frontend/app/primitives/file/index.pug
deleted file mode 100644
index 7bdd3cc..0000000
--- a/modules/web-console/frontend/app/primitives/file/index.pug
+++ /dev/null
@@ -1,37 +0,0 @@
-//-
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You under the Apache License, Version 2.0
- (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-
-mixin ignite-form-field-file(label, model, name, disabled, required, options, tip)
- .file--ignite.ignite-form-field(ng-class='{ "choosen": `${model}` }')
- label.ignite-form-field__label(for=`{{ ${name} }}Input`)
- span Folder name:
- .ignite-form-field__control
- label.btn-ignite.btn-ignite--primary(for=`{{ ${name} }}Input`)
- | Choose Destination Folder
- label.tipField.link-primary(for=`{{ ${name} }}Input`) Change folder
-
- +tooltip(tip, tipOpts)
-
- if block
- block
-
- .input-tip
- input(
- id=`{{ ${name} }}Input`
- type='file'
- ng-model=model
- )&attributes(attributes)
- | {{ `${model}` }}
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/file/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/file/index.scss b/modules/web-console/frontend/app/primitives/file/index.scss
deleted file mode 100644
index dbd32a4..0000000
--- a/modules/web-console/frontend/app/primitives/file/index.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.file--ignite {
- label {
- cursor: pointer;
- }
-
- &.choosen {
- .ignite-form-field__control {
- .btn-ignite {
- display: none;
- }
-
- .tipField {
- display: block;
- }
- }
- }
-
- &:not(.choosen) {
- .ignite-form-field__label {
- font-size: 0;
- line-height: 0;
- margin-bottom: 0px;
- }
- }
-
- .ignite-form-field__control {
- display: flex;
-
- input[type='file'] {
- position: absolute;
- opacity: 0;
- z-index: -1;
- }
-
- .tipField {
- display: none;
- }
-
- .input-tip {
- order: -1;
- }
- }
-}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/checkbox.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/checkbox.pug b/modules/web-console/frontend/app/primitives/form-field/checkbox.pug
index b498cbd..88b8f5a 100644
--- a/modules/web-console/frontend/app/primitives/form-field/checkbox.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/checkbox.pug
@@ -14,9 +14,9 @@
See the License for the specific language governing permissions and
limitations under the License.
-mixin form-field__checkbox({ label, model, name, disabled, required, tip })
+mixin form-field__checkbox({ label, model, name, disabled, required, tip, tipOpts })
.form-field.form-field__checkbox(id=`{{ ${name} }}Field`)
- +form-field__label({ label, name, required })
+ +form-field__label({ label, name, required, disabled })
+form-field__tooltip({ title: tip, options: tipOpts })
.form-field__control
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/dropdown.pug
----------------------------------------------------------------------
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 de83bf9..bdd9b03 100644
--- a/modules/web-console/frontend/app/primitives/form-field/dropdown.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/dropdown.pug
@@ -14,8 +14,9 @@
See the License for the specific language governing permissions and
limitations under the License.
-mixin form-field__dropdown({ label, model, name, disabled, required, multiple, placeholder, placeholderEmpty, options, tip })
- -var errLbl = label.substring(0, label.length - 1)
+mixin form-field__dropdown({ label, model, name, disabled, required, multiple, placeholder, placeholderEmpty, options, optionLabel = 'label', tip, tipOpts })
+ -var errLbl = label ? label.substring(0, label.length - 1) : 'Field';
+
mixin __form-field__input()
button.select-toggle(
type='button'
@@ -27,27 +28,29 @@ mixin form-field__dropdown({ label, model, name, disabled, required, multiple, p
ng-model=model
ng-disabled=disabled && `${disabled}`
ng-required=required && `${required}`
+ expose-ignite-form-field-control='$input'
bs-select
- bs-options=`item.value as item.label for item in ${options}`
+ bs-options=`item.value as item.${optionLabel} for item in ${options}`
data-multiple=multiple ? '1' : false
tabindex='0'
)&attributes(attributes.attributes)
- .form-field(id=`{{ ${name} }}Field`)
- +form-field__label({ label, name, required })
+ .form-field.form-field__dropdown.ignite-form-field(id=`{{ ${name} }}Field`)
+ +form-field__label({ label, name, required, disabled })
+form-field__tooltip({ title: tip, options: tipOpts })
.form-field__control
+__form-field__input(attributes=attributes)
.form-field__errors(
- ng-messages=`(${form}[${name}].$dirty || ${form}[${name}].$touched || ${form}[${name}].$submitted) && ${form}[${name}].$invalid ? ${form}[${name}].$error : {}`
+ ng-messages=`$input.$error`
+ ng-show=`($input.$dirty || $input.$touched || $input.$submitted) && $input.$invalid`
)
if block
block
if required
- +form-field__error({ name, error: 'required', message: `${errLbl} could not be empty!` })
+ +form-field__error({ error: 'required', message: `${errLbl} could not be empty!` })
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/email.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/email.pug b/modules/web-console/frontend/app/primitives/form-field/email.pug
index 5fccdb2..b68a520 100644
--- a/modules/web-console/frontend/app/primitives/form-field/email.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/email.pug
@@ -32,6 +32,6 @@ mixin form-field__email({ label, model, name, disabled, required, placeholder, t
block
if required
- +form-field__error({ name, error: 'required', message: `${errLbl} could not be empty!` })
+ +form-field__error({ error: 'required', message: `${errLbl} could not be empty!` })
- +form-field__error({ name, error: 'email', message: `${errLbl} has invalid format!` })
+ +form-field__error({ error: 'email', message: `${errLbl} has invalid format!` })
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/error.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/error.pug b/modules/web-console/frontend/app/primitives/form-field/error.pug
index 34b03c2..9b44c3c 100644
--- a/modules/web-console/frontend/app/primitives/form-field/error.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/error.pug
@@ -16,6 +16,7 @@
mixin form-field__error({ error, message })
.form-field__error(ng-message=error)
+ div #{ message }
div(
bs-tooltip=''
data-title=message
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/index.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/index.pug b/modules/web-console/frontend/app/primitives/form-field/index.pug
index 9b67d6c..5a54f21 100644
--- a/modules/web-console/frontend/app/primitives/form-field/index.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/index.pug
@@ -25,3 +25,5 @@ include ./password
include ./phone
include ./dropdown
include ./checkbox
+include ./typeahead
+include ./radio
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/index.scss
----------------------------------------------------------------------
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 070dfe7..0330e58 100644
--- a/modules/web-console/frontend/app/primitives/form-field/index.scss
+++ b/modules/web-console/frontend/app/primitives/form-field/index.scss
@@ -194,11 +194,24 @@
font-style: normal;
color: $gray-light;
}
+
+ svg {
+ flex: 0 0 auto;
+ margin-left: 4px;
+ }
+
+ [ignite-icon='info'] {
+ position: relative;
+ top: 1px;
+
+ color: $ignite-brand-success;
+ }
}
&__control {
overflow: visible;
display: flex;
+ flex-direction: row;
width: 100%;
& > input::placeholder,
@@ -226,6 +239,7 @@
box-shadow: none;
color: $text-color;
+ font-size: 14px;
text-align: left;
line-height: 16px;
@@ -264,6 +278,27 @@
}
}
+ &__control-group {
+ input {
+ min-width: 0;
+ margin-right: -1px;
+
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+
+ &:focus {
+ z-index: 1;
+ }
+ }
+
+ input + * {
+ border-top-left-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+ flex: 0 0 auto;
+ width: 60px !important;
+ }
+ }
+
&__errors {
position: absolute;
right: 0;
@@ -302,7 +337,11 @@
width: 38px;
}
- div {
+ div:first-child {
+ display: none;
+ }
+
+ [bs-tooltip] {
z-index: 1;
position: absolute;
top: 0;
@@ -311,7 +350,7 @@
height: 36px;
}
- svg {
+ [ignite-icon] {
position: absolute;
top: 10px;
right: 0;
@@ -324,14 +363,93 @@
}
}
+.theme--ignite-errors-horizontal {
+ .form-field__control {
+ // Reset offset to appearance of input for invalid password
+ & > input[type='email'].ng-invalid.ng-touched,
+ & > input[type='text'].ng-invalid.ng-touched,
+ & > input[type='password'].ng-invalid.ng-touched {
+ padding-right: 0;
+ }
+ // Reset offset to appearance of dropdown for invalid data
+ & > button.select-toggle.ng-invalid.ng-touched {
+ &:after {
+ right: 10px;
+ }
+ }
+ }
+
+ .form-field__errors {
+ position: relative;
+
+ padding: 5px 10px 0px;
+
+ color: $ignite-brand-primary;
+ font-size: 12px;
+ line-height: 14px;
+
+ &:empty {
+ display: none;
+ }
+
+ [ng-message] + [ng-message] {
+ margin-top: 10px;
+ }
+ }
+
+ .form-field__error {
+ float: none;
+ width: auto;
+ height: auto;
+
+ text-align: left;
+ line-height: 14px;
+
+ div:first-child {
+ display: block;
+ }
+
+ [bs-tooltip],
+ [ignite-icon] {
+ display: none;
+ }
+ }
+
+ .form-field__error + .form-field__error {
+ margin-top: 10px;
+ }
+
+ .form-field__checkbox {
+ flex-wrap: wrap;
+
+ .form-field__errors {
+ margin-left: -10px;
+ flex-basis: 100%;
+
+ .form-field__error {
+ width: auto;
+
+ div {
+ width: auto;
+ }
+ }
+ }
+ }
+}
+
+.form-field__radio,
.form-field__checkbox {
$errorSize: 16px;
- display: flex;
+ display: inline-flex;
+ width: auto;
+
+ сursor: pointer;
.form-field {
&__label {
order: 1;
margin: 0;
+ cursor: pointer;
}
&__control {
@@ -376,6 +494,132 @@
}
}
+.form-field__radio {
+ .form-field__control {
+ padding: 2px 0;
+ }
+
+ .form-field__control > input[type='radio'] {
+ -webkit-appearance: none;
+
+ width: 13px;
+ height: 13px;
+ padding: 0;
+
+ background: white;
+ border: none;
+ border-radius: 50%;
+ box-shadow: inset 0 0 0 1px rgb(197, 197, 197);
+
+ &:focus {
+ outline: none;
+ border: none;
+ box-shadow: 0 0 0 2px rgba(0, 103, 185, .3),
+ inset 0 0 0 1px rgb(197, 197, 197);
+ }
+
+ &:checked {
+ border: none;
+ box-shadow: inset 0 0 0 5px rgba(0, 103, 185, 1);
+
+ &:focus {
+ box-shadow: 0 0 0 2px rgba(0, 103, 185, .3),
+ inset 0 0 0 5px rgba(0, 103, 185, 1);
+ }
+ }
+ }
+}
+
+.form-field__checkbox {
+ .form-field__control > input[type='checkbox'] {
+ border-radius: 2px;
+
+ background-image: url(/images/checkbox.svg);
+ width: 12px !important;
+ height: 12px !important;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-repeat: no-repeat;
+ background-size: 100%;
+ padding: 0;
+ border: none;
+
+ &:checked {
+ background-image: url(/images/checkbox-active.svg);
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ }
+
+ &:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(0, 103, 185, .3);
+ }
+ }
+}
+
+.form-field--inline {
+ display: inline-block;
+ width: auto;
+
+ .form-field {
+ display: flex;
+ align-items: baseline;
+ }
+
+ .form-field__label {
+ white-space: nowrap;
+ }
+
+ form-field-size,
+ .form-field__text {
+ .form-field__control {
+ margin-left: 10px;
+ }
+ }
+
+ .form-field__dropdown,
+ .form-field__datepicker,
+ .form-field__timepicker {
+ .form-field__control {
+ width: auto;
+
+ input,
+ button {
+ color: transparent;
+
+ text-shadow: 0 0 0 $ignite-brand-success;
+
+ border: none;
+ box-shadow: none;
+
+ background: linear-gradient(to right, rgb(0, 103, 185), transparent) 0px 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;
+ margin-left: 10px;
+ margin-right: 10px;
+
+ &:hover, &:focus {
+ text-shadow: 0 0 0 change-color($ignite-brand-success, $lightness: 26%);
+ }
+ }
+ }
+ }
+
+ .form-field__dropdown {
+ button::after {
+ display: none;
+ }
+ }
+}
+
.form-field__password {
// Validation error notification will overlap with visibility button if it's not moved more to the left
input[type='password'].ng-invalid.ng-touched,
@@ -400,10 +644,44 @@
}
}
+.form-field__dropdown {
+ .form-field__control {
+ > button:not(.btn-ignite) {
+ padding-top: 10px;
+ }
+ }
+}
+
+.form-field__ace {
+ .ace_editor {
+ width: 100%;
+ min-height: 70px;
+ margin: 0;
+
+ border: solid 1px #c5c5c5;
+ border-radius: 4px;
+ background-color: #ffffff;
+ box-shadow: none;
+
+ .ace_content {
+ padding-left: 2px;
+ }
+
+ &.ace_focus {
+ border-color: $ignite-brand-success;
+ box-shadow: none;
+ }
+ }
+}
+
+.form-field.ignite-form-field label.required {
+ margin-left: 0 !important;
+}
+
.form-fieldset {
padding: 10px;
- border: 1px solid hsla(0,0%,77%,.5);
+ border: 1px solid hsla(0, 0%, 77%, .5);
border-radius: 4px;
legend {
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/input.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/input.pug b/modules/web-console/frontend/app/primitives/form-field/input.pug
index 0fee77b..4d45813 100644
--- a/modules/web-console/frontend/app/primitives/form-field/input.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/input.pug
@@ -14,9 +14,9 @@
See the License for the specific language governing permissions and
limitations under the License.
-mixin form-field__input({ name, model, disabled, required, placeholder })
+mixin form-field__input({ name, model, disabled, required, placeholder, namePostfix = '' })
input(
- id=`{{ ${name} }}Input`
+ id=`{{ ${name} }}${ namePostfix }Input`
name=`{{ ${name} }}`
placeholder=placeholder
@@ -24,5 +24,6 @@ mixin form-field__input({ name, model, disabled, required, placeholder })
ng-required=required && `${required}`
ng-disabled=disabled && `${disabled}`
- ng-focus='tableReset()'
+ expose-ignite-form-field-control='$input'
+
)&attributes(attributes ? attributes.attributes ? attributes.attributes : attributes : {})
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/label.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/label.pug b/modules/web-console/frontend/app/primitives/form-field/label.pug
index d725f9d..74ddecb 100644
--- a/modules/web-console/frontend/app/primitives/form-field/label.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/label.pug
@@ -14,17 +14,18 @@
See the License for the specific language governing permissions and
limitations under the License.
-mixin form-field__label({ label, name, required, optional, disabled })
- -var colon = label[label.length-1] === ':' ? ':' : '';
- - label = label[label.length-1] === ':' ? label.substring(0, label.length - 1) : label
- - optional = optional ? ' <i>(optional)</i>' : '';
+mixin form-field__label({ label, name, required, optional, disabled, namePostfix = '' })
+ if label
+ -var colon = label[label.length-1] === ':' ? ':' : '';
+ - label = label[label.length-1] === ':' ? label.substring(0, label.length - 1) : label
+ - optional = optional ? ' <i>(optional)</i>' : '';
- label.form-field__label(
- id=name && `{{ ${name} }}Label`
- for=name && `{{ ${name} }}Input`
- class=`{{ ${required} ? 'required' : '' }}`
- ng-disabled=disabled && `${disabled}`
- )
- span !{label}!{optional}!{colon}
- if block
- block
+ label.form-field__label(
+ id=name && `{{ ${name} }}Label`
+ for=name && `{{ ${name} }}${ namePostfix }Input`
+ class=`{{ ${required} ? 'required' : '' }}`
+ ng-disabled=disabled && `${disabled}`
+ )
+ span !{label}!{optional}!{colon}
+ if block
+ block
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/number.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/number.pug b/modules/web-console/frontend/app/primitives/form-field/number.pug
index 11f8e22..7755415 100644
--- a/modules/web-console/frontend/app/primitives/form-field/number.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/number.pug
@@ -14,23 +14,24 @@
See the License for the specific language governing permissions and
limitations under the License.
-mixin form-field__number({ label, model, name, disabled, required, placeholder, tip, min, max, step, postfix })
+mixin form-field__number({ label, model, name, disabled, required, placeholder, tip, min, max, step = '1', postfix })
-var errLbl = label.substring(0, label.length - 1)
- .form-field
- +form-field__label({ label, name, required })
+ .form-field.ignite-form-field
+ +form-field__label({ label, name, required, disabled })
+form-field__tooltip({ title: tip, options: tipOpts })
.form-field__control(class=postfix && 'form-field__control--postfix' data-postfix=postfix)
- attributes.type = 'number'
- attributes.min = min ? min : '0'
- attributes.max = max ? max : '{{ Number.MAX_VALUE }}'
- - attributes.step = step ? step : '1'
+ - attributes.step = step
+form-field__input({ name, model, disabled, required, placeholder })(attributes=attributes)
.form-field__errors(
data-postfix=postfix
- ng-messages=`(${form}[${name}].$dirty || ${form}[${name}].$touched || ${form}[${name}].$submitted) && ${form}[${name}].$invalid ? ${form}[${name}].$error : {}`
+ ng-messages=`$input.$error`
+ ng-show=`($input.$dirty || $input.$touched || $input.$submitted) && $input.$invalid`
)
if block
block
@@ -38,10 +39,10 @@ mixin form-field__number({ label, model, name, disabled, required, placeholder,
if required
+form-field__error({ error: 'required', message: `${errLbl} could not be empty!` })
- if min
- +form-field__error({ error: 'min', message: `${errLbl} is less than allowable minimum: ${ min || 0 }`})
+ +form-field__error({ error: 'min', message: `${errLbl} is less than allowable minimum: ${ min || 0 }`})
- if max
- +form-field__error({ error: 'max', message: `${errLbl} is more than allowable maximum: ${ max }`})
+ +form-field__error({ error: 'max', message: `${errLbl} is more than allowable maximum: ${ max }`})
+
+ +form-field__error({ error: 'step', message: `${errLbl} step should be ${step || 1}` })
+form-field__error({ error: 'number', message: 'Only numbers allowed' })
http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/password.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/password.pug b/modules/web-console/frontend/app/primitives/form-field/password.pug
index 40e1aa9..6b9818b 100644
--- a/modules/web-console/frontend/app/primitives/form-field/password.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/password.pug
@@ -42,6 +42,6 @@ mixin form-field__password({ label, model, name, disabled, required, placeholder
block
if required
- +form-field__error({ name, error: 'required', message: `${errLbl} could not be empty!` })
+ +form-field__error({ error: 'required', message: `${errLbl} could not be empty!` })
- +form-field__error({ name, error: 'mismatch', message: `Password does not match the confirm password!` })
+ +form-field__error({ error: 'mismatch', message: `Password does not match the confirm password!` })