TileView: Improve how tile look like

- Implement selected index on Tile (reference #56)
Moonshine-IDE · Jun 9, 2024 · 42349d4 · 42349d4
1 parent 63f03bf
commit 42349d4
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 15 deletions.
diff --git a/...rtal_Royale/views/modules/DocumentationForm/DocumentationFormViews/DocumentationForm.mxml b/...rtal_Royale/views/modules/DocumentationForm/DocumentationFormViews/DocumentationForm.mxml
@@ -254,8 +254,8 @@
   							   {caption: 'DocumentationUNID', dataField: 'DocumentationUNID', dataType: 'number', alignment: 'left', sortOrder: 'asc', allowFiltering: false, visible: this.proxy.showUnid}]}" dataProvider="{this.proxy.items}" 
   					 filterRow="{ {visible: true, applyFilter: 'auto'} }" localId="dg" includeIn="dataGridState" className="dxDataGrid scrollHeightDocFormGridJS" percentWidth="100" doubleClick="onGridDoubleClick(event)"/>-->
   <tileView:TileView localId="dg" includeIn="dataGridState" className="tileViewJS" 
-  					percentWidth="100" baseItemWidth="200" baseItemHeight="250" itemMargin="5" direction="vertical" 
+  					percentWidth="100" baseItemWidth="245" baseItemHeight="300" itemMargin="5" direction="vertical" 
   					itemRenderer="Super.Human.Portal_Royale.views.renderers.DocumentationTileRenderer"/>
   <tileView:TileView localId="tileGettingStarted" className="tileViewJS" direction="vertical" includeIn="startview"
-					  percentWidth="100"  baseItemHeight="400" itemMargin="10" itemRenderer="Super.Human.Portal_Royale.views.renderers.CardTileRenderer"/>
+					  percentWidth="100"  baseItemHeight="350" itemMargin="10" itemRenderer="Super.Human.Portal_Royale.views.renderers.CardTileRenderer"/>
 </j:VGroup>
diff --git a/...rtal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/CardTileRenderer.mxml b/...rtal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/CardTileRenderer.mxml
@@ -27,7 +27,7 @@
         }
 	]]>
 </fx:Script>
-	<j:Card percentHeight="100" percentWidth="100" maxHeight="300" className="cardTile">
+	<j:Card percentHeight="100" percentWidth="100" className="cardTile">
 		<j:CardTitle text="{dataVO.title}" className="cardTileTitle" multiline="true" percentWidth="100"/>
 		<j:CardPrimaryContent itemsHorizontalAlign="itemsCenter" itemsVerticalAlign="itemsCenter" gap="2">
 			<j:IconButton visible="{dataVO.imageIcon != null}" className="cardTileButtonIcon">
@@ -37,7 +37,7 @@
 			</j:IconButton>
 			<j:Label multiline="true" text="{dataVO.description}"/>
 		</j:CardPrimaryContent>
-		<j:CardActions visible="{dataVO.link != null}">
+		<j:CardActions visible="{dataVO.link != null}" className="cardTileActions">
 			<j:Button text="See More"/>
 		</j:CardActions>
 	</j:Card>

diff --git a/...le/src/generated/Super.Human.Portal_Royale/views/renderers/DocumentationTileRenderer.mxml b/...le/src/generated/Super.Human.Portal_Royale/views/renderers/DocumentationTileRenderer.mxml
@@ -2,7 +2,7 @@
 <itemRenderers:TileViewItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
 		 xmlns:j="library://ns.apache.org/royale/jewel"
 		 xmlns:js="library://ns.apache.org/royale/basic" xmlns:html="library://ns.apache.org/royale/html" 
-		 xmlns:itemRenderers="classes.com.devexpress.js.tileView.itemRenderers.*">
+		 xmlns:itemRenderers="classes.com.devexpress.js.tileView.itemRenderers.*" percentHeight="100">
 	<itemRenderers:beads>
 		<js:ItemRendererDataBinding />
 	</itemRenderers:beads>
@@ -27,7 +27,7 @@
         }
 	]]>
 </fx:Script>
-	<j:Card percentHeight="100" percentWidth="100" maxHeight="300" className="cardTile">
+	<j:Card percentHeight="100" percentWidth="100" className="cardTile">
 		<j:CardPrimaryContent itemsHorizontalAlign="itemsCenter" itemsVerticalAlign="itemsCenter" gap="2">
 			<j:IconButton visible="{dataVO.image == null}" className="cardTileButtonIcon">
 				 <j:icon>
@@ -37,7 +37,7 @@
 			<j:Image src="{dataVO.image}" visible="{dataVO.image != null}"/>
 			<j:Label multiline="true" text="{dataVO.DocumentationName}"/>
 		</j:CardPrimaryContent>
-		<j:CardActions visible="{dataVO.showUnid}">
+		<j:CardActions visible="{dataVO.showUnid}" itemsVerticalAlign="itemsBottom" className="cardTileActions">
 			<j:Label text="{'DocumentationUNID: ' + dataVO.DocumentationUNID}"/>
 		</j:CardActions>
 	</j:Card>

diff --git a/...src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/TileViewView.as b/...src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/TileViewView.as
@@ -28,7 +28,10 @@ package classes.com.devexpress.js.tileView.beads
 
 	        window["$"](host.element).dxTileView({
 	        		onItemClick: function onItemClick(event:Object):void {
-					host.dispatchEvent(new TileViewEvent(TileViewEvent.CLICK_ITEM, event.itemData))
+	        			host["selectedIndex"] = event.itemIndex;
+	        			host["selectedItem"] = event.itemData;
+
+					host.dispatchEvent(new TileViewEvent(TileViewEvent.CLICK_ITEM, event.itemData, event.itemIndex));
 				}});
 	        this._model.addEventListener("dataProviderChanged", handleDataProviderChanged);
 	        this._model.addEventListener("itemRendererChanged", handleItemRendererChanged);
@@ -81,8 +84,11 @@ package classes.com.devexpress.js.tileView.beads
 			window["$"](host.element).dxTileView({
 				itemTemplate: function itemTemplate(itemData:Object, itemIndex:int, itemElement:Object):void {
 					var renderer:Object = _model.itemRenderer.newInstance();
+						renderer.index = itemIndex;
+
 					var div:View = new View();
-
+						div.percentHeight = 100;
+
 					renderer.data = itemData;
 					div.addElement(renderer as IChild);	
 					itemElement.append(div.element);

diff --git a/...apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/models/TileViewModel.as b/...apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/models/TileViewModel.as
@@ -2,11 +2,10 @@ package classes.com.devexpress.js.tileView.beads.models
 {
     import classes.com.devexpress.js.tileView.interfaces.ITileViewModel;
 
-    import org.apache.royale.jewel.beads.models.DataProviderModel;
     import org.apache.royale.core.IFactory;
-    import org.apache.royale.core.ISelectionModel;
+    import org.apache.royale.jewel.beads.models.DataProviderModel;
 
-	public class TileViewModel extends DataProviderModel implements ITileViewModel, ISelectionModel
+	public class TileViewModel extends DataProviderModel implements ITileViewModel
 	{
 		public function TileViewModel()
 		{
@@ -116,7 +115,7 @@ package classes.com.devexpress.js.tileView.beads.models
 			}
 		}
 
-		private var _selectedIndex:int;
+		private var _selectedIndex:int = -1;
 
 		public function get selectedIndex():int
 		{

diff --git a/...c/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/events/TileViewEvent.as b/...c/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/events/TileViewEvent.as
@@ -6,11 +6,12 @@ package  classes.com.devexpress.js.tileView.events
 	{
 		public static const CLICK_ITEM:String = "clickItemTileView";
 
-		public function TileViewEvent(type:String, item:Object = null)
+		public function TileViewEvent(type:String, item:Object = null, index:int = -1)
 		{
 			super(type);
 
 			_item = item;
+			_index = index;
 		}
 
 		private var _item:Object;
@@ -19,5 +20,12 @@ package  classes.com.devexpress.js.tileView.events
 		{
 			return _item;
 		}
+
+		private var _index:int;
+
+		public function get index():int
+		{
+			return _index;
+		}
 	}
 }
diff --git a/.../apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/interfaces/ITileViewModel.as b/.../apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/interfaces/ITileViewModel.as
@@ -3,8 +3,9 @@ package classes.com.devexpress.js.tileView.interfaces
     import org.apache.royale.core.IHasDataProvider;
     import org.apache.royale.events.IEventDispatcher;
     import org.apache.royale.core.IFactory;
+    import org.apache.royale.core.ISelectionModel;
 
-	public interface ITileViewModel extends IHasDataProvider, IEventDispatcher
+	public interface ITileViewModel extends IHasDataProvider, IEventDispatcher, ISelectionModel
 	{
 		function get dataSource():Object;
 		function set dataSource(value:Object):void;

diff --git a/Super.Human.Portal_Royale/src/resources/app-styles.css b/Super.Human.Portal_Royale/src/resources/app-styles.css
@@ -77,6 +77,10 @@ a:hover {
 	border: none !important;
 }
 
+.card-actions.cardTileActions {
+	borderTop: none !important;
+}
+
 .jewel.item.gridJSRendererClean {
 	border: none;
 	box-shadow: none;