Improve mobile layout. Improve route map widget. Add route map widget based on OpenStreetMap

ui/src/app/components/dashboard.scss

@@ -20,6 +20,7 @@ div.tb-widget {
   height: 100%;
   margin: 0;
   overflow: hidden;
+  outline: none;
   @include transition(all .2s ease-in-out);
 
   .tb-widget-title {
@@ -91,6 +92,7 @@ md-content.tb-dashboard-content {
   left: 0;
   right: 0;
   bottom: 0;
+  outline: none;
 }
 
 .tb-widget-error-container {

ui/src/app/components/datasource-device.scss

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import '../../scss/constants';
+
 .tb-device-alias-autocomplete, .tb-timeseries-datakey-autocomplete, .tb-attribute-datakey-autocomplete {
   .tb-not-found {
     display: block;
@@ -27,3 +30,16 @@
     white-space: normal !important;
   }
 }
+
+tb-datasource-device {
+  @media (min-width: $layout-breakpoint-gt-sm) {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+  tb-device-alias-select {
+    @media (min-width: $layout-breakpoint-gt-sm) {
+      width: 200px;
+      max-width: 200px;
+    }
+  }
+}

ui/src/app/components/datasource-device.tpl.html

@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<section flex layout='row' layout-align="start center">
-	   <tb-device-alias-select flex="40"
+<section flex layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
+	   <tb-device-alias-select
 							  tb-required="true"
 							  device-aliases="deviceAliases"
 							  ng-model="deviceAlias"
 							  on-create-device-alias="onCreateDeviceAlias({event: event, alias: alias})">
 	   </tb-device-alias-select>
-	   <section flex="120" layout='column'>
-		   <section flex layout='row' layout-align="start center">
-			   <md-chips flex style="padding-left: 4px;"
+	   <section flex layout='column'>
+		   <section flex layout='column' layout-align="center" style="padding-left: 4px;">
+			   <md-chips flex
 						 id="timeseries_datakey_chips"
 						 ng-required="true"
 						 ng-model="timeseriesDataKeys" md-autocomplete-snap
@@ -56,14 +56,19 @@
 							</md-not-found>
 					  </md-autocomplete>
 					  <md-chip-template>
-						<div layout="row" layout-align="start center">
+						<div layout="row" layout-align="start center" class="tb-attribute-chip">
 							<div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
 								<div class="tb-color-result" ng-style="{background: $chip.color}"></div>
 							</div>
-							<div>
-							  {{$chip.label}}:
-							  <strong ng-if="!$chip.postFuncBody">{{$chip.name}}</strong>
-							  <strong ng-if="$chip.postFuncBody">f({{$chip.name}})</strong>
+							<div layout="row" flex>
+							  <div class="tb-chip-label">
+							  	{{$chip.label}}
+							  </div>
+							  <div class="tb-chip-separator">: </div>
+							  <div class="tb-chip-label">
+								  <strong ng-if="!$chip.postFuncBody">{{$chip.name}}</strong>
+								  <strong ng-if="$chip.postFuncBody">f({{$chip.name}})</strong>
+							  </div>
 							</div>
 							<md-button ng-click="editDataKey($event, $chip, $index)" class="md-icon-button tb-md-32">
 								<md-icon aria-label="edit" class="material-icons tb-md-20">edit</md-icon>
@@ -71,7 +76,7 @@
 						</div>
 					  </md-chip-template>
 			   </md-chips>
-			   <md-chips flex ng-if="widgetType === types.widgetType.latest.value" style="padding-left: 4px;"
+			   <md-chips flex ng-if="widgetType === types.widgetType.latest.value"
                          id="attribute_datakey_chips"
                          ng-required="true"
                          ng-model="attributeDataKeys" md-autocomplete-snap
@@ -103,19 +108,24 @@
 						    </md-not-found>
 					  </md-autocomplete>
 					  <md-chip-template>
-						<div layout="row" layout-align="start center">
-							<div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
-								<div class="tb-color-result" ng-style="{background: $chip.color}"></div>
-							</div>
-							<div>
-							  {{$chip.label}}:
-							  <strong ng-if="!$chip.postFuncBody">{{$chip.name}}</strong>
-							  <strong ng-if="$chip.postFuncBody">f({{$chip.name}})</strong>
-							</div>
-							<md-button ng-click="editDataKey($event, $chip, $index)" class="md-icon-button tb-md-32">
-								<md-icon aria-label="edit" class="material-icons tb-md-20">edit</md-icon>
-							</md-button>
-						</div>
+						  <div layout="row" layout-align="start center" class="tb-attribute-chip">
+							  <div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
+								  <div class="tb-color-result" ng-style="{background: $chip.color}"></div>
+							  </div>
+							  <div layout="row" flex>
+								  <div class="tb-chip-label">
+									  {{$chip.label}}
+								  </div>
+								  <div class="tb-chip-separator">: </div>
+								  <div class="tb-chip-label">
+									  <strong ng-if="!$chip.postFuncBody">{{$chip.name}}</strong>
+									  <strong ng-if="$chip.postFuncBody">f({{$chip.name}})</strong>
+								  </div>
+							  </div>
+							  <md-button ng-click="editDataKey($event, $chip, $index)" class="md-icon-button tb-md-32">
+								  <md-icon aria-label="edit" class="material-icons tb-md-20">edit</md-icon>
+							  </md-button>
+						  </div>
 					  </md-chip-template>
 			   </md-chips>
 		   </section>

ui/src/app/components/datasource-func.scss

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import '../../scss/constants';
+
 .tb-func-datakey-autocomplete {
   .tb-not-found {
     display: block;
@@ -27,3 +30,9 @@
     white-space: normal !important;
   }
 }
+
+tb-datasource-func {
+  @media (min-width: $layout-breakpoint-gt-sm) {
+    padding-left: 8px;
+  }
+}

ui/src/app/components/datasource-func.tpl.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section flex layout='column'>
-   <md-chips flex style="padding-left: 4px;"
+<section flex layout='column' style="padding-left: 4px;">
+   <md-chips flex
 			     id="function_datakey_chips"
 	   			 ng-required="true"
 	             ng-model="funcDataKeys" md-autocomplete-snap
@@ -48,18 +48,23 @@
 				    </md-not-found>
 			  </md-autocomplete>
 		      <md-chip-template>
-		      	<div layout="row" layout-align="start center">
-					<div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
-						<div class="tb-color-result" ng-style="{background: $chip.color}"></div>
-					</div>
-			        <div>
-			          {{$chip.label}}: 
-			          <strong>{{$chip.name}}</strong>
-			        </div>
-				    <md-button ng-click="editDataKey($event, $chip, $index)" class="md-icon-button tb-md-32">
-		        		<md-icon aria-label="edit" class="material-icons tb-md-20">edit</md-icon>
-		      		</md-button>
-		      	</div>
+				  <div layout="row" layout-align="start center" class="tb-attribute-chip">
+					  <div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
+						  <div class="tb-color-result" ng-style="{background: $chip.color}"></div>
+					  </div>
+					  <div layout="row" flex>
+						  <div class="tb-chip-label">
+							  {{$chip.label}}
+						  </div>
+						  <div class="tb-chip-separator">: </div>
+						  <div class="tb-chip-label">
+							  <strong>{{$chip.name}}</strong>
+						  </div>
+					  </div>
+					  <md-button ng-click="editDataKey($event, $chip, $index)" class="md-icon-button tb-md-32">
+						  <md-icon aria-label="edit" class="material-icons tb-md-20">edit</md-icon>
+					  </md-button>
+				  </div>
 		      </md-chip-template>
 	</md-chips>
 	<div class="tb-error-messages" ng-messages="ngModelCtrl.$error" role="alert">

ui/src/app/components/datasource.scss

@@ -38,6 +38,7 @@
 
 .tb-color-preview {
   content: '';
+  min-width: 24px;
   width: 24px;
   height: 24px;
   border: 2px solid #fff;
@@ -52,3 +53,14 @@
     height: 100%;
   }
 }
+
+.tb-attribute-chip {
+  .tb-chip-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .tb-chip-separator {
+    white-space: pre;
+  }
+}

ui/src/app/components/datasource.tpl.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section flex layout='row' layout-align="start center" class="tb-datasource">
+<section flex layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center" class="tb-datasource">
     <md-input-container style="min-width: 110px;">
         <md-select placeholder="{{ 'datasource.type' | translate }}" required id="datasourceType" ng-model="model.type">
             <md-option ng-repeat="datasourceType in datasourceTypes" value="{{datasourceType}}">
@@ -23,15 +23,15 @@
             </md-option>
         </md-select>
     </md-input-container>
-    <section flex layout='row' layout-align="start center" class="datasource" ng-switch on="model.type">
-        <tb-datasource-func flex style="padding-left: 8px;"
+    <section flex class="datasource" ng-switch on="model.type">
+        <tb-datasource-func flex
                             ng-switch-default
                             ng-model="model"
                             datakey-settings-schema="datakeySettingsSchema"
                             ng-required="model.type === types.datasourceType.function"
                             generate-data-key="generateDataKey({chip: chip, type: type})">
         </tb-datasource-func>
-        <tb-datasource-device flex style="padding-left: 4px; padding-right: 4px;"
+        <tb-datasource-device flex
                               ng-model="model"
                               datakey-settings-schema="datakeySettingsSchema"
                               ng-switch-when="device"

ui/src/app/components/details-sidenav.scss

@@ -20,15 +20,28 @@
   font-weight: 400;
   text-transform: uppercase;
   margin: 20px 8px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: inherit;
 }
 
 .tb-details-subtitle {
   font-size: 1.000rem;
   margin: 10px 0;
   opacity: 0.8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: inherit;
 }
 
 md-sidenav.tb-sidenav-details {
+  .md-toolbar-tools {
+      min-height: 100px;
+      max-height: 120px;
+      height: 100%;
+  }
   width: 100% !important;
   max-width: 100% !important;
   z-index: 59 !important;

ui/src/app/components/details-sidenav.tpl.html

@@ -22,13 +22,12 @@
       layout="column">
       <header>
 	      <md-toolbar class="md-theme-light" ng-style="{'height':headerHeightPx+'px'}">
-	      	<div class="md-toolbar-tools">
-	      		<div class="md-toolbar-tools" layout="column" layout-align="start start">
+	      	<div class="md-toolbar-tools" layout="row">
+	      		<div flex class="md-toolbar-tools" layout="column" layout-align="start start">
 		        	<span class="tb-details-title">{{headerTitle}}</span>
 		        	<span class="tb-details-subtitle">{{headerSubtitle}}</span>
 					<span style="width: 100%;" ng-transclude="headerPane"></span>
 	        	</div>
-	        	<span flex></span>
 				<div ng-transclude="detailsButtons"></div>
 	        	<md-button class="md-icon-button" ng-click="closeDetails()">
 	        		<md-icon aria-label="close" class="material-icons">close</md-icon>

ui/src/app/components/widget-config.tpl.html

@@ -25,7 +25,7 @@
                     <input name="title" ng-model="title">
                 </md-input-container>
                 <span translate>widget-config.general-settings</span>
-                <div layout="row" layout-align="start center">
+                <div layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
                     <div layout="row" layout-padding>
                         <md-checkbox flex aria-label="{{ 'widget-config.display-title' | translate }}"
                                      ng-model="showTitle">{{ 'widget-config.display-title' | translate }}
@@ -80,7 +80,7 @@
                                     <div flex layout="row" layout-align="start center"
                                          style="padding: 0 0 0 10px; margin: 5px;">
                                         <span translate style="min-width: 110px;">widget-config.datasource-type</span>
-                                        <span translate flex
+                                        <span hide show-gt-sm translate flex
                                               style="padding-left: 10px;">widget-config.datasource-parameters</span>
                                         <span style="min-width: 40px;"></span>
                                     </div>

ui/src/app/components/widgets-bundle-select.scss

@@ -35,10 +35,12 @@ tb-widgets-bundle-select {
 
 tb-widgets-bundle-select, .tb-widgets-bundle-select {
   .md-text {
+    display: block;
     width: 100%;
   }
   .tb-bundle-item {
-    display: block;
+    display: inline-block;
+    width: 100%;
     span {
       display: inline-block;
       vertical-align: middle;

ui/src/app/dashboard/dashboard.controller.js

@@ -312,15 +312,21 @@ export default function DashboardController(types, widgetService, userService,
         }
     }
 
+    function isHotKeyAllowed(event) {
+        var target = event.target || event.srcElement;
+        var scope = angular.element(target).scope();
+        return scope && scope.$parent !== $rootScope;
+    }
+
     function initHotKeys() {
         $translate(['action.copy', 'action.paste', 'action.delete']).then(function (translations) {
             hotkeys.bindTo($scope)
                 .add({
                     combo: 'ctrl+c',
                     description: translations['action.copy'],
-                    allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
                     callback: function (event) {
-                        if (vm.isEdit && !vm.isEditingWidget && !vm.widgetEditMode) {
+                        if (isHotKeyAllowed(event) &&
+                            vm.isEdit && !vm.isEditingWidget && !vm.widgetEditMode) {
                             var widget = vm.dashboardContainer.getSelectedWidget();
                             if (widget) {
                                 event.preventDefault();
@@ -332,9 +338,9 @@ export default function DashboardController(types, widgetService, userService,
                 .add({
                     combo: 'ctrl+v',
                     description: translations['action.paste'],
-                    allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
                     callback: function (event) {
-                        if (vm.isEdit && !vm.isEditingWidget && !vm.widgetEditMode) {
+                        if (isHotKeyAllowed(event) &&
+                            vm.isEdit && !vm.isEditingWidget && !vm.widgetEditMode) {
                             if (itembuffer.hasWidget()) {
                                 event.preventDefault();
                                 pasteWidget(event);
@@ -345,9 +351,9 @@ export default function DashboardController(types, widgetService, userService,
                 .add({
                     combo: 'ctrl+x',
                     description: translations['action.delete'],
-                    allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
                     callback: function (event) {
-                        if (vm.isEdit && !vm.isEditingWidget && !vm.widgetEditMode) {
+                        if (isHotKeyAllowed(event) &&
+                            vm.isEdit && !vm.isEditingWidget && !vm.widgetEditMode) {
                             var widget = vm.dashboardContainer.getSelectedWidget();
                             if (widget) {
                                 event.preventDefault();

ui/src/app/dashboard/dashboard.tpl.html

@@ -16,7 +16,7 @@
 
 -->
 <md-content flex tb-expand-fullscreen="vm.widgetEditMode" hide-expand-button="vm.widgetEditMode">
-    <section ng-show="!vm.isAddingWidget && !loading && !vm.widgetEditMode" layout="row" layout-wrap
+    <!--section ng-show="!vm.isAddingWidget && !loading && !vm.widgetEditMode" layout="row" layout-wrap
              class="tb-header-buttons tb-top-header-buttons md-fab" ng-style="{'right': '50px'}">
         <md-button ng-if="vm.isTenantAdmin()" ng-show="vm.isEdit" ng-disabled="loading"
                    class="tb-btn-header md-accent md-hue-2 md-fab md-fab-bottom-right"
@@ -37,7 +37,7 @@
             <ng-md-icon icon="{{vm.isEdit ? 'close' : 'edit'}}"
                         options='{"easing": "circ-in-out", "duration": 375, "rotation": "none"}'></ng-md-icon>
         </md-button>
-    </section>
+    </section-->
     <section ng-show="!loading && vm.noData()" layout-align="center center"
              ng-class="{'tb-padded' : !vm.widgetEditMode}"
              style="text-transform: uppercase; display: flex; z-index: 1;"
@@ -180,8 +180,8 @@
         </div>
     </tb-details-sidenav>
     <!-- </section> -->
-    <section layout="row" layout-wrap class="tb-footer-buttons md-fab ">
-        <md-button ng-disabled="loading" ng-if="!vm.isAddingWidget && vm.isEdit && !vm.widgetEditMode"
+    <section layout="row" layout-wrap class="tb-footer-buttons md-fab">
+        <md-button ng-disabled="loading" ng-show="!vm.isAddingWidget && vm.isEdit && !vm.widgetEditMode"
                    class="tb-btn-footer md-accent md-hue-2 md-fab" ng-click="vm.addWidget($event)"
                    aria-label="{{ 'dashboard.add-widget' | translate }}">
             <md-tooltip md-direction="top">
@@ -189,5 +189,25 @@
             </md-tooltip>
             <ng-md-icon icon="add"></ng-md-icon>
         </md-button>
+        <md-button ng-if="vm.isTenantAdmin()" ng-show="vm.isEdit && !vm.isAddingWidget && !loading && !vm.widgetEditMode" ng-disabled="loading"
+                   class="tb-btn-footer md-accent md-hue-2 md-fab"
+                   aria-label="{{ 'action.apply' | translate }}"
+                   ng-click="vm.saveDashboard()">
+            <md-tooltip md-direction="top">
+                {{ 'action.apply-changes' | translate }}
+            </md-tooltip>
+            <ng-md-icon icon="done"></ng-md-icon>
+        </md-button>
+        <md-button ng-show="!vm.isAddingWidget && !loading && !vm.widgetEditMode"
+                   ng-if="vm.isTenantAdmin()" ng-disabled="loading"
+                   class="tb-btn-footer md-accent md-hue-2 md-fab"
+                   aria-label="{{ 'action.edit-mode' | translate }}"
+                   ng-click="vm.toggleDashboardEditMode()">
+            <md-tooltip md-direction="top">
+                {{ (vm.isEdit ? 'action.decline-changes' : 'action.enter-edit-mode') | translate }}
+            </md-tooltip>
+            <ng-md-icon icon="{{vm.isEdit ? 'close' : 'edit'}}"
+                        options='{"easing": "circ-in-out", "duration": 375, "rotation": "none"}'></ng-md-icon>
+        </md-button>
     </section>
 </md-content>

ui/src/app/layout/breadcrumb.tpl.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-breadcrumb">
+<div flex class="tb-breadcrumb" layout="row">
 	<h1 flex hide-gt-sm>{{ steps[steps.length-1].ncyBreadcrumbLabel | breadcrumbLabel }}</h1>
 	<span hide-xs hide-sm ng-repeat="step in steps" ng-switch="$last || !!step.abstract">
 	    <a ng-switch-when="false" href="{{step.ncyBreadcrumbLink}}">

ui/src/app/layout/home.scss

@@ -29,6 +29,11 @@
 .tb-breadcrumb {
   font-size: 18px !important;
   font-weight: 400 !important;
+  h1, a, span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   a {
     border: none;
     opacity: 0.75;

ui/src/app/layout/home.tpl.html

@@ -39,7 +39,7 @@
 
   <div flex layout="column" tabIndex="-1" role="main">
     <md-toolbar class="md-whiteframe-z1 tb-primary-toolbar" ng-class="{'md-hue-1': vm.displaySearchMode()}">
-    	<div flex class="md-toolbar-tools">
+    	<div layout="row" flex class="md-toolbar-tools">
 		      <md-button id="main" hide-gt-sm
 		      		class="md-icon-button" ng-click="vm.openSidenav()" aria-label="{{ 'home.menu' | translate }}" ng-class="{'tb-invisible': vm.displaySearchMode()}">
 		      		<md-icon aria-label="{{ 'home.menu' | translate }}" class="material-icons">menu</md-icon>
@@ -47,7 +47,7 @@
 	          <md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="searchConfig.showSearch = !searchConfig.showSearch" ng-class="{'tb-invisible': !vm.displaySearchMode()}" >
 		      	  <md-icon aria-label="{{ 'action.back' | translate }}" class="material-icons">arrow_back</md-icon>
 	          </md-button>		    
-			  <div flex ng-show="!vm.displaySearchMode()" tb-no-animate flex class="md-toolbar-tools">
+			  <div flex layout="row" ng-show="!vm.displaySearchMode()" tb-no-animate class="md-toolbar-tools">
 				  <span ng-cloak ncy-breadcrumb></span>
 			  </div>
 			  <md-input-container ng-show="vm.displaySearchMode()" md-theme="tb-search-input" flex>