setting NotificationReadToggle options for several cases. improve options

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="btn-group btn-group-sm float-end"
+    <div :class="{'btn-group btn-group-sm float-end': isButtonGroup }"
          role="group" aria-label="Notification actions">
 
         <button v-if="isRead"
@@ -10,9 +10,9 @@
                 @click="markAsUnread"
                 >
             <i class="fa fa-sm fa-envelope-o"></i>
-            <template v-if="!buttonNoText">
+            <span v-if="!buttonNoText" class="ps-2">
                 {{ $t('markAsUnread') }}
-            </template>
+            </span>
         </button>
 
         <button v-if="!isRead"
@@ -23,16 +23,20 @@
                 @click="markAsRead"
                 >
             <i class="fa fa-sm fa-envelope-open-o"></i>
-            <template v-if="!buttonNoText">
+            <span v-if="!buttonNoText" class="ps-2">
                 {{ $t('markAsRead') }}
-            </template>
+            </span>
         </button>
 
-        <a v-if="showButton"
-           type="button" class="btn btn-outline-primary"
-           :href="showUrl">
+        <a v-if="isButtonGroup"
+            type="button"
+            class="btn btn-outline-primary"
+            :href="showUrl"
+            :title="$t('action.show')"
+            >
             <i class="fa fa-sm fa-eye"></i>
         </a>
+
     </div>
 </template>
 
@@ -50,6 +54,7 @@ export default {
             required: true,
             type: Number,
         },
+        // Optional
         buttonClass: {
             required: false,
             type: String
@@ -65,14 +70,17 @@ export default {
     },
     emits: ['markRead', 'markUnread'],
     computed: {
+        /// [Option] override default button appearance (btn-misc)
         overrideClass() {
-            console.log('button', this.buttonClass);
             return this.buttonClass ? this.buttonClass : 'btn-misc'
         },
+        /// [Option] don't display text on button
         buttonHideText() {
             return this.buttonNoText;
         },
-        showButton() {
+        /// [Option] showUrl is href for show page second button.
+        //  When passed, the component return a button-group with 2 buttons.
+        isButtonGroup() {
             return !!this.showUrl
         }
     },