This is an automated email from the ASF dual-hosted git repository.
atkach pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ambari.git
The following commit(s) were added to refs/heads/trunk by this push:
new f52709f AMBARI-22922 Style edits of Service Configuration Group modal
f52709f is described below
commit f52709f1669f894f21dd6c72288f23fd7f10ebe8
Author: Andrii Tkach <[email protected]>
AuthorDate: Wed Feb 7 14:07:06 2018 +0200
AMBARI-22922 Style edits of Service Configuration Group modal
---
ambari-web/app/styles/application.less | 11 +-
ambari-web/app/styles/bootstrap_overrides.less | 4 +
ambari-web/app/styles/modal_popups.less | 14 ---
ambari-web/app/styles/service_configurations.less | 34 ++++++
ambari-web/app/styles/theme/bootstrap-ambari.css | 4 +-
.../templates/common/configs/overrideWindow.hbs | 136 ++++++++++-----------
.../common/configs/selectCreateConfigGroup.hbs | 20 +--
ambari-web/app/views/common/checkbox_view.js | 4 +-
ambari-web/app/views/common/radio_button_view.js | 2 +
9 files changed, 121 insertions(+), 108 deletions(-)
diff --git a/ambari-web/app/styles/application.less
b/ambari-web/app/styles/application.less
index a6a756b..1d5056b 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -1851,20 +1851,15 @@ input[type="radio"].align-checkbox,
input[type="checkbox"].align-checkbox {
#config-group-select-create-dialog {
.select-create-config-group-div {
+ margin: 0 0 20px 20px;
.dropdown-menu {
max-height: 160px;
max-width: 300px;
overflow-y: auto;
}
}
- .message{
- color: #777;
- }
-}
-
-#config-group-confirm-save {
- .message{
- color: #777;
+ .radio, .checkbox {
+ margin-bottom: 5px;
}
}
diff --git a/ambari-web/app/styles/bootstrap_overrides.less
b/ambari-web/app/styles/bootstrap_overrides.less
index 1d40755..b2ed244 100644
--- a/ambari-web/app/styles/bootstrap_overrides.less
+++ b/ambari-web/app/styles/bootstrap_overrides.less
@@ -454,4 +454,8 @@ select.form-control {
.btn-group.open .dropdown-menu input[type="checkbox"] + label,
.dropdown.open .dropdown-menu input[type="checkbox"] + label {
line-height: 1.3em;
+}
+
+input[type="checkbox"]:checked + label:after {
+ line-height: 2em;
}
\ No newline at end of file
diff --git a/ambari-web/app/styles/modal_popups.less
b/ambari-web/app/styles/modal_popups.less
index b26bf1a..3fb0a24 100644
--- a/ambari-web/app/styles/modal_popups.less
+++ b/ambari-web/app/styles/modal_popups.less
@@ -248,20 +248,6 @@
clear:both;
}
.override-controls{
- #filter-dropdown-div {
- .dropdown-menu {
- right: 0;
- left: auto;
- }
- }
- #component-dropdown-div {
- vertical-align: top;
- padding-left: 5px;
- .dropdown-menu {
- right: 0;
- left: auto;
- }
- }
.input-group{
input{
-webkit-border-radius: 4px 0 0 4px;
diff --git a/ambari-web/app/styles/service_configurations.less
b/ambari-web/app/styles/service_configurations.less
index e4811d0..d2948f2 100644
--- a/ambari-web/app/styles/service_configurations.less
+++ b/ambari-web/app/styles/service_configurations.less
@@ -295,3 +295,37 @@
padding-top: 5px;
}
}
+
+#host-selection-dialog {
+ .modal-body {
+ .table {
+ th:first-child,
+ td:first-child {
+ width: 30px;
+ }
+ th + th,
+ td + td {
+ width: 50%;
+ }
+ td, th {
+ line-height: 24px;
+ }
+ .checkbox {
+ padding-top: 0;
+ height: 24px;
+ min-height: 24px;
+ }
+ }
+ .selected-hosts-link {
+ line-height: 34px;
+ }
+ #filter-dropdown-div,
+ #component-dropdown-div {
+ padding-right: 0;
+ .dropdown-menu {
+ right: 0;
+ left: auto;
+ }
+ }
+ }
+}
diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css
b/ambari-web/app/styles/theme/bootstrap-ambari.css
index 3da410e..4a94e91 100644
--- a/ambari-web/app/styles/theme/bootstrap-ambari.css
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -763,7 +763,7 @@ input.radio + label:before {
content: '';
position: absolute;
left: 0;
- top: 0;
+ top: 3px;
width: 12px;
height: 12px;
box-sizing: border-box;
@@ -777,7 +777,7 @@ input.radio:checked + label:after {
content: '';
background-color: #FFF;
position: absolute;
- top: 3px;
+ top: 6px;
left: 3px;
width: 6px;
height: 6px;
diff --git a/ambari-web/app/templates/common/configs/overrideWindow.hbs
b/ambari-web/app/templates/common/configs/overrideWindow.hbs
index 6784f28..2aa955c 100644
--- a/ambari-web/app/templates/common/configs/overrideWindow.hbs
+++ b/ambari-web/app/templates/common/configs/overrideWindow.hbs
@@ -25,78 +25,76 @@
{{view.parentView.warningMessage}}
</div>
{{/if}}
- <table style="width: 100%;">
- <tr>
- <td>
- <a href="#" {{action toggleShowSelectedHosts target="view"
}}>{{view.hostSelectMessage}}</a>
- {{#if view.showOnlySelectedHosts}}
- <i class='glyphicon glyphicon-ok-sign'></i>
- {{/if}}
- </td>
- <td width="45%">
- <div class="row">
- <div class="col-md-7" id="filter-dropdown-div">
- <!-- Filter text box with drop-down -->
- <div class="input-group">
- {{view Ember.TextField valueBinding="view.filterText"
id="appendedDropdownButton"
- placeholderBinding="view.filterTextPlaceholder"
classNames="form-control" disabledBinding="view.isDisabled"}}
- <div class="input-group-btn">
- <button class="btn btn-default dropdown-toggle"
data-toggle="dropdown" {{bindAttr disabled="view.isDisabled"}}>
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- {{#each column in view.filterColumns}}
- <li>
- <a href="#" {{action selectFilterColumn column
target="view"}}>
- {{#if column.selected}}
- <i class='glyphicon glyphicon-ok-sign'></i>
- {{else}}
- <i class='glyphicon glyphicon-placeholder'></i>
- {{/if}}
- {{column.name}}
- </a>
- </li>
- {{/each}}
- </ul>
- </div>
- </div>
- </div>
- <div class="col-md-5" id="component-dropdown-div">
- <!-- Host-components drop-down -->
- <div>
- <button class="btn btn-block btn-default dropdown-toggle"
data-toggle="dropdown" href="#" {{bindAttr disabled="view.isDisabled"}}>
- {{t common.components}}
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- <!-- dropdown menu links -->
- {{#each component in view.filterComponents}}
- <li>
- <a href="#" {{action selectFilterComponent component
target="view"}}>
- {{#if component.selected}}
- <i class='glyphicon glyphicon-ok-sign'></i>
- {{else}}
- <i class='glyphicon glyphicon-placeholder'></i>
- {{/if}}
- {{component.displayName}}
- </a>
- </li>
- {{/each}}
- </ul>
- </div>
+
+ <div class="row">
+ <div class="col-md-6 selected-hosts-link">
+ <a href="#" {{action toggleShowSelectedHosts target="view"
}}>{{view.hostSelectMessage}}</a>
+ {{#if view.showOnlySelectedHosts}}
+ <i class='glyphicon glyphicon-ok-sign'></i>
+ {{/if}}
+ </div>
+ <div class="col-md-6">
+ <div class="col-md-7" id="filter-dropdown-div">
+ <!-- Filter text box with drop-down -->
+ <div class="input-group">
+ {{view Ember.TextField valueBinding="view.filterText"
id="appendedDropdownButton"
+ placeholderBinding="view.filterTextPlaceholder"
classNames="form-control" disabledBinding="view.isDisabled"}}
+ <div class="input-group-btn">
+ <button class="btn btn-default dropdown-toggle"
data-toggle="dropdown" {{bindAttr disabled="view.isDisabled"}}>
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ {{#each column in view.filterColumns}}
+ <li>
+ <a href="#" {{action selectFilterColumn column
target="view"}}>
+ {{#if column.selected}}
+ <i class='glyphicon glyphicon-ok-sign'></i>
+ {{else}}
+ <i class='glyphicon glyphicon-placeholder'></i>
+ {{/if}}
+ {{column.name}}
+ </a>
+ </li>
+ {{/each}}
+ </ul>
</div>
</div>
- </td>
- </tr>
- </table>
+ </div>
+ <div class="col-md-5" id="component-dropdown-div">
+ <!-- Host-components drop-down -->
+ <div>
+ <button class="btn btn-block btn-default dropdown-toggle"
data-toggle="dropdown" href="#" {{bindAttr disabled="view.isDisabled"}}>
+ {{t common.components}}
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <!-- dropdown menu links -->
+ {{#each component in view.filterComponents}}
+ <li>
+ <a href="#" {{action selectFilterComponent component
target="view"}}>
+ {{#if component.selected}}
+ <i class='glyphicon glyphicon-ok-sign'></i>
+ {{else}}
+ <i class='glyphicon glyphicon-placeholder'></i>
+ {{/if}}
+ {{component.displayName}}
+ </a>
+ </li>
+ {{/each}}
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+
<table class="table table-hover">
<thead>
<tr>
- <th width="45%">{{t common.host}}</th>
- <th width="45%">{{view.filterColumn.name}}</th>
- <th width="10%">
+ <th>
{{view App.CheckboxView checkedBinding="view.allHostsSelected"
disabledBinding="view.isDisabled"}}
</th>
+ <th>{{t common.host}}</th>
+ <th>{{view.filterColumn.name}}</th>
</tr>
</thead>
</table>
@@ -105,15 +103,15 @@
<tbody>
{{#each entry in view.pageContent}}
<tr {{bindAttr class="entry.filtered::hidden
entry.selected:active"}}>
- <td width="45%">
+ <td>
+ {{view App.CheckboxView checkedBinding="entry.selected"}}
+ </td>
+ <td>
{{entry.host.hostName}}
</td>
<td>
{{entry.filterColumnValue}}
</td>
- <td width="10%">
- {{view App.CheckboxView checkedBinding="entry.selected"}}
- </td>
</tr>
{{/each}}
</tbody>
diff --git
a/ambari-web/app/templates/common/configs/selectCreateConfigGroup.hbs
b/ambari-web/app/templates/common/configs/selectCreateConfigGroup.hbs
index ef731b3..f154177 100644
--- a/ambari-web/app/templates/common/configs/selectCreateConfigGroup.hbs
+++ b/ambari-web/app/templates/common/configs/selectCreateConfigGroup.hbs
@@ -23,12 +23,8 @@
{{view.parentView.warningMessage}}
</div>
<form>
- <div class="form-group">
- <div class="radio">
- <label {{bindAttr class="view.parentView.hasExistedGroups::message"}}>
- {{view view.selectConfigGroupRadioButton}}
- </label>
- </div>
+ <div>
+ {{view view.selectConfigGroupRadioButton}}
</div>
{{#if view.parentView.availableConfigGroups.length}}
<div class="select-create-config-group-div">
@@ -48,19 +44,15 @@
{{/each}}
</ul>
</div>
- <div class="message">{{t
config.group.selection.dialog.option.select.msg}}</div>
+ <div>{{t config.group.selection.dialog.option.select.msg}}</div>
</div>
{{else}}
<div class="select-create-config-group-div">
<div class="alert alert-block">{{view.parentView.noGroups}}</div>
</div>
{{/if}}
- <div class="form-group">
- <div class="radio">
- <label>
- {{view view.createConfigGroupRadioButton}}
- </label>
- </div>
+ <div>
+ {{view view.createConfigGroupRadioButton}}
</div>
<div class="select-create-config-group-div">
<div class="row">
@@ -70,7 +62,7 @@
</div>
</div>
<div class="clearfix"></div>
- <div class="message">{{view.parentView.createNewGroupDescription}}</div>
+ <div>{{view.parentView.createNewGroupDescription}}</div>
</div>
</form>
</div>
diff --git a/ambari-web/app/views/common/checkbox_view.js
b/ambari-web/app/views/common/checkbox_view.js
index 89a160b..d02a2d8 100644
--- a/ambari-web/app/views/common/checkbox_view.js
+++ b/ambari-web/app/views/common/checkbox_view.js
@@ -52,6 +52,8 @@ var App = require('app');
App.CheckboxView = Em.View.extend({
layoutName: require('templates/common/checkbox'),
concatenatedProperties: ['labelClassNames', 'checkboxClassNames'],
+ classNames: ['checkbox'],
+
/**
* Checkbox id generated by Ember. Used for <code>for</code> label attribute
* @private
@@ -80,7 +82,7 @@ App.CheckboxView = Em.View.extend({
* Label's text
* @type {String}
*/
- label: ' ',
+ label: '',
/**
* Label's i18n code
diff --git a/ambari-web/app/views/common/radio_button_view.js
b/ambari-web/app/views/common/radio_button_view.js
index a8898b3..015adde 100644
--- a/ambari-web/app/views/common/radio_button_view.js
+++ b/ambari-web/app/views/common/radio_button_view.js
@@ -35,6 +35,8 @@ App.RadioButtonView = App.CheckboxView.extend({
*/
selection: null,
+ classNames: ['radio'],
+
/**
* <code>value</code> html attribute of radio button
* @type {[type]}
--
To stop receiving notification emails like this one, please contact
[email protected].
