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 2018/09/11 21:24:57 UTC
[royale-asjs] branch develop updated: - fix dropdownlist arrow to
reposition correctly on size changes - make item renderer on mobile more
tall to accomodate to fingers
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 3883fd6 - fix dropdownlist arrow to reposition correctly on size changes - make item renderer on mobile more tall to accomodate to fingers
3883fd6 is described below
commit 3883fd61c0ba4a689374211a595a71955d1d2828
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Sep 11 23:24:52 2018 +0200
- fix dropdownlist arrow to reposition correctly on size changes
- make item renderer on mobile more tall to accomodate to fingers
---
.../projects/Jewel/src/main/resources/defaults.css | 9 ++++++++-
.../Jewel/src/main/sass/components/_combobox.sass | 3 +++
.../src/main/sass/components/_dropdownlist.sass | 21 ++++++++++++---------
.../JewelTheme/src/main/resources/defaults.css | 6 ++----
.../main/sass/components-primary/_dropdownlist.sass | 7 +++----
5 files changed, 28 insertions(+), 18 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index f474e5d..6de9cda 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -350,6 +350,11 @@ j|ComboBox {
width: calc(100% - 300px);
}
}
+@media (max-width: 992px) {
+ .jewel.item {
+ height: 48px;
+ }
+}
@media (min-width: 992px) {
.combobox-popup::before {
background-color: rgba(0, 0, 0, 0);
@@ -627,8 +632,10 @@ j|DateField {
-o-appearance: none;
-ms-appearance: none;
appearance: none;
+ width: 200px;
+ height: 38px;
margin: 0;
- padding: 0.68em 1.12em;
+ padding: 0.68em 2.38em 0.68em 1.12em;
cursor: pointer;
display: inline-flex;
line-height: normal !important;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
index de88fca..bfc42c5 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
@@ -134,6 +134,9 @@ $combobox-item-min-heigh: 34px
.combobox-popup
.jewel.list
width: calc(100% - #{30*$combobox-popup-margin-offset})
+@media (max-width: $desktop)
+ .jewel.item
+ height: $combobox-item-min-heigh + 14 //this should match $item-min-heigh in _itemrenderer.sass
@media (min-width: $desktop)
.combobox-popup
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass b/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
index b757cd9..83a3ccb 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
@@ -27,17 +27,20 @@ $dropdownlist-button-size: 22px
$dropdownlist-button-xoffset: calc(50% - #{$combobox-button-size/2})
$dropdownlist-button-yoffset: calc(50% - #{$combobox-button-size/2})
-.jewel.dropdownlist
- +appear(none)
-
- margin: $dropdownlist-margin
- padding: $dropdownlist-padding-vertical $dropdownlist-padding-horizontal
+.jewel
+ &.dropdownlist
+ +appear(none)
- cursor: pointer
- display: inline-flex
+ width: 200px
+ height: 38px
+
+ margin: $dropdownlist-margin
+ padding: $dropdownlist-padding-vertical $dropdownlist-padding-horizontal + 1.26em $dropdownlist-padding-vertical $dropdownlist-padding-horizontal
+ cursor: pointer
+ display: inline-flex
- line-height: normal !important
- outline: none
+ line-height: normal !important
+ outline: none
j|DropDownList
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DropDownListView")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 3c20b8d..9ec295e 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -387,12 +387,10 @@ j|Card {
}
.jewel.dropdownlist {
- width: 200px;
- height: 38px;
background-color: linear-gradient(white, #f3f3f3);
background-image: 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%3 [...]
- background-size: 8%;
- background-position: 170px center;
+ background-size: 1.08em;
+ background-position: right 0.7em center;
background-repeat: no-repeat;
border: 1px solid #b3b3b3;
border-radius: 0.25rem;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
index fc8ac9c..dd3776c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
@@ -65,16 +65,15 @@ $dropdownlist-border-radius: $border-radius
.jewel.dropdownlist
// +dropdownlist-theme($default-color, $default-font-color)
- width: 200px
- height: 38px
+
@if $flat
background: $default-color
border: 0px solid
@else
background-color: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
background-image: 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='#{$primary-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></svg>")
- background-size: 8%
- background-position: 170px center
+ background-size: 1.08em
+ background-position: right .7em center
background-repeat: no-repeat
border: 1px solid darken($default-color, 15%)
border-radius: $dropdownlist-border-radius