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:51:06 UTC

[royale-asjs] branch develop updated: jewel-list: 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 9d93da0  jewel-list: disabled styles
9d93da0 is described below

commit 9d93da0b26daf026bb0a717ef8baada309cd77e9
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Feb 18 22:50:58 2019 +0100

    jewel-list: disabled styles
---
 .../TourDeJewel/src/main/royale/ListPlayGround.mxml  | 15 +++++++++++++++
 .../JewelTheme/src/main/resources/defaults.css       | 16 ++++++++++++++--
 .../main/sass/components-primary/_datechooser.sass   |  3 ++-
 .../main/sass/components-primary/_itemRenderer.sass  |  4 ++--
 .../src/main/sass/components-primary/_list.sass      | 20 ++++++++++++++++++++
 5 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/examples/royale/TourDeJewel/src/main/royale/ListPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ListPlayGround.mxml
index f9ab9db..7aef21b 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ListPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ListPlayGround.mxml
@@ -220,4 +220,19 @@ limitations under the License.
 		</j:GridCell>
 	</j:Grid>
 
+	<j:Grid gap="true">
+		<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+			<j:Card>
+				<html:H3 text="Jewel List Disabled"/>
+				<j:List width="200" height="300" className="iconListItemRenderer" labelField="label" selectedIndex="1">
+					<j:beads>
+						<js:ConstantBinding sourceID="listModel" sourcePropertyName="iconListData" destinationPropertyName="dataProvider" />
+						<j:Disabled/>
+					</j:beads>
+				</j:List>
+			</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 90710ee..dcc71d5 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -555,11 +555,11 @@ j|FormItem {
 }
 .jewel.item.hovered:hover {
   color: #FFFFFF;
-  background: #3CADF1 !important;
+  background: #3CADF1;
 }
 .jewel.item.selected, .jewel.item.selectable:active {
   color: #FFFFFF;
-  background: #24a3ef !important;
+  background: #24a3ef;
 }
 
 .jewel.label {
@@ -573,6 +573,18 @@ j|FormItem {
   box-shadow: inset 0 1px 0 white;
   border-radius: 3px;
 }
+.jewel.list[disabled] {
+  pointer-events: none;
+  color: silver;
+  color-text-shadow: unset;
+  font-weight: normal;
+  background: #f3f3f3;
+  border: 1px solid #d9d9d9;
+  box-shadow: none;
+}
+.jewel.list[disabled] .jewel.item.selected, .jewel.list[disabled] .jewel.item.selectable:active {
+  background: #cccccc !important;
+}
 
 .jewel.navigation {
   background-color: #ffffff;
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 edc9df1..e0965a4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
@@ -74,6 +74,7 @@ $datechooser-buttons-border-radius: 50%
 
     &[disabled]
         pointer-events: none
+        
         .jewel.table
             color: $disabled-font-color
             text:
@@ -107,7 +108,7 @@ $datechooser-buttons-border-radius: 50%
         
         .jewel.tableitem
             &.selected, &.selectable:active
-                background: #{darken($disabled-color, 15%)}
+                background: darken($disabled-color, 15%)
 
 .calendar
     &.item
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
index d43e66d..4b6ac72 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
@@ -26,8 +26,8 @@ $itemrenderer-padding: 16px
 
     &.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%)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
index c3ce9cd..e4ebb15 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
@@ -32,6 +32,26 @@ $list-border-radius: 3px
         box-shadow: inset 0 1px 0 lighten($default-color, 20%)
     border-radius: $list-border-radius
 
+    &[disabled]
+        pointer-events: none
+        color: $disabled-font-color
+            text:
+                shadow: unset
+        font-weight: normal
+
+        @if $flat
+            background: $disabled-color
+            border: 0px solid
+        @else
+            background: $disabled-color
+            border: 1px solid $disabled-border-color
+        box-shadow: none
+
+        .jewel.item
+            &.selected, &.selectable:active
+                background: darken($disabled-color, 15%) !important
+                
+
     // &:focus
     //     @if $flat
     //         background: lighten($default-color, 5%)