Add icons for toolbar.

src/ui/Domo/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "babel-runtime": "^6.0.0",
     "fastclick": "^1.0.6",
+    "font-awesome": "^4.6.1",
     "vue": "^1.0.21",
     "vue-router": "^0.7.13",
     "vux": "0.0.116"

src/ui/Domo/src/App.vue

@@ -4,27 +4,27 @@
     </router-view>
     <tabbar>
       <tabbar-item is-link v-link="'/'">
-        <!--<img slot="icon" src="assets/plv/icon_nav_cell.png">-->
+        <i slot="icon" class="fa fa-home" aria-hidden="true"></i>
         <span slot="label">Home</span>
       </tabbar-item>
       <tabbar-item is-link v-link="'/lights'">
-        <!--<img slot="icon" src="assets/plv/icon_nav_button.png">-->
+        <i slot="icon" class="fa fa-lightbulb-o" aria-hidden="true"></i>
         <span slot="label">Lights</span>
       </tabbar-item>
       <tabbar-item is-link v-link="'/sprinklers'">
-        <!--<img slot="icon" src="assets/plv/icon_nav_article.png">-->
+        <img slot="icon" src="assets/sprinklers.svg">
-        <span slot="label">Shutters</span>
-      </tabbar-item>
-      <tabbar-item is-link v-link="'/shutters'">
-        <!--<img slot="icon" src="assets/plv/icon_nav_article.png">-->
         <span slot="label">Sprinklers</span>
       </tabbar-item>
+      <tabbar-item is-link v-link="'/shutters'">
+        <img slot="icon" src="assets/shutters.svg">
+        <span slot="label">Rolling shutter</span>
+      </tabbar-item>
       <tabbar-item is-link v-link="'/timers'">
-        <!--<img slot="icon" src="assets/plv/icon_nav_article.png">-->
+        <i slot="icon" class="fa fa-clock-o" color="black" aria-hidden="true"></i>
         <span slot="label">Timers</span>
       </tabbar-item>
       <tabbar-item is-link v-link="'/settings'">
-        <!--<img slot="icon" src="assets/plv/icon_nav_article.png">-->
+        <i slot="icon" class="fa fa-bars" aria-hidden="true"></i>
         <span slot="label">Settings</span>
       </tabbar-item>
     </tabbar>
@@ -46,10 +46,27 @@ export default {
 
 <style>
 @import '~vux/vux.css';
-
+@import '~font-awesome/css/font-awesome.css';
 body {
   font-family: Helvetica, sans-serif;
   background-color: #fbf9fe;
   padding-bottom:50px;
 }
+
+.fa-home {
+  color: black;
+}
+
+.fa-lightbulb-o {
+  color: black;
+}
+
+.fa-clock-o {
+  color: black;
+}
+
+.fa-bars {
+  color: black;
+}
+
 </style>

src/ui/Domo/src/assets/shutters.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="150.000000pt" height="161.000000pt" viewBox="0 0 150.000000 161.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,161.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M210 1592 c0 -6 746 -256 925 -309 73 -22 105 -61 105 -130 0 -99
+-73 -167 -152 -144 -96 29 -103 176 -10 212 26 10 69 -4 88 -29 40 -52 -13
+-141 -70 -119 -39 15 -36 87 4 87 23 0 27 -25 5 -34 -26 -9 -16 -27 13 -24 22
+2 28 9 30 34 7 70 -71 85 -102 19 -49 -102 89 -173 147 -76 9 16 17 49 17 74
+0 39 -5 49 -35 76 -60 52 -137 35 -175 -39 -35 -69 -23 -136 34 -189 19 -18
+41 -26 81 -29 54 -4 56 -4 99 39 84 85 84 217 -1 277 -16 10 -226 85 -468 166
+-319 106 -453 146 -488 146 -26 0 -47 -3 -47 -8z"/>
+<path d="M133 1568 c-13 -6 -23 -14 -23 -18 0 -4 199 -75 441 -159 420 -144
+443 -151 465 -136 28 18 30 30 8 39 -109 42 -836 286 -850 285 -10 0 -29 -5
+-41 -11z"/>
+<path d="M51 1504 c-12 -15 -21 -30 -21 -33 0 -7 910 -345 914 -339 19 32 33
+78 26 83 -15 9 -879 315 -889 315 -5 0 -19 -12 -30 -26z"/>
+<path d="M1013 1469 c-18 -5 -33 -14 -33 -18 0 -5 28 -19 63 -30 60 -20 66
+-21 102 -5 93 39 181 -10 212 -116 34 -118 15 -240 -52 -331 -30 -42 -39 -48
+-82 -52 -59 -7 -183 -40 -183 -49 0 -4 30 -22 67 -40 64 -31 73 -33 173 -32
+58 0 118 6 135 13 l30 13 -24 19 c-21 17 -23 23 -13 37 29 40 64 126 78 194
+32 150 -13 254 -146 340 -90 58 -236 83 -327 57z"/>
+<path d="M29 1393 c-8 -85 -59 -62 809 -372 l112 -40 0 59 0 59 -57 21 c-131
+49 -851 310 -856 310 -3 0 -6 -17 -8 -37z"/>
+<path d="M30 1221 c0 -38 4 -61 13 -64 6 -2 208 -80 447 -172 239 -92 441
+-170 448 -172 10 -4 12 11 10 67 l-3 73 -200 74 c-374 136 -700 253 -707 253
+-5 0 -8 -27 -8 -59z"/>
+<path d="M30 1072 l0 -61 455 -180 c250 -100 457 -181 460 -181 3 0 5 30 3 66
+l-3 67 -435 168 c-239 93 -445 172 -457 175 -22 6 -23 4 -23 -54z"/>
+<path d="M32 929 l3 -61 455 -188 455 -189 3 56 c2 31 -1 59 -5 64 -6 6 -769
+322 -891 370 -23 9 -23 8 -20 -52z"/>
+<path d="M29 836 c-2 -2 -2 -27 -1 -54 l4 -51 446 -191 c246 -106 453 -194
+460 -197 10 -4 12 9 10 58 l-3 64 -450 187 c-468 194 -459 191 -466 184z"/>
+<path d="M32 639 l3 -50 452 -200 c249 -109 455 -199 458 -199 3 0 5 26 3 57
+l-3 57 -454 193 c-250 106 -456 193 -458 193 -2 0 -3 -23 -1 -51z"/>
+<path d="M32 495 l3 -57 453 -209 c250 -115 456 -209 458 -209 2 0 4 31 4 68
+l0 68 -443 192 c-243 105 -450 194 -460 198 -16 6 -18 1 -15 -51z"/>
+</g>
+</svg>

src/ui/Domo/src/assets/sprinklers.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M301 1636 c-7 -8 -11 -27 -9 -43 2 -22 9 -29 31 -31 50 -6 75 38 41
+72 -19 20 -48 20 -63 2z"/>
+<path d="M916 1640 c-118 -21 -176 -78 -176 -172 l0 -48 80 0 81 0 -3 -77 c-3
+-77 -3 -78 -30 -81 l-28 -3 0 -380 0 -379 -35 0 -35 0 0 -105 0 -105 250 0
+250 0 0 105 0 105 -35 0 -35 0 0 380 0 380 -25 0 c-25 0 -25 1 -25 80 l0 80
+76 0 76 0 -4 65 c-5 78 -26 105 -105 135 -63 23 -203 34 -277 20z"/>
+<path d="M1676 1634 c-33 -32 -13 -74 36 -74 38 0 55 33 33 66 -18 28 -46 31
+-69 8z"/>
+<path d="M442 1538 c-15 -15 -15 -51 0 -66 28 -28 78 -7 78 33 0 27 -18 45
+-45 45 -12 0 -26 -5 -33 -12z"/>
+<path d="M1536 1534 c-23 -23 -20 -51 8 -69 34 -23 66 -5 66 35 0 44 -44 64
+-74 34z"/>
+<path d="M308 1459 c-22 -12 -24 -62 -3 -79 23 -19 64 -4 71 27 5 20 2 31 -16
+45 -25 21 -29 21 -52 7z"/>
+<path d="M570 1452 c-45 -36 -1 -99 50 -72 27 14 27 65 1 80 -25 13 -25 13
+-51 -8z"/>
+<path d="M1412 1438 c-7 -7 -12 -21 -12 -33 0 -12 5 -26 12 -33 7 -7 21 -12
+33 -12 12 0 26 5 33 12 7 7 12 21 12 33 0 12 -5 26 -12 33 -7 7 -21 12 -33 12
+-12 0 -26 -5 -33 -12z"/>
+<path d="M1670 1431 c-14 -27 -13 -37 6 -55 23 -23 51 -20 69 8 13 19 14 29 5
+45 -14 28 -65 29 -80 2z"/>
+<path d="M452 1354 c-49 -34 -6 -103 47 -74 28 14 25 57 -4 76 -18 12 -24 11
+-43 -2z"/>
+<path d="M688 1358 c-25 -21 -28 -45 -9 -69 24 -30 68 -20 77 18 5 20 2 31
+-16 45 -26 21 -31 22 -52 6z"/>
+<path d="M1541 1344 c-30 -21 -27 -61 5 -76 36 -17 59 0 59 42 0 40 -31 57
+-64 34z"/>
+<path d="M1288 1325 c-9 -21 -8 -28 7 -45 10 -11 26 -20 35 -20 9 0 25 9 35
+20 27 30 7 70 -35 70 -23 0 -33 -6 -42 -25z"/>
+<path d="M308 1259 c-28 -16 -23 -67 7 -81 21 -9 28 -8 45 7 25 23 26 47 2 68
+-21 19 -30 20 -54 6z"/>
+<path d="M565 1250 c-36 -40 7 -96 55 -70 27 14 27 65 1 80 -27 14 -35 13 -56
+-10z"/>
+<path d="M1412 1238 c-7 -7 -12 -21 -12 -33 0 -12 5 -26 12 -33 7 -7 21 -12
+33 -12 12 0 26 5 33 12 7 7 12 21 12 33 0 12 -5 26 -12 33 -7 7 -21 12 -33 12
+-12 0 -26 -5 -33 -12z"/>
+<path d="M1672 1238 c-27 -27 -1 -78 38 -78 29 0 54 43 40 69 -12 24 -58 29
+-78 9z"/>
+<path d="M442 1158 c-28 -28 -7 -78 33 -78 40 0 61 50 33 78 -7 7 -21 12 -33
+12 -12 0 -26 -5 -33 -12z"/>
+<path d="M1539 1151 c-29 -23 -20 -68 16 -77 34 -9 57 12 53 49 -4 39 -38 53
+-69 28z"/>
+<path d="M302 1058 c-30 -30 -3 -83 39 -76 32 5 45 31 31 62 -13 28 -49 35
+-70 14z"/>
+<path d="M1676 1054 c-30 -30 -10 -74 34 -74 40 0 58 32 35 66 -18 28 -46 31
+-69 8z"/>
+<path d="M1310 863 c25 -83 48 -256 56 -425 l7 -148 119 0 118 0 0 30 c0 88
+69 340 122 443 19 38 19 38 -1 28 -42 -23 -124 -129 -164 -213 -23 -48 -44
+-87 -47 -88 -3 0 -13 33 -22 73 -23 95 -75 198 -144 286 -30 39 -57 71 -59 71
+-1 0 5 -26 15 -57z"/>
+<path d="M514 773 c-52 -78 -101 -202 -115 -291 l-12 -74 -40 76 c-22 42 -57
+95 -78 119 l-38 42 25 -73 c14 -40 33 -120 42 -178 l16 -104 128 0 127 0 6 38
+c15 90 39 192 61 256 17 50 20 65 9 56 -25 -21 -84 -106 -116 -167 l-31 -58 6
+85 c2 47 16 139 31 204 14 65 24 121 21 123 -2 2 -21 -22 -42 -54z"/>
+<path d="M1831 563 c-50 -56 -124 -189 -137 -245 l-6 -28 69 0 70 0 6 83 c3
+45 17 118 31 162 14 43 24 81 22 83 -2 1 -27 -23 -55 -55z"/>
+<path d="M136 433 c13 -37 24 -85 24 -105 l0 -38 46 0 c42 0 45 1 39 23 -11
+37 -68 126 -101 158 l-31 30 23 -68z"/>
+<path d="M683 473 c-28 -31 -58 -86 -79 -145 l-13 -38 44 0 45 0 0 44 c0 24 9
+72 19 105 10 34 17 61 14 61 -2 0 -15 -12 -30 -27z"/>
+</g>
+</svg>