flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject git commit: [flex-asjs] [refs/heads/develop] - More icons, and new card example
Date Sun, 11 Dec 2016 20:54:37 GMT
Repository: flex-asjs
Updated Branches:
  refs/heads/develop e27b6d013 -> bc10559af


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/develop
Commit: bc10559afd08d637d582247d407cbf498c56f680
Parents: e27b6d0
Author: Carlos Rovira <carlosrovira@apache.org>
Authored: Sun Dec 11 21:54:28 2016 +0100
Committer: Carlos Rovira <carlosrovira@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"/>


Mime
View raw message