royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: responsive size debug tool for jewel
Date Tue, 18 Sep 2018 22:13:30 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 4737a72  responsive size debug tool for jewel
4737a72 is described below

commit 4737a726dd9b668e06dfb0677784df8c9109d31a
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Wed Sep 19 00:13:22 2018 +0200

    responsive size debug tool for jewel
---
 .../JewelExample/src/main/royale/MainContent.mxml  |   3 +-
 .../projects/Jewel/src/main/resources/defaults.css |  13 +++
 .../Jewel/src/main/resources/jewel-manifest.xml    |   3 +
 .../royale/jewel/debugger/ResposiveSizeMonitor.as  | 100 +++++++++++++++++++++
 .../projects/Jewel/src/main/sass/_global.sass      |  13 +++
 5 files changed, 131 insertions(+), 1 deletion(-)

diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 4a50dcd..4f9f636 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -144,5 +144,6 @@ limitations under the License.
         <local:TabBarPlayGround id="tabbar_panel"/>
         <local:ViewStatesPlayGround id="viewstates_panel"/>
     </j:ApplicationMainContent>
-    
+
+    <!-- <j:ResposiveSizeMonitor/> -->
 </j:ApplicationResponsiveView>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 984af2d..f5440e4 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -113,6 +113,19 @@ j|Form {
     IContentView: ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea");
   }
 }
+.responsiveSizeMonitor {
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 10px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 250px;
+}
+.responsiveSizeMonitor strong {
+  color: yellow;
+}
+
 .jewel.alert {
   position: fixed;
   top: 50%;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index ede8800..fe9d947 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -155,4 +155,7 @@
     
     <!-- <component id="JewelLabelViewBead" class="org.apache.royale.jewel.beads.views.JewelLabelViewBead"/>
-->
     
+
+     <component id="ResposiveSizeMonitor" class="org.apache.royale.jewel.debugger.ResposiveSizeMonitor"/>
+
 </componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/debugger/ResposiveSizeMonitor.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/debugger/ResposiveSizeMonitor.as
new file mode 100644
index 0000000..65e29e5
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/debugger/ResposiveSizeMonitor.as
@@ -0,0 +1,100 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.debugger
+{	
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.jewel.Drawer;
+	import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+	import org.apache.royale.jewel.Label;
+	
+	/**
+	 *  The ResponsiveDrawer class is a bead to use with Jewel Drawer to make it fixed or
+	 *  float depending on the screen size.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.4
+	 */
+	public class ResposiveSizeMonitor extends Label
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.4
+		 */
+		public function ResposiveSizeMonitor()
+		{
+            typeNames="responsiveSizeMonitor";
+            multiline = true;
+
+            text="ResposiveSizeMonitor";
+
+            //style= "background:rgba(0,0,0,0.8);color:white;padding:10px;position:fixed;bottom:0;width:250px";
+		}
+
+        override public function addedToParent():void
+        {
+            super.addedToParent();
+            setUpListener();
+        }
+
+		private function setUpListener():void
+		{
+            COMPILE::JS
+            {
+            window.addEventListener('resize', autoResizeHandler, false);
+            }
+            autoResizeHandler();
+		}
+		private function removeListener():void
+		{
+            COMPILE::JS
+            {
+                window.removeEventListener('resize', autoResizeHandler, false);
+            }
+		}
+
+		/**
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.4
+		 */
+		private function autoResizeHandler(event:Event = null):void
+        {
+			COMPILE::JS
+			{
+				// Desktop width size
+				//if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
+				html = "<strong>window.outerWidth:</strong> " + window.outerWidth + "x" +
window.outerHeight + "</br>";
+				html += "<strong>PHONE_BREAKPOINT: </strong> " + ResponsiveSizes.PHONE_BREAKPOINT
+ "</br>";
+				html += "<strong>TABLET_BREAKPOINT:</strong> " + ResponsiveSizes.TABLET_BREAKPOINT
+ "</br>";
+				html += "<strong>DESKTOP_BREAKPOINT:</strong> " + ResponsiveSizes.DESKTOP_BREAKPOINT
+ "</br>";
+				html += "<strong>WIDESCREEN_BREAKPOINT:</strong> " + ResponsiveSizes.WIDESCREEN_BREAKPOINT
+ "</br>";
+			}
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 95498e1..ce24abc 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -123,3 +123,16 @@ j|Form
 		// --- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
 		// --- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
 		IContentView: ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea")
+
+
+.responsiveSizeMonitor
+	background: rgba(0,0,0,0.8)
+	color: white
+	padding: 10px
+	position: fixed
+	bottom: 0
+	right: 0
+	width: 250px
+	
+	strong
+		color: yellow
\ No newline at end of file


Mime
View raw message