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

feat(front): upgrade to Oruga 0.8.x

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2023-12-14 10:50:38 +01:00
parent 76668e0beb
commit a9676d6481
37 changed files with 243 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/Account/children/EditIdentity.vue
View File

@@ -28,6 +28,7 @@
@input="(event: any) => updateUsername(event.target.value)"
id="identity-display-name"
dir="auto"
expanded
/>
</o-field>
@@ -69,6 +70,7 @@
aria-required="false"
v-model="identity.summary"
id="identity-summary"
expanded
/>
</o-field>
@@ -118,41 +120,37 @@
<o-tooltip
:label="t('URL copied to clipboard')"
:active="showCopiedTooltip.atom"
always
variant="success"
position="left"
/>
<o-button
tag="a"
icon-left="rss"
@click="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
"
:href="tokenToURL(feedToken.token, 'atom')"
target="_blank"
>{{ t("RSS/Atom Feed") }}</o-button
>
<o-button
tag="a"
icon-left="rss"
@click="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
"
:href="tokenToURL(feedToken.token, 'atom')"
target="_blank"
>{{ t("RSS/Atom Feed") }}</o-button
>
</o-tooltip>
<o-tooltip
:label="t('URL copied to clipboard')"
:active="showCopiedTooltip.ics"
always
variant="success"
position="left"
/>
<o-button
tag="a"
@click="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
"
icon-left="calendar-sync"
:href="tokenToURL(feedToken.token, 'ics')"
target="_blank"
>{{ t("ICS/WebCal Feed") }}</o-button
>
<o-button
tag="a"
@click="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
"
icon-left="calendar-sync"
:href="tokenToURL(feedToken.token, 'ics')"
target="_blank"
>{{ t("ICS/WebCal Feed") }}</o-button
>
</o-tooltip>
<o-button
icon-left="refresh"
variant="text"

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

@@ -10,7 +10,11 @@
<section v-if="settingsToWrite">
<form @submit.prevent="updateSettings">
<o-field :label="t('Instance Name')" label-for="instance-name">
<o-input v-model="settingsToWrite.instanceName" id="instance-name" />
<o-input
v-model="settingsToWrite.instanceName"
id="instance-name"
expanded
/>
</o-field>
<div class="field flex flex-col">
<label class="" for="instance-description">{{
@@ -74,7 +78,7 @@
<small>
{{ t("Main languages you/your moderators speak") }}
</small>
<o-inputitems
<o-taginput
v-model="instanceLanguages"
:data="filteredLanguages"
allow-autocomplete
@@ -82,11 +86,11 @@
field="name"
icon="label"
:placeholder="t('Select languages')"
@typing="getFilteredLanguages"
@input="getFilteredLanguages"
id="instance-languages"
>
<template #empty>{{ t("No languages found") }}</template>
</o-inputitems>
</o-taginput>
</div>
<div class="field flex flex-col">
<label class="" for="instance-long-description">{{

6
src/views/Conversations/ConversationListView.vue
View File

@@ -56,7 +56,7 @@ import ConversationListItem from "../../components/Conversations/ConversationLis
import EmptyContent from "../../components/Utils/EmptyContent.vue";
import { useHead } from "@unhead/vue";
import { IPerson } from "@/types/actor";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import { arrayTransformer } from "@/utils/route";
const page = useRouteQuery("page", 1, integerTransformer);
@@ -89,14 +89,14 @@ const conversations = computed(
}
);
const { oruga } = useProgrammatic();
const { modal } = useOruga();
const NewConversation = defineAsyncComponent(
() => import("@/components/Conversations/NewConversation.vue")
);
const openNewMessageModal = () => {
oruga.modal.open({
modal.open({
component: NewConversation,
props: {
personMentions: personMentions.value,

1
src/views/Discussions/CreateView.vue
View File

@@ -36,6 +36,7 @@
<o-input
aria-required="true"
required
expanded
v-model="discussion.title"
id="discussion-title"
/>

1
src/views/Discussions/DiscussionView.vue
View File

@@ -65,6 +65,7 @@
<o-input
:value="discussion.title"
v-model="newTitle"
expanded
id="discussion-title"
/>
</o-field>

65
src/views/Event/EditView.vue
View File

@@ -31,6 +31,7 @@
v-model="event.title"
id="title"
dir="auto"
expanded
/>
</o-field>
@@ -72,7 +73,6 @@
:locale="$i18n.locale.replace('_', '-')"
v-model="beginsOn"
horizontal-time-picker
editable
:tz-offset="tzOffset(beginsOn)"
:first-day-of-week="firstDayOfWeek"
:datepicker="{
@@ -99,7 +99,6 @@
horizontal-time-picker
:min-datetime="beginsOn"
:tz-offset="tzOffset(endsOn)"
editable
:first-day-of-week="firstDayOfWeek"
:datepicker="{
id: 'ends-on-field',
@@ -145,6 +144,7 @@
v-model="event.onlineAddress"
placeholder="URL"
id="website-url"
expanded
/>
</o-field>
@@ -373,44 +373,55 @@
<o-radio
v-model="event.status"
name="status"
class="mr-2 p-2 rounded border"
:class="{
'btn-warning': event.status === EventStatus.TENTATIVE,
'btn-outlined-warning': event.status !== EventStatus.TENTATIVE,
}"
variant="warning"
:native-value="EventStatus.TENTATIVE"
>
<o-icon icon="calendar-question" />
{{ t("Tentative: Will be confirmed later") }}
<div
class="mr-2 p-2 rounded border flex gap-x-1"
:class="{
'btn-warning': event.status === EventStatus.TENTATIVE,
'btn-outlined-warning':
event.status !== EventStatus.TENTATIVE,
}"
>
<o-icon icon="calendar-question" />
{{ t("Tentative: Will be confirmed later") }}
</div>
</o-radio>
<o-radio
v-model="event.status"
name="status"
variant="success"
class="mr-2 p-2 rounded border"
:class="{
'btn-success': event.status === EventStatus.CONFIRMED,
'btn-outlined-success': event.status !== EventStatus.CONFIRMED,
}"
:native-value="EventStatus.CONFIRMED"
>
<o-icon icon="calendar-check" />
{{ t("Confirmed: Will happen") }}
<div
class="mr-2 p-2 rounded border flex gap-x-1"
:class="{
'btn-success': event.status === EventStatus.CONFIRMED,
'btn-outlined-success':
event.status !== EventStatus.CONFIRMED,
}"
>
<o-icon icon="calendar-check" />
{{ t("Confirmed: Will happen") }}
</div>
</o-radio>
<o-radio
v-model="event.status"
name="status"
class="p-2 rounded border"
:class="{
'btn-danger': event.status === EventStatus.CANCELLED,
'btn-outlined-danger': event.status !== EventStatus.CANCELLED,
}"
variant="danger"
:native-value="EventStatus.CANCELLED"
>
<o-icon icon="calendar-remove" />
{{ t("Cancelled: Won't happen") }}
<div
class="p-2 rounded border flex gap-x-1"
:class="{
'btn-danger': event.status === EventStatus.CANCELLED,
'btn-outlined-danger': event.status !== EventStatus.CANCELLED,
}"
>
<o-icon icon="calendar-remove" />
{{ t("Cancelled: Won't happen") }}
</div>
</o-radio>
</o-field>
</fieldset>
@@ -625,7 +636,7 @@ import { useMutation } from "@vue/apollo-composable";
import { Dialog } from "@/plugins/dialog";
import { Notifier } from "@/plugins/notifier";
import { useHead } from "@unhead/vue";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import type { Locale } from "date-fns";
import sortBy from "lodash/sortBy";
import { escapeHtml } from "@/utils/html";
@@ -806,10 +817,10 @@ const {
postRefetchQueries(updatedData?.createEvent),
}));
const { oruga } = useProgrammatic();
const { notification } = useOruga();
onCreateEventMutationDone(async ({ data }) => {
oruga.notification.open({
notification.open({
message: (event.value.draft
? t("The event has been created as a draft")
: t("The event has been published")) as string,
@@ -852,7 +863,7 @@ const {
}));
onEditEventMutationDone(() => {
oruga.notification.open({
notification.open({
message: updateEventMessage.value,
variant: "success",
position: "bottom-right",

1
src/views/Group/CreateView.vue
View File

@@ -15,6 +15,7 @@
<o-input
aria-required="true"
required
expanded
v-model="group.name"
id="group-display-name"
/>

26
src/views/Group/GroupSettings.vue
View File

@@ -27,7 +27,11 @@
>
<form @submit.prevent="updateGroup(buildVariables)" v-if="editableGroup">
<o-field :label="t('Group name')" label-for="group-settings-name">
<o-input v-model="editableGroup.name" id="group-settings-name" />
<o-input
v-model="editableGroup.name"
id="group-settings-name"
expanded
/>
</o-field>
<o-field :label="t('Group short description')">
<Editor
@@ -83,24 +87,22 @@
)
}}</small>
</o-radio>
<p class="pl-6">
<p class="pl-6 flex items-center gap-2">
<code>{{ group.url }}</code>
<o-tooltip
v-if="canShowCopyButton"
:label="t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
variant="success"
position="left"
>
<o-button
variant="primary"
icon-right="content-paste"
native-type="button"
@click="copyURL"
@keyup.enter="copyURL"
/>
</o-tooltip>
/>
<o-button
variant="primary"
icon-right="content-paste"
native-type="button"
@click="copyURL"
@keyup.enter="copyURL"
/>
</p>
</div>

1
src/views/Moderation/ReportView.vue
View File

@@ -387,6 +387,7 @@
<o-input
type="textarea"
v-model="noteContent"
expanded
id="newNoteInput"
></o-input>
</o-field>

1
src/views/Posts/EditView.vue
View File

@@ -29,6 +29,7 @@
v-model="editablePost.title"
id="post-title"
dir="auto"
expanded
/>
</o-field>

2
src/views/Posts/PostView.vue
View File

@@ -100,7 +100,7 @@
</div>
<o-dropdown position="bottom-left" aria-role="list">
<template #trigger>
<o-button role="button" icon-right="dots-horizontal">
<o-button icon-right="dots-horizontal">
{{ t("Actions") }}
</o-button>
</template>

5
src/views/Resources/ResourceFolder.vue
View File

@@ -71,6 +71,7 @@
ref="resourceRenameInput"
aria-required="true"
v-model="updatedResource.title"
expanded
/>
</o-field>
@@ -133,6 +134,7 @@
aria-required="true"
v-model="newResource.title"
id="new-resource-title"
expanded
/>
</o-field>
@@ -167,6 +169,7 @@
id="new-resource-url"
type="url"
required
expanded
v-model="newResource.resourceUrl"
@blur="previewResource"
ref="modalNewResourceLinkInput"
@@ -187,6 +190,7 @@
aria-required="true"
v-model="newResource.title"
id="new-resource-link-title"
expanded
/>
</o-field>
@@ -200,6 +204,7 @@
type="textarea"
v-model="newResource.summary"
id="new-resource-summary"
expanded
/>
</o-field>

10
src/views/Settings/AccountSettings.vue
View File

@@ -60,6 +60,7 @@
type="email"
id="account-email"
v-model="newEmail"
expanded
/>
</o-field>
<p class="help">{{ t("You'll receive a confirmation email.") }}</p>
@@ -72,6 +73,7 @@
password-reveal
minlength="6"
v-model="passwordForEmailChange"
expanded
/>
</o-field>
<o-button class="mt-2" variant="primary" nativeType="submit">
@@ -117,6 +119,7 @@
minlength="6"
id="account-old-password"
v-model="oldPassword"
expanded
/>
</o-field>
<o-field :label="t('New password')" label-for="account-new-password">
@@ -128,6 +131,7 @@
minlength="6"
id="account-new-password"
v-model="newPassword"
expanded
/>
</o-field>
<o-button class="mt-2" variant="primary" nativeType="submit">
@@ -243,7 +247,7 @@ import {
} from "../../graphql/user";
import RouteName from "../../router/name";
import { logout, SELECTED_PROVIDERS } from "../../utils/auth";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
const { t } = useI18n({ useScope: "global" });
@@ -341,12 +345,12 @@ const {
DELETE_ACCOUNT
);
const { oruga } = useProgrammatic();
const { notification } = useOruga();
deleteAccountMutationDone(async () => {
console.debug("Deleted account, logging out client...");
await logout(false);
oruga.notification.open({
notification.open({
message: t("Your account has been successfully deleted"),
variant: "success",
position: "bottom-right",

65
src/views/Settings/NotificationsView.vue
View File

@@ -240,49 +240,46 @@
<o-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip.atom"
always
variant="success"
position="left"
/>
<o-button
tag="a"
icon-left="rss"
@click="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
"
@keyup.enter="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
"
:href="tokenToURL(feedToken.token, 'atom')"
target="_blank"
>{{ $t("RSS/Atom Feed") }}</o-button
>
<o-button
tag="a"
icon-left="rss"
@click="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
"
@keyup.enter="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
"
:href="tokenToURL(feedToken.token, 'atom')"
target="_blank"
>{{ $t("RSS/Atom Feed") }}</o-button
>
</o-tooltip>
<o-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip.ics"
always
variant="success"
position="left"
/>
<o-button
tag="a"
@click="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
"
@keyup.enter="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
"
icon-left="calendar-sync"
:href="tokenToURL(feedToken.token, 'ics')"
target="_blank"
>{{ $t("ICS/WebCal Feed") }}</o-button
>
<o-button
tag="a"
@click="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
"
@keyup.enter="
(e: Event) =>
copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
"
icon-left="calendar-sync"
:href="tokenToURL(feedToken.token, 'ics')"
target="_blank"
>{{ $t("ICS/WebCal Feed") }}</o-button
>
</o-tooltip>
<o-button
icon-left="refresh"
variant="text"

2
src/views/User/LoginView.vue
View File

@@ -52,6 +52,7 @@
<o-input
aria-required="true"
required
expanded
id="email"
type="email"
v-model="credentials.email"
@@ -63,6 +64,7 @@
aria-required="true"
id="password"
required
expanded
type="password"
password-reveal
v-model="credentials.password"

2
src/views/User/PasswordReset.vue
View File

@@ -19,6 +19,7 @@
password-reveal
minlength="6"
v-model="credentials.password"
expanded
/>
</o-field>
<o-field :label="$t('Password (confirmation)')">
@@ -29,6 +30,7 @@
password-reveal
minlength="6"
v-model="credentials.passwordConfirmation"
expanded
/>
</o-field>
<button class="button is-primary">

2
src/views/User/RegisterView.vue
View File

@@ -103,6 +103,7 @@
v-model="credentials.email"
@blur="showGravatar = true"
@focus="showGravatar = false"
expanded
/>
</o-field>
@@ -120,6 +121,7 @@
password-reveal
minlength="6"
v-model="credentials.password"
expanded
/>
</o-field>

1
src/views/User/ResendConfirmation.vue
View File

@@ -14,6 +14,7 @@
type="email"
id="emailAddress"
v-model="emailValue"
expanded
/>
</o-field>
<p class="flex flex-wrap gap-1 mt-2">