ignite-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From voze...@apache.org
Subject [04/50] ignite git commit: IGNITE-4467 Fixed ui for modal, select, grid. Added components: switcher, timepicker.
Date Tue, 04 Jul 2017 10:02:10 GMT
IGNITE-4467 Fixed ui for modal, select, grid. Added components: switcher, timepicker.


Project: http://git-wip-us.apache.org/repos/asf/ignite/repo
Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/9e06773b
Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/9e06773b
Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/9e06773b

Branch: refs/heads/master
Commit: 9e06773bed20e15772aa51ec2c2bbb4c984e8912
Parents: bebe80e
Author: Dmitriy Shabalin <dshabalin@gridgain.com>
Authored: Fri Jun 23 17:37:10 2017 +0700
Committer: Andrey Novikov <anovikov@gridgain.com>
Committed: Fri Jun 23 17:37:10 2017 +0700

----------------------------------------------------------------------
 .../input-dialog/input-dialog.tpl.pug           |  32 ++--
 .../list-of-registered-users.tpl.pug            |   2 +-
 .../helpers/jade/form/form-field-checkbox.pug   |  15 +-
 .../frontend/app/helpers/jade/mixins.pug        |   4 +-
 .../app/modules/agent/AgentManager.service.js   |   5 +-
 .../app/primitives/datepicker/index.pug         |  11 +-
 .../app/primitives/datepicker/index.scss        |  34 +++-
 .../frontend/app/primitives/dropdown/index.scss |  98 ++++++++++-
 .../frontend/app/primitives/file/index.pug      |  37 +++++
 .../frontend/app/primitives/file/index.scss     |  60 +++++++
 .../app/primitives/form-field/index.scss        |  76 +++++++++
 .../frontend/app/primitives/grid/index.scss     |  42 +++++
 .../frontend/app/primitives/index.js            |   7 +-
 .../frontend/app/primitives/modal/index.scss    |  42 ++++-
 .../frontend/app/primitives/panel/index.scss    |   1 +
 .../frontend/app/primitives/switcher/index.pug  |  20 +++
 .../frontend/app/primitives/switcher/index.scss |  80 +++++++++
 .../app/primitives/timepicker/index.pug         |  59 +++++++
 .../app/primitives/timepicker/index.scss        | 137 ++++++++++++++++
 .../app/primitives/typography/index.scss        |  36 ++++
 .../app/primitives/ui-grid-header/index.scss    |   2 +-
 .../app/primitives/ui-grid-settings/index.scss  | 163 +++++++++++++------
 .../frontend/app/primitives/ui-grid/index.scss  | 159 +++++++++++++++---
 .../frontend/public/images/icons/filter.svg     |   1 +
 .../frontend/public/images/icons/index.js       |   2 +
 .../frontend/public/images/icons/search.svg     |   1 +
 .../frontend/public/stylesheets/style.scss      |  24 ---
 .../views/templates/agent-download.tpl.pug      |  23 +--
 .../frontend/views/templates/confirm.tpl.pug    |  17 +-
 29 files changed, 1019 insertions(+), 171 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/components/input-dialog/input-dialog.tpl.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/components/input-dialog/input-dialog.tpl.pug b/modules/web-console/frontend/app/components/input-dialog/input-dialog.tpl.pug
index 95549d7..416d79b 100644
--- a/modules/web-console/frontend/app/components/input-dialog/input-dialog.tpl.pug
+++ b/modules/web-console/frontend/app/components/input-dialog/input-dialog.tpl.pug
@@ -16,24 +16,24 @@
 
 include /app/helpers/jade/mixins
 
-.modal(tabindex='-1' role='dialog')
+.modal.modal--ignite(tabindex='-1' role='dialog')
     .modal-dialog
-        .modal-content
+        form.modal-content(name='ctrl.form' novalidate)
             .modal-header
-                button.close(ng-click='$hide()') &times;
                 h4.modal-title 
                     i.fa.fa-clone
-                    | {{ ctrl.title }}
-            form.form-horizontal.modal-body.row(name='ui.inputForm' novalidate)
-                div
-                    .col-sm-2
-                        label.required.labelFormField {{ ctrl.label }}:&nbsp;
-                    .col-sm-10
-                        .input-tip
-                            +ignite-form-field-input('"input-field"', 'ctrl.value', false, 'true', 'Enter value')(
-                                data-ignite-form-field-input-autofocus='true'
-                                ignite-on-enter='form.$valid && ctrl.confirm()'
-                            )
+                    span {{ ctrl.title }}
+                button.close(type='button' aria-label='Close' ng-click='$hide()')
+                     svg(ignite-icon="cross")
+
+            .modal-body
+                .row
+                    .col-100
+                        +ignite-form-field-text('{{ ctrl.label }}', 'ctrl.value', '"input-field"', false, true, 'Enter value')(
+                            data-ignite-form-field-input-autofocus='true'
+                            ignite-on-enter='form.$valid && ctrl.confirm()'
+                        )
+
             .modal-footer
-                button.btn.btn-default(id='copy-btn-cancel' ng-click='$hide()') Cancel
-                button.btn.btn-primary(id='copy-btn-confirm' ng-disabled='ui.inputForm.$invalid' ng-click='ctrl.confirm()') Confirm
+                button#copy-btn-cancel.btn-ignite.btn-ignite--link-success(ng-click='$hide()') Cancel
+                button#copy-btn-confirm.btn-ignite.btn-ignite--success(ng-disabled='ctrl.form.$invalid' ng-click='ctrl.confirm()') Confirm

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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 d9e55af..85a2070 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
@@ -72,4 +72,4 @@ mixin grid-settings()
                     | {{ $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)
+            .grid.ui-grid--ignite.ui-grid-disabled-group-selection(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/9e06773b/modules/web-console/frontend/app/helpers/jade/form/form-field-checkbox.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/helpers/jade/form/form-field-checkbox.pug b/modules/web-console/frontend/app/helpers/jade/form/form-field-checkbox.pug
index fe7f912..21be8b2 100644
--- a/modules/web-console/frontend/app/helpers/jade/form/form-field-checkbox.pug
+++ b/modules/web-console/frontend/app/helpers/jade/form/form-field-checkbox.pug
@@ -15,18 +15,7 @@
     limitations under the License.
 
 mixin form-field-checkbox(label, model, name, disabled, required, tip)
-    //- TODO: Need to use common tooltip.
-    mixin tooltip-checkbox(title, options)
-        if title
-            i.tipLabel.icon-help(
-                bs-tooltip=''
-
-                data-title=title
-                data-container=options && options.container || false
-                data-placement=options && options.placement || false
-            )
-
-    div.checkbox.col-xs-12.col-sm-12.col-md-12
+    .checkbox
         label(id=`{{ ${name} }}Label`)
             .input-tip
                 if block
@@ -47,4 +36,4 @@ mixin form-field-checkbox(label, model, name, disabled, required, tip)
                     )
             span #{label}
 
-            +tooltip-checkbox(tip, tipOpts)
+            +tooltip(tip, tipOpts)

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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 e9278bd..50a0208 100644
--- a/modules/web-console/frontend/app/helpers/jade/mixins.pug
+++ b/modules/web-console/frontend/app/helpers/jade/mixins.pug
@@ -17,10 +17,12 @@
 include ./form
 include ../../primitives/btn-group/index
 include ../../primitives/datepicker/index
+include ../../primitives/timepicker/index
 include ../../primitives/dropdown/index
 include ../../primitives/tooltip/index
 include ../../primitives/ui-grid-settings/index
-include ../../primitives/switch/index
+include ../../primitives/radio/index
+include ../../primitives/switcher/index
 
 //- Mixin for advanced options toggle.
 mixin advanced-options-toggle(click, cond, showMessage, hideMessage)

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/modules/agent/AgentManager.service.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/agent/AgentManager.service.js b/modules/web-console/frontend/app/modules/agent/AgentManager.service.js
index 281d532..eb4ebfc 100644
--- a/modules/web-console/frontend/app/modules/agent/AgentManager.service.js
+++ b/modules/web-console/frontend/app/modules/agent/AgentManager.service.js
@@ -15,11 +15,10 @@
  * limitations under the License.
  */
 
-import io from 'socket.io-client'; // eslint-disable-line no-unused-vars
-import maskNull from 'app/core/utils/maskNull';
-
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
+import maskNull from 'app/core/utils/maskNull';
+
 const State = {
     INIT: 'INIT',
     AGENT_DISCONNECTED: 'AGENT_DISCONNECTED',

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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
index e5da970..e789a1f 100644
--- a/modules/web-console/frontend/app/primitives/datepicker/index.pug
+++ b/modules/web-console/frontend/app/primitives/datepicker/index.pug
@@ -14,7 +14,7 @@
     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 ignite-form-field-datepicker(label, model, name, mindate, maxdate, minview = 1, format = 'MMM yyyy', disabled, required, placeholder, tip)
     mixin form-field-input()
         input.form-control(
             id=`{{ ${name} }}Input`
@@ -28,15 +28,16 @@ mixin ignite-form-field-datepicker(label, model, name, mindate, maxdate, disable
             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-min-view=minview
+            data-date-format=format
+            data-start-view=minview
+
             data-placement='bottom'
-            data-container='.docs-content'
+            data-container='.ignite-form-field'
 
             tabindex='0'
 

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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
index 786a2c1..1670704 100644
--- a/modules/web-console/frontend/app/primitives/datepicker/index.scss
+++ b/modules/web-console/frontend/app/primitives/datepicker/index.scss
@@ -15,8 +15,29 @@
  * limitations under the License.
  */
 
-.datepicker.dropdown-menu tbody button {
-    height: 100%;
+.datepicker.dropdown-menu {
+    width: 250px;
+    height: 270px;
+
+    button {
+        outline: none;
+        border: 0;
+    }
+
+    tbody {
+        height: 180px;
+    }
+
+    tbody button {
+        padding: 6px;
+        height: 100%;
+    }
+
+    &.datepicker-mode-1, &.datepicker-mode-2 {
+        tbody button {
+            height: 65px;
+        }
+    }
 }
 
 .datepicker--ignite {
@@ -61,4 +82,13 @@
             }
         }
     }
+}
+
+.theme--ignite {
+    .datepicker--ignite {
+        display: block;
+        width: 100%;
+
+        font-size: 14px;
+    }
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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
index a3252cc..d39306d 100644
--- a/modules/web-console/frontend/app/primitives/dropdown/index.scss
+++ b/modules/web-console/frontend/app/primitives/dropdown/index.scss
@@ -22,6 +22,7 @@
 
     ul.dropdown-menu {
         z-index: 1;
+
         min-width: calc(100% + 2px);
         margin-top: 2px;
         padding: 0;
@@ -29,15 +30,22 @@
         border-color: #c5c5c5;
         box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
 
-        a {
-            padding-left: 15px;
-            padding-right: 15px;
+        li {
+            a {
+                padding-left: 15px;
+                padding-right: 15px;
+
+                color: $text-color;
+                line-height: 26px;
 
-            color: $text-color;
-            line-height: 26px;
+                &:hover {
+                    color: #a8110f;
+                }
 
-            &:hover {
-                color: #a8110f;
+                &.active {
+                    background-color: #fff;
+                    font-weight: normal;
+                }
             }
         }
 
@@ -45,19 +53,91 @@
             border-bottom: 1px solid $table-border-color;
         }
     }
+
+    ul.select.dropdown-menu {
+        li {
+            a {
+                &:before {
+                    content: '';
+
+                    position: relative;
+                    top: 1px;
+                    left: -3px;
+
+                    display: inline-block;
+                    width: 12px;
+                    height: 12px;
+
+                    margin-left: 0;
+                    margin-right: 7px;
+
+                    border: 1px solid #afafaf;
+                    border-radius: 2px;
+                    background-color: #FFF;
+
+                    box-shadow: inset 0 1px 1px $input-border;
+                }
+
+                &.active {
+                    color: $text-color;
+                }
+
+                &.active:before {
+                    border-color: $brand-info;
+                    background-color: $brand-info;
+
+                    box-shadow: none;
+                }
+
+                & > i {
+                    position: relative;
+                    top: -2px;
+                    left: -18px;
+
+                    float: none;
+
+                    width: 0;
+                    margin: 0;
+
+                    background: none;
+
+                    &.fa-check:before {
+                        content: '';
+
+                        display: block;
+                        width: 4px;
+                        height: 8px;
+
+                        border: solid #FFF;
+                        border-width: 0 2px 2px 0;
+
+                        transform: rotate(35deg);
+                    }
+                }
+            }
+        }
+    }
 }
 
 .dropdown--ignite {
-    button, .btn-ignite {
+    .btn-ignite {
         position: relative;
 
         &::after {
             content: '';
+
             position: absolute;
             bottom: -4px;
+
             display: block;
             height: 4px;
             width: 100%;
         }
+
+        &[disabled='disabled'] {
+            ul.dropdown-menu {
+                display: none !important;
+            }
+        }
     }
-}
\ No newline at end of file
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/primitives/file/index.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/file/index.pug b/modules/web-console/frontend/app/primitives/file/index.pug
new file mode 100644
index 0000000..4ce9ef4
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/file/index.pug
@@ -0,0 +1,37 @@
+//-
+    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-file(label, model, name, disabled, required, options, tip)
+    .file--ignite.ignite-form-field(ng-class='{ "choosen": `${model}` }')
+        label.ignite-form-field__label(for=`{{ ${name} }}Input`)
+            span Folder name:
+        .ignite-form-field__control
+            label.btn-ignite.btn-ignite--primary(for=`{{ ${name} }}Input`)
+                | Choose Destination Folder
+            label.tipField.link-primary(for=`{{ ${name} }}Input`) Change folder
+
+            +tooltip(tip, tipOpts)
+
+            if block
+                block
+
+            .input-tip
+                input(
+                    id=`{{ ${name} }}Input`
+                    type='file'
+                    data-ng-model=model
+                )&attributes(attributes)
+                | {{ `${model}` }}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/primitives/file/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/file/index.scss b/modules/web-console/frontend/app/primitives/file/index.scss
new file mode 100644
index 0000000..dbd32a4
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/file/index.scss
@@ -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.
+ */
+
+.file--ignite {
+    label {
+        cursor: pointer;
+    }
+
+    &.choosen {
+        .ignite-form-field__control {
+            .btn-ignite {
+                display: none;
+            }
+
+            .tipField {
+                display: block;
+            }
+        }
+    }
+
+    &:not(.choosen) {
+        .ignite-form-field__label {
+            font-size: 0;
+            line-height: 0;
+            margin-bottom: 0px;
+        }
+    }
+
+    .ignite-form-field__control {
+        display: flex;
+
+        input[type='file'] {
+            position: absolute;
+            opacity: 0;
+            z-index: -1;
+        }
+
+        .tipField {
+            display: none;
+        }
+
+        .input-tip {
+            order: -1;
+        }
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/primitives/form-field/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/index.scss b/modules/web-console/frontend/app/primitives/form-field/index.scss
new file mode 100644
index 0000000..42370b3
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/form-field/index.scss
@@ -0,0 +1,76 @@
+
+/*
+ * 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';
+
+.theme--ignite {
+    .ignite-form-field {
+        width: 100%;
+
+        &.radio--ignite {
+            width: auto;
+        }
+
+        .ignite-form-field__label {
+            float: left;
+            width: 100%;
+            margin: 4px 10px;
+
+            color: $gray-light;
+            font-size: 12px;
+            line-height: 12px;
+        }
+
+        .ignite-form-field__control {
+            width: 100%;
+
+            .input-tip {
+                display: flex;
+                overflow: visible;
+            }
+
+            .tipField {
+                line-height: 36px;
+            }
+
+            input,
+            button {
+                overflow: visible;
+
+                box-sizing: border-box;
+                width: 100%;
+                max-width: initial;
+                height: 36px;
+                padding: 0px 10px;
+                margin-right: 0;
+
+                border: solid 1px #c5c5c5;
+                border-radius: 4px;
+                background-color: #ffffff;
+                box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);
+
+                color: $text-color;
+                line-height: 36px;
+            }
+
+            input[type='number'] {
+                text-align: right;
+            }
+        }
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/primitives/grid/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/grid/index.scss b/modules/web-console/frontend/app/primitives/grid/index.scss
new file mode 100644
index 0000000..a77240f
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/grid/index.scss
@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+.theme--ignite {
+    .row {
+        display: flex;
+        margin: 16px -10px;
+
+        line-height: 36px;
+
+        & > [class*="col-"] {
+            & > * {
+                align-self: flex-end;
+            }
+        }
+    }
+
+    [class*="col-"] {
+        display: inline-flex;
+        padding: 0 10px;
+    }
+
+    @for $i from 1 through 20 {
+        .col-#{$i*5} {
+            width: $i*5%;
+        }
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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 35a7cde..30f7d7e 100644
--- a/modules/web-console/frontend/app/primitives/index.js
+++ b/modules/web-console/frontend/app/primitives/index.js
@@ -18,6 +18,7 @@
 import './badge/index.scss';
 import './btn/index.scss';
 import './datepicker/index.scss';
+import './timepicker/index.scss';
 import './tabs/index.scss';
 import './table/index.scss';
 import './panel/index.scss';
@@ -27,4 +28,8 @@ import './ui-grid/index.scss';
 import './ui-grid-header/index.scss';
 import './ui-grid-settings/index.scss';
 import './page/index.scss';
-import './switch/index.scss';
+import './radio/index.scss';
+import './switcher/index.scss';
+import './form-field/index.scss';
+import './typography/index.scss';
+import './grid/index.scss';

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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
index 58b7370..87d8dc3 100644
--- a/modules/web-console/frontend/app/primitives/modal/index.scss
+++ b/modules/web-console/frontend/app/primitives/modal/index.scss
@@ -150,15 +150,18 @@
             border-bottom: 1px solid $table-border-color;
 
             h4 {
+                display: inline-flex;
+                align-items: center;
+                margin-top: 1px;
+                margin-bottom: -1px;
+
                 color: $text-color;
                 font-size: 16px;
                 font-family: Roboto;
                 font-weight: 400;
                 line-height: 36px;
-                margin-top: 1px;
-                margin-bottom: -1px;
 
-                svg, i {
+                i, .icon-left, svg {
                     margin-right: 8px;
 
                     color: #424242;
@@ -169,17 +172,44 @@
         }
 
         .modal-body {
-            padding: 20px;
+            margin: 0;
+            padding: 5px 20px;
+
+            .input-tip {
+                padding-top: 0;
+            }
         }
 
         .modal-footer {
             padding: 10px 20px;
 
             border-top: 1px solid $table-border-color;
-            
-            button + button {
+
+            button + button,
+            button + a {
                 margin-left: 20px;
             }
         }
+
+        ul.tabs {
+            margin-top: 20px;
+        }
+
+        .panel--ignite {
+            margin-top: 20px;
+            margin-bottom: 20px;
+        }
+
+        ul.tabs + .panel--ignite {
+            margin-top: 0;
+        }
+
+        fieldset {
+            margin: 16px 0;
+
+            & > .row:first-child {
+                margin-top: 0;
+            }
+        }
     }
 }

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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
index 75662ef..38d18dd 100644
--- a/modules/web-console/frontend/app/primitives/panel/index.scss
+++ b/modules/web-console/frontend/app/primitives/panel/index.scss
@@ -45,6 +45,7 @@
                 font-size: 14px;
                 font-style: italic;
                 line-height: 36px;
+                cursor: default;
             }
         }
     }

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/primitives/switcher/index.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/switcher/index.pug b/modules/web-console/frontend/app/primitives/switcher/index.pug
new file mode 100644
index 0000000..5689094
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/switcher/index.pug
@@ -0,0 +1,20 @@
+//-
+    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 switcher()
+    label.switcher--ignite
+        input(type='checkbox')&attributes(attributes)
+        div(bs-tooltip=attributes.tip && '' data-title=attributes.tip data-trigger='hover')

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/primitives/switcher/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/switcher/index.scss b/modules/web-console/frontend/app/primitives/switcher/index.scss
new file mode 100644
index 0000000..cf8ed64
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/switcher/index.scss
@@ -0,0 +1,80 @@
+/*
+ * 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';
+
+label.switcher--ignite {
+    width: 34px;
+    max-width: 34px !important;
+    height: 20px;
+
+    line-height: 20px;
+    vertical-align: middle;
+
+    cursor: pointer;
+
+    input[type="checkbox"] {
+        position: absolute;
+        opacity: 0.0;
+        
+        & + div {
+            position: relative;
+
+            width: 34px;
+            height: 14px;
+            margin: 3px 0;
+
+            border-radius: 8px;
+            background-color: #C5C5C5;
+            transition: background 0.2s ease;
+
+            &:before {
+                content: '';
+
+                position: absolute;
+                top: -3px;
+                left: 0;
+
+                width: 20px;
+                height: 20px;
+
+                border: solid 1px #C5C5C5;
+                border-radius: 50%;
+                background-color: #FFF;
+
+                transition: all 0.12s ease;
+            }
+
+            &:active:before {
+                transform: scale(1.15, 0.85);
+            }
+        }
+
+        &:checked + div {
+            background-color: #FF8485;
+
+            &:before {
+                content: '';
+
+                left: 14px;
+
+                border: 0;
+                background-color: #EE2B27;
+            }
+        }
+    }
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/primitives/timepicker/index.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/timepicker/index.pug b/modules/web-console/frontend/app/primitives/timepicker/index.pug
new file mode 100644
index 0000000..9f1f6ec
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/timepicker/index.pug
@@ -0,0 +1,59 @@
+//-
+    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-timepicker(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-timepicker
+            data-time-format='HH:mm'
+            data-length='1'
+            data-minute-step='1'
+            data-arrow-behavior='picker'
+
+            data-placement='bottom'
+            data-container=`.timepicker--ignite`
+
+            tabindex='0'
+
+            onkeydown="return false"
+
+            data-ignite-form-panel-field=''
+        )&attributes(attributes.attributes)
+
+    .timepicker--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/9e06773b/modules/web-console/frontend/app/primitives/timepicker/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/timepicker/index.scss b/modules/web-console/frontend/app/primitives/timepicker/index.scss
new file mode 100644
index 0000000..361e949
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/timepicker/index.scss
@@ -0,0 +1,137 @@
+/*
+ * 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.
+ */
+
+.timepicker.dropdown-menu {
+    padding: 0 4px;
+
+    button {
+        outline: none;
+        border: 0;
+    }
+
+    tbody button {
+        height: 100%;
+        padding: 6px;
+    }
+}
+
+.timepicker--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: 40px;
+            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;
+            background: none;
+
+            &:hover, &:focus {
+                text-shadow: 0 0 0 #a8110f;
+            }
+        }
+    }
+
+    .dropdown-menu {
+        line-height: 30px;
+
+        thead, tfoot {
+            th {
+                text-align: center;
+                line-height: 0;
+            }
+
+            .btn.btn-default {
+                float: none !important;
+                display: inline-block;
+                margin-right: 0;
+
+                &:active {
+                    box-shadow: none;
+                    background: none;
+                }
+
+                &:before {
+                    content: '';
+
+                    display: block;
+                    width: 10px;
+                    height: 10px;
+
+                    border: 2px solid #757575;
+                    transform: rotate(45deg);
+                }
+
+                &:hover {
+                    background: none;
+                }
+            }
+        }
+
+        thead {
+            th {
+                padding-top: 10px;
+            }
+
+            .btn.btn-default {
+                &:before {
+                    border-width: 2px 0 0 2px;
+                }
+            }
+        }
+
+        tfoot {
+            th {
+                padding-top: 2px;
+                padding-bottom: 10px;
+            }
+
+            .btn.btn-default {
+                &:before {
+                    border-width: 0 2px 2px 0;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/primitives/typography/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/typography/index.scss b/modules/web-console/frontend/app/primitives/typography/index.scss
new file mode 100644
index 0000000..7fee674
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/typography/index.scss
@@ -0,0 +1,36 @@
+/*
+ * 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';
+
+.theme--ignite {
+    p {
+        margin: 20px 0;
+
+        color: $text-color;
+        font-size: 14px;
+        line-height: 17px;
+    }
+
+    h4 {
+        margin-top: 20px;
+
+        color: $text-color;
+        font-size: 16px;
+        font-weight: normal;
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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
index 7b3ce7b..ac58707 100644
--- a/modules/web-console/frontend/app/primitives/ui-grid-header/index.scss
+++ b/modules/web-console/frontend/app/primitives/ui-grid-header/index.scss
@@ -78,7 +78,7 @@
             top: -100px;
         }
         .ng-hide + .ui-grid-header-cell-row .ui-grid-column-resizer.right {
-            bottom: -100px;
+            bottom: 0;
         }
 
         &.ui-grid-header-cell .ui-grid-header-cell .ui-grid-column-resizer.right {

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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
index e192ad8..e5d30e6 100644
--- a/modules/web-console/frontend/app/primitives/ui-grid-settings/index.scss
+++ b/modules/web-console/frontend/app/primitives/ui-grid-settings/index.scss
@@ -20,73 +20,80 @@
 .ui-grid-settings {
     color: #393939;
 
-    ul.select.dropdown-menu {
-        padding: 0;
-
-        & > li {
-            & > a {
-                padding: 3px 12px;
-
-                & > span {
-                    line-height: 26px;
-                    padding-left: 10px;
-                    padding-right: 8px;
-                    cursor: pointer;
-                }
+    .grid-settings {
+        ul.dropdown-menu {
+            padding: 0;
+            min-width: auto;
+
+            & > 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;
+                    & > i {
+                        position: relative;
+                        
+                        width: 12px;
+                        height: 12px;
+                        margin-top: 7px;
+                        margin-left: 0;
 
-                    color: inherit;
-                    line-height: 26px;
+                        color: inherit;
+                        line-height: 26px;
 
-                    border: 1px solid #afafaf;
-                    border-radius: 2px;
-                    background-color: #FFF;
+                        border: 1px solid #afafaf;
+                        border-radius: 2px;
+                        background-color: #FFF;
 
-                    box-shadow: inset 0 1px 1px #ccc;
+                        box-shadow: inset 0 1px 1px #ccc;
 
-                    &.fa-square-o:before,
-                    &.fa-check-square-o:before {
-                        content: '';
-                    }
+                        &.fa-square-o:before,
+                        &.fa-check-square-o:before {
+                            content: '';
+                        }
 
-                    &.fa-check-square-o {
-                        border-color: #0067b9;
-                        background-color: #0067b9;
+                        &.fa-check-square-o {
+                            border-color: #0067b9;
+                            background-color: #0067b9;
 
-                        box-shadow: none;
-                    }
+                            box-shadow: none;
+                        }
 
-                    &.fa-check-square-o:before {
-                        content: '';
+                        &.fa-check-square-o:before {
+                            content: '';
 
-                        position: absolute;
-                        top: 0;
-                        left: 3px;
+                            position: absolute;
+                            top: 0;
+                            left: 3px;
 
-                        width: 4px;
-                        height: 8px;
+                            width: 4px;
+                            height: 8px;
 
-                        border: solid #FFF;
-                        border-width: 0 2px 2px 0;
+                            border: solid #FFF;
+                            border-width: 0 2px 2px 0;
 
-                        transform: rotate(35deg);
+                            transform: rotate(35deg);
+                        }
                     }
                 }
-            }
 
-            &:not(:last-child) {
-                border-bottom: 1px solid #dddddd;
+                &:not(:last-child) {
+                    border-bottom: 1px solid #dddddd;
+                }
             }
         }
     }
 
+    &--heading {
+        cursor: default;
+    }
+
     &--heading > span {
         position: relative;
         top: -1px;
@@ -157,6 +164,62 @@
     &-dateperiod {
         display: block;
         margin-right: 35px;
+
+        .ignite-form-field {
+            $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-tip {
+                    overflow: visible;
+                }
+
+                button {
+                    overflow: visible;
+
+                    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;
+                    }
+                }
+
+                ul.dropdown-menu {
+                    span {
+                        text-shadow: none;
+                    }
+                }
+            }
+        }
     }
 
     .btn-ignite,
@@ -167,6 +230,10 @@
 
         margin-left: 20px;
         margin-right: 0;
+
+        .timepicker--ignite {
+            width: 45px;
+        }
     }
 
     &-dateperiod {

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/app/primitives/ui-grid/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/ui-grid/index.scss b/modules/web-console/frontend/app/primitives/ui-grid/index.scss
index 7908d06..b26036b 100644
--- a/modules/web-console/frontend/app/primitives/ui-grid/index.scss
+++ b/modules/web-console/frontend/app/primitives/ui-grid/index.scss
@@ -17,15 +17,20 @@
 
 @import '../../../public/stylesheets/variables';
 
-.ui-grid--ignite {
+.ui-grid.ui-grid--ignite {
     $height: 46px;
 
+    position: relative;
     border-top: none;
 
     [role="button"] {
       outline: none;
     }
 
+    sup {
+        color: $ignite-brand-success;
+    }
+
     .ui-grid-top-panel {
         background: initial;
     }
@@ -40,6 +45,14 @@
         border-color: transparent;
     }
 
+    .ui-grid-top-panel {
+        overflow: visible;
+
+        .ui-grid-header-viewport {
+            overflow: visible;
+        }
+    }
+
     .ui-grid-cell,
     .ui-grid-header-cell {
         .ui-grid-cell-contents {
@@ -47,10 +60,14 @@
 
             text-align: left;
             font-family: Roboto;
+            white-space: nowrap;
         }
     }
 
     .ui-grid-contents-wrapper {
+        position: absolute;
+        top: 0;
+
         border-bottom-right-radius: 6px;
         overflow: hidden;
     }
@@ -69,24 +86,78 @@
         }
     }
 
-    .ui-grid-header--subcategories {
-        .ui-grid-header-span {
-            background: initial;
+    .ui-grid-header-viewport {
+        .ui-grid-header-canvas {
+            .ui-grid-header-cell {
+                .ui-grid-cell-contents {
+                    color: $gray-light;
+                    font-size: 14px;
+                    font-weight: normal;
+                    font-style: normal;
+                    line-height: 18px;
+                    text-align: left;
 
-            .ui-grid-cell-contents {
-                color: $gray-light;
-                font-size: 14px;
-                font-weight: normal;
-                font-style: normal;
-                line-height: 18px;
-                text-align: left;
+                    padding: 15px 20px;
 
-                padding: 8px 20px;
+                    & > i {
+                        line-height: 18px;
+                    }
 
-                & > i {
-                    line-height: 18px;
+                    .ui-grid-header-cell-label {
+                        // position: relative;
+                    }
+
+                    .ui-grid-header-cell-label + span {
+                        position: relative;
+                        right: 3px;
+                    }
+
+                    .ui-grid-header-cell-filter {
+                        background-image: 
+                            linear-gradient(to right, $ignite-brand-success, transparent), 
+                            linear-gradient(to right, $ignite-brand-success 70%, transparent 0%);
+                        background-position: left bottom;
+                        background-repeat: repeat-x;
+                        background-size: 0, 8px 1px, 0, 0;
+
+                        &:hover {
+                            background-image: none;
+                            // linear-gradient(to right, change-color($ignite-brand-success, $lightness: 26%), transparent), 
+                            // linear-gradient(to right, change-color($ignite-brand-success, $lightness: 26%) 70%, transparent 0%);
+                        }
+
+                        div {
+                            z-index: 1;
+                            position: fixed;
+
+                            width: calc(100% - 40px);
+                            width: 100px;
+                            height: 20px;
+                            margin-top: -20px;
+
+                            font-size: 0; 
+                        }
+
+                        &.active {
+                            color: $ignite-brand-primary;
+
+                            background-image: 
+                                linear-gradient(to right, $ignite-brand-primary, transparent), 
+                                linear-gradient(to right, $ignite-brand-primary 70%, transparent 0%);
+                        }
+                    }
                 }
             }
+        }
+    }
+
+    .ui-grid-header--subcategories {
+        .ui-grid-header-span.ui-grid-header-cell {
+            .ui-grid-cell-contents {
+                padding: 8px 20px;
+            }
+
+            background: initial;
 
             [ng-show] .ui-grid-cell-contents {
                 text-align: center;
@@ -111,10 +182,6 @@
                     padding-right: 20px;
                 }
             }
-
-            .ui-grid-header-cell-label + span {
-                position: relative;
-            }
         }
     }
 
@@ -132,6 +199,24 @@
                     }
                 }
 
+                .ui-grid-header--subcategories {
+                    .ui-grid-tree-base-row-header-buttons {
+                        margin-top: 10px;
+                    }
+
+                    .ui-grid-selection-row-header-buttons {
+                        margin-top: 12px;
+
+                        &:after {
+                            top: 3px;
+                        }
+                    }
+                }
+
+                .ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell {
+                    pointer-events: auto;
+                }
+
                 &:before {
                     content: '';
 
@@ -339,11 +424,6 @@
         }
 
         .ui-grid-tree-header-row {
-            .ui-grid-selection-row-header-buttons {
-                opacity: .2;
-                cursor: default;
-            }
-
             & ~ .ui-grid-row:not(.ui-grid-tree-header-row) {
                 position: relative;
 
@@ -413,4 +493,37 @@
             background-position: center;
         }
     }
+
+    .ui-grid-icon-filter {
+        position: absolute;
+        right: 20px;
+
+        color: $text-color;
+
+        &:before {
+            content: '';
+        }
+    }
 }
+
+.ui-grid--ignite.ui-grid-disabled-group-selection {
+    .ui-grid-pinned-container {
+        .ui-grid-tree-header-row {
+            .ui-grid-selection-row-header-buttons {
+                opacity: .2;
+                cursor: default;
+            }
+        }
+    }
+}
+
+.ui-grid--ignite.no-data {
+    position: relative;
+
+    padding: 16px 51px;
+    
+    border-radius: 0 0 4px 4px;
+    
+    font-style: italic;
+    line-height: 16px;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/public/images/icons/filter.svg
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/public/images/icons/filter.svg b/modules/web-console/frontend/public/images/icons/filter.svg
new file mode 100644
index 0000000..b924daf
--- /dev/null
+++ b/modules/web-console/frontend/public/images/icons/filter.svg
@@ -0,0 +1 @@
+<svg id="filter-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor" transform="translate(-635 -112)"><g transform="translate(475 33)"><path d="M175.9 79.4c.1.3.1.6-.2.8l-5.6 5.6v8.4c0 .3-.1.5-.4.7-.1 0-.2.1-.3.1-.2 0-.4-.1-.5-.2l-2.9-2.9c-.1-.1-.2-.3-.2-.5v-5.5l-5.6-5.6c-.2-.2-.3-.5-.2-.8.1-.3.4-.4.7-.4h14.5c.4-.1.6 0 .7.3z"/></g></g></svg>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/public/images/icons/index.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/public/images/icons/index.js b/modules/web-console/frontend/public/images/icons/index.js
index d6e7c6f..2609550 100644
--- a/modules/web-console/frontend/public/images/icons/index.js
+++ b/modules/web-console/frontend/public/images/icons/index.js
@@ -21,3 +21,5 @@ export gear from './gear.svg';
 export clock from './clock.svg';
 export manual from './manual.svg';
 export download from './download.svg';
+export filter from './filter.svg';
+export search from './search.svg';

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/public/images/icons/search.svg
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/public/images/icons/search.svg b/modules/web-console/frontend/public/images/icons/search.svg
new file mode 100644
index 0000000..32e594c
--- /dev/null
+++ b/modules/web-console/frontend/public/images/icons/search.svg
@@ -0,0 +1 @@
+<svg id="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><g stroke="currentColor" stroke-width="2" transform="translate(-156 -179)"><g transform="translate(0 33)"><g transform="translate(0 120)"><g transform="translate(157 27)"><circle fill="transparent" cx="5.7" cy="5.7" r="5.7"/><path d="M9.1 9.1L16 16"/></g></g></g></g></svg>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/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 dd2fc05..857cdce 100644
--- a/modules/web-console/frontend/public/stylesheets/style.scss
+++ b/modules/web-console/frontend/public/stylesheets/style.scss
@@ -2172,27 +2172,3 @@ html,body,.splash-screen {
         line-height: $line-height-base;
     }
 }
-
-.datepicker.dropdown-menu {
-    width: 250px;
-    height: 270px;
-
-    button {
-        outline: none;
-        border: 0;
-    }
-
-    tbody {
-        height: 180px;
-    }
-
-    tbody button {
-        padding: 6px;
-    }
-
-    &.datepicker-mode-1, &.datepicker-mode-2 {
-        tbody button {
-            height: 65px;
-        }
-    }
-}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/views/templates/agent-download.tpl.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/views/templates/agent-download.tpl.pug b/modules/web-console/frontend/views/templates/agent-download.tpl.pug
index 5abc587..baf2c6c 100644
--- a/modules/web-console/frontend/views/templates/agent-download.tpl.pug
+++ b/modules/web-console/frontend/views/templates/agent-download.tpl.pug
@@ -14,13 +14,15 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
-.modal.center(tabindex='-1' role='dialog')
+.modal.modal--ignite.theme--ignite.center(tabindex='-1' role='dialog')
     .modal-dialog(ng-switch='ctrl.status')
         .modal-content(ng-switch-when='agentMissing')
             .modal-header.header
                 h4.modal-title
                     i.fa.fa-download
                     span Connection to Ignite Web Agent is not established
+                button.close(type='button' aria-label='Close' ng-click='$hide()')
+                     svg(ignite-icon="cross")
             .modal-body.agent-download
                 p Please download and run #[a(href='/api/v1/downloads/agent' target='_self') ignite-web-agent] to use this functionality
                 p To start:
@@ -31,14 +33,14 @@
                 .modal-advanced-options
                     i.fa(ng-class='showToken ? "fa-chevron-circle-down" : "fa-chevron-circle-right"' ng-click='showToken = !showToken')
                     a(ng-click='showToken = !showToken') {{showToken ? 'Hide security token...' : 'Show security token...'}}
-                .details-row(ng-show='showToken')
+                p(ng-show='showToken')
                     label.labelField Security token: {{user.becameToken || user.token}}
                     i.tipLabel.fa.fa-clipboard(ignite-copy-to-clipboard='{{user.becameToken || user.token}}' bs-tooltip='' data-title='Copy security token to clipboard')
                     i.tipLabel.icon-help(ng-if=lines bs-tooltip='' data-title='The security token is used for authorization of web agent')
 
             .modal-footer
-                button.btn.btn-default(ng-click='ctrl.back()') {{::ctrl.backText}}
-                a.btn.btn-primary(href='/api/v1/downloads/agent' target='_self') Download agent
+                button.btn-ignite.btn-ignite--link-success(ng-click='ctrl.back()') {{::ctrl.backText}}
+                a.btn-ignite.btn-ignite--success(href='/api/v1/downloads/agent' target='_self') Download agent
 
         .modal-content(ng-switch-when='nodeMissing')
             .modal-header.header
@@ -49,11 +51,12 @@
             .modal-body.agent-download
                 p Connection to Ignite Web Agent is established, but agent failed to connect to Ignite Node
                 p Please check the following:
-                ul
-                    li Ignite Grid is up and Ignite REST server started (copy "ignite-rest-http" folder from libs/optional/ to libs/)
-                    li In agent settings check URI for connect to Ignite REST server
-                    li Check agent logs for errors
-                    li Refer to #[b README.txt] in the ignite-web-agent folder for more information.
+                p
+                    ul
+                        li Ignite Grid is up and Ignite REST server started (copy "ignite-rest-http" folder from libs/optional/ to libs/)
+                        li In agent settings check URI for connect to Ignite REST server
+                        li Check agent logs for errors
+                        li Refer to #[b README.txt] in the ignite-web-agent folder for more information.
 
             .modal-footer
-                button.btn.btn-default(ng-click='ctrl.back()') {{::ctrl.backText}}
+                button.btn-ignite.btn-ignite--link-success(ng-click='ctrl.back()') {{::ctrl.backText}}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9e06773b/modules/web-console/frontend/views/templates/confirm.tpl.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/views/templates/confirm.tpl.pug b/modules/web-console/frontend/views/templates/confirm.tpl.pug
index 0031498..ccbcfae 100644
--- a/modules/web-console/frontend/views/templates/confirm.tpl.pug
+++ b/modules/web-console/frontend/views/templates/confirm.tpl.pug
@@ -14,20 +14,21 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
-.modal(tabindex='-1' role='dialog')
+.modal.modal--ignite.theme--ignite(tabindex='-1' role='dialog')
     .modal-dialog
         .modal-content
             .modal-header
-                button.close(ng-click='confirmCancel()' aria-hidden='true') &times;
                 h4.modal-title 
                     i.icon-confirm
-                    | Confirmation
+                    span Confirmation
+                button.close(type='button' aria-label='Close' ng-click='confirmCancel()')
+                     svg(ignite-icon="cross")
             .modal-body(ng-show='content')
-                p(ng-bind-html='content' style='text-align: center;')
+                p(ng-bind-html='content')
             .modal-footer
-                button#confirm-btn-cancel.btn.btn-default(ng-click='confirmCancel()') Cancel
+                button#confirm-btn-cancel.btn-ignite.btn-ignite--link-success(ng-click='confirmCancel()') Cancel
 
-                button#confirm-btn-no.btn.btn-default(ng-if='yesNo' ng-click='confirmNo()') No
-                button#confirm-btn-yes.btn.btn-primary(ng-if='yesNo' ng-click='confirmYes()') Yes
+                button#confirm-btn-no.btn-ignite.btn-ignite--link-success(ng-if='yesNo' ng-click='confirmNo()') No
+                button#confirm-btn-yes.btn-ignite.btn-ignite--success(ng-if='yesNo' ng-click='confirmYes()') Yes
 
-                button#confirm-btn-ok.btn.btn-primary(ng-if='!yesNo' ng-click='confirmYes()') Confirm
+                button#confirm-btn-ok.btn-ignite.btn-ignite--success(ng-if='!yesNo' ng-click='confirmYes()') Confirm


Mime
View raw message