hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: Improve admin settings design

Browse Source 
Adding sections permit to be more clear and will help if we add a new "External links" section (#1764)
This commit is contained in:
Massedil
2025-07-03 22:02:50 +02:00
parent 407f5b881e
commit 56facb204a
3 changed files with 430 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/i18n/en_US.json
View File

@@ -584,6 +584,7 @@
"Increase": "Increase",
"Increasing creation date": "Increasing creation date",
"Increasing number of members": "Increasing number of members",
"Informations":"Informations",
"Instance": "Instance",
"Instance Long Description": "Instance Long Description",
"Instance Name": "Instance Name",
@@ -849,6 +850,8 @@
"Open user menu": "Open user menu",
"Opened reports": "Opened reports",
"Or": "Or",
"Open": "Open",
"Options":"Options",
"Ordered list": "Ordered list",
"Organized": "Organized",
"Organized by": "Organized by",
@@ -896,6 +899,9 @@
"Pick a profile or a group": "Pick a profile or a group",
"Pick an identity": "Pick an identity",
"Pick an instance": "Pick an instance",
"Pick a profile or a group": "Pick a profile or a group",
"Pick": "Pick",
"Pictures": "Pictures",
"Please add as many details as possible to help identify the problem.": "Please add as many details as possible to help identify the problem.",
"Please check your spam folder if you didn't receive the email.": "Please check your spam folder if you didn't receive the email.",
"Please contact this instance's Mobilizon admin if you think this is a mistake.": "Please contact this instance's Mobilizon admin if you think this is a mistake.",
@@ -903,6 +909,7 @@
"Please enter your password to confirm this action.": "Please enter your password to confirm this action.",
"Please make sure the address is correct and that the page hasn't been moved.": "Please make sure the address is correct and that the page hasn't been moved.",
"Please read the {fullRules} published by {instance}'s administrators.": "Please read the {fullRules} published by {instance}'s administrators.",
"Policies" : "Policies",
"Popular groups close to you": "Popular groups close to you",
"Popular groups nearby {position}": "Popular groups nearby {position}",
"Post": "Post",
@@ -1037,6 +1044,7 @@
"SSL/TLS": "SSL/TLS",
"Save": "Save",
"Save draft": "Save draft",
"Save instance settings":"Save instance settings",
"Schedule": "Schedule",
"Search": "Search",
"Search events, groups, etc.": "Search events, groups, etc.",

5
src/i18n/fr_FR.json
View File

@@ -570,6 +570,7 @@
"Increase": "Augmenter",
"Increasing creation date": "Date de création croissante",
"Increasing number of members": "Nombre croissant de membres",
"Informations":"Informations",
"Instances following you": "Instances vous suivant",
"Instances you follow": "Instances que vous suivez",
"Instances": "Instances",
@@ -857,6 +858,7 @@
"Open main menu": "Ouvrir le menu principal",
"Open user menu": "Ouvrir le menu utilisateur",
"Open": "Ouvert",
"Options":"Options",
"Ordered list": "Liste ordonnée",
"Organized by {name}": "Organisé par {name}",
"Organized by": "Organisé par",
@@ -905,6 +907,7 @@
"Pick an instance": "Choisir une instance",
"Pick a profile or a group": "Choisir un profil ou groupe",
"Pick": "Choisir",
"Pictures": "Images",
"Please add as many details as possible to help identify the problem.": "Merci d'ajouter un maximum de détails afin d'aider à identifier le problème.",
"Please check your spam folder if you didn't receive the email.": "Merci de vérifier votre dossier des indésirables si vous n'avez pas reçu l'e-mail.",
"Please contact this instance's Mobilizon admin if you think this is a mistake.": "Veuillez contacter l'administrateur·rice de cette instance Mobilizon si vous pensez qu’il s’agit d’une erreur.",
@@ -912,6 +915,7 @@
"Please enter your password to confirm this action.": "Merci d'entrer votre mot de passe pour confirmer cette action.",
"Please make sure the address is correct and that the page hasn't been moved.": "Assurez‐vous que l’adresse est correcte et que la page n’a pas été déplacée.",
"Please read the {fullRules} published by {instance}'s administrators.": "Merci de lire les {fullRules} publiées par les administrateur·rice·s de {instance}.",
"Policies": "Règles",
"Popular groups close to you": "Groupes populaires proches de vous",
"Popular groups nearby {position}": "Groupes populaires près de {position}",
"Postal Code": "Code postal",
@@ -1047,6 +1051,7 @@
"Rules": "Règles",
"Save draft": "Enregistrer le brouillon",
"Save": "Enregistrer",
"Save instance settings":"Sauvegarder les paramètres de l'instance",
"Schedule": "Programme",
"Searching…": "Recherche en cours…",
"Search events, groups, etc.": "Rechercher des événements, des groupes, etc.",

121
src/views/Admin/SettingsView.vue
View File

@@ -7,8 +7,10 @@
]"
/>
<section v-if="settingsToWrite">
<div v-if="settingsToWrite">
<form @submit.prevent="updateSettings">
<section class="mt-4 mb-4 p-4 border rounded shadow-sm bg-white">
<h2>{{ t("Informations") }}</h2>
<o-field :label="t('Instance Name')" label-for="instance-name">
<o-input
v-model="settingsToWrite.instanceName"
@@ -17,7 +19,7 @@
/>
</o-field>
<div class="field flex flex-col">
<label class="" for="instance-description">{{
<label for="instance-description">{{
t("Instance Short Description")
}}</label>
<small>
@@ -35,9 +37,25 @@
/>
</div>
<div class="field flex flex-col">
<label class="" for="instance-slogan">{{
t("Instance Slogan")
<label for="instance-long-description">{{
t("Instance Long Description")
}}</label>
<small>
{{
t(
"A place to explain who you are and the things that set your instance apart. You can use HTML tags."
)
}}
</small>
<o-input
type="textarea"
v-model="settingsToWrite.instanceLongDescription"
rows="4"
id="instance-long-description"
/>
</div>
<div class="field flex flex-col">
<label for="instance-slogan">{{ t("Instance Slogan") }}</label>
<small>
{{
t(
@@ -52,12 +70,17 @@
/>
</div>
<div class="field flex flex-col">
<label class="" for="instance-contact">{{ t("Contact") }}</label>
<label for="instance-contact">{{ t("Contact") }}</label>
<small>
{{ t("Can be an email or a link, or just plain text.") }}
</small>
<o-input v-model="settingsToWrite.contact" id="instance-contact" />
</div>
</section>
<section class="mt-4 mb-4 p-4 border rounded shadow-sm bg-white">
<h2>{{ t("Pictures") }}</h2>
<label class="field flex flex-col">
<p>{{ t("Logo") }}</p>
<small>
@@ -93,7 +116,9 @@
<label class="field flex flex-col">
<p>{{ t("Default Picture") }}</p>
<small>
{{ t("Default picture when an event or group doesn't have one.") }}
{{
t("Default picture when an event or group doesn't have one.")
}}
</small>
<picture-upload
v-model:modelValue="defaultPictureFile"
@@ -102,26 +127,10 @@
:maxSize="maxSize"
/>
</label>
<!-- piece of code to manage instance colors
<div class="field flex flex-col">
<label class="" for="primary-color">{{ t("Primary Color") }}</label>
<o-input
type="color"
v-model="settingsToWrite.primaryColor"
id="primary-color"
/>
</div>
<div class="field flex flex-col">
<label class="" for="secondary-color">{{
t("Secondary Color")
}}</label>
<o-input
type="color"
v-model="settingsToWrite.secondaryColor"
id="secondary-color"
/>
</div>
-->
</section>
<section class="mt-4 mb-4 p-4 border rounded shadow-sm bg-white">
<h2>{{ t("Options") }}</h2>
<o-field :label="t('Allow registrations')">
<fieldset>
<o-field>
@@ -155,7 +164,7 @@
</fieldset>
</o-field>
<div class="field flex flex-col">
<label class="" for="instance-languages">{{
<label for="instance-languages">{{
t("Instance languages")
}}</label>
<small>
@@ -175,26 +184,12 @@
<template #empty>{{ t("No languages found") }}</template>
</o-taginput>
</div>
</section>
<section class="mt-4 mb-4 p-4 border rounded shadow-sm bg-white">
<h2>{{ t("Policies") }}</h2>
<div class="field flex flex-col">
<label class="" for="instance-long-description">{{
t("Instance Long Description")
}}</label>
<small>
{{
t(
"A place to explain who you are and the things that set your instance apart. You can use HTML tags."
)
}}
</small>
<o-input
type="textarea"
v-model="settingsToWrite.instanceLongDescription"
rows="4"
id="instance-long-description"
/>
</div>
<div class="field flex flex-col">
<label class="" for="instance-rules">{{ t("Instance Rules") }}</label>
<label for="instance-rules">{{ t("Instance Rules") }}</label>
<small>
{{
t(
@@ -209,8 +204,8 @@
/>
</div>
<o-field :label="t('Instance Terms Source')">
<div class="">
<div class="">
<div>
<div>
<fieldset>
<legend>
{{ t("Choose the source of the instance's Terms") }}
@@ -241,7 +236,7 @@
</o-field>
</fieldset>
</div>
<div class="">
<div>
<o-notification
class="bg-slate-700"
v-if="
@@ -284,7 +279,8 @@
<div
class="notification"
v-if="
settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM
settingsToWrite.instanceTermsType ===
InstanceTermsType.CUSTOM
"
>
<b>{{ t("Custom") }}</b>
@@ -307,6 +303,7 @@
</div>
</div>
</o-field>
<o-field
:label="t('Instance Terms URL')"
label-for="instanceTermsUrl"
@@ -321,7 +318,9 @@
<o-field
:label="t('Instance Terms')"
label-for="instanceTerms"
v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
v-if="
settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM
"
>
<o-input
type="textarea"
@@ -330,11 +329,13 @@
/>
</o-field>
<o-field :label="t('Instance Privacy Policy Source')">
<div class="">
<div class="">
<div>
<div>
<fieldset>
<legend>
{{ t("Choose the source of the instance's Privacy Policy") }}
{{
t("Choose the source of the instance's Privacy Policy")
}}
</legend>
<o-field>
<o-radio
@@ -362,7 +363,7 @@
</o-field>
</fieldset>
</div>
<div class="">
<div>
<div
class="notification"
v-if="
@@ -395,7 +396,9 @@
>
<b>{{ t("URL") }}</b>
<p class="prose dark:prose-invert">
{{ t("Set an URL to a page with your own privacy policy.") }}
{{
t("Set an URL to a page with your own privacy policy.")
}}
</p>
</div>
<div
@@ -453,11 +456,13 @@
id="instancePrivacyPolicy"
/>
</o-field>
</section>
<o-button native-type="submit" variant="primary">{{
t("Save")
t("Save instance settings")
}}</o-button>
</form>
</section>
</div>
</div>
</template>
<script lang="ts" setup>