refactor(buttons): centre-aligned

emqx · Dec 27, 2024 · a77036f · a77036f
1 parent 28d456e
commit a77036f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/src/components/Buttons/CreateButton.vue b/src/components/Buttons/CreateButton.vue
@@ -1,15 +1,19 @@
 <template>
-  <el-button type="primary" :icon="Plus">
-    <template v-if="!$slots.default">
-      {{ t('Base.create') }}
-    </template>
+  <el-button type="primary" :icon="Plus" v-if="noText"></el-button>
+  <el-button type="primary" :icon="Plus" v-else>
+    <template v-if="!$slots.default">{{ t('Base.create') }}</template>
     <slot />
   </el-button>
 </template>
 
 <script setup lang="ts">
 import { Plus } from '@element-plus/icons-vue'
 import { useI18n } from 'vue-i18n'
+import { defineProps } from 'vue'
+
+defineProps<{
+  noText?: boolean
+}>()
 
 const { t } = useI18n()
 </script>
diff --git a/src/components/Buttons/RefreshButton.vue b/src/components/Buttons/RefreshButton.vue
@@ -1,6 +1,7 @@
 <template>
-  <el-button type="primary" :icon="Refresh">
-    <template v-if="!$slots.default && !noText">
+  <el-button type="primary" :icon="Refresh" v-if="noText"></el-button>
+  <el-button type="primary" :icon="Refresh" v-else>
+    <template v-if="!$slots.default">
       {{ t('Base.refresh') }}
     </template>
     <slot />

diff --git a/src/components/Buttons/SearchButton.vue b/src/components/Buttons/SearchButton.vue
@@ -1,6 +1,7 @@
 <template>
-  <el-button type="primary" plain :icon="Search">
-    <template v-if="!noText">{{ tl('search') }}</template>
+  <el-button type="primary" plain :icon="Search" v-if="noText"></el-button>
+  <el-button type="primary" plain :icon="Search" v-else>
+    <template>{{ tl('search') }}</template>
   </el-button>
 </template>
 

diff --git a/src/views/Auth/components/AuthnManager.vue b/src/views/Auth/components/AuthnManager.vue
@@ -32,7 +32,7 @@
           <authn-users-import @uploadedData="loadData" />
         </template>
         <el-tooltip :content="$t('Base.add')" placement="top">
-          <CreateButton class="icon-button" @click="addCommand"><span /></CreateButton>
+          <CreateButton class="icon-button" @click="addCommand" no-text />
         </el-tooltip>
       </div>
     </div>

diff --git a/src/views/Auth/components/AuthzManager.vue b/src/views/Auth/components/AuthzManager.vue
@@ -24,7 +24,9 @@
         </template>
       </div>
       <el-tooltip :content="$t('Base.add')" placement="top">
-        <CreateButton class="icon-button" @click="handleAdd"><span /></CreateButton>
+        <CreateButton class="icon-button" @click="handleAdd"  >
+          <template v-if="false"></template>
+        </CreateButton>
       </el-tooltip>
     </div>
     <el-table