简柏林 / thingskit · Commits

Commit 54c4e449b0fa06607944e7fab7293f80bc6bfbdf

Authored by Igor Kulikov
Committed by GitHub
2 parents c13d4f89 704a8be8

Merge pull request #209 from thingsboard/feature/TB-70 

TB-70: Improve search usability for cards view.
Inline Side-by-side
Showing 2 changed files with 24 additions and 3 deletions
@@ -56,6 +56,8 @@ export default function HomeController(types, loginService, userService, deviceS @@ -56,6 +56,8 @@ export default function HomeController(types, loginService, userService, deviceS
56 vm.searchTextUpdated = searchTextUpdated; 56 vm.searchTextUpdated = searchTextUpdated;
57 vm.sidenavClicked = sidenavClicked; 57 vm.sidenavClicked = sidenavClicked;
58 vm.toggleFullscreen = toggleFullscreen; 58 vm.toggleFullscreen = toggleFullscreen;
  59 + vm.openSearch = openSearch;
  60 + vm.closeSearch = closeSearch;
59 61
60 $scope.$on('$stateChangeSuccess', function (evt, to, toParams, from) { 62 $scope.$on('$stateChangeSuccess', function (evt, to, toParams, from) {
61 watchEntitySubtype(false); 63 watchEntitySubtype(false);
@@ -128,6 +130,25 @@ export default function HomeController(types, loginService, userService, deviceS @@ -128,6 +130,25 @@ export default function HomeController(types, loginService, userService, deviceS
128 } 130 }
129 } 131 }
130 132
  133 + function openSearch() {
  134 + if ($scope.searchConfig.searchEnabled) {
  135 + $scope.searchConfig.showSearch = true;
  136 + $timeout(() => {
  137 + angular.element('#tb-search-text-input', $element).focus();
  138 + });
  139 + }
  140 + }
  141 +
  142 + function closeSearch() {
  143 + if ($scope.searchConfig.searchEnabled) {
  144 + $scope.searchConfig.showSearch = false;
  145 + if ($scope.searchConfig.searchText.length) {
  146 + $scope.searchConfig.searchText = '';
  147 + searchTextUpdated();
  148 + }
  149 + }
  150 + }
  151 +
131 function searchTextUpdated() { 152 function searchTextUpdated() {
132 $scope.$broadcast('searchTextUpdated'); 153 $scope.$broadcast('searchTextUpdated');
133 } 154 }
@@ -49,7 +49,7 @@ @@ -49,7 +49,7 @@
49 class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.goBack()" ng-class="{'tb-invisible': vm.displaySearchMode()}"> 49 class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.goBack()" ng-class="{'tb-invisible': vm.displaySearchMode()}">
50 <md-icon aria-label="{{ 'action.back' | translate }}" class="material-icons">arrow_back</md-icon> 50 <md-icon aria-label="{{ 'action.back' | translate }}" class="material-icons">arrow_back</md-icon>
51 </md-button> 51 </md-button>
52 - <md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="searchConfig.showSearch = !searchConfig.showSearch" ng-class="{'tb-invisible': !vm.displaySearchMode()}" > 52 + <md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.closeSearch()" ng-class="{'tb-invisible': !vm.displaySearchMode()}" >
53 <md-icon aria-label="{{ 'action.back' | translate }}" class="material-icons">arrow_back</md-icon> 53 <md-icon aria-label="{{ 'action.back' | translate }}" class="material-icons">arrow_back</md-icon>
54 </md-button> 54 </md-button>
55 <div flex layout="row" ng-show="!vm.displaySearchMode()" tb-no-animate class="md-toolbar-tools"> 55 <div flex layout="row" ng-show="!vm.displaySearchMode()" tb-no-animate class="md-toolbar-tools">
@@ -64,10 +64,10 @@ @@ -64,10 +64,10 @@
64 </div> 64 </div>
65 <md-input-container ng-class="{'tb-entity-search': vm.displayEntitySubtypeSearch()}" flex> 65 <md-input-container ng-class="{'tb-entity-search': vm.displayEntitySubtypeSearch()}" flex>
66 <label>&nbsp;</label> 66 <label>&nbsp;</label>
67 - <input ng-model="searchConfig.searchText" ng-change="vm.searchTextUpdated()" placeholder="{{ 'common.enter-search' | translate }}"/> 67 + <input id="tb-search-text-input" ng-model="searchConfig.searchText" ng-change="vm.searchTextUpdated()" placeholder="{{ 'common.enter-search' | translate }}"/>
68 </md-input-container> 68 </md-input-container>
69 </div> 69 </div>
70 - <md-button class="md-icon-button" aria-label="{{ 'action.search' | translate }}" ng-show="searchConfig.searchEnabled" ng-click="searchConfig.showSearch = !searchConfig.showSearch"> 70 + <md-button class="md-icon-button" aria-label="{{ 'action.search' | translate }}" ng-show="searchConfig.searchEnabled" ng-click="vm.openSearch()">
71 <md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon> 71 <md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon>
72 </md-button> 72 </md-button>
73 <md-button ng-show="!vm.displaySearchMode()" hide-xs hide-sm class="md-icon-button" ng-click="vm.toggleFullscreen()" aria-label="{{ 'fullscreen.toggle' | translate }}"> 73 <md-button ng-show="!vm.displaySearchMode()" hide-xs hide-sm class="md-icon-button" ng-click="vm.toggleFullscreen()" aria-label="{{ 'fullscreen.toggle' | translate }}">