You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by am...@apache.org on 2017/11/16 15:36:50 UTC
[27/50] [abbrv] ambari git commit: AMBARI-22425 Ambari 3.0: Implement
new design for Admin View: fix checkboxes. (atkach)
AMBARI-22425 Ambari 3.0: Implement new design for Admin View: fix checkboxes. (atkach)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/2a2fdaae
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/2a2fdaae
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/2a2fdaae
Branch: refs/heads/branch-feature-AMBARI-22008
Commit: 2a2fdaaee7f522732ba3f22f0fc499f001c28a7d
Parents: 08a83fa
Author: Andrii Tkach <at...@apache.org>
Authored: Mon Nov 13 13:55:43 2017 +0200
Committer: Attila Magyar <am...@hortonworks.com>
Committed: Thu Nov 16 16:35:29 2017 +0100
----------------------------------------------------------------------
.../resources/ui/admin-web/app/styles/main.css | 15 ++++----
.../ui/admin-web/app/styles/top-nav.css | 3 ++
.../admin-web/app/views/ambariViews/create.html | 20 +++++------
.../admin-web/app/views/ambariViews/edit.html | 37 +++++++++-----------
.../app/views/authentication/main.html | 8 ++---
.../app/views/modals/AddVersionModal.html | 14 ++++----
.../admin-web/app/views/stackVersions/list.html | 11 ++++--
.../views/stackVersions/stackVersionPage.html | 27 +++++++-------
8 files changed, 65 insertions(+), 70 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
index 4224f62..9838227 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
@@ -459,6 +459,11 @@ table.no-border tr td{
vertical-align: top;
}
+.table td > .checkbox {
+ margin-bottom: 0;
+ margin-top: 0;
+}
+
.groups-pane table ul{
list-style-type: none;
margin: 0;
@@ -821,15 +826,6 @@ accordion .panel-group .panel{
padding-left: 19px;
}
-.repo-version-inline {
- left: 11%;
-}
-
-.repo-version-inline .repo-version-label {
- text-align: left;
-
-}
-
.repo-version-inline .dot {
padding-right: 15px;
}
@@ -1164,6 +1160,7 @@ thead.view-permission-header > tr > th {
}
.register-version-form .details-panel .control-label {
+ line-height: 20px;
text-align: left;
padding: 7px 2px;
font-weight: normal;
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css
index f93b2e6..327dc7f 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/top-nav.css
@@ -37,6 +37,9 @@
font-size: 16px;
}
+#top-nav .container {
+ background: #fff;
+}
/** Override bootstrap styles **/
@media (min-width: 0) {
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html
index 25f1487..81171c1 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html
@@ -80,9 +80,8 @@
<div class="form-group">
<div class="col-sm-10 col-sm-offset-3">
<div class="checkbox">
- <label>
- <input type="checkbox" ng-model='instance.visible' class="visibilityCheckbox"> {{'views.visible' | translate}}
- </label>
+ <input type="checkbox" ng-model='instance.visible' id="visibility-checkbox" class="visibilityCheckbox">
+ <label for="visibility-checkbox">{{'views.visible' | translate}}</label>
</div>
</div>
</div>
@@ -122,9 +121,8 @@
<div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
<div class="checkbox create-checkbox-cluster">
- <label>
- <input type="radio" ng-disabled="!clusterConfigurable || noLocalClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="LOCAL_AMBARI" class="visibilityCheckbox"> {{'views.localCluster' | translate}}
- </label>
+ <input type="radio" id="local-cluster" ng-disabled="!clusterConfigurable || noLocalClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="LOCAL_AMBARI" class="visibilityCheckbox">
+ <label for="local-cluster">{{'views.localCluster' | translate}}</label>
</div>
<div class="form-horizontal property-form">
@@ -143,9 +141,8 @@
<div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
<div class="checkbox create-checkbox-cluster">
- <label>
- <input type="radio" ng-disabled="!clusterConfigurable || noRemoteClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="REMOTE_AMBARI" class="visibilityCheckbox"> {{'views.remoteCluster' | translate}}
- </label>
+ <input type="radio" id="remote-cluster" ng-disabled="!clusterConfigurable || noRemoteClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="REMOTE_AMBARI" class="visibilityCheckbox">
+ <label for="remote-cluster">{{'views.remoteCluster' | translate}}</label>
</div>
<div class="form-horizontal property-form">
@@ -164,9 +161,8 @@
<div class="panel-body property-form" ng-hide="!numberOfClusterConfigs">
<div class="checkbox">
- <label>
- <input type="radio" ng-model="instance.clusterType" value="NONE" class="visibilityCheckbox"> {{'views.custom' | translate}}
- </label>
+ <input type="radio" id="custom-view" ng-model="instance.clusterType" value="NONE" class="visibilityCheckbox">
+ <label for="custom-view">{{'views.custom' | translate}}</label>
</div>
<div class="alert alert-danger bottom-margin top-margin" ng-show='form.instanceCreateForm.generalValidationError'>
{{form.instanceCreateForm.generalValidationError}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html
index f91862d..a86e285 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html
@@ -107,9 +107,8 @@
<div class="form-group">
<div class="col-sm-offset-3 col-sm-10">
<div class="checkbox">
- <label>
- <input type="checkbox" ng-model="settings.visible" ng-class="instancevisibility-input"> {{'views.visible' | translate}}
- </label>
+ <input type="checkbox" class="form-control" ng-model="settings.visible" id="visible" ng-class="instancevisibility-input">
+ <label for="visible">{{'views.visible' | translate}}</label>
</div>
</div>
</div>
@@ -173,9 +172,8 @@
</div>
<div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
<div class="checkbox">
- <label>
- <input type="radio" ng-model="data.clusterType" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noLocalClusterAvailible" value="LOCAL_AMBARI" class="visibilityCheckbox"> {{'views.localCluster' | translate}}
- </label>
+ <input type="radio" id="local-cluster" ng-model="data.clusterType" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noLocalClusterAvailible" value="LOCAL_AMBARI" class="visibilityCheckbox form-control">
+ <label for="local-cluster">{{'views.localCluster' | translate}}</label>
</div>
<div class="form-horizontal property-form">
<div class="form-group">
@@ -189,9 +187,8 @@
</div>
<p> </p>
<div class="checkbox">
- <label>
- <input type="radio" ng-model="data.clusterType" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noRemoteClusterAvailible" value="REMOTE_AMBARI" class="visibilityCheckbox"> {{'views.remoteCluster' | translate}}
- </label>
+ <input type="radio" id="remote-cluster" ng-model="data.clusterType" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noRemoteClusterAvailible" value="REMOTE_AMBARI" class="visibilityCheckbox form-control">
+ <label for="remote-cluster">{{'views.remoteCluster' | translate}}</label>
</div>
<div class="form-horizontal property-form">
<div class="form-group">
@@ -205,15 +202,14 @@
</div>
<p> </p>
<div class="checkbox" ng-hide="isConfigurationEmpty">
- <label>
- <input type="radio"
- ng-model="data.clusterType"
- ng-disabled="editConfigurationDisabled"
- value="NONE"
- ng-change="disableLocalCluster()"
- class="visibilityCheckbox">
- {{'views.custom' | translate}}
- </label>
+ <input type="radio"
+ id="custom-view"
+ ng-model="data.clusterType"
+ ng-disabled="editConfigurationDisabled"
+ value="NONE"
+ ng-change="disableLocalCluster()"
+ class="visibilityCheckbox">
+ <label for="custom-view">{{'views.custom' | translate}}</label>
</div>
</div>
<div class="panel-body edit-view-custom-wrap">
@@ -289,9 +285,8 @@
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox col-sm-12" ng-repeat="key in permissionRoles">
<div ng-init="i18nKey = 'views.clusterPermissions.' + key.split('.').join('').toLowerCase()">
- <label>
- <input type="checkbox" ng-model="permissionsEdit['VIEW.USER']['ROLE'][key]"> {{i18nKey | translate}}
- </label>
+ <input ng-attr-id="{{i18nKey}}" type="checkbox" class="form-control" ng-model="permissionsEdit['VIEW.USER']['ROLE'][key]">
+ <label ng-attr-for="{{i18nKey}}">{{i18nKey | translate}}</label>
</div>
</div>
<a href ng-click="checkAllRoles()">{{'common.controls.checkAll' | translate}}</a> | <a href ng-click="clearAllRoles()">{{'common.controls.clearAll' | translate}}</a>
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html
index fddedb9..0275a21 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html
@@ -58,10 +58,8 @@
</div>
</div>
<div class="form-group">
+ <input type="checkbox" id="ssl" ng-model="connectivity.ssl" class="col-sm-8">
<label for="ssl" class="control-label col-sm-4">{{'authentication.connectivity.ssl' | translate}}</label>
- <div class="col-sm-8">
- <input type="checkbox" id="ssl" ng-model="connectivity.ssl">
- </div>
</div>
<div class="form-group">
<label for="trust-store" class="control-label col-sm-4">{{'authentication.connectivity.trustStore.label' | translate}}</label>
@@ -121,12 +119,12 @@
<form class="form-horizontal" ng-submit="detectAttributes()">
<div class="form-group col-sm-12">{{'authentication.attributes.detection.label' | translate}}</div>
<div class="form-group">
+ <input type="radio" id="manual-detection" name="detection" ng-model="attributes.detection" ng-disabled="isAttributeDetectionRunning" value="manual">
<label for="manual-detection" class="col-sm-12">
- <input type="radio" id="manual-detection" name="detection" ng-model="attributes.detection" ng-disabled="isAttributeDetectionRunning" value="manual">
{{'authentication.attributes.detection.options.manual' | translate}}
</label>
+ <input type="radio" id="auto-detection" name="detection" ng-model="attributes.detection" ng-disabled="isAttributeDetectionRunning" value="auto">
<label for="auto-detection" class="col-sm-12">
- <input type="radio" id="auto-detection" name="detection" ng-model="attributes.detection" ng-disabled="isAttributeDetectionRunning" value="auto">
{{'authentication.attributes.detection.options.auto' | translate}}
</label>
</div>
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html
index 457be7b..be11e1a 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AddVersionModal.html
@@ -20,9 +20,10 @@
</div>
<br>
<div class="clearfix register-version-options" ng-click="selectedLocalOption.index=1">
- <div class="option-radio-button">
- <label class="option-label">
- <input type="radio" ng-model="selectedLocalOption.index" value="1"> {{'versions.uploadFile' | translate}}
+ <div class="option-radio-button checkbox">
+ <input type="radio" id="upload-file" ng-model="selectedLocalOption.index" value="1">
+ <label for="upload-file" class="option-label">
+ {{'versions.uploadFile' | translate}}
</label>
</div>
<div class="col-sm-7 choose-file-input">
@@ -31,9 +32,10 @@
</div>
</div>
<div class="clearfix register-version-options bottom-margin" ng-click="selectedLocalOption.index=2">
- <div class="option-radio-button">
- <label class="option-label">
- <input type="radio" ng-model="selectedLocalOption.index" value="2"> {{'versions.enterURL' | translate}}
+ <div class="option-radio-button checkbox">
+ <input type="radio" id="entire-url" ng-model="selectedLocalOption.index" value="2">
+ <label for="entire-url" class="option-label">
+ {{'versions.enterURL' | translate}}
</label>
</div>
<div class="col-sm-9">
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html
index 99f9ac0..a411640 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html
@@ -97,11 +97,11 @@
<span class="label {{'status-' + repo.status}}">{{'versions.installed' | translate}}: {{repo.installedHosts}}/{{repo.totalHosts}}</span>
</div>
<div ng-show="!repo.cluster">
- <div class="btn-group display-inline-block" dropdown is-open="viewsdropdown.isopen" ng-mouseover="viewsdropdown.isopen=true" ng-mouseout="viewsdropdown.isopen=false" ng-init="viewsdropdown.isopen=false">
+ <div class="btn-group" ng-class="{open: viewsdropdown.isopen}" ng-mouseover="viewsdropdown.isopen=true" ng-mouseout="viewsdropdown.isopen=false" ng-init="viewsdropdown.isopen=false">
<a class="btn dropdown-toggle">
<span>{{'versions.installOn' | translate}}</span>
</a>
- <ul class="dropdown-menu" ng-show="viewsdropdown.isopen">
+ <ul class="dropdown-menu">
<li ng-repeat="cluster in dropDownClusters">
<a href="javascript:void(null)" ng-click="goToCluster()">
<span>{{cluster.Clusters.cluster_name}}</span>
@@ -111,7 +111,12 @@
</div>
</div>
</td>
- <td class="text-center"><input type="checkbox" data-ng-model="repo.hidden" data-ng-change="toggleVisibility(repo)" data-ng-disabled="!isHideCheckBoxEnabled(repo)"/></td>
+ <td class="text-center">
+ <div class="checkbox">
+ <input ng-attr-id="{{ 'hidden-' + repo.id }}" type="checkbox" class="form-control" data-ng-model="repo.hidden" data-ng-change="toggleVisibility(repo)" data-ng-disabled="!isHideCheckBoxEnabled(repo)"/>
+ <label ng-attr-for="{{ 'hidden-' + repo.id }}"><span></span></label>
+ </div>
+ </td>
</tr>
</tbody>
</table>
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a2fdaae/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html
index 85d659d..ea30824 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html
@@ -119,14 +119,14 @@
</div>
<div id="upload-definition-file-panel" ng-if="createController">
- <div class="col-sm-12 big-radio clearfix hide-soft" ng-class="{'disabled' : networkLost || useRedhatSatellite,'visible':stackRepoUpdateLinkExists}">
- <input type="radio" ng-model="selectedOption.index" value="1" ng-change="togglePublicLocalOptionSelect()" ng-disabled="networkLost || useRedhatSatellite">
- <span>{{'versions.usePublic' | translate}}</span>
+ <div class="checkbox col-sm-12 big-radio clearfix hide-soft" ng-class="{'disabled' : networkLost || useRedhatSatellite,'visible':stackRepoUpdateLinkExists}">
+ <input id="use-public" type="radio" ng-model="selectedOption.index" value="1" ng-change="togglePublicLocalOptionSelect()" ng-disabled="networkLost || useRedhatSatellite">
+ <label for="use-public">{{'versions.usePublic' | translate}}</label>
<a id="public-disabled-link" href="javascript:void(0);" ng-if="networkLost" ng-click="showPublicRepoDisabledDialog()">{{'versions.networkIssues.networkLost'| translate}}</a>
</div>
- <div class="col-sm-12 big-radio clearfix">
- <input type="radio" ng-model="selectedOption.index" value="2" ng-change="togglePublicLocalOptionSelect()">
- {{'versions.useLocal' | translate}}
+ <div class="checkbox col-sm-12 big-radio clearfix">
+ <input id="use-local" type="radio" ng-model="selectedOption.index" value="2" ng-change="togglePublicLocalOptionSelect()">
+ <label for="use-local">{{'versions.useLocal' | translate}}</label>
</div>
</div>
@@ -204,22 +204,21 @@
</div>
</div>
<div class="clearfix advanced-radio-buttons">
- <div class="col-sm-9" id="skip-validation">
+ <div class="col-sm-9">
<div class="checkbox">
- <label>
- <input type="checkbox" ng-model="skipValidation" ng-change="clearErrors()"
- ng-disabled="useRedhatSatellite">
+ <input type="checkbox" id="skip-validation" ng-model="skipValidation" ng-change="clearErrors()" ng-disabled="useRedhatSatellite">
+ <label for="skip-validation">
<span ng-class="{'disabled' : useRedhatSatellite}">{{'versions.skipValidation' | translate}}</span>
<i class="fa fa-question-circle"
tooltip-html-unsafe="{{'versions.alerts.skipValidationWarning' | translate}}" aria-hidden="true"></i>
</label>
</div>
</div>
- <div class="col-sm-9" id="use-redhat">
+ <div class="col-sm-9">
<div class="checkbox">
- <label>
- <input type="checkbox" ng-model="useRedhatSatellite" ng-change="clearErrors()"
- ng-disabled="isPublicRepoSelected()">
+ <input type="checkbox" id="use-redhat" ng-model="useRedhatSatellite" ng-change="clearErrors()"
+ ng-disabled="isPublicRepoSelected()">
+ <label for="use-redhat">
<span ng-class="{'disabled' : isPublicRepoSelected()}"
tooltip="{{(isPublicRepoSelected())? ('versions.useRedhatSatellite.disabledMsg' | translate) : ''}}">{{'versions.useRedhatSatellite.title' | translate}}</span>
<i class="fa fa-question-circle"