dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
TB-70: Improve search usability for cards view.
This commit is contained in:
Igor Kulikov 2017-07-17 20:59:47 +03:00 committed by GitHub
commit 54c4e449b0
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/src/app/layout/home.controller.js
View File

@ -56,6 +56,8 @@ export default function HomeController(types, loginService, userService, deviceS
vm.searchTextUpdated = searchTextUpdated; vm.searchTextUpdated = searchTextUpdated;
vm.sidenavClicked = sidenavClicked; vm.sidenavClicked = sidenavClicked;
vm.toggleFullscreen = toggleFullscreen; vm.toggleFullscreen = toggleFullscreen;
vm.openSearch = openSearch;
vm.closeSearch = closeSearch;
$scope.$on('$stateChangeSuccess', function (evt, to, toParams, from) { $scope.$on('$stateChangeSuccess', function (evt, to, toParams, from) {
watchEntitySubtype(false); watchEntitySubtype(false);
@ -128,6 +130,25 @@ export default function HomeController(types, loginService, userService, deviceS
} }
} }
function openSearch() {
if ($scope.searchConfig.searchEnabled) {
$scope.searchConfig.showSearch = true;
$timeout(() => {
angular.element('#tb-search-text-input', $element).focus();
});
}
}
function closeSearch() {
if ($scope.searchConfig.searchEnabled) {
$scope.searchConfig.showSearch = false;
if ($scope.searchConfig.searchText.length) {
$scope.searchConfig.searchText = '';
searchTextUpdated();
}
}
}
function searchTextUpdated() { function searchTextUpdated() {
$scope.$broadcast('searchTextUpdated'); $scope.$broadcast('searchTextUpdated');
} }

6
ui/src/app/layout/home.tpl.html
View File

@ -49,7 +49,7 @@
class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.goBack()" ng-class="{'tb-invisible': vm.displaySearchMode()}"> class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.goBack()" ng-class="{'tb-invisible': vm.displaySearchMode()}">
<md-icon aria-label="{{ 'action.back' | translate }}" class="material-icons">arrow_back</md-icon> <md-icon aria-label="{{ 'action.back' | translate }}" class="material-icons">arrow_back</md-icon>
</md-button> </md-button>
<md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="searchConfig.showSearch = !searchConfig.showSearch" ng-class="{'tb-invisible': !vm.displaySearchMode()}" > <md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.closeSearch()" ng-class="{'tb-invisible': !vm.displaySearchMode()}" >
<md-icon aria-label="{{ 'action.back' | translate }}" class="material-icons">arrow_back</md-icon> <md-icon aria-label="{{ 'action.back' | translate }}" class="material-icons">arrow_back</md-icon>
</md-button> </md-button>
<div flex layout="row" ng-show="!vm.displaySearchMode()" tb-no-animate class="md-toolbar-tools"> <div flex layout="row" ng-show="!vm.displaySearchMode()" tb-no-animate class="md-toolbar-tools">
@ -64,10 +64,10 @@
</div> </div>
<md-input-container ng-class="{'tb-entity-search': vm.displayEntitySubtypeSearch()}" flex> <md-input-container ng-class="{'tb-entity-search': vm.displayEntitySubtypeSearch()}" flex>
<label>&nbsp;</label> <label>&nbsp;</label>
<input ng-model="searchConfig.searchText" ng-change="vm.searchTextUpdated()" placeholder="{{ 'common.enter-search' | translate }}"/> <input id="tb-search-text-input" ng-model="searchConfig.searchText" ng-change="vm.searchTextUpdated()" placeholder="{{ 'common.enter-search' | translate }}"/>
</md-input-container> </md-input-container>
</div> </div>
<md-button class="md-icon-button" aria-label="{{ 'action.search' | translate }}" ng-show="searchConfig.searchEnabled" ng-click="searchConfig.showSearch = !searchConfig.showSearch"> <md-button class="md-icon-button" aria-label="{{ 'action.search' | translate }}" ng-show="searchConfig.searchEnabled" ng-click="vm.openSearch()">
<md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon> <md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon>
</md-button> </md-button>
<md-button ng-show="!vm.displaySearchMode()" hide-xs hide-sm class="md-icon-button" ng-click="vm.toggleFullscreen()" aria-label="{{ 'fullscreen.toggle' | translate }}"> <md-button ng-show="!vm.displaySearchMode()" hide-xs hide-sm class="md-icon-button" ng-click="vm.toggleFullscreen()" aria-label="{{ 'fullscreen.toggle' | translate }}">