IGNITE-843: Reworked tables L&F.
Project: http://git-wip-us.apache.org/repos/asf/incubator-ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-ignite/commit/e7088d5d Tree: http://git-wip-us.apache.org/repos/asf/incubator-ignite/tree/e7088d5d Diff: http://git-wip-us.apache.org/repos/asf/incubator-ignite/diff/e7088d5d Branch: refs/heads/ignite-1121 Commit: e7088d5dc8ee352270813233d0c4d7d7b475ad91 Parents: 766a6c2 Author: AKuznetsov <akuznet...@gridgain.com> Authored: Thu Jul 23 09:38:30 2015 +0700 Committer: AKuznetsov <akuznet...@gridgain.com> Committed: Thu Jul 23 09:38:30 2015 +0700 ---------------------------------------------------------------------- .../main/js/controllers/metadata-controller.js | 2 + .../src/main/js/public/stylesheets/style.less | 10 + .../src/main/js/views/includes/controls.jade | 194 ++++++++++--------- 3 files changed, 114 insertions(+), 92 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/e7088d5d/modules/web-control-center/src/main/js/controllers/metadata-controller.js ---------------------------------------------------------------------- diff --git a/modules/web-control-center/src/main/js/controllers/metadata-controller.js b/modules/web-control-center/src/main/js/controllers/metadata-controller.js index b62cde5..74ece5c 100644 --- a/modules/web-control-center/src/main/js/controllers/metadata-controller.js +++ b/modules/web-control-center/src/main/js/controllers/metadata-controller.js @@ -305,6 +305,8 @@ controlCenterModule.controller('metadataController', ['$scope', '$http', '$commo $scope.selectedItem = item; $scope.backupItem = angular.copy(item); + + $scope.panels.activePanel = [0]; }; // Add new metadata. http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/e7088d5d/modules/web-control-center/src/main/js/public/stylesheets/style.less ---------------------------------------------------------------------- diff --git a/modules/web-control-center/src/main/js/public/stylesheets/style.less b/modules/web-control-center/src/main/js/public/stylesheets/style.less index 4900581..e05f0ff 100644 --- a/modules/web-control-center/src/main/js/public/stylesheets/style.less +++ b/modules/web-control-center/src/main/js/public/stylesheets/style.less @@ -827,6 +827,16 @@ button .caret, .btn .caret { border: thin dotted lightgrey; } +.table-details { + border-radius: 5px; + border: thin dotted lightgrey; + + margin-top: 10px; + + padding-left: 10px; + padding-right: 5px; +} + .tooltip.right .tooltip-arrow { border-right-color: @ignite-red; } http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/e7088d5d/modules/web-control-center/src/main/js/views/includes/controls.jade ---------------------------------------------------------------------- diff --git a/modules/web-control-center/src/main/js/views/includes/controls.jade b/modules/web-control-center/src/main/js/views/includes/controls.jade index 4a618fa..00ab6fa 100644 --- a/modules/web-control-center/src/main/js/views/includes/controls.jade +++ b/modules/web-control-center/src/main/js/views/includes/controls.jade @@ -38,19 +38,19 @@ mixin ico-exclamation(mdl, err, msg) i.fa.fa-exclamation-triangle.form-control-feedback(ng-show='inputForm["#{mdl}"].$error.#{err}' bs-tooltip data-title='#{msg}' type='button') mixin btn-save(show, click) - i.tipField.fa.fa-floppy-o(ng-show=show ng-click=click) + i.tipField.fa.fa-floppy-o(ng-show=show ng-click=click bs-tooltip data-title='Save item') mixin btn-add(click) - i.tipField.fa.fa-plus(ng-click=click) + i.tipField.fa.fa-plus(ng-click=click bs-tooltip data-title='Add new item') mixin btn-remove(click) - i.tipField.fa.fa-remove(ng-click=click) + i.tipField.fa.fa-remove(ng-click=click bs-tooltip data-title='Remove item') mixin btn-up(show, click) - i.tipField.fa.fa-arrow-up(ng-show=show ng-click=click) + i.tipField.fa.fa-arrow-up(ng-show=show ng-click=click bs-tooltip data-title='Move item up') mixin btn-down(show, click) - i.tipField.fa.fa-arrow-down(ng-show=show ng-click=click) + i.tipField.fa.fa-arrow-down(ng-show=show ng-click=click bs-tooltip data-title='Move item down') mixin table-pair-edit(keyModel, valModel, keyPlaceholder, valPlaceholder) .col-sm-6(style='float: right') @@ -63,22 +63,23 @@ mixin table-pair(header, tblMdl, keyFld, valFld, keyPlaceholder, valPlaceholder) .col-sm-6 label.table-header #{header}: +tipLabel('field.tip') - button.btn.btn-primary.fieldButton(ng-click='tableNewItem(field)') Add - table.links-edit.col-sm-12(st-table=tblMdl) - tbody - tr.col-sm-12(ng-repeat='item in #{tblMdl}') - td.col-sm-6 - div(ng-show='!tableEditing(field, $index)') - a.labelFormField(ng-click='curPair = tableStartEdit(backupItem, field, $index); curKey = curPair.#{keyFld}; curValue = curPair.#{valFld}') {{$index + 1}}) {{item.#{keyFld}}} / {{item.#{valFld}}} - +btn-remove('tableRemove(backupItem, field, $index)') - div(ng-show='tableEditing(field, $index)') - label.labelField {{$index + 1}}) - +btn-save('tablePairSaveVisible(curKey, curValue)', 'tablePairSave(tablePairValid, backupItem, field, curKey, curValue, $index)') - +table-pair-edit('curKey', 'curValue', keyPlaceholder, valPlaceholder) - tr.col-sm-12(ng-show='tableNewItemActive(field)') - td.col-sm-6 - +btn-save('tablePairSaveVisible(newKey, newValue)', 'tablePairSave(tablePairValid, backupItem, field, newKey, newValue, -1)') - +table-pair-edit('newKey', 'newValue', keyPlaceholder, valPlaceholder) + +btn-add('tableNewItem(field)') + .table-details(ng-show='(#{tblMdl} && #{tblMdl}.length > 0) || tableNewItemActive(field)') + table.links-edit.col-sm-12(st-table=tblMdl) + tbody + tr(ng-repeat='item in #{tblMdl}') + td.col-sm-12 + div(ng-show='!tableEditing(field, $index)') + a.labelFormField(ng-click='curPair = tableStartEdit(backupItem, field, $index); curKey = curPair.#{keyFld}; curValue = curPair.#{valFld}') {{$index + 1}}) {{item.#{keyFld}}} / {{item.#{valFld}}} + +btn-remove('tableRemove(backupItem, field, $index)') + div(ng-show='tableEditing(field, $index)') + label.labelField {{$index + 1}}) + +btn-save('tablePairSaveVisible(curKey, curValue)', 'tablePairSave(tablePairValid, backupItem, field, curKey, curValue, $index)') + +table-pair-edit('curKey', 'curValue', keyPlaceholder, valPlaceholder) + tr(ng-show='tableNewItemActive(field)') + td.col-sm-12 + +btn-save('tablePairSaveVisible(newKey, newValue)', 'tablePairSave(tablePairValid, backupItem, field, newKey, newValue, -1)') + +table-pair-edit('newKey', 'newValue', keyPlaceholder, valPlaceholder) mixin details-row - var lblDetailClasses = ['col-sm-4', 'details-label'] @@ -237,26 +238,29 @@ mixin form-row-custom(lblClasses, fieldClasses) .col-sm-6 label.table-header {{field.label}}: +tipLabel('field.tableTip') - button.btn.btn-primary.fieldButton(ng-click='tableNewItem(field)') Add - table.links-edit.col-sm-12(st-table='#{fieldMdl}') - tbody - tr.col-sm-12(ng-repeat='item in #{fieldMdl} track by $index') - td.col-sm-6 - div(ng-show='!tableEditing(field, $index)') - a.labelFormField(ng-click='curValue = tableStartEdit(backupItem, field, $index)') {{$index + 1}}) {{item | compact}} - +btn-remove('tableRemove(backupItem, field, $index)') - +btn-down('field.reordering && tableSimpleDownVisible(backupItem, field, $index)', 'tableSimpleDown(backupItem, field, $index)') - +btn-up('field.reordering && $index > 0', 'tableSimpleUp(backupItem, field, $index)') - div(ng-show='tableEditing(field, $index)') - label.labelField {{$index + 1}}) - +btn-save('tableSimpleSaveVisible(curValue)', 'tableSimpleSave(tableSimpleValid, backupItem, field, curValue, $index)') - .input-tip - input.form-control(type='text' ng-model='curValue' placeholder='{{field.placeholder}}') - tr.col-sm-12(ng-show='tableNewItemActive(field)') - td.col-sm-6 - +btn-save('tableSimpleSaveVisible(newValue)', 'tableSimpleSave(tableSimpleValid, backupItem, field, newValue, -1)') - .input-tip - input.form-control(type='text' ng-model='newValue' placeholder='{{field.placeholder}}') + +btn-add('tableNewItem(field)') + .col-sm-12(ng-show='(#{fieldMdl} && #{fieldMdl}.length > 0) || tableNewItemActive(field)') + .col-sm-6 + .table-details + table.links-edit.col-sm-12(st-table='#{fieldMdl}') + tbody + tr(ng-repeat='item in #{fieldMdl} track by $index') + td.col-sm-12 + div(ng-show='!tableEditing(field, $index)') + a.labelFormField(ng-click='curValue = tableStartEdit(backupItem, field, $index)') {{$index + 1}}) {{item | compact}} + +btn-remove('tableRemove(backupItem, field, $index)') + +btn-down('field.reordering && tableSimpleDownVisible(backupItem, field, $index)', 'tableSimpleDown(backupItem, field, $index)') + +btn-up('field.reordering && $index > 0', 'tableSimpleUp(backupItem, field, $index)') + div(ng-show='tableEditing(field, $index)') + label.labelField {{$index + 1}}) + +btn-save('tableSimpleSaveVisible(curValue)', 'tableSimpleSave(tableSimpleValid, backupItem, field, curValue, $index)') + .input-tip + input.form-control(type='text' ng-model='curValue' placeholder='{{field.placeholder}}') + tr(ng-show='tableNewItemActive(field)') + td.col-sm-12 + +btn-save('tableSimpleSaveVisible(newValue)', 'tableSimpleSave(tableSimpleValid, backupItem, field, newValue, -1)') + .input-tip + input.form-control(type='text' ng-model='newValue' placeholder='{{field.placeholder}}') div(ng-switch-when='indexedTypes') +table-pair('Index key-value type pairs', fieldMdl, 'keyClass', 'valueClass', 'Key class full name', 'Value class full name') div(ng-switch-when='queryFields' ng-hide=fieldHide) @@ -265,58 +269,64 @@ mixin form-row-custom(lblClasses, fieldClasses) .col-sm-6 label.table-header {{field.label}}: +tipLabel('field.tip') - button.btn.btn-primary.fieldButton(ng-click='tableNewItem(field)') Add - table.links-edit.col-sm-12(st-table=fieldMdl) - tbody - tr.col-sm-12(ng-repeat='item in #{fieldMdl}') - td.col-sm-6 - div(ng-show='!tableEditing(field, $index)') - a.labelFormField(ng-click='curField = tableStartEdit(backupItem, field, $index); curDbName = curField.dbName; curDbType = curField.dbType; curJavaName = curField.javaName; curJavaType = curField.javaType') {{$index + 1}}) {{item.dbName}} / {{item.dbType}} / {{item.javaName}} / {{item.javaType}} - +btn-remove('tableRemove(backupItem, field, $index)') - div(ng-if='tableEditing(field, $index)') - label.labelField {{$index + 1}}) - +btn-save('tableDbFieldSaveVisible(curDbName, curDbType, curJavaName, curJavaType)', 'tableDbFieldSave(field, curDbName, curDbType, curJavaName, curJavaType, $index)') - +table-db-field-edit('curDbName', 'curDbType', 'curJavaName', 'curJavaType') - tr(ng-show='tableNewItemActive(field)') - td.col-sm-6 - +btn-save('tableDbFieldSaveVisible(newDbName, newDbType, newJavaName, newJavaType)', 'tableDbFieldSave(field, newDbName, newDbType, newJavaName, newJavaType, -1)') - +table-db-field-edit('newDbName', 'newDbType', 'newJavaName', 'newJavaType') + +btn-add('tableNewItem(field)') + .col-sm-12(ng-show='(#{fieldMdl} && #{fieldMdl}.length > 0) || tableNewItemActive(field)') + .col-sm-6 + .table-details + table.links-edit.col-sm-12(st-table=fieldMdl) + tbody + tr(ng-repeat='item in #{fieldMdl}') + td.col-sm-12 + div(ng-show='!tableEditing(field, $index)') + a.labelFormField(ng-click='curField = tableStartEdit(backupItem, field, $index); curDbName = curField.dbName; curDbType = curField.dbType; curJavaName = curField.javaName; curJavaType = curField.javaType') {{$index + 1}}) {{item.dbName}} / {{item.dbType}} / {{item.javaName}} / {{item.javaType}} + +btn-remove('tableRemove(backupItem, field, $index)') + div(ng-if='tableEditing(field, $index)') + label.labelField {{$index + 1}}) + +btn-save('tableDbFieldSaveVisible(curDbName, curDbType, curJavaName, curJavaType)', 'tableDbFieldSave(field, curDbName, curDbType, curJavaName, curJavaType, $index)') + +table-db-field-edit('curDbName', 'curDbType', 'curJavaName', 'curJavaType') + tr(ng-show='tableNewItemActive(field)') + td.col-sm-12 + +btn-save('tableDbFieldSaveVisible(newDbName, newDbType, newJavaName, newJavaType)', 'tableDbFieldSave(field, newDbName, newDbType, newJavaName, newJavaType, -1)') + +table-db-field-edit('newDbName', 'newDbType', 'newJavaName', 'newJavaType') div(ng-switch-when='queryGroups' ng-hide=fieldHide) .col-sm-6 label.table-header {{field.label}}: +tipLabel('field.tip') - button.btn.btn-primary.fieldButton(ng-click='tableNewItem(field)') Add - table.links-edit.col-sm-12(st-table=fieldMdl) - tbody - tr.col-sm-12(ng-repeat='group in #{fieldMdl}') - td.col-sm-6 - div - .col-sm-12(ng-show='!tableEditing(field, $index)') - a.labelFormField(ng-click='curGroup = tableStartEdit(backupItem, field, $index); curGroupName = curGroup.name; curFields = curGroup.fields') {{$index + 1}}) {{group.name}} - +btn-remove('tableRemove(backupItem, field, $index)') - +btn-add('tableGroupNewItem($index); newDirection = "ASC"') - div(ng-show='tableEditing(field, $index)') - label.labelField {{$index + 1}}) - +btn-save('tableGroupSaveVisible(curGroupName)', 'tableGroupSave(curGroupName, $index)') - .input-tip - input.form-control(type='text' ng-model='curGroupName' placeholder='Index name') - div - table.links-edit.col-sm-12(st-table='group.fields' ng-init='groupIndex = $index') - tr(ng-repeat='groupItem in group.fields') - td - div(ng-show='!tableGroupItemEditing(groupIndex, $index)') - a.labelFormField(ng-click='curGroupItem = tableGroupItemStartEdit(groupIndex, $index); curFieldName = curGroupItem.name; curClassName = curGroupItem.className; curDirection = curGroupItem.direction') {{$index + 1}}) {{groupItem.name}} / {{groupItem.className}} / {{groupItem.direction}} - +btn-remove('tableRemoveGroupItem(group, $index)') - div(ng-show='tableGroupItemEditing(groupIndex, $index)') - label.labelField {{$index + 1}}) - +btn-save('tableGroupItemSaveVisible(curFieldName, curClassName)', 'tableGroupItemSave(curFieldName, curClassName, curDirection, groupIndex, $index)') - +table-group-item-edit('curFieldName', 'curClassName', 'curDirection') - tr.col-sm-12(style='padding-left: 18px' ng-show='tableGroupNewItemActive(groupIndex)') - td - +btn-save('tableGroupItemSaveVisible(newFieldName, newClassName)', 'tableGroupItemSave(newFieldName, newClassName, newDirection, groupIndex, -1)') - +table-group-item-edit('newFieldName', 'newClassName', 'newDirection') - tr.col-sm-12(ng-show='tableNewItemActive(field)') - td.col-sm-6 - +btn-save('tableGroupSaveVisible(newGroupName)', 'tableGroupSave(newGroupName, -1)') - .input-tip - input.form-control(type='text' ng-model='newGroupName' placeholder='Group name') \ No newline at end of file + +btn-add('tableNewItem(field)') + .col-sm-12(ng-show='(#{fieldMdl} && #{fieldMdl}.length > 0) || tableNewItemActive(field)') + .col-sm-6 + .table-details + table.links-edit(st-table=fieldMdl) + tbody + tr(ng-repeat='group in #{fieldMdl}') + td.col-sm-12 + div + .col-sm-12(ng-show='!tableEditing(field, $index)') + a.labelFormField(ng-click='curGroup = tableStartEdit(backupItem, field, $index); curGroupName = curGroup.name; curFields = curGroup.fields') {{$index + 1}}) {{group.name}} + +btn-remove('tableRemove(backupItem, field, $index)') + +btn-add('tableGroupNewItem($index); newDirection = "ASC"') + div(ng-show='tableEditing(field, $index)') + label.labelField {{$index + 1}}) + +btn-save('tableGroupSaveVisible(curGroupName)', 'tableGroupSave(curGroupName, $index)') + .input-tip + input.form-control(type='text' ng-model='curGroupName' placeholder='Index name') + div + table.links-edit.col-sm-12(st-table='group.fields' ng-init='groupIndex = $index') + tr(ng-repeat='groupItem in group.fields') + td + div(ng-show='!tableGroupItemEditing(groupIndex, $index)') + a.labelFormField(ng-click='curGroupItem = tableGroupItemStartEdit(groupIndex, $index); curFieldName = curGroupItem.name; curClassName = curGroupItem.className; curDirection = curGroupItem.direction') {{$index + 1}}) {{groupItem.name}} / {{groupItem.className}} / {{groupItem.direction}} + +btn-remove('tableRemoveGroupItem(group, $index)') + div(ng-show='tableGroupItemEditing(groupIndex, $index)') + label.labelField {{$index + 1}}) + +btn-save('tableGroupItemSaveVisible(curFieldName, curClassName)', 'tableGroupItemSave(curFieldName, curClassName, curDirection, groupIndex, $index)') + +table-group-item-edit('curFieldName', 'curClassName', 'curDirection') + tr.col-sm-12(style='padding-left: 18px' ng-show='tableGroupNewItemActive(groupIndex)') + td + +btn-save('tableGroupItemSaveVisible(newFieldName, newClassName)', 'tableGroupItemSave(newFieldName, newClassName, newDirection, groupIndex, -1)') + +table-group-item-edit('newFieldName', 'newClassName', 'newDirection') + tr(ng-show='tableNewItemActive(field)') + td.col-sm-12 + +btn-save('tableGroupSaveVisible(newGroupName)', 'tableGroupSave(newGroupName, -1)') + .input-tip + input.form-control(type='text' ng-model='newGroupName' placeholder='Group name') \ No newline at end of file
