홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Brian O'Connor
5487ce70 1 parent a42c4dcc

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 772e6889)
Inline Side-by-side
Showing 20 changed files with 61 additions and 116 deletions
......@@ -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",
......
......@@ -83,19 +83,18 @@ div.ctrl-btns {
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;
}
......
......@@ -44,7 +44,7 @@ body {
#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;
......
......@@ -23,7 +23,7 @@
}
#ov-app div.ctrl-btns {
width: 260px;
width: 250px;
}
#ov-app form#inputFileForm,
......
......@@ -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}">
......
<!--
~ 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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -23,6 +23,7 @@
}
#ov-intent div.ctrl-btns {
width: 110px;
}
......
......@@ -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>
......
<!--
~ 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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -23,7 +23,7 @@
}
#ov-processor div.ctrl-btns {
width: 40px;
width: 45px;
}
#ov-processor td.priority {
......
......@@ -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>
......
......@@ -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>
......
<!--
~ 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>
......
......@@ -78,7 +78,7 @@ describe('factory: fw/svg/glyph.js', function() {
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',
......