Merge branch '0.5.0' of https://github.com/alibaba/weex into 0.5.0

* '0.5.0' of https://github.com/alibaba/weex: * [example] rm hack `margin-bottom:1px` + [doc] Add animation document + [example] add template * [doc] add screenCapture for each ui component Fetch max-width from CSSStyle if width is undefined. This may cause potential issues as max-width is not fully implemented in css-layout. Refer to facebook/react-native#4644 * [example] rm unnecessary config
alibaba · Apr 14, 2016 · 3edbd13 · 3edbd13
2 parents 4f94d47 + 8ae33a7
commit 3edbd13
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 46 deletions.
diff --git a/android/sdk/src/main/java/com/taobao/weex/dom/WXTextDomObject.java b/android/sdk/src/main/java/com/taobao/weex/dom/WXTextDomObject.java
@@ -69,7 +69,9 @@ public void measure(CSSNode node, float width, MeasureOutput measureOutput) {
           .isBoring(text, textPaint);
       float desiredWidth = boring == null ? Layout.getDesiredWidth(text,
                                                                    textPaint) : Float.NaN;
-
+      if(CSSConstants.isUndefined(width)){
+        width=node.cssstyle.maxWidth;
+      }
       if (boring == null
           && (CSSConstants.isUndefined(width) || (!CSSConstants
           .isUndefined(desiredWidth) && desiredWidth <= width))) {

diff --git a/doc/modules/animation.md b/doc/modules/animation.md
@@ -0,0 +1,26 @@
+## WXAnimationModule
+Built-in module for animaiton. One can invoke `transition(id, options, callback)` in JavaScript to activate an animaiton.
+
+* **id** the id of the element to be animatied.
+* **options** Property value of animaiton. The animation will start from current property to the given property. Refer the following for example.
+
+    	styles: {
+         	color: ‘#FF0000’,
+         	transform: ‘translate(1, 1)’
+        },
+    	duration: 0, //ms
+    	timingFunction: ’ease’,
+    	transform-origin: 'center center',
+    	delay: 0 //ms
+
+  * **style** the expected property value when the animation finished.
+    * color, the color of the element when the animaiton finished.
+    * transform, transform fuction to be applied to the element. Following value is supported.
+      * **translate, translateX, translateY** translate the element to a new location. The value an be pixel or percent
+      * **rotate** the unit is degree.
+      * **scale** scale up or scale down the element.
+  * **duration** Duration that the animation last.
+  * **timingFuncion** can be one of *ease-in*, *ease-out*, *ease-in-out*, *linear*
+  * **delay** Delay time before the animation starts.
+  * **transform-origin** the center of scale and rotation. The value can be pixel or keywords(left, right, bottom, top, center). If keywords is ever given, it must be in **X,Y** order.
+* **callback** the callback function to be executed when the animation finished.
diff --git a/examples/README.md b/examples/README.md
@@ -2,7 +2,7 @@
 
 ## Add an example
 
-Copy [template file](./modal.we) and build an example with [UI Gallery](#ui-gallery).  
+Copy [template file](./template.we) and build an example with [UI Gallery](#ui-gallery).  
 
 
 ## UI Gallery
@@ -13,32 +13,66 @@ We import a simple UI Gallery for consistent UI style. We recommend a new exampl
 
 See [UI Gallery Example](./ui.we) for details.
 
-![](http://gtms04.alicdn.com/tps/i4/TB1_v6FMpXXXXXfXXXX7XWpVpXX-278-519.gif)
-
-### Reference:
-
-0. [**ui-button**](./ui-button.we)
-    * Attributes: 
-        * `type`, ***default*** | primary | success | info | warning | danger | link 
-        * `size`, ***large*** | middle | small
-        * `value`
-        * `disabled`, ***false*** | true
-    * Event: 
-        * `click`
-0. [**ui-panel**](./ui-panel.we)
-    * Attributes: 
-        * `type`, ***default*** | primary | success | info | warning | danger 
-        * `title`
-        * `border`, number
-0. [**ui-hn**](./ui-hn.we)
-    * Attributes: 
-        * `level`, ***1*** | 2 | 3 
-0. [**ui-tip**](./ui-tip.we)
-    * Attributes: 
-        * `type`, ***success*** | info | warning | danger 
-        * `value`, ***large*** | middle | small
-        * `value`
-        * `disabled`, ***false*** | true
-0. [**ui-list-item**](./ui-list-item.we)
-    * Event: 
-        * `click`
+<img src="http://gtms04.alicdn.com/tps/i4/TB1_v6FMpXXXXXfXXXX7XWpVpXX-278-519.gif" width="160" /> <img src="http://gtms03.alicdn.com/tps/i3/TB13LTOMpXXXXceXXXXIxc4RpXX-944-1316.png" width="214" />
+
+Reference:
+
+## Button
+
+[**ui-button**](./ui-button.we)
+
+* Attributes: 
+    * `type`, ***default*** | primary | success | info | warning | danger | link 
+    * `size`, ***large*** | middle | small
+    * `value`
+    * `disabled`, ***false*** | true
+* Event: 
+    * `click`
+* Example:
+
+    <img src="http://gtms01.alicdn.com/tps/i1/TB1uUzOMpXXXXXuXpXXqnuiVpXX-278-456.gif" width="160" />
+
+## Panel
+
+[**ui-panel**](./ui-panel.we)
+
+* Attributes: 
+    * `type`, ***default*** | primary | success | info | warning | danger 
+    * `title`
+    * `border`, number
+* Example:
+
+    <img src="http://gtms04.alicdn.com/tps/i4/TB18drzMpXXXXc9XFXXHO6y1XXX-319-615.png" width="160" />
+
+## Hn
+
+[**ui-hn**](./ui-hn.we)
+
+* Attributes: 
+    * `level`, ***1*** | 2 | 3
+* Example:
+
+    <img src="http://gtms02.alicdn.com/tps/i2/TB1BZYMMpXXXXaYXpXXVSoUTpXX-275-203.png" width="160" />
+
+## Tip
+
+[**ui-tip**](./ui-tip.we)
+
+* Attributes: 
+    * `type`, ***success*** | info | warning | danger 
+    * `value`, ***large*** | middle | small
+    * `value`
+    * `disabled`, ***false*** | true
+* Example:
+
+    <img src="http://gtms03.alicdn.com/tps/i3/TB1x5DJMpXXXXb2XpXXnTPSZVXX-320-367.png" width="160" />
+
+## List
+
+[**ui-list-item**](./ui-list-item.we)
+
+* Event: 
+    * `click`
+* Example:
+
+    <img src="http://gtms04.alicdn.com/tps/i4/TB1qzjNMpXXXXabXpXX9it9VpXX-278-357.gif" width="160" />
diff --git a/examples/index.we b/examples/index.we
@@ -7,7 +7,6 @@
 </template>
 
 <script>
-  // TODO ontouch highlight
   module.exports = {
     data: {
       cases: [
@@ -25,8 +24,7 @@
     created: function() {
       var useLocal = true; // false when releasing
       var localBase = '//localhost:12580/examples/build/';
-//      var localBase = '//30.10.193.58:12580/examples/build/';
-      var nativeBase = '//groups.alidemo.cn/weex/weex/examples/build/';
+      var nativeBase = '';
       var h5Base = './index.html?page=./examples/build/';
 
       // in native

diff --git a/examples/template.we b/examples/template.we
@@ -0,0 +1,22 @@
+<template>
+  <scroller>
+    <ui-tip type="success" value="It's a weex example template."></ui-tip>
+
+    <ui-panel title="Dialog" type="primary">
+      <ui-hn level="1" value="H1"></ui-hn>
+      <ui-button type="primary" click="{{toast}}" value="Toast"></ui-button>
+      <ui-hn level="2" value="H3"></ui-hn>
+      <ui-button type="warning" click="{{toast}}" value="Toast"></ui-button>
+    </ui-panel>
+  </scroller>
+</template>
+
+<script>
+  module.exports = { 
+    methods: {
+      toast: function() {
+        this.$call('modal', 'toast', {'message': 'a toast', 'duration': 2});
+      }
+    }
+  }
+</script>
diff --git a/examples/ui-hn.we b/examples/ui-hn.we
@@ -7,7 +7,8 @@
 <script>
   module.exports = {
     data: {
-      level: 1
+      level: 1,
+      value: ''
     },
     methods: {}
   }

diff --git a/examples/ui-list-item.we b/examples/ui-list-item.we
@@ -9,7 +9,6 @@
   module.exports = {
     data: {
       bgColor: '#ffffff',
-//      highlight: true,
       click: function() {
       }
     },
@@ -33,9 +32,7 @@
     padding-right: 35px;
     height: 160px;
     justify-content: center;
-    /*align-items: center;*/
-    /*background-color: #ffffff;*/
-    margin-bottom: 1px; /*FIXME @yinfeng*/
+    /*margin-bottom: 1px; FUTURE */
     border-bottom-width: 1px;
     border-color: #dddddd;
   }

diff --git a/examples/ui.we b/examples/ui.we
@@ -7,18 +7,18 @@
 
     <ui-panel title="Buttons" append="tree">
       <div style="flex-direction: row; margin-top: 12px" repeat="{{buttons}}">
-        <ui-button type="{{type}}" size="large" value="{{type}}" click="{{buttonClick}}"
+        <ui-button type="{{type}}" size="large" value="{{type}}" click="{{clicked}}"
                    style=""></ui-button>
-        <ui-button type="{{type}}" size="middle" value="{{type}}" click="{{buttonClick}}"
+        <ui-button type="{{type}}" size="middle" value="{{type}}" click="{{clicked}}"
                    style="margin-left:10px"></ui-button>
-        <ui-button type="{{type}}" size="small" value="{{type}}" click="{{buttonClick}}"
+        <ui-button type="{{type}}" size="small" value="{{type}}" click="{{clicked}}"
                    style="margin-left:10px"></ui-button>
       </div>
 
       <div style="flex-direction: row; margin-top: 12px">
-        <ui-button disabled="{{true}}" type="" size="large" value="Disabled" click="{{buttonClick}}"></ui-button>
+        <ui-button disabled="{{true}}" type="" size="large" value="Disabled" click="{{clicked}}"></ui-button>
         <ui-button disabled="{{false}}" type="primary" size="large" value="Enabled"
-                   click="{{buttonClick}}" style="margin-left: 12px"></ui-button>
+                   click="{{clicked}}" style="margin-left: 12px"></ui-button>
       </div>
     </ui-panel>
 
@@ -30,7 +30,7 @@
     </ui-panel>
 
     <ui-panel title="List">
-      <ui-list-item repeat="{{tips}}">
+      <ui-list-item repeat="{{tips}}" click="{{clicked}}">
         <text class="item-txt">{{type}}</text>
       </ui-list-item>
     </ui-panel>
@@ -76,7 +76,7 @@
       ]
     },
     methods: {
-      buttonClick: function(ev) {
+      clicked: function(ev) {
         console.log(ev);
         this.$call('modal', 'toast', {'message': 'clicked!', duration: 0.5});
       }