You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by ag...@apache.org on 2018/08/29 16:50:54 UTC

[14/50] [abbrv] ignite git commit: IGNITE-9286 Web Console: Refactored UI to modern UI/UX. Cleaned old code.

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/phone.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/phone.pug b/modules/web-console/frontend/app/primitives/form-field/phone.pug
index b65c5d2..8b50301 100644
--- a/modules/web-console/frontend/app/primitives/form-field/phone.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/phone.pug
@@ -32,4 +32,4 @@ mixin form-field__phone({ label, model, name, disabled, required, optional, plac
                 block
 
             if required
-                +form-field__error({ name, error: 'required', message: `${errLbl} could not be empty!` })
+                +form-field__error({ error: 'required', message: `${errLbl} could not be empty!` })

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/radio.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/radio.pug b/modules/web-console/frontend/app/primitives/form-field/radio.pug
new file mode 100644
index 0000000..57ae097
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/form-field/radio.pug
@@ -0,0 +1,32 @@
+//-
+    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 form-field__radio({ label, model, name, value, disabled, required, tip })
+    .form-field.form-field__radio
+        +form-field__label({ label, name, required, disabled, namePostfix: value })
+            +form-field__tooltip({ title: tip, options: tipOpts })
+
+        .form-field__control
+            - attributes.type='radio'
+            - attributes['ng-value'] = value
+            +form-field__input({ name, model, disabled, required, placeholder, namePostfix: value })(attributes=attributes)
+
+        .form-field__errors(
+            ng-messages=`$input.$error`
+            ng-show=`($input.$dirty || $input.$touched || $input.$submitted) && $input.$invalid`
+        )
+            if block
+                block

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/text.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/text.pug b/modules/web-console/frontend/app/primitives/form-field/text.pug
index 8f63f19..ab8d14d 100644
--- a/modules/web-console/frontend/app/primitives/form-field/text.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/text.pug
@@ -15,9 +15,9 @@
     limitations under the License.
 
 mixin form-field__text({ label, model, name, disabled, required, placeholder, tip })
-    -var errLbl = label.substring(0, label.length - 1)
+    -let errLbl = label[label.length - 1] === ':' ? label.substring(0, label.length - 1) : label
 
-    .form-field(id=`{{ ${name} }}Field`)
+    .form-field.form-field__text.ignite-form-field(id=`{{ ${name} }}Field`)
         +form-field__label({ label, name, required, disabled })
             +form-field__tooltip({ title: tip, options: tipOpts })
 
@@ -26,10 +26,11 @@ mixin form-field__text({ label, model, name, disabled, required, placeholder, ti
             +form-field__input({ name, model, disabled, required, placeholder })(attributes=attributes)
 
         .form-field__errors(
-            ng-messages=`(${form}[${name}].$dirty || ${form}[${name}].$touched || ${form}[${name}].$submitted) && ${form}[${name}].$invalid ? ${form}[${name}].$error : {}`
+            ng-messages=`$input.$error`
+            ng-show=`($input.$dirty || $input.$touched || $input.$submitted) && $input.$invalid`
         )
             if block
                 block
 
             if required
-                +form-field__error({ name, error: 'required', message: `${errLbl} could not be empty!` })
+                +form-field__error({ error: 'required', message: `${errLbl} could not be empty!` })

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/tooltip.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/tooltip.pug b/modules/web-console/frontend/app/primitives/form-field/tooltip.pug
index 08ffd83..34376fd 100644
--- a/modules/web-console/frontend/app/primitives/form-field/tooltip.pug
+++ b/modules/web-console/frontend/app/primitives/form-field/tooltip.pug
@@ -14,5 +14,13 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
-mixin form-field__tooltip({ title, options })
-    +tooltip(title, options)
+mixin form-field__tooltip({ title, options = { placement: 'auto' }})
+    if title
+        svg(
+            ignite-icon='info'
+            bs-tooltip=''
+
+            data-title=title
+            data-container=options && options.container || false
+            data-placement=options && options.placement || false
+        )&attributes(attributes)

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/form-field/typeahead.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/form-field/typeahead.pug b/modules/web-console/frontend/app/primitives/form-field/typeahead.pug
new file mode 100644
index 0000000..809a8ae
--- /dev/null
+++ b/modules/web-console/frontend/app/primitives/form-field/typeahead.pug
@@ -0,0 +1,54 @@
+//-
+    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 form-field__typeahead({ label, model, name, disabled, required, placeholder, options, tip })
+    -var errLbl = label.substring(0, label.length - 1)
+    mixin __form-field__typeahead()
+        input(
+            id=`{{ ${name} }}Input`
+            name=`{{ ${name} }}`
+            placeholder=placeholder
+           
+            ng-model=model
+
+            ng-required=required && `${required}`
+            ng-disabled=disabled && `${disabled}` || `!${options}.length`
+
+            bs-typeahead
+            bs-options=`item for item in ${options}`
+            container='body'
+            data-min-length='1'
+            ignite-retain-selection
+            expose-ignite-form-field-control='$input'
+        )&attributes(attributes.attributes)
+
+    .form-field.form-field__typeahead.ignite-form-field(id=`{{ ${name} }}Field`)
+        +form-field__label({ label, name, required, disabled })
+            +form-field__tooltip({ title: tip, options: tipOpts })
+
+        .form-field__control
+            - attributes.type='text'
+            +__form-field__typeahead(attributes=attributes)
+
+        .form-field__errors(
+            ng-messages=`$input.$error`
+            ng-show=`($input.$dirty || $input.$touched || $input.$submitted) && $input.$invalid`
+        )
+            if block
+                block
+
+            if required
+                +form-field__error({ error: 'required', message: `${errLbl} could not be empty!` })

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/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 f9d8591..555a844 100644
--- a/modules/web-console/frontend/app/primitives/index.js
+++ b/modules/web-console/frontend/app/primitives/index.js
@@ -28,7 +28,6 @@ import './ui-grid/index.scss';
 import './ui-grid-header/index.scss';
 import './ui-grid-settings/index.scss';
 import './page/index.scss';
-import './radio/index.scss';
 import './switcher/index.scss';
 import './form-field/index.scss';
 import './typography/index.scss';

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/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 802a241..d9d4467 100644
--- a/modules/web-console/frontend/app/primitives/modal/index.scss
+++ b/modules/web-console/frontend/app/primitives/modal/index.scss
@@ -67,14 +67,6 @@
     }
 }
 
-.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;
@@ -223,3 +215,22 @@
         }
     }
 }
+
+.modal-footer {
+    display: flex;
+    align-items: center;
+
+    > div {
+        display: flex;
+        flex: 1;
+
+        &:last-child {
+            flex: 1;
+            justify-content: flex-end;
+        }
+    }
+}
+
+.modal--wide .modal-dialog {
+    width: 900px;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/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 5dab39f..f148a56 100644
--- a/modules/web-console/frontend/app/primitives/panel/index.scss
+++ b/modules/web-console/frontend/app/primitives/panel/index.scss
@@ -72,6 +72,15 @@
                 }
             }
         }
+
+        & > header.header-with-selector {
+            margin: 0;
+            padding: 14px 20px;
+
+            border-bottom: 1px solid #ddd;
+
+            line-height: 36px;
+        }
     }
 
     &--collapse {

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/radio/index.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/radio/index.pug b/modules/web-console/frontend/app/primitives/radio/index.pug
deleted file mode 100644
index f47fd17..0000000
--- a/modules/web-console/frontend/app/primitives/radio/index.pug
+++ /dev/null
@@ -1,37 +0,0 @@
-//-
-    Licensed to the Apache Software Foundation (ASF) under one or more
-    contributor license agreements.  See the NOTICE file distributed with
-    this work for additional information regarding copyright ownership.
-    The ASF licenses this file to You under the Apache License, Version 2.0
-    (the "License"); you may not use this file except in compliance with
-    the License.  You may obtain a copy of the License at
-
-         http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
-mixin form-field-radio(label, model, name, value, disabled, required, tip)
-    .radio--ignite.ignite-form-field
-        label(id=`{{ ${name} }}Label`)
-            .input-tip
-                if block
-                    block
-                else
-                    input(
-                        id=`{{ ${name} }}Input`
-                        name=`{{ ${name} }}`
-                        type='radio'
-
-                        ng-model=model
-                        ng-value=value
-                        ng-required=required && `${required}`
-                        ng-disabled=disabled && `${disabled}`
-                    )
-                    div
-            span #{label}
-
-            +tooltip(tip, tipOpts)

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/primitives/radio/index.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/radio/index.scss b/modules/web-console/frontend/app/primitives/radio/index.scss
deleted file mode 100644
index ff9b5b3..0000000
--- a/modules/web-console/frontend/app/primitives/radio/index.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '../../../public/stylesheets/variables';
-
-.radio--ignite {
-    label {
-        padding-left: 20px;
-
-        line-height: 20px;
-        vertical-align: middle;
-
-        cursor: pointer;
-
-        .input-tip {
-            float: left;
-            width: 14px;
-            margin-left: -20px;
-
-            input[type="radio"] {
-                position: relative;
-                left: -20px;
-
-                & + div {
-                    position: absolute;
-                    top: 50%;
-
-                    width: 14px;
-                    height: 14px;
-                    margin-top: -8px;
-
-                    border-radius: 50%;
-                    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.35);
-                }
-
-                &:checked + div {
-                    background-color: #0098ff;
-                    box-shadow: none;
-
-                    &:before {
-                        content: '';
-
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-
-                        width: 4px;
-                        height: 4px;
-                        margin-top: -2px;
-                        margin-left: -2px;
-
-                        border-radius: 50%;
-                        background-color: #ffffff;
-                        box-shadow: 0 1px 1px 0 rgba(12, 50, 76, 0.3);
-                    }
-                }
-            }
-        }
-    }
-
-    & + .radio--ignite {
-        margin-left: 45px;
-    }
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/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
index 54ce8c1..d411a19 100644
--- a/modules/web-console/frontend/app/primitives/timepicker/index.pug
+++ b/modules/web-console/frontend/app/primitives/timepicker/index.pug
@@ -14,10 +14,9 @@
     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(
+mixin form-field__timepicker({ label, model, name, mindate, maxdate, disabled, required, placeholder, tip })
+    mixin __form-field__timepicker()
+        input(
             id=`{{ ${name} }}Input`
             name=`{{ ${name} }}`
 
@@ -35,23 +34,27 @@ mixin ignite-form-field-timepicker(label, model, name, mindate, maxdate, disable
             data-arrow-behavior='picker'
 
             data-placement='bottom'
-            data-container=`.timepicker--ignite`
 
             tabindex='0'
 
-            onkeydown="return false"
+            onkeydown='return false'
+            expose-ignite-form-field-control='$input'
         )&attributes(attributes.attributes)
 
-    .timepicker--ignite.ignite-form-field
-        if name
-            +ignite-form-field__label(label, name, required)
+    .form-field.form-field__timepicker.ignite-form-field(id=`{{ ${name} }}Field`)
+        +form-field__label({ label, name, required, disabled })
+            +form-field__tooltip({ title: tip, options: tipOpts })
 
-        .ignite-form-field__control
-            if tip
-                i.tipField.icon-help(bs-tooltip='' data-title=tip)
+        .form-field__control
+            - attributes.type='button'
+            +__form-field__timepicker(attributes=attributes)
 
+        .form-field__errors(
+            ng-messages=`$input.$error`
+            ng-show=`($input.$dirty || $input.$touched || $input.$submitted) && $input.$invalid`
+        )
             if block
                 block
 
-            .input-tip
-                +form-field-input(attributes=attributes)
+            if required
+                +form-field__error({ error: 'required', message: `${errLbl} could not be empty!` })

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/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
index 5be534e..643c741 100644
--- a/modules/web-console/frontend/app/primitives/timepicker/index.scss
+++ b/modules/web-console/frontend/app/primitives/timepicker/index.scss
@@ -17,6 +17,7 @@
 
 .timepicker.dropdown-menu {
     padding: 0 4px;
+    line-height: 30px;
 
     button {
         outline: none;
@@ -27,113 +28,62 @@
         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 {
-        @import "./../../../public/stylesheets/variables.scss";
-
-        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 $ignite-brand-success;
-
-            border: none;
-            box-shadow: none;
-            background: none;
 
-            &:hover, &:focus {
-                text-shadow: 0 0 0 change-color($ignite-brand-success, $lightness: 26%);
-            }
+    thead, tfoot {
+        th {
+            text-align: center;
+            line-height: 0;
         }
-    }
 
-    .dropdown-menu {
-        line-height: 30px;
+        .btn.btn-default {
+            float: none !important;
+            display: inline-block;
+            margin-right: 0;
 
-        thead, tfoot {
-            th {
-                text-align: center;
-                line-height: 0;
+            &:active {
+                box-shadow: none;
+                background: none;
             }
 
-            .btn.btn-default {
-                float: none !important;
-                display: inline-block;
-                margin-right: 0;
-
-                &:active {
-                    box-shadow: none;
-                    background: none;
-                }
+            &:before {
+                content: '';
 
-                &:before {
-                    content: '';
+                display: block;
+                width: 10px;
+                height: 10px;
 
-                    display: block;
-                    width: 10px;
-                    height: 10px;
-
-                    border: 2px solid #757575;
-                    transform: rotate(45deg);
-                }
+                border: 2px solid #757575;
+                transform: rotate(45deg);
+            }
 
-                &:hover {
-                    background: none;
-                }
+            &:hover {
+                background: none;
             }
         }
+    }
 
-        thead {
-            th {
-                padding-top: 10px;
-            }
+    thead {
+        th {
+            padding-top: 10px;
+        }
 
-            .btn.btn-default {
-                &:before {
-                    border-width: 2px 0 0 2px;
-                }
+        .btn.btn-default {
+            &:before {
+                border-width: 2px 0 0 2px;
             }
         }
+    }
 
-        tfoot {
-            th {
-                padding-top: 2px;
-                padding-bottom: 10px;
-            }
+    tfoot {
+        th {
+            padding-top: 2px;
+            padding-bottom: 10px;
+        }
 
-            .btn.btn-default {
-                &:before {
-                    border-width: 0 2px 2px 0;
-                }
+        .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/fb26835f/modules/web-console/frontend/app/primitives/tooltip/index.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/primitives/tooltip/index.pug b/modules/web-console/frontend/app/primitives/tooltip/index.pug
deleted file mode 100644
index ea6a344..0000000
--- a/modules/web-console/frontend/app/primitives/tooltip/index.pug
+++ /dev/null
@@ -1,27 +0,0 @@
-//-
-    Licensed to the Apache Software Foundation (ASF) under one or more
-    contributor license agreements.  See the NOTICE file distributed with
-    this work for additional information regarding copyright ownership.
-    The ASF licenses this file to You under the Apache License, Version 2.0
-    (the "License"); you may not use this file except in compliance with
-    the License.  You may obtain a copy of the License at
-
-         http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
-mixin tooltip(title, options, tipClass = 'tipField')
-    if title
-        svg(
-            ignite-icon='info'
-            bs-tooltip=''
-
-            data-title=title
-            data-container=options && options.container || false
-            data-placement=options && options.placement || false
-            class=`${tipClass}`
-        )

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/modules/web-console/frontend/app/style.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/style.scss b/modules/web-console/frontend/app/style.scss
new file mode 100644
index 0000000..c7eb726
--- /dev/null
+++ b/modules/web-console/frontend/app/style.scss
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+.flex-full-height > [ui-view] {
+	display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/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 be288dc..1088706 100644
--- a/modules/web-console/frontend/public/stylesheets/style.scss
+++ b/modules/web-console/frontend/public/stylesheets/style.scss
@@ -496,62 +496,40 @@ button.form-control {
         border-top: 1px solid $ignite-border-color;
     }
 
+    .btn-ignite-group {
+        padding: 0;
+        border: none;
+        margin-right: 0;
+        background: transparent;
+    }
+
     .sql-controls {
-        position: relative;
-        top: -1px;
+        display: flex;
+        justify-content: space-between;
         border-top: 1px solid #ddd;
 
-        padding: 10px 10px;
-
-        input[type="checkbox"] {
-            line-height: 20px;
-            margin-right: 5px;
-        }
-
-        label {
-            line-height: 28px;
-            vertical-align: middle;
-        }
-
-        .btn {
-            line-height: 20px;
-        }
-
-        .ignite-form-field {
-            margin-right: 10px;
+        & > div {
+            display: flex;
+            padding: 10px;
+            align-items: flex-start;
 
-            .ignite-form-field__label {
-                float: left;
-                width: auto;
-                margin-right: 5px;
-                line-height: 28px;
+            &:nth-child(2) {
+                flex: 1;
+                justify-content: flex-end;
             }
 
-            .ignite-form-field__label + div {
-                display: block;
-                float: none;
-                width: auto;
+            &:last-child {
+                flex-direction: column;
+                flex-basis: 25%;
             }
         }
 
-        .tipLabel .btn {
-            float: right;
-        }
-
-        .pull-right {
-            margin-left: 10px;
-
-            .ignite-form-field {
-                margin-right: -24px;
-
-                label {
-                    margin-left: 5px;
-                }
-            }
+        button + button {
+            margin-left: 20px;
         }
 
-        .col-sm-3 + .tipLabel {
-            margin-left: 0;
+        .form-field--inline + .form-field--inline {
+            margin-left: 20px;
         }
     }
 
@@ -621,14 +599,6 @@ button.form-control {
     font-size: $font-size-large;
     line-height: 24px;
 
-    label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: calc(100% - 85px);
-        cursor: pointer;
-    }
-
     .btn-group {
         vertical-align: top;
         margin-left: 10px;
@@ -2114,6 +2084,7 @@ header.header-with-selector {
 
     div {
         display: flex;
+        align-items: center;
 
         &:nth-child(2) {
             .btn-ignite {

http://git-wip-us.apache.org/repos/asf/ignite/blob/fb26835f/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 9f5e2bb..d0e40dd 100644
--- a/modules/web-console/frontend/views/templates/confirm.tpl.pug
+++ b/modules/web-console/frontend/views/templates/confirm.tpl.pug
@@ -26,9 +26,10 @@
             .modal-body(ng-show='content')
                 p(ng-bind-html='content')
             .modal-footer
-                button#confirm-btn-cancel.btn-ignite.btn-ignite--link-success(ng-click='confirmCancel()') Cancel
+                div
+                    button#confirm-btn-cancel.btn-ignite.btn-ignite--link-success(ng-click='confirmCancel()') Cancel
 
-                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(ignite-auto-focus 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(ignite-auto-focus ng-if='yesNo' ng-click='confirmYes()') Yes
 
-                button#confirm-btn-ok.btn-ignite.btn-ignite--success(ignite-auto-focus ng-if='!yesNo' ng-click='confirmYes()') Confirm
+                    button#confirm-btn-ok.btn-ignite.btn-ignite--success(ignite-auto-focus ng-if='!yesNo' ng-click='confirmYes()') Confirm