Commit 90386447 authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Aplica animaciones a draganddrop y selección 

Mejora feedback visual de los listados con draganddrop habilitado,
mostrando una animación al reordenar elementos. Cambia fondo gris por
reducción de la opacidad del elemento arrastrado.

Ayuda al usuario a entender que ha pasado cuando selecciona una capa y
se pone al principio del listado mediante una animación.

Actualiza submódulo.
parent 88791af0

client-app/src/component/atlas/_AtlasThemesManagement.js

+10 −1
Original line number Diff line number Diff line
@@ -2,6 +2,7 @@ define([ 
	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/aspect'

	, 'dojo/dom-class'

	, 'app/designs/list/Controller'

	, 'app/designs/list/layout/Layout'

	, 'src/component/browser/_DragAndDrop'
@@ -12,6 +13,7 @@ define([ 
	declare

	, lang

	, aspect

	, domClass

	, Controller

	, Layout

	, _DragAndDrop
@@ -31,6 +33,8 @@ define([ 
				parentProperty: 'parent',

				addThemesBrowserFirst: false,

				omitThemesBrowser: false,

				animatedClass: 'animate__animated',

				animatedOnSelect: 'animate__headShake',



				_activeLayers: {}, // indicador sobre si la capa está activada en el mapa o no

			};
@@ -183,12 +187,17 @@ define([ 
			var atlasLayerItem = obj.item,

				mapLayerId = atlasLayerItem.mapLayerId,

				state = obj.state,

				order = obj.total - obj.indexList;

				order = obj.total - obj.indexList,

				rowNode = obj.node;



			if (!state) {

				domClass.remove(rowNode, [this.animatedClass, this.animatedOnSelect]);



				this._deactivateLayer(atlasLayerItem, order);

				this._activeLayers[mapLayerId] = false;

			} else {

				domClass.add(rowNode, [this.animatedClass, this.animatedOnSelect]);



				this._activateLayer(atlasLayerItem, order);

				this._activeLayers[mapLayerId] = true;

			}

client-app/src/component/browser/_DragAndDrop.js

+17 −2
Original line number Diff line number Diff line
@@ -35,7 +35,10 @@ define([ 
				rowContainerDragAndDropClass: 'dragAndDrop',

				draggableItemIds: null,

				disableDragHandlerOnCreation: false,

				hiddenClass: 'hidden'

				hiddenClass: 'hidden',

				animatedClass: 'animate__animated',

				animatedFromBottom: 'animate__slideInUp',

				animatedFromTop: 'animate__slideInDown'

			};



			lang.mixin(this, this.config, args);
@@ -330,14 +333,26 @@ define([ 


		_updatePositionRow: function(row) {



			this._nodeDrag.addEventListener('animationend', lang.hitch(this, this._rowDragAnimationEndCallback), {

				passive: true

			});



			// Reordena a la posición correcta

			if (domClass.contains(this._nodeBorderLast, this.topBorderDragAndDropClass)) {

				put(this._nodeBorderLast, '-', this._nodeDrag);

				domClass.add(this._nodeDrag, [this.animatedClass, this.animatedFromBottom]);

			} if (domClass.contains(this._nodeBorderLast, this.bottomBorderDragAndDropClass)) {

				put(this._nodeBorderLast, '+', this._nodeDrag);

				domClass.add(this._nodeDrag, [this.animatedClass, this.animatedFromTop]);

			}

		},



			this._removeDragAndDropBackground(this._nodeDrag);

		_rowDragAnimationEndCallback: function(evt) {



			var rowNode = evt.target;



			domClass.remove(rowNode, [this.animatedClass, this.animatedFromBottom, this.animatedFromTop]);

			this._removeDragAndDropBackground(rowNode);

		},



		_insertDragAndDropBackground: function(node) {

style @ 78d141c2

Compare f181c8f2 to 78d141c2
Original line number Diff line number Diff line 
Subproject commit f181c8f21fe23b543b5a0c819198ede50703c0f5
 
Subproject commit 78d141c2075663cc9f91e37e02634ff2da6aaaf9