IGNITE-4943 Improve design of table on Admin Panel screen.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/8c9c60a4 Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/8c9c60a4 Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/8c9c60a4 Branch: refs/heads/ignite-4929 Commit: 8c9c60a48e3431950791c8cfeb9236f6d034e1cb Parents: 4ad2657 Author: Dmitriy Shabalin <[email protected]> Authored: Wed Apr 12 10:19:06 2017 +0700 Committer: Andrey Novikov <[email protected]> Committed: Wed Apr 12 10:19:06 2017 +0700 ---------------------------------------------------------------------- modules/web-console/frontend/.eslintrc | 2 +- modules/web-console/frontend/app/app.js | 3 - .../form-field-datepicker.pug | 59 ---- .../form-field-datepicker.scss | 20 -- .../list-of-registered-users.categories.js | 4 +- .../list-of-registered-users.column-defs.js | 44 +-- .../list-of-registered-users.controller.js | 132 ++++++-- .../list-of-registered-users.scss | 4 + .../list-of-registered-users.tpl.pug | 73 ++--- .../ui-grid-header/ui-grid-header.scss | 91 ------ .../ui-grid-header/ui-grid-header.tpl.pug | 29 -- .../ui-grid-settings/ui-grid-settings.pug | 33 -- .../ui-grid-settings/ui-grid-settings.scss | 144 --------- .../frontend/app/helpers/jade/mixins.pug | 3 + .../frontend/app/modules/states/admin.state.js | 11 +- .../frontend/app/primitives/badge/index.scss | 4 + .../frontend/app/primitives/btn/index.scss | 41 +++ .../app/primitives/datepicker/index.pug | 60 ++++ .../app/primitives/datepicker/index.scss | 64 ++++ .../frontend/app/primitives/dropdown/index.pug | 43 +++ .../frontend/app/primitives/dropdown/index.scss | 82 +++++ .../frontend/app/primitives/index.js | 8 + .../frontend/app/primitives/page/index.scss | 35 ++ .../frontend/app/primitives/panel/index.scss | 51 +++ .../frontend/app/primitives/tabs/index.scss | 15 + .../app/primitives/ui-grid-header/index.scss | 91 ++++++ .../app/primitives/ui-grid-header/index.tpl.pug | 29 ++ .../app/primitives/ui-grid-settings/index.pug | 33 ++ .../app/primitives/ui-grid-settings/index.scss | 171 ++++++++++ .../frontend/app/primitives/ui-grid/index.scss | 321 +++++++++++++++++++ .../frontend/public/stylesheets/style.scss | 5 - modules/web-console/frontend/views/base2.pug | 22 ++ .../frontend/views/settings/admin.tpl.pug | 3 +- .../web-console/frontend/views/sql/sql.tpl.pug | 1 - 34 files changed, 1249 insertions(+), 482 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/.eslintrc ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/.eslintrc b/modules/web-console/frontend/.eslintrc index 958c6d1..adbeb84 100644 --- a/modules/web-console/frontend/.eslintrc +++ b/modules/web-console/frontend/.eslintrc @@ -143,7 +143,7 @@ rules: no-script-url: 0 no-self-compare: 2 no-sequences: 2 - no-shadow: 2 + no-shadow: 0 no-shadow-restricted-names: 2 no-spaced-func: 2 no-sparse-arrays: 1 http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/app.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/app.js b/modules/web-console/frontend/app/app.js index 26d3ad5..80e32a1 100644 --- a/modules/web-console/frontend/app/app.js +++ b/modules/web-console/frontend/app/app.js @@ -17,9 +17,6 @@ import '../public/stylesheets/style.scss'; import '../app/primitives'; -import './components/ui-grid-header/ui-grid-header.scss'; -import './components/ui-grid-settings/ui-grid-settings.scss'; -import './components/form-field-datepicker/form-field-datepicker.scss'; import './app.config'; http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/form-field-datepicker/form-field-datepicker.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/form-field-datepicker/form-field-datepicker.pug b/modules/web-console/frontend/app/components/form-field-datepicker/form-field-datepicker.pug deleted file mode 100644 index d70476f..0000000 --- a/modules/web-console/frontend/app/components/form-field-datepicker/form-field-datepicker.pug +++ /dev/null @@ -1,59 +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-datepicker(label, model, name, mindate, maxdate, disabled, required, placeholder, tip) - mixin form-field-input() - input.form-control( - id=`{{ ${name} }}Input` - name=`{{ ${name} }}` - - placeholder=placeholder - - data-ng-model=model - - data-ng-required=required && `${required}` - data-ng-disabled=disabled && `${disabled}` - - bs-datepicker - data-date-format='MMM yyyy' - data-start-view='1' - data-min-view='1' - - data-min-date=mindate ? `{{ ${mindate} }}` : false - data-max-date=maxdate ? `{{ ${maxdate} }}` : `today` - - data-container='body > .wrapper' - - tabindex='0' - - onkeydown="return false" - - data-ignite-form-panel-field='' - )&attributes(attributes.attributes) - - .ignite-form-field - if name - +ignite-form-field__label(label, name, required) - - .ignite-form-field__control - if tip - i.tipField.icon-help(bs-tooltip='' data-title=tip) - - if block - block - - .input-tip - +form-field-input(attributes=attributes) http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/form-field-datepicker/form-field-datepicker.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/form-field-datepicker/form-field-datepicker.scss b/modules/web-console/frontend/app/components/form-field-datepicker/form-field-datepicker.scss deleted file mode 100644 index 0f6fe6e..0000000 --- a/modules/web-console/frontend/app/components/form-field-datepicker/form-field-datepicker.scss +++ /dev/null @@ -1,20 +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. - */ - -.datepicker.dropdown-menu tbody button { - height: 100%; -} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.categories.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.categories.js b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.categories.js index 95edf8b..01b1fc8 100644 --- a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.categories.js +++ b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.categories.js @@ -16,8 +16,8 @@ */ export default [ - {name: 'Actions', visible: true, selectable: true}, - {name: 'User', visible: true, selectable: true}, + {name: 'Actions', visible: false, selectable: false}, + {name: 'User', visible: true, selectable: false}, {name: 'Email', visible: true, selectable: true}, {name: 'Company', visible: true, selectable: true}, {name: 'Country', visible: true, selectable: true}, http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.column-defs.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.column-defs.js b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.column-defs.js index e859acf..54bfb03 100644 --- a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.column-defs.js +++ b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.column-defs.js @@ -17,7 +17,7 @@ const ICON_SORT = '<span ui-grid-one-bind-id-grid="col.uid + \'-sortdir-text\'" ui-grid-visible="col.sort.direction" aria-label="Sort Descending"><i ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }" title="" aria-hidden="true"></i></span>'; -const USER_TEMPLATE = '<div class="ui-grid-cell-contents"><i class="pull-left" ng-class="row.entity.admin ? \'icon-admin\' : \'icon-user\'"></i>{{ COL_FIELD }}</div>'; +const USER_TEMPLATE = '<div class="ui-grid-cell-contents"><i class="pull-left" ng-class="row.entity.admin ? \'icon-admin\' : \'icon-user\'"></i> {{ COL_FIELD }}</div>'; const CLUSTER_HEADER_TEMPLATE = `<div class='ui-grid-cell-contents' bs-tooltip data-title='{{ col.headerTooltip(col) }}' data-placement='top'><i class='fa fa-sitemap'></i>${ICON_SORT}</div>`; const MODEL_HEADER_TEMPLATE = `<div class='ui-grid-cell-contents' bs-tooltip data-title='{{ col.headerTooltip(col) }}' data-placement='top'><i class='fa fa-object-group'></i>${ICON_SORT}</div>`; @@ -49,32 +49,32 @@ const ACTIONS_TEMPLATE = ` const EMAIL_TEMPLATE = '<div class="ui-grid-cell-contents"><a ng-href="mailto:{{ COL_FIELD }}">{{ COL_FIELD }}</a></div>'; export default [ - {name: 'actions', displayName: 'Actions', categoryDisplayName: 'Actions', cellTemplate: ACTIONS_TEMPLATE, field: 'actions', minWidth: 70, width: 70, enableFiltering: false, enableSorting: false}, + {name: 'actions', displayName: 'Actions', categoryDisplayName: 'Actions', cellTemplate: ACTIONS_TEMPLATE, field: 'actions', minWidth: 70, width: 70, enableFiltering: false, enableSorting: false, visible: false}, {name: 'user', displayName: 'User', categoryDisplayName: 'User', field: 'userName', cellTemplate: USER_TEMPLATE, minWidth: 160, enableFiltering: true, filter: { placeholder: 'Filter by name...' }}, - {name: 'email', displayName: 'Email', categoryDisplayName: 'Email', field: 'email', cellTemplate: EMAIL_TEMPLATE, minWidth: 160, enableFiltering: true, filter: { placeholder: 'Filter by email...' }}, + {name: 'email', displayName: 'Email', categoryDisplayName: 'Email', field: 'email', cellTemplate: EMAIL_TEMPLATE, minWidth: 160, enableFiltering: false, filter: { placeholder: 'Filter by email...' }}, {name: 'company', displayName: 'Company', categoryDisplayName: 'Company', field: 'company', minWidth: 160, enableFiltering: true, filter: { placeholder: 'Filter by company...' }}, - {name: 'country', displayName: 'Country', categoryDisplayName: 'Country', field: 'countryCode', minWidth: 80, enableFiltering: true, filter: { placeholder: 'Filter by country...' }}, + {name: 'country', displayName: 'Country', categoryDisplayName: 'Country', field: 'countryCode', minWidth: 120, enableFiltering: true, filter: { placeholder: 'Filter by country...' }}, {name: 'lastlogin', displayName: 'Last login', categoryDisplayName: 'Last login', field: 'lastLogin', cellFilter: 'date:"M/d/yy HH:mm"', minWidth: 105, width: 105, enableFiltering: false, visible: false}, - {name: 'lastactivity', displayName: 'Last activity', categoryDisplayName: 'Last activity', field: 'lastActivity', cellFilter: 'date:"M/d/yy HH:mm"', minWidth: 115, width: 115, enableFiltering: false, visible: true, sort: { direction: 'desc', priority: 0 }}, + {name: 'lastactivity', displayName: 'Last activity', categoryDisplayName: 'Last activity', field: 'lastActivity', cellFilter: 'date:"M/d/yy HH:mm"', minWidth: 130, width: 130, enableFiltering: false, visible: true, sort: { direction: 'desc', priority: 0 }}, // Configurations - {name: 'cfg_clusters', displayName: 'Clusters count', categoryDisplayName: 'Configurations', headerCellTemplate: CLUSTER_HEADER_TEMPLATE, field: 'counters.clusters', type: 'number', headerTooltip: 'Clusters count', minWidth: 55, width: 55, enableFiltering: false, visible: false}, - {name: 'cfg_models', displayName: 'Models count', categoryDisplayName: 'Configurations', headerCellTemplate: MODEL_HEADER_TEMPLATE, field: 'counters.models', type: 'number', headerTooltip: 'Models count', minWidth: 55, width: 55, enableFiltering: false, visible: false}, - {name: 'cfg_caches', displayName: 'Caches count', categoryDisplayName: 'Configurations', headerCellTemplate: CACHE_HEADER_TEMPLATE, field: 'counters.caches', type: 'number', headerTooltip: 'Caches count', minWidth: 55, width: 55, enableFiltering: false, visible: false}, - {name: 'cfg_igfs', displayName: 'IGFS count', categoryDisplayName: 'Configurations', headerCellTemplate: IGFS_HEADER_TEMPLATE, field: 'counters.igfs', type: 'number', headerTooltip: 'IGFS count', minWidth: 55, width: 55, enableFiltering: false, visible: false}, + {name: 'cfg_clusters', displayName: 'Clusters count', categoryDisplayName: 'Configurations', headerCellTemplate: CLUSTER_HEADER_TEMPLATE, field: 'counters.clusters', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Clusters count', minWidth: 65, width: 65, enableFiltering: false, visible: false}, + {name: 'cfg_models', displayName: 'Models count', categoryDisplayName: 'Configurations', headerCellTemplate: MODEL_HEADER_TEMPLATE, field: 'counters.models', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Models count', minWidth: 65, width: 65, enableFiltering: false, visible: false}, + {name: 'cfg_caches', displayName: 'Caches count', categoryDisplayName: 'Configurations', headerCellTemplate: CACHE_HEADER_TEMPLATE, field: 'counters.caches', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Caches count', minWidth: 65, width: 65, enableFiltering: false, visible: false}, + {name: 'cfg_igfs', displayName: 'IGFS count', categoryDisplayName: 'Configurations', headerCellTemplate: IGFS_HEADER_TEMPLATE, field: 'counters.igfs', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'IGFS count', minWidth: 65, width: 65, enableFiltering: false, visible: false}, // Activities Total - {name: 'cfg', displayName: 'Cfg', categoryDisplayName: 'Total activities', field: 'activitiesTotal["configuration"] || 0', type: 'number', headerTooltip: 'Total count of configuration usages', minWidth: 55, width: 55, enableFiltering: false}, - {name: 'qry', displayName: 'Qry', categoryDisplayName: 'Total activities', field: 'activitiesTotal["queries"] || 0', type: 'number', headerTooltip: 'Total count of queries usages', minWidth: 55, width: 55, enableFiltering: false}, - {name: 'demo', displayName: 'Demo', categoryDisplayName: 'Total activities', field: 'activitiesTotal["demo"] || 0', type: 'number', headerTooltip: 'Total count of demo startup', minWidth: 65, width: 65, enableFiltering: false}, - {name: 'dnld', displayName: 'Dnld', categoryDisplayName: 'Total activities', field: 'activitiesDetail["/agent/download"] || 0', type: 'number', headerTooltip: 'Total count of agent downloads', minWidth: 55, width: 55, enableFiltering: false}, - {name: 'starts', displayName: 'Starts', categoryDisplayName: 'Total activities', field: 'activitiesDetail["/agent/start"] || 0', type: 'number', headerTooltip: 'Total count of agent startup', minWidth: 65, width: 65, enableFiltering: false}, + {name: 'cfg', displayName: 'Cfg', categoryDisplayName: 'Total activities', field: 'activitiesTotal["configuration"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Total count of configuration usages', minWidth: 70, width: 70, enableFiltering: false}, + {name: 'qry', displayName: 'Qry', categoryDisplayName: 'Total activities', field: 'activitiesTotal["queries"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Total count of queries usages', minWidth: 70, width: 70, enableFiltering: false}, + {name: 'demo', displayName: 'Demo', categoryDisplayName: 'Total activities', field: 'activitiesTotal["demo"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Total count of demo startup', minWidth: 85, width: 85, enableFiltering: false}, + {name: 'dnld', displayName: 'Dnld', categoryDisplayName: 'Total activities', field: 'activitiesDetail["/agent/download"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Total count of agent downloads', minWidth: 80, width: 80, enableFiltering: false}, + {name: 'starts', displayName: 'Starts', categoryDisplayName: 'Total activities', field: 'activitiesDetail["/agent/start"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Total count of agent startup', minWidth: 80, width: 80, enableFiltering: false}, // Activities Configuration - {name: 'clusters', displayName: 'Clusters', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/clusters"] || 0', type: 'number', headerTooltip: 'Configuration clusters', minWidth: 55, width: 80, enableFiltering: false, visible: false}, - {name: 'model', displayName: 'Model', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/domains"] || 0', type: 'number', headerTooltip: 'Configuration model', minWidth: 55, width: 80, enableFiltering: false, visible: false}, - {name: 'caches', displayName: 'Caches', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/caches"] || 0', type: 'number', headerTooltip: 'Configuration caches', minWidth: 55, width: 80, enableFiltering: false, visible: false}, - {name: 'igfs', displayName: 'IGFS', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/igfs"] || 0', type: 'number', headerTooltip: 'Configuration IGFS', minWidth: 55, width: 80, enableFiltering: false, visible: false}, - {name: 'summary', displayName: 'Summary', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/summary"] || 0', type: 'number', headerTooltip: 'Configuration summary', minWidth: 55, width: 80, enableFiltering: false, visible: false}, + {name: 'clusters', displayName: 'Clusters', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/clusters"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Configuration clusters', minWidth: 80, width: 80, enableFiltering: false, visible: false}, + {name: 'model', displayName: 'Model', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/domains"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Configuration model', minWidth: 80, width: 80, enableFiltering: false, visible: false}, + {name: 'caches', displayName: 'Caches', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/caches"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Configuration caches', minWidth: 80, width: 80, enableFiltering: false, visible: false}, + {name: 'igfs', displayName: 'IGFS', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/igfs"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Configuration IGFS', minWidth: 80, width: 80, enableFiltering: false, visible: false}, + {name: 'summary', displayName: 'Summary', categoryDisplayName: 'Configuration\'s activities', field: 'activitiesDetail["/configuration/summary"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Configuration summary', minWidth: 80, width: 80, enableFiltering: false, visible: false}, // Activities Queries - {name: 'execute', displayName: 'Execute', categoryDisplayName: 'Queries\' activities', field: 'activitiesDetail["/queries/execute"] || 0', type: 'number', headerTooltip: 'Query executions', minWidth: 55, width: 80, enableFiltering: false, visible: false}, - {name: 'explain', displayName: 'Explain', categoryDisplayName: 'Queries\' activities', field: 'activitiesDetail["/queries/explain"] || 0', type: 'number', headerTooltip: 'Query explain executions', minWidth: 55, width: 80, enableFiltering: false, visible: false}, - {name: 'scan', displayName: 'Scan', categoryDisplayName: 'Queries\' activities', field: 'activitiesDetail["/queries/scan"] || 0', type: 'number', headerTooltip: 'Scan query executions', minWidth: 55, width: 80, enableFiltering: false, visible: false} + {name: 'execute', displayName: 'Execute', categoryDisplayName: 'Queries\' activities', field: 'activitiesDetail["/queries/execute"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Query executions', minWidth: 65, width: 80, enableFiltering: false, visible: false}, + {name: 'explain', displayName: 'Explain', categoryDisplayName: 'Queries\' activities', field: 'activitiesDetail["/queries/explain"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Query explain executions', minWidth: 65, width: 80, enableFiltering: false, visible: false}, + {name: 'scan', displayName: 'Scan', categoryDisplayName: 'Queries\' activities', field: 'activitiesDetail["/queries/scan"] || 0', type: 'number', cellClass: 'ui-grid-number-cell', headerTooltip: 'Scan query executions', minWidth: 65, width: 80, enableFiltering: false, visible: false} ]; http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.controller.js b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.controller.js index acf76fa..3590229 100644 --- a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.controller.js +++ b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.controller.js @@ -15,14 +15,13 @@ * limitations under the License. */ -import headerTemplate from 'app/components/ui-grid-header/ui-grid-header.tpl.pug'; +import headerTemplate from 'app/primitives/ui-grid-header/index.tpl.pug'; import columnDefs from './list-of-registered-users.column-defs'; import categories from './list-of-registered-users.categories'; const rowTemplate = `<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" - ng-mouseover="grid.api.selection.selectRow(row.entity);" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" @@ -39,6 +38,8 @@ export default class IgniteListOfRegisteredUsersCtrl { $ctrl.groupBy = 'user'; + $ctrl.selected = []; + $ctrl.params = { startDate: new Date(), endDate: new Date() @@ -46,14 +47,20 @@ export default class IgniteListOfRegisteredUsersCtrl { $ctrl.uiGridGroupingConstants = uiGridGroupingConstants; - const becomeUser = (user) => { + User.read().then((user) => $ctrl.user = user); + + const becomeUser = () => { + const user = this.gridApi.selection.getSelectedRows()[0]; + AdminData.becomeUser(user._id) .then(() => User.load()) .then(() => $state.go('base.configuration.clusters')) .then(() => NotebookData.load()); }; - const removeUser = (user) => { + const removeUser = () => { + const user = this.gridApi.selection.getSelectedRows()[0]; + Confirm.confirm(`Are you sure you want to remove user: "${user.userName}"?`) .then(() => AdminData.removeUser(user)) .then(() => { @@ -65,7 +72,9 @@ export default class IgniteListOfRegisteredUsersCtrl { .then(() => $ctrl.adjustHeight($ctrl.gridOptions.data.length)); }; - const toggleAdmin = (user) => { + const toggleAdmin = () => { + const user = this.gridApi.selection.getSelectedRows()[0]; + if (user.adminChanging) return; @@ -76,7 +85,9 @@ export default class IgniteListOfRegisteredUsersCtrl { .finally(() => user.adminChanging = false); }; - const showActivities = (user) => { + const showActivities = () => { + const user = this.gridApi.selection.getSelectedRows()[0]; + return new ActivitiesUserDialog({ user }); }; @@ -92,6 +103,34 @@ export default class IgniteListOfRegisteredUsersCtrl { return renderableRows; }; + $ctrl.actionOptions = [ + { + action: 'Become this user', + click: becomeUser.bind(this), + available: true + }, + { + action: 'Revoke admin', + click: toggleAdmin.bind(this), + available: true + }, + { + action: 'Grant admin', + click: toggleAdmin.bind(this), + available: false + }, + { + action: 'Remove user', + click: removeUser.bind(this), + available: true + }, + { + action: 'Activity detail', + click: showActivities.bind(this), + available: true + } + ]; + $ctrl._userGridOptions = { columnDefs, categories @@ -99,30 +138,38 @@ export default class IgniteListOfRegisteredUsersCtrl { $ctrl.gridOptions = { data: [], - columnVirtualizationThreshold: 30, + columnDefs, categories, + headerTemplate, + columnVirtualizationThreshold: 30, rowTemplate, + rowHeight: 46, + selectWithCheckboxOnly: true, + selectionRowHeaderWidth: 52, + suppressRemoveSort: false, enableFiltering: true, + enableSelectAll: true, enableRowSelection: true, - enableRowHeaderSelection: false, + enableFullRowSelection: true, enableColumnMenus: false, multiSelect: false, modifierKeysToMultiSelect: true, - noUnselect: true, + noUnselect: false, fastWatch: true, exporterSuppressColumns: ['actions'], exporterCsvColumnSeparator: ';', onRegisterApi: (api) => { $ctrl.gridApi = api; - api.becomeUser = becomeUser; - api.removeUser = removeUser; - api.toggleAdmin = toggleAdmin; - api.showActivities = showActivities; + api.selection.on.rowSelectionChanged($scope, $ctrl._updateSelected.bind($ctrl)); + api.selection.on.rowSelectionChangedBatch($scope, $ctrl._updateSelected.bind($ctrl)); api.grid.registerRowsProcessor(companiesExcludeFilter, 50); + + $scope.$watch(() => $ctrl.gridApi.grid.getVisibleRows().length, (rows) => $ctrl.adjustHeight(rows)); + $scope.$watch(() => $ctrl.params.companiesExclude, () => $ctrl.gridApi.grid.refreshRows()); } }; @@ -142,7 +189,7 @@ export default class IgniteListOfRegisteredUsersCtrl { }); }; - const fitlerDates = (sdt, edt) => { + const filterDates = (sdt, edt) => { $ctrl.gridOptions.exporterCsvFilename = `web_console_users_${dtFilter(sdt, 'yyyy_MM')}.csv`; const startDate = Date.UTC(sdt.getFullYear(), sdt.getMonth(), 1); @@ -151,25 +198,37 @@ export default class IgniteListOfRegisteredUsersCtrl { reloadUsers({ startDate, endDate }); }; - $scope.$watch(() => $ctrl.params.companiesExclude, () => { - $ctrl.gridApi.grid.refreshRows(); - }); - - $scope.$watch(() => $ctrl.params.startDate, (sdt) => fitlerDates(sdt, $ctrl.params.endDate)); - $scope.$watch(() => $ctrl.params.endDate, (edt) => fitlerDates($ctrl.params.startDate, edt)); - - $scope.$watch(() => $ctrl.gridApi.grid.getVisibleRows().length, (length) => $ctrl.adjustHeight(length >= 20 ? 20 : length)); + $scope.$watch(() => $ctrl.params.startDate, (sdt) => filterDates(sdt, $ctrl.params.endDate)); + $scope.$watch(() => $ctrl.params.endDate, (edt) => filterDates($ctrl.params.startDate, edt)); } adjustHeight(rows) { - const height = Math.min(rows, 20) * 30 + 75; + // Add header height. + const height = Math.min(rows, 20) * 48 + 78; - // Remove header height. this.gridApi.grid.element.css('height', height + 'px'); this.gridApi.core.handleWindowResize(); } + _updateSelected() { + const ids = this.gridApi.selection.getSelectedRows().map(({ _id }) => _id).sort(); + + if (ids.length) { + const user = this.gridApi.selection.getSelectedRows()[0]; + const other = this.user._id !== user._id; + + this.actionOptions[1].available = other && user.admin; + this.actionOptions[2].available = other && !user.admin; + + this.actionOptions[0].available = other; + this.actionOptions[3].available = other; + } + + if (!_.isEqual(ids, this.selected)) + this.selected = ids; + } + _enableColumns(_categories, visible) { _.forEach(_categories, (cat) => { cat.visible = visible; @@ -180,6 +239,11 @@ export default class IgniteListOfRegisteredUsersCtrl { }); }); + // Check to all selected columns. + this.gridOptions.selectedAll = true; + + _.forEach(this._selectableColumns(), ({ visible }) => this.gridOptions.selectedAll = visible); + // Workaround for this.gridApi.grid.refresh() didn't return promise. this.gridApi.grid.processColumnsProcessors(this.gridApi.grid.columns) .then((renderableColumns) => this.gridApi.grid.setVisibleColumns(renderableColumns)) @@ -220,7 +284,6 @@ export default class IgniteListOfRegisteredUsersCtrl { this.groupBy = 'user'; this.gridApi.grouping.clearGrouping(); - this.gridOptions.categories = this._userGridOptions.categories; this.gridOptions.columnDefs = this._userGridOptions.columnDefs; } @@ -229,6 +292,7 @@ export default class IgniteListOfRegisteredUsersCtrl { this.groupBy = 'company'; this.gridApi.grouping.clearGrouping(); + this.gridApi.grouping.groupColumn('company'); this.gridApi.grouping.aggregateColumn('user', this.uiGridGroupingConstants.aggregation.COUNT); @@ -242,17 +306,18 @@ export default class IgniteListOfRegisteredUsersCtrl { const _categories = _.cloneDeep(categories); const _columnDefs = _.cloneDeep(columnDefs); - // Cut company category; + // Cut company category. const company = _categories.splice(3, 1)[0]; + company.selectable = false; - // Hide Actions category; + // Hide Actions category. _categories.splice(0, 1); _.forEach(_.filter(_columnDefs, {displayName: 'Actions'}), (col) => { col.visible = false; }); - // Add company as first column; + // Add company as first column. _categories.unshift(company); _.forEach(_columnDefs, (col) => { @@ -265,7 +330,7 @@ export default class IgniteListOfRegisteredUsersCtrl { col.customTreeAggregationFinalizerFn = (agg) => agg.rendered = agg.value; }); - // Set grouping to last activity column + // Set grouping to last activity column. const lastactivity = _.find(_columnDefs, { name: 'lastactivity' }); if (_.nonNil(lastactivity)) { @@ -296,17 +361,18 @@ export default class IgniteListOfRegisteredUsersCtrl { const _categories = _.cloneDeep(categories); const _columnDefs = _.cloneDeep(columnDefs); - // Cut country category; + // Cut country category. const country = _categories.splice(4, 1)[0]; + country.selectable = false; - // Hide Actions category; + // Hide Actions category. _categories.splice(0, 1); _.forEach(_.filter(_columnDefs, {displayName: 'Actions'}), (col) => { col.visible = false; }); - // Add company as first column; + // Add company as first column. _categories.unshift(country); _.forEach(_columnDefs, (col) => { @@ -319,7 +385,7 @@ export default class IgniteListOfRegisteredUsersCtrl { col.customTreeAggregationFinalizerFn = (agg) => agg.rendered = agg.value; }); - // Set grouping to last activity column + // Set grouping to last activity column. const lastactivity = _.find(_columnDefs, { name: 'lastactivity' }); if (_.nonNil(lastactivity)) { http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.scss b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.scss index 8059d70..d94fb2e 100644 --- a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.scss +++ b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.scss @@ -15,6 +15,10 @@ * limitations under the License. */ +ignite-list-of-registered-users { + display: block; +} + .list-of-registered-users { & > a { display: inline-block; http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug index ec4b4fd..c4fec37 100644 --- a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug +++ b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug @@ -15,58 +15,59 @@ limitations under the License. include /app/helpers/jade/mixins -include /app/components/form-field-datepicker/form-field-datepicker.pug mixin grid-settings() - i.fa.fa-bars(data-animation='am-flip-x' bs-dropdown='' aria-haspopup='true' aria-expanded='expanded' data-auto-close='1' data-trigger='click') - ul.select.dropdown-menu(role='menu') - li(ng-repeat='item in $ctrl.gridOptions.categories|filter:{selectable:true}') - a(ng-click='$ctrl.toggleColumns(item, !item.visible)') - i.fa.fa-check-square-o.pull-left(ng-if='item.visible') - i.fa.fa-square-o.pull-left(ng-if='!item.visible') - span {{::item.name}} - li.divider - li - a(ng-click='$ctrl.selectAllColumns()') Select all - li - a(ng-click='$ctrl.clearAllColumns()') Clear all - li.divider - li - a(ng-click='$hide()') Close - + .grid-settings + i.fa.fa-cog(data-animation='am-flip-x' bs-dropdown='' aria-haspopup='true' aria-expanded='expanded' data-auto-close='1' data-trigger='click') + ul.select.dropdown-menu(role='menu') + li + a(ng-click='$ctrl.gridOptions.selectedAll ? $ctrl.clearAllColumns() : $ctrl.selectAllColumns()') + i.fa.fa-check-square-o.pull-left(ng-if='$ctrl.gridOptions.selectedAll') + i.fa.fa-square-o.pull-left(ng-if='!$ctrl.gridOptions.selectedAll') + span All + li(ng-repeat='item in $ctrl.gridOptions.categories|filter:{selectable:true}') + a(ng-click='$ctrl.toggleColumns(item, !item.visible)') + i.fa.fa-check-square-o.pull-left(ng-if='item.visible') + i.fa.fa-square-o.pull-left(ng-if='!item.visible') + span {{::item.name}} .list-of-registered-users - ul.tabs + ul.tabs.tabs--blue li(role='presentation' ng-class='{ active: $ctrl.groupBy === "user" }') a(ng-click='$ctrl.groupByUser()') span Users - span.badge {{ $ctrl.gridOptions.data.length }} + span.badge.badge--blue {{ $ctrl.gridOptions.data.length }} li(role='presentation' ng-class='{ active: $ctrl.groupBy === "company" }') a(ng-click='$ctrl.groupByCompany()') span Companies - span.badge {{ $ctrl.companies.length }} + span.badge.badge--blue {{ $ctrl.companies.length }} li(role='presentation' ng-class='{ active: $ctrl.groupBy === "country" }') a(ng-click='$ctrl.groupByCountry()') span Countries - span.badge {{ $ctrl.countries.length }} + span.badge.badge--blue {{ $ctrl.countries.length }} - .panel.panel-default + .panel--ignite .panel-heading.ui-grid-settings - +grid-settings - label(ng-show='$ctrl.groupBy === "user"') Showing users: - strong {{ $ctrl.gridApi.grid.getVisibleRows().length }} - sub(ng-show='users.length === $ctrl.gridApi.grid.getVisibleRows().length') all - - -var form = 'admin' - form.pull-right(name=form novalidate) - button.btn.btn-primary(ng-click='$ctrl.exportCsv()' bs-tooltip data-title='Export table to csv') Export - - .ui-grid-settings-dateperiod - +ignite-form-field-datepicker('Period:', '$ctrl.params.startDate', '"period"', null, '$ctrl.params.endDate') - +ignite-form-field-datepicker('Period:', '$ctrl.params.endDate', null, '$ctrl.params.startDate', null) - - .ui-grid-settings-filter + .panel-title(ng-hide='$ctrl.selected.length') + span(ng-if='$ctrl.groupBy === "user"') List of registered users + span(ng-if='$ctrl.groupBy === "company"') List of registered companies + span(ng-if='$ctrl.groupBy === "country"') List of registered countries + +grid-settings + button.btn.btn--stroke(ng-click='$ctrl.exportCsv()' bs-tooltip data-title='Export table to csv') + i.fa.fa-file-excel-o.export-icon + form.ui-grid-settings-dateperiod(name=form novalidate) + -var form = 'admin' + +ignite-form-field-datepicker('Period: from', '$ctrl.params.startDate', '"startDate"', null, '$ctrl.params.endDate') + +ignite-form-field-datepicker('to', '$ctrl.params.endDate', '"endDate"', '$ctrl.params.startDate', null) + form.ui-grid-settings-filter + -var form = 'admin' +ignite-form-field-text('Exclude:', '$ctrl.params.companiesExclude', '"exclude"', false, false, 'Exclude by company name...') + .panel-selected(ng-show='$ctrl.selected.length') + .pull-right + +ignite-form-field-bsdropdown('Actions', '$ctrl.action', 'action', false, false, '$ctrl.actionOptions') + div + | {{ $ctrl.selected.length }} item{{ $ctrl.selected.length > 1 ? 's' : '' }} selected + .panel-collapse .grid.ui-grid--ignite(ui-grid='$ctrl.gridOptions' ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-pinning ui-grid-grouping) http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/ui-grid-header/ui-grid-header.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-header/ui-grid-header.scss b/modules/web-console/frontend/app/components/ui-grid-header/ui-grid-header.scss deleted file mode 100644 index 4530c02..0000000 --- a/modules/web-console/frontend/app/components/ui-grid-header/ui-grid-header.scss +++ /dev/null @@ -1,91 +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. - */ - -.ui-grid-header--subcategories { - .ui-grid-row:nth-child(even) .ui-grid-cell.cell-total { - background-color: rgba(102,175,233,.6); - } - - .ui-grid-row:nth-child(odd) .ui-grid-cell.cell-total { - background-color: rgba(102,175,233,.3); - } - - .ui-grid-header-cell-row { - height: 30px; - } - - .ui-grid-header-cell { - .ui-grid-cell-contents > span:not(.ui-grid-header-cell-label) { - right: 3px; - } - } - - .ui-grid-header-cell [role="columnheader"] { - display: flex; - - flex-wrap: wrap; - align-items: center; - justify-content: center; - - height: 100%; - - & > div { - flex: 1 100%; - height: auto; - } - - & > div[ui-grid-filter] { - flex: auto; - } - } - - .ui-grid-header-span { - position: relative; - border-right: 0; - background: #f5f5f5; - - .ng-hide + .ui-grid-header-cell-row .ui-grid-header-cell { - height: 58px; - } - - .ng-hide + .ui-grid-header-cell-row .ui-grid-cell-contents { - padding: 5px 5px; - } - - .ui-grid-column-resizer.right { - top: -100px; - } - .ng-hide + .ui-grid-header-cell-row .ui-grid-column-resizer.right { - bottom: -100px; - } - - &.ui-grid-header-cell .ui-grid-header-cell .ui-grid-column-resizer.right { - border-right-width: 0; - } - &.ui-grid-header-cell .ui-grid-header-cell:last-child .ui-grid-column-resizer.right { - border-right-width: 1px; - } - - & > div > .ui-grid-cell-contents { - border-bottom: 1px solid #d4d4d4; - } - } - - input { - line-height: 21px; - } -} http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/ui-grid-header/ui-grid-header.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-header/ui-grid-header.tpl.pug b/modules/web-console/frontend/app/components/ui-grid-header/ui-grid-header.tpl.pug deleted file mode 100644 index 9b14fca..0000000 --- a/modules/web-console/frontend/app/components/ui-grid-header/ui-grid-header.tpl.pug +++ /dev/null @@ -1,29 +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. - -.ui-grid-header.ui-grid-header--subcategories(role='rowgroup') - .ui-grid-top-panel - .ui-grid-header-viewport - .ui-grid-header-canvas - .ui-grid-header-cell-wrapper(ng-style='colContainer.headerCellWrapperStyle()') - .ui-grid-header-cell-row(role='row') - .ui-grid-header-span.ui-grid-header-cell.ui-grid-clearfix.ui-grid-category(ng-repeat='cat in grid.options.categories', ng-if='cat.visible && \ - (colContainer.renderedColumns | uiGridSubcategories: cat.name).length > 0') - div(ng-show='(colContainer.renderedColumns|uiGridSubcategories:cat.name).length > 1') - .ui-grid-cell-contents {{ cat.name }} - .ui-grid-header-cell-row - .ui-grid-header-cell.ui-grid-clearfix(ng-repeat='col in (colContainer.renderedColumns|uiGridSubcategories:cat.name) track by col.uid' ui-grid-header-cell='' col='col' render-index='$index') - .ui-grid-header-cell.ui-grid-clearfix(ng-if='col.colDef.name === "treeBaseRowHeaderCol"' ng-repeat='col in colContainer.renderedColumns track by col.uid' ui-grid-header-cell='' col='col' render-index='$index') http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/ui-grid-settings/ui-grid-settings.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-settings/ui-grid-settings.pug b/modules/web-console/frontend/app/components/ui-grid-settings/ui-grid-settings.pug deleted file mode 100644 index 8f1487e..0000000 --- a/modules/web-console/frontend/app/components/ui-grid-settings/ui-grid-settings.pug +++ /dev/null @@ -1,33 +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 ui-grid-settings() - .ui-grid-settings - i.fa.fa-bars(data-animation='am-flip-x' bs-dropdown='' aria-haspopup='true' aria-expanded='expanded' data-auto-close='1' data-trigger='click') - ul.select.dropdown-menu(role='menu') - li(ng-repeat='item in paragraph.gridOptions.categories|filter:{selectable:true}') - a(ng-click='paragraph.toggleColumns(item, !item.visible)') - i.fa.fa-check-square-o.pull-left(ng-if='item.visible') - i.fa.fa-square-o.pull-left(ng-if='!item.visible') - span {{::item.name}} - li.divider - li - a(ng-click='paragraph.selectAllColumns()') Select all - li - a(ng-click='paragraph.clearAllColumns()') Clear all - li.divider - li - a(ng-click='$hide()') Close http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/components/ui-grid-settings/ui-grid-settings.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-settings/ui-grid-settings.scss b/modules/web-console/frontend/app/components/ui-grid-settings/ui-grid-settings.scss deleted file mode 100644 index d0a31f0..0000000 --- a/modules/web-console/frontend/app/components/ui-grid-settings/ui-grid-settings.scss +++ /dev/null @@ -1,144 +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. - */ - -.ui-grid-settings { - ul.select.dropdown-menu > li > a { - padding-top: 0; - padding-bottom: 0; - } - - ul.select.dropdown-menu > li > a > i { - position: relative; - line-height: 26px; - width: 14px; - margin-left: 0; - color: inherit; - } - - ul.select.dropdown-menu > li > a > span { - line-height: 26px; - padding-left: 5px; - padding-right: 8px; - cursor: pointer; - } - - .btn { - float: right; - - line-height: 20px; - margin-right: 0; - } - - &-filter { - float: right; - - .ignite-form-field { - width: 280px; - margin-right: 10px; - - &__label { - } - - &__control { - } - - &:nth-child(1) { - float: left; - - .ignite-form-field__label { - width: 30%; - } - - .ignite-form-field__control { - width: 70%; - } - } - } - } - - &-number-filter { - float: right; - - .ignite-form-field { - width: 180px; - margin-right: 0; - - &__label { - } - - &__control { - } - - &:nth-child(1) { - float: left; - - .ignite-form-field__label { - margin-right: 0; - width: 70%; - max-width: 100%; - } - - .ignite-form-field__control { - width: 30%; - } - } - } - - button { - width: auto; - display: inline-block; - margin-left: 5px; - } - } - - &-dateperiod { - float: right; - - .ignite-form-field { - width: 160px; - margin-right: 10px; - - &__label { - } - - &__control { - } - - &:nth-child(1) { - float: left; - - .ignite-form-field__label { - width: 40%; - } - - .ignite-form-field__control { - width: 60%; - } - } - - &:nth-child(2) { - float: left; - - width: 100px; - - .ignite-form-field__control { - width: 100%; - } - } - } - } -} http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/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 bf49fa9..3b6cd19 100644 --- a/modules/web-console/frontend/app/helpers/jade/mixins.pug +++ b/modules/web-console/frontend/app/helpers/jade/mixins.pug @@ -16,6 +16,9 @@ include ./form include ../../primitives/tooltip/index +include ../../primitives/datepicker/index +include ../../primitives/dropdown/index +include ../../primitives/ui-grid-settings/index //- Mixin for advanced options toggle. mixin advanced-options-toggle(click, cond, showMessage, hideMessage) http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/modules/states/admin.state.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/modules/states/admin.state.js b/modules/web-console/frontend/app/modules/states/admin.state.js index 93a38dd..ea9ba49 100644 --- a/modules/web-console/frontend/app/modules/states/admin.state.js +++ b/modules/web-console/frontend/app/modules/states/admin.state.js @@ -18,6 +18,7 @@ import angular from 'angular'; import templateUrl from 'views/settings/admin.tpl.pug'; +import template from 'views/base2.pug'; angular .module('ignite-console.states.admin', [ @@ -28,7 +29,15 @@ angular $stateProvider .state('settings.admin', { url: '/admin', - templateUrl, + views: { + '@': { + template + }, + '@settings.admin': { + templateUrl + } + }, + // templateUrl, onEnter: AclRoute.checkAccess('admin_page'), metaTags: { title: 'Admin panel' http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/badge/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/badge/index.scss b/modules/web-console/frontend/app/primitives/badge/index.scss index 837ab5b..8ce477f 100644 --- a/modules/web-console/frontend/app/primitives/badge/index.scss +++ b/modules/web-console/frontend/app/primitives/badge/index.scss @@ -33,4 +33,8 @@ line-height: 12px; background-color: $brand-primary; +} + +.badge--blue { + background-color: #0067b9; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/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 new file mode 100644 index 0000000..1eb027f --- /dev/null +++ b/modules/web-console/frontend/app/primitives/btn/index.scss @@ -0,0 +1,41 @@ +/* + * 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. + */ + +.btn.btn--stroke { + min-width: 36px; + height: 36px; + + line-height: 36px; + text-align: center; + + color: #ee2b27; + border: 1px solid #ee2b27; + background: initial; + + &:hover, &:focus { + color: #a8110f; + border-color: #a8110f; + } + + &:focus { + outline: none; + } + + i { + margin: 0; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/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 new file mode 100644 index 0000000..10453c0 --- /dev/null +++ b/modules/web-console/frontend/app/primitives/datepicker/index.pug @@ -0,0 +1,60 @@ +//- + 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-datepicker(label, model, name, mindate, maxdate, disabled, required, placeholder, tip) + mixin form-field-input() + input.form-control( + id=`{{ ${name} }}Input` + name=`{{ ${name} }}` + + placeholder=placeholder + + data-ng-model=model + + data-ng-required=required && `${required}` + data-ng-disabled=disabled && `${disabled}` + + bs-datepicker + data-date-format='MMM yyyy' + data-start-view='1' + data-min-view='1' + + data-min-date=mindate ? `{{ ${mindate} }}` : false + data-max-date=maxdate ? `{{ ${maxdate} }}` : `today` + + data-placement='bottom' + data-container='.docs-content' + + tabindex='0' + + onkeydown="return false" + + data-ignite-form-panel-field='' + )&attributes(attributes.attributes) + + .datepicker--ignite.ignite-form-field + if name + +ignite-form-field__label(label, name, required) + + .ignite-form-field__control + if tip + i.tipField.icon-help(bs-tooltip='' data-title=tip) + + if block + block + + .input-tip + +form-field-input(attributes=attributes) http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/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 new file mode 100644 index 0000000..786a2c1 --- /dev/null +++ b/modules/web-console/frontend/app/primitives/datepicker/index.scss @@ -0,0 +1,64 @@ +/* + * 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. + */ + +.datepicker.dropdown-menu tbody button { + height: 100%; +} + +.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 { + 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 #ee2b27; + + border: none; + box-shadow: none; + + &:hover, &:focus { + text-shadow: 0 0 0 #a8110f; + } + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/dropdown/index.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/dropdown/index.pug b/modules/web-console/frontend/app/primitives/dropdown/index.pug new file mode 100644 index 0000000..a6476eb --- /dev/null +++ b/modules/web-console/frontend/app/primitives/dropdown/index.pug @@ -0,0 +1,43 @@ +//- + 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-bsdropdown(label, model, name, disabled, required, options, tip) + .dropdown--ignite.ignite-form-field + .ignite-form-field__control( + data-ng-model=model + + data-ng-required=required && `${required}` + data-ng-disabled=disabled && `${disabled}` || `!${options}.length` + + bs-dropdown='' + + data-trigger='hover focus' + data-placement='bottom-right' + data-container='self' + data-animation='' + + tabindex='0' + aria-haspopup='true' + aria-expanded='false' + )&attributes(attributes.attributes) + a.dropdown-toggle + span !{label} + span.caret + + ul.dropdown-menu(role='menu') + li(ng-repeat=`item in ${options}` ng-if='item.available') + a(ng-click='item.click()') {{ item.action }} + http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/dropdown/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/dropdown/index.scss b/modules/web-console/frontend/app/primitives/dropdown/index.scss new file mode 100644 index 0000000..e474534 --- /dev/null +++ b/modules/web-console/frontend/app/primitives/dropdown/index.scss @@ -0,0 +1,82 @@ +/* + * 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. + */ + +.ignite-form-field { + & &__control { + &:first-child:last-child { + width: 100% !important; + } + } +} + +.dropdown--ignite { + font-style: normal; + + .ignite-form-field__control { + outline: none; + + & > a { + display: inline-block; + height: 36px; + + padding: 0 15px; + + border: 1px solid #ee2b27; + border-radius: 4px; + + color: #de4538; + line-height: 36px; + + .caret { + margin-left: 9px; + margin-right: -6px; + } + } + + &:hover, &:focus { + & > a { + border-color: #a8110f; + + color: #a8110f; + text-decoration: none; + } + } + + ul { + padding: 0; + + border-color: #c5c5c5; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3); + + a { + padding-left: 15px; + padding-right: 15px; + + color: #393939; + line-height: 26px; + + &:hover { + color: #a8110f; + } + } + + li:not(:last-child) { + border-bottom: 1px solid #dddddd; + } + } + } +} http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/index.js b/modules/web-console/frontend/app/primitives/index.js index 7940f7a..e72f087 100644 --- a/modules/web-console/frontend/app/primitives/index.js +++ b/modules/web-console/frontend/app/primitives/index.js @@ -16,4 +16,12 @@ */ import './badge/index.scss'; +import './btn/index.scss'; +import './datepicker/index.scss'; import './tabs/index.scss'; +import './panel/index.scss'; +import './dropdown/index.scss'; +import './ui-grid/index.scss'; +import './ui-grid-header/index.scss'; +import './ui-grid-settings/index.scss'; +import './page/index.scss'; http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/page/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/page/index.scss b/modules/web-console/frontend/app/primitives/page/index.scss new file mode 100644 index 0000000..fb749e7 --- /dev/null +++ b/modules/web-console/frontend/app/primitives/page/index.scss @@ -0,0 +1,35 @@ +/* + * 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. + */ + +.docs-content { + header { + margin: 40px 0 30px; + border: none; + background-color: initial; + + h1 { + color: #393939; + font-family: Roboto; + font-size: 24px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 24px; + letter-spacing: normal; + } + } +} http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/panel/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/panel/index.scss b/modules/web-console/frontend/app/primitives/panel/index.scss new file mode 100644 index 0000000..826d33e --- /dev/null +++ b/modules/web-console/frontend/app/primitives/panel/index.scss @@ -0,0 +1,51 @@ +/* + * 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'; + +.panel--ignite { + border: none; + border-radius: 0; + + font-family: Roboto; + + background-color: white; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); + + .panel-heading { + height: auto; + padding: 22px 20px; + + background-color: initial; + border-bottom: 1px solid $panel-default-border; + + &:hover { + text-decoration: none; + } + } + + .panel-title { + font-size: 16px; + line-height: 36px; + } + + .panel-selected { + font-size: 14px; + font-style: italic; + line-height: 36px; + } +} http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/tabs/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/tabs/index.scss b/modules/web-console/frontend/app/primitives/tabs/index.scss index eed88cb..ade990d 100644 --- a/modules/web-console/frontend/app/primitives/tabs/index.scss +++ b/modules/web-console/frontend/app/primitives/tabs/index.scss @@ -27,6 +27,8 @@ ul.tabs { list-style: none; padding-left: 0; + margin-bottom: 0; + border-bottom: 1px solid $nav-tabs-border-color; li { @@ -46,6 +48,7 @@ ul.tabs { color: $text-color; font-size: $font-size; + font-family: Roboto; text-align: center; line-height: $height - 2*$offset-vertical; @@ -70,4 +73,16 @@ ul.tabs { margin-left: 45px; } } +} + +ul.tabs.tabs--blue { + li { + &.active { + border-color: #0067b9; + } + + &:not(.active):hover { + border-color: #94bbdd; + } + } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/ui-grid-header/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/ui-grid-header/index.scss b/modules/web-console/frontend/app/primitives/ui-grid-header/index.scss new file mode 100644 index 0000000..4530c02 --- /dev/null +++ b/modules/web-console/frontend/app/primitives/ui-grid-header/index.scss @@ -0,0 +1,91 @@ +/* + * 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. + */ + +.ui-grid-header--subcategories { + .ui-grid-row:nth-child(even) .ui-grid-cell.cell-total { + background-color: rgba(102,175,233,.6); + } + + .ui-grid-row:nth-child(odd) .ui-grid-cell.cell-total { + background-color: rgba(102,175,233,.3); + } + + .ui-grid-header-cell-row { + height: 30px; + } + + .ui-grid-header-cell { + .ui-grid-cell-contents > span:not(.ui-grid-header-cell-label) { + right: 3px; + } + } + + .ui-grid-header-cell [role="columnheader"] { + display: flex; + + flex-wrap: wrap; + align-items: center; + justify-content: center; + + height: 100%; + + & > div { + flex: 1 100%; + height: auto; + } + + & > div[ui-grid-filter] { + flex: auto; + } + } + + .ui-grid-header-span { + position: relative; + border-right: 0; + background: #f5f5f5; + + .ng-hide + .ui-grid-header-cell-row .ui-grid-header-cell { + height: 58px; + } + + .ng-hide + .ui-grid-header-cell-row .ui-grid-cell-contents { + padding: 5px 5px; + } + + .ui-grid-column-resizer.right { + top: -100px; + } + .ng-hide + .ui-grid-header-cell-row .ui-grid-column-resizer.right { + bottom: -100px; + } + + &.ui-grid-header-cell .ui-grid-header-cell .ui-grid-column-resizer.right { + border-right-width: 0; + } + &.ui-grid-header-cell .ui-grid-header-cell:last-child .ui-grid-column-resizer.right { + border-right-width: 1px; + } + + & > div > .ui-grid-cell-contents { + border-bottom: 1px solid #d4d4d4; + } + } + + input { + line-height: 21px; + } +} http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/ui-grid-header/index.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/ui-grid-header/index.tpl.pug b/modules/web-console/frontend/app/primitives/ui-grid-header/index.tpl.pug new file mode 100644 index 0000000..1b91d9e --- /dev/null +++ b/modules/web-console/frontend/app/primitives/ui-grid-header/index.tpl.pug @@ -0,0 +1,29 @@ +//- + 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. + +.ui-grid-header.ui-grid-header--subcategories(role='rowgroup') + .ui-grid-top-panel + .ui-grid-header-viewport + .ui-grid-header-canvas + .ui-grid-header-cell-wrapper(ng-style='colContainer.headerCellWrapperStyle()') + .ui-grid-header-cell-row(role='row') + .ui-grid-header-span.ui-grid-header-cell.ui-grid-clearfix.ui-grid-category(ng-repeat='cat in grid.options.categories', ng-if='cat.visible && \ + (colContainer.renderedColumns | uiGridSubcategories: cat.name).length > 0') + div(ng-show='(colContainer.renderedColumns|uiGridSubcategories:cat.name).length > 1') + .ui-grid-cell-contents {{ cat.name }} + .ui-grid-header-cell-row + .ui-grid-header-cell.ui-grid-clearfix(ng-repeat='col in (colContainer.renderedColumns|uiGridSubcategories:cat.name) track by col.uid' ui-grid-header-cell='' col='col' render-index='$index') + .ui-grid-header-cell.ui-grid-clearfix(ng-if='col.colDef.name === "treeBaseRowHeaderCol" || col.colDef.name === "selectionRowHeaderCol"' ng-repeat='col in colContainer.renderedColumns track by col.uid' ui-grid-header-cell='' col='col' render-index='$index' ng-class='{ disabled: !grid.options.multiSelect && col.colDef.name === "selectionRowHeaderCol"}') http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/ui-grid-settings/index.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/ui-grid-settings/index.pug b/modules/web-console/frontend/app/primitives/ui-grid-settings/index.pug new file mode 100644 index 0000000..8f1487e --- /dev/null +++ b/modules/web-console/frontend/app/primitives/ui-grid-settings/index.pug @@ -0,0 +1,33 @@ +//- + 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 ui-grid-settings() + .ui-grid-settings + i.fa.fa-bars(data-animation='am-flip-x' bs-dropdown='' aria-haspopup='true' aria-expanded='expanded' data-auto-close='1' data-trigger='click') + ul.select.dropdown-menu(role='menu') + li(ng-repeat='item in paragraph.gridOptions.categories|filter:{selectable:true}') + a(ng-click='paragraph.toggleColumns(item, !item.visible)') + i.fa.fa-check-square-o.pull-left(ng-if='item.visible') + i.fa.fa-square-o.pull-left(ng-if='!item.visible') + span {{::item.name}} + li.divider + li + a(ng-click='paragraph.selectAllColumns()') Select all + li + a(ng-click='paragraph.clearAllColumns()') Clear all + li.divider + li + a(ng-click='$hide()') Close http://git-wip-us.apache.org/repos/asf/ignite/blob/8c9c60a4/modules/web-console/frontend/app/primitives/ui-grid-settings/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/ui-grid-settings/index.scss b/modules/web-console/frontend/app/primitives/ui-grid-settings/index.scss new file mode 100644 index 0000000..3519eb2 --- /dev/null +++ b/modules/web-console/frontend/app/primitives/ui-grid-settings/index.scss @@ -0,0 +1,171 @@ +/* + * 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. + */ + +.ui-grid-settings { + ul.select.dropdown-menu { + padding: 0; + + & > li { + & > a { + padding: 3px 12px; + + & > span { + line-height: 26px; + padding-left: 10px; + padding-right: 8px; + cursor: pointer; + } + + & > i { + position: relative; + + width: 12px; + height: 12px; + margin-top: 7px; + margin-left: 0; + + color: inherit; + line-height: 26px; + + border: 1px solid #afafaf; + border-radius: 2px; + background-color: #FFF; + + box-shadow: inset 0 1px 1px #ccc; + + &.fa-square-o:before, + &.fa-check-square-o:before { + content: ''; + } + + &.fa-check-square-o { + border-color: #0067b9; + background-color: #0067b9; + + box-shadow: none; + } + + &.fa-check-square-o:before { + content: ''; + + position: absolute; + top: 0px; + left: 3px; + + width: 4px; + height: 8px; + + border: solid #FFF; + border-width: 0 2px 2px 0; + + transform: rotate(35deg); + } + } + } + + &:not(:last-child) { + border-bottom: 1px solid #dddddd; + } + } + } + + .btn { + float: right; + + line-height: 20px; + margin-right: 0; + } + + &-filter { + float: right; + margin-right: 35px; + + .ignite-form-field { + $height: 36px; + + width: 260px; + + font-size: 14px; + + label { + width: auto; + max-width: initial; + margin-right: 10px; + + font-size: inherit; + line-height: $height; + } + + &__control { + width: 190px; + + input { + &:focus { + box-shadow: none; + } + } + } + } + } + + &-number-filter { + float: right; + + .ignite-form-field { + width: 180px; + margin-right: 0; + + &__label { + } + + &__control { + } + + &:nth-child(1) { + float: left; + + .ignite-form-field__label { + margin-right: 0; + width: 70%; + max-width: 100%; + } + + .ignite-form-field__control { + width: 30%; + } + } + } + + button { + width: auto; + display: inline-block; + margin-left: 5px; + } + } + + &-dateperiod { + float: right; + display: block; + margin-right: 35px; + } +} + +.grid-settings { + display: inline-block; + + margin-left: 10px; +} \ No newline at end of file
