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 2019/02/18 21:16:59 UTC
[royale-asjs] branch develop updated: jewel datechooser: Disabled
styles
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 8f0eb01 jewel datechooser: Disabled styles
8f0eb01 is described below
commit 8f0eb0122c3238087a62ecec4847e6eb516b2193
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Feb 18 22:16:51 2019 +0100
jewel datechooser: Disabled styles
---
.../src/main/royale/DateComponentsPlayGround.mxml | 6 ++
.../src/main/sass/components/_datechooser.sass | 2 +-
.../JewelTheme/src/main/resources/defaults.css | 45 ++++++++++--
.../main/sass/components-primary/_datechooser.sass | 82 +++++++++++++++-------
.../src/main/sass/components-primary/_table.sass | 4 +-
5 files changed, 105 insertions(+), 34 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
index bfa1923..4ba2927 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
@@ -165,6 +165,12 @@ limitations under the License.
</j:beads>
</j:DateField>
+ <html:H3 text="Jewel DateChooser Disabled"/>
+ <j:DateChooser>
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:DateChooser>
</j:Card>
</j:GridCell>
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
index f3c818d..fcc0c11 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
@@ -69,7 +69,7 @@ $datechooser-tableitem-size: 38px
padding: 2px
width: $datechooser-tableitem-size
height: $datechooser-tableitem-size
-
+
.calendar
&.item
padding: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 7599844..90710ee 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -300,6 +300,11 @@ j|Card {
border: none;
box-shadow: none;
}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
border-bottom: 1px solid #d9d9d9;
}
@@ -322,16 +327,42 @@ j|Card {
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' 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(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.482210 [...]
}
-.jewel.datechooser .jewel.table .jewel.tableheadercell {
- background: white;
- box-shadow: none;
- border-left: 0px;
-}
.jewel.datechooser .jewel.table .jewel.tablecell {
border-top: 0px;
border-left: 0px;
padding: 4px;
}
+.jewel.datechooser[disabled] {
+ pointer-events: none;
+}
+.jewel.datechooser[disabled] .jewel.table {
+ color: silver;
+ text-shadow: unset;
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+}
+.jewel.datechooser[disabled] .jewel.table .jewel.button {
+ color: silver;
+ text-shadow: unset;
+ font-weight: normal;
+}
+.jewel.datechooser[disabled] .jewel.table .jewel.tableheadercell {
+ background: none;
+ color: silver;
+ text-shadow: unset;
+}
+.jewel.datechooser[disabled] .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser[disabled] .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser[disabled] .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' 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(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.482210 [...]
+}
+.jewel.datechooser[disabled] .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' 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(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.482210 [...]
+}
+.jewel.datechooser[disabled] .jewel.tableitem.selected, .jewel.datechooser[disabled] .jewel.tableitem.selectable:active {
+ background: #cccccc;
+}
.calendar.item {
font-size: 1em;
@@ -871,11 +902,11 @@ j|FormItem {
.jewel.tableitem.hovered:hover {
color: #FFFFFF;
- background: #3CADF1 !important;
+ background: #3CADF1;
}
.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
color: #FFFFFF;
- background: #24a3ef !important;
+ background: #24a3ef;
}
a:link {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
index 8c40a81..edc9df1 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
@@ -38,29 +38,6 @@ $datechooser-buttons-border-radius: 50%
border: none
box-shadow: none
- .jewel.tableheadercell.buttonsRow
- border-bottom: 1px solid $default-color
-
- .prevMonthButton, .nextMonthButton
- border-radius: $datechooser-buttons-border-radius
- color: transparent
- &:hover
- background: lighten($default-color, 10%)
- &:active
- background: lighten($default-color, 5%)
-
- .prevMonthButton::before, .nextMonthButton::before
-
- .prevMonthButton::after, .nextMonthButton::after
- background-size: 40%
-
- .prevMonthButton::after
- background: encodeSVG("<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196 [...]
-
-
- .nextMonthButton::after
- background: encodeSVG("<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196 [...]
-
.jewel.tableheadercell
@if $flat
background: lighten($default-color, 20%)
@@ -68,12 +45,69 @@ $datechooser-buttons-border-radius: 50%
background: lighten($default-color, 20%)
box-shadow: none
border-left: 0px
-
+
+ &.buttonsRow
+ border-bottom: 1px solid $default-color
+
+ .prevMonthButton, .nextMonthButton
+ border-radius: $datechooser-buttons-border-radius
+ color: transparent
+ &:hover
+ background: lighten($default-color, 10%)
+ &:active
+ background: lighten($default-color, 5%)
+
+ .prevMonthButton::before, .nextMonthButton::before
+
+ .prevMonthButton::after, .nextMonthButton::after
+ background-size: 40%
+
+ .prevMonthButton::after
+ background: encodeSVG("<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14. [...]
+ .nextMonthButton::after
+ background: encodeSVG("<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14. [...]
+
.jewel.tablecell
border-top: 0px
border-left: 0px
padding: 4px
+ &[disabled]
+ pointer-events: none
+ .jewel.table
+ color: $disabled-font-color
+ text:
+ shadow: unset
+ @if $flat
+ background: $disabled-color
+ border: 0px solid
+ @else
+ background: $disabled-color
+ border: 1px solid $disabled-border-color
+
+ .jewel.button
+ color: $disabled-font-color
+ text:
+ shadow: unset
+ font-weight: normal
+
+ .jewel.tableheadercell
+ background: none
+ color: $disabled-font-color
+ text:
+ shadow: unset
+
+ &.buttonsRow
+ .prevMonthButton::after, .nextMonthButton::after
+ background-size: 40%
+ .prevMonthButton::after
+ background: encodeSVG("<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 [...]
+ .nextMonthButton::after
+ background: encodeSVG("<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 [...]
+
+ .jewel.tableitem
+ &.selected, &.selectable:active
+ background: #{darken($disabled-color, 15%)}
.calendar
&.item
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
index a913245..b17204b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
@@ -124,8 +124,8 @@ $table-border-radius: $border-radius
&.hovered:hover
color: $font-theme-color
- background: $primary-color !important
+ background: $primary-color
&.selected, &.selectable:active
color: $font-theme-color
- background: darken($primary-color, 5%) !important
+ background: darken($primary-color, 5%)