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/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index c70c5da..24c70b0 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -6,7 +6,7 @@
<div class="row column">
<div class="page-header">
<h2 class="inline">All hardware in the system</h2>
- <a ng-href="data:text/json;charset=utf-8,{{originalData}}" class="inline btn-export float-right" download="export_inventory.json" ng-show="hardwares.length">Export</a>
+ <a ng-href="data:text/json;charset=utf-8,{{originalData}}" class="btn btn-tertiary float-right" download="export_inventory.json" ng-show="hardwares.length"><icon file="icon-export.svg"></icon>Export</a>
</div>
</div>
<div class="row column">
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 34a2ec3..3b164bd 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -46,21 +46,21 @@
</p>
</div>
<div class="inline__confirm-buttons">
- <button class="btn-primary" ng-click="accept()">Yes</button>
- <button class="btn-primary" ng-click="confirm = false">No</button>
+ <button class="btn btn-primary" ng-click="accept()">Yes</button>
+ <button class="btn btn-primary" ng-click="confirm = false">No</button>
</div>
</div>
<p class="inline" ng-show="selectedEvents.length"><span class="event__select-count">{{selectedEvents.length}}</span> Events are selected</p>
<p class="inline" ng-hide="selectedEvents.length"><span class="event__select-count">{{filteredLogs.length}}</span> Events are logged</p>
<!-- when logs are selected, this text changes to show how many logs are checked -->
<div class="event__actions">
- <button class="inline btn-delete" ng-class="{'disabled': (!selectedEvents.length && !all)}" ng-disabled="!selectedEvents.length && !all" ng-click="confirm= ! confirm">
- <img class="event__icon" src="../../assets/images/icon-trashcan-white.svg" alt="">Delete
+ <button class="btn btn-tertiary" ng-class="{'disabled': (!selectedEvents.length && !all)}" ng-disabled="!selectedEvents.length && !all" ng-click="confirm= ! confirm">
+ <icon file="icon-trashcan.svg"></icon>Delete
</button>
- <button class="inline btn-resolve" ng-class="{'disabled': ((selectedEvents|unResolvedCount) == 0)}" ng-click="resolve()" ng-disabled="(selectedEvents|unResolvedCount) == 0">
- <img class="event__icon" src="../../assets/images/icon-check-white.svg" alt="">Mark as resolved
+ <button class="btn btn-tertiary" ng-class="{'disabled': ((selectedEvents|unResolvedCount) == 0)}" ng-click="resolve()" ng-disabled="(selectedEvents|unResolvedCount) == 0">
+ <icon file="icon-check.svg"></icon>Mark as resolved
</button>
- <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export" ng-class="{'disabled': (!selectedEvents.length && !all)}" download="{{export_name}}">Export</a>
+ <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="btn btn-tertiary" ng-class="{'disabled': (!selectedEvents.length && !all)}" download="{{export_name}}"><icon file="icon-export.svg"></icon>Export</a>
</div>
</div>
</div>
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index 5a6f95a..90bdcc2 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -6,7 +6,7 @@
<section class="row column">
<div class="page-header">
<h2 class="inline">All sensors present in the system</h2>
- <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export float-right" download="{{export_name}}">Export</a>
+ <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="btn btn-tertiary float-right" download="{{export_name}}"><icon file="icon-export.svg"></icon>Export</a>
</div>
</section>
<section class="row column">
@@ -23,16 +23,16 @@
<div class="toggle-filter">
<p class="content-label">FILTER BY SEVERITY</p>
- <button class="inline first btn-primary" ng-click="toggleSeverityAll()"
+ <button class="btn" ng-click="toggleSeverityAll()"
ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
</button>
- <button class="inline " ng-click="toggleSeverity('critical')"
+ <button class="btn" ng-click="toggleSeverity('critical')"
ng-class="selectedSeverity.critical ? 'btn-primary' : 'btn-secondary'">Critical
</button>
- <button class="inline" ng-click="toggleSeverity('warning')"
+ <button class="btn" ng-click="toggleSeverity('warning')"
ng-class="selectedSeverity.warning ? 'btn-primary' : 'btn-secondary'">Warning
</button>
- <button class="inline" ng-click="toggleSeverity('normal')"
+ <button class="btn" ng-click="toggleSeverity('normal')"
ng-class="selectedSeverity.normal ? 'btn-primary' : 'btn-secondary'">Normal
</button>
</div>
diff --git a/app/server-health/directives/remote-logging-server-modal.html b/app/server-health/directives/remote-logging-server-modal.html
index eba57af..89f8c75 100644
--- a/app/server-health/directives/remote-logging-server-modal.html
+++ b/app/server-health/directives/remote-logging-server-modal.html
@@ -1,5 +1,7 @@
<div role="dialog" class="uib-modal__content remote-logging-server__modal">
- <button type="button" class="icon icon__close float-right" ng-click="$close()"></button>
+ <button type="button" class="btn btn--close float-right" ng-click="$close()">
+ <icon file="icon-close.svg"></icon>
+ </button>
<div class="modal-header">
<h2 class="modal-title" id="dialog_label">{{activeModalProps.title}}</h2>
</div>
@@ -29,10 +31,10 @@
{{remoteServer.hostname}}?</p>
</div>
<div class="modal-footer">
- <button class="button btn-secondary" ng-click="$close()" type="button">
+ <button class="btn btn-secondary" ng-click="$close()" type="button">
Cancel
</button>
- <button class="button btn-primary" type="submit"
+ <button class="btn btn-primary" type="submit"
ng-click="$close(activeModal)" ng-disabled="form.$invalid"
ng-class="{'disabled': form.$invalid}">
{{activeModalProps.actionLabel}}
diff --git a/app/server-health/directives/remote-logging-server.html b/app/server-health/directives/remote-logging-server.html
index 28fc313..c0edf5a 100644
--- a/app/server-health/directives/remote-logging-server.html
+++ b/app/server-health/directives/remote-logging-server.html
@@ -1,7 +1,7 @@
<p class="content-label">Remote Logging Server</p>
<div ng-if="!loadError && !remoteServer">
- <button ng-click="initModal(0)" class="modal__trigger">
- <span class="icon icon__plus"></span>
+ <button ng-click="initModal(0)" class="btn btn-tertiary modal__trigger">
+ <icon file="icon-plus.svg"></icon>
Add server
</button>
</div>
@@ -9,11 +9,11 @@
<p class="inline remote-logging-server__details">
{{remoteServer.hostname}}
</p>
- <button ng-click="initModal(1)" class="modal__trigger">
- <span class="icon icon__edit"></span>
+ <button ng-click="initModal(1)" class="btn btn-tertiary modal__trigger">
+ <icon file="icon-edit.svg"></icon>
</button>
- <button ng-click="initModal(2)" class="modal__trigger">
- <span class="icon icon__delete"></span>
+ <button ng-click="initModal(2)" class="btn btn-tertiary modal__trigger">
+ <icon file="icon-trashcan.svg"></icon>
</button>
</div>
<div class="text-right" ng-if="loadError">
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 675dc26..c02d1c4 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -36,24 +36,16 @@
margin-bottom: 3px;
}
.event__severity-filter {
- float:left;
margin-right: 2em;
margin-bottom: 1em;
- button {
- margin: 0px -3px;
- padding: .6em 2em;
- font-size: .9em;
- font-weight: 700;
- border-radius: 0;
- @media (min-width: 583px) {
- &.last {
- border-left: 0;
- }
+ font-size: 0.9em;
+ .btn {
+ width: 100px;
+ float: left;
+ &:not(:first-of-type) {
+ border-left-width: 1px;
}
}
- .btn-primary {
- border: 2px solid $primebtn__bg;
- }
}
.event__date-filter {
margin-right: 1.5em;
@@ -110,11 +102,6 @@
position: relative;
overflow: hidden;
.header__actions-bar {
- .btn-export,
- .btn-delete,
- .btn-resolve {
- color: $white;
- }
.event-log__col-check {
text-align: left;
max-width: 30px;
@@ -122,6 +109,12 @@
margin-left: -6px;
}
}
+ .btn:not([disabled]):not(.disabled) {
+ color: $white;
+ svg {
+ fill: $white;
+ }
+ }
}
.inline__confirm {
height: auto;
@@ -153,45 +146,6 @@
}
}
- //Export log
- .btn-export, .btn-meta-copy,
- .btn-delete,
- .btn-resolve {
- color: black;
- font-size: .9em;
- font-weight: 700;
- position: relative;
- padding: 0 0 1em 2em;
- &:hover {
- text-decoration: underline;
- }
- }
- .btn-resolve.disabled:hover,
- .btn-delete.disabled:hover{
- cursor: default;
- text-decoration: none;
- }
- .btn-export {
- margin-top: 7px;
- padding-bottom: 0;
- }
- .btn-export:before {
- content: '\21E5';
- position: absolute;
- font-size: 1.7em;
- vertical-align: middle;
- transform: rotate(90deg);
- display: inline-block;
- left: 2px;
- top: -5px;
- }
- .btn-meta-copy,
- .btn-delete,
- .btn-resolve {
- margin-left: 5px;
- padding: .5em .5em;
- }
-
// Single event log card
.event-log__single-event {
border: 1px solid $medgrey;
@@ -286,7 +240,6 @@
.event__metadata-row {
max-height: 0;
overflow: hidden;
- -webkit-transition: 0.5s linear max-height;
transition: 0.5s linear max-height;
&.active {
max-height: 1000px;
@@ -315,7 +268,6 @@
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
- -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
}
@@ -343,23 +295,13 @@
float: right;
margin-top: -5px;
}
- .disabled {
- opacity: 0.2;
- pointer-events: none;
- cursor: default;
- text-decoration: none;
- }
- .disabled:hover {
- text-decoration: none;
- }
}
- .event__icon {
- width: 20px;
- height: 20px;
- font-weight: normal;
- margin-right: .5em;
- margin-top: -3px;
- display: inline-block;
+
+ .btn:not([disabled]):not(.disabled) {
+ color: $black;
+ svg {
+ fill: $black;
+ }
}
}
@@ -374,12 +316,8 @@
float: right;
.modal__trigger {
padding: 0;
- color: $primebtn__bg;
.icon {
margin: 0;
- width: 20px;
- height: 20px;
- vertical-align: text-bottom;
}
}
}
@@ -397,8 +335,14 @@
margin-top: -30px;
}
}
+ .btn--close {
+ padding: 0;
+ svg {
+ height: 1.6em;
+ }
+ }
+ .modal-header {
+ display: block;
+ }
}
//end event-log__events
-
-
-
diff --git a/app/server-health/styles/sensors.scss b/app/server-health/styles/sensors.scss
index 041a1e5..6c81766 100644
--- a/app/server-health/styles/sensors.scss
+++ b/app/server-health/styles/sensors.scss
@@ -144,6 +144,7 @@
.toggle-filter {
margin-bottom: 20px;
+ font-size: 0.9em;
}
.column, .columns {
padding-left: 0px;
diff --git a/app/server-health/styles/syslog.scss b/app/server-health/styles/syslog.scss
index 1e517ea..788e775 100644
--- a/app/server-health/styles/syslog.scss
+++ b/app/server-health/styles/syslog.scss
@@ -40,24 +40,12 @@
float:left;
margin-right: 2em;
margin-bottom: 1em;
- button {
- padding: .6em 2em;
- margin: 0px -1px;
+ .btn {
+ width: 100px;
font-size: .9em;
- font-weight: 700;
- border-radius: 0;
- &.first,
- &.last {
- border-radius: 3px;
+ &:not(:first-of-type) {
+ border-left-width: 1px;
}
- @media (min-width: 583px) {
- &.last {
- border-left: 0;
- }
- }
- }
- .btn-primary {
- border: 2px solid $primebtn__bg;
}
}
.sys-log__date-filter {