You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by an...@apache.org on 2017/05/15 08:17:49 UTC
ignite git commit: IGNITE-5086 Changed design for modals.
Repository: ignite
Updated Branches:
refs/heads/master f038f63a8 -> 865eed71e
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/master
Commit: 865eed71e9a0d735911b9409105e8e273a25ecc3
Parents: f038f63
Author: Andrey Novikov <an...@gridgain.com>
Authored: Mon May 15 15:17:28 2017 +0700
Committer: Andrey Novikov <an...@gridgain.com>
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"')