From da4441f5d445f4372d410c75fbeca109aa6c1e97 Mon Sep 17 00:00:00 2001
From: nzomkxia <z82507200@gmail.com>
Date: Tue, 12 Feb 2019 16:25:01 +0800
Subject: [PATCH] customize button style and size #295

---
 .../src/components/ServiceDetail.vue          | 44 ++++++++++++++-----
 .../src/components/ServiceSearch.vue          | 31 ++++++++-----
 dubbo-admin-ui/src/lang/en.js                 |  2 +
 dubbo-admin-ui/src/lang/zh.js                 |  2 +
 4 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/dubbo-admin-ui/src/components/ServiceDetail.vue b/dubbo-admin-ui/src/components/ServiceDetail.vue
index f4241b3f0..94d7ff670 100644
--- a/dubbo-admin-ui/src/components/ServiceDetail.vue
+++ b/dubbo-admin-ui/src/components/ServiceDetail.vue
@@ -56,17 +56,21 @@
                 <td>{{getPort(props.item.address)}}</td>
                 <td></td>
                 <td></td>
-                <td><v-tooltip top>
-                  <v-btn
-                          small
-                          slot="activator"
-                          color="primary"
-                          @click="toCopyText(props.item.url)"
-                  >
-                    {{$t('copyUrl')}}
-                  </v-btn>
-                  <span>{{props.item.url}}</span>
-                </v-tooltip></td>
+                <td>
+                  <v-tooltip top>
+                    <v-btn
+                      class="tiny"
+                      slot="activator"
+                      color="primary"
+                      @mouseover="setHoverHint"
+                      @mouseout="setoutHint"
+                      @click="toCopyText(props.item.url)"
+                    >
+                        {{$t(hint)}}
+                    </v-btn>
+                    <span>{{props.item.url}}</span>
+                  </v-tooltip>
+                </td>
               </template>
             </v-data-table>
           </v-tab-item>
@@ -121,7 +125,8 @@
       providerDetails: [],
       consumerDetails: [],
       methodMetaData: [],
-      basic: []
+      basic: [],
+      hint: 'url'
     }),
     methods: {
       setmetaHeaders: function () {
@@ -143,6 +148,13 @@
           }
         ]
       },
+      setHoverHint: function () {
+        this.hint = 'copy'
+      },
+
+      setoutHint: function () {
+        this.hint = 'url'
+      },
       setdetailHeaders: function () {
         this.detailHeaders = {
           providers: [
@@ -261,3 +273,11 @@
   }
 </script>
 
+<style scoped>
+  .tiny {
+    min-width: 30px;
+    height: 20px;
+    font-size: 8px;
+  }
+</style>
+
diff --git a/dubbo-admin-ui/src/components/ServiceSearch.vue b/dubbo-admin-ui/src/components/ServiceSearch.vue
index 1f7706a65..dded4cdac 100644
--- a/dubbo-admin-ui/src/components/ServiceSearch.vue
+++ b/dubbo-admin-ui/src/components/ServiceSearch.vue
@@ -81,29 +81,30 @@
                 <td>{{props.item.appName}}</td>
                 <td class="text-xs-center px-0" nowrap>
                   <v-btn
-                    small
-                    color='primary'
-                    @click="toTestService(props.item)"
+                    class="tiny"
+                    color='success'
+                    :href='getHref(props.item.service, props.item.appName, props.item.group, props.item.version)'
                   >
-                    {{$t('test')}}
+                   {{ $t('detail') }}
                   </v-btn>
                   <v-btn
                     small
-                    color='primary'
-                    :href='getHref(props.item.service, props.item.appName, props.item.group, props.item.version)'
+                    class="tiny"
+                    outline
+                    @click="toTestService(props.item)"
                   >
-                   {{ $t('detail') }}
+                    {{$t('test')}}
                   </v-btn>
                   <v-menu
                   >
                     <v-btn
                       slot="activator"
-                      color="primary"
+                      class="tiny"
+                      outline
                       small
-                      dark
                     >
                       {{ $t('more') }}
-                      <v-icon>expand_more</v-icon>
+                      <v-icon class="tiny-icon" >arrow_drop_down</v-icon>
                     </v-btn>
                     <v-list>
                       <v-list-tile
@@ -331,5 +332,15 @@
     word-break: break-all;
   }
 
+  .tiny {
+    min-width: 30px;
+    height: 20px;
+    font-size: 8px;
+  }
+
+  .tiny-icon {
+    font-size: 18px;
+  }
+
 </style>
 
diff --git a/dubbo-admin-ui/src/lang/en.js b/dubbo-admin-ui/src/lang/en.js
index 4542d471d..85820e8eb 100644
--- a/dubbo-admin-ui/src/lang/en.js
+++ b/dubbo-admin-ui/src/lang/en.js
@@ -132,6 +132,8 @@ export default {
   detail: 'Detail',
   more: 'More',
   copyUrl: 'Copy URL',
+  copy: 'Copy',
+  url: 'URL',
   copySuccessfully: 'Copied',
   test: 'Test',
   placeholders: {
diff --git a/dubbo-admin-ui/src/lang/zh.js b/dubbo-admin-ui/src/lang/zh.js
index 34670282f..3b7a4d6f8 100644
--- a/dubbo-admin-ui/src/lang/zh.js
+++ b/dubbo-admin-ui/src/lang/zh.js
@@ -132,6 +132,8 @@ export default {
   detail: '详情',
   more: '更多',
   copyUrl: '复制 URL',
+  copy: '复制',
+  url: 'URL',
   copySuccessfully: '已复制',
   test: '测试',
   placeholders: {