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/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 379aa3d..6bd2c79 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -2,20 +2,16 @@
<ul id="nav__top-level" ng-style="navStyle">
<li>
<a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M23.9 18.2l3.3 3.3 1.1-1.1-4.4-4.4-7.8 7.8-3.3-3.3-1.1 1.1 4.4 4.4 7.8-7.8z"/><path d="M5 8v24h30V8H5zm28 22H7V12h26v18z"/></svg>
- Server overview
- </span>
+ <icon class="nav-icon" file="icon-overview.svg"></icon>
+ Server overview
</a>
</li>
<li>
<button class="btn-health"
- ng-class="{opened: firstLevel == 'server-health'}"
- ng-click="change('server-health')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M32 12.9V16H8V8h19M8 16h24v8H8zM8 24h24v8H8zM19 12h8M11 12h2M19 20h8M11 20h2M19 28h8M11 28h2"/><path d="M36.4 4l1.1 1.1-5.1 5.1-2.9-2.8 1.2-1.2L32.4 8z"/></svg>
- Server health
- </span>
+ ng-class="{opened: firstLevel == 'server-health'}"
+ ng-click="change('server-health')">
+ <icon class="nav-icon" file="icon-health.svg"></icon>
+ Server health
</button>
<ul class="nav__second-level btn-health"
ng-style="navStyle"
@@ -40,10 +36,8 @@
</li>
<li>
<button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M8 12h24M8 20h24M8 28h24"/><path class="st1" d="M24 28h4M18 20h4M12 12h4"/></svg>
- Server control
- </span>
+ <icon class="nav-icon" file="icon-control.svg"></icon>
+ Server control
</button>
<ul class="nav__second-level btn-control"
ng-style="navStyle"
@@ -80,10 +74,8 @@
</li>
<li>
<button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M31.5 20c0-.6-.1-1.2-.2-1.8L35 15l-3.1-5.1-4.4 1.4c-1.1-.9-2.3-1.6-3.6-2.1L23 5h-6l-1 4.2c-1.3.5-2.5 1.2-3.6 2.1L8.1 9.9 5 15l3.7 3.2c-.1.6-.2 1.2-.2 1.8 0 .6.1 1.2.2 1.8L5 25l3.1 5.1 4.4-1.4c1.1.9 2.3 1.6 3.6 2.1l1 4.2h6l1-4.2c1.3-.5 2.5-1.2 3.6-2.1l4.4 1.4L35 25l-3.7-3.2c.1-.6.2-1.2.2-1.8zm.9 5.4L31 27.7l-2.9-.9-1.1-.4-.9.7c-.9.8-1.9 1.3-2.9 1.7l-1 .4-.2 1.1-.6 2.7h-2.8l-.6-2.7-.2-1.1-1-.4c-1.1-.4-2.1-1-2.9-1.7l-.9-.7-1.1.4-2.9.9-1.4-2.3 2.4-2.1.8-.7-.2-1.1c-.1-.5-.1-1-.1-1.5 0-.4 0-.9.1-1.5l.2-1.1-.8-.7-2.4-2.1L9 12.3l2.9.9 1.1.4.9-.7c.9-.8 1.9-1.3 2.9-1.7l1-.4.2-1.1.6-2.7h2.8l.6 2.7.2 1.1 1 .4c1.1.4 2.1 1 2.9 1.7l.9.7 1.1-.4 2.9-.9 1.4 2.3-2.4 2.1-.8.7.2 1.1c.1.6.1 1 .1 1.5s0 .9-.1 1.5l-.2 1.1.8.7 2.4 2.1z"/><path d="M20 15c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/></svg>
- Server configuration
- </span>
+ <icon class="nav-icon" file="icon-config.svg"></icon>
+ Server configuration
</button>
<ul class="nav__second-level btn-firmware"
ng-style="navStyle"
@@ -108,10 +100,8 @@
</li>
<li>
<button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="nav-icon"><path d="M16 21c5.523 0 10-4.477 10-10S21.523 1 16 1 6 5.477 6 11s4.477 10 10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm8 20H8a4 4 0 0 0-4 4v4h24v-4a4 4 0 0 0-4-4z"/></svg>
- Users
- </span>
+ <icon class="nav-icon" file="icon-user.svg"></icon>
+ Users
</button>
<ul class="nav__second-level btn-users"
ng-style="navStyle"