feat: weui-wxss 2.0

Tencent · Aug 1, 2019 · cb607ed · cb607ed
1 parent ac26edb
commit cb607ed
Show file tree

Hide file tree

Showing 313 changed files with 416 additions and 387 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+#### v 2.0.0 (2019-08-01)
+
+- 【同步weui】 颜色规范、字体大小规范、间距规范对齐微信7.0新视觉风格
+- 【同步weui】 更新weui-cell、weui-uploader、weui-article、weui-footer、weui-msg、weui-panel、weui-search-bar等组件的UI
+- 【增强】 增加组件 slideview 右滑操作 
+- 【增强】 增加组件 gallery 模拟原生全屏预览 
+- 【增强】 增加组件 loading 加载中 
+- 【增强】 增加组件 dialog 模拟原生弹窗 
+- 【增强】 增加组件 half-screen-dialog 半屏弹窗
+- 【增强】 增加组件 navigation-bar 模拟原生顶部导航条
+- 【增强】 增加组件 tabbar 模拟原生底部tab
+- 【优化】 废弃组件 navbar
+
 #### v 1.1.1 (2017-01-18)
 
 - 【同步weui】 增加扩展类.weui-loading_transparent
@@ -18,4 +31,4 @@
 
 初始发布
 
-- Initial release
+- Initial release
diff --git a/DIFF.md b/DIFF.md
diff --git a/LICENSE.txt b/LICENSE.txt
diff --git a/README.md b/README.md
diff --git a/dist/app.js b/dist/app.js
diff --git a/dist/app.json b/dist/app.json
@@ -1,26 +1,26 @@
 {
   "pages": [
     "example/index",
-
     "example/button/button",
     "example/list/list",
+    "example/slideview/slideview",
     "example/input/input",
     "example/slider/slider",
     "example/uploader/uploader",
-
     "example/article/article",
     "example/badge/badge",
     "example/flex/flex",
     "example/footer/footer",
     "example/gallery/gallery",
     "example/grid/grid",
     "example/icons/icons",
+    "example/loading/loading",
     "example/loadmore/loadmore",
     "example/panel/panel",
     "example/preview/preview",
     "example/progress/progress",
-
     "example/actionsheet/actionsheet",
+    "example/half-screen-dialog/half-screen-dialog",
     "example/dialog/dialog",
     "example/msg/msg",
     "example/msg/msg_text",
@@ -29,23 +29,23 @@
     "example/msg/msg_fail",
     "example/picker/picker",
     "example/toast/toast",
-
-    "example/navbar/navbar",
+    "example/navigation-bar/navigation-bar",
     "example/tabbar/tabbar",
-
     "example/searchbar/searchbar"
   ],
   "window": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "WeUI for 小程序",
-    "navigationBarBackgroundColor": "#f8f8f8",
-    "backgroundColor": "#f8f8f8"
+    "navigationBarBackgroundColor": "#EDEDED",
+    "backgroundColor": "#EDEDED"
   },
   "networkTimeout": {
     "request": 10000,
     "connectSocket": 10000,
     "uploadFile": 10000,
     "downloadFile": 10000
   },
-  "debug": true
-}
+  "style": "v2",
+  "debug": true,
+  "sitemapLocation": "sitemap42.json"
+}
diff --git a/dist/app.wxss b/dist/app.wxss
@@ -17,10 +17,13 @@ page{
 }
 
 .page__ft{
-    padding-bottom: 10px;
     text-align: center;
+    padding:0 0 10px;
+    padding:0 0 calc(10px + constant(safe-area-inset-bottom));
+    padding:0 0 calc(10px + env(safe-area-inset-bottom));
 }
 
+
 .page__title {
     text-align: left;
     font-size: 20px;

diff --git a/dist/example/actionsheet/actionsheet.js b/dist/example/actionsheet/actionsheet.js
diff --git a/dist/example/actionsheet/actionsheet.wxml b/dist/example/actionsheet/actionsheet.wxml
diff --git a/dist/example/actionsheet/actionsheet.wxss b/dist/example/actionsheet/actionsheet.wxss
diff --git a/dist/example/article/article.js b/dist/example/article/article.js
diff --git a/dist/example/article/article.wxml b/dist/example/article/article.wxml
diff --git a/dist/example/article/article.wxss b/dist/example/article/article.wxss
diff --git a/dist/example/badge/badge.js b/dist/example/badge/badge.js
diff --git a/dist/example/badge/badge.wxml b/dist/example/badge/badge.wxml
diff --git a/dist/example/button/button.js b/dist/example/button/button.js
diff --git a/dist/example/button/button.wxml b/dist/example/button/button.wxml
@@ -14,12 +14,6 @@
         <button class="weui-btn" type="warn" disabled="true">警告类操作</button>
 
         <view class="button-sp-area">
-            <button class="weui-btn" type="primary" plain="true">按钮</button>
-            <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>
-
-            <button class="weui-btn" type="default" plain="true">按钮</button>
-            <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>
-
             <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
             <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
             <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>

diff --git a/dist/example/button/button.wxss b/dist/example/button/button.wxss
diff --git a/dist/example/dialog/dialog.js b/dist/example/dialog/dialog.js
@@ -1,5 +1,8 @@
 Page({
-    openConfirm: function () {
+    data: {
+        showDialog: false
+    },
+     openConfirm: function () {
         wx.showModal({
             title: '弹窗标题',
             content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
@@ -15,15 +18,14 @@ Page({
             }
         });
     },
-    openAlert: function () {
-        wx.showModal({
-            content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
-            showCancel: false,
-            success: function (res) {
-                if (res.confirm) {
-                    console.log('用户点击确定')
-                }
-            }
-        });
+    openDialog: function () {
+        this.setData({
+            istrue: true
+        })
+    },
+    closeDialog: function () {
+        this.setData({
+            istrue: false
+        })
     }
-});
+});
diff --git a/dist/example/dialog/dialog.wxml b/dist/example/dialog/dialog.wxml
@@ -1,12 +1,29 @@
 <view class="page">
     <view class="page__hd">
         <view class="page__title">Dialog</view>
-        <view class="page__desc">对话框，采用小程序原生的modal</view>
+        <view class="page__desc">对话框</view>
     </view>
     <view class="page__bd">
         <view class="weui-btn-area">
-            <button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button>
-            <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>
+            <button class="weui-btn" type="default" bindtap="openConfirm">原生 Dialog</button>
+            <button class="weui-btn" type="default" bindtap="openDialog">模拟 Dialog</button>
+        </view>
+        <view class="weui-demo-dialog {{istrue ? 'weui-demo-dialog_show' : ''}}">
+          <view class="weui-mask" bindtap="closeDialog"></view>
+          <view class="weui-dialog__wrp" bindtap="closeDialog">
+              <view class="weui-dialog" catchtap="stopEvent">
+                <view class="weui-dialog__hd">
+                  <view class="weui-dialog__title">标题</view>
+                </view>
+                <view class="weui-dialog__bd">
+                  <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFill" style="max-width:100%;"/>
+                </view>
+                <view class="weui-dialog__ft">
+                    <view class="weui-dialog__btn weui-dialog__btn_default" bindtap="closeDialog">取消</view>
+                    <view class="weui-dialog__btn" bindtap="closeDialog">确定</view>
+                </view>
+              </view>
+          </view>
         </view>
     </view>
-</view>
+</view>
diff --git a/dist/example/dialog/dialog.wxss b/dist/example/dialog/dialog.wxss
@@ -1,3 +1,12 @@
 page{
     background-color: #FFFFFF;
-}
+}
+.weui-demo-dialog{
+  visibility:hidden;
+  opacity:0;
+  transition:opacity .3s;
+}
+.weui-demo-dialog_show{
+  visibility:visible;
+  opacity:1;
+}
diff --git a/dist/example/flex/flex.js b/dist/example/flex/flex.js
diff --git a/dist/example/flex/flex.wxml b/dist/example/flex/flex.wxml
diff --git a/dist/example/flex/flex.wxss b/dist/example/flex/flex.wxss
diff --git a/dist/example/footer/footer.js b/dist/example/footer/footer.js
diff --git a/dist/example/footer/footer.wxml b/dist/example/footer/footer.wxml
diff --git a/dist/example/footer/footer.wxss b/dist/example/footer/footer.wxss
diff --git a/dist/example/gallery/gallery.js b/dist/example/gallery/gallery.js
@@ -1 +1,12 @@
-Page({});
+Page({
+    openGallery: function () {
+        this.setData({
+            istrue: true
+        })
+    },
+    closeGallery: function () {
+        this.setData({
+            istrue: false
+        })
+    }
+});
diff --git a/dist/example/gallery/gallery.wxml b/dist/example/gallery/gallery.wxml
@@ -1,6 +1,20 @@
 <view class="page">
     <view class="page__hd">
         <view class="page__title">Gallery</view>
-        <view class="page__desc">画廊，建议采用小程序原生的wx.previewImage来实现。详情请看小程序文档。</view>
+        <view class="page__desc">画廊，模拟小程序原生的wx.previewImage。</view>
     </view>
-</view>
+    <view class="page__bd">
+      <view class="weui-btn-area">
+          <button class="weui-btn" type="default" bindtap="openGallery">Gallery</button>
+      </view>
+      <view class="weui-gallery {{istrue ? 'weui-gallery_show' : ''}}" bindtap="closeGallery">
+        <view class="weui-gallery__info">1/17</view>
+        <view class="weui-gallery__img__wrp">
+              <image mode="aspectFit" class="weui-gallery__img" src="../images/pic_160.png"></image>
+        </view>
+        <view class="weui-gallery__opr">
+          <navigator href="javascript:" class="weui-gallery__del">删除</navigator>
+        </view>
+      </view>
+    </view>
+</view>
diff --git a/dist/example/grid/grid.js b/dist/example/grid/grid.js
diff --git a/dist/example/grid/grid.wxml b/dist/example/grid/grid.wxml
diff --git a/dist/example/icons/icons.js b/dist/example/icons/icons.js
diff --git a/dist/example/icons/icons.wxml b/dist/example/icons/icons.wxml
diff --git a/dist/example/icons/icons.wxss b/dist/example/icons/icons.wxss
diff --git a/dist/example/images/base64.js b/dist/example/images/base64.js
diff --git a/dist/example/images/icon_footer.png b/dist/example/images/icon_footer.png
diff --git a/dist/example/images/icon_footer_link.png b/dist/example/images/icon_footer_link.png
diff --git a/dist/example/images/icon_intro.png b/dist/example/images/icon_intro.png
diff --git a/dist/example/images/icon_nav_feedback.png b/dist/example/images/icon_nav_feedback.png
diff --git a/dist/example/images/icon_nav_form.png b/dist/example/images/icon_nav_form.png
diff --git a/dist/example/images/icon_nav_nav.png b/dist/example/images/icon_nav_nav.png
diff --git a/dist/example/images/icon_nav_search.png b/dist/example/images/icon_nav_search.png
diff --git a/dist/example/images/icon_nav_special.png b/dist/example/images/icon_nav_special.png
diff --git a/dist/example/images/icon_nav_widget.png b/dist/example/images/icon_nav_widget.png
diff --git a/dist/example/images/icon_nav_z-index.png b/dist/example/images/icon_nav_z-index.png
diff --git a/dist/example/images/icon_tabbar.png b/dist/example/images/icon_tabbar.png
diff --git a/dist/example/images/logo.png b/dist/example/images/logo.png
diff --git a/dist/example/images/pic_160.png b/dist/example/images/pic_160.png
diff --git a/dist/example/images/pic_article.png b/dist/example/images/pic_article.png
diff --git a/dist/example/images/vcode.jpg b/dist/example/images/vcode.jpg
diff --git a/dist/example/index.js b/dist/example/index.js
@@ -5,25 +5,25 @@ Page({
                 id: 'form',
                 name: '表单',
                 open: false,
-                pages: ['button', 'list', 'input', 'slider', 'uploader']
+                pages: ['button', 'list', 'slideview', 'input', 'slider', 'uploader']
             },
             {
                 id: 'widget',
                 name: '基础组件',
                 open: false,
-                pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loadmore', 'panel', 'preview', 'progress']
+                pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loading', 'loadmore', 'panel', 'preview', 'progress']
             },
             {
                 id: 'feedback',
                 name: '操作反馈',
                 open: false,
-                pages: ['actionsheet', 'dialog', 'msg', 'picker', 'toast']
+                pages: ['actionsheet', 'dialog', 'half-screen-dialog', 'msg', 'picker', 'toast']
             },
             {
                 id: 'nav',
                 name: '导航相关',
                 open: false,
-                pages: ['navbar', 'tabbar']
+                pages: ['navigation-bar', 'tabbar']
             },
             {
                 id: 'search',

diff --git a/dist/example/index.wxml b/dist/example/index.wxml
diff --git a/dist/example/index.wxss b/dist/example/index.wxss
@@ -1,5 +1,5 @@
 /*!
- * WeUI v1.1.1 (https://github.com/weui/weui-wxss)
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
  * Copyright 2019 Tencent, Inc.
  * Licensed under the MIT license
  */

diff --git a/dist/example/input/input.js b/dist/example/input/input.js
diff --git a/dist/example/input/input.wxml b/dist/example/input/input.wxml
@@ -24,7 +24,7 @@
         </view>
 
         <view class="weui-cells__title">复选列表项</view>
-        <view class="weui-cells weui-cells_after-title">
+        <view class="weui-cells weui-cells_checkbox weui-cells_after-title">
             <checkbox-group bindchange="checkboxChange">
                 <label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}" wx:key="value">
                     <checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>
@@ -43,15 +43,15 @@
 
         <view class="weui-cells__title">表单</view>
         <view class="weui-cells weui-cells_after-title">
-            <view class="weui-cell weui-cell_input">
+            <view class="weui-cell ">
                 <view class="weui-cell__hd">
                     <view class="weui-label">qq</view>
                 </view>
                 <view class="weui-cell__bd">
                     <input class="weui-input" placeholder="请输入qq"/>
                 </view>
             </view>
-            <view class="weui-cell weui-cell_input weui-cell_vcode">
+            <view class="weui-cell  weui-cell_vcode">
                 <view class="weui-cell__hd">
                     <view class="weui-label">手机号</view>
                 </view>
@@ -62,7 +62,7 @@
                     <view class="weui-vcode-btn">获取验证码</view>
                 </view>
             </view>
-            <view class="weui-cell weui-cell_input">
+            <view class="weui-cell ">
                 <view class="weui-cell__hd">
                     <view class="weui-label">日期</view>
                 </view>
@@ -72,7 +72,7 @@
                     </picker>
                 </view>
             </view>
-            <view class="weui-cell weui-cell_input">
+            <view class="weui-cell ">
                 <view class="weui-cell__hd">
                     <view class="weui-label">时间</view>
                 </view>
@@ -82,7 +82,7 @@
                     </picker>
                 </view>
             </view>
-            <view class="weui-cell weui-cell_input weui-cell_vcode">
+            <view class="weui-cell  weui-cell_vcode">
                 <view class="weui-cell__hd">
                     <view class="weui-label">验证码</view>
                 </view>
@@ -98,7 +98,7 @@
 
         <view class="weui-cells__title">表单报错</view>
         <view class="weui-cells weui-cells_after-title">
-            <view class="weui-cell weui-cell_input weui-cell_warn">
+            <view class="weui-cell  weui-cell_warn">
                 <view class="weui-cell__hd">
                     <view class="weui-label">卡号</view>
                 </view>
@@ -123,7 +123,7 @@
 
         <view class="weui-cells__title">文本框</view>
         <view class="weui-cells weui-cells_after-title">
-            <view class="weui-cell weui-cell_input">
+            <view class="weui-cell ">
                 <view class="weui-cell__bd">
                     <input class="weui-input" placeholder="请输入文本" />
                 </view>
@@ -191,4 +191,4 @@
             <button class="weui-btn" type="primary" bindtap="showTopTips">确定</button>
         </view>
     </view>
-</view>
+</view>
diff --git a/dist/example/list/list.js b/dist/example/list/list.js
diff --git a/dist/example/list/list.wxml b/dist/example/list/list.wxml
diff --git a/dist/example/list/list.wxss b/dist/example/list/list.wxss
diff --git a/dist/example/loadmore/loadmore.js b/dist/example/loadmore/loadmore.js
diff --git a/dist/example/loadmore/loadmore.wxml b/dist/example/loadmore/loadmore.wxml
diff --git a/dist/example/loadmore/loadmore.wxss b/dist/example/loadmore/loadmore.wxss
diff --git a/dist/example/msg/msg.js b/dist/example/msg/msg.js
diff --git a/dist/example/msg/msg.wxml b/dist/example/msg/msg.wxml
diff --git a/dist/example/msg/msg.wxss b/dist/example/msg/msg.wxss
diff --git a/dist/example/msg/msg_fail.js b/dist/example/msg/msg_fail.js
diff --git a/dist/example/msg/msg_fail.wxml b/dist/example/msg/msg_fail.wxml
diff --git a/dist/example/msg/msg_fail.wxss b/dist/example/msg/msg_fail.wxss
diff --git a/dist/example/msg/msg_success copy.js b/dist/example/msg/msg_success copy.js
diff --git a/dist/example/msg/msg_success.js b/dist/example/msg/msg_success.js
diff --git a/dist/example/msg/msg_success.wxml b/dist/example/msg/msg_success.wxml
diff --git a/dist/example/msg/msg_success.wxml copy b/dist/example/msg/msg_success.wxml copy
diff --git a/dist/example/msg/msg_success.wxss b/dist/example/msg/msg_success.wxss
diff --git a/dist/example/msg/msg_success.wxss copy b/dist/example/msg/msg_success.wxss copy
diff --git a/dist/example/msg/msg_text copy.js b/dist/example/msg/msg_text copy.js
diff --git a/dist/example/msg/msg_text.js b/dist/example/msg/msg_text.js
diff --git a/dist/example/msg/msg_text.wxml b/dist/example/msg/msg_text.wxml