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

Merge pull request #676 from jktu2870/improvements

Browse Source 
Added autofocus for search buttons
This commit is contained in:
Igor Kulikov 2018-06-18 14:53:05 +03:00 committed by GitHub
commit f23d22cf17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 61 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/app/components/widget/action/manage-widget-actions.directive.js
View File

@ -111,8 +111,15 @@ function ManageWidgetActionsController($rootScope, $scope, $document, $mdDialog,
}
});
function enterFilterMode () {
function enterFilterMode (event) {
let $button = angular.element(event.currentTarget);
let $toolbarsContainer = $button.closest('.toolbarsContainer');
vm.query.search = '';
$timeout(()=>{
$toolbarsContainer.find('.searchInput').focus();
})
}
function exitFilterMode () {

6
ui/src/app/components/widget/action/manage-widget-actions.tpl.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div ng-form="manageWidgetActionsForm" class="tb-manage-widget-actions md-whiteframe-z1" layout="column">
<div ng-form="manageWidgetActionsForm" class="tb-manage-widget-actions md-whiteframe-z1 toolbarsContainer" layout="column">
<md-toolbar class="md-table-toolbar md-default" ng-show="vm.query.search === null">
<div class="md-toolbar-tools">
<span translate>widget-config.actions</span>
@ -26,7 +26,7 @@
{{ 'widget-config.add-action' | translate }}
</md-tooltip>
</md-button>
<md-button class="md-icon-button" ng-click="vm.enterFilterMode()">
<md-button class="md-icon-button" ng-click="vm.enterFilterMode($event)">
<md-icon>search</md-icon>
<md-tooltip md-direction="top">
{{ 'action.search' | translate }}
@ -44,7 +44,7 @@
</md-button>
<md-input-container flex>
<label>&nbsp;</label>
<input ng-model="vm.query.search" name="querySearchInput" placeholder="{{ 'widget-config.search-actions' | translate }}"/>
<input ng-model="vm.query.search" class="searchInput" name="querySearchInput" placeholder="{{ 'widget-config.search-actions' | translate }}"/>
</md-input-container>
<md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()">
<md-icon aria-label="Close" class="material-icons">close</md-icon>

11
ui/src/app/entity/attribute/attribute-table.directive.js
View File

@ -30,7 +30,7 @@ import AliasController from '../../api/alias-controller';
/*@ngInject*/
export default function AttributeTableDirective($compile, $templateCache, $rootScope, $q, $mdEditDialog, $mdDialog,
$mdUtil, $document, $translate, $filter, utils, types, dashboardUtils,
$mdUtil, $document, $translate, $filter, $timeout, utils, types, dashboardUtils,
entityService, attributeService, widgetService) {
var linker = function (scope, element, attrs) {
@ -110,8 +110,15 @@ export default function AttributeTableDirective($compile, $templateCache, $rootS
scope.attributeScope = getAttributeScopeByValue(attrs.defaultAttributeScope);
}
scope.enterFilterMode = function() {
scope.enterFilterMode = function(event) {
let $button = angular.element(event.currentTarget);
let $toolbarsContainer = $button.closest('.toolbarsContainer');
scope.query.search = '';
$timeout(()=>{
$toolbarsContainer.find('.searchInput').focus();
})
}
scope.exitFilterMode = function() {

6
ui/src/app/entity/attribute/attribute-table.tpl.html
View File

@ -26,7 +26,7 @@
</md-select>
</md-input-container>
</section>
<div class="md-whiteframe-z1" ng-class="{flex: mode==='widget'}">
<div class="md-whiteframe-z1 toolbarsContainer" ng-class="{flex: mode==='widget'}">
<md-toolbar class="md-table-toolbar md-default" ng-show="mode==='default'
&& !selectedAttributes.length
&& query.search === null">
@ -39,7 +39,7 @@
{{ 'action.add' | translate }}
</md-tooltip>
</md-button>
<md-button class="md-icon-button" ng-click="enterFilterMode()">
<md-button class="md-icon-button" ng-click="enterFilterMode($event)">
<md-icon>search</md-icon>
<md-tooltip md-direction="top">
{{ 'action.search' | translate }}
@ -65,7 +65,7 @@
</md-button>
<md-input-container flex>
<label>&nbsp;</label>
<input ng-model="query.search" placeholder="{{ 'common.enter-search' | translate }}"/>
<input ng-model="query.search" class="searchInput" placeholder="{{ 'common.enter-search' | translate }}"/>
</md-input-container>
<md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="exitFilterMode()">
<md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>

11
ui/src/app/entity/relation/relation-table.directive.js
View File

@ -41,7 +41,7 @@ export default function RelationTable() {
}
/*@ngInject*/
function RelationTableController($scope, $q, $mdDialog, $document, $translate, $filter, utils, types, entityRelationService) {
function RelationTableController($scope, $q, $mdDialog, $document, $translate, $filter, $timeout, utils, types, entityRelationService) {
let vm = this;
@ -90,8 +90,15 @@ function RelationTableController($scope, $q, $mdDialog, $document, $translate, $
}
});
function enterFilterMode () {
function enterFilterMode (event) {
let $button = angular.element(event.currentTarget);
let $toolbarsContainer = $button.closest('.toolbarsContainer');
vm.query.search = '';
$timeout(()=>{
$toolbarsContainer.find('.searchInput').focus();
})
}
function exitFilterMode () {

6
ui/src/app/entity/relation/relation-table.tpl.html
View File

@ -26,7 +26,7 @@
</md-select>
</md-input-container>
</section>
<div layout="column" class="md-whiteframe-z1">
<div layout="column" class="md-whiteframe-z1 toolbarsContainer">
<md-toolbar class="md-table-toolbar md-default" ng-show="!vm.selectedRelations.length
&& vm.query.search === null">
<div class="md-toolbar-tools">
@ -39,7 +39,7 @@
{{ 'action.add' | translate }}
</md-tooltip>
</md-button>
<md-button class="md-icon-button" ng-click="vm.enterFilterMode()">
<md-button class="md-icon-button" ng-click="vm.enterFilterMode($event)">
<md-icon>search</md-icon>
<md-tooltip md-direction="top">
{{ 'action.search' | translate }}
@ -64,7 +64,7 @@
</md-button>
<md-input-container flex>
<label>&nbsp;</label>
<input ng-model="vm.query.search" placeholder="{{ 'common.enter-search' | translate }}"/>
<input ng-model="vm.query.search" class="searchInput" placeholder="{{ 'common.enter-search' | translate }}"/>
</md-input-container>
<md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.exitFilterMode()">
<md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>

10
ui/src/app/extension/extension-table.directive.js
View File

@ -45,7 +45,7 @@ export default function ExtensionTableDirective() {
}
/*@ngInject*/
function ExtensionTableController($scope, $filter, $document, $translate, types, $mdDialog, attributeService, telemetryWebsocketService, importExport) {
function ExtensionTableController($scope, $filter, $document, $translate, $timeout, $mdDialog, types, attributeService, telemetryWebsocketService, importExport) {
let vm = this;
@ -141,11 +141,17 @@ function ExtensionTableController($scope, $filter, $document, $translate, types,
}
});
function enterFilterMode() {
function enterFilterMode(event) {
let $button = angular.element(event.currentTarget);
let $toolbarsContainer = $button.closest('.toolbarsContainer');
vm.query.search = '';
if(vm.inWidget) {
vm.ctx.hideTitlePanel = true;
}
$timeout(()=>{
$toolbarsContainer.find('.searchInput').focus();
})
}
function exitFilterMode() {

6
ui/src/app/extension/extension-table.tpl.html
View File

@ -16,7 +16,7 @@
-->
<md-content flex class="md-padding tb-absolute-fill tb-data-table extension-table" layout="column">
<div layout="column" class="md-whiteframe-z1" ng-class="{'tb-absolute-fill' : vm.inWidget}">
<div layout="column" class="md-whiteframe-z1 toolbarsContainer" ng-class="{'tb-absolute-fill' : vm.inWidget}">
<md-toolbar ng-if="!vm.inWidget" class="md-table-toolbar md-default" ng-show="!vm.selectedExtensions.length
&& vm.query.search === null">
<div class="md-toolbar-tools">
@ -41,7 +41,7 @@
{{ 'action.add' | translate }}
</md-tooltip>
</md-button>
<md-button class="md-icon-button" ng-click="vm.enterFilterMode()">
<md-button class="md-icon-button" ng-click="vm.enterFilterMode($event)">
<md-icon>search</md-icon>
<md-tooltip md-direction="top">
{{ 'action.search' | translate }}
@ -66,7 +66,7 @@
</md-button>
<md-input-container flex>
<label>&nbsp;</label>
<input ng-model="vm.query.search" placeholder="{{ 'common.enter-search' | translate }}"/>
<input ng-model="vm.query.search" class="searchInput" placeholder="{{ 'common.enter-search' | translate }}"/>
</md-input-container>
<md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.exitFilterMode()">
<md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>

5
ui/src/app/widget/lib/alarms-table-widget.js
View File

@ -45,7 +45,7 @@ function AlarmsTableWidget() {
}
/*@ngInject*/
function AlarmsTableWidgetController($element, $scope, $filter, $mdMedia, $mdDialog, $document, $translate, $q, alarmService, utils, types) {
function AlarmsTableWidgetController($element, $scope, $filter, $mdMedia, $mdDialog, $document, $translate, $q, $timeout, alarmService, utils, types) {
var vm = this;
vm.stylesInfo = {};
@ -266,6 +266,9 @@ function AlarmsTableWidgetController($element, $scope, $filter, $mdMedia, $mdDia
function enterFilterMode () {
vm.query.search = '';
vm.ctx.hideTitlePanel = true;
$timeout(()=>{
angular.element(vm.ctx.$container).find('.searchInput').focus();
})
}
function exitFilterMode () {

2
ui/src/app/widget/lib/alarms-table-widget.tpl.html
View File

@ -28,7 +28,7 @@
</md-button>
<md-input-container flex>
<label>&nbsp;</label>
<input ng-model="vm.query.search" placeholder="{{'alarm.search' | translate}}"/>
<input ng-model="vm.query.search" class="searchInput" placeholder="{{'alarm.search' | translate}}"/>
</md-input-container>
<md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()">
<md-icon aria-label="Close" class="material-icons">close</md-icon>

5
ui/src/app/widget/lib/entities-table-widget.js
View File

@ -45,7 +45,7 @@ function EntitiesTableWidget() {
}
/*@ngInject*/
function EntitiesTableWidgetController($element, $scope, $filter, $mdMedia, $translate, utils, types) {
function EntitiesTableWidgetController($element, $scope, $filter, $mdMedia, $translate, $timeout, utils, types) {
var vm = this;
vm.stylesInfo = {};
@ -254,6 +254,9 @@ function EntitiesTableWidgetController($element, $scope, $filter, $mdMedia, $tra
function enterFilterMode () {
vm.query.search = '';
vm.ctx.hideTitlePanel = true;
$timeout(()=>{
angular.element(vm.ctx.$container).find('.searchInput').focus();
})
}
function exitFilterMode () {

2
ui/src/app/widget/lib/entities-table-widget.tpl.html
View File

@ -27,7 +27,7 @@
</md-button>
<md-input-container flex>
<label>&nbsp;</label>
<input ng-model="vm.query.search" placeholder="{{'entity.search' | translate}}"/>
<input ng-model="vm.query.search" class="searchInput" placeholder="{{'entity.search' | translate}}"/>
</md-input-container>
<md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()">
<md-icon aria-label="Close" class="material-icons">close</md-icon>

5
ui/src/app/widget/lib/timeseries-table-widget.js
View File

@ -44,7 +44,7 @@ function TimeseriesTableWidget() {
}
/*@ngInject*/
function TimeseriesTableWidgetController($element, $scope, $filter) {
function TimeseriesTableWidgetController($element, $scope, $filter, $timeout) {
var vm = this;
let dateFormatFilter = 'yyyy-MM-dd HH:mm:ss';
@ -62,6 +62,9 @@ function TimeseriesTableWidgetController($element, $scope, $filter) {
function enterFilterMode () {
vm.query.search = '';
vm.ctx.hideTitlePanel = true;
$timeout(()=>{
angular.element(vm.ctx.$container).find('.searchInput').focus();
})
}
function exitFilterMode () {

2
ui/src/app/widget/lib/timeseries-table-widget.tpl.html
View File

@ -27,7 +27,7 @@
</md-button>
<md-input-container flex>
<label>&nbsp;</label>
<input ng-model="vm.query.search" placeholder="{{'widget.search-data' | translate}}" md-autofocus/>
<input ng-model="vm.query.search" class="searchInput" placeholder="{{'widget.search-data' | translate}}" md-autofocus/>
</md-input-container>
<md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()">
<md-icon aria-label="Close" class="material-icons">close</md-icon>