IGNITE-4010 Web Console: Implemented responsive full screen layout.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/ac62e614 Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/ac62e614 Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/ac62e614 Branch: refs/heads/ignite-8446 Commit: ac62e6147b897351dee4de1b47d85aaee3f9b024 Parents: 99e023b Author: Alexander Kalinin <verba...@yandex.ru> Authored: Wed Jul 25 11:50:59 2018 +0700 Committer: Alexey Kuznetsov <akuznet...@apache.org> Committed: Wed Jul 25 11:50:59 2018 +0700 ---------------------------------------------------------------------- modules/web-console/frontend/app/app.js | 7 +- .../connected-clusters-badge/style.scss | 2 +- .../page-configure-overview/style.scss | 2 +- .../page-configure-overview/template.pug | 14 +- .../app/components/page-configure/states.js | 6 - .../app/components/page-configure/template.pug | 10 +- .../page-forgot-password/template.pug | 2 +- .../app/components/page-profile/index.js | 12 +- .../app/components/page-profile/style.scss | 3 + .../app/components/page-profile/template.pug | 16 +- .../components/queries-notebook/style.scss | 47 +++--- .../queries-notebook/template.tpl.pug | 161 +++++++++---------- .../queries-notebooks-list/controller.js | 2 +- .../app/components/page-queries/index.js | 33 +--- .../app/components/page-signin/template.pug | 2 +- .../app/components/page-signup/template.pug | 2 +- .../components/web-console-footer/template.pug | 2 +- .../components/web-console-header/style.scss | 7 +- .../components/web-console-header/template.pug | 4 +- .../frontend/app/modules/states/admin.state.js | 12 +- .../app/modules/states/settings.state.js | 33 ++++ .../frontend/app/primitives/badge/index.scss | 2 +- .../frontend/app/primitives/btn/index.scss | 5 + .../frontend/public/stylesheets/style.scss | 73 +++++---- modules/web-console/frontend/views/403.tpl.pug | 2 +- modules/web-console/frontend/views/404.tpl.pug | 2 +- modules/web-console/frontend/views/base.pug | 4 +- modules/web-console/frontend/views/base2.pug | 26 --- .../frontend/views/includes/header-left.pug | 2 +- .../frontend/views/includes/header-right.pug | 2 +- .../frontend/webpack/webpack.common.js | 2 +- 31 files changed, 249 insertions(+), 250 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/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 1ffc367..276eac8 100644 --- a/modules/web-console/frontend/app/app.js +++ b/modules/web-console/frontend/app/app.js @@ -29,6 +29,7 @@ import './modules/demo/Demo.module'; import './modules/states/logout.state'; import './modules/states/admin.state'; import './modules/states/errors.state'; +import './modules/states/settings.state'; // ignite:modules import './core'; @@ -193,6 +194,7 @@ export default angular.module('ignite-console', [ 'ignite-console.states.logout', 'ignite-console.states.admin', 'ignite-console.states.errors', + 'ignite-console.states.settings', // Common modules. 'ignite-console.dialog', 'ignite-console.navbar', @@ -311,11 +313,6 @@ export default angular.module('ignite-console', [ url: '', abstract: true, template: baseTemplate - }) - .state('base.settings', { - url: '/settings', - abstract: true, - template: '<ui-view></ui-view>' }); $urlRouterProvider.otherwise('/404'); http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/connected-clusters-badge/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/connected-clusters-badge/style.scss b/modules/web-console/frontend/app/components/connected-clusters-badge/style.scss index e53b71a..3b2d202 100644 --- a/modules/web-console/frontend/app/components/connected-clusters-badge/style.scss +++ b/modules/web-console/frontend/app/components/connected-clusters-badge/style.scss @@ -21,7 +21,7 @@ connected-clusters { div { position: absolute; top: 0; - right: 0; + right: 30px; display: flex; align-items: center; http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-configure-overview/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-configure-overview/style.scss b/modules/web-console/frontend/app/components/page-configure-overview/style.scss index e198fa4..e461d06 100644 --- a/modules/web-console/frontend/app/components/page-configure-overview/style.scss +++ b/modules/web-console/frontend/app/components/page-configure-overview/style.scss @@ -27,7 +27,7 @@ page-configure-overview { flex-direction: row; &>* { - margin-left: 10px; + margin-left: 20px; } } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-configure-overview/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-configure-overview/template.pug b/modules/web-console/frontend/app/components/page-configure-overview/template.pug index ee7e4ec..be8e999 100644 --- a/modules/web-console/frontend/app/components/page-configure-overview/template.pug +++ b/modules/web-console/frontend/app/components/page-configure-overview/template.pug @@ -14,11 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. -h1.pc-page-header Configuration - version-picker - -.pco-relative-root - .pco-table-context-buttons +header.header-with-selector + div + h1 Configuration + version-picker + div a.btn-ignite.btn-ignite--primary( type='button' ui-sref='^.edit({clusterID: "new"})' @@ -26,6 +26,8 @@ h1.pc-page-header Configuration svg.icon-left(ignite-icon='plus') | Create Cluster Configuration button-import-models(cluster-id='::"new"') + +.pco-relative-root pc-items-table( table-title='::"My Cluster Configurations"' column-defs='$ctrl.clustersColumnDefs' @@ -39,4 +41,4 @@ h1.pc-page-header Configuration ) footer-slot(ng-hide='($ctrl.shortClusters$|async:this).length' style='font-style: italic') | You have no cluster configurations. - a.link-success(ui-sref='base.configuration.edit.basic({clusterID: "new"})') Create one? \ No newline at end of file + a.link-success(ui-sref='base.configuration.edit.basic({clusterID: "new"})') Create one? http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-configure/states.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-configure/states.js b/modules/web-console/frontend/app/components/page-configure/states.js index a75e851..e76b18e 100644 --- a/modules/web-console/frontend/app/components/page-configure/states.js +++ b/modules/web-console/frontend/app/components/page-configure/states.js @@ -15,7 +15,6 @@ * limitations under the License. */ -import base2 from 'views/base2.pug'; import pageConfigureAdvancedClusterComponent from '../page-configure-advanced/components/page-configure-advanced-cluster/component'; import pageConfigureAdvancedModelsComponent from '../page-configure-advanced/components/page-configure-advanced-models/component'; import pageConfigureAdvancedCachesComponent from '../page-configure-advanced/components/page-configure-advanced-caches/component'; @@ -43,11 +42,6 @@ function registerStates($stateProvider) { permission: 'configuration', url: '/configuration', onEnter: ['ConfigureState', (ConfigureState) => ConfigureState.dispatchAction({type: 'PRELOAD_STATE', state: {}})], - views: { - '@': { - template: base2 - } - }, resolve: { _shortClusters: ['ConfigEffects', ({etp}) => { return etp('LOAD_USER_CLUSTERS'); http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-configure/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-configure/template.pug b/modules/web-console/frontend/app/components/page-configure/template.pug index c56320b..bd299be 100644 --- a/modules/web-console/frontend/app/components/page-configure/template.pug +++ b/modules/web-console/frontend/app/components/page-configure/template.pug @@ -14,11 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. -h1.pc-page-header - span.pc-page-header-title - | {{ $ctrl.clusterName$|async:this }} +header.header-with-selector + div + h1 {{ $ctrl.clusterName$|async:this }} version-picker - button-import-models(cluster-id='$ctrl.clusterID$|async:this') + div + button-import-models(cluster-id='$ctrl.clusterID$|async:this') + div.pc-content-container ul.tabs.tabs--blue li(role='presentation' ui-sref-active='active') http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-forgot-password/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-forgot-password/template.pug b/modules/web-console/frontend/app/components/page-forgot-password/template.pug index 58a8f7e..82e7898 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/template.pug +++ b/modules/web-console/frontend/app/components/page-forgot-password/template.pug @@ -20,7 +20,7 @@ web-console-header web-console-header-left ignite-header-title -.container.body-container +.container--responsive.body-container section - const form = '$ctrl.form' h3 Forgot password? http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-profile/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-profile/index.js b/modules/web-console/frontend/app/components/page-profile/index.js index faa3c21..d8b1a53 100644 --- a/modules/web-console/frontend/app/components/page-profile/index.js +++ b/modules/web-console/frontend/app/components/page-profile/index.js @@ -16,10 +16,7 @@ */ import angular from 'angular'; - import component from './component'; -import template from 'views/base2.pug'; - import './style.scss'; export default angular @@ -30,14 +27,7 @@ export default angular // set up the states $stateProvider.state('base.settings.profile', { url: '/profile', - views: { - '@': { - template - }, - '@base.settings.profile': { - component: 'pageProfile' - } - }, + component: 'pageProfile', permission: 'profile', tfMetaTags: { title: 'User profile' http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-profile/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-profile/style.scss b/modules/web-console/frontend/app/components/page-profile/style.scss index 8c9387f..30dd943 100644 --- a/modules/web-console/frontend/app/components/page-profile/style.scss +++ b/modules/web-console/frontend/app/components/page-profile/style.scss @@ -16,6 +16,9 @@ */ page-profile { + max-width: 800px; + display: block; + panel-collapsible { width: 100%; } http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-profile/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-profile/template.pug b/modules/web-console/frontend/app/components/page-profile/template.pug index fb95793..2ec6c90 100644 --- a/modules/web-console/frontend/app/components/page-profile/template.pug +++ b/modules/web-console/frontend/app/components/page-profile/template.pug @@ -24,7 +24,7 @@ div -var form = '$ctrl.form' form.theme--ignite(name='$ctrl.form' novalidate) .row - .col-25 + .col-50 +form-field__text({ label: 'First name:', model: '$ctrl.ui.user.firstName', @@ -35,7 +35,7 @@ div ignite-auto-focus ignite-on-enter-focus-move='lastNameInput' ) - .col-25 + .col-50 +form-field__text({ label: 'Last name:', model: '$ctrl.ui.user.lastName', @@ -46,7 +46,7 @@ div ignite-on-enter-focus-move='emailInput' ) .row - .col-50 + .col-100 +form-field__email({ label: 'Email:', model: '$ctrl.ui.user.email', @@ -57,7 +57,7 @@ div ignite-on-enter-focus-move='phoneInput' ) .row - .col-25 + .col-50 +form-field__phone({ label: 'Phone:', model: '$ctrl.ui.user.phone', @@ -67,7 +67,7 @@ div })( ignite-on-enter-focus-move='companyInput' ) - .col-25 + .col-50 +form-field__dropdown({ label: 'Country:', model: '$ctrl.ui.user.country', @@ -77,7 +77,7 @@ div options: '$ctrl.ui.countries' }) .row - .col-50 + .col-100 +form-field__text({ label: 'Company:', model: '$ctrl.ui.user.company', @@ -89,7 +89,7 @@ div ) .row#security-token-section - .col-50 + .col-100 panel-collapsible( opened='$ctrl.ui.expandedToken' on-open='$ctrl.ui.expandedToken = true' @@ -115,7 +115,7 @@ div a(ng-click='$ctrl.generateToken()') Generate Random Security Token? .row - .col-50 + .col-100 panel-collapsible( opened='$ctrl.ui.expandedPassword' on-open='$ctrl.ui.expandedToken = false' http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/style.scss b/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/style.scss index 9726c6f..a5fd50a 100644 --- a/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/style.scss +++ b/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/style.scss @@ -18,9 +18,22 @@ queries-notebook { // TODO: Delete this breadcrumbs styles after template refactoring to new design. .notebooks-top { - margin-bottom: 20px; display: flex; align-items: center; + margin: 40px 0 30px; + flex-direction: row; + + h1 { + margin: 0 !important; + display: flex; + align-items: center; + align-content: center; + + label { + font-size: 24px; + margin-right: 10px; + } + } breadcrumbs { padding-left: 0; @@ -36,24 +49,6 @@ queries-notebook { } } - .docs-content > header { - margin: 0; - margin-bottom: 30px; - - display: flex; - flex-direction: row; - align-items: center; - - h1 { - margin: 0; - margin-right: 8px; - } - } - - .affix + .block-information { - margin-top: 90px; - } - .block-information { padding: 18px 10px 18px 36px; @@ -109,6 +104,20 @@ queries-notebook { } } + .notebook-top-buttons { + display: flex; + align-items: center; + margin-left: auto; + + button:first-of-type { + margin-right: 20px; + } + + a { + color: rgb(57, 57, 57); + } + } + .btn.btn-default.select-toggle.tipLabel { padding-right: 25px; } http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/template.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/template.tpl.pug b/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/template.tpl.pug index 44bfaa5..5c16beb 100644 --- a/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/template.tpl.pug +++ b/modules/web-console/frontend/app/components/page-queries/components/queries-notebook/template.tpl.pug @@ -48,34 +48,6 @@ mixin chart-settings .col-xs-2 +result-toolbar -mixin notebook-rename - .notebooks-top - breadcrumbs - a.link-success(ui-sref='^.') Notebooks - span(ui-sref='.' ui-sref-active) Notebook '{{notebook.name}}' - cluster-selector - - .docs-header.notebook-header - h1.col-sm-6(ng-hide='notebook.edit') - label(style='max-width: calc(100% - 60px)') {{notebook.name}} - .btn-group(ng-if='!demo') - +btn-toolbar('fa-pencil', 'notebook.edit = true;notebook.editName = notebook.name', 'Rename notebook') - +btn-toolbar('fa-trash', 'removeNotebook(notebook)', '{{$ctrl.isDemo ? "Demo notebook cannot be deleted" : "Remove notebook"}}') - h1.col-sm-6(ng-show='notebook.edit') - i.btn.fa.fa-floppy-o(ng-show='notebook.editName' ng-click='renameNotebook(notebook.editName)' bs-tooltip data-title='Save notebook name' data-trigger='hover') - .input-tip - input.form-control(ng-model='notebook.editName' required ignite-on-enter='renameNotebook(notebook.editName)' ignite-on-escape='notebook.edit = false;') - h1.pull-right - a.dropdown-toggle(style='margin-right: 20px' data-toggle='dropdown' bs-dropdown='scrollParagraphs' data-placement='bottom-right') Scroll to query - span.caret - button.btn.btn-default(style='margin-top: 2px' ng-click='addQuery()' ignite-on-click-focus=focusId) - i.fa.fa-fw.fa-plus - | Add query - - button.btn.btn-default(style='margin-top: 2px' ng-click='addScan()' ignite-on-click-focus=focusId) - i.fa.fa-fw.fa-plus - | Add scan - mixin notebook-error h2 Failed to load notebook label.col-sm-12 Notebook not accessible any more. Go back to notebooks list. @@ -287,9 +259,9 @@ mixin paragraph-scan span.tipLabelExecute Scan button.btn.btn-primary(ng-disabled='!scanAvailable(paragraph)' ng-click='scan(paragraph, true)') - i.fa.fa-fw.fa-play(ng-hide='paragraph.checkScanInProgress(true)') - i.fa.fa-fw.fa-refresh.fa-spin(ng-show='paragraph.checkScanInProgress(true)') - span.tipLabelExecute Scan on selected node + i.fa.fa-fw.fa-play(ng-hide='paragraph.checkScanInProgress(true)') + i.fa.fa-fw.fa-refresh.fa-spin(ng-show='paragraph.checkScanInProgress(true)') + span.tipLabelExecute Scan on selected node .col-sm-12.sql-result(ng-if='paragraph.queryExecuted() && !paragraph.scanningInProgress' ng-switch='paragraph.resultType()') .error(ng-switch-when='error') Error: {{paragraph.error.message}} @@ -369,54 +341,79 @@ mixin paragraph-query i.fa.fa-chevron-circle-right a Next -.row - .docs-content - .row(ng-if='notebook' bs-affix style='margin-bottom: 20px;') - +notebook-rename - - -var example = `CREATE TABLE Person(ID INTEGER PRIMARY KEY, NAME VARCHAR(100));\nINSERT INTO Person(ID, NAME) VALUES (1, 'Ed'), (2, 'Ann'), (3, 'Emma');\nSELECT * FROM Person;`; - - ignite-information( - data-title='With query notebook you can' - style='margin-bottom: 30px' - ng-init=`example = "${example}"` - ) - ul - li Create any number of queries - li Execute and explain SQL queries - li Execute scan queries - li View data in tabular form and as charts - li - a(href='https://apacheignite-sql.readme.io/docs/sql-reference-overview' target='_blank') More info - .example - .group - .group-legend - label Examples: - .group-content - .sql-editor(ignite-ace='{\ - onLoad: aceInit({}),\ - theme: "chrome",\ - mode: "sql",\ - require: ["ace/ext/language_tools"],\ - showGutter: false,\ - advanced: {\ - enableSnippets: false,\ - enableBasicAutocompletion: true,\ - enableLiveAutocompletion: true\ - }}' - ng-model='example' - readonly='true' - ) - - div(ng-if='notebookLoadFailed' style='text-align: center') - +notebook-error - - div(ng-if='notebook' ignite-loading='sqlLoading' ignite-loading-text='{{ loadingText }}' ignite-loading-position='top') - .docs-body.paragraphs - .panel-group(bs-collapse ng-model='notebook.expandedParagraphs' data-allow-multiple='true' data-start-collapsed='false') - - .panel-paragraph(ng-repeat='paragraph in notebook.paragraphs' id='{{paragraph.id}}' ng-form='form_{{paragraph.id}}') - .panel.panel-default(ng-if='paragraph.qryType === "scan"') - +paragraph-scan - .panel.panel-default(ng-if='paragraph.qryType === "query"') - +paragraph-query +div(ng-if='notebook') + .notebooks-top + h1(ng-hide='notebook.edit') + label {{notebook.name}} + .btn-group(ng-if='!demo') + +btn-toolbar('fa-pencil', 'notebook.edit = true;notebook.editName = notebook.name', 'Rename notebook') + +btn-toolbar('fa-trash', 'removeNotebook(notebook)', '{{$ctrl.isDemo ? "Demo notebook cannot be deleted" : "Remove notebook"}}') + + h1(ng-show='notebook.edit') + input.form-control(ng-model='notebook.editName' required ignite-on-enter='renameNotebook(notebook.editName)' ignite-on-escape='notebook.edit = false;') + i.btn.fa.fa-floppy-o(ng-show='notebook.editName' ng-click='renameNotebook(notebook.editName)' bs-tooltip data-title='Save notebook name' data-trigger='hover') + + cluster-selector + + .notebook-top-buttons + a.dropdown-toggle(style='margin-right: 20px' data-toggle='dropdown' bs-dropdown='scrollParagraphs' data-placement='bottom-left') Scroll to query + span.caret + button.btn-ignite.btn-ignite--primary(ng-click='addQuery()' ignite-on-click-focus=focusId) + svg.icon-left(ignite-icon='plus') + | Add query + + button.btn-ignite.btn-ignite--primary(ng-click='addScan()' ignite-on-click-focus=focusId) + svg.icon-left(ignite-icon='plus') + | Add scan + +div + breadcrumbs + a.link-success(ui-sref='^.') Notebooks + span(ui-sref='.' ui-sref-active) Notebook '{{notebook.name}}' + + -var example = `CREATE TABLE Person(ID INTEGER PRIMARY KEY, NAME VARCHAR(100));\nINSERT INTO Person(ID, NAME) VALUES (1, 'Ed'), (2, 'Ann'), (3, 'Emma');\nSELECT * FROM Person;`; + + ignite-information( + data-title='With query notebook you can' + style='margin-bottom: 30px' + ng-init=`example = "${example}"` + ) + ul + li Create any number of queries + li Execute and explain SQL queries + li Execute scan queries + li View data in tabular form and as charts + li + a(href='https://apacheignite-sql.readme.io/docs/sql-reference-overview' target='_blank') More info + .example + .group + .group-legend + label Examples: + .group-content + .sql-editor(ignite-ace='{\ + onLoad: aceInit({}),\ + theme: "chrome",\ + mode: "sql",\ + require: ["ace/ext/language_tools"],\ + showGutter: false,\ + advanced: {\ + enableSnippets: false,\ + enableBasicAutocompletion: true,\ + enableLiveAutocompletion: true\ + }}' + ng-model='example' + readonly='true' + ) + + div(ng-if='notebookLoadFailed' style='text-align: center') + +notebook-error + + div(ng-if='notebook' ignite-loading='sqlLoading' ignite-loading-text='{{ loadingText }}' ignite-loading-position='top') + .docs-body.paragraphs + .panel-group(bs-collapse ng-model='notebook.expandedParagraphs' data-allow-multiple='true' data-start-collapsed='false') + + .panel-paragraph(ng-repeat='paragraph in notebook.paragraphs' id='{{paragraph.id}}' ng-form='form_{{paragraph.id}}') + .panel.panel-default(ng-if='paragraph.qryType === "scan"') + +paragraph-scan + .panel.panel-default(ng-if='paragraph.qryType === "query"') + +paragraph-query http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/controller.js b/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/controller.js index ad86a10..776fb08 100644 --- a/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/controller.js +++ b/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/controller.js @@ -27,7 +27,7 @@ export class NotebooksListCtrl { this.rowsToShow = 8; - const notebookNameTemplate = `<div class="ui-grid-cell-contents notebook-name"><a ui-sref="base.sql.tabs.notebook({ noteId: row.entity._id })">{{ row.entity.name }}</a></div>`; + const notebookNameTemplate = `<div class="ui-grid-cell-contents notebook-name"><a ui-sref="base.sql.notebook({ noteId: row.entity._id })">{{ row.entity.name }}</a></div>`; const sqlQueryTemplate = `<div class="ui-grid-cell-contents">{{row.entity.sqlQueriesParagraphsLength}}</div>`; const scanQueryTemplate = `<div class="ui-grid-cell-contents">{{row.entity.scanQueriesPsaragraphsLength}}</div>`; http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-queries/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-queries/index.js b/modules/web-console/frontend/app/components/page-queries/index.js index 5728d8d..ab64b44 100644 --- a/modules/web-console/frontend/app/components/page-queries/index.js +++ b/modules/web-console/frontend/app/components/page-queries/index.js @@ -21,10 +21,6 @@ import queriesNotebooksList from './components/queries-notebooks-list'; import queriesNotebook from './components/queries-notebook'; import pageQueriesCmp from './component'; -import template from 'views/base2.pug'; -// This template is deprecated for notebooks view -import legacyTemplate from 'views/base.pug'; - import Notebook from './notebook.service'; export default angular.module('ignite-console.sql', [ @@ -49,11 +45,9 @@ export default angular.module('ignite-console.sql', [ } $postLink() { - this.$timeout(() => { - this.$transclude((clone) => { - this.pageQueries[this.slotName].empty(); - clone.appendTo(this.pageQueries[this.slotName]); - }); + this.$transclude((clone) => { + this.pageQueries[this.slotName].empty(); + clone.appendTo(this.pageQueries[this.slotName]); }); } }, @@ -64,15 +58,7 @@ export default angular.module('ignite-console.sql', [ // set up the states $stateProvider .state('base.sql', { - abstract: true, - views: { - '@': { - template - }, - '@base.sql': { - template: '<ui-view></ui-view>' - } - } + abstract: true }) .state('base.sql.tabs', { url: '/queries', @@ -88,16 +74,9 @@ export default angular.module('ignite-console.sql', [ title: 'Notebooks' } }) - .state('base.sql.tabs.notebook', { + .state('base.sql.notebook', { url: '/notebook/{noteId}', - views: { - '@': { - template: legacyTemplate - }, - '@base.sql.tabs.notebook': { - component: 'queriesNotebook' - } - }, + component: 'queriesNotebook', permission: 'query', tfMetaTags: { title: 'Query notebook' http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-signin/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-signin/template.pug b/modules/web-console/frontend/app/components/page-signin/template.pug index 6047e65..b31a9bd 100644 --- a/modules/web-console/frontend/app/components/page-signin/template.pug +++ b/modules/web-console/frontend/app/components/page-signin/template.pug @@ -20,7 +20,7 @@ web-console-header web-console-header-left ignite-header-title -.container.body-container +.container--responsive.body-container section -var form = '$ctrl.form' h3 Sign In http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/page-signup/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-signup/template.pug b/modules/web-console/frontend/app/components/page-signup/template.pug index 254243e..11bb50a 100644 --- a/modules/web-console/frontend/app/components/page-signup/template.pug +++ b/modules/web-console/frontend/app/components/page-signup/template.pug @@ -20,7 +20,7 @@ web-console-header web-console-header-left ignite-header-title -.container.body-container +.container--responsive.body-container section -var form = '$ctrl.form' h3 Don't Have An Account? http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/web-console-footer/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/web-console-footer/template.pug b/modules/web-console/frontend/app/components/web-console-footer/template.pug index e7eecf5..aa2812a 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/template.pug +++ b/modules/web-console/frontend/app/components/web-console-footer/template.pug @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. -.container.wcf-content +.container--responsive.wcf-content ignite-footer web-console-footer-links(ng-if='$parent.user') ignite-powered-by-apache \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/web-console-header/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/web-console-header/style.scss b/modules/web-console/frontend/app/components/web-console-header/style.scss index 8f92d8a..e92fdd5 100644 --- a/modules/web-console/frontend/app/components/web-console-header/style.scss +++ b/modules/web-console/frontend/app/components/web-console-header/style.scss @@ -64,8 +64,9 @@ web-console-header { flex-direction: row; flex-wrap: wrap; align-items: center; - padding: 18.5px 0; + padding: 18px 30px; position: relative; + height: 81px; } .wch-logo { @@ -191,6 +192,10 @@ web-console-header { } } } + + .wch-additional-nav-items { + display: flex; + } } @keyframes pulse { http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/components/web-console-header/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/web-console-header/template.pug b/modules/web-console/frontend/app/components/web-console-header/template.pug index a05e5f8..801b742 100644 --- a/modules/web-console/frontend/app/components/web-console-header/template.pug +++ b/modules/web-console/frontend/app/components/web-console-header/template.pug @@ -20,10 +20,10 @@ | You are currently viewing user #[strong {{$root.user.firstName}} {{$root.user.lastName}}] as administrator. #[a(ng-click='$root.revertIdentity()') Revert to your identity?] .wch-notification.wch-notification--demo(ng-if='$root.IgniteDemoMode') - .container(ng-controller='demoController') + div(ng-controller='demoController') | You are now in #[b Demo Mode]. #[a(ng-click='closeDemo();') Close Demo?] -.wch-content.container +.wch-content connected-clusters(ng-if='$ctrl.$rootScope.user && !$ctrl.$rootScope.IgniteDemoMode && $ctrl.isConnectedClustersVisible && !$root.user.becomeUsed') a(ui-sref='landing') http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/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 208cd2c..f45421a 100644 --- a/modules/web-console/frontend/app/modules/states/admin.state.js +++ b/modules/web-console/frontend/app/modules/states/admin.state.js @@ -17,8 +17,6 @@ import angular from 'angular'; -import template from 'views/base2.pug'; - angular .module('ignite-console.states.admin', [ 'ui.router' @@ -28,15 +26,7 @@ angular $stateProvider .state('base.settings.admin', { url: '/admin', - views: { - '@': { - template - }, - '@base.settings.admin': { - template: '<page-admin></page-admin>' - } - }, - // templateUrl, + component: 'pageAdmin', permission: 'admin_page', tfMetaTags: { title: 'Admin panel' http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/modules/states/settings.state.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/modules/states/settings.state.js b/modules/web-console/frontend/app/modules/states/settings.state.js new file mode 100644 index 0000000..1651376 --- /dev/null +++ b/modules/web-console/frontend/app/modules/states/settings.state.js @@ -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. + */ + + +import angular from 'angular'; + +angular + .module('ignite-console.states.settings', [ + 'ui.router' + ]) + .config(['$stateProvider', function($stateProvider) { + // Set up the states. + $stateProvider + .state('base.settings', { + url: '/settings', + abstract: true, + template: '<ui-view></ui-view>' + }); + }]); http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/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 79082e0..96d6b54 100644 --- a/modules/web-console/frontend/app/primitives/badge/index.scss +++ b/modules/web-console/frontend/app/primitives/badge/index.scss @@ -22,7 +22,7 @@ min-width: 26px; height: 18px; - padding: 2px 9px; + padding: 3px 9px; border-radius: 9px; http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/app/primitives/btn/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/btn/index.scss b/modules/web-console/frontend/app/primitives/btn/index.scss index 061d411..2d9e9c4 100644 --- a/modules/web-console/frontend/app/primitives/btn/index.scss +++ b/modules/web-console/frontend/app/primitives/btn/index.scss @@ -90,6 +90,11 @@ $btn-content-padding-with-border: 9px 11px; -webkit-pointer-events: none; pointer-events: none; } + + [ignite-icon='plus'] { + height: 12px; + width: 12px; + } } .btn-ignite--primary { http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/public/stylesheets/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index 4d510d4..3d921df 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -33,6 +33,14 @@ body { flex: 1 0 auto; } +.container--responsive { + padding: 0 30px; + + .gridster-wrapper { + margin: -20px !important; + } +} + hr { margin: 20px 0; } @@ -62,7 +70,7 @@ hr { } .table.table-vertical-middle tbody > tr > td { - vertical-align: middle; + vertical-align: middle; } .table .ui-grid-settings { @@ -95,7 +103,7 @@ hr { } .tooltip { - word-wrap: break-word; + word-wrap: break-word; } .theme-line ul.dropdown-menu { @@ -288,10 +296,6 @@ body > .wrapper > ui-view { .use-cache { display: flex; - - input[type="checkbox"] { - flex: 1 0 auto; - } } .group-section { @@ -1387,8 +1391,8 @@ th[st-sort] { // element a background, we're telling Safari that it *really* needs to // paint the whole area. See https://github.com/ajaxorg/ace/issues/2872 .ace_scrollbar-inner { - background-color: #FFF; - opacity: 0.01; + background-color: #FFF; + opacity: 0.01; .ace_dark & { background-color: #000; @@ -1879,7 +1883,7 @@ treecontrol.tree-classic { .ribbon { position: absolute; top: 42px; - width: 200px; + width: 186px; padding: 1px 0; color: $btn-primary-color; background: $btn-primary-border; @@ -1892,16 +1896,15 @@ treecontrol.tree-classic { transform: rotate(45deg); > label { - display: block; padding: 1px 0; - height: 24px; - line-height: 18px; - + height: 17px; + line-height: 12px; text-align: center; text-decoration: none; - font-family: $font-family-sans-serif; - font-size: 20px; - font-weight: 500; + font-family: Roboto, sans-serif; + font-size: 16px; + display: block; + font-weight: 400; border: 1px solid rgba(255,255,255,0.3); @@ -1951,10 +1954,10 @@ html, body { } .splash:before { - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; } .spinner { @@ -2090,15 +2093,31 @@ header.header-with-selector { div { display: flex; - } - .btn-ignite + .btn-ignite-group { - position: relative; - margin-left: 20px; + &:nth-child(2) { + .btn-ignite { + margin-left: 20px; + } + + .btn-ignite-group { + .btn-ignite { + margin-left: 0; + } + } - ul.dropdown-menu { - min-width: 100%; - font-family: Roboto; + .btn-ignite + .btn-ignite-group { + position: relative; + margin-left: 20px; + + button { + margin-left: 0; + } + + ul.dropdown-menu { + min-width: 100%; + font-family: Roboto; + } + } } } } http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/views/403.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/403.tpl.pug b/modules/web-console/frontend/views/403.tpl.pug index 7d65442..491ff6b 100644 --- a/modules/web-console/frontend/views/403.tpl.pug +++ b/modules/web-console/frontend/views/403.tpl.pug @@ -16,7 +16,7 @@ web-console-header -.container.body-container +.container--responsive.body-container .error-page h1.error-page__title 403 h2.error-page__description You are not authorized http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/views/404.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/404.tpl.pug b/modules/web-console/frontend/views/404.tpl.pug index c4cef12..d9a0795 100644 --- a/modules/web-console/frontend/views/404.tpl.pug +++ b/modules/web-console/frontend/views/404.tpl.pug @@ -16,7 +16,7 @@ web-console-header -.container.body-container +.container--responsive.body-container .error-page h1.error-page__title 404 h2.error-page__description Page not found http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/views/base.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/base.pug b/modules/web-console/frontend/views/base.pug index 525e762..967d469 100644 --- a/modules/web-console/frontend/views/base.pug +++ b/modules/web-console/frontend/views/base.pug @@ -20,7 +20,7 @@ web-console-header web-console-header-right include ./includes/header-right -.container.body-container - .main-content(ui-view='') +.container--responsive.body-container.flex-full-height + div(ui-view='').flex-full-height web-console-footer http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/views/base2.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/base2.pug b/modules/web-console/frontend/views/base2.pug deleted file mode 100644 index 22028d5..0000000 --- a/modules/web-console/frontend/views/base2.pug +++ /dev/null @@ -1,26 +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. - -web-console-header - web-console-header-left - include ./includes/header-left - web-console-header-right - include ./includes/header-right - -.container.body-container.flex-full-height - div(ui-view='').flex-full-height - -web-console-footer \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/views/includes/header-left.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/includes/header-left.pug b/modules/web-console/frontend/views/includes/header-left.pug index 2052bbc..bf1ee9b 100644 --- a/modules/web-console/frontend/views/includes/header-left.pug +++ b/modules/web-console/frontend/views/includes/header-left.pug @@ -24,7 +24,7 @@ a.wch-nav-item( a(ui-sref='base.sql.tabs' ui-sref-active='active') | Queries -.wch-content(ignite-navbar) +.wch-additional-nav-items(ignite-navbar) .wch-nav-item(ng-repeat='item in navbar.items') div(ng-if='$root.user.becomeUsed ? item.canBecomed : item.children' ng-click='$event.stopPropagation()' ng-class='{active: $state.includes(item.sref)}' http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/views/includes/header-right.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/includes/header-right.pug b/modules/web-console/frontend/views/includes/header-right.pug index 2255275..d2d89aa 100644 --- a/modules/web-console/frontend/views/includes/header-right.pug +++ b/modules/web-console/frontend/views/includes/header-right.pug @@ -27,7 +27,7 @@ web-console-header-extension ng-class='{active: $state.includes("base.settings")}' ng-click='$event.stopPropagation()' bs-dropdown='userbar.items' - data-placement='bottom-left' + data-placement='bottom-right' data-trigger='hover focus' data-container='self' ) http://git-wip-us.apache.org/repos/asf/ignite/blob/ac62e614/modules/web-console/frontend/webpack/webpack.common.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/webpack/webpack.common.js b/modules/web-console/frontend/webpack/webpack.common.js index b52d5e0..b758b4b 100644 --- a/modules/web-console/frontend/webpack/webpack.common.js +++ b/modules/web-console/frontend/webpack/webpack.common.js @@ -129,7 +129,7 @@ const config = { { test: /^(?:(?!url\.svg$).)*\.svg$/, include: [contentBase], - use: ['svg-sprite-loader'] + loader: 'svg-sprite-loader' }, { test: /.*\.url\.svg$/,
