uiref -- added custom glyph (smiley UI) and used it in nav-items, topo overlay, and custom view.
Change-Id: I98a1b4349472e7789fa71fb25b9dcc0b87c38f2b
diff --git a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css
index e9f99b3..30591f2 100644
--- a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css
+++ b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css
@@ -37,6 +37,25 @@
background-color: #aaa;
}
+#ov-ui-ref-custom .data-panel {
+ display: inline-block;
+ background-color: #eee;
+ padding: 12px;
+ margin: 4px;
+ vertical-align: top;
+}
+
+#ov-ui-ref-custom .data-panel svg g.icon {
+ cursor: pointer;
+}
+
+#ov-ui-ref-custom .data-panel svg g.icon rect {
+ fill: lightsteelblue;
+}
+#ov-ui-ref-custom .data-panel svg g.icon use {
+ fill: darkslateblue;
+}
+
#ov-ui-ref-custom .number {
font-size: 140%;
text-align: right;
diff --git a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html
index 30b32ff..d51398d 100644
--- a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html
+++ b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html
@@ -6,27 +6,34 @@
</div>
</div>
- <div class="data-panel">
- <table>
- <tr>
- <td> Number </td>
- <td class="number"> {{data.number}} </td>
- </tr>
- <tr>
- <td> Square </td>
- <td class="number"> {{data.square}} </td>
- </tr>
- <tr>
- <td> Cube </td>
- <td class="number"> {{data.cube}} </td>
- </tr>
- </table>
+ <div id="ov-ui-ref-wrapper">
+ <div class="data-panel">
+ <table>
+ <tr>
+ <td> Number </td>
+ <td class="number"> {{data.number}} </td>
+ </tr>
+ <tr>
+ <td> Square </td>
+ <td class="number"> {{data.square}} </td>
+ </tr>
+ <tr>
+ <td> Cube </td>
+ <td class="number"> {{data.cube}} </td>
+ </tr>
+ </table>
- <p>
- A message from our sponsors:
- </p>
- <p>
- <span class="quote"> {{data.message}} </span>
- </p>
+ <p>
+ A message from our sponsors:
+ </p>
+ <p>
+ <span class="quote"> {{data.message}} </span>
+ </p>
+ </div>
+ <div class="data-panel">
+ <div icon icon-id="nav_uiref" icon-size="180"
+ tooltip tt-msg="Don't Worry... Be Happy!"
+ ng-click="nav('topo')"></div>
+ </div>
</div>
</div>
diff --git a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js
index 025efc3..a4d03c2 100644
--- a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js
+++ b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js
@@ -33,9 +33,9 @@
angular.module('ovUiRefCustom', [])
.controller('OvUiRefCustomCtrl',
- ['$log', '$scope', 'WebSocketService', 'KeyService',
+ ['$log', '$scope', 'WebSocketService', 'KeyService', 'NavService',
- function (_$log_, _$scope_, _wss_, _ks_) {
+ function (_$log_, _$scope_, _wss_, _ks_, ns) {
$log = _$log_;
$scope = _$scope_;
wss = _wss_;
@@ -50,9 +50,13 @@
addKeyBindings();
- // custom click handler
+ // custom click handler for button
$scope.getData = getData;
+ // custom click handler for icon
+ // pass straight through to nav service navTo()
+ $scope.nav = ns.navTo;
+
// get data the first time...
getData();
diff --git a/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.js b/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.js
index 70a082e..03da382 100644
--- a/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.js
+++ b/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.js
@@ -45,6 +45,12 @@
}
angular.module('ovUiRefTable', [])
+ .run(['IconService', function (is) {
+ // we want to be able to re-use our custom glyph (defined in
+ // uiRefTopovOverlay.js) as our nav icon. So create an
+ // icon-to-glyph binding here:
+ is.registerIconMapping('nav_uiref', 'ui-ref-overlay-smiley');
+ }])
.controller('OvUiRefTableCtrl',
['$log', '$scope', 'TableBuilderService',
'FnService', 'WebSocketService',
diff --git a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js
index 2295fa1..bf9e484 100644
--- a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js
+++ b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js
@@ -11,11 +11,25 @@
// internal state should be kept in the service module (not here)
+ var smiley = "M97,20.3A9.3,9.3,0,0,0,87.7,11H24.3A9.3,9.3,0,0,0,15,20.3" +
+ "V64.7A9.3,9.3,0,0,0,24.3,74H87.7A9.3,9.3,0,0,0,97,64.7V20.3Z" +
+ "M54.5,19.1A24.3,24.3,0,1,1,30.2,43.3,24.3,24.3,0,0,1,54.5,19.1Z" +
+ "M104.7,94.9L97.6,82.8c-0.9-1.6-3.7-2.8-6.1-2.8H18.9" +
+ "c-2.5,0-5.2,1.3-6.1,2.8L5.6,94.9C4.3,97.1,5.7,99,8.9,99h92.6" +
+ "C104.6,99,106.1,97.1,104.7,94.9ZM54.5,56.5" +
+ "c-7.3,0-17.2-8.6-13.3-7.4,13,3.9,13.7,3.9,26.5,0" +
+ "C71.7,48,61.9,56.6,54.5,56.6Z" +
+ "M38,33.9C38,32,40.2,31,42.1,31h7.3" +
+ "a3.2,3.2,0,0,1,3.1,1.7,13.1,13.1,0,0,1,2.1-.3,12.9,12.9,0,0,1,2.1.4" +
+ "A3.3,3.3,0,0,1,59.7,31H67c1.9,0,4,1,4,2.9v3.2A4.4,4.4,0,0,1,67,41" +
+ "H59.7A4,4,0,0,1,56,37.1V33.9h0a4.4,4.4,0,0,0-1.6-.2l-1.5.2H53v3.2" +
+ "A4,4,0,0,1,49.4,41H42.1A4.4,4.4,0,0,1,38,37.1V33.9Z";
+
// our overlay definition
var overlay = {
// NOTE: this must match the ID defined in UiRefTopoOverlay
overlayId: 'ui-ref-overlay',
- glyphId: '*star4',
+ glyphId: '*smiley',
tooltip: 'UI Reference Overlay',
// These glyphs get installed using the overlayId as a prefix.
@@ -23,6 +37,10 @@
// They can be referenced (from this overlay) as '*star4'
// That is, the '*' prefix stands in for 'ui-ref-overlay-'
glyphs: {
+ smiley: {
+ vb: '0 0 110 110',
+ d: smiley
+ },
star4: {
vb: '0 0 8 8',
d: 'M1,4l2,-1l1,-2l1,2l2,1l-2,1l-1,2l-1,-2z'