From 316bfed04385ff3c370b13338d03b2f1ecbdd0b6 Mon Sep 17 00:00:00 2001
From: Nikolay Yurchenko <nickolai.yurchenko@gmail.com>
Date: Wed, 20 Mar 2019 18:31:01 +0200
Subject: [PATCH] Api key name visual reduction (#1534)

---
 .../src/components/apiKeys/ApiKeysItem.vue        | 15 +++++++++++++--
 .../src/components/apiKeys/CopyApiKeyPopup.vue    |  4 ++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/satellite/src/components/apiKeys/ApiKeysItem.vue b/web/satellite/src/components/apiKeys/ApiKeysItem.vue
index 2ed2ee150..f3859c7ca 100644
--- a/web/satellite/src/components/apiKeys/ApiKeysItem.vue
+++ b/web/satellite/src/components/apiKeys/ApiKeysItem.vue
@@ -11,7 +11,7 @@
                 <path d="M10.7756 14.334C10.4108 14.334 10.1226 14.6283 10.1226 15.0007C10.1226 15.3731 10.4108 15.6673 10.7756 15.6673C11.1404 15.6673 11.4287 15.3731 11.4287 15.0007C11.4287 14.6283 11.1404 14.334 10.7756 14.334Z" fill="#2683FF"/>
             </svg>
         </div>
-        <p class="apikey-item-container__name">{{ apiKey.name }}</p>
+        <p class="apikey-item-container__name">{{ apiKeyName }}</p>
         <p class="apikey-item-container__date">{{ new Date(apiKey.createdAt).toLocaleDateString() }}</p>
     </div>
 </template>
@@ -23,6 +23,17 @@ import { Component, Vue } from 'vue-property-decorator';
     {
         props: {
             apiKey: Object,
+        },
+        computed: {
+            apiKeyName: function (): string {
+                let name = this.$props.apiKey.name;
+
+                if (name.length < 12) {
+                    return name;
+                }
+
+                return name.slice(0,12) + '...';
+            }
         }
     }
 )
@@ -106,4 +117,4 @@ export default class ApiKeysItem extends Vue {}
             fill: #2683FF;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/satellite/src/components/apiKeys/CopyApiKeyPopup.vue b/web/satellite/src/components/apiKeys/CopyApiKeyPopup.vue
index 3f78c8f8b..5901d5f66 100644
--- a/web/satellite/src/components/apiKeys/CopyApiKeyPopup.vue
+++ b/web/satellite/src/components/apiKeys/CopyApiKeyPopup.vue
@@ -140,6 +140,10 @@ export default class AddApiKeyPopup extends Vue {
                 }
             }
         }
+
+        &__close-cross-container {
+            cursor: pointer;
+        }
     }
     .input-container.full-input {
         width: 100%;