ONOS-4359: continued work on theming UI (app control buttons).
Change-Id: I87c510caee499a2ecaa51241785e300cb06c1f61
(cherry picked from commit a705605)
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.css b/web/gui/src/main/webapp/app/fw/mast/mast.css
index 57353b0..ef982bb 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.css
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.css
@@ -23,6 +23,10 @@
padding: 0;
}
+#mast a:hover {
+ text-decoration: none;
+}
+
html[data-platform='iPad'] #mast {
padding-top: 16px;
}
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.html b/web/gui/src/main/webapp/app/fw/mast/mast.html
index a453a50..ddcc048 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.html
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.html
@@ -6,7 +6,7 @@
<nav>
<div class="dropdown-parent">
- <a class="user-menu__name">{{user}} <i class="dropdown-icon"></i></a>
+ <a class="clickable user-menu__name">{{user}} <i class="dropdown-icon"></i></a>
<div class="dropdown">
<a href="rs/logout">logout</a>
diff --git a/web/gui/src/main/webapp/app/fw/svg/glyphData.js b/web/gui/src/main/webapp/app/fw/svg/glyphData.js
index 4166a09..999073a 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyphData.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyphData.js
@@ -256,25 +256,25 @@
'76.3z M31.1,85.1v-4.9l32.8-26.4c0.3,0.3,0.8,0.5,1.3,0.5h10.5l' +
'7.7,21.9h-3c-1,0-1.9,0.8-1.9,1.9v6.9H31.1z',
- refresh: 'M102.6,40.8L88.4,70.5L69.8,43.4L80,42.6c-0.7-2.3-1.7-' +
- '5.1-3.4-7.8C71.8,27,64,23.1,53.5,23.1c-19.5,0-24.8,11.2-24.8,' +
- '11.3l-10.1-4.3c0.3-0.7,7.9-18,35-18c24.8,0,35,17.3,37.7,29.6L' +
- '102.6,40.8z M81.5,74.5c-0.2,0.5-5.5,11.4-24.9,11.4c-10.5,0-18.3' +
- '-3.9-23.1-11.7c-1.7-2.8-2.8-5.6-3.4-7.8l10.2-0.8L21.7,38.5L7.5,' +
- '68.2l11.4-0.9c2.7,12.3,12.9,29.6,37.7,29.6c26.9,0,34.6-17.2,34.9' +
- '-18L81.5,74.5z',
+ refresh:
+ 'M99.7,53.8l-10,13.3L85,73.5,78,64,70.4,53.7h9' +
+ 'A28.5,28.5,0,1,0,68.3,77.6l10.6,6.9A40.7,40.7,0,1,1,91.6,53.8h8.2Z',
- garbage: 'M94.6,20.2c0,2.7-2.1,4.8-4.8,4.8H19.2c-2.7,0-4.8-2.1-' +
- '4.8-4.8s2.1-4.8,4.8-4.8h27.6c-0.8-0.7-1.4-1.7-1.4-2.9c0-2.1,1.7-' +
- '3.9,3.9-3.9h10.4c2.1,0,3.9,1.7,3.9,3.9c0,1.2-0.5,2.2-1.4,2.9h' +
- '27.6C92.5,15.4,94.6,17.6,94.6,20.2z M91,33.4v64.8c0,2-1.7,3.6-' +
- '3.8,3.6h-65c-2.1,0-3.8-1.6-3.8-3.6V33.4c0-2,1.7-3.6,3.8-3.6h65C' +
- '89.3,29.8,91,31.4,91,33.4z M31.5,37.7c0-2.1-1.2-3.8-2.7-3.8h-0.7' +
- 'c-1.5,0-2.7,1.7-2.7,3.8v55.9c0,2.1,1.2,3.8,2.7,3.8h0.7c1.5,0,2.7' +
- '-1.7,2.7-3.8V37.7z M58.5,37.7c0-2.1-1.8-3.8-4-3.8h-1c-2.2,0-4,' +
- '1.7-4,3.8v55.9c0,2.1,1.8,3.8,4,3.8h1c2.2,0,4-1.7,4-3.8V37.7z M' +
- '83.5,37.7c0-2.1-1.2-3.8-2.7-3.8h-0.7c-1.5,0-2.7,1.7-2.7,3.8v55.9' +
- 'c0,2.1,1.2,3.8,2.7,3.8h0.7c1.5,0,2.7-1.7,2.7-3.8V37.7z',
+ garbage: 'M55.1,31.1c9.4,0,18.7.1,28.1-.1,3.2-.1,4.2,1,3.7,4.1' +
+ 'q-4.1,28.6-8,57.3c-0.3,2.3-1.3,3.4-3.5,3.4h-41' +
+ 'c-2.2,0-2.9-1.2-3.2-3.2Q27,63.5,22.7,34.4c-0.4-2.8.6-3.4,3.1-3.4' +
+ 'H55.1Z' +
+ 'M44.3,81.9c0.4-1.1-2.5-27.4-3.8-40.5a3.2,3.2,0,0,0-3.7-3.2' +
+ 'c-2.5.1-2.5,1.9-2.4,3.7,0.5,4.9,1,9.8,1.5,14.7,0.8,8.1,1.6,16.2,' +
+ '2.4,24.2,0.2,2.2,1.1,4.1,3.6,3.4A3.6,3.6,0,0,0,44.3,81.9Z' +
+ 'm21.2,0a2.8,2.8,0,0,0,2.2,2.3' +
+ 'c2.3,0.8,3.7-.7,4-3.1,1.3-12.9,2.6-25.7,3.8-38.6,0.2-2,.3-4.1-2.6-4.4' +
+ 's-3.3,1.7-3.5,3.7C68.1,54.8,65.5,81.1,65.5,81.9Z' +
+ 'M57.9,61.3q0-9.8,0-19.6c0-2.2-.8-3.6-3.2-3.5s-2.6,1.7-2.6,3.6' +
+ 'q0,19.4,0,38.8c0,1.9,0,3.8,2.8,3.9s3-1.8,3-3.9Q57.9,70.9,57.9,61.3Z' +
+ 'M19,24.7c0.3-2,.5-5.7,1.5-8a5.1,5.1,0,0,1,3.6-2.3' +
+ 'c5.5-.5,17.3-0.8,17.3-0.8l4.3-3.3H62.9l5.6,3.5S84.5,14.6,87,15' +
+ 's2.5,0.7,3.2,1.9,0.9,7.4.9,7.4Z',
cog: "M100.2,46.4L87.1,44.8l-2.1-5L93.1,29a2.3,2.3,0,0,0-.2-3" +
"l-8.7-8.8a2.4,2.4,0,0,0-3.1-.2l-11,7.9L66,23.1,63.1,9.5" +
@@ -527,10 +527,7 @@
".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" +
"a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z",
- checkMark: "M2.6,4.5c0,0,0.7-0.4,1.2,0.3l1.0," +
- "1.8c0,0,2.7-5.4,2.8-5.7c0,0,0.5-0.9,1.4-0.1c0," +
- "0,0.5,0.5,0,1.3S6.8,7.3,5.6,9.2c0,0-0.4," +
- "0.5-1.2,0.1S2.2,5.4,2.2,5.4S2.2,4.7,2.6,4.5z",
+ checkMark: 'M8.6,3.4L4.4,7.7L1.4,4.7L2.5,3.6L4.4,5.5L7.5,2.3L8.6,3.4Z',
xMark: "M9.0,7.2C8.2,6.9,7.4,6.1,6.7,5.2c0.4-0.5," +
"0.7-0.8,0.8-1.0C7.8,3.5,9.4,1.6,8.1,1.1" +
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.css b/web/gui/src/main/webapp/app/fw/svg/icon.css
index bf9d28c..c665a1a 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -41,5 +41,5 @@
}
svg.embeddedIcon .icon.appInactive .glyph {
- fill: none;
+ fill: none !important;
}
diff --git a/web/gui/src/main/webapp/app/fw/widget/table-theme.css b/web/gui/src/main/webapp/app/fw/widget/table-theme.css
index d314c9e..bb758ed 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table-theme.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table-theme.css
@@ -16,6 +16,24 @@
/* ------ for summary-list tables (theme) ------ */
+.light div.summary-list .table-header td {
+ background-color: #e5e5e6;
+ color: #3c3a3a;
+}
+.dark div.summary-list .table-header td {
+ /* TODO: dark theme */
+ background-color: #e5e5e6;
+ color: #3c3a3a;
+}
+
+.light div.summary-list td {
+ color: #3c3a3a;
+}
+.dark div.summary-list td {
+ /* TODO: dark theme */
+ color: #3c3a3a;
+}
+
.light div.summary-list tr:nth-child(even) {
background-color: #f4f4f4;
}
@@ -40,86 +58,42 @@
background-color: #dbeffc;
}
-/* highlighting */
.light div.summary-list tr.data-change {
+ /* todo - theme color */
background-color: #FDFFDC;
}
.dark div.summary-list tr.data-change {
- background-color: #5A5600;
-}
-
-.light div.summary-list .table-header td {
- background-color: #e5e5e6;
- color: #3c3a3a;
-}
-.dark div.summary-list .table-header td {
/* TODO: dark theme */
- background-color: #e5e5e6;
- color: #3c3a3a;
+ background-color: #FDFFDC;
}
-.light div.summary-list td {
- color: #3c3a3a;
-}
-.dark div.summary-list td {
- /* TODO: dark theme */
- color: #3c3a3a;
-}
-/* Inactive */
-.light .ctrl-btns div g.icon rect,
-.light .ctrl-btns div:hover g.icon rect {
- fill: #eee;
-}
-.dark .ctrl-btns div g.icon rect,
-.dark .ctrl-btns div:hover g.icon rect {
- fill: #222;
-}
+/* --- Control Buttons --- */
-.light .ctrl-btns div g.icon use {
- fill: #ddd;
-}
-.dark .ctrl-btns div g.icon use {
- fill: #333;
-}
+/* TODO: dark theme */
-/* Active hover */
-.light .ctrl-btns div.active:hover g.icon rect {
- fill: #800;
+.light .ctrl-btns div svg.embeddedIcon g.icon use {
+ fill: #e4eef2;
}
+/* note: no change for inactive buttons when hovered */
-.dark .ctrl-btns div.active:hover g.icon rect {
- fill: #CE5650;
+.light .ctrl-btns div.active svg.embeddedIcon g.icon use {
+ fill: #939598;
}
-
-/* Active */
-.light .ctrl-btns div.active g.icon use {
- fill: #fff;
-}
-.dark .ctrl-btns div.active g.icon use {
- fill: #eee;
-}
-
-.light .ctrl-btns div.active g.icon rect {
- fill: #bbb;
-}
-.dark .ctrl-btns div.active g.icon rect {
- fill: #444;
+.light .ctrl-btns div.active:hover svg.embeddedIcon g.icon use {
+ fill: #ce5b58;
}
/* Refresh button specific */
-.light .ctrl-btns div.refresh.active g.icon rect {
- fill: #964949;
+.light .ctrl-btns div.refresh svg.embeddedIcon g.icon use {
+ fill: #cdeff2;
}
-
-.dark .ctrl-btns div.refresh.active g.icon rect {
- fill: #9B4641;
+.light .ctrl-btns div.refresh:hover svg.embeddedIcon g.icon use {
+ fill: #ce5b58;
}
-.light .ctrl-btns div.refresh:hover g.icon rect {
- fill: #964949;
+.light .ctrl-btns div.refresh.active svg.embeddedIcon g.icon use {
+ fill: #009fdb;
}
-
-.dark .ctrl-btns div.refresh:hover g.icon rect {
- fill: #9B4641;
+.light .ctrl-btns div.refresh.active:hover svg.embeddedIcon g.icon use {
+ fill: #ce5b58;
}
-
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.css b/web/gui/src/main/webapp/app/fw/widget/table.css
index 03d9e88..3a85920 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css
@@ -57,6 +57,7 @@
div.summary-list td.table-icon {
padding-left: 4px;
+ text-align: center;
}
div.summary-list .table-header td {
@@ -93,7 +94,8 @@
}
div.ctrl-btns div.separator {
- cursor: auto;
- width: 24px;
- border: none;
+ width: 0;
+ height: 32px;
+ padding: 0;
+ border-right: 1px solid #c7c7c0;
}
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index 5d53794..5d83914 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -23,7 +23,7 @@
}
#ov-app div.ctrl-btns {
- width: 290px;
+ width: 260px;
}
#ov-app form#inputFileForm,
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index 9d50999..1a9be0b 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -7,6 +7,7 @@
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
+
<div class="separator"></div>
<form id="inputFileForm">
diff --git a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
index 3d53a22..280f414 100644
--- a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
@@ -72,7 +72,7 @@
// badges
uiAttached: 'M2,2.5a.5,.5',
- checkMark: 'M2.6,4.5c0',
+ checkMark: 'M8.6,3.4L4',
xMark: 'M9.0,7.2C8.2',
triangleUp: 'M0.5,6.2c0',
triangleDown: 'M9.5,4.2c0',