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/11/12 09:07:26 UTC
[5/6] git commit: [flex-asjs] [refs/heads/feature/mdl] - More Card
examples
More Card examples
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/8a2610f3
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/8a2610f3
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/8a2610f3
Branch: refs/heads/feature/mdl
Commit: 8a2610f3a69da98ef03c484dc94661acb7346f46
Parents: 47aded4
Author: Carlos Rovira <ca...@apache.org>
Authored: Fri Nov 11 14:07:42 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Sat Nov 12 10:06:54 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 78 +++++++++++++------
.../src/main/resources/assets/dog.png | Bin 0 -> 9020 bytes
.../src/main/resources/assets/image_card.jpg | Bin 0 -> 117457 bytes
.../src/main/resources/mdl-styles.css | 12 ++-
4 files changed, 66 insertions(+), 24 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/flex/App.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/App.mxml b/examples/flexjs/MDLExample/src/main/flex/App.mxml
index 783281a..f68673a 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -82,10 +82,6 @@ limitations under the License.
<mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/>
<mdl:RadioButton groupName="g1" text="Red"/>
- <mdl:Slider className="mdlsl_example"/>
-
- <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/>
-
<js:VContainer>
<js:Div text="account_box" className="material-icons" style="color: rgba(0, 0, 0, 0.24);">
<js:beads>
@@ -113,25 +109,61 @@ limitations under the License.
</js:VContainer>
- <mdl:Card width="512" shadow="2">
- <mdl:CardTitle className="cardTitle" style="color: #fff;">
- <js:H2 text="Welcome" className="mdl-card__title-text"/>
- </mdl:CardTitle>
- <mdl:CardSupportingText>
- <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/>
- </mdl:CardSupportingText>
- <mdl:CardActions border="true">
- <mdl:Button text="Get Started" ripple="true" colored="true"/>
- </mdl:CardActions>
- <mdl:CardMenu>
- <mdl:Button icon="true" ripple="true" style="color: #fff;">
- <i class="material-icons">share</i>
- </mdl:Button>
- </mdl:CardMenu>
- </mdl:Card>
-
-
- <!--<mdl:CardMedia>
+ <js:HContainer>
+ <mdl:Card width="512" shadow="2" style="margin:10;">
+ <mdl:CardTitle className="cardTitle">
+ <js:H2 text="Welcome" className="mdl-card__title-text"/>
+ </mdl:CardTitle>
+ <mdl:CardSupportingText>
+ <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/>
+ </mdl:CardSupportingText>
+ <mdl:CardActions border="true">
+ <mdl:Button text="Get Started" ripple="true" colored="true"/>
+ </mdl:CardActions>
+ <mdl:CardMenu>
+ <mdl:Button icon="true" ripple="true" style="color: #fff;">
+ <i class="material-icons">share</i>
+ </mdl:Button>
+ </mdl:CardMenu>
+ </mdl:Card>
+
+ <mdl:Slider className="mdlsl_example"/>
+ <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/>
+
+ <mdl:Card width="320" height="320" shadow="2" style="margin:10;">
+ <mdl:CardTitle className="dogTitle" style="color: #fff;">
+ <js:H2 text="Update" className="mdl-card__title-text"/>
+ </mdl:CardTitle>
+ <mdl:CardSupportingText>
+ <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."/>
+ </mdl:CardSupportingText>
+ <mdl:CardActions border="true">
+ <mdl:Button colored="true" ripple="true" text="View Updates"/>
+ </mdl:CardActions>
+ </mdl:Card>
+
+ <mdl:Card width="256" height="256" shadow="2" style="margin:10;background: url('assets/image_card.jpg') center / cover">
+ <mdl:CardTitle/>
+ <mdl:CardActions style="height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.2);">
+ <js:Span text="Image.jpg" style="color: #fff; font-size: 14px; font-weight: 500;"/>
+ </mdl:CardActions>
+ </mdl:Card>
+ </js:HContainer>
+
+
+ <!--
+ <mdl:Spacer/>
+ <mdl:Button id="demo_menu" icon="true">
+ <i class="material-icons">more_vert</i>
+ </mdl:Button>
+
+ <mdl:Menu ripple="true" dataMdlFor="demo_menu">
+ <mdl:MenuItem text="Some Action"/>
+ <mdl:MenuItem text="Another Action"/>
+ </mdl:Menu>
+
+
+ <mdl:CardMedia>
<js:Image url="assets/Unknown.jpg" height="176"/>
</mdl:CardMedia>-->
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/resources/assets/dog.png
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/assets/dog.png b/examples/flexjs/MDLExample/src/main/resources/assets/dog.png
new file mode 100644
index 0000000..1aace48
Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/assets/dog.png differ
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg b/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg
new file mode 100644
index 0000000..ef94dfd
Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/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 d87e38c..5d5fae4 100644
--- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
@@ -42,10 +42,20 @@ Image
.cardTitle
{
- color: #fff;
+ color: #ffffff;
height: 176px;
background-image:url('assets/Unknown.jpg'); /*center / cover;*/
background-size: cover;
background-position: 50% 50%;
background-repeat: initial initial;
+}
+
+.dogTitle
+{
+ color: #fff;
+ height: 176px;
+ background-image: url('assets/dog.png'); /*bottom right 15% no-repeat #46B6AC*/
+ background-position: right 15% bottom 0%;
+ background-repeat: no-repeat no-repeat;
+ background-color: rgb(70, 182, 172);
}
\ No newline at end of file