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/d11faab1 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/d11faab1 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/d11faab1 Branch: refs/heads/branch-feature-AMBARI-22008 Commit: d11faab139761a3e32da773e190951d10d1166f1 Parents: 7428e51 Author: Andrii Tkach <atk...@apache.org> Authored: Mon Nov 13 13:55:43 2017 +0200 Committer: Andrii Tkach <atk...@apache.org> Committed: Tue Nov 14 11:21:46 2017 +0200 ---------------------------------------------------------------------- .../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/d11faab1/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/d11faab1/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/d11faab1/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/d11faab1/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/d11faab1/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/d11faab1/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/d11faab1/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/d11faab1/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"