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 9709a4a jewel dropdownlist: Disabled styles
9709a4a is described below
commit 9709a4ab77e965364cbb7a232d22cc171b68a1e1
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Feb 18 14:44:19 2019 +0100
jewel dropdownlist: Disabled styles
---
.../src/main/royale/DropDownListPlayGround.mxml | 20 ++++++++++++++++++++
.../JewelTheme/src/main/resources/defaults.css | 13 +++++++++++++
.../main/sass/components-primary/_dropdownlist.sass | 17 +++++++++++++++++
3 files changed, 50 insertions(+)
diff --git
a/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
index baf41b9..8f70996 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
@@ -236,6 +236,26 @@ limitations under the License.
</j:Grid>
</j:Card>
</j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1"
phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DropDownList Disabled"/>
+
+ <j:Grid gap="true"
itemsVerticalAlign="itemsCentered">
+ <j:GridCell desktopNumerator="1"
desktopDenominator="3" tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered"
width="290">
+ <j:DropDownList
labelField="label" dataProvider="{listModel.avengers}">
+ <j:beads>
+ <j:Disabled
disabled="{disable_ddl.selected}"/>
+
<j:DropDownListTextPrompt prompt="Select Avengers..."/>
+ </j:beads>
+ </j:DropDownList>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1"
desktopDenominator="3" tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered"
width="290">
+ <j:CheckBox
localId="disable_ddl" text="Disable ComboBox?" selected="true"/>
+ </j:GridCell>
+ </j:Grid>
+ </j:Card>
+ </j:GridCell>
</j:Grid>
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 5a0c28a..469cf74 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -419,6 +419,19 @@ j|Card {
border: 1px solid #b3b3b3;
border-radius: 0.25rem;
}
+.jewel.dropdownlist[disabled] {
+ background-color: #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='%23cccccc'
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 [...]
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.dropdownlist[disabled]::placeholder,
.jewel.dropdownlist[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+.jewel.dropdownlist[disabled] + i {
+ color: silver;
+}
.jewel.dropdownlist:focus {
border: 1px solid #0f88d1;
}
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 8f8c251..96325b8 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
@@ -79,6 +79,23 @@ $dropdownlist-border-radius: $border-radius
border: 1px solid darken($default-color, 15%)
border-radius: $dropdownlist-border-radius
+ &[disabled]
+ @if $flat
+ background: $disabled-color
+ border: 0px solid
+ @else
+ background-color: $disabled-color
+ 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='#{darken($disabled-color, 15%)}' 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>
[...]
+ border: 1px solid $disabled-border-color
+ box-shadow: none
+ color: $disabled-font-color
+
+ &::placeholder, &:-ms-input-placeholder
+ color: $disabled-font-color
+
+ + i
+ color: $disabled-font-color
+
// &::before
// &::after
