DataKey chips dnd improvements. Update AngularJS Material version to 1.1.19.
This commit is contained in:
Igor Kulikov
parent
b185080ae9
commit
a3c512c159
3245
ui/package-lock.json
generated
3245
ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -26,8 +26,8 @@
|
||||
"angular-fullscreen": "git://github.com/fabiobiondi/angular-fullscreen.git#master",
|
||||
"angular-gridster": "^0.13.14",
|
||||
"angular-hotkeys": "^1.7.0",
|
||||
"angular-jwt": "^0.1.6",
|
||||
"angular-material": "1.1.13",
|
||||
"angular-jwt": "^0.1.11",
|
||||
"angular-material": "1.1.19",
|
||||
"angular-material-data-table": "^0.10.9",
|
||||
"angular-material-expansion-panel": "^0.7.2",
|
||||
"angular-material-icons": "^0.7.1",
|
||||
@ -56,27 +56,27 @@
|
||||
"flot.curvedlines": "git://github.com/MichaelZinsmaier/CurvedLines.git#master",
|
||||
"font-awesome": "^4.6.3",
|
||||
"javascript-detect-element-resize": "^0.5.3",
|
||||
"jquery": "^3.1.0",
|
||||
"jquery": "^3.4.1",
|
||||
"jquery.terminal": "^1.5.0",
|
||||
"js-beautify": "^1.6.4",
|
||||
"js-beautify": "^1.10.0",
|
||||
"json-schema-defaults": "^0.2.0",
|
||||
"jstree": "^3.3.7",
|
||||
"jstree": "^3.3.8",
|
||||
"jstree-bootstrap-theme": "^1.0.1",
|
||||
"leaflet": "^1.0.3",
|
||||
"leaflet": "^1.5.1",
|
||||
"leaflet-polylinedecorator": "^1.6.0",
|
||||
"leaflet-providers": "^1.1.17",
|
||||
"leaflet-providers": "^1.8.0",
|
||||
"material-ui": "^0.16.1",
|
||||
"material-ui-number-input": "^5.0.16",
|
||||
"md-color-picker": "0.2.6",
|
||||
"md-date-range-picker": "^0.8.4",
|
||||
"mdPickers": "git://github.com/alenaksu/mdPickers.git#0.7.5",
|
||||
"moment": "^2.15.0",
|
||||
"moment": "^2.24.0",
|
||||
"ngFlowchart": "git://github.com/thingsboard/ngFlowchart.git#master",
|
||||
"ngclipboard": "^1.1.1",
|
||||
"ngreact": "^0.3.0",
|
||||
"objectpath": "^1.2.1",
|
||||
"oclazyload": "^1.0.9",
|
||||
"raphael": "^2.2.7",
|
||||
"raphael": "^2.2.8",
|
||||
"rc-select": "^6.6.1",
|
||||
"react": "^15.4.1",
|
||||
"react-ace": "^4.1.0",
|
||||
@ -101,11 +101,11 @@
|
||||
"babel-preset-es2015": "^6.14.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"compression-webpack-plugin": "^1.1.11",
|
||||
"connect-history-api-fallback": "^1.3.0",
|
||||
"connect-history-api-fallback": "^1.6.0",
|
||||
"copy-webpack-plugin": "^3.0.1",
|
||||
"cross-env": "^3.2.4",
|
||||
"css-loader": "^0.25.0",
|
||||
"directory-tree": "^2.1.0",
|
||||
"directory-tree": "^2.2.3",
|
||||
"eslint": "^3.4.0",
|
||||
"eslint-config-angular": "^0.5.0",
|
||||
"eslint-loader": "^1.5.0",
|
||||
@ -113,6 +113,7 @@
|
||||
"eslint-plugin-import": "^1.14.0",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.9.0",
|
||||
"happypack": "^5.0.1",
|
||||
"html-loader": "^0.4.3",
|
||||
"html-minifier": "^3.2.2",
|
||||
"html-minifier-loader": "^1.3.4",
|
||||
@ -123,26 +124,25 @@
|
||||
"less-loader": "^2.2.3",
|
||||
"ng-annotate-loader": "^0.1.1",
|
||||
"ngtemplate-loader": "^1.3.1",
|
||||
"node-sass": "^4.5.3",
|
||||
"node-sass": "^4.12.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react-hot-loader": "^3.0.0-beta.6",
|
||||
"sass-loader": "^4.0.2",
|
||||
"style-loader": "^0.13.1",
|
||||
"stylelint": "^9.5.0",
|
||||
"stylelint-config-recommended-scss": "^3.2.0",
|
||||
"stylelint-config-standard": "^18.2.0",
|
||||
"stylelint": "^9.10.1",
|
||||
"stylelint-config-recommended-scss": "^3.3.0",
|
||||
"stylelint-config-standard": "^18.3.0",
|
||||
"stylelint-order": "^1.0.0",
|
||||
"stylelint-scss": "^3.3.0",
|
||||
"stylelint-scss": "^3.8.0",
|
||||
"stylelint-webpack-plugin": "^0.10.5",
|
||||
"uglifyjs-webpack-plugin": "^1.3.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-middleware": "^1.6.1",
|
||||
"webpack-dev-server": "^1.15.1",
|
||||
"webpack-hot-middleware": "^2.12.2",
|
||||
"webpack-material-design-icons": "^0.1.0",
|
||||
"uglifyjs-webpack-plugin": "^1.3.0",
|
||||
"happypack": "^5.0.1"
|
||||
"webpack-hot-middleware": "^2.25.0",
|
||||
"webpack-material-design-icons": "^0.1.0"
|
||||
},
|
||||
"engine": "node >= 5.9.0",
|
||||
"nyc": {
|
||||
|
||||
@ -31,6 +31,7 @@ export default function AppConfig($provide,
|
||||
$urlRouterProvider,
|
||||
$locationProvider,
|
||||
$mdIconProvider,
|
||||
ngMdIconServiceProvider,
|
||||
$mdThemingProvider,
|
||||
$httpProvider,
|
||||
$translateProvider,
|
||||
@ -76,6 +77,9 @@ export default function AppConfig($provide,
|
||||
|
||||
$mdIconProvider.iconSet('mdi', mdiIconSet);
|
||||
|
||||
ngMdIconServiceProvider
|
||||
.addShape('alpha-a-circle-outline', '<path d="M11,7H13A2,2 0 0,1 15,9V17H13V13H11V17H9V9A2,2 0 0,1 11,7M11,9V11H13V9H11M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />');
|
||||
|
||||
configureTheme();
|
||||
|
||||
function blueGrayTheme() {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<section flex layout='column' layout-align="center" style="padding-left: 4px;">
|
||||
<md-chips flex ng-if="widgetType != types.widgetType.alarm.value"
|
||||
id="datakey_chips"
|
||||
ng-model="dataKeys" md-autocomplete-snap
|
||||
ng-model="dataKeys"
|
||||
md-transform-chip="transformDataKeyChip($chip)"
|
||||
md-require-match="false">
|
||||
<md-autocomplete
|
||||
@ -41,7 +41,7 @@
|
||||
md-menu-class="tb-datakey-autocomplete">
|
||||
<span ng-show="item.type==types.dataKeyType.attribute">
|
||||
<md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
|
||||
<ng-md-icon size="16" icon="perm_device_information"></ng-md-icon>
|
||||
<ng-md-icon size="16" icon="alpha-a-circle-outline"></ng-md-icon>
|
||||
</span>
|
||||
<span ng-show="item.type==types.dataKeyType.timeseries">
|
||||
<md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
|
||||
@ -58,7 +58,7 @@
|
||||
<span>{{'entity.create-new-key' | translate }} </span>
|
||||
<span ng-show="widgetType == types.widgetType.latest.value">
|
||||
<md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
|
||||
<ng-md-icon size="16" icon="perm_device_information" ng-click="createKey($event, types.dataKeyType.attribute, '#datakey_chips')"></ng-md-icon>
|
||||
<ng-md-icon size="16" icon="alpha-a-circle-outline" ng-click="createKey($event, types.dataKeyType.attribute, '#datakey_chips')"></ng-md-icon>
|
||||
</span>
|
||||
<span>
|
||||
<md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
|
||||
@ -80,7 +80,7 @@
|
||||
<div class="tb-chip-label">
|
||||
<span ng-show="$chip.type==types.dataKeyType.attribute">
|
||||
<md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
|
||||
<ng-md-icon size="20" icon="perm_device_information"></ng-md-icon>
|
||||
<ng-md-icon size="20" icon="alpha-a-circle-outline"></ng-md-icon>
|
||||
</span>
|
||||
<span ng-show="$chip.type==types.dataKeyType.timeseries">
|
||||
<md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
|
||||
@ -103,7 +103,7 @@
|
||||
<md-chips flex ng-if="widgetType == types.widgetType.alarm.value"
|
||||
id="alarm_datakey_chips"
|
||||
ng-required="true"
|
||||
ng-model="alarmDataKeys" md-autocomplete-snap
|
||||
ng-model="alarmDataKeys"
|
||||
md-transform-chip="transformAlarmDataKeyChip($chip)"
|
||||
md-require-match="false">
|
||||
<md-autocomplete
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<md-chips flex ng-if="widgetType != types.widgetType.alarm.value"
|
||||
id="function_datakey_chips"
|
||||
ng-required="true"
|
||||
ng-model="funcDataKeys" md-autocomplete-snap
|
||||
ng-model="funcDataKeys"
|
||||
md-transform-chip="transformFuncDataKeyChip($chip)"
|
||||
md-require-match="false">
|
||||
<md-autocomplete
|
||||
@ -82,7 +82,7 @@
|
||||
<md-chips flex ng-if="widgetType == types.widgetType.alarm.value"
|
||||
id="alarm_datakey_chips"
|
||||
ng-required="true"
|
||||
ng-model="alarmDataKeys" md-autocomplete-snap
|
||||
ng-model="alarmDataKeys"
|
||||
md-transform-chip="transformAlarmDataKeyChip($chip)"
|
||||
md-require-match="false">
|
||||
<md-autocomplete
|
||||
|
||||
@ -13,6 +13,11 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import './md-chip-draggable.scss';
|
||||
|
||||
var globalDraggingChipsWrapId = null;
|
||||
|
||||
export default angular.module('thingsboard.directives.mdChipDraggable', [])
|
||||
.directive('tbChipDraggable', function () {
|
||||
return {
|
||||
@ -25,12 +30,13 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
|
||||
var handle = $element[0];
|
||||
var draggingClassName = 'dragging';
|
||||
var droppingClassName = 'dropping';
|
||||
var droppingBeforeClassName = 'dropping--before';
|
||||
var droppingAfterClassName = 'dropping--after';
|
||||
var droppingBeforeClassName = 'dropping-before';
|
||||
var droppingAfterClassName = 'dropping-after';
|
||||
var dragging = false;
|
||||
var preventDrag = false;
|
||||
var dropPosition;
|
||||
var dropTimeout;
|
||||
var counter = 0;
|
||||
|
||||
var move = function (from, to) {
|
||||
this.splice(to, 0, this.splice(from, 1)[0]);
|
||||
@ -57,18 +63,22 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
|
||||
} else {
|
||||
dragging = true;
|
||||
|
||||
globalDraggingChipsWrapId = angular.element($element[0].closest('md-chips-wrap')).attr('id');
|
||||
|
||||
$element.addClass(draggingClassName);
|
||||
|
||||
var dataTransfer = event.dataTransfer || event.originalEvent.dataTransfer;
|
||||
|
||||
dataTransfer.effectAllowed = 'copyMove';
|
||||
dataTransfer.dropEffect = 'move';
|
||||
|
||||
dataTransfer.setData('text/plain', $scope.$parent.$mdChipsCtrl.items.indexOf($scope.$parent.$chip));
|
||||
}
|
||||
});
|
||||
|
||||
$element.on('dragend', function () {
|
||||
dragging = false;
|
||||
globalDraggingChipsWrapId = null;
|
||||
|
||||
$element.removeClass(draggingClassName);
|
||||
});
|
||||
@ -78,8 +88,14 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
|
||||
return;
|
||||
}
|
||||
|
||||
var targetChipsWrapId = angular.element($element[0].closest('md-chips-wrap')).attr('id');
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (globalDraggingChipsWrapId !== targetChipsWrapId) {
|
||||
return;
|
||||
}
|
||||
|
||||
var bounds = $element[0].getBoundingClientRect();
|
||||
|
||||
var props = {
|
||||
@ -97,20 +113,28 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
|
||||
|
||||
$element.addClass(droppingClassName);
|
||||
|
||||
$element.removeClass(droppingAfterClassName);
|
||||
$element.removeClass(droppingBeforeClassName);
|
||||
|
||||
if (horizontalOffset >= horizontalMidPoint || verticalOffset >= verticalMidPoint) {
|
||||
dropPosition = 'after';
|
||||
$element.removeClass(droppingBeforeClassName);
|
||||
$element.addClass(droppingAfterClassName);
|
||||
} else {
|
||||
dropPosition = 'before';
|
||||
$element.removeClass(droppingAfterClassName);
|
||||
$element.addClass(droppingBeforeClassName);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var dropHandler = function (event) {
|
||||
counter = 0;
|
||||
event.preventDefault();
|
||||
|
||||
var targetChipsWrapId = angular.element($element[0].closest('md-chips-wrap')).attr('id');
|
||||
if (globalDraggingChipsWrapId !== targetChipsWrapId) {
|
||||
return;
|
||||
}
|
||||
|
||||
var droppedItemIndex = parseInt((event.dataTransfer || event.originalEvent.dataTransfer).getData('text/plain'), 10);
|
||||
var currentIndex = $scope.$parent.$mdChipsCtrl.items.indexOf($scope.$parent.$chip);
|
||||
var newIndex = null;
|
||||
@ -146,14 +170,15 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
|
||||
});
|
||||
|
||||
$element.removeClass(droppingClassName);
|
||||
$element.removeClass(droppingBeforeClassName);
|
||||
$element.removeClass(droppingAfterClassName);
|
||||
$element.removeClass(droppingBeforeClassName);
|
||||
|
||||
$element.off('drop', dropHandler);
|
||||
}, 1000 / 16);
|
||||
};
|
||||
|
||||
$element.on('dragenter', function () {
|
||||
counter++;
|
||||
if (dragging) {
|
||||
return;
|
||||
}
|
||||
@ -166,9 +191,13 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
|
||||
});
|
||||
|
||||
$element.on('dragleave', function () {
|
||||
counter--;
|
||||
if (counter <=0) {
|
||||
counter = 0;
|
||||
$element.removeClass(droppingClassName);
|
||||
$element.removeClass(droppingBeforeClassName);
|
||||
$element.removeClass(droppingAfterClassName);
|
||||
$element.removeClass(droppingBeforeClassName);
|
||||
}
|
||||
});
|
||||
|
||||
}],
|
||||
|
||||
55
ui/src/app/components/md-chip-draggable.scss
Normal file
55
ui/src/app/components/md-chip-draggable.scss
Normal file
@ -0,0 +1,55 @@
|
||||
/**
|
||||
* Copyright © 2016-2019 The Thingsboard Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
md-chip {
|
||||
&.dropping {
|
||||
//border: dashed 2px;
|
||||
//opacity: .5;
|
||||
|
||||
//.md-chip-content {
|
||||
// margin: -2px;
|
||||
//}
|
||||
}
|
||||
|
||||
&.dropping-before {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: #fff;
|
||||
border: dashed 2px;
|
||||
border-radius: 16px;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropping-after {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
content: "";
|
||||
background-color: #fff;
|
||||
border: dashed 2px;
|
||||
border-radius: 16px;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user