openstack/horizon
Code Issues Proposed changes

cleanup for ng create volume workflow

Browse Source 
- cleanup help text in workflow and slide-out help panel (it's repetitive)
- add required asterisk to some form labels
- remove unnecessary css styles
- remove unnecessary eslint-disable/enable flags

Change-Id: I7de0dc7ee19816392003242431459eb73d141555
Closes-Bug: #1560594
This commit is contained in:
Cindy Lu
2016-03-22 11:57:47 -07:00
parent 4a6df55120
commit 0aacdbe2ec
7 changed files with 70 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
openstack_dashboard/static/app/core/images/_images.scss
View File

@@ -12,11 +12,3 @@ table[ng-controller="horizon.app.core.images.table.ImagesController as table"] {
max-height: 30em;
}
.workflow-step-radiator {
margin-left: 10px;
.radiator-title {
color: #555;
font-weight: 600;
font-size: 0.9em;
}
}

10
openstack_dashboard/static/app/core/images/steps/create-volume/create-volume.help.html
View File

@@ -1,10 +0,0 @@
<div>
<h3 translate>Description:</h3>
<p translate>
Volumes are block devices that can be attached to instances.
</p>
<p>
<strong translate>Volume Type Description: </strong>
<translate>If "No volume type" is selected, the volume will be created without a volume type.</translate>
</p>
</div>

137
openstack_dashboard/static/app/core/images/steps/create-volume/create-volume.html
View File

@@ -1,79 +1,74 @@
<div ng-controller="horizon.app.core.images.steps.CreateVolumeController as createVolumeCtrl">
<h1 translate>Volume Details</h1>
<!--content-->
<div class="content">
<div class="subtitle" translate>Volumes are block devices that can be attached to instances.</div>
<fieldset ng-disabled="createVolumeCtrl.volumeQuota.overMax">
<div class="col-md-11 col-lg-11">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<div class="form-field required">
<label class="control-label" translate>Name</label>
<input class="form-control" type="text" ng-required="true" ng-model="createVolumeCtrl.volume.name">
</div>
</div>
<div class="form-group">
<label class="control-label" translate>Description</label>
<input class="form-control" type="text" ng-model="createVolumeCtrl.volume.description">
</div>
<div class="form-group">
<label class="control-label" translate>Use image as a source</label>
<input class="form-control" type="text" ng-model="createVolumeCtrl.sourceImage" disabled>
</div>
<div class="row">
<div class="col-md-6 col-lg-6">
<div class="form-group">
<label class="control-label" translate>Type</label>
<select class="form-control"
ng-model="createVolumeCtrl.volumeType"
ng-options="volumeType as volumeType.name for volumeType in createVolumeCtrl.volumeTypes">
</select>
</div>
</div>
<div class="col-md-6 col-lg-6">
<div class="form-group">
<div class="form-field required">
<label class="control-label required" translate>Size (GB)</label>
<input name="volume-size" class="form-control" type="number" min="1" ng-required="true" ng-model="createVolumeCtrl.volume.size">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="form-field required">
<label class="control-label" translate>Availability Zone</label>
<select class="form-control" ng-model="createVolumeCtrl.volume.availability_zone" ng-required="true">
<option value="" selected="selected" translate>Select a zone</option>
<option ng-repeat="availabilityZone in createVolumeCtrl.availabilityZones"
ng-value="availabilityZone.zoneName">
{$ availabilityZone.zoneName $}
</option>
<p translate>Volumes are block devices that can be attached to instances.</p>
<fieldset ng-disabled="createVolumeCtrl.volumeQuota.overMax">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">
<span translate>Name</span>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input class="form-control" type="text" ng-required="true" ng-model="createVolumeCtrl.volume.name">
</div>
<div class="form-group">
<label class="control-label">
<span translate>Description</span>
</label>
<input class="form-control" type="text" ng-model="createVolumeCtrl.volume.description">
</div>
<div class="form-group">
<label class="control-label">
<span translate>Use image as a source</span>
</label>
<input class="form-control" type="text" ng-model="createVolumeCtrl.sourceImage" disabled>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">
<span translate>Type</span>
</label>
<select class="form-control"
ng-model="createVolumeCtrl.volumeType"
ng-options="volumeType as volumeType.name for volumeType in createVolumeCtrl.volumeTypes">
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="volume-size" class="control-label">
<span translate>Size (GB)</span>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="volume-size" class="form-control" id="volume-size" type="number" min="1" ng-required="true" ng-model="createVolumeCtrl.volume.size">
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<div class="chart">
<pie-chart chart-data="createVolumeCtrl.storageQuota"></pie-chart>
</div>
</div>
<div class="form-group">
<div class="chart">
<pie-chart chart-data="createVolumeCtrl.volumeQuota"></pie-chart>
</div>
</div>
<div class="form-group workflow-step-radiator">
<p class="radiator-title" translate>Volume Type Description:</p>
<dl class>
<dt>{$ createVolumeCtrl.volumeType.name $}</dt>
<dd>{$ createVolumeCtrl.volumeType.description $}</dd>
</dl>
</div>
<div class="form-group">
<label for="availability-zone" class="control-label">
<span translate>Availability Zone</span>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<select class="form-control" id="availability-zone" ng-model="createVolumeCtrl.volume.availability_zone" ng-required="true">
<option value="" selected="selected" translate>Select a zone</option>
<option ng-repeat="availabilityZone in createVolumeCtrl.availabilityZones"
ng-value="availabilityZone.zoneName">
{$ availabilityZone.zoneName $}
</option>
</select>
</div>
</div>
</fieldset>
</div>
<div class="col-xs-6">
<pie-chart chart-data="createVolumeCtrl.storageQuota"></pie-chart>
</div>
<div class="col-xs-6">
<pie-chart chart-data="createVolumeCtrl.volumeQuota"></pie-chart>
<p translate>Volume Type Description:</p>
<dl class>
<dt>{$ createVolumeCtrl.volumeType.name $}</dt>
<dd>{$ createVolumeCtrl.volumeType.description $}</dd>
</dl>
</div>
</div>
</fieldset>
</div>

5
openstack_dashboard/static/app/core/images/steps/edit-image/edit-image.html
View File

@@ -44,7 +44,10 @@
<div class="row form-group">
<div class="col-xs-6 col-sm-6">
<div class="form-group required">
<label class="control-label required" for="imageForm-format" translate>Format</label>
<label class="control-label required" for="imageForm-format">
<span translate>Format</span>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<select class="form-control switchable ng-pristine ng-untouched ng-valid" ng-required="true" id="imageForm-format" name="format" ng-model="ctrl.image_format" ng-options="key as label for (key, label) in ctrl.imageFormats" ng-change="ctrl.setFormats()">
</select>
</div>

1
openstack_dashboard/static/app/core/images/workflows/create-volume.service.js
View File

@@ -43,7 +43,6 @@
{
title: gettext('Volume Details'),
templateUrl: basePath + 'steps/create-volume/create-volume.html',
helpUrl: basePath + 'steps/create-volume/create-volume.help.html',
formName: 'volumeForm'
}
]

2
openstack_dashboard/static/app/core/workflow/decorator.service.js
View File

@@ -19,7 +19,6 @@
var forEach = angular.forEach;
/* eslint-disable max-len */
/**
* @ngdoc factory
* @name horizon.app.core.workflow.factory:horizon.app.core.workflow.decorator
@@ -43,7 +42,6 @@
* @returns {Object} The decorated workflow specification object, the same
* reference to the input spec object.
*/
/* eslint-ensable max-len */
angular
.module('horizon.app.core.workflow')
.factory('horizon.app.core.workflow.decorator', dashboardWorkflowDecorator);

2
openstack_dashboard/static/app/core/workflow/workflow.module.js
View File

@@ -16,7 +16,6 @@
(function () {
'use strict';
/* eslint-disable max-len */
/**
* @ngdoc overview
* @name horizon.app.core.workflow
@@ -27,7 +26,6 @@
* This module provides utility function factory `dashboardWorkflow` and
* `dashboardWorkflowDecorator`.
*/
/* eslint-enable max-len */
angular.module('horizon.app.core.workflow', []);
})();