Feature/tooltip and address

src/components/AccountItem.vue

@@ -10,7 +10,12 @@
                 'bg-Twitter': chain === 'Twitter',
             }"
             :style="{ width: size + 'px', height: size + 'px' }"
-        ></div>
+            @mouseenter="isHover = true"
+            @mouseout="isHover = false"
+            @touchstart="isHover = true"
+            @touchend="isHover = false"
+        />
+        <Tooltip v-if="$props.address" v-show="isHover" :text="$props.address" view-option="account" />
         <Button
             v-show="deleteMode"
             size="sm"
@@ -25,20 +30,24 @@
 <script lang="ts">
 import { Vue, Options } from 'vue-class-component';
 import Button from '@/components/Button.vue';
+import Tooltip from '@/components/Tooltip.vue';
 
 @Options({
-    components: { Button },
+    components: { Tooltip, Button },
     props: {
         size: Number,
         chain: String,
         deleteMode: Boolean,
+        address: String,
     },
 })
 export default class AccountItem extends Vue {
     size!: Number;
     chain!: String;
     deleteMode!: Boolean;
 
+    isHover: boolean = false;
+
     deleteAccount() {
         this.$emit('deleteAccount');
     }

src/components/Profile.vue

@@ -20,7 +20,7 @@
             <LinkButton class="relative">
                 <span v-if="rns">{{ rns }}{{ suffix }}</span>
                 <span v-else>{{ filter(address) }}</span>
-                <Tooltip v-show="isShowingTooltip" :text="$props.clickAddressNotice" view-type="options" />
+                <Tooltip v-show="isShowingTooltip" :text="$props.clickAddressNotice" />
             </LinkButton>
         </div>
         <div class="col-span-full md:col-span-2 md:row-start-3 md:col-start-3" v-if="website">

src/components/Tooltip.vue

@@ -1,7 +1,10 @@
 <template>
     <span
         class="tooltip"
-        :class="[marginLeftClass, widthClass, heightClass, !widthClass && !heightClass ? 'whitespace-nowrap' : '']"
+        :class="{
+            'color-default': viewOption === 'default' || !viewOption,
+            'color-account': viewOption === 'account',
+        }"
         >{{ text }}</span
     >
 </template>
@@ -12,32 +15,39 @@ import { Vue, Options } from 'vue-class-component';
 @Options({
     props: {
         text: String,
-        heightClass: String,
-        widthClass: String,
-        marginLeftClass: String,
-        viewType: String,
+        viewOption: String,
     },
 })
 export default class Tooltip extends Vue {
     text!: String;
-    heightClass!: String;
-    widthClass!: String;
-    marginLeftClass!: String;
-    viewType!: String;
 }
 </script>
 
 <style lang="postcss" scoped>
 @layer components {
     .tooltip {
-        @apply absolute transform -translate-x-1/2 inline-block top-0 left-1/2 rounded-sm px-2 py-1 text-primary-text bg-primary-link font-normal border-link border-primary-link-border;
-        left: calc(100% + 45px);
+        @apply absolute rounded-sm px-2 py-1 font-normal border-link z-10 whitespace-nowrap;
+        left: calc(100% + 5px);
+        top: calc(50% - 14px);
     }
 
     .tooltip::after {
         content: '';
         @apply absolute bottom-full left-0 -ml-2 top-3 border-solid border-4;
-        border-color: transparent var(--color-sharebutton-border) transparent transparent;
+    }
+
+    .color-default {
+        @apply text-primary-text bg-primary-link border-primary-link-border;
+        &.tooltip::after {
+            border-color: transparent var(--color-sharebutton-border) transparent transparent;
+        }
+    }
+
+    .color-account {
+        @apply text-account-title bg-account-bg shadow-account;
+        &.tooltip::after {
+            border-color: transparent var(--color-account-bg) transparent transparent;
+        }
     }
 }
 </style>

src/themes/default.css

@@ -85,7 +85,7 @@
         --color-modal-border: transparent;
 
         --color-input-border: transparent;
-        --color-linkbutton-bg: rgba(0, 114, 255, 0.1);
+        --color-linkbutton-bg: rgb(229, 241, 255);
         --color-linkbutton-border: none;
         --color-sharebutton-border: rgba(0, 114, 255, 0.1);
 

src/views/Setup/SetupAccounts.vue

@@ -39,11 +39,14 @@
                     :is-having-content="true"
                 >
                     <template #content>
-                        <AccountItem
-                            class="shadow-account-sm inline-flex m-0.5 rounded-full"
-                            :size="64"
-                            chain="Ethereum"
-                        />
+                        <div class="relative">
+                            <AccountItem
+                                class="shadow-account-sm inline-flex m-0.5 rounded-full"
+                                :size="64"
+                                chain="Ethereum"
+                                :address="addressFilter(ethAddress)"
+                            />
+                        </div>
                     </template>
                 </Card>
                 <Card
@@ -114,6 +117,20 @@
                                 />
                             </div>
                         </div>
+                        <div v-else-if="mode === 'delete'" class="md:h-screen-30">
+                            <div>
+                                <AccountItem
+                                    v-for="(account, index) in show"
+                                    :key="account.platform + account.identity"
+                                    class="inline-flex m-0.5 rounded-full shadow-account cursor-pointer"
+                                    :size="64"
+                                    :chain="account.platform"
+                                    :address="addressFilter(account.identity)"
+                                    :delete-mode="true"
+                                    @delete-account="deleteAccount(index)"
+                                />
+                            </div>
+                        </div>
                         <div v-else>
                             <draggable
                                 class="min-h-20 md:h-screen-30 md:overflow-y-auto"
@@ -127,8 +144,7 @@
                                         style="cursor: grab"
                                         :size="64"
                                         :chain="element.platform"
-                                        :delete-mode="mode === 'delete'"
-                                        @delete-account="deleteAccount(index)"
+                                        :address="addressFilter(element.identity)"
                                     />
                                 </template>
                             </draggable>
@@ -184,6 +200,7 @@
                                     style="cursor: grab"
                                     :size="64"
                                     :chain="element.platform"
+                                    :address="addressFilter(element.identity)"
                                 />
                             </template>
                         </draggable>
@@ -504,7 +521,9 @@ export default class SetupAccounts extends Vue {
     }
 
     async deleteAccount(i: number) {
-        this.toDelete.push(...this.show.splice(i, 1));
+        if (confirm(`Sure to delete ${this.show[i].identity} ?`)) {
+            this.toDelete.push(...this.show.splice(i, 1));
+        }
     }
 
     hideAll() {
@@ -596,6 +615,10 @@ export default class SetupAccounts extends Vue {
         this.isLoading = false;
         window.history.back(); // Back
     }
+
+    addressFilter(address: string) {
+        return address.length > 14 ? `${address.slice(0, 6)}....${address.slice(-4)}` : address;
+    }
 }
 </script>