diff --git a/ui/src/components/Clients.vue b/ui/src/components/Clients.vue index e327b4ddd0c385b9f57a1dbfc3426e1ac49f92a8..f383e779467045c3e78c82ed22b28301df1508c4 100644 --- a/ui/src/components/Clients.vue +++ b/ui/src/components/Clients.vue @@ -19,7 +19,7 @@ <v-col v-for="(client, i) in clients" :key="i" - cols="6" + sm12 lg6 > <v-card :color="client.enable ? '#1F7087' : 'warning'" @@ -55,34 +55,61 @@ </v-chip> </v-card-text> <v-card-actions> - <v-btn - text - :href="`${apiBaseUrl}/client/${client.id}/config?qrcode=false`" - > - Download - <v-icon right dark>mdi-cloud-download-outline</v-icon> - </v-btn> - <v-btn + <v-tooltip bottom> + <template v-slot:activator="{ on }"> + <v-btn + text + :href="`${apiBaseUrl}/client/${client.id}/config?qrcode=false`" + v-on="on" + > + <span class="d-none d-lg-flex">Download</span> + <v-icon right dark>mdi-cloud-download-outline</v-icon> + </v-btn> + </template> + <span>Download</span> + </v-tooltip> + + <v-tooltip bottom> + <template v-slot:activator="{ on }"> + <v-btn text @click.stop="startUpdateClient(client)" - > - Edit + v-on="on" + > + <span class="d-none d-lg-flex">Edit</span> <v-icon right dark>mdi-square-edit-outline</v-icon> </v-btn> - <v-btn - text - @click="deleteClient(client)" - > - Delete - <v-icon right dark>mdi-trash-can-outline</v-icon> - </v-btn> - <v-btn - text - @click="sendEmailClient(client.id)" - > - Send email - <v-icon right dark>mdi-email-send-outline</v-icon> - </v-btn> + </template> + <span>Edit</span> + </v-tooltip> + + <v-tooltip bottom> + <template v-slot:activator="{ on }"> + <v-btn + text + @click="deleteClient(client)" + v-on="on" + > + <span class="d-none d-lg-flex">Delete</span> + <v-icon right dark>mdi-trash-can-outline</v-icon> + </v-btn> + </template> + <span>Delete</span> + </v-tooltip> + + <v-tooltip bottom> + <template v-slot:activator="{ on }"> + <v-btn + text + @click="sendEmailClient(client.id)" + v-on="on" + > + <span class="d-none d-lg-flex">Send Email</span> + <v-icon right dark>mdi-email-send-outline</v-icon> + </v-btn> + </template> + <span>Send Email</span> + </v-tooltip> <v-spacer/> <v-tooltip right> <template v-slot:activator="{ on }">