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 0be446f jewel-card: updates to card structure and styles
0be446f is described below
commit 0be446f080fda0133e53333c5c29e2371b75b0cb
Author: Carlos Rovira <[email protected]>
AuthorDate: Thu Feb 20 00:11:59 2020 +0100
jewel-card: updates to card structure and styles
---
.../projects/Jewel/src/main/resources/defaults.css | 22 ++++++-
.../Jewel/src/main/resources/jewel-manifest.xml | 3 +
.../main/royale/org/apache/royale/jewel/Card.as | 64 +++-----------------
.../jewel/supportClasses/card/CardActions.as} | 50 +++++++++-------
.../jewel/supportClasses/card/CardHeader.as} | 50 +++++++++-------
.../supportClasses/card/CardPrimaryContent.as | 70 ++++++++++++++++++++++
.../Jewel/src/main/sass/components/_card.sass | 33 +++++++++-
.../JewelTheme/src/main/resources/defaults.css | 27 ++++++++-
.../src/main/sass/components-primary/_card.sass | 30 ++++++++--
9 files changed, 240 insertions(+), 109 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index a6eb163..aca635a 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -298,9 +298,25 @@ j|ToggleButtonBar {
overflow: hidden;
position: relative;
}
-
-j|Card {
- IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+.jewel.card .cardHeader {
+ width: 100%;
+}
+.jewel.card .cardPrimaryContent {
+ width: 100%;
+ min-height: 152px;
+ position: relative;
+ outline: none;
+ color: inherit;
+ text-decoration: none;
+ overflow: hidden;
+}
+.jewel.card .cardActions {
+ width: 100%;
+ position: relative;
+ outline: none;
+ color: inherit;
+ text-decoration: none;
+ overflow: hidden;
}
.jewel.checkbox {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 4df1ef8..a28baef 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -144,6 +144,9 @@
<component id="Image" class="org.apache.royale.jewel.Image"/>
<component id="Card" class="org.apache.royale.jewel.Card"/>
+ <component id="CardHeader"
class="org.apache.royale.jewel.supportClasses.card.CardHeader"/>
+ <component id="CardPrimaryContent"
class="org.apache.royale.jewel.supportClasses.card.CardPrimaryContent"/>
+ <component id="CardActions"
class="org.apache.royale.jewel.supportClasses.card.CardActions"/>
<component id="DropDownListList"
class="org.apache.royale.jewel.supportClasses.dropdownlist.DropDownListList"/>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
index a24216e..1c95d69 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
@@ -18,17 +18,19 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.jewel.Group;
+ import org.apache.royale.jewel.VGroup;
/**
* The Card class is a container that surronds other components.
+ * Card has a default "panel" style and can compose other containers
like
+ * CardHeader, CardPrimaryContent and CardActions
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class Card extends Group
+ public class Card extends VGroup
{
/**
* constructor.
@@ -43,60 +45,10 @@ package org.apache.royale.jewel
super();
typeNames = "jewel card";
+
+ // Add basic card styles by default when use Card alone
+ // if Card composes CardPrimaryContent, then remove it
for more complex structure and styles
+ className = "simple";
}
-
- // public function get gap():Boolean
- // {
- // return layout.gap;
- // }
-
- // public function set gap(value:Boolean):void
- // {
- // typeNames = StringUtil.removeWord(typeNames, " gap");
- // typeNames += " gap";
-
- // COMPILE::JS
- // {
- // if (parent)
- // setClassName(computeFinalClassNames());
- // }
-
- // layout.gap = value;
- // }
-
- //protected var _shadow:Number = 0;
- /**
- * A boolean flag to activate "shadow-Xdp" effect selector.
- * Assigns variable shadow depths (0, 2, 3, 4, 6, 8, or 16) to
card
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- // public function get shadow():Number
- // {
- // return _shadow;
- // }
-
- // public function set shadow(value:Number):void
- // {
- // if (_shadow != value)
- // {
- // COMPILE::JS
- // {
- // if (value == 2 || value == 3 || value == 4 || value ==
6 || value == 8 || value == 16)
- // {
- // var classVal:String = "shadow-" + _shadow + "dp";
- // classSelectorList.remove(classVal);
-
- // classVal = "shadow-" + value + "dp";
- // classSelectorList.add(classVal);
-
- // _shadow = value;
- // }
- // }
- // }
- // }
}
}
\ No newline at end of file
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardActions.as
similarity index 60%
copy from
frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
copy to
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardActions.as
index fd1cd6c..7cf42d6 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardActions.as
@@ -16,26 +16,36 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.card
+{
+ import org.apache.royale.jewel.HGroup;
-// Jewel Card
+ /**
+ * The CardActions class is a footer for Cards where actions (i.e:
buttons, icons)
+ * use to be located.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public class CardActions extends HGroup
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function CardActions()
+ {
+ super();
-// Card variables
-// $card-width: 320px !default
-// $card-height: 180px !default
+ typeNames = "cardActions";
+ }
-.jewel.card
- font:
- size: $font-size
- weight: 400
-
- @if $dark
- background: lighten($background-color, 10%)
- @else
- background: darken($background-color, 8%)
-
- border: 0px
- border-radius: 10px
- padding: 20px
-
-j|Card
- gap: 3
+
+ }
+}
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as
similarity index 60%
copy from
frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
copy to
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as
index fd1cd6c..59ec482 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardHeader.as
@@ -16,26 +16,36 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.card
+{
+ import org.apache.royale.jewel.HGroup;
-// Jewel Card
+ /**
+ * The CardHeader class is a header for Cards where Title and actions
(i.e: buttons, icons)
+ * can be located.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public class CardHeader extends HGroup
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function CardHeader()
+ {
+ super();
-// Card variables
-// $card-width: 320px !default
-// $card-height: 180px !default
+ typeNames = "cardHeader";
+ }
-.jewel.card
- font:
- size: $font-size
- weight: 400
-
- @if $dark
- background: lighten($background-color, 10%)
- @else
- background: darken($background-color, 8%)
-
- border: 0px
- border-radius: 10px
- padding: 20px
-
-j|Card
- gap: 3
+
+ }
+}
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
new file mode 100644
index 0000000..d7450cb
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/card/CardPrimaryContent.as
@@ -0,0 +1,70 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.card
+{
+ import org.apache.royale.jewel.Card;
+ import org.apache.royale.jewel.VGroup;
+
+ /**
+ * The CardPrimaryContent class is a the main container for Cards.
+ * Adding this container means we want a more complex card structure
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public class CardPrimaryContent extends VGroup
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function CardPrimaryContent()
+ {
+ super();
+
+ typeNames = "cardPrimaryContent";
+ }
+
+ /**
+ * This container means Card structure is complex, so we
remove Card's simple style
+ * that is set by default on the Card
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+
+ if(parent is Card)
+ {
+ var parentCard:Card = parent as Card;
+ parentCard.removeClass("simple");
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_card.sass
b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
index 709dd77..fff2f9d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_card.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
@@ -22,6 +22,7 @@
// Card variables
$card-width: 240px !default
$card-height: 52px !default
+$card-primary-content-minheight: 152px !default
.jewel.card
//flex-direction: column
@@ -34,6 +35,36 @@ $card-height: 52px !default
position: relative
//z-index: 1
+ .cardHeader
+ width: 100%
+
+ .cardPrimaryContent
+ width: 100%
+ min-height: $card-primary-content-minheight
+
+ position: relative
+ outline: none
+ color: inherit
+ text-decoration: none
+ overflow: hidden
+
+ .cardActions
+ width: 100%
+ position: relative
+ outline: none
+ color: inherit
+ text-decoration: none
+ overflow: hidden
+
j|Card
- IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ //IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+
+j|CardHeader
+ //IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
+
+j|CardPrimaryContent
+ //IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+
+j|CardActions
+ //IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 6cf1946..3cfb53c 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -237,9 +237,22 @@ hr {
.jewel.card {
font-size: 1em;
font-weight: 400;
- background: #ebebeb;
- border: 0px;
- border-radius: 10px;
+ background: white;
+ border: 1px solid #d2dadf;
+ border-radius: 0.25rem;
+}
+.jewel.card.simple {
+ padding: 20px;
+}
+.jewel.card .cardHeader {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ padding: 20px;
+}
+.jewel.card .cardPrimaryContent {
+ padding: 20px;
+}
+.jewel.card .cardActions {
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 20px;
}
@@ -247,6 +260,14 @@ j|Card {
gap: 3;
}
+j|CardHeader {
+ gap: 3;
+}
+
+j|CardActions {
+ gap: 3;
+}
+
.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
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 fd1cd6c..3263b65 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
@@ -20,8 +20,6 @@
// Jewel Card
// Card variables
-// $card-width: 320px !default
-// $card-height: 180px !default
.jewel.card
font:
@@ -31,11 +29,31 @@
@if $dark
background: lighten($background-color, 10%)
@else
- background: darken($background-color, 8%)
+ background: lighten($background-color, 10%)
+ border: 1px solid desaturate(lighten($primary-color, 26%), 70%)
+ border-radius: $border-radius
+
+ &.simple
+ padding: 20px
+
+ .cardHeader
+ border-bottom: 1px solid rgba(0,0,0,.1)
+ padding: 20px
- border: 0px
- border-radius: 10px
- padding: 20px
+ .cardPrimaryContent
+ padding: 20px
+
+ .cardActions
+ border-top: 1px solid rgba(0,0,0,.1)
+ padding: 20px
j|Card
gap: 3
+
+j|CardHeader
+ gap: 3
+
+j|CardPrimaryContent
+
+j|CardActions
+ gap: 3
