From 655f207b3711a7392354e7749c5bd0f842eaf7f4 Mon Sep 17 00:00:00 2001
From: xiayifan <xiayifan1@huawei.com>
Date: Tue, 15 Sep 2020 15:45:19 +0800
Subject: [PATCH] UI the page style issue is fixed  1.optimized the width and
 layout of the operate bar on the summary list page   2.modified the theme
 colors of the function buttons of the scalar, scalar comparison, histogram
 and tensor modules

---
 .../ui/src/components/debuggerGridTableSimple.vue        | 4 ++--
 mindinsight/ui/src/components/gridTableSimple.vue        | 4 ++--
 mindinsight/ui/src/components/histogramUnit.vue          | 5 +++--
 mindinsight/ui/src/views/train-manage/compare-plate.vue  | 9 +++++----
 mindinsight/ui/src/views/train-manage/histogram.vue      | 5 +++--
 mindinsight/ui/src/views/train-manage/scalar.vue         | 9 +++++----
 mindinsight/ui/src/views/train-manage/summary-manage.vue | 7 ++-----
 7 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/mindinsight/ui/src/components/debuggerGridTableSimple.vue b/mindinsight/ui/src/components/debuggerGridTableSimple.vue
index 96e3df67..516d2d6a 100644
--- a/mindinsight/ui/src/components/debuggerGridTableSimple.vue
+++ b/mindinsight/ui/src/components/debuggerGridTableSimple.vue
@@ -575,11 +575,11 @@ export default {
       line-height: 34px;
       cursor: pointer;
       :hover {
-        color: #3e98c5;
+        color: #00a5a7;
       }
     }
     .active-color {
-      color: #3e98c5;
+      color: #00a5a7;
     }
     .filter-container {
       float: left;
diff --git a/mindinsight/ui/src/components/gridTableSimple.vue b/mindinsight/ui/src/components/gridTableSimple.vue
index 5bee1231..546a26d2 100644
--- a/mindinsight/ui/src/components/gridTableSimple.vue
+++ b/mindinsight/ui/src/components/gridTableSimple.vue
@@ -483,11 +483,11 @@ export default {
       line-height: 34px;
       cursor: pointer;
       :hover {
-        color: #3e98c5;
+        color: #00a5a7;
       }
     }
     .active-color {
-      color: #3e98c5;
+      color: #00a5a7;
     }
     .filter-container {
       float: left;
diff --git a/mindinsight/ui/src/components/histogramUnit.vue b/mindinsight/ui/src/components/histogramUnit.vue
index 5d0454ed..5568cc63 100644
--- a/mindinsight/ui/src/components/histogramUnit.vue
+++ b/mindinsight/ui/src/components/histogramUnit.vue
@@ -212,6 +212,7 @@ export default {
           emphasis: {
             iconStyle: {
               textPosition: 'top',
+              borderColor: '#00A5A7',
             },
           },
           // toolbox
@@ -221,7 +222,7 @@ export default {
               show: true,
               title: this.$t('histogram.fullScreen'),
               iconStyle: {
-                borderColor: this.fullScreen ? '#3E98C5' : '#6D7278',
+                borderColor: this.fullScreen ? '#00A5A7' : '#6D7278',
               },
               icon: CommonProperty.fullScreenIcon,
               onclick() {
@@ -305,7 +306,7 @@ export default {
           this.charOption.grid.right = 140;
         }
         this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
       } else {
         this.charOption.grid.right = 80;
         this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
diff --git a/mindinsight/ui/src/views/train-manage/compare-plate.vue b/mindinsight/ui/src/views/train-manage/compare-plate.vue
index 10d394b4..601f5d74 100644
--- a/mindinsight/ui/src/views/train-manage/compare-plate.vue
+++ b/mindinsight/ui/src/views/train-manage/compare-plate.vue
@@ -859,6 +859,7 @@ export default {
           emphasis: {
             iconStyle: {
               textPosition: 'top',
+              borderColor: '#00A5A7',
             },
           },
           // toolbox
@@ -868,7 +869,7 @@ export default {
               show: true,
               title: this.$t('scalar.fullScreen'),
               iconStyle: {
-                borderColor: sampleObject.fullScreen ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.fullScreen ? '#00A5A7' : '#6D7278',
               },
               icon: CommonProperty.fullScreenIcon,
               onclick() {
@@ -879,7 +880,7 @@ export default {
               show: true,
               title: this.$t('scalar.toggleYaxisScale'),
               iconStyle: {
-                borderColor: sampleObject.log ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.log ? '#00A5A7' : '#6D7278',
               },
               icon:
                 'path://M0 150 c0 -18 7 -20 85 -20 78 0 85 2 85 20 0 18 -7 20 -85 20 -78 0 -85 -2 ' +
@@ -964,7 +965,7 @@ export default {
       sampleObject.fullScreen = !sampleObject.fullScreen;
       if (sampleObject.fullScreen) {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
         sampleObject.charData.charOption.grid.right = 80;
       } else {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
@@ -1636,7 +1637,7 @@ export default {
       const log = !sampleObject.log;
       if (log) {
         sampleObject.charData.charOption.toolbox.feature.myTool2.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
         sampleObject.charData.charOption.yAxis.type = 'log';
       } else {
         sampleObject.charData.charOption.yAxis.type = 'value';
diff --git a/mindinsight/ui/src/views/train-manage/histogram.vue b/mindinsight/ui/src/views/train-manage/histogram.vue
index 42786406..dec062d9 100644
--- a/mindinsight/ui/src/views/train-manage/histogram.vue
+++ b/mindinsight/ui/src/views/train-manage/histogram.vue
@@ -1172,6 +1172,7 @@ export default {
           emphasis: {
             iconStyle: {
               textPosition: 'top',
+              borderColor: '#00A5A7',
             },
           },
           // toolbox
@@ -1181,7 +1182,7 @@ export default {
               show: true,
               title: this.$t('histogram.fullScreen'),
               iconStyle: {
-                borderColor: sampleObject.fullScreen ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.fullScreen ? '#00A5A7' : '#6D7278',
               },
               icon: CommonProperty.fullScreenIcon,
               onclick() {
@@ -1360,7 +1361,7 @@ export default {
           sampleObject.charOption.grid.right = 140;
         }
         sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
       } else {
         sampleObject.charOption.grid.right = 80;
         sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
diff --git a/mindinsight/ui/src/views/train-manage/scalar.vue b/mindinsight/ui/src/views/train-manage/scalar.vue
index 6de42cc2..435cc401 100644
--- a/mindinsight/ui/src/views/train-manage/scalar.vue
+++ b/mindinsight/ui/src/views/train-manage/scalar.vue
@@ -1121,6 +1121,7 @@ export default {
             iconStyle: {
               textPosition: 'top',
               textAlign: 'right',
+              borderColor: '#00A5A7',
             },
           },
           // toolbox
@@ -1130,7 +1131,7 @@ export default {
               show: true,
               title: this.$t('scalar.fullScreen'),
               iconStyle: {
-                borderColor: sampleObject.fullScreen ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.fullScreen ? '#00A5A7' : '#6D7278',
               },
               icon: CommonProperty.fullScreenIcon,
               onclick() {
@@ -1141,7 +1142,7 @@ export default {
               show: true,
               title: this.$t('scalar.toggleYaxisScale'),
               iconStyle: {
-                borderColor: sampleObject.log ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.log ? '#00A5A7' : '#6D7278',
               },
               icon:
                 'path://M0 150 c0 -18 7 -20 85 -20 78 0 85 2 85 20 0 18 -7 20 -85 20 -78 0 -85 -2 ' +
@@ -1260,7 +1261,7 @@ export default {
       sampleObject.fullScreen = !sampleObject.fullScreen;
       if (sampleObject.fullScreen) {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
         sampleObject.charData.charOption.grid.right = 80;
       } else {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
@@ -1810,7 +1811,7 @@ export default {
         const tempOriData = sampleObject.charData.oriData;
         const log = !sampleObject.log;
         if (log) {
-          tempOption.toolbox.feature.myTool2.iconStyle.borderColor = '#3E98C5';
+          tempOption.toolbox.feature.myTool2.iconStyle.borderColor = '#00A5A7';
           tempOption.yAxis.type = 'log';
         } else {
           tempOption.yAxis.type = 'value';
diff --git a/mindinsight/ui/src/views/train-manage/summary-manage.vue b/mindinsight/ui/src/views/train-manage/summary-manage.vue
index 9beba31a..4f0e90cd 100644
--- a/mindinsight/ui/src/views/train-manage/summary-manage.vue
+++ b/mindinsight/ui/src/views/train-manage/summary-manage.vue
@@ -72,7 +72,7 @@ limitations under the License.
             <el-table-column prop="operate"
                              :label="$t('summaryManage.operation')"
                              class-name="operate-container"
-                             width="400">
+                             :width="operateWidth">
               <template slot-scope="scope">
                 <span class="menu-item operate-btn"
                       v-if="scope.row.viewDashboard"
@@ -217,6 +217,7 @@ export default {
         type: 0,
       },
       tableDom: null,
+      operateWidth: localStorage.getItem('milang') === 'en-us' ? 415 : 300,
     };
   },
   computed: {},
@@ -542,12 +543,8 @@ export default {
     .list-table {
       height: 100%;
       .operate-container {
-        text-align: right;
         padding-right: 32px;
       }
-      th.operate-container {
-        text-align: center;
-      }
     }
   }
   .pagination-content {