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 d316e18 styles to make DropDownList looks good
d316e18 is described below
commit d316e187d1a758ea2ad99148fcc4bc4d06fa230e
Author: Carlos Rovira <[email protected]>
AuthorDate: Tue Aug 28 00:59:32 2018 +0200
styles to make DropDownList looks good
---
.../src/main/royale/models/MainNavigationModel.as | 2 +-
.../projects/Jewel/src/main/resources/defaults.css | 22 ++++-
.../royale/org/apache/royale/jewel/DropDownList.as | 14 +--
.../Jewel/src/main/sass/components/_combobox.sass | 3 +-
.../src/main/sass/components/_dropdownlist.sass | 25 ++++-
.../Jewel/src/main/sass/components/_textinput.sass | 2 +-
.../JewelTheme/src/main/resources/defaults.css | 45 ++-------
.../sass/components-primary/_dropdownlist.sass | 106 ++++++++++++---------
8 files changed, 119 insertions(+), 100 deletions(-)
diff --git
a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
index 39097a3..6365e15 100644
--- a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
@@ -29,7 +29,7 @@ package models
new NavigationLinkVO("Button", "button_panel",
MaterialIconType.CROP_7_5),
new NavigationLinkVO("NumericStepper", "numericstepper_panel",
MaterialIconType.UNFOLD_MORE),
new NavigationLinkVO("Date Components", "datecomponents_panel",
MaterialIconType.DATE_RANGE),
- new NavigationLinkVO("DropDownList", "dropdownlist_panel",
MaterialIconType.CREDIT_CARD),
+ new NavigationLinkVO("DropDownList/ComboBox",
"dropdownlist_panel", MaterialIconType.CREDIT_CARD),
new NavigationLinkVO("CheckBox", "checkbox_panel",
MaterialIconType.CHECK_BOX),
new NavigationLinkVO("Icon", "miscelanea_panel",
MaterialIconType.FACE),
new NavigationLinkVO("Label", "label_panel",
MaterialIconType.LABEL),
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 393a2b3..d88aed4 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -256,6 +256,9 @@ j|ControlBar {
.jewel.combobox .jewel.textinput {
width: 190px;
}
+.jewel.combobox .jewel.button {
+ width: 2.8em;
+}
.jewel.combobox .jewel.button::before {
margin: 0;
padding: 0;
@@ -516,6 +519,20 @@ j|DateField {
touch-action: pan-y;
}
+.jewel.dropdownlist {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ margin: 0;
+ padding: 0.68em 1.12em;
+ cursor: pointer;
+ display: inline-flex;
+ line-height: normal !important;
+ outline: none;
+}
+
j|DropDownList {
IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.DropDownListView");
IBeadModel:
ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel");
@@ -530,11 +547,6 @@ j|DropDownList {
IBeadController:
ClassReference("org.apache.royale.jewel.beads.controllers.DropDownListController");
IPopUp:
ClassReference("org.apache.royale.jewel.supportClasses.dropdownlist.DropDownListList");
}
-
- j|DropDownListList {
- IBeadModel:
ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel");
- IItemRendererClassFactory:
ClassReference("org.apache.royale.core.ItemRendererClassFactory");
- }
}
.fonticon.size-18 {
font-size: 18px;
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as
index ff7e499..aa9d10e 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as
@@ -90,7 +90,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.3
*/
public function get prompt():String
{
@@ -290,7 +290,7 @@ package org.apache.royale.jewel
addElementToWrapper(this, 'select');
(element as HTMLSelectElement).size = 1;
- //goog.events.listen(element, 'change', changeHandler);
+ goog.events.listen(element, 'change', changeHandler);
positioner = element;
return element;
@@ -299,10 +299,10 @@ package org.apache.royale.jewel
/**
* @royaleignorecoercion HTMLSelectElement
*/
- // COMPILE::JS
- // protected function changeHandler(event:Event):void
- // {
- // model.selectedIndex = (element as
HTMLSelectElement).selectedIndex;
- // }
+ COMPILE::JS
+ protected function changeHandler(event:Event):void
+ {
+ model.selectedIndex = (element as HTMLSelectElement).selectedIndex;
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
index 77cafcd..9fcca79 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
@@ -20,6 +20,7 @@
// Jewel ComboBox
// ComboBox variables
+$combobox-button-width: 2.8em
$combobox-button-size: 22px
$combobox-input-width: 190px
$combobox-button-xoffset: calc(50% - #{$combobox-button-size/2})
@@ -32,7 +33,7 @@ $combobox-button-yoffset: calc(50% -
#{$combobox-button-size/2})
width: $combobox-input-width
.jewel.button
-
+ width: $combobox-button-width
&::before
margin: 0
padding: 0
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
b/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
index af06064..b757cd9 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
@@ -20,6 +20,25 @@
// Jewel DropDownList
// DropDownList variables
+$dropdownlist-margin: 0 !default
+$dropdownlist-padding-vertical: .68em !default
+$dropdownlist-padding-horizontal: 1.12em !default
+$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
+
+ cursor: pointer
+ display: inline-flex
+
+ line-height: normal !important
+ outline: none
+
j|DropDownList
IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.DropDownListView")
IBeadModel:
ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
@@ -40,10 +59,10 @@ j|DropDownList
// font-size: 11px
// font-family: Arial
- j|DropDownListList
- IBeadModel:
ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel")
+ // j|DropDownListList
+ // IBeadModel:
ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel")
//--- IDataProviderItemRendererMapper:
ClassReference("org.apache.royale.html.beads.TextItemRendererFactoryForArrayData")
- IItemRendererClassFactory:
ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+ // IItemRendererClassFactory:
ClassReference("org.apache.royale.core.ItemRendererClassFactory")
//--- IItemRenderer:
ClassReference("org.apache.royale.core.supportClasses.StringItemRenderer")
//--- iBackgroundBead:
ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
//--- iBorderBead:
ClassReference('org.apache.royale.html.beads.SingleLineBorderBead')
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index e7e35a4..188f3cd 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -32,7 +32,7 @@ $textinput-padding-horizontal: 1.12em !default
input
+appear(none)
margin: $textinput-margin
- padding: $textinput-padding-vertical
$textinput-padding-horizontal
+ padding: $textinput-padding-vertical
$textinput-padding-horizontal
max-width: 100%
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 2009f66..a7521f6 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -370,45 +370,18 @@ j|Card {
}
.jewel.dropdownlist {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
+ 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-repeat: no-repeat;
border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 1em;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.dropdownlist:hover, .jewel.dropdownlist:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.dropdownlist:active, .jewel.dropdownlist:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ border-radius: 0.25rem;
}
.jewel.dropdownlist:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
-}
-.jewel.dropdownlist[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: 400;
- text-shadow: unset;
+ border: 1px solid #0f88d1;
}
.fonticon.dark {
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 82a80a7..fc8ac9c 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
@@ -20,60 +20,74 @@
// Jewel DropDownList
// DropDownList variables
-$textbutton-margin: 0 !default
-$textbutton-padding: 10px 16px !default
-$textbutton-min-height: 34px !default
-$textbutton-min-width: 74px !default
+$dropdownlist-border-radius: $border-radius
-$textbutton-border-radius: 3px
+// =dropdownlist-theme($dropdownlist-color, $text-color)
+
+// // +jewel-bg-border("normal", $dropdownlist-color,
$dropdownlist-border-radius)
-=textbutton-theme($textbutton-color, $text-color)
- cursor: pointer
- display: inline-block
+// // @if $transitions-enable
+// // transition:
+// // duration: $transition-duration
+// // timing-function: $transition-timing
- margin: $textbutton-margin //1rem
- padding: $textbutton-padding //.938em 1.875em
+// font:
+// family: $font-stack
+// size: $font-size
+// // weight: bold
+// color: $text-color
+// text:
+// // transform: uppercase
+// weight: $font-weight-normal
+// decoration: none
+// @if not $flat and $text-color == $font-theme-color
+// text:
+// shadow: 0 -1px 0 rgba(darken($dropdownlist-color, 30%), .7) //0
.063em
- min-width: $textbutton-min-width
- min-height: $textbutton-min-height
+// // &:hover, &:hover:focus
+// // +jewel-bg-border("hover", $dropdownlist-color)
- +jewel-bg-border("normal", $textbutton-color, $textbutton-border-radius)
+// // &:active, &:active:focus
+// // +jewel-bg-border("active", $dropdownlist-color)
- @if $transitions-enable
- transition:
- duration: $transition-duration
- timing-function: $transition-timing
+// &:focus
+// outline: none
+// // +jewel-bg-border("focus", $dropdownlist-color)
+
+// &[disabled]
+// cursor: unset
+// // +jewel-bg-border("disabled", $dropdownlist-color)
+// color: $disabled-font-color
+// // font:
+// // weight: $font-weight-normal
+// // text:
+// // shadow: unset
- font:
- family: $font-stack
- size: $font-size
- weight: bold
- color: $text-color
- text:
- transform: uppercase
- decoration: none
- @if not $flat and $text-color == $font-theme-color
- text:
- shadow: 0 -1px 0 rgba(darken($textbutton-color, 30%), .7) //0
.063em
+.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-repeat: no-repeat
+ border: 1px solid darken($default-color, 15%)
+ border-radius: $dropdownlist-border-radius
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $textbutton-color)
+ // &::before
+
+ // &::after
+ // background-size: 66%
+ // 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='#{$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>") no-r [...]
- &:active, &:active:focus
- +jewel-bg-border("active", $textbutton-color)
&:focus
- outline: none
- +jewel-bg-border("focus", $textbutton-color)
-
- &[disabled]
- cursor: unset
- +jewel-bg-border("disabled", $textbutton-color)
- color: $disabled-font-color
- font:
- weight: $font-weight-normal
- text:
- shadow: unset
-
-.jewel.dropdownlist
- +textbutton-theme($default-color, $default-font-color)
\ No newline at end of file
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
\ No newline at end of file
