You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2016/12/19 02:17:54 UTC
[06/50] git commit: [flex-asjs] [refs/heads/feature/mdl] - More icons,
and new card example
More icons, and new card example
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/bc10559a
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/bc10559a
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/bc10559a
Branch: refs/heads/feature/mdl
Commit: bc10559afd08d637d582247d407cbf498c56f680
Parents: e27b6d0
Author: Carlos Rovira <ca...@apache.org>
Authored: Sun Dec 11 21:54:28 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Sun Dec 11 21:54:28 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/Cards.mxml | 25 ++++++-
.../src/main/resources/mdl-styles.css | 31 +++++++++
.../beads/materialIcons/MaterialIconEvent.as | 72 ++++++++++++++++++++
.../beads/materialIcons/MaterialIconShare.as | 72 ++++++++++++++++++++
.../mdl/beads/materialIcons/MaterialIconStar.as | 2 +-
.../beads/materialIcons/MaterialIconsType.as | 2 +
.../flex/mdl/supportClasses/MaterialIconBase.as | 60 ++++++++++++++--
.../src/main/resources/mdl-manifest.xml | 2 +
8 files changed, 257 insertions(+), 9 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml
index df0763e..98c460d 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml
@@ -42,7 +42,9 @@ limitations under the License.
</mdl:CardActions>
<mdl:CardMenu>
<mdl:Button icon="true" ripple="true">
- <i class="material-icons">share</i>
+ <js:beads>
+ <mdl:MaterialIconShare/>
+ </js:beads>
</mdl:Button>
</mdl:CardMenu>
</mdl:Card>
@@ -67,6 +69,27 @@ limitations under the License.
<js:Span text="Image.jpg" style="color: #fff; font-size: 14px; font-weight: 500;"/>
</mdl:CardActions>
</mdl:Card>
+
+ <mdl:Card className="demo-card-event" shadow="2">
+ <mdl:CardTitle expand="true">
+ <mdl:CardTitleText>
+ <js:beads>
+ <js:InnerHTML>
+ <![CDATA[
+ <h4 class="mdl-card__title_h4">Featured event:<br>May 24, 2016<br>7-11pm</h4>
+ ]]>
+ </js:InnerHTML>
+ </js:beads>
+ </mdl:CardTitleText>
+ </mdl:CardTitle>
+ <mdl:CardActions border="true">
+ <js:beads>
+ <mdl:MaterialIconEvent/>
+ </js:beads>
+ <mdl:Button colored="true" ripple="true" text="Add to Calendar"/>
+ <mdl:Spacer/>
+ </mdl:CardActions>
+ </mdl:Card>
</mdl:Grid>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
index d473445..b9b7831 100644
--- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
@@ -41,6 +41,7 @@ js|Image
IBeadView: ClassReference("org.apache.flex.html.beads.ImageView");
}
+/* Lists */
.actorNameListItemRenderer
{
width: 300px;
@@ -81,6 +82,7 @@ js|Image
color: white;
}
+/* card wide */
.demo-card-wide.mdl-card {
width: 512px;
}
@@ -93,6 +95,7 @@ js|Image
color: #fff;
}
+/* card square */
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
@@ -103,6 +106,34 @@ js|Image
background: url('assets/dog.png') bottom right 15% no-repeat #46B6AC;
}
+/* card event */
+.demo-card-event.mdl-card {
+ width: 256px;
+ height: 256px;
+ background: #3E4EB8;
+}
+.demo-card-event > .mdl-card__actions {
+ border-color: rgba(255, 255, 255, 0.2);
+}
+.demo-card-event > .mdl-card__title {
+ align-items: flex-start;
+}
+.demo-card-event > .mdl-card__title > .mdl-card__title_h4 {
+ margin-top: 0;
+}
+.demo-card-event > .mdl-card__actions {
+ display: flex;
+ box-sizing:border-box;
+ align-items: center;
+}
+.demo-card-event > .mdl-card__actions > .material-icons {
+ padding-right: 10px;
+}
+.demo-card-event > .mdl-card__title,
+.demo-card-event > .mdl-card__actions,
+.demo-card-event > .mdl-card__actions > .mdl-button {
+ color: #fff;
+}
.demo-grid .mdl-cell {
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconEvent.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconEvent.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconEvent.as
new file mode 100644
index 0000000..34bf8fc
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconEvent.as
@@ -0,0 +1,72 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.flex.mdl.beads.materialIcons
+{
+ import org.apache.flex.core.IBead;
+ import org.apache.flex.core.IStrand;
+ import org.apache.flex.core.UIBase;
+ import org.apache.flex.mdl.supportClasses.MaterialIconBase;
+
+ /**
+ * The MaterialIconEvent bead class is a specialty bead that add "star" icon
+ * to component taken from "material-icons"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class MaterialIconEvent extends MaterialIconBase implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function MaterialIconEvent()
+ {
+ super();
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @flexjsignorecoercion HTMLElement
+ *
+ * @param value
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::JS
+ {
+ var host:UIBase = value as UIBase;
+ var htmlElement:HTMLElement = host.element as HTMLElement;
+
+ materialIcon.text = MaterialIconsType.EVENT;
+
+ htmlElement.appendChild(element);
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconShare.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconShare.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconShare.as
new file mode 100644
index 0000000..76b027a
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconShare.as
@@ -0,0 +1,72 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.flex.mdl.beads.materialIcons
+{
+ import org.apache.flex.core.IBead;
+ import org.apache.flex.core.IStrand;
+ import org.apache.flex.core.UIBase;
+ import org.apache.flex.mdl.supportClasses.MaterialIconBase;
+
+ /**
+ * The MaterialIconShare bead class is a specialty bead that add "add" icon
+ * to component taken from "material-icons"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class MaterialIconShare extends MaterialIconBase implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function MaterialIconShare()
+ {
+ super();
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @flexjsignorecoercion HTMLElement
+ *
+ * @param value
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::JS
+ {
+ var host:UIBase = value as UIBase;
+ var htmlElement:HTMLElement = host.element as HTMLElement;
+
+ materialIcon.text = MaterialIconsType.SHARE;
+
+ htmlElement.appendChild(element);
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as
index 9ebfa26..ae52548 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as
@@ -24,7 +24,7 @@ package org.apache.flex.mdl.beads.materialIcons
import org.apache.flex.mdl.supportClasses.MaterialIconBase;
/**
- * The MaterialMaterialIconStarIconPerson bead class is a specialty bead that add "star" icon
+ * The MaterialIconStar bead class is a specialty bead that add "star" icon
* to component taken from "material-icons"
*
* @langversion 3.0
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as
index 026cf9f..fd92da3 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as
@@ -24,5 +24,7 @@ package org.apache.flex.mdl.beads.materialIcons
public static const ADD:String = "add";
public static const PERSON:String = "person";
public static const STAR:String = "star";
+ public static const SHARE:String = "share";
+ public static const EVENT:String = "event";
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as
index fd80bcf..70e2092 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as
@@ -58,22 +58,68 @@ package org.apache.flex.mdl.supportClasses
return materialIcon.element as HTMLElement;
}
- private var _md48:Boolean;
-
- public function get md48():Boolean
+ private var _size:Number = 24;
+ /**
+ * Although the icons in the font can be scaled to any size,
+ * in accordance with material design icons guidelines,
+ * we recommend them to be shown in either 18, 24, 36 or 48px.
+ * The default being 24px.
+ */
+ public function get size():Number
{
- return _md48;
+ return _size;
}
/**
* Activate "md-48" class selector.
*/
- public function set md48(value:Boolean):void
+ public function set size(value:Number):void
+ {
+ COMPILE::JS
+ {
+ element.classList.remove("md-" + _size);
+ }
+
+ _size = value;
+
+ COMPILE::JS
+ {
+ element.classList.add("md-" + _size);
+ }
+ }
+
+ private var _dark:Boolean;
+ /**
+ * Activate "mdl-dark" class selector, for use in list item
+ */
+ public function get dark():Boolean
+ {
+ return _dark;
+ }
+ public function set dark(value:Boolean):void
+ {
+ _dark = value;
+
+ COMPILE::JS
+ {
+ element.classList.toggle("mdl-dark", _dark);
+ }
+ }
+
+ private var _light:Boolean;
+ /**
+ * Activate "mdl-light" class selector, for use in list item
+ */
+ public function get light():Boolean
+ {
+ return _light;
+ }
+ public function set light(value:Boolean):void
{
- _md48 = value;
+ _light = value;
COMPILE::JS
{
- element.classList.toggle("md-48", _md48);
+ element.classList.toggle("mdl-light", _light);
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
index d831714..19820c4 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -75,6 +75,8 @@
<component id="MaterialIconAdd" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconAdd"/>
<component id="MaterialIconPerson" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconPerson"/>
<component id="MaterialIconStar" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconStar"/>
+ <component id="MaterialIconShare" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconShare"/>
+ <component id="MaterialIconEvent" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconEvent"/>
<component id="ContactChip" class="org.apache.flex.mdl.beads.ContactChip"/>
<component id="ContactImageChip" class="org.apache.flex.mdl.beads.ContactImageChip"/>
<component id="Tooltip" class="org.apache.flex.mdl.beads.Tooltip"/>