Consolidate button styles
This patchset will create consistent button styling according
to the styleguide and remove redundant button styles by creating
reusable button classes.
This patchset also implements a consistent strategy for including
icon assets. Currently, svg icons are imported as CSS background
images or inlined into the markup. Inlining an svg is preferred,
especially when used with buttons or links so the colors can
be easily changed for different states (hover, focus, disabled)
without having to request variants.
The icon provider allows us to inline svgs without cluttering
the markup. Webpack config was adjusted to use svg-inline-loader
when resolving svgs that are used by the icon provider directive.
- All svgs were optimized to remove unncessary information.
- Removed unused svg color variants
- Moved icons used by icon provider to separate directory to
avoid Webpack parsing the files twice
- Small changes to navigation icons
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I1ca214b74fc502e6b6e760cfee88b48110237c43
diff --git a/app/configuration/controllers/date-time-controller.html b/app/configuration/controllers/date-time-controller.html
index 8ea478a..d84d278 100644
--- a/app/configuration/controllers/date-time-controller.html
+++ b/app/configuration/controllers/date-time-controller.html
@@ -19,11 +19,11 @@
<div class="inline">
<input id="ntp-server{{$index+1}}" type="text" ng-readonly="time.mode != 'NTP'" ng-model="server" ng-blur="ntp.servers[$index] = server" set-focus-on-new-input/>
</div>
- <button class="date-time__dns-remove inline" ng-click="removeNTPField($index)">Remove</button>
+ <button class="btn date-time__dns-remove btn-tertiary" ng-click="removeNTPField($index)">Remove</button>
</fieldset>
</div>
<div class="row column date-time__ntp-servers-wrap">
- <button type="button" class="btn-primary block" ng-click="addNTPField()">Add new NTP server</button>
+ <button type="button" class="btn btn-primary" ng-click="addNTPField()">Add new NTP server</button>
</div>
<div class="row column">
<label class="control-radio" for="manual-time">Manually set date and time
@@ -59,8 +59,8 @@
</div>
</fieldset>
<div class="time__submit-wrapper">
- <button type="button" class="btn-primary inline" ng-click="setTime()">Save settings</button>
- <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
+ <button type="button" class="btn btn-primary" ng-click="setTime()">Save settings</button>
+ <button type="button" class="btn btn-secondary" ng-click="refresh()">Cancel</button>
</div>
</form>
</div>
diff --git a/app/configuration/controllers/firmware-controller.html b/app/configuration/controllers/firmware-controller.html
index 6863ae5..98f9c00 100644
--- a/app/configuration/controllers/firmware-controller.html
+++ b/app/configuration/controllers/firmware-controller.html
@@ -22,13 +22,13 @@
<p>Select the image file saved on the workstation storage medium to upload to the server BMC.</p>
<label for="file-upload" class="inline firmware__upload-chooser">
<input id="file-upload" type="file" file="file" class="hide"/>
- <span class="button btn-secondary inline">Choose a file</span>
+ <span class="btn btn-secondary">Choose a file</span>
<span class="inline firmware__upload-file-name"><span ng-if="!file">No file chosen</span><span ng-if="file.name !== undefined">{{file.name}}</span></span>
</label>
- <input type="button" value="Upload firmware" class="inline button btn-primary float-right" ng-click="upload()"/>
+ <input type="button" value="Upload firmware" class="btn btn-primary float-right" ng-click="upload()"/>
<div class="inline uploading" ng-show="uploading">Upload in progress...</div>
</div>
- <div class=" column firmware__upload-tftp">
+ <div class="column firmware__upload-tftp">
<h3>Download image file from TFTP server</h3>
<p>Specify both the TFTP server IP address and the image file name stored on it to download to the server BMC.</p>
<fieldset>
@@ -42,7 +42,7 @@
<input name="tftp-file-name" id="tftp-file-name" type="text" ng-model="download_filename"/>
</div>
<div class="column small-12 large-4">
- <input type="button" value="Download firmware" class="inline button btn-primary float-right" ng-click="download()"/>
+ <input type="button" value="Download firmware" class="btn btn-primary float-right" ng-click="download()"/>
</div>
</div>
<div class="inline uploading" ng-show="downloading">Downloading in progress...</div>
@@ -64,8 +64,8 @@
<p>Change firmware {{priority_image_version}} priority?</p>
</div>
<div class="modal__button-wrapper">
- <button class="inline btn-secondary" ng-click="confirm_priority=false;">Cancel</button>
- <button class="inline btn-primary" ng-click="confirmChangePriority()">Continue</button>
+ <button class="btn btn-secondary" ng-click="confirm_priority=false;">Cancel</button>
+ <button class="btn btn-primary" ng-click="confirmChangePriority()">Continue</button>
</div>
</div>
</section>
@@ -81,8 +81,8 @@
<p>Delete firmware {{delete_image_version}}?</p>
</div>
<div class="modal__button-wrapper">
- <button class="inline btn-secondary" ng-click="confirm_delete=false;">Cancel</button>
- <button class="inline btn-primary" ng-click="confirmDeleteImage()">Continue</button>
+ <button class="btn btn-secondary" ng-click="confirm_delete=false;">Cancel</button>
+ <button class="btn btn-primary" ng-click="confirmDeleteImage()">Continue</button>
</div>
</div>
</section>
@@ -91,10 +91,8 @@
<div class="modal__activate" role="document">
<div class="screen-reader-offscreen modal-description">Activate modal</div><!-- accessibility only; used for screen readers -->
<div class="page-header ">
- <h3 class="modal-title"><span class="icon icon__info"><svg xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 32 32"><path
- d="M18 14h-6v2h1v6h-2v2h8v-2h-2z"/><circle cx="16" cy="10" r="2"/><path
- d="M16 2C8.269 2 2 8.269 2 16s6.269 14 14 14 14-6.269 14-14S23.731 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/></svg></span>
+ <h3 class="modal-title">
+ <icon class="icon__info" file="icon-information.svg"></icon>
<!-- We call "Host" firmware "server" firmware -->
Confirm {{activate_image_type == 'Host' ? 'server' : activate_image_type}} firmware file activation
</h3>
@@ -138,8 +136,8 @@
</form>
</div>
<div class="modal__button-wrapper">
- <button class="inline btn-secondary" ng-click="activate_confirm=false;">Cancel</button>
- <button class="inline btn-primary" ng-click="activateConfirmed()">Continue</button>
+ <button class="btn btn-secondary" ng-click="activate_confirm=false;">Cancel</button>
+ <button class="btn btn-primary" ng-click="activateConfirmed()">Continue</button>
</div>
</div>
</section>
diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html
index 343d4fd..f434ef6 100644
--- a/app/configuration/controllers/network-controller.html
+++ b/app/configuration/controllers/network-controller.html
@@ -72,12 +72,12 @@
<input id="ipv4-prefix-{{$index+1}}" class="column small-6" ng-change="ipv4.updatePrefix = true"
type="number" min="1" max="32" step="1" ng-disabled="interface.DHCPEnabled"
ng-model="ipv4.PrefixLength" />
- <button class="network-config_remove-button inline" ng-click="removeIpv4Address($index)">Remove</button>
+ <button class="btn btn-tertiary network-config_remove-button" ng-click="removeIpv4Address($index)">Remove</button>
</div>
</fieldset>
<div class="row column">
<div class="column small-12">
- <button type="button" class="btn-primary inline" ng-click="addIpv4Field()">Add IPV4 address</button>
+ <button type="button" class="btn btn-primary" ng-click="addIpv4Field()">Add IPV4 address</button>
</div>
</div>
</div>
@@ -94,19 +94,23 @@
<label for="net-config__prime-dns{{$index+1}}">DNS Server {{$index+1}}</label>
<input id="net-config__prime-dns{{$index+1}}" class="network-input column small-6 large-4 inline"
type="text" ng-model="dns" ng-blur="interface.Nameservers[$index] = dns" set-focus-on-new-input />
- <button class="network-config_remove-button inline" ng-click="removeDNSField($index)">Remove</button>
+ <button class="btn btn-tertiary network-config_remove-button" ng-click="removeDNSField($index)">Remove</button>
</div>
</div>
<div class="row column">
<div class="column small-12">
- <button type="button" class="btn-primary inline dns_add" ng-click="addDNSField()">Add DNS server</button>
+ <button type="button" class="btn btn-primary dns_add" ng-click="addDNSField()">Add DNS server</button>
</div>
</div>
</div>
</fieldset>
- <div class="network-config__submit-wrapper">
- <button type="button" class="btn-primary inline" ng-click="confirmSettings=true;">Save settings</button>
- <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
+ <div class="row column">
+ <div class="network-config__submit-wrapper column">
+ <div class="float-right">
+ <button type="button" class="btn btn-secondary" ng-click="refresh()">Cancel</button>
+ <button type="button" class="btn btn-primary" ng-click="confirmSettings=true;">Save settings</button>
+ </div>
+ </div>
</div>
</form>
</div>
@@ -125,8 +129,8 @@
Proceed with caution and make note of any new settings that may affect connectivity.</p>
</div>
<div class="modal__button-wrapper">
- <button class="inline btn-secondary" ng-click="confirmSettings=false;">Cancel</button>
- <button class="inline btn-primary" ng-click="setNetworkSettings()">Continue</button>
+ <button class="btn btn-secondary" ng-click="confirmSettings=false;">Cancel</button>
+ <button class="btn btn-primary" ng-click="setNetworkSettings()">Continue</button>
</div>
</div>
</section>
\ No newline at end of file
diff --git a/app/configuration/controllers/snmp-controller.html b/app/configuration/controllers/snmp-controller.html
index 35cd1f4..aa61f64 100644
--- a/app/configuration/controllers/snmp-controller.html
+++ b/app/configuration/controllers/snmp-controller.html
@@ -69,28 +69,29 @@
</fieldset>
</div>
<div class="small-2 align-self-center snmp__buttons">
- <button class="edit_button" type="button">
- <img src="../../assets/images/icon-edit-blue.svg" alt="Edit">
+ <button class="btn edit_button" type="button">
+ <icon file="icon-edit.svg" aria-label="Edit"></icon>
</button>
</div>
</div>
</div>
<div class="small-1 align-self-center snmp__buttons trash">
- <button class="trash_button" type="button" ng-click="removeSNMPManager($index)">
- <img src="../../assets/images/icon-trashcan-blue.svg" alt="Remove">
+ <button class="btn trash_button" type="button" ng-click="removeSNMPManager($index)">
+ <icon file="icon-trashcan.svg" aria-label="Remove"></icon>
</button>
</div>
</div>
<div class="row column">
- <button class="btn-add" type="button" ng-click="submitted=false; addNewSNMPManager();"><img class="add__icon" src="../../assets/images/icon-plus.svg" alt=""/> Add manager</button>
+ <button class="btn btn-tertiary btn-add" type="button" ng-click="submitted=false; addNewSNMPManager();">
+ <icon file="icon-plus.svg"></icon>Add manager</button>
</div>
</form>
</div>
</div>
<div class="row column">
<div class="snmp__submit-wrapper">
- <button type="button" ng-click="submitted=true; snmp__form.$valid && setSNMP();" class="btn-primary inline">Save settings</button>
- <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
+ <button type="button" ng-click="submitted=true; snmp__form.$valid && setSNMP();" class="btn btn-primary">Save settings</button>
+ <button type="button" class="btn btn-secondary" ng-click="refresh()">Cancel</button>
</div>
</div>
</div>
\ No newline at end of file
diff --git a/app/configuration/controllers/virtual-media-controller.html b/app/configuration/controllers/virtual-media-controller.html
index 22c4bf8..e756986 100644
--- a/app/configuration/controllers/virtual-media-controller.html
+++ b/app/configuration/controllers/virtual-media-controller.html
@@ -13,12 +13,14 @@
<!-- Button -->
<label class="vm__upload-choose-label">
<input id="file-upload" type="file" file="device.file" class="hide" ng-disabled="device.isActive"/>
- <span class="vm__upload-choose-button button btn-secondary" ng-class="{disabled:device.isActive}">Choose file</span>
+ <span class="vm__upload-choose-button btn btn-secondary" ng-class="{disabled:device.isActive}">Choose file</span>
</label>
<div class="vm__upload-name">
<span ng-if="!device.file">No file selected</span>
<span ng-if="device.file.name !== undefined">{{device.file.name}}</span>
- <span class="icon__exit" ng-if="device.file && !device.isActive" ng-click="resetFile($index);"></span>
+ <span class="icon__exit" ng-if="device.file && !device.isActive" ng-click="resetFile($index);">
+ <icon file="icon-close.svg"></icon>
+ </span>
</div>
</div>
<div class="vm__active-text vm__active-border" ng-if="device.isActive">
@@ -29,7 +31,7 @@
</div>
</div>
<div class="vm__upload-start">
- <input type="button" ng-value="device.isActive ? 'Stop' : 'Start'" ng-class="{disabled:!device.file}" class="button btn-primary" ng-click="device.isActive? stopVM($index) : startVM($index)"/>
+ <input type="button" ng-value="device.isActive ? 'Stop' : 'Start'" ng-class="{disabled:!device.file}" class="btn btn-primary" ng-click="device.isActive? stopVM($index) : startVM($index)"/>
</div>
</div>
</div>
diff --git a/app/configuration/styles/date-time.scss b/app/configuration/styles/date-time.scss
index 80d4b17..00f7b8b 100644
--- a/app/configuration/styles/date-time.scss
+++ b/app/configuration/styles/date-time.scss
@@ -1,10 +1,6 @@
// Date Time SCSS
.time__form {
- input {
- margin-bottom: 0em;
- }
-
fieldset {
padding-left: 1.8em;
}
@@ -49,12 +45,7 @@
margin: .5em;
}
}
- .date-time__dns-remove {
- color: $medblue;
- opacity: 1;
- margin-left: 1em;
- &:hover {
- cursor: pointer;
- }
+ /*button*/.date-time__dns-remove {
+ margin-right: 1em;
}
}
diff --git a/app/configuration/styles/firmware.scss b/app/configuration/styles/firmware.scss
index 6d3c00f..8c7a304 100644
--- a/app/configuration/styles/firmware.scss
+++ b/app/configuration/styles/firmware.scss
@@ -15,6 +15,7 @@
}
.icon {
color: $medblue;
+ fill: $medblue;
&.disabled {
color: $medgrey;
&:hover {
@@ -27,7 +28,6 @@
}
.icon.icon-as-spacer {
text-indent: 0;
- color: $btn__disabled-txt;
&:hover {
cursor: default;
}
@@ -116,7 +116,7 @@
padding-left: 1em;
padding-right: 1em;
margin-bottom: 1em;
- .button {
+ .btn {
margin: 1em .5em 1em 0;
min-width: 3em;
}
@@ -138,7 +138,7 @@
padding-left: 1em;
padding-bottom: 50px;
padding-right: 0;
- .button {
+ .btn {
margin-top: 15px;
}
}
diff --git a/app/configuration/styles/network.scss b/app/configuration/styles/network.scss
index 61a6cb6..5b862e7 100644
--- a/app/configuration/styles/network.scss
+++ b/app/configuration/styles/network.scss
@@ -11,12 +11,10 @@
text-align: left;
}
input {
- margin-bottom: 1.2em;
+ margin-bottom: 2em;
}
.net-config__fieldset {
- margin-bottom: 1.2rem;
-
legend {
padding-bottom: 0.5rem;
}
@@ -41,10 +39,13 @@
font-weight: 700;
}
.network-config__submit-wrapper {
- width: 100%;
- margin-top: 3em;
padding-top: 1em;
border-top: 1px solid $medgrey;
+ margin-top: 2em;
+
+ .btn:not(:last-child) {
+ margin-right: 1em;
+ }
&::after {
content: " ";
@@ -52,20 +53,8 @@
clear: both;
}
- button {
- float: right;
- margin: .5em;
- }
}
.network-config__ipv4-wrap {
padding-bottom: 1.8em;
}
- .network-config_remove-button {
- color: $medblue;
- margin-left: 1em;
- opacity: 1;
- &:hover {
- cursor: pointer;
- }
- }
}
diff --git a/app/configuration/styles/snmp.scss b/app/configuration/styles/snmp.scss
index ea20a6a..96b71f0 100644
--- a/app/configuration/styles/snmp.scss
+++ b/app/configuration/styles/snmp.scss
@@ -66,36 +66,17 @@
}
.snmp__buttons {
text-align: right;
- padding-right: .5em;
- &.trash{
- text-align: left;
- }
- button{
- margin:.3em;
- img{
- width: 100%;
- height:100%;
+ .btn{
+ padding: 0;
+ width: auto;
+ svg {
+ fill: $color--blue-40;
+ width: auto;
+ height: 1.3em;
}
}
}
- .trash_button {
- padding: 0;
- width: 1.3em;
- height: 1.3em;
- }
- .edit_button {
- padding: 0;
- width: 1.3em;
- height: 1.2em;
- }
- .btn-add {
- &:focus {
- outline-offset: 3px;
- }
- margin: 2em 0;
- color: $primebtn__bg;
- padding: 1em 0;
- }
+
.snmp__submit-wrapper {
width: 100%;
border-top: 1px solid $medgrey;
diff --git a/app/configuration/styles/virtual-media.scss b/app/configuration/styles/virtual-media.scss
index f7d75b8..1e7724b 100644
--- a/app/configuration/styles/virtual-media.scss
+++ b/app/configuration/styles/virtual-media.scss
@@ -26,9 +26,6 @@
font-size: 1rem;
background-color: $white;
min-width: 3em;
- &.disabled {
- background-color: $btn__disabled-bg;
- }
}
.vm__upload-content {
@@ -40,8 +37,7 @@
cursor: pointer;
width: 0.75em;
height: 0.75em;
- margin: 0.3em 1em 0.3em 0.3em;
- background-image: url(../assets/images/crit-x-black.svg);
+ margin: 0 1em 0.3em 0.3em;
}
}