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 <[email protected]>
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
