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 36deb2e Jewel ComboBox fix size, and dropdown size. Make drop down
open in the right position even if there's some scroll in place
36deb2e is described below
commit 36deb2ea74426eb6b22f9dcbfddf04cae1f4e31c
Author: Carlos Rovira <[email protected]>
AuthorDate: Wed Sep 12 01:52:44 2018 +0200
Jewel ComboBox fix size, and dropdown size. Make drop down open in the
right position even if there's some scroll in place
---
.../src/main/royale/ComboBoxPlayGround.mxml | 2 +-
.../projects/Jewel/src/main/resources/defaults.css | 18 +++++------
.../royale/jewel/beads/views/ComboBoxView.as | 35 ++++++++++++++++++----
.../Jewel/src/main/sass/components/_combobox.sass | 17 +++++++----
4 files changed, 49 insertions(+), 23 deletions(-)
diff --git
a/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml
index 5b29481..86e38d3 100644
--- a/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml
@@ -93,7 +93,7 @@ limitations under the License.
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="1"
itemsVerticalAlign="itemsCentered" width="290">
- <j:ComboBox
id="avengersComboBox" labelField="label" dataProvider="{listModel.avengers}"
change="avengersComboBoxSelectedItem(event)">
+ <j:ComboBox
id="avengersComboBox" width="140" labelField="label"
dataProvider="{listModel.avengers}"
change="avengersComboBoxSelectedItem(event)">
<j:beads>
<j:ComboBoxTextPrompt prompt="Avengers Team..."/>
</j:beads>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 75ad1ce..205fe33 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -267,12 +267,6 @@ j|ControlBar {
.jewel.combobox {
display: inline-flex;
}
-.jewel.combobox .jewel.textinput {
- width: 13.7em;
-}
-.jewel.combobox .jewel.button {
- width: 2.8em;
-}
.jewel.combobox .jewel.button::before {
margin: 0;
padding: 0;
@@ -329,7 +323,7 @@ j|ComboBox {
left: 50%;
touch-action: none;
box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
- width: 16.5em;
+ max-height: 170px;
opacity: 0;
}
.combobox-popup.open {
@@ -346,17 +340,21 @@ j|ComboBox {
@media (max-width: 768px) {
.combobox-popup .jewel.list {
- width: calc(100% - 20px);
+ width: 98% !important;
}
}
@media (min-width: 768px) and (max-width: 992px) {
.combobox-popup .jewel.list {
- width: calc(100% - 300px);
+ width: 70% !important;
}
}
@media (max-width: 992px) {
+ .combobox-popup .jewel.list {
+ max-height: 240px !important;
+ }
+
.jewel.item {
- height: 48px;
+ height: 48px !important;
}
}
@media (min-width: 992px) {
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
index 431bea0..124dfe0 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
@@ -119,15 +119,29 @@ package org.apache.royale.jewel.beads.views
{
super.strand = value;
- var host:StyledUIBase = value as StyledUIBase;
-
+ var host:StyledUIBase = _strand as StyledUIBase;
+
_textinput = new TextInput();
_button = new Button();
_button.text = '\u25BC';
+ _button.width = 39;
+
+ if(host.width == 0 || host.width < 89)
+ {
+ var w:Number = host.width == 0 ? 200 : 89;
+ _textinput.width = w - _button.width;
+ host.width = _textinput.width + _button.width;
+ } else
+ {
+ _textinput.width = host.width - _button.width;
+ }
+
+
host.addElement(_textinput);
host.addElement(_button);
+ //host.width = _textinput.width + _button.width;
var model:IComboBoxModel =
_strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
model.addEventListener("selectedIndexChanged",
handleItemChange);
@@ -160,7 +174,6 @@ package org.apache.royale.jewel.beads.views
*/
public function set popUpVisible(value:Boolean):void
{
-
if (value) {
var popUpClass:Class =
ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
_combolist = new popUpClass() as ComboBoxList;
@@ -174,7 +187,6 @@ package org.apache.royale.jewel.beads.views
// popup is ComboBoxList that fills 100% of
browser window-> We want the internal List inside to adjust height
_list = _combolist.list;
- _list.height = 250;
setTimeout(prepareForPopUp, 300);
@@ -242,8 +254,16 @@ package org.apache.royale.jewel.beads.views
*/
protected function sizeChangeAction():void
{
- //var host:StyledUIBase = StyledUIBase(_strand);
+ // var host:StyledUIBase = _strand as StyledUIBase;
+
+ // _textinput.width = host.width - _button.width;
+ // host.width = _textinput.width + _button.width;
+ // textinput.width = host.width - button.width;
+ // host.width = textinput.width + button.width;
+
+ // dispatchEvent(new Event("layoutNeeded"));
+
// input.x = 0;
// input.y = 0;
// if (host.isWidthSizedToContent()) {
@@ -288,21 +308,24 @@ package org.apache.royale.jewel.beads.views
COMPILE::JS
{
var outerWidth:Number = window.outerWidth;
+ var top:Number = (window.pageYOffset ||
document.documentElement.scrollTop) - (document.documentElement.clientTop ||
0);
// Desktop width size
if(outerWidth >
ResponsiveSizes.DESKTOP_BREAKPOINT)
{
- var origin:Point = new Point(0,
button.y+button.height);
+ var origin:Point = new Point(0,
button.y + button.height - top);
var relocated:Point =
PointUtils.localToGlobal(origin,_strand);
// comboList.x = relocated.x;
// comboList.y = relocated.y;
_list.positioner.style["left"] =
relocated.x + "px";
_list.positioner.style["top"] =
relocated.y + "px";
+ _list.width = _textinput.width +
_button.width;
}
else
{
_list.positioner.style["left"] = "50%";
_list.positioner.style["top"] =
"calc(100% - 10px)";
+ // _list.positioner.style["width"] =
"initial";
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
index bfc42c5..8ee5659 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
@@ -31,10 +31,10 @@ $combobox-button-yoffset: calc(50% -
#{$combobox-button-size/2})
display: inline-flex
.jewel.textinput
- width: $combobox-input-width
+ // width: $combobox-input-width
.jewel.button
- width: $combobox-button-width
+ // width: $combobox-button-width
&::before
margin: 0
padding: 0
@@ -111,7 +111,8 @@ $combobox-item-min-heigh: 34px
touch-action: none
box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7) !important
- width: $combobox-input-width + $combobox-button-width
+ // width: $combobox-input-width + $combobox-button-width
+ max-height: $combobox-item-min-heigh * 5
opacity: 0
&.open
@@ -128,15 +129,19 @@ $combobox-item-min-heigh: 34px
@media (max-width: $tablet)
.combobox-popup
.jewel.list
- width: calc(100% - #{2*$combobox-popup-margin-offset})
+ width: 98% !important
@media (min-width: $tablet) and (max-width: $desktop)
.combobox-popup
.jewel.list
- width: calc(100% - #{30*$combobox-popup-margin-offset})
+ width: 70% !important
+
@media (max-width: $desktop)
+ .combobox-popup
+ .jewel.list
+ max-height: ( $combobox-item-min-heigh + 14 ) * 5 !important
.jewel.item
- height: $combobox-item-min-heigh + 14 //this should match
$item-min-heigh in _itemrenderer.sass
+ height: $combobox-item-min-heigh + 14 !important //this should match
$item-min-heigh in _itemrenderer.sass
@media (min-width: $desktop)
.combobox-popup
