You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/06/23 21:46:49 UTC
[royale-asjs] branch develop updated: jewel-numericstepper: fix
layout problems and sizing
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 24893a8 jewel-numericstepper: fix layout problems and sizing
24893a8 is described below
commit 24893a89ece99ad162de9dce1512ddd6706f2188
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jun 23 23:46:40 2020 +0200
jewel-numericstepper: fix layout problems and sizing
---
.../projects/Jewel/src/main/resources/defaults.css | 62 ++++++++----
.../royale/jewel/beads/views/NumericStepperView.as | 108 +++++++++++++--------
.../src/main/sass/components/_numericstepper.sass | 74 +++++++++-----
.../JewelTheme/src/main/resources/defaults.css | 52 +++-------
.../sass/components-primary/_numericstepper.sass | 58 +++++------
5 files changed, 193 insertions(+), 161 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 71f54f0..e8a132c 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3304,14 +3304,53 @@ j|CollapsibleNavigationSectionRenderer {
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
}
+.jewel.numericstepper {
+ display: flex;
+ flex-flow: column wrap;
+ height: 38px;
+}
+.jewel.numericstepper .jewel.spinner {
+ display: none;
+ order: -1;
+}
.jewel.numericstepper .jewel.textinput {
+ width: calc(100% - 38px);
display: inline-flex;
+ order: 0;
+ z-index: 1;
+}
+.jewel.numericstepper .jewel.button {
+ width: 38px;
+}
+.jewel.numericstepper .jewel.button::after {
+ content: " ";
+ position: absolute;
+}
+.jewel.numericstepper .jewel.button.up {
+ order: 1;
+}
+.jewel.numericstepper .jewel.button.down {
+ order: 2;
+}
+.jewel.numericstepper .jewel.button.up, .jewel.numericstepper .jewel.button.down {
+ height: 16.5px;
+ padding: 8.5px 16px;
}
@media (max-width: 992px) {
+ .jewel.numericstepper {
+ flex-flow: row nowrap;
+ }
.jewel.numericstepper .jewel.textinput {
- z-index: 1;
- position: relative;
+ order: 1;
+ }
+ .jewel.numericstepper .jewel.button.up {
+ order: 2;
+ height: 100%;
+ }
+ .jewel.numericstepper .jewel.button.down {
+ order: 0;
+ height: 100%;
}
}
j|NumericStepper {
@@ -3319,25 +3358,6 @@ j|NumericStepper {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.NumericStepperView");
}
-.jewel.spinner {
- display: inline-flex;
- flex-direction: column;
- vertical-align: top;
-}
-.jewel.spinner .jewel.button {
- display: flex;
-}
-.jewel.spinner .jewel.button.up::after, .jewel.spinner .jewel.button.down::after {
- content: " ";
- position: absolute;
-}
-
-@media (max-width: 992px) {
- .jewel.spinner {
- position: relative;
- flex-direction: row;
- }
-}
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 f6fa396..66f3a1e 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
@@ -34,6 +34,7 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.jewel.Label;
import org.apache.royale.jewel.Spinner;
import org.apache.royale.jewel.TextInput;
+ import org.apache.royale.core.IChild;
/**
* The NumericStepperView class creates the visual elements of the
@@ -88,6 +89,14 @@ package org.apache.royale.jewel.beads.views
spinner = new Spinner();
spinner.addBead( (value as UIBase).model as IBead);
(value as IParent).addElement(spinner);
+ // now we parent the spinner buttons to the numeric stepper
+ // we'll be using flex box column layout with wrapping to get the buttons to the right side
+ // on phones and tablets, we want to reorder elements (again flexbox) and position :
+ // button down + text input + button up
+ var spinnerview:SpinnerView = spinner.getBeadByType(IBeadView) as SpinnerView;
+ trace(spinnerview);
+ (value as IParent).addElement(spinnerview.increment as IChild);
+ (value as IParent).addElement(spinnerview.decrement as IChild);
// delay this until the resize event in JS
COMPILE::SWF
@@ -105,9 +114,9 @@ package org.apache.royale.jewel.beads.views
// listen for change events on the spinner so the value can be updated as
// as resizing the component
spinner.addEventListener("valueChange",spinnerValueChanged);
- IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
- IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
- IEventDispatcher(value).addEventListener("sizeChanged",sizeChangeHandler);
+ // IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+ // IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+ // IEventDispatcher(value).addEventListener("sizeChanged",sizeChangeHandler);
// listen for changes to the model itself and update the UI accordingly
IEventDispatcher(UIBase(value).model).addEventListener("valueChange",modelChangeHandler);
@@ -118,51 +127,72 @@ package org.apache.royale.jewel.beads.views
input.text = String(spinner.value);
- COMPILE::SWF
- {
- var host:ILayoutChild = ILayoutChild(value);
+ // COMPILE::SWF
+ // {
+ // var host:ILayoutChild = ILayoutChild(value);
- // Complete the setup if the height is sized to content or has been explicitly set
- // and the width is sized to content or has been explicitly set
- if ((host.isHeightSizedToContent() || !isNaN(host.explicitHeight)) &&
- (host.isWidthSizedToContent() || !isNaN(host.explicitWidth)))
- sizeChangeHandler(null);
- }
- COMPILE::JS
- {
- // always run size change since there are no size change events
- sizeChangeHandler(null);
- }
-
+ // // Complete the setup if the height is sized to content or has been explicitly set
+ // // and the width is sized to content or has been explicitly set
+ // if ((host.isHeightSizedToContent() || !isNaN(host.explicitHeight)) &&
+ // (host.isWidthSizedToContent() || !isNaN(host.explicitWidth)))
+ // sizeChangeHandler(null);
+ // }
+
+ initSize();
+
+ // always run size change since there are no size change events
+ // sizeChangeHandler(null);
+ }
+
+ public static const DEFAULT_BUTTON_WIDTH:Number = 38;
+ public static const DEFAULT_WIDTH:Number = 142;
+
+ /**
+ * Size the component at start up
+ *
+ * @private
+ */
+ protected function initSize():void
+ {
+ spinner.width = DEFAULT_BUTTON_WIDTH;
+
+ var df:ILayoutChild = host as ILayoutChild;
+
+ // if no width (neither px or %), set default width
+ if(df.isWidthSizedToContent())
+ df.width = DEFAULT_WIDTH;
+
+ // input.percentWidth = 100;
}
/**
* @private
* @royaleignorecoercion org.apache.royale.core.UIBase
*/
- private function sizeChangeHandler(event:Event) : void
- {
- // first reads
- var widthToContent:Boolean = (_strand as UIBase).isWidthSizedToContent();
- var inputWidth:Number = input.width;
- var inputHeight:Number = input.height;
- var strandWidth:Number;
- if (!widthToContent)
- {
- strandWidth = (_strand as UIBase).width;
- }
+ // private function sizeChangeHandler(event:Event) : void
+ // {
+ // // first reads
+ // var ns:ILayoutChild = host as ILayoutChild;
+ // var widthToContent:Boolean = ns.isWidthSizedToContent();
+ // var inputWidth:Number = input.width;
+ // var inputHeight:Number = input.height;
+ // var strandWidth:Number;
+ // if (!widthToContent)
+ // {
+ // strandWidth = ns.width;
+ // }
- // input.x = 0;
- // input.y = 0;
- if (!widthToContent)
- input.width = strandWidth - spinner.width - 2;
+ // // input.x = 0;
+ // // input.y = 0;
+ // if (!widthToContent)
+ // input.width = strandWidth - spinner.width - 2;
- COMPILE::SWF
- {
- spinner.x = inputWidth;
- spinner.y = 0;
- }
- }
+ // COMPILE::SWF
+ // {
+ // spinner.x = inputWidth;
+ // spinner.y = 0;
+ // }
+ // }
/**
* @private
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
index c78b002..4ea4eea 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
@@ -21,16 +21,47 @@
// NumericStepper variables
-.jewel.numericstepper
+.jewel.numericstepper
+ display: flex
+ flex-flow: column wrap
+ height: 38px
+
+ .jewel.spinner
+ display: none
+ order: -1
.jewel.textinput
+ width: calc(100% - 38px)
display: inline-flex
+ order: 0
+ z-index: 1
+ .jewel.button
+ width: 38px
+ &::after
+ content: ' '
+ position: absolute
+ &.up
+ order: 1
+ &.down
+ order: 2
+ &.up, &.down
+ height: 16.5px
+ padding: 8.5px 16px
@media (max-width: $desktop)
.jewel.numericstepper
+ flex-flow: row nowrap
+
.jewel.textinput
- z-index: 1
- position: relative
-
+ order: 1
+ .jewel.button
+ &.up
+ order: 2
+ height: 100%
+ &.down
+ order: 0
+ height: 100%
+ &.up, &.down
+
j|NumericStepper
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel")
@@ -43,34 +74,25 @@ j|NumericStepper
// padding: 0px
// border-style: none
-
// Jewel Spinner
// Spinner variables
.jewel.spinner
- display: inline-flex
- flex-direction: column
- vertical-align: top
- .jewel.button
- display: flex
+// display: inline-flex
+// flex-direction: column
+// vertical-align: top
- &.up, &.down
- &::after
- content: ' '
- position: absolute
+// .jewel.button
+// display: flex
-@media (max-width: $desktop)
- .jewel.spinner
- position: relative
- flex-direction: row
-
- .jewel.button
-
- &.up
- // position: absolute
-
- &.down
- // position: absolute
+// &.up
+
+// &.down
+
+// &.up, &.down
+// &::after
+// content: ' '
+// position: absolute
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 77b4e64..49a17e7 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -911,75 +911,47 @@ j|FormItem {
}
.jewel.numericstepper .jewel.textinput input {
- width: 8em;
border-radius: 0.25rem 0px 0px 0.25rem;
}
-
-@media (max-width: 992px) {
- .jewel.numericstepper {
- width: 190px;
- height: 39px;
- }
- .jewel.numericstepper .jewel.textinput {
- left: 38px;
- }
- .jewel.numericstepper .jewel.textinput input {
- border-radius: 0;
- }
-}
-.jewel.spinner {
- width: 34px;
-}
-.jewel.spinner .jewel.button {
- padding: 0px;
- height: 19px;
+.jewel.numericstepper .jewel.button {
border-radius: 0 0.25rem 0.25rem 0;
border-left: 0px;
}
-.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+.jewel.numericstepper .jewel.button, .jewel.numericstepper .jewel.button:hover, .jewel.numericstepper .jewel.button:hover:focus, .jewel.numericstepper .jewel.button:active, .jewel.numericstepper .jewel.button:active:focus {
color: transparent;
}
-.jewel.spinner .jewel.button.up {
+.jewel.numericstepper .jewel.button.up {
border-bottom-right-radius: 0px;
}
-.jewel.spinner .jewel.button.up::after {
+.jewel.numericstepper .jewel.button.up::after {
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='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
width: 12px;
height: 7px;
- left: calc(50% - 6px);
- top: calc(50% - 3.5px);
}
-.jewel.spinner .jewel.button.down {
+.jewel.numericstepper .jewel.button.down {
border-top-right-radius: 0px;
border-top-style: groove;
}
-.jewel.spinner .jewel.button.down::after {
+.jewel.numericstepper .jewel.button.down::after {
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='%233CADF1' 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 [...]
width: 12px;
height: 7px;
- left: calc(50% - 6px);
- top: calc(50% - 3.5px);
}
@media (max-width: 992px) {
- .jewel.spinner {
- left: -112px;
- width: auto;
- }
- .jewel.spinner .jewel.button {
- width: 39px;
- height: 38px;
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
}
- .jewel.spinner .jewel.button.up {
- left: 149px;
+ .jewel.numericstepper .jewel.button.up {
border: 1px solid #b3b3b3;
border-radius: 0 0.25rem 0.25rem 0;
+ margin-left: -1px;
}
- .jewel.spinner .jewel.button.down {
- left: -39px;
+ .jewel.numericstepper .jewel.button.down {
border: 1px solid #b3b3b3;
border-radius: 0.25rem 0 0 0.25rem;
border-top-style: solid;
+ margin-right: -1px;
}
}
.popup-content::before {
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 81483dc..8f8c937 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
@@ -30,30 +30,12 @@ $numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
.jewel.numericstepper
.jewel.textinput
input
- width: $numericstepper-input-width
+ // width: $numericstepper-input-width
border-radius: $numericstepper-border-radius 0px 0px $numericstepper-border-radius
-@media (max-width: $desktop)
- .jewel.numericstepper
- width: 190px
- height: 39px
-
- .jewel.textinput
- left: 38px
-
- input
- border-radius: 0
-
-
-// Jewel Spinner
-
-// Spinner variables
-.jewel.spinner
- width: 34px
-
.jewel.button
- padding: 0px
- height: 19px
+ // padding: 0px
+ // height: 19px
border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
border-left: 0px
@@ -70,8 +52,8 @@ $numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
width: $numericstepper-button-width
height: $numericstepper-button-height
- left: $numericstepper-button-xoffset
- top: $numericstepper-button-yoffset
+ // left: $numericstepper-button-xoffset
+ // top: $numericstepper-button-yoffset
&.down
border-top-right-radius: 0px
border-top-style: groove
@@ -82,26 +64,32 @@ $numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
width: $numericstepper-button-width
height: $numericstepper-button-height
- left: $numericstepper-button-xoffset
- top: $numericstepper-button-yoffset
+ // left: $numericstepper-button-xoffset
+ // top: $numericstepper-button-yoffset
@media (max-width: $desktop)
- .jewel.spinner
- left: -112px
- width: auto
+ .jewel.numericstepper
+
+ .jewel.textinput
+ input
+ border-radius: 0
+ .jewel.spinner
+
.jewel.button
- width: 39px
- height: 38px
&.up
- left: 149px
-
border: 1px solid darken($default-color, 15%)
border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
+ margin-left: -1px
&.down
- left: -39px
-
border: 1px solid darken($default-color, 15%)
border-radius: $numericstepper-border-radius 0 0 $numericstepper-border-radius
- border-top-style: solid
+ border-top-style: solid
+ margin-right: -1px
+
+// Jewel Spinner
+
+// Spinner variables
+.jewel.spinner
+ //width: 34px