IGNITE-5086 Changed design for modals.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/865eed71 Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/865eed71 Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/865eed71 Branch: refs/heads/ignite-5075-cacheStart Commit: 865eed71e9a0d735911b9409105e8e273a25ecc3 Parents: f038f63 Author: Andrey Novikov <[email protected]> Authored: Mon May 15 15:17:28 2017 +0700 Committer: Andrey Novikov <[email protected]> Committed: Mon May 15 15:17:28 2017 +0700 ---------------------------------------------------------------------- .../activities-user-dialog.tpl.pug | 33 ++-- .../frontend/app/primitives/index.js | 2 + .../frontend/app/primitives/modal/index.scss | 179 +++++++++++++++++++ .../frontend/app/primitives/table/index.scss | 91 ++++++++++ .../frontend/public/stylesheets/style.scss | 99 ++-------- .../web-console/frontend/views/signin.tpl.pug | 2 +- 6 files changed, 306 insertions(+), 100 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/865eed71/modules/web-console/frontend/app/components/activities-user-dialog/activities-user-dialog.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/activities-user-dialog/activities-user-dialog.tpl.pug b/modules/web-console/frontend/app/components/activities-user-dialog/activities-user-dialog.tpl.pug index 074851c..cb49dd0 100644 --- a/modules/web-console/frontend/app/components/activities-user-dialog/activities-user-dialog.tpl.pug +++ b/modules/web-console/frontend/app/components/activities-user-dialog/activities-user-dialog.tpl.pug @@ -14,23 +14,28 @@ See the License for the specific language governing permissions and limitations under the License. -.modal(tabindex='-1' role='dialog') +.modal.modal--ignite(tabindex='-1' role='dialog') .modal-dialog .modal-content .modal-header - h4.modal-title + h4.modal-title i.fa.fa-info-circle - | Activities: {{ ctrl.user.userName }} + | Activity details: {{ ctrl.user.userName }} + button.close(type='button' aria-label='Close' ng-click='$hide()') .modal-body.modal-body-with-scroll(id='activities-user-dialog') - table.table.table-striped.table-bordered.table-hover(scrollable-container='#activities-user-dialog' st-table='displayedRows' st-safe-src='ctrl.data') - thead - th.text-center(st-sort='action | translate') Description - th.text-center(st-sort='action') Action - th.text-center(st-sort='amount') Visited - tbody - tr(ng-repeat='row in displayedRows') - td.text-left {{ row.action | translate }} - td.text-left {{ row.action }} - td.text-left {{ row.amount }} + .panel--ignite + table.table--ignite(scrollable-container='#activities-user-dialog' st-table='displayedRows' st-safe-src='ctrl.data') + thead + th(st-sort='action | translate') Description + th(st-sort='action') Action + th(st-sort='amount') Visited + tbody + tr(ng-repeat='row in displayedRows') + td + .text-overflow {{ row.action | translate }} + td + .text-overflow {{ row.action }} + td.text-right + .text-overflow {{ row.amount }} .modal-footer - button.btn.btn-primary(id='confirm-btn-confirm' ng-click='$hide()') Close + button.btn-ignite.btn-ignite--success(id='confirm-btn-confirm' ng-click='$hide()') Close http://git-wip-us.apache.org/repos/asf/ignite/blob/865eed71/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 e72f087..8382c19 100644 --- a/modules/web-console/frontend/app/primitives/index.js +++ b/modules/web-console/frontend/app/primitives/index.js @@ -19,8 +19,10 @@ import './badge/index.scss'; import './btn/index.scss'; import './datepicker/index.scss'; import './tabs/index.scss'; +import './table/index.scss'; import './panel/index.scss'; import './dropdown/index.scss'; +import './modal/index.scss'; import './ui-grid/index.scss'; import './ui-grid-header/index.scss'; import './ui-grid-settings/index.scss'; http://git-wip-us.apache.org/repos/asf/ignite/blob/865eed71/modules/web-console/frontend/app/primitives/modal/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/modal/index.scss b/modules/web-console/frontend/app/primitives/modal/index.scss new file mode 100644 index 0000000..dc0dfee --- /dev/null +++ b/modules/web-console/frontend/app/primitives/modal/index.scss @@ -0,0 +1,179 @@ +/* + * 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'; + +.modal { + display: block; + overflow: hidden; +} + +.modal .close { + position: absolute; + top: 10px; + right: 10px; + float: none; +} + +.modal-header { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +// Close icon +.modal-header .close { + margin-right: -2px; +} + +// Modal icon +.modal-header h4 > i.fa { + cursor: default; + float: left; + line-height: $modal-title-line-height; +} + +.modal .modal-dialog { + width: 650px; +} + +.modal .modal-content { + background-color: $gray-lighter; + + .input-tip { + padding-top: 1px; + } +} + +.modal .modal-content .modal-header { + background-color: $ignite-background-color; + text-align: center; + color: $ignite-header-color; + padding: 15px 25px 15px 15px; +} + +.modal .modal-content .modal-header h4 { + font-size: 22px; +} + +.modal .modal-content .modal-footer { + margin-top: 0; +} + +.modal-footer { + label { + float: left; + margin: 0; + } + + .btn:last-child { + margin-right: 0; + } + + .checkbox { + margin: 0; + } +} + +.modal-body { + margin-left: 20px; + margin-right: 20px; +} + +.modal-body-with-scroll { + max-height: 420px; + overflow-y: overlay; + margin: 0; +} + +.modal.center .modal-dialog { + position: fixed; + top: 50%; + left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +.modal--ignite { + .close { + position: absolute; + top: 23px; + right: 20px; + + display: block; + width: 16px; + height: 16px; + + opacity: 1; + background-image: url('/images/icons/cross.svg'); + background-repeat: no-repeat; + background-position: center; + + &:hover, &:focus { + outline: none; + filter: hue-rotate(1deg) brightness(.49); + } + } + + .modal-content { + border: none; + border-radius: 4px; + background-color: white; + + box-shadow: 0 2px 4px 0 rgba(35, 36, 40, 0.5); + + .modal-header { + display: flex; + align-items: center; + + padding: 10px 20px; + + text-align: left; + + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-bottom: 1px solid $table-border-color; + + h4 { + color: $text-color; + font-size: 16px; + font-family: Roboto; + font-weight: 400; + line-height: 36px; + margin-top: 1px; + margin-bottom: -1px; + + i { + margin-right: 8px; + + color: #424242; + font-size: 18px; + line-height: inherit; + } + } + } + + .modal-body { + padding: 20px; + } + + .modal-footer { + padding: 10px 20px; + + border-top: 1px solid $table-border-color; + } + } +} http://git-wip-us.apache.org/repos/asf/ignite/blob/865eed71/modules/web-console/frontend/app/primitives/table/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/table/index.scss b/modules/web-console/frontend/app/primitives/table/index.scss new file mode 100644 index 0000000..451e50d --- /dev/null +++ b/modules/web-console/frontend/app/primitives/table/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. + */ + +@import '../../../public/stylesheets/variables'; + +table.table--ignite { + width: 100%; + + font-family: Roboto; + line-height: 46px; + + th, td { + padding: 0 20px; + + border: solid $table-border-color; + border-width: 0; + + &:first-child { + border-left-width: 1px; + } + + &:last-child { + border-right-width: 1px; + } + } + + th { + border-right-width: 1px; + } + + td { + border-bottom-width: 1px; + } + + thead { + border: solid $table-border-color; + border-width: 1px 0; + + th { + color: $gray-light; + font-weight: 400; + } + } + + tbody { + tr { + &:nth-child(even) { + background-color: $body-bg; + } + } + + td { + color: $text-color; + + .text-overflow { + overflow: hidden; + max-width: 220px; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + + .st-sort-ascent:after, + .st-sort-descent:after { + margin-left: 5px; + font-family: "ui-grid"; + } + + .st-sort-ascent:after { + content: '\C359'; + } + + .st-sort-descent:after { + content: '\C358'; + } +} http://git-wip-us.apache.org/repos/asf/ignite/blob/865eed71/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 7907e4c..7549549 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -37,16 +37,6 @@ hr { outline: none; } - - -.modal.center .modal-dialog { - position: fixed; - top: 50%; - left: 50%; - -webkit-transform: translateX(-50%) translateY(-50%); - transform: translateX(-50%) translateY(-50%); -} - .border-left { box-shadow: 1px 0 0 0 $gray-lighter inset; } @@ -300,63 +290,17 @@ h1, h2, h3, h4, h5, h6 { } /* Modal */ -.modal { - display: block; - overflow: hidden; -} - -.modal .close { - position: absolute; - top: 10px; - right: 10px; - float: none; -} - -.modal-header { - border-top-left-radius: 6px; - border-top-right-radius: 6px; -} - -// Close icon -.modal-header .close { - margin-right: -2px; -} - -// Modal icon -.modal-header h4 > i.fa { - cursor: default; - float: left; - line-height: $modal-title-line-height; -} - -.modal .modal-dialog { - width: 650px; -} - -.modal .modal-content { - background-color: $gray-lighter; - - .input-tip { - padding-top: 1px; - } -} - -.modal .modal-content .modal-header { - background-color: $ignite-background-color; - text-align: center; - color: $ignite-header-color; - padding: 15px 25px 15px 15px; -} - -.modal .modal-content .modal-header h4 { - font-size: 22px; -} - -.modal .modal-content .modal-footer { +.login-header { margin-top: 0; + margin-bottom: 20px; + font-size: 2em; } -.modal-footer { +.login-footer { + padding: 15px 0; + text-align: right; + border-top: 1px solid #e5e5e5; + label { float: left; margin: 0; @@ -369,38 +313,23 @@ h1, h2, h3, h4, h5, h6 { .checkbox { margin: 0; } -} - -.login-header { - margin-top: 0; - margin-bottom: 20px; - font-size: 2em; -} - -.login-footer { - @extend .modal-footer; - - padding-left: 0; - padding-right: 0; .btn { margin-right: 0; } } -.modal-body { - margin-left: 20px; - margin-right: 20px; +.greedy { + min-height: 100%; + height: #{"calc(100vh - 270px)"}; } -.modal-body-with-scroll { - max-height: 420px; - overflow-y: auto; - margin: 0; +.signin-greedy { + height: #{"calc(100vh - 300px)"}; } body > .wrapper, -// Nested ui-view, like on password reset state + // Nested ui-view, like on password reset state body > .wrapper > ui-view { display: flex; flex-direction: column; http://git-wip-us.apache.org/repos/asf/ignite/blob/865eed71/modules/web-console/frontend/views/signin.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/signin.tpl.pug b/modules/web-console/frontend/views/signin.tpl.pug index 6f8f6ad..a32733d 100644 --- a/modules/web-console/frontend/views/signin.tpl.pug +++ b/modules/web-console/frontend/views/signin.tpl.pug @@ -27,7 +27,7 @@ web-console-header .signin-greedy .col-xs-12.col-md-6 form(name='form' novalidate) - .modal-body.row(style='padding: 0 0 10px 0; margin: 0') + .row(style='padding: 0 0 10px 0; margin: 0') .settings-row(ng-if='action == "signup"') h3.login-header Sign Up .settings-row(ng-if='action == "signin"')
