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 2020/04/09 21:54:49 UTC
[royale-asjs] branch develop updated: jewel-card: Add CardTitle and
make style names more coherent
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 86c7135 jewel-card: Add CardTitle and make style names more coherent
86c7135 is described below
commit 86c71350bcf94a2743043990df47649def8cf235
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Apr 9 23:54:44 2020 +0200
jewel-card: Add CardTitle and make style names more coherent
---
frameworks/projects/Jewel/src/main/resources/defaults.css | 15 ++++++++++++---
.../projects/Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../royale/jewel/supportClasses/card/CardActions.as | 2 +-
.../apache/royale/jewel/supportClasses/card/CardHeader.as | 2 +-
.../jewel/supportClasses/card/CardPrimaryContent.as | 2 +-
.../supportClasses/card/{CardHeader.as => CardTitle.as} | 12 +++++-------
.../projects/Jewel/src/main/sass/components/_card.sass | 15 ++++++++++++---
.../projects/Jewel/src/main/sass/components/_label.sass | 1 +
.../themes/JewelTheme/src/main/resources/defaults.css | 11 ++++++++---
.../src/main/sass/components-primary/_card.sass | 11 ++++++++---
10 files changed, 50 insertions(+), 22 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 002a235..239406a 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -316,10 +316,18 @@ j|ToggleButtonBar {
min-height: 52px;
position: relative;
}
-.jewel.card .cardHeader {
+.jewel.card .card-header {
width: 100%;
}
-.jewel.card .cardPrimaryContent {
+.jewel.card .card-header .card-title {
+ flex: 1 1 auto;
+ overflow: hidden;
+ text-decoration: inherit;
+ text-overflow: ellipsis;
+ text-transform: inherit;
+ z-index: 1;
+}
+.jewel.card .card-primary-content {
width: 100%;
min-height: 152px;
position: relative;
@@ -328,7 +336,7 @@ j|ToggleButtonBar {
text-decoration: none;
flex: 1 1 auto;
}
-.jewel.card .cardActions {
+.jewel.card .card-actions {
width: 100%;
position: relative;
outline: none;
@@ -991,6 +999,7 @@ j|ImageButton {
}
.jewel.label {
+ -webkit-font-smoothing: antialiased;
cursor: default;
white-space: nowrap;
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 201aca3..b9878f1 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -150,6 +150,7 @@
<component id="Card" class="org.apache.royale.jewel.Card"/>
<component id="CardHeader" class="org.apache.royale.jewel.supportClasses.card.CardHeader"/>
+ <component id="CardTitle" class="org.apache.royale.jewel.supportClasses.card.CardTitle"/>
<component id="CardPrimaryContent" class="org.apache.royale.jewel.supportClasses.card.CardPrimaryContent"/>
<component id="CardActions" class="org.apache.royale.jewel.supportClasses.card.CardActions"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardActions.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardActions.as
index d26a3a7..7410744 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardActions.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardActions.as
@@ -43,7 +43,7 @@ package org.apache.royale.jewel.supportClasses.card
{
super();
- typeNames = "cardActions";
+ typeNames = "card-actions";
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as
index d17ee48..e14e640 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as
@@ -43,7 +43,7 @@ package org.apache.royale.jewel.supportClasses.card
{
super();
- typeNames = "cardHeader";
+ typeNames = "card-header";
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardPrimaryContent.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardPrimaryContent.as
index 08d87ae..9e5c86f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardPrimaryContent.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardPrimaryContent.as
@@ -44,7 +44,7 @@ package org.apache.royale.jewel.supportClasses.card
{
super();
- typeNames = "cardPrimaryContent";
+ typeNames = "card-primary-content";
}
/**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardTitle.as
similarity index 84%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardTitle.as
index d17ee48..4e418b7 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardTitle.as
@@ -18,10 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.supportClasses.card
{
- import org.apache.royale.jewel.HContainer;
+ import org.apache.royale.jewel.Label;
/**
- * The CardHeader class is a header for Cards where Title and actions (i.e: buttons, icons)
+ * The CardTitle class is a header for Cards where Title and actions (i.e: buttons, icons)
* can be located.
*
* @langversion 3.0
@@ -29,7 +29,7 @@ package org.apache.royale.jewel.supportClasses.card
* @playerversion AIR 2.6
* @productversion Royale 0.9.7
*/
- public class CardHeader extends HContainer
+ public class CardTitle extends Label
{
/**
* constructor.
@@ -39,13 +39,11 @@ package org.apache.royale.jewel.supportClasses.card
* @playerversion AIR 2.6
* @productversion Royale 0.9.7
*/
- public function CardHeader()
+ public function CardTitle()
{
super();
- typeNames = "cardHeader";
+ typeNames = "jewel label card-title";
}
-
-
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_card.sass b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
index 5770382..3a4a692 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_card.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
@@ -37,10 +37,19 @@ $card-primary-content-minheight: 152px !default
&.simple
// flex: 1 1 0%
- .cardHeader
+ .card-header
width: 100%
- .cardPrimaryContent
+ .card-title
+ flex: 1 1 auto
+ overflow: hidden
+
+ text-decoration: inherit
+ text-overflow: ellipsis
+ text-transform: inherit
+ z-index: 1
+
+ .card-primary-content
width: 100%
min-height: $card-primary-content-minheight
@@ -51,7 +60,7 @@ $card-primary-content-minheight: 152px !default
flex: 1 1 auto
- .cardActions
+ .card-actions
width: 100%
position: relative
outline: none
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_label.sass b/frameworks/projects/Jewel/src/main/sass/components/_label.sass
index 285f035..58b28d1 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_label.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_label.sass
@@ -20,6 +20,7 @@
.jewel
&.label
+ -webkit-font-smoothing: antialiased
cursor: default
white-space: nowrap
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 3bfc323..e1febce 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -367,14 +367,19 @@ hr {
.jewel.card.simple {
padding: 20px;
}
-.jewel.card .cardHeader {
+.jewel.card .card-header {
border-bottom: 1px solid #d2dadf;
padding: 12px 20px;
}
-.jewel.card .cardPrimaryContent {
+.jewel.card .card-header .card-title {
+ font-size: 1.5em;
+ margin: 0.408rem 0rem;
+ letter-spacing: 0.0125em;
+}
+.jewel.card .card-primary-content {
padding: 20px;
}
-.jewel.card .cardActions {
+.jewel.card .card-actions {
border-top: 1px solid #d2dadf;
padding: 18px 20px;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
index 874dca2..36594ed 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
@@ -39,17 +39,22 @@
&.simple
padding: 20px
- .cardHeader
+ .card-header
@if $flat
border-bottom: 1px solid transparent
@else
border-bottom: 1px solid desaturate(lighten($primary-color, 26%), 70%)
padding: 12px 20px
- .cardPrimaryContent
+ .card-title
+ font-size: 1.5em
+ margin: 0.408rem 0rem
+ letter-spacing: 0.0125em
+
+ .card-primary-content
padding: 20px
- .cardActions
+ .card-actions
@if $flat
border-top: 1px solid transparent
@else