ONOS-4359: continued work on theming UI
- changed spacing on table headers
- increased table header icon sizes a smidge
- modified 'play' glyph
- removed copyright from "partial" HTML snippets
- switched order of buttons on Intents View
Change-Id: I16967721ca0d22449f34b40ee2eb102d37ca12fd
(cherry picked from commit 772e688)
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 c1d0609..5933704 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyphData.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyphData.js
@@ -543,7 +543,7 @@
minus: "M2,4h6v2h-6z",
- play: "M2.5,2l5.5,3l-5.5,3z",
+ play: "M3,1.5l3.5,3.5l-3.5,3.5z",
stop: "M2.5,2.5h5v5h-5z",
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 3a85920..2386d8b 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css
@@ -83,19 +83,18 @@
display: inline-block;
float: right;
height: 44px;
- margin-right: 24px;
- margin-top: 7px;
+ margin-top: 24px;
+ margin-right: 20px;
}
div.ctrl-btns div {
display: inline-block;
- padding: 4px;
cursor: pointer;
}
div.ctrl-btns div.separator {
width: 0;
- height: 32px;
+ height: 40px;
padding: 0;
border-right: 1px solid #c7c7c0;
}
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index bc11801..ce5a388 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -44,7 +44,7 @@
#view h2 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
- margin-left: 16px;
+ margin: 32px 0 4px 16px;
padding: 0;
font-size: 21pt;
font-weight: lighter;
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 5d83914..bd2d0c8 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: 260px;
+ width: 250px;
}
#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 1a9be0b..cf32c91 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -4,7 +4,7 @@
<h2>Applications ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
@@ -16,21 +16,21 @@
file-model="appFile">
</form>
- <div icon icon-size="36" icon-id="plus"
+ <div icon icon-size="42" icon-id="plus"
class="active" trigger-form
tooltip tt-msg="uploadTip">
</div>
- <div icon icon-size="36" icon-id="play"
+ <div icon icon-size="42" icon-id="play"
ng-click="appAction('activate')"
tooltip tt-msg="activateTip"
ng-class="{active: ctrlBtnState.installed}">
</div>
- <div icon icon-size="36" icon-id="stop"
+ <div icon icon-size="42" icon-id="stop"
ng-click="appAction('deactivate')"
tooltip tt-msg="deactivateTip"
ng-class="{active: ctrlBtnState.active}">
</div>
- <div icon icon-size="36" icon-id="garbage"
+ <div icon icon-size="42" icon-id="garbage"
ng-click="appAction('uninstall')"
tooltip tt-msg="uninstallTip"
ng-class="{active: ctrlBtnState.selection}">
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.html b/web/gui/src/main/webapp/app/view/cluster/cluster.html
index 9b73a01..058975b 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.html
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.html
@@ -1,26 +1,12 @@
-<!--
- ~ Copyright 2015-present Open Networking Laboratory
- ~
- ~ Licensed under the Apache License, Version 2.0 (the "License");
- ~ you may not use this file except in compliance with the License.
- ~ You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- -->
-
<!-- Cluster partial HTML -->
<div id="ov-cluster">
<div class="tabular-header">
- <h2>Cluster Nodes ({{tableData.length}} total)</h2>
+ <h2>
+ Cluster Nodes ({{tableData.length}} total)
+ </h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 252ae6b..1449a04 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -4,31 +4,31 @@
<h2>Devices ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-id="refresh" icon-size="36"
+ icon icon-id="refresh" icon-size="42"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div ng-class="{'current-view': !!selId}"
- icon icon-id="deviceTable" icon-size="36"></div>
+ icon icon-id="deviceTable" icon-size="42"></div>
<div ng-class="{active: !!selId}"
- icon icon-id="flowTable" icon-size="36"
+ icon icon-id="flowTable" icon-size="42"
tooltip tt-msg="flowTip"
ng-click="nav('flow')"></div>
<div ng-class="{active: !!selId}"
- icon icon-id="portTable" icon-size="36"
+ icon icon-id="portTable" icon-size="42"
tooltip tt-msg="portTip"
ng-click="nav('port')"></div>
<div ng-class="{active: !!selId}"
- icon icon-id="groupTable" icon-size="36"
+ icon icon-id="groupTable" icon-size="42"
tooltip tt-msg="groupTip"
ng-click="nav('group')"></div>
<div ng-class="{active: !!selId}"
- icon icon-id="meterTable" icon-size="36"
+ icon icon-id="meterTable" icon-size="42"
tooltip tt-msg="meterTip"
ng-click="nav('meter')"></div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index 175daab..b296c60 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -7,32 +7,32 @@
</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div class="active"
- icon icon-id="deviceTable" icon-size="36"
+ icon icon-id="deviceTable" icon-size="42"
tooltip tt-msg="deviceTip"
ng-click="nav('device')"></div>
<div class="current-view"
- icon icon-id="flowTable" icon-size="36"></div>
+ icon icon-id="flowTable" icon-size="42"></div>
<div class="active"
- icon icon-id="portTable" icon-size="36"
+ icon icon-id="portTable" icon-size="42"
tooltip tt-msg="portTip"
ng-click="nav('port')"></div>
<div class="active"
- icon icon-id="groupTable" icon-size="36"
+ icon icon-id="groupTable" icon-size="42"
tooltip tt-msg="groupTip"
ng-click="nav('group')"></div>
<div class="active"
- icon icon-id="meterTable" icon-size="36"
+ icon icon-id="meterTable" icon-size="42"
tooltip tt-msg="meterTip"
ng-click="nav('meter')"></div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/group/group.html b/web/gui/src/main/webapp/app/view/group/group.html
index 8d2ab02..90af4ac 100644
--- a/web/gui/src/main/webapp/app/view/group/group.html
+++ b/web/gui/src/main/webapp/app/view/group/group.html
@@ -7,32 +7,32 @@
</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div class="active"
- icon icon-id="deviceTable" icon-size="36"
+ icon icon-id="deviceTable" icon-size="42"
tooltip tt-msg="deviceTip"
ng-click="nav('device')"></div>
<div class="active"
- icon icon-id="flowTable" icon-size="36"
+ icon icon-id="flowTable" icon-size="42"
tooltip tt-msg="flowTip"
ng-click="nav('flow')"></div>
<div class="active"
- icon icon-id="portTable" icon-size="36"
+ icon icon-id="portTable" icon-size="42"
tooltip tt-msg="portTip"
ng-click="nav('port')"></div>
<div class="current-view"
- icon icon-id="groupTable" icon-size="36"></div>
+ icon icon-id="groupTable" icon-size="42"></div>
<div class="active"
- icon icon-id="meterTable" icon-size="36"
+ icon icon-id="meterTable" icon-size="42"
tooltip tt-msg="meterTip"
ng-click="nav('meter')"></div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/host/host.html b/web/gui/src/main/webapp/app/view/host/host.html
index 6de96d5..654f263 100644
--- a/web/gui/src/main/webapp/app/view/host/host.html
+++ b/web/gui/src/main/webapp/app/view/host/host.html
@@ -4,7 +4,7 @@
<h2>Hosts ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.css b/web/gui/src/main/webapp/app/view/intent/intent.css
index 223168f..501e5b7 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.css
+++ b/web/gui/src/main/webapp/app/view/intent/intent.css
@@ -23,6 +23,7 @@
}
#ov-intent div.ctrl-btns {
+ width: 110px;
}
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.html b/web/gui/src/main/webapp/app/view/intent/intent.html
index 2610c35..85ccf04 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.html
+++ b/web/gui/src/main/webapp/app/view/intent/intent.html
@@ -3,15 +3,17 @@
<div class="tabular-header">
<h2>Intents ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
- <div ng-class="{active: !!selId}"
- icon icon-id="topo" icon-size="36"
- tooltip tt-msg="topoTip"
- ng-click="showIntent()"></div>
- <div class="separator"></div>
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
+
+ <div class="separator"></div>
+
+ <div ng-class="{active: !!selId}"
+ icon icon-id="topo" icon-size="42"
+ tooltip tt-msg="topoTip"
+ ng-click="showIntent()"></div>
</div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/link/link.html b/web/gui/src/main/webapp/app/view/link/link.html
index 03817b7..97b7972 100644
--- a/web/gui/src/main/webapp/app/view/link/link.html
+++ b/web/gui/src/main/webapp/app/view/link/link.html
@@ -1,26 +1,10 @@
-<!--
- ~ Copyright 2015-present Open Networking Laboratory
- ~
- ~ Licensed under the Apache License, Version 2.0 (the "License");
- ~ you may not use this file except in compliance with the License.
- ~ You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- -->
-
<!-- Link partial HTML -->
<div id="ov-link">
<div class="tabular-header">
<h2>Links ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/meter/meter.html b/web/gui/src/main/webapp/app/view/meter/meter.html
index a35cbbd..2dc4f04 100644
--- a/web/gui/src/main/webapp/app/view/meter/meter.html
+++ b/web/gui/src/main/webapp/app/view/meter/meter.html
@@ -7,34 +7,34 @@
</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div class="active"
- icon icon-id="deviceTable" icon-size="36"
+ icon icon-id="deviceTable" icon-size="42"
tooltip tt-msg="deviceTip"
ng-click="nav('device')"></div>
<div class="active"
- icon icon-id="flowTable" icon-size="36"
+ icon icon-id="flowTable" icon-size="42"
tooltip tt-msg="flowTip"
ng-click="nav('flow')"></div>
<div class="active"
- icon icon-id="portTable" icon-size="36"
+ icon icon-id="portTable" icon-size="42"
tooltip tt-msg="portTip"
ng-click="nav('port')"></div>
<div class="active"
- icon icon-id="groupTable" icon-size="36"
+ icon icon-id="groupTable" icon-size="42"
tooltip tt-msg="groupTip"
ng-click="nav('group')"></div>
<div class="current-view"
- icon icon-id="meterTable" icon-size="36"></div>
+ icon icon-id="meterTable" icon-size="42"></div>
</div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/port/port.html b/web/gui/src/main/webapp/app/view/port/port.html
index 952857e..c40e532 100644
--- a/web/gui/src/main/webapp/app/view/port/port.html
+++ b/web/gui/src/main/webapp/app/view/port/port.html
@@ -7,32 +7,32 @@
</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div class="active"
- icon icon-id="deviceTable" icon-size="36"
+ icon icon-id="deviceTable" icon-size="42"
tooltip tt-msg="deviceTip"
ng-click="nav('device')"></div>
<div class="active"
- icon icon-id="flowTable" icon-size="36"
+ icon icon-id="flowTable" icon-size="42"
tooltip tt-msg="flowTip"
ng-click="nav('flow')"></div>
<div class="current-view"
- icon icon-id="portTable" icon-size="36"></div>
+ icon icon-id="portTable" icon-size="42"></div>
<div class="active"
- icon icon-id="groupTable" icon-size="36"
+ icon icon-id="groupTable" icon-size="42"
tooltip tt-msg="groupTip"
ng-click="nav('group')"></div>
<div class="active"
- icon icon-id="meterTable" icon-size="36"
+ icon icon-id="meterTable" icon-size="42"
tooltip tt-msg="meterTip"
ng-click="nav('meter')"></div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/processor/processor.css b/web/gui/src/main/webapp/app/view/processor/processor.css
index 6be29f8..b05ea9e 100644
--- a/web/gui/src/main/webapp/app/view/processor/processor.css
+++ b/web/gui/src/main/webapp/app/view/processor/processor.css
@@ -23,7 +23,7 @@
}
#ov-processor div.ctrl-btns {
- width: 40px;
+ width: 45px;
}
#ov-processor td.priority {
diff --git a/web/gui/src/main/webapp/app/view/processor/processor.html b/web/gui/src/main/webapp/app/view/processor/processor.html
index b28f3e5..58e726a 100644
--- a/web/gui/src/main/webapp/app/view/processor/processor.html
+++ b/web/gui/src/main/webapp/app/view/processor/processor.html
@@ -6,20 +6,9 @@
</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
- <!--
- <div class="separator"></div>
-
- <div class="current-view"
- icon icon-id="processorTable" icon-size="36"></div>
-
- <div class="active"
- icon icon-id="requestTable" icon-size="36"git sta
- tooltip tt-msg="requestTip"
- ng-click="nav('request')"></div>
- -->
</div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.html b/web/gui/src/main/webapp/app/view/settings/settings.html
index ad83bca..fef2ffe 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.html
+++ b/web/gui/src/main/webapp/app/view/settings/settings.html
@@ -4,7 +4,7 @@
<h2>Component Settings ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
diff --git a/web/gui/src/main/webapp/app/view/tunnel/tunnel.html b/web/gui/src/main/webapp/app/view/tunnel/tunnel.html
index 102eebf..faaac08 100644
--- a/web/gui/src/main/webapp/app/view/tunnel/tunnel.html
+++ b/web/gui/src/main/webapp/app/view/tunnel/tunnel.html
@@ -1,26 +1,10 @@
-<!--
- ~ Copyright 2015-present Open Networking Laboratory
- ~
- ~ Licensed under the Apache License, Version 2.0 (the "License");
- ~ you may not use this file except in compliance with the License.
- ~ You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- -->
-
<!-- Tunnel partial HTML -->
<div id="ov-tunnel">
<div class="tabular-header">
<h2>Tunnels ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
- icon icon-size="36" icon-id="refresh"
+ icon icon-size="42" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
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 f76c25f..a808c3d 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
@@ -78,7 +78,7 @@
triangleDown: 'M9.5,4.2c0',
plus: 'M4,2h2v2h2v2',
minus: 'M2,4h6v2',
- play: 'M2.5,2l5.5,3',
+ play: 'M3,1.5l3.5,3.5',
stop: 'M2.5,2.5h5',
xClose: 'M8.6,6.8L6.8,8.6',