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 <[email protected]>
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 & MXML.">
+ html="Jewel is a themeizable set of user interface components for
Apache Royale to quickly build Front-end Applications with AS3 &
MXML.<br>Check <a
href='https://royale.apache.org'>https://royale.apache.org</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"
