From 2e36d4f11d346a5dc9393792a1e26dfe0b9b79e3 Mon Sep 17 00:00:00 2001
From: Qi Gao <hljdqgq@163.com>
Date: Wed, 9 Jan 2019 10:47:50 +0800
Subject: [PATCH] change padding style & copywriter (#4)

* change padding style

* change version
---
 .../report_template/components/filter-tag.js  |   2 +-
 lyrebird_tracking/static/component/banner.vue |  31 ++---
 .../static/component/filter-tag.vue           |   2 +-
 lyrebird_tracking/static/component/main.vue   |  34 ++++--
 .../static/component/tracking-detail.vue      | 106 ++++++++----------
 .../static/component/tracking-list.vue        |  23 +++-
 setup.py                                      |   2 +-
 7 files changed, 101 insertions(+), 99 deletions(-)

diff --git a/lyrebird_tracking/report_template/components/filter-tag.js b/lyrebird_tracking/report_template/components/filter-tag.js
index d0abafb..391c985 100644
--- a/lyrebird_tracking/report_template/components/filter-tag.js
+++ b/lyrebird_tracking/report_template/components/filter-tag.js
@@ -40,7 +40,7 @@ Vue.component(
                 this.grouplist = this.changeGroupCache;
                 this.$emit("filterchange", this.grouplist);
                 this.$Notice.success({
-                    title: "Change Filter Success :-D "
+                    title: "Change Filter Success"
                 });
             },
             activatedDataChange: function(val) {
diff --git a/lyrebird_tracking/static/component/banner.vue b/lyrebird_tracking/static/component/banner.vue
index a8f937d..5550694 100644
--- a/lyrebird_tracking/static/component/banner.vue
+++ b/lyrebird_tracking/static/component/banner.vue
@@ -1,25 +1,8 @@
 <template>
-    <div class="box box-solid">
-        <div class="box-body">
-            <div class="row">
-                <div class="col-lg-6">
-                    <!-- <label class="btn btn-primary btn-file" style="backgroud-color:#1874CD;">
-                        Import<input id="load-file" type="file" name="filer_key_file" @change="upload">
-                    </label> -->
-                    <button class="btn btn-warning" @click="clearResult">Clear</button>
-                    <button class="btn btn-info"  @click="saveReport">Save Report</button>
-                </div><!-- /.col-lg-6 -->
-                <!-- <div class="col-lg-2">
-                    <div class="input-group">
-                        <input v-model="targetContext" type="text" class="form-control input-sm" placeholder="Search..." @keyup.enter="popTargetContext(targetContext)">
-                        <span class="input-group-btn">
-                            <button class="btn btn-primary btn-sm" type="button" @click="popTargetContext(targetContext)">Search</button>
-                        </span>
-                    </div>
-                </div> -->
-            </div>
-        </div>
-    </div>
+    <Card :padding="5">           
+        <button class="btn btn-warning" @click="clearResult">Clear</button>
+        <button class="btn btn-info"  @click="saveReport">Save Report</button>
+    </Card>          
 </template>
 
 <script>
@@ -39,7 +22,7 @@ module.exports = {
             .then(response=>{
                 console.log('Clear statistics list!');
                 this.$Notice.success({
-                    title: "Clear Success ：）"
+                    title: "Clear Success"
                 });
             })
         },
@@ -47,9 +30,9 @@ module.exports = {
             this.$http.get('/ui/plugin/tracking/report')
             .then(response=>{
                 this.$Notice.success({
-                    title: "Save Success :-D",
+                    title: "Save Success",
                     render: h => {
-                        return h('span', {style:{wordBreak:'break-all'}},'Save Report at \n "~/.lyrebird/plugins/lyrebird_tracking/report"')
+                        return h('span', {style:{wordBreak:'break-all'}},'Save to \n "~/.lyrebird/plugins/lyrebird_tracking/report"')
                     }
                 });
             })
diff --git a/lyrebird_tracking/static/component/filter-tag.vue b/lyrebird_tracking/static/component/filter-tag.vue
index 3ddbddb..335828f 100644
--- a/lyrebird_tracking/static/component/filter-tag.vue
+++ b/lyrebird_tracking/static/component/filter-tag.vue
@@ -60,7 +60,7 @@ module.exports = {
       this.grouplist = this.changeGroupCache;
       this.$emit("filterchange", this.grouplist);
       this.$Notice.success({
-        title: "Change Filter Success :-D "
+        title: "Change Filter Success"
       });
     },
     activatedDataChange: function(val) {
diff --git a/lyrebird_tracking/static/component/main.vue b/lyrebird_tracking/static/component/main.vue
index 0eafe69..2d84b58 100644
--- a/lyrebird_tracking/static/component/main.vue
+++ b/lyrebird_tracking/static/component/main.vue
@@ -1,14 +1,16 @@
 <template>
     <div>
-        <banner></banner>
-        <div class="row">
-            <div class="col-md-6">
-                <tracking-list :trackingdata="allTrackingData"  @detail="getTrackingIndex" @content="getCurrentContent"></tracking-list>
-            </div>
-            <div class="col-md-6" v-if="currentTracking">
-                <tracking-detail :trackingdetail="currentTracking" :trackingindex="currentIndex" :currentcontent="currentContent" :codedetail="codedetail"></tracking-detail>
-            </div>
-        </div>
+        <Row class="button-bar">
+          <banner></banner>
+        </Row>
+        <Row>
+            <i-col span="12">
+                <tracking-list :trackingdata="allTrackingData"  @detail="getTrackingIndex" @content="getCurrentContent" class="tracking-left"></tracking-list>
+            </i-col>
+            <i-col span="12" v-if="currentTracking">
+                <tracking-detail :trackingdetail="currentTracking" :trackingindex="currentIndex" :currentcontent="currentContent" :codedetail="codedetail" class="tracking-right"></tracking-detail>
+            </i-col>
+        </Row>
     </div>
 </template>
 
@@ -75,5 +77,17 @@ module.exports = {
 };
 </script>
 
-<style>
+<style scoped>
+  .button-bar {
+      margin-bottom: 5px;
+      height: 48px;
+    }
+
+  .tracking-left {
+    margin-right: 5px;
+  }
+
+  .tracking-right {
+    margin-left: 5px;
+  }
 </style>
diff --git a/lyrebird_tracking/static/component/tracking-detail.vue b/lyrebird_tracking/static/component/tracking-detail.vue
index 1208afc..0a52567 100644
--- a/lyrebird_tracking/static/component/tracking-detail.vue
+++ b/lyrebird_tracking/static/component/tracking-detail.vue
@@ -1,61 +1,49 @@
 <template>
-    <div class="box box-solid">
-        <div class="box-header">
-            <div class="pull-left">
-                <!-- <span class="badge bg-yellow">Index: {{trackingdetail.index}}</span> -->
-                <!-- <a class="btn btn-warning btn-flat btn-xs"><b>Index: {{trackingindex}}</b></a> -->
-                <font style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);">Detail</font>
-            </div> 
-        </div>
-        <div class="box-body">
-            <el-collapse v-model="activeNames">
-                <el-collapse-item v-for="item in currentcontent.asserts" :key="item.field">
-                    <template slot="title" v-if="item.flag===true">
-                      <i class="header-icon el-icon-circle-check-outline"></i>
-                      <font color="LimeGreen">Check field - {{item.field}} </font>
-                    </template>
-                    <!-- 没有预期值或未测试的埋点信息，展示问号样式 -->
-                    <template slot="title" v-else-if="item.flag===2||typeof(item.flag) == 'undefined'">
-                      <i class="header-icon el-icon-question"></i>
-                      <font color="CornflowerBlue">Check field - {{item.field}} </font>
-                    </template>
-                    <template slot="title" v-else>
-                      <i class="header-icon el-icon-circle-close-outline"></i>
-                      <font color="red">Check field - {{item.field}} </font>
-                    </template>
-                    <div>
-                        <!-- 没有期望值-展示文案提示 -->
-                        <li>Field : {{item.field}}</li>
-                        <li v-if="JSON.stringify(item.schema)=='{}'">Expect schema : 
-                          No expected value
-                        </li>
-                        <!-- 未测试过场景-展示NA -->
-                        <!-- <li v-else-if="item.schema">Expect schema : 
-                          <div v-html="jsoninfo(item.schema)"></div>
-                        </li> -->
-                        <!-- 测试过场景-取expect参数 -->
-                        <li v-else>Expect schema :
-                          <div v-html="jsoninfo(item.schema)"></div>
-                        </li>
-                        <li>Actual value : 
-                          <div v-if="item.actual" v-html="jsoninfo(item.actual)"></div>
-                          <!-- 未测试过场景-实际值不存在展示NA -->
-                          <div v-else v-html="jsoninfo('N/A')"></div>
-                        </li>
-                    </div>
-                </el-collapse-item>
-                <el-collapse-item name="1">
-                    <template slot="title">
-                      <i class="el-icon-document"></i> Content
-                    </template>
-                    <!-- <div class="box-body">
-                        <div v-html="infoContaint"></div>
-                    </div> -->
-                    <div id="container" style="height:500px;border:1px solid grey"></div>
-                </el-collapse-item>
-            </el-collapse>
-        </div>
-    </div>
+     <Card>
+       <div class="tracking-detail">
+          <font style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);">Detail</font>
+          <br/>
+          <br/>
+          <el-collapse v-model="activeNames">
+              <el-collapse-item v-for="item in currentcontent.asserts" :key="item.field">
+                  <template slot="title" v-if="item.flag===true">
+                    <i class="header-icon el-icon-circle-check-outline"></i>
+                    <font color="LimeGreen">Check field - {{item.field}} </font>
+                  </template>
+                  <!-- 没有预期值或未测试的埋点信息，展示问号样式 -->
+                  <template slot="title" v-else-if="item.flag===2||typeof(item.flag) == 'undefined'">
+                    <i class="header-icon el-icon-question"></i>
+                    <font color="CornflowerBlue">Check field - {{item.field}} </font>
+                  </template>
+                  <template slot="title" v-else>
+                    <i class="header-icon el-icon-circle-close-outline"></i>
+                    <font color="red">Check field - {{item.field}} </font>
+                  </template>
+                  <div>
+                      <!-- 没有期望值-展示文案提示 -->
+                      <li>Field : {{item.field}}</li>
+                      <li v-if="JSON.stringify(item.schema)=='{}'">Expect schema : 
+                        No expected value
+                      </li>
+                      <!-- 未测试过场景-展示NA -->
+                      <!-- <li v-else-if="item.schema">Expect schema : 
+                        <div v-html="jsoninfo(item.schema)"></div>
+                      </li> -->
+                      <!-- 测试过场景-取expect参数 -->
+                      <li v-else>Expect schema :
+                        <div v-html="jsoninfo(item.schema)"></div>
+                      </li>
+                      <li>Actual value : 
+                        <div v-if="item.actual" v-html="jsoninfo(item.actual)"></div>
+                        <!-- 未测试过场景-实际值不存在展示NA -->
+                        <div v-else v-html="jsoninfo('N/A')"></div>
+                      </li>
+                  </div>
+              </el-collapse-item>
+          </el-collapse>
+          <div id="container" style="height:500px;border:1px solid grey"></div>
+       </div>
+    </Card>
 </template>
 
 <script>
@@ -201,4 +189,8 @@ module.exports = {
 .infoContentClass {
 	background: lightblue;
 }
+.tracking-detail {
+  height: calc(100vh - 80px);
+  overflow-y: auto;
+}
 </style>
diff --git a/lyrebird_tracking/static/component/tracking-list.vue b/lyrebird_tracking/static/component/tracking-list.vue
index 2266eaa..65be55c 100644
--- a/lyrebird_tracking/static/component/tracking-list.vue
+++ b/lyrebird_tracking/static/component/tracking-list.vue
@@ -1,13 +1,13 @@
 <template>
-    <card>
+    <Card>
        <div class="tracking-list">
             <filter-tag @filterchange="filterList"></filter-tag>
             <br/>
-            <div style="max-height: 550px; overflow-y: auto;">
-              <i-table highlight-row  :columns="columns" :data="displayedData" @on-row-click="handleRowSelect"></i-table>
-            </div>
+            <!-- <div style="max-height: 550px; overflow-y: auto;"> -->
+              <i-table highlight-row  :columns="columns" :data="displayedData" @on-row-click="handleRowSelect" class="data-table"></i-table>
+            <!-- </div> -->
         </div>
-    </card>
+    </Card>
 </template>
 
 <script>
@@ -137,4 +137,17 @@ module.exports = {
 </script>
 
 <style>
+.data-table th div{
+padding-left: 5px;
+padding-right: 5px;
+}
+.data-table td div{
+padding-left: 5px;
+padding-right: 5px;
+}
+.tracking-list {
+  height: calc(100vh - 80px);
+  overflow-y: auto;
+}
+
 </style>
diff --git a/setup.py b/setup.py
index 95f7279..4330adc 100644
--- a/setup.py
+++ b/setup.py
@@ -8,7 +8,7 @@
 
 setup(
     name='lyrebird-tracking',
-    version='0.10.1',
+    version='0.10.2',
     packages=['lyrebird_tracking'],
     url='https://github.com/meituan/lyrebird-tracking',
     author='HBQA',