pleroma-fe

commit: b461fc1c4a28aa03f9cc2a3e4b99b52355885364
parent 16031934369e818a4fe1a11749188d273d9c17f6
Author: Henry Jameson <me@hjkos.com>
Date:   Tue,  7 Jan 2025 22:08:12 +0200

add option to center the modal

Diffstat:
M
src/components/dialog_modal/dialog_modal.js
5
+++++
M
src/components/dialog_modal/dialog_modal.vue
6
+++++-
M
src/components/settings_modal/tabs/appearance_tab.vue
5
+++++
M
src/i18n/en.json
1
+
M
src/modules/config.js
1
+
M
src/modules/instance.js
1
+

6 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/src/components/dialog_modal/dialog_modal.js b/src/components/dialog_modal/dialog_modal.js
@@ -8,6 +8,11 @@ const DialogModal = {
       default: () => {},
       type: Function
     }
+  },
+  computed: {
+    mobileCenter () {
+      return this.$store.getters.mergedConfig.modalMobileCenter
+    }
   }
 }
 
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
@@ -1,7 +1,7 @@
 <template>
   <span
     class="dialog-container"
-    :class="{ 'dark-overlay': darkOverlay }"
+    :class="{ 'dark-overlay': darkOverlay, '-center-mobile': mobileCenter }"
     @click.self.stop="onCancel()"
   >
     <div
@@ -100,6 +100,10 @@
     justify-content: stretch;
     align-items: end;
     justify-items: stretch;
+
+    &.-center-mobile {
+      align-items: center;
+    }
   }
 
   .dialog-modal.panel {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -346,6 +346,11 @@
       <h2>{{ $t('settings.visual_tweaks') }}</h2>
       <ul class="setting-list">
         <li>
+          <BooleanSetting path="modalMobileCenter">
+            {{ $t('settings.mobile_center_dialog') }}
+          </BooleanSetting>
+        </li>
+        <li>
           <ChoiceSetting
             id="forcedRoundness"
             path="forcedRoundness"
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -381,6 +381,7 @@
     "actor_type_Person": "a normal user",
     "actor_type_Service": "a bot",
     "actor_type_Group": "a group",
+    "mobile_center_dialog": "Vertically center dialogs on mobile",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -142,6 +142,7 @@ export const defaultState = {
   modalOnApproveFollow: undefined, // instance default
   modalOnDenyFollow: undefined, // instance default
   modalOnRemoveUserFromFollowers: undefined, // instance default
+  modalMobileCenter: undefined,
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -82,6 +82,7 @@ const defaultState = {
   modalOnApproveFollow: false,
   modalOnDenyFollow: false,
   modalOnRemoveUserFromFollowers: false,
+  modalMobileCenter: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',