customize button style and size #295

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>
+

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>
 

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: {

dubbo-admin-ui/src/lang/zh.js

@@ -132,6 +132,8 @@ export default {
   detail: '详情',
   more: '更多',
   copyUrl: '复制 URL',
+  copy: '复制',
+  url: 'URL',
   copySuccessfully: '已复制',
   test: '测试',
   placeholders: {