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: NumericStepper responsive layout for phones and tablets
Date Sun, 26 Aug 2018 09:58:14 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 7c4962a  NumericStepper responsive layout for phones and tablets
7c4962a is described below

commit 7c4962acf25797ce2481c37564445497b13f0c3c
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Sun Aug 26 11:58:10 2018 +0200

    NumericStepper responsive layout for phones and tablets
---
 .../src/main/royale/NumericStepperPlayGround.mxml  |  4 ++--
 .../projects/Jewel/src/main/resources/defaults.css | 25 +++++++++++++++++++++
 .../royale/jewel/beads/views/NumericStepperView.as | 20 +++--------------
 .../apache/royale/jewel/beads/views/SpinnerView.as | 21 ++++++-----------
 .../src/main/sass/components/_numericstepper.sass  | 25 ++++++++++++++++++++-
 .../JewelTheme/src/main/resources/defaults.css     | 23 +++++++++++++++----
 .../sass/components-primary/_numericstepper.sass   | 26 +++++++++++++++++-----
 7 files changed, 100 insertions(+), 44 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/NumericStepperPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/NumericStepperPlayGround.mxml
index c3e18e3..c4ab3ed 100644
--- a/examples/royale/JewelExample/src/main/royale/NumericStepperPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/NumericStepperPlayGround.mxml
@@ -29,7 +29,7 @@ limitations under the License.
 		]]>
 	</fx:Script>
 
-	<j:Card width="600">
+	<j:Card>
 		<html:H3 text="Jewel NumericStepper"/>
 
 		<j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
@@ -44,7 +44,7 @@ limitations under the License.
 
 		<j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
 			<j:NumericStepper minimum="10" maximum="100"/>
-			<j:Label text="NumericStepper minimum='10' and maximum='100'"/>
+			<j:Label text="NumericStepper minimum='10' and maximum='100'" multiline="true" width="300"/>
 		</j:HGroup>
 
 		<j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 10128eb..8038392 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -2736,6 +2736,17 @@ j|Navigation {
   display: inline-flex;
 }
 
+@media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    z-index: 1;
+    position: absolute;
+    left: 58px;
+  }
+}
 j|NumericStepper {
   IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel");
   IBeadView: ClassReference("org.apache.royale.jewel.beads.views.NumericStepperView");
@@ -2766,6 +2777,20 @@ j|NumericStepper {
   top: calc(50% - 5px);
 }
 
+@media (max-width: 992px) {
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
+  .jewel.spinner .jewel.button.up {
+    position: absolute;
+    left: 20px;
+  }
+  .jewel.spinner .jewel.button.down {
+    position: absolute;
+    left: 169px;
+  }
+}
 j|Spinner {
   IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel");
   IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SpinnerView");
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/NumericStepperView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/NumericStepperView.as
index 24960ce..4d1d2e8 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/NumericStepperView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/NumericStepperView.as
@@ -82,28 +82,19 @@ package org.apache.royale.jewel.beads.views
             
 			// add an input field
 			input = new TextInput();
-            // input.className = "NumericStepperInput";
-            // input.typeNames = "NumericStepperInput";
-			(value as IParent).addElement(input);
-			// COMPILE::JS
-			// {
-	        //     input.positioner.style.display = 'inline-block';
-    	    //     input.positioner.style.width = '100px';
-			// }
+            (value as IParent).addElement(input);
+			
 			// add a spinner
 			spinner = new Spinner();
 			spinner.addBead( (value as UIBase).model as IBead);
 			(value as IParent).addElement(spinner);
+			
 			// delay this until the resize event in JS
 			COMPILE::SWF
 			{
 				spinner.height = input.height;
 				spinner.width = input.height/2;
 			}
-			// COMPILE::JS
-			// {
-	        //     spinner.positioner.style.display = 'inline-block';
-			// }
 			
 			// listen for changes to the text input field which will reset the
 			// value. ideally, we should either set the input to accept only
@@ -160,11 +151,6 @@ package org.apache.royale.jewel.beads.views
 			{
 				strandWidth = (_strand as UIBase).width;
 			}
-			// COMPILE::JS
-			// {
-			// 	spinner.height = inputHeight;
-			// 	spinner.width = inputHeight/2;
-			// }
 			
 			// input.x = 0;
 			// input.y = 0;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SpinnerView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SpinnerView.as
index 5bd0669..ef3167d 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SpinnerView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SpinnerView.as
@@ -97,10 +97,10 @@ COMPILE::JS {
 				// Button(_decrement).addBead(new DownArrowButtonView());
 				// Button(_decrement).addBead(new ButtonAutoRepeatController());
 
-				// Button(_increment).x = 0;
-				// Button(_increment).y = 0;
-				// Button(_decrement).x = 0;
-				// Button(_decrement).y = Button(_increment).height;
+				Button(_increment).x = 0;
+				Button(_increment).y = 0;
+				Button(_decrement).x = 0;
+				Button(_decrement).y = Button(_increment).height;
 
 				UIBase(_strand).addChild(_decrement);
 				UIBase(_strand).addChild(_increment);
@@ -112,24 +112,17 @@ COMPILE::JS {
 			
             COMPILE::JS {
 				var host:UIBase = value as UIBase;
-				// depending on the surrounding layout, the element can be offset without this.
-				//host.element.style.position = "absolute";
-
+				
 				_increment = new Button();
                 _increment.addClass("up");
 				_increment.text = '\u25B2';
 				host.addElement(_increment);
-				// _increment.positioner.style.display = 'block';
-
+				
 				_decrement = new Button();
                 _decrement.addClass("down");
 				_decrement.text = '\u25BC';
-				// _decrement.positioner.style.display = 'block';
+				
 				host.addElement(_decrement);
-
-// add this in CSS!
-				// controller = new SpinnerMouseController();
-				// host.addBead(controller);
 			}
 				
 			COMPILE::SWF
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
index 19b95d8..bbac3cf 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
@@ -28,7 +28,16 @@ $numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
 .jewel.numericstepper    
     .jewel.textinput
         display: inline-flex
-    
+
+@media (max-width: $desktop)
+    .jewel.numericstepper
+        width: 190px
+        height: 39px 
+        .jewel.textinput
+            z-index: 1
+            position: absolute
+            left: 58px
+
 j|NumericStepper
     IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel")
     IBeadView: ClassReference("org.apache.royale.jewel.beads.views.NumericStepperView")
@@ -73,6 +82,20 @@ j|NumericStepper
 
                 left: $numericstepper-button-xoffset
                 top: $numericstepper-button-yoffset
+
+@media (max-width: $desktop)
+    .jewel.spinner
+        .jewel.button
+            width: 39px
+            height: 38px
+        
+            &.up
+                position: absolute
+                left: 20px
+            &.down
+                position: absolute
+                left: 169px 
+
     
 j|Spinner
     IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 2769886..efc6fe2 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -458,16 +458,20 @@ j|Card {
   border-radius: 0.25rem 0px 0px 0.25rem;
 }
 
+@media (max-width: 992px) {
+  .jewel.numericstepper .jewel.textinput input {
+    border-radius: 0;
+  }
+}
 .jewel.spinner {
   width: 34px;
 }
 .jewel.spinner .jewel.button {
+  padding: 0px;
+  height: 19px;
   color: transparent;
-  border-bottom-left-radius: 0px;
-  border-top-left-radius: 0px;
+  border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
-  height: 19px;
-  padding: 0px;
 }
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
@@ -485,6 +489,17 @@ j|Card {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg
stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000,
-1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon
transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41
8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
 }
 
+@media (max-width: 992px) {
+  .jewel.spinner .jewel.button.up {
+    border: 1px solid #b3b3b3;
+    border-radius: 0.25rem 0 0 0.25rem;
+  }
+  .jewel.spinner .jewel.button.down {
+    border: 1px solid #b3b3b3;
+    border-radius: 0 0.25rem 0.25rem 0;
+    border-top-style: solid;
+  }
+}
 .jewel.radiobutton input + span::before {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
index 829d01b..e003904 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
@@ -29,6 +29,11 @@ $numericstepper-border-radius: $border-radius
             width: $numericstepper-input-width
             border-radius: $numericstepper-border-radius 0px 0px $numericstepper-border-radius
 
+@media (max-width: $desktop)
+    .jewel.numericstepper
+        .jewel.textinput
+            input
+                border-radius: 0
 
 
 // Jewel Spinner
@@ -38,12 +43,12 @@ $numericstepper-border-radius: $border-radius
     width: 34px
     
     .jewel.button
+        padding: 0px
+        height: 19px
+
         color: transparent
-        border-bottom-left-radius: 0px
-        border-top-left-radius: 0px
+        border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
         border-left: 0px
-        height: 19px
-        padding: 0px
 
         &.up
             border-bottom-right-radius: 0px
@@ -54,10 +59,19 @@ $numericstepper-border-radius: $border-radius
                 
         &.down
             border-top-right-radius: 0px
-            // border-top: 0px
             border-top-style: groove
             
             &::after
                 background-size: 46%
                 background: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000,
-1.000000)' fill='#{$default-font-color}' fill-rule='nonzero'><g transform='translate(-2.000000,
0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000,
-4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></s
[...]
-        
\ No newline at end of file
+        
+@media (max-width: $desktop)
+    .jewel.spinner
+        .jewel.button
+            &.up
+                border: 1px solid darken($default-color, 15%)
+                border-radius: $numericstepper-border-radius 0 0 $numericstepper-border-radius
+            &.down
+                border: 1px solid darken($default-color, 15%)
+                border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius
0
+                border-top-style: solid 


Mime
View raw message