Merge remote-tracking branch 'up/master'

GibGas · Oct 27, 2015 · bef9bee · bef9bee
2 parents db42ecd + c1c4c26
commit bef9bee
Show file tree

Hide file tree

Showing 13 changed files with 271 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@ WeUI 为微信 Web 服务量身设计  ![](https://travis-ci.org/weui/weui.svg?b
 
 ## 概述
 
-WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、`toast`、`article`、`icon`等各式元素。
+WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`, `toast`、`article`、`icon`等各式元素。
 
 ## 使用
 
@@ -154,6 +154,22 @@ gulp -ws
 </div>
 ```
 
+## Progress
+
+progress用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。
+
+![](./dist/example/snapshot/progress.png)
+
+```html
+<div class="weui_progress">
+    <div class="weui_progress_bar">
+        <div class="weui_progress_inner_bar" style="width: 50%;"></div>
+    </div>
+    <a href="javascript:;" class="weui_progress_cancel">
+        <i class="weui_icon_cancel"></i>
+    </a>
+</div>
+```
 
 ## Toast
 
@@ -274,6 +290,7 @@ toast用于临时显示某些信息，并且会在数秒后自动消失。这些
     <i class="weui_icon_warn"></i>
     <i class="weui_icon_download"></i>
     <i class="weui_icon_info_circle"></i>
+    <i class="weui_icon_cancel"></i>
 </div>
 ```
 

diff --git a/dist/example/index.html b/dist/example/index.html
@@ -48,6 +48,14 @@ <h1 class="page_title">WeUI</h1>
                         <div class="weui_cell_ft">
                         </div>
                     </a>
+                    <a class="weui_cell js_cell" href="javascript:;" data-id="progress">
+                        <span class="weui_cell_hd"><img src="./images/icon_nav_button.png" class="icon_nav" alt=""></span>
+                        <div class="weui_cell_bd weui_cell_primary">
+                            <p>Progress</p>
+                        </div>
+                        <div class="weui_cell_ft">
+                        </div>
+                    </a>
                     <a class="weui_cell js_cell" href="javascript:;" data-id="msg">
                         <span class="weui_cell_hd"><img src="./images/icon_nav_msg.png" class="icon_nav" alt=""></span>
                         <div class="weui_cell_bd weui_cell_primary">
@@ -450,6 +458,41 @@ <h1 class="page_title">Dialog</h1>
             <!--END dialog2-->
         </div>
     </script>
+    <script type="text/html" id="tpl_progress">
+        <div class="page">
+            <div class="hd">
+                <h1 class="page_title">Progress</h1>
+            </div>
+            <div class="bd spacing">
+                <div class="weui_progress">
+                    <div class="weui_progress_bar">
+                        <div class="weui_progress_inner_bar" style="width: 0%;"></div>
+                    </div>
+                    <a href="javascript:;" class="weui_progress_cancel">
+                        <i class="weui_icon_cancel"></i>
+                    </a>
+                </div>
+                <br>
+                <div class="weui_progress">
+                    <div class="weui_progress_bar">
+                        <div class="weui_progress_inner_bar" style="width: 50%;"></div>
+                    </div>
+                    <a href="javascript:;" class="weui_progress_cancel">
+                        <i class="weui_icon_cancel"></i>
+                    </a>
+                </div>
+                <br>
+                <div class="weui_progress">
+                    <div class="weui_progress_bar">
+                        <div class="weui_progress_inner_bar" style="width: 80%;"></div>
+                    </div>
+                    <a href="javascript:;" class="weui_progress_cancel">
+                        <i class="weui_icon_cancel"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </script>
     <script type="text/html" id="tpl_msg">
         <div class="page">
             <div class="hd">
@@ -527,6 +570,7 @@ <h1 class="page_title">Icons</h1>
                     <i class="weui_icon_warn"></i>
                     <i class="weui_icon_download"></i>
                     <i class="weui_icon_info_circle"></i>
+                    <i class="weui_icon_cancel"></i>
                 </div>
             </div>
         </div>

diff --git a/dist/example/snapshot/progress.png b/dist/example/snapshot/progress.png
diff --git a/dist/style/weui.css b/dist/style/weui.css
diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/src/example/index.html b/src/example/index.html
@@ -48,6 +48,14 @@ <h1 class="page_title">WeUI</h1>
                         <div class="weui_cell_ft">
                         </div>
                     </a>
+                    <a class="weui_cell js_cell" href="javascript:;" data-id="progress">
+                        <span class="weui_cell_hd"><img src="./images/icon_nav_button.png" class="icon_nav" alt=""></span>
+                        <div class="weui_cell_bd weui_cell_primary">
+                            <p>Progress</p>
+                        </div>
+                        <div class="weui_cell_ft">
+                        </div>
+                    </a>
                     <a class="weui_cell js_cell" href="javascript:;" data-id="msg">
                         <span class="weui_cell_hd"><img src="./images/icon_nav_msg.png" class="icon_nav" alt=""></span>
                         <div class="weui_cell_bd weui_cell_primary">
@@ -450,6 +458,41 @@ <h1 class="page_title">Dialog</h1>
             <!--END dialog2-->
         </div>
     </script>
+    <script type="text/html" id="tpl_progress">
+        <div class="page">
+            <div class="hd">
+                <h1 class="page_title">Progress</h1>
+            </div>
+            <div class="bd spacing">
+                <div class="weui_progress">
+                    <div class="weui_progress_bar">
+                        <div class="weui_progress_inner_bar" style="width: 0%;"></div>
+                    </div>
+                    <a href="javascript:;" class="weui_progress_cancel">
+                        <i class="weui_icon_cancel"></i>
+                    </a>
+                </div>
+                <br>
+                <div class="weui_progress">
+                    <div class="weui_progress_bar">
+                        <div class="weui_progress_inner_bar" style="width: 50%;"></div>
+                    </div>
+                    <a href="javascript:;" class="weui_progress_cancel">
+                        <i class="weui_icon_cancel"></i>
+                    </a>
+                </div>
+                <br>
+                <div class="weui_progress">
+                    <div class="weui_progress_bar">
+                        <div class="weui_progress_inner_bar" style="width: 80%;"></div>
+                    </div>
+                    <a href="javascript:;" class="weui_progress_cancel">
+                        <i class="weui_icon_cancel"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </script>
     <script type="text/html" id="tpl_msg">
         <div class="page">
             <div class="hd">
@@ -527,6 +570,7 @@ <h1 class="page_title">Icons</h1>
                     <i class="weui_icon_warn"></i>
                     <i class="weui_icon_download"></i>
                     <i class="weui_icon_info_circle"></i>
+                    <i class="weui_icon_cancel"></i>
                 </div>
             </div>
         </div>

diff --git a/src/example/snapshot/progress.png b/src/example/snapshot/progress.png
diff --git a/src/style/base/fn.less b/src/style/base/fn.less
@@ -11,4 +11,5 @@
 
 @import "./variable/weui_cell";
 @import "./variable/weui_button";
-@import "./variable/weui_msg";
+@import "./variable/weui_msg";
+@import "./variable/weui_progress";
diff --git a/src/style/base/variable/weui_progress.less b/src/style/base/variable/weui_progress.less
@@ -0,0 +1,5 @@
+@weuiProgressBg: #ebebeb;
+@weuiProgressColor: #09bb07;
+@weuiProgressHeight: 3px;
+@weuiProgressCloseBg: #ef4f4f;
+@weuiProgressActiveBg: #c13e3e;