홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
a705605f 1 parent 8b851646

ONOS-4359: continued work on theming UI (app control buttons). 

Change-Id: I87c510caee499a2ecaa51241785e300cb06c1f61
Inline Side-by-side
Showing 9 changed files with 71 additions and 93 deletions
......@@ -23,6 +23,10 @@
padding: 0;
}
#mast a:hover {
text-decoration: none;
}
html[data-platform='iPad'] #mast {
padding-top: 16px;
}
......
......@@ -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>
......
......@@ -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',
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',
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: '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" +
......
......@@ -41,5 +41,5 @@ svg.embeddedIcon g.icon .glyph {
}
svg.embeddedIcon .icon.appInactive .glyph {
fill: none;
fill: none !important;
}
......
......@@ -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;
}
.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;
background-color: #FDFFDC;
}
.light .ctrl-btns div g.icon use {
fill: #ddd;
}
.dark .ctrl-btns div g.icon use {
fill: #333;
}
/* Active hover */
.light .ctrl-btns div.active:hover g.icon rect {
fill: #800;
}
/* --- Control Buttons --- */
.dark .ctrl-btns div.active:hover g.icon rect {
fill: #CE5650;
}
/* TODO: dark theme */
/* 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 svg.embeddedIcon g.icon use {
fill: #e4eef2;
}
/* note: no change for inactive buttons when hovered */
.light .ctrl-btns div.active g.icon rect {
fill: #bbb;
.light .ctrl-btns div.active svg.embeddedIcon g.icon use {
fill: #939598;
}
.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;
}
......
......@@ -57,6 +57,7 @@ div.summary-list td {
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 {
}
div.ctrl-btns div.separator {
cursor: auto;
width: 24px;
border: none;
width: 0;
height: 32px;
padding: 0;
border-right: 1px solid #c7c7c0;
}
......
......@@ -23,7 +23,7 @@
}
#ov-app div.ctrl-btns {
width: 290px;
width: 260px;
}
#ov-app form#inputFileForm,
......
......@@ -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">
......
......@@ -72,7 +72,7 @@ describe('factory: fw/svg/glyph.js', function() {
// 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',
......