Fix: styles

baking-bad · Jun 15, 2022 · ca5ae1e · ca5ae1e
1 parent 99a44d9
commit ca5ae1e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 25 deletions.
diff --git a/src/components/BookmarkDialog.vue b/src/components/BookmarkDialog.vue
@@ -1,42 +1,57 @@
 <template>
-    <v-dialog v-model="show" max-width="500" persistent>
+    <v-dialog v-model="show" max-width="500" @keydown.esc="show = false" @keydown.enter="saveOnEnter" persistent>
       <v-card flat outlined>
-      <v-card-title class="sidebar d-flex justify-center py-2">
-        <span class="body-1 font-weight-medium text-uppercase text--secondary">Your contract name</span>
-        <v-spacer></v-spacer>
-        <v-btn icon small @click="show = false">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </v-card-title>
-      <v-card-text class="pt-6 pb-0">
-        <v-text-field 
-            v-model="name"
-            hide-details
-            label="Alias" 
-            placeholder="Type here custom contract name" 
-            >
-        </v-text-field>
-      </v-card-text>
-      <v-card-actions class="justify-end px-5">
-        <v-btn color="primary" text @click="add">Add bookmark</v-btn>
-      </v-card-actions>
-    </v-card>
+        <v-card-title class="sidebar d-flex justify-center py-2">
+          <span class="body-1 font-weight-medium text-uppercase text--secondary">Your contract name</span>
+          <v-spacer></v-spacer>
+          <v-btn icon small @click.stop="show = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text class="pt-6 pb-0">
+          <v-text-field 
+              v-model="name"
+              hide-details
+              label="Alias" 
+              autofocus
+              placeholder="Type here custom contract name" 
+              >
+          </v-text-field>
+        </v-card-text>
+        <v-card-actions class="justify-end px-5">
+          <v-btn color="primary" text @click="add">Add bookmark</v-btn>
+        </v-card-actions>
+      </v-card>
     </v-dialog>
 </template>
 
 <script>
 export default {
     name: "BookmarkDialog",
     props: {
-        show: Boolean,
+        value: Boolean,
         alias: String
     },
     data: () => ({
         name: ""
     }),
+    computed: {
+      show: {
+        get () {
+          return this.value
+        },
+        set (value) {
+          this.$emit('input', value)
+        }
+      }
+    },
     methods: {
         add() {
             this.$emit('added', this.name)
+        },
+        saveOnEnter() {
+          this.add();
+          this.show = false;
         }
     },
     watch: {

diff --git a/src/components/Bookmarks.vue b/src/components/Bookmarks.vue
@@ -1,12 +1,12 @@
 <template>
-    <v-menu offset-y max-height="500">
+    <v-menu offset-y max-height="500" max-width="400">
       <template v-slot:activator="{ on, attrs }">
         <v-btn class="btn-class text--secondary" icon v-bind="attrs" v-on="on">
             <v-icon v-if="keysCount > 0">mdi-star</v-icon>
             <v-icon v-else>mdi-star-outline</v-icon>
         </v-btn>
       </template>
-      <v-list v-if="keysCount > 0" >
+      <v-list v-if="keysCount > 0" class="pa-0 avg-gas-consumption">
         <v-list-item v-for="(item, index) in items" :key="index" :to="`/${item.network}/${item.address}/operations`">
             <v-list-item-content>
                 <v-list-item-title>{{ item.alias || item.address }}</v-list-item-title>

diff --git a/src/views/contract/Contract.vue b/src/views/contract/Contract.vue
@@ -84,7 +84,7 @@
         :off-chain-views="offChainViews"
       ></router-view>
 
-      <BookmarkDialog :show="openBookMarkDialog" :alias="contract.alias || ``" @added="onBookmarkAdded"/>
+      <BookmarkDialog v-model="openBookMarkDialog" :alias="contract.alias || ``" @added="onBookmarkAdded"/>
     </VContainer>
   </div>
 </template>