feat: weui2.4.4

Tencent · Mar 23, 2021 · 7b8d25a · 7b8d25a
1 parent fd7f228
commit 7b8d25a
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+### v2.4.4 (2021-03-23)
+
+#### Features
+* feat: 升级半屏弹窗组件UI
+* feat: 升级msg组件UI
+
+#### Bugfixes
+* fix: 修复半屏弹窗单个按钮的布局问题
+* fix: 修复actionsheet组件取消按钮字体颜色问题
+* fix: 调整上传组件边距
+
+
+
 ### v2.4.3 (2021-02-01)
 
 #### Features
@@ -7,10 +20,11 @@
 * feat: 表单状态新增当前位置报错场景
 * feat: 表单组件新增跳转列表项
 * feat: 新增链接点击态色值变量
-* feat: 更新License年份
+* feat: 更新License年份 & 提供rpx版本
 
 #### Bugfixes
 * fix: 修复Input组件placeholde字体颜色
+* fix: 修复rpx版本下的demo展示问题
 
 
 
@@ -25,14 +39,6 @@
 
 
 
-### v2.4.2 (2020-11-25)
-
-#### Bugfixes
-* fix: 修复picker组件darkmode下的背景色适配问题
-* fix: 修复toast组件的旧版loading图标大小
-* fix: 修复msg组件英文文本词间断行问题
-
-
 ### v2.4.1 (2020-11-05)
 
 #### Features

diff --git a/dist/example/index.html b/dist/example/index.html
@@ -1802,6 +1802,7 @@ <h1 class="page__title">Half-screen Dialog</h1>
     <div class="page__bd page__bd_spacing">
         <a href="javascript:" class="weui-btn weui-btn_default" id="showIOSDialog1">样式一</a>
         <a href="javascript:" class="weui-btn weui-btn_default" id="showIOSDialog2">样式二</a>
+        <a href="javascript:" class="weui-btn weui-btn_default" id="showIOSDialog3">样式三</a>
     </div>
 
     <div id="dialogs">
@@ -1861,19 +1862,53 @@ <h1 class="page__title">Half-screen Dialog</h1>
             </div>
         </div>
         <!--END dialog2-->
+        <!--BEGIN dialog3-->
+        <div class="js_dialog" id="iosDialog3" style="display: none;">
+            <div class="weui-mask"></div>
+            <div id="js_dialog_3" class="weui-half-screen-dialog">
+                <div class="weui-half-screen-dialog__hd">
+                  <div class="weui-half-screen-dialog__hd__main">
+                    <div class="weui-flex" style="align-items:center;">
+                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 24px; margin-right: 8px; border-radius:50%;display: block;">
+                      昵称
+                    </div>
+                  </div>
+                </div>
+                <div class="weui-half-screen-dialog__bd">
+                  <br>
+                  <br>
+                  可放自定义内容
+                  <br>
+                  <br>
+                </div>
+                <div class="weui-half-screen-dialog__ft">
+                  <div class="weui-half-screen-dialog__btn-area">
+                    <a href="javascript:" class="weui-btn weui-btn_default">辅助操作</a>
+                    <a href="javascript:" class="weui-btn weui-btn_primary">主操作</a>
+                  </div>
+                  <div class="weui-half-screen-dialog__attachment-area">
+                    <a class="weui-link" href="javacript:;">附加操作</a>
+                  </div>
+                </div>
+            </div>
+        </div>
+        <!--END dialog3-->
     </div>
 </div>
 <script type="text/javascript">
     $(function(){
         var $dialog1 = $('#js_dialog_1'),
             $dialog2 = $('#js_dialog_2'),
+            $dialog3 = $('#js_dialog_3'),
             $iosDialog1 = $('#iosDialog1'),
             $iosDialog2 = $('#iosDialog2');
+            $iosDialog3 = $('#iosDialog3');
 
         $('#dialogs').on('click', '.weui-mask', function(){
             $(this).parents('.js_dialog').fadeOut(200);
             $dialog1.removeClass('weui-half-screen-dialog_show');
             $dialog2.removeClass('weui-half-screen-dialog_show');
+            $dialog3.removeClass('weui-half-screen-dialog_show');
         });
 
         $('#showIOSDialog1').on('click', function(){
@@ -1884,6 +1919,10 @@ <h1 class="page__title">Half-screen Dialog</h1>
             $iosDialog2.fadeIn(200);
             $dialog2.addClass('weui-half-screen-dialog_show');
         });
+        $('#showIOSDialog3').on('click', function(){
+            $iosDialog3.fadeIn(200);
+            $dialog3.addClass('weui-half-screen-dialog_show');
+        });
     });
 </script>
 

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/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "weui",
-    "version": "2.4.3",
+    "version": "2.4.4",
     "description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.",
     "keywords": [
         "weui",

diff --git a/src/example/half-screen-dialog/half-screen-dialog.html b/src/example/half-screen-dialog/half-screen-dialog.html
@@ -6,6 +6,7 @@ <h1 class="page__title">Half-screen Dialog</h1>
     <div class="page__bd page__bd_spacing">
         <a href="javascript:" class="weui-btn weui-btn_default" id="showIOSDialog1">样式一</a>
         <a href="javascript:" class="weui-btn weui-btn_default" id="showIOSDialog2">样式二</a>
+        <a href="javascript:" class="weui-btn weui-btn_default" id="showIOSDialog3">样式三</a>
     </div>
 
     <div id="dialogs">
@@ -65,19 +66,53 @@ <h1 class="page__title">Half-screen Dialog</h1>
             </div>
         </div>
         <!--END dialog2-->
+        <!--BEGIN dialog3-->
+        <div class="js_dialog" id="iosDialog3" style="display: none;">
+            <div class="weui-mask"></div>
+            <div id="js_dialog_3" class="weui-half-screen-dialog">
+                <div class="weui-half-screen-dialog__hd">
+                  <div class="weui-half-screen-dialog__hd__main">
+                    <div class="weui-flex" style="align-items:center;">
+                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 24px; margin-right: 8px; border-radius:50%;display: block;">
+                      昵称
+                    </div>
+                  </div>
+                </div>
+                <div class="weui-half-screen-dialog__bd">
+                  <br>
+                  <br>
+                  可放自定义内容
+                  <br>
+                  <br>
+                </div>
+                <div class="weui-half-screen-dialog__ft">
+                  <div class="weui-half-screen-dialog__btn-area">
+                    <a href="javascript:" class="weui-btn weui-btn_default">辅助操作</a>
+                    <a href="javascript:" class="weui-btn weui-btn_primary">主操作</a>
+                  </div>
+                  <div class="weui-half-screen-dialog__attachment-area">
+                    <a class="weui-link" href="javacript:;">附加操作</a>
+                  </div>
+                </div>
+            </div>
+        </div>
+        <!--END dialog3-->
     </div>
 </div>
 <script type="text/javascript">
     $(function(){
         var $dialog1 = $('#js_dialog_1'),
             $dialog2 = $('#js_dialog_2'),
+            $dialog3 = $('#js_dialog_3'),
             $iosDialog1 = $('#iosDialog1'),
             $iosDialog2 = $('#iosDialog2');
+            $iosDialog3 = $('#iosDialog3');
 
         $('#dialogs').on('click', '.weui-mask', function(){
             $(this).parents('.js_dialog').fadeOut(200);
             $dialog1.removeClass('weui-half-screen-dialog_show');
             $dialog2.removeClass('weui-half-screen-dialog_show');
+            $dialog3.removeClass('weui-half-screen-dialog_show');
         });
 
         $('#showIOSDialog1').on('click', function(){
@@ -88,5 +123,9 @@ <h1 class="page__title">Half-screen Dialog</h1>
             $iosDialog2.fadeIn(200);
             $dialog2.addClass('weui-half-screen-dialog_show');
         });
+        $('#showIOSDialog3').on('click', function(){
+            $iosDialog3.fadeIn(200);
+            $dialog3.addClass('weui-half-screen-dialog_show');
+        });
     });
 </script>
diff --git a/src/style/icon/weui-icon.less b/src/style/icon/weui-icon.less
@@ -202,6 +202,9 @@
     &.weui-icon-warn {
         color: @weuiColorWarn;
     }
+    &.weui-icon-info-circle {
+      color: var(--weui-BLUE);
+    }
 }
 .weui-icon_msg-primary {
     width: 64px;
@@ -210,3 +213,4 @@
         color: var(--weui-YELLOW);
     }
 }
+
diff --git a/src/style/widget/weui-cell/weui-uploader.less b/src/style/widget/weui-cell/weui-uploader.less
@@ -16,6 +16,9 @@
 
 @import "../../base/fn";
 
+.weui-cell_uploader {
+  padding-bottom:24px;
+}
 .weui-uploader {
     flex: 1;
 }

diff --git a/src/style/widget/weui-page/weui-msg.less b/src/style/widget/weui-page/weui-msg.less
@@ -51,9 +51,19 @@ a{
 }
 .weui-msg__title {
     margin-bottom: @weuiMsgTitleGap;
-    font-weight: 700;
+    font-weight: 400;
     font-size: 22px;
-    color: @weuiTextColorTitle;
+    color: #191919;
+    .dark({
+      color: #D1D1D1;
+    });
+    -webkit-text-stroke: .02em;
+}
+@supports (-webkit-overflow-scrolling:touch){
+  .weui-msg__title {
+    font-weight: 500;
+    -webkit-text-stroke: initial;
+  }
 }
 .weui-msg__desc {
     font-size: 17px;

diff --git a/src/style/widget/weui-tips/weui-actionsheet.less b/src/style/widget/weui-tips/weui-actionsheet.less
@@ -57,6 +57,7 @@
 }
 .weui-actionsheet__action {
     margin-top: 8px;
+    color: @weuiTextColorTitle;
     background-color: var(--weui-BG-2);
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);

diff --git a/src/style/widget/weui-tips/weui-half-screen-dialog.less b/src/style/widget/weui-tips/weui-half-screen-dialog.less
@@ -85,7 +85,7 @@
 
     overflow-y: auto;
     padding-top: 4px;
-    padding-bottom: 40px;
+    padding-bottom: 56px;
     font-size: 14px;
     color: var(--weui-FG-0);
 }
@@ -102,17 +102,28 @@
     line-height: 1.4;
 }
 .weui-half-screen-dialog__ft {
-    padding: 0 24px 32px;
+    padding: 0 0 64px;
     text-align: center;
     .weui-btn:nth-last-child(n+2),
     .weui-btn:nth-last-child(n+2) + .weui-btn {
         display: inline-block;
         vertical-align: top;
         margin: 0 8px;
         width: 120px;
+        &:first-child{
+          margin-left:0;
+        }
+        &:last-child{
+          margin-right:0;
+        }
     }
 }
-
+.weui-half-screen-dialog__btn-area{
+  &+.weui-half-screen-dialog__attachment-area{
+    margin-top:24px;
+    margin-bottom:-44px;
+  }
+}
 .weui-icon-btn {
     outline: 0;
     -webkit-appearance: none;