Use button footer

VedaWebProject · Nov 30, 2023 · e0d6d87 · e0d6d87
1 parent 4f7a445
commit e0d6d87
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 30 deletions.
diff --git a/Tekst-Web/src/views/ResetView.vue b/Tekst-Web/src/views/ResetView.vue
@@ -5,10 +5,11 @@ import { useMessages } from '@/messages';
 import type { FormInst, FormItemInst, FormItemRule } from 'naive-ui';
 import { ref } from 'vue';
 import { $t } from '@/i18n';
-import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui';
+import { NInput, NForm, NFormItem, NButton } from 'naive-ui';
 import { useRoute } from 'vue-router';
 import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import ButtonFooter from '@/components/ButtonFooter.vue';
 
 const { message } = useMessages();
 const route = useRoute();
@@ -116,17 +117,11 @@ onMounted(() => {
           />
         </n-form-item>
       </n-form>
-      <n-space :size="12" justify="end">
-        <n-button
-          block
-          type="primary"
-          :loading="loading"
-          :disabled="loading"
-          @click="handlePasswordSave"
-        >
+      <ButtonFooter>
+        <n-button type="primary" :loading="loading" :disabled="loading" @click="handlePasswordSave">
           {{ $t('general.saveAction') }}
         </n-button>
-      </n-space>
+      </ButtonFooter>
     </div>
   </div>
 </template>
diff --git a/Tekst-Web/src/views/account/AccountManageView.vue b/Tekst-Web/src/views/account/AccountManageView.vue
@@ -8,7 +8,6 @@ import type { FormInst, FormItemInst, FormItemRule } from 'naive-ui';
 import {
   NCheckbox,
   NButton,
-  NSpace,
   NInput,
   NFormItem,
   NForm,
@@ -23,6 +22,7 @@ import type { UserUpdate, UserUpdatePublicFields } from '@/api';
 import { negativeButtonProps, positiveButtonProps } from '@/components/dialogButtonProps';
 import HelpButtonWidget from '@/components/HelpButtonWidget.vue';
 import IconHeading from '@/components/typography/IconHeading.vue';
+import ButtonFooter from '@/components/ButtonFooter.vue';
 
 import ManageAccountsRound from '@vicons/material/ManageAccountsRound';
 
@@ -244,26 +244,24 @@ async function handlepublicFieldsSave() {
             />
           </n-form-item>
         </n-form>
-        <n-space :size="12" justify="end">
+        <ButtonFooter>
           <n-button
             secondary
-            block
             :loading="loading"
             :disabled="loading || !emailModelChanged"
             @click="() => (emailFormModel = initialEmailModel())"
           >
             {{ $t('general.resetAction') }}
           </n-button>
           <n-button
-            block
             type="primary"
             :loading="loading"
             :disabled="loading || !emailModelChanged"
             @click="handleEmailSave"
           >
             {{ $t('general.saveAction') }}
           </n-button>
-        </n-space>
+        </ButtonFooter>
 
         <h2>{{ $t('models.user.password') }}</h2>
         <n-form
@@ -300,26 +298,24 @@ async function handlepublicFieldsSave() {
             />
           </n-form-item>
         </n-form>
-        <n-space :size="12" justify="end">
+        <ButtonFooter>
           <n-button
             secondary
-            block
             :loading="loading"
             :disabled="loading || !passwordModelChanged"
             @click="() => (passwordFormModel = initialPasswordModel())"
           >
             {{ $t('general.resetAction') }}
           </n-button>
           <n-button
-            block
             type="primary"
             :loading="loading"
             :disabled="loading || !passwordModelChanged"
             @click="handlePasswordSave"
           >
             {{ $t('general.saveAction') }}
           </n-button>
-        </n-space>
+        </ButtonFooter>
       </div>
     </n-grid-item>
 
@@ -370,26 +366,24 @@ async function handlepublicFieldsSave() {
             />
           </n-form-item>
         </n-form>
-        <n-space :size="12" justify="end">
+        <ButtonFooter>
           <n-button
             secondary
-            block
             :loading="loading"
             :disabled="loading || !userDataModelChanged"
             @click="() => (userDataFormModel = initialUserDataModel())"
           >
             {{ $t('general.resetAction') }}
           </n-button>
           <n-button
-            block
             type="primary"
             :loading="loading"
             :disabled="loading || !userDataModelChanged"
             @click="handleUserDataSave"
           >
             {{ $t('general.saveAction') }}
           </n-button>
-        </n-space>
+        </ButtonFooter>
       </div>
     </n-grid-item>
 
@@ -416,26 +410,24 @@ async function handlepublicFieldsSave() {
             </n-checkbox>
           </n-form-item>
         </n-form>
-        <n-space :size="12" justify="end">
+        <ButtonFooter>
           <n-button
             secondary
-            block
             :loading="loading"
             :disabled="loading || !publicFieldsModelChanged"
             @click="() => (publicFieldsFormModel = initialPublicFieldsModel())"
           >
             {{ $t('general.resetAction') }}
           </n-button>
           <n-button
-            block
             type="primary"
             :loading="loading"
             :disabled="loading || !publicFieldsModelChanged"
             @click="handlepublicFieldsSave"
           >
             {{ $t('general.saveAction') }}
           </n-button>
-        </n-space>
+        </ButtonFooter>
       </div>
     </n-grid-item>
   </n-grid>

diff --git a/Tekst-Web/src/views/admin/AdminTextsLevelsView.vue b/Tekst-Web/src/views/admin/AdminTextsLevelsView.vue
@@ -3,7 +3,6 @@ import { useStateStore } from '@/stores';
 import InsertLevelButton from '@/components/admin/InsertLevelButton.vue';
 import { textFormRules } from '@/formRules';
 import {
-  NSpace,
   NIcon,
   NInput,
   NSelect,
@@ -309,7 +308,7 @@ async function handleModalSubmit() {
             </div>
           </template>
           <template #action="{ index: indexAction, create, remove }">
-            <n-space style="margin-left: 20px; flex-wrap: nowrap">
+            <ButtonFooter>
               <n-button
                 secondary
                 circle
@@ -330,7 +329,7 @@ async function handleModalSubmit() {
                   <n-icon :component="AddRound" />
                 </template>
               </n-button>
-            </n-space>
+            </ButtonFooter>
           </template>
         </n-dynamic-input>
       </n-form-item>