royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: jewel styles improvements: - improve cursors in components and fonticons when are alone or used by other component - link colors (visited, hover, active...)
Date Thu, 30 Aug 2018 17:02:35 GMT
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 e456db6  jewel styles improvements: - improve cursors in components and fonticons
when are alone or used by other component - link colors (visited, hover, active...)
e456db6 is described below

commit e456db634b71993b159cbe81858970f6e5548831
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Thu Aug 30 19:02:31 2018 +0200

    jewel styles improvements:
    - improve cursors in components and fonticons when are alone or used by other component
    - link colors (visited, hover, active...)
---
 .../src/main/royale/LabelPlayGround.mxml           |  2 +-
 .../JewelExample/src/main/royale/MainContent.mxml  |  9 ++++++--
 .../src/main/royale/WelcomeSection.mxml            |  2 +-
 .../projects/Jewel/src/main/resources/defaults.css | 25 +++++++++++++++-------
 .../projects/Jewel/src/main/sass/_global.sass      |  3 +++
 .../Jewel/src/main/sass/components/_button.sass    |  5 ++++-
 .../Jewel/src/main/sass/components/_checkbox.sass  |  7 +++---
 .../Jewel/src/main/sass/components/_icons.sass     |  1 +
 .../src/main/sass/components/_itemRenderer.sass    |  9 +++++---
 .../Jewel/src/main/sass/components/_label.sass     |  3 ++-
 .../src/main/sass/components/_radiobutton.sass     |  7 +++---
 .../Jewel/src/main/sass/components/_topappbar.sass |  1 -
 .../JewelTheme/src/main/resources/defaults.css     | 20 +++++++++++++++++
 .../main/sass/components-emphasized/_text.sass}    | 16 +++-----------
 .../src/main/sass/components-primary/_text.sass}   | 18 +++++-----------
 .../src/main/sass/components-secondary/_text.sass} | 22 ++++++++-----------
 .../themes/JewelTheme/src/main/sass/defaults.sass  |  3 +++
 17 files changed, 90 insertions(+), 63 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
index 67635c0..c8b054d 100644
--- a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
@@ -35,7 +35,7 @@ limitations under the License.
 	<j:Card width="350">
 		<html:H3 text="Jewel Label"/>
 		
-		<j:Label id="label" text="This is a Label" click="labelClick(event)"/>
+		<j:Label id="label" text="This is a Label" click="labelClick(event)" className="cursor-pointer"/>
 
 		<j:Label text="This is a multiline label with more text that wraps if container has
set a width"
 				multiline="true"/>
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 22c43b2..985719a 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -41,6 +41,11 @@ limitations under the License.
                 topappbar.fixed = !topappbar.fixed;
                 main.hasTopAppBar = topappbar.fixed;
             }
+
+            private function goToHome():void
+            {
+                main.showContent("welcome_panel");
+            }
         ]]>
     </fx:Script>
 
@@ -57,7 +62,7 @@ limitations under the License.
             <j:ResponsiveDrawer auto="true"/>
         </j:beads>
         <j:DrawerHeader>
-            <j:Image src="assets/apache-royale-jewel-logo-white.svg" height="140"/>
+            <j:Image src="assets/apache-royale-jewel-logo-white.svg" height="140" click="goToHome()"
className="cursor-pointer"/>
         </j:DrawerHeader>
         <j:DrawerContent>
             <j:Navigation change="changeHandler(event)" className="navIconLinkItemRenderer">
@@ -109,7 +114,7 @@ limitations under the License.
     </j:TopAppBar>
 
     <j:ApplicationMainContent id="main" hasTopAppBar="true" className="mainContent">
-        <local:WelcomeSection isActive="true"/>
+        <local:WelcomeSection id="welcome_panel" isActive="true"/>
         <local:AlertPlayGround id="alert_panel"/>
         <local:ButtonPlayGround id="button_panel"/>
         <local:NumericStepperPlayGround id="numericstepper_panel"/>
diff --git a/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml b/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml
index cce9ce0..cca5f67 100644
--- a/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml
+++ b/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml
@@ -37,7 +37,7 @@ limitations under the License.
 
     <j:Label width="400" 
              multiline="true"
-             text="Jewel is a themeizable set of user interface components for Apache Royale
to quickly build Front-end Applications with AS3 &amp; MXML.">
+             html="Jewel is a themeizable set of user interface components for Apache Royale
to quickly build Front-end Applications with AS3 &amp; MXML.&lt;br>Check &lt;a
href='https://royale.apache.org'>https://royale.apache.org&lt;/a>">
         <j:beads>
             <j:SizeControl size="large"/>
             <j:TextAlign align="center"/>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 8087032..dbc87f0 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -40,6 +40,10 @@ button, input, textarea {
   font-size: 100%;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 j|View {
   IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
   IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
@@ -156,7 +160,10 @@ j|Alert {
   text-decoration: none;
 }
 .jewel.button[disabled] {
-  cursor: unset;
+  cursor: default;
+}
+.jewel.button .fonticon {
+  cursor: inherit;
 }
 
 .jewel.card {
@@ -175,8 +182,8 @@ j|Card {
   position: relative;
   margin: 0;
   padding: 0;
-  width: 100%;
   height: 22px;
+  cursor: pointer;
 }
 .jewel.checkbox input {
   -webkit-appearance: none;
@@ -184,7 +191,6 @@ j|Card {
   -o-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  cursor: pointer;
   display: inline-flex;
   margin: 0;
   padding: 0;
@@ -223,7 +229,6 @@ j|Card {
   cursor: unset;
 }
 .jewel.checkbox span {
-  cursor: pointer;
   margin: 0;
   vertical-align: top;
   line-height: 24px;
@@ -548,6 +553,9 @@ j|DropDownList {
     IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.dropdownlist.DropDownListList");
   }
 }
+.fonticon {
+  cursor: default;
+}
 .fonticon.size-18 {
   font-size: 18px;
 }
@@ -574,6 +582,9 @@ j|DropDownList {
 .jewel.item.selectable, .jewel.navigationlink.selectable {
   cursor: pointer;
 }
+.jewel.item .fonticon, .jewel.navigationlink .fonticon {
+  cursor: inherit;
+}
 
 .jewel.navigationlink {
   min-height: 48px;
@@ -588,6 +599,7 @@ j|NavigationLinkItemRenderer {
 }
 
 .jewel.label {
+  cursor: default;
   white-space: nowrap;
 }
 
@@ -2859,8 +2871,8 @@ j|Spinner {
   position: relative;
   margin: 0;
   padding: 0;
-  width: 100%;
   height: 22px;
+  cursor: pointer;
 }
 .jewel.radiobutton input {
   -webkit-appearance: none;
@@ -2868,7 +2880,6 @@ j|Spinner {
   -o-appearance: none;
   -ms-appearance: none;
   appearance: none;
-  cursor: pointer;
   display: inline-flex;
   margin: 0;
   padding: 0;
@@ -2907,7 +2918,6 @@ j|Spinner {
   cursor: unset;
 }
 .jewel.radiobutton span {
-  cursor: pointer;
   margin: 0;
   vertical-align: top;
   line-height: 24px;
@@ -3290,7 +3300,6 @@ j|TitleBar {
   height: 48px;
   outline: none;
   text-decoration: none;
-  cursor: pointer;
   opacity: 1;
 }
 .jewel.topappbarsection button .fonticon {
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index d92aced..782fb2c 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -42,6 +42,9 @@ button::-moz-focus-inner
 button, input, textarea
 	font-size: 100%
 
+.cursor-pointer
+	cursor: pointer
+	
 j|View
 	IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
 	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_button.sass b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
index 0eb7141..4ab510d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_button.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
@@ -50,5 +50,8 @@ $button-padding: 0.68em 1.12em !default
     // &:focus
 
     &[disabled]
-        cursor: unset
+        cursor: default
+
+    .fonticon
+        cursor: inherit
 
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
index be6b7e2..5ce2423 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
@@ -31,13 +31,14 @@ $checkbox-button-yoffset: 0px
 	margin: 0
 	padding: 0
 
-	width: 100%
+	// width: 100%
 	height: $checkbox-button-size
+	cursor: pointer
 
 	// -- INPUT
 	input
 		+appear(none)
-		cursor: pointer
+		// cursor: pointer
 		display: inline-flex
 
 		margin: 0
@@ -85,7 +86,7 @@ $checkbox-button-yoffset: 0px
 
 	// -- LABEL
 	span
-		cursor: pointer
+		// cursor: pointer
 
 		margin: 0
 		vertical-align: top
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_icons.sass b/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
index 67e6072..52ad225 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
@@ -21,6 +21,7 @@
 
 // Icons variables
 .fonticon
+    cursor: default
     &.size-18
         font-size: 18px
     &.size-24
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
index 432d7f4..38a2063 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
@@ -34,12 +34,15 @@ $item-min-height: 34px
 
     &.selectable
         cursor: pointer
-
-.jewel.navigationlink
-    min-height: 48px
+    
+    .fonticon
+        cursor: inherit
     
 j|ListItemRenderer
     IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
 
+.jewel.navigationlink
+    min-height: 48px
+
 j|NavigationLinkItemRenderer
     IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_label.sass b/frameworks/projects/Jewel/src/main/sass/components/_label.sass
index f80fb34..264df89 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_label.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_label.sass
@@ -17,7 +17,8 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-.jewel.label	
+.jewel.label
+	cursor: default
 	white-space: nowrap
 
 .jewel.label.multiline
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
index 999a1e9..aa95a98 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
@@ -31,13 +31,14 @@ $radiobutton-button-yoffset: 0px
 	margin: 0
 	padding: 0
 
-	width: 100%
+	// width: 100%
 	height: $radiobutton-button-size
+	cursor: pointer
 
 	// -- INPUT
 	input
 		+appear(none)
-		cursor: pointer
+		// cursor: pointer
 		display: inline-flex
 
 		margin: 0
@@ -85,7 +86,7 @@ $radiobutton-button-yoffset: 0px
 				
 	// -- LABEL
 	span
-		cursor: pointer
+		// cursor: pointer
 
 		margin: 0
 		vertical-align: top
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
index 8d6a402..89b9aa1 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
@@ -68,7 +68,6 @@ $top-app-bar-button-size: 48px
         height: $top-app-bar-button-size
         outline: none
         text-decoration: none
-        cursor: pointer
         opacity: 1
 
         // &:active, &:active:focus, &:focus
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index a7521f6..7dcafb0 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -685,6 +685,14 @@ j|Card {
   background: #24a3ef;
 }
 
+a:link {
+  color: #3CADF1;
+}
+
+a:active {
+  color: #0f88d1;
+}
+
 .jewel.textinput {
   font-weight: 400;
   color: #808080;
@@ -823,6 +831,18 @@ j|Card {
   color: silver;
 }
 
+a:visited {
+  color: #d64010;
+}
+
+a:hover {
+  color: #EF5A2A;
+}
+
+a:active {
+  color: #f37f59;
+}
+
 .jewel.button.emphasized {
   background: linear-gradient(#98cc50, #7eb435);
   border: 1px solid #638c29;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_icons.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_text.sass
similarity index 82%
copy from frameworks/projects/Jewel/src/main/sass/components/_icons.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_text.sass
index 67e6072..39baff0 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_text.sass
@@ -17,16 +17,6 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-// Jewel Icons
-
-// Icons variables
-.fonticon
-    &.size-18
-        font-size: 18px
-    &.size-24
-        font-size: 24px
-    &.size-36
-        font-size: 36px
-    &.size-48
-        font-size: 48px
-    
+// selected link
+// a:active
+//     color: $emphasized-color
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_icons.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass
similarity index 82%
copy from frameworks/projects/Jewel/src/main/sass/components/_icons.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass
index 67e6072..0fb6f3e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass
@@ -17,16 +17,8 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-// Jewel Icons
-
-// Icons variables
-.fonticon
-    &.size-18
-        font-size: 18px
-    &.size-24
-        font-size: 24px
-    &.size-36
-        font-size: 36px
-    &.size-48
-        font-size: 48px
-    
+// unvisited link
+a:link
+    color: $primary-color
+a:active
+    color: darken($primary-color, 15%)
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_icons.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_text.sass
similarity index 82%
copy from frameworks/projects/Jewel/src/main/sass/components/_icons.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-secondary/_text.sass
index 67e6072..f6b627c 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_text.sass
@@ -17,16 +17,12 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-// Jewel Icons
-
-// Icons variables
-.fonticon
-    &.size-18
-        font-size: 18px
-    &.size-24
-        font-size: 24px
-    &.size-36
-        font-size: 36px
-    &.size-48
-        font-size: 48px
-    
+// visited link
+a:visited
+    color: darken($secondary-color, 10%)
+// mouse over link
+a:hover
+    color: $secondary-color
+// selected link
+a:active
+    color: lighten($secondary-color, 10%)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 1bc15f2..fc41492 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -46,6 +46,7 @@
 @import "components-primary/radiobutton"
 @import "components-primary/slider"
 @import "components-primary/table"
+@import "components-primary/text"
 @import "components-primary/textinput"
 @import "components-primary/titlebar"
 @import "components-primary/topappbar"
@@ -62,6 +63,7 @@
 @import "components-secondary/list"
 @import "components-secondary/radiobutton"
 @import "components-secondary/slider"
+@import "components-secondary/text"
 @import "components-secondary/textinput"
 @import "components-secondary/titlebar"
 
@@ -76,5 +78,6 @@
 @import "components-emphasized/list"
 @import "components-emphasized/radiobutton"
 @import "components-emphasized/slider"
+@import "components-emphasized/text"
 @import "components-emphasized/textinput"
 @import "components-emphasized/titlebar"


Mime
View raw message