refactor(h5test): change H5test list UI (#102)

优化测速环境列表UI
Tencent · Jun 5, 2018 · b07bb4d · b07bb4d
1 parent cd04d44
commit b07bb4d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 20 deletions.
diff --git a/bin/tsw/util/h5-test/page/src/main.tmpl.html b/bin/tsw/util/h5-test/page/src/main.tmpl.html
@@ -101,11 +101,6 @@
     width: 100%;
 }
 
-.group-menu .group-item {
-    padding: 2px;
-    cursor: pointer;
-    border: 1px solid #ccc;
-}
 .top-tip{
     width: 100%;
     height: 100px;

diff --git a/bin/tsw/util/h5-test/page/src/new.tmpl.html b/bin/tsw/util/h5-test/page/src/new.tmpl.html
@@ -179,6 +179,12 @@
 
         //查看所有
         $('#number-get').click(function(event){
+            var self = this;
+            if($(self).is('.expended')){
+                $(self).removeClass('expended').text('查看H5测试号码列表');
+                $('#number-list').html('');
+                return;
+            }
             var request = api.getTestUser();
             request.done(function(data) {
                 var html = "";
@@ -192,6 +198,7 @@
                     html = "还没有测试号码~"
                 }
                 $('#number-list').html(html);
+                $(self).addClass('expended').text('收起H5测试号码列表');
             }).fail(function(errMsg) {
                 errMsg = errMsg || "出了点小问题，请联系系统管理员处理";
                 alert(errMsg);

diff --git a/bin/tsw/util/h5-test/page/src/new_body.tmpl.html b/bin/tsw/util/h5-test/page/src/new_body.tmpl.html
@@ -2,16 +2,36 @@
 <%
     var allGroup = data.allGroup || [],i;
 %>
-
+<style>
+.group-menu .group-item {
+    padding: 0.3em;
+    cursor: pointer;
+    background: #FFF;
+    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
+    margin: 0 1em 1em 0;
+    border-radius: .28571429rem;
+    border: 1px solid rgba(34,36,38,.15);
+}
+.h5test-envs {
+    max-height: 400px;
+    overflow-y: auto;
+    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
+    border-radius: .28571429rem;
+    padding: 5px;
+    border: 1px solid rgba(34,36,38,.15);
+}
+</style>
 <div class="ui grid container">
-    <div class="row" style="display:inline;margin-top: 30px">
+    <div class="row" style="margin-top: 30px">
         <h1>
             <%-data.project && data.project.name || 'TSW 测试环境配置'%>
         </h1>
     </div>
     <div class="row">
         <div class="column">
-            <div style="max-height: 400px; overflow-y: auto;">
+            <div class="ui raised segment">
+                <a class="ui blue ribbon label">#1 选择测试环境</a>
+                <br>
                 <% if(allGroup.length>0) { %>
                 <p class="group-menu">
                     分组：<% for(i=0;i < allGroup.length ; i++) { %>
@@ -23,6 +43,8 @@ <h1>
                     <% } %>
                 </p>
                 <% } %>
+                <br>
+                <div class="h5test-envs">
                 <%
                     data = data.group;
                     var item, val, name, desc, owner, module, isShow,isShowDesc;
@@ -75,13 +97,14 @@ <h1>
                     <br>
                     <% } %>
                 <% } %>
+                </div>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="column">
             <div class="ui raised segment">
-                <a class="ui blue ribbon label">#1 输入用户id（支持批量，换行即可）</a>
+                <a class="ui blue ribbon label">#2 输入用户id（支持批量，换行即可）</a>
                 <p class="ui">
                     <textarea style="width:100%;height:80px;" id="join-textarea" ></textarea>
                 <p class="ui">
@@ -94,7 +117,7 @@ <h1>
     <div class="row">
         <div class="column">
             <div class="ui raised segment">
-                <button id="number-get" class="ui button primary large">查看所有H5测试号码</button>
+                <button id="number-get" class="ui button primary large">查看H5测试号码列表</button>
                 <div class="ui divider"></div>
                 <div id="number-list" class="row">
                     <p>注意：每天0点将清空号码</p>
@@ -108,11 +131,11 @@ <h1>
 <script type="text/javascript">
     // hack系统alert提示
     window.alert = function(msg){
-        $('.top-tip').remove()
-        $('<div class="top-tip">' + msg + '</div>').appendTo('body')
+        $('.top-tip').remove();
+        $('<div class="top-tip">' + msg + '</div>').appendTo('body');
         setTimeout(function(){
             $('.top-tip').remove()
-        }, 3000)
+        }, 3000);
     }
 </script>