potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 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
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
37 changed files with 243 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
package-lock.json generated
View file

@ -11,7 +11,8 @@
"@apollo/client": "^3.3.16",
"@framasoft/socket": "^1.0.0",
"@framasoft/socket-apollo-link": "^1.0.0",
"@oruga-ui/oruga-next": "^0.7.0",
"@oruga-ui/oruga-next": "^0.8.1",
"@oruga-ui/theme-oruga": "^0.2.0",
"@sentry/tracing": "^7.1",
"@sentry/vue": "^7.1",
"@tiptap/core": "^2.0.0-beta.41",
@ -3038,13 +3039,18 @@
"dev": true
},
"node_modules/@oruga-ui/oruga-next": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.7.0.tgz",
"integrity": "sha512-T2KnNhGzgqv/Xzu4Efx3wnYahANcP6Z7Yc8DHOFIOLrM+ZDdTS9OjL3gofBVDrDBRg1DQv6EvsSsNkwMR88LpA==",
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.8.1.tgz",
"integrity": "sha512-sdqQEYQ4BTcYWUvgUkzbthO26ZxtJ7W4clE0XKtPLr9MaGuDGU+SKqs7CvpWOrUhfWidiMSjOdGWTQAYzeWASQ==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/@oruga-ui/theme-oruga": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@oruga-ui/theme-oruga/-/theme-oruga-0.2.0.tgz",
"integrity": "sha512-SW5v5cypn+fzBqjcUOY/esv92LOqV6l/Z9QlcaneGQqxyjyapIzuwUdt6oEXpjowqyN90uLYeXYnxltP7uKo0Q=="
},
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",

3
package.json
View file

@ -28,7 +28,8 @@
"@apollo/client": "^3.3.16",
"@framasoft/socket": "^1.0.0",
"@framasoft/socket-apollo-link": "^1.0.0",
"@oruga-ui/oruga-next": "^0.7.0",
"@oruga-ui/oruga-next": "^0.8.1",
"@oruga-ui/theme-oruga": "^0.2.0",
"@sentry/tracing": "^7.1",
"@sentry/vue": "^7.1",
"@tiptap/core": "^2.0.0-beta.41",

20
src/assets/oruga-tailwindcss.css
View file

@ -139,24 +139,31 @@ body {
@apply pl-10;
}
/* InputItems */
.inputitems-item {
/* TagInput */
.taginput {
@apply rounded bg-white dark:bg-zinc-700;
}
.taginput-item {
@apply bg-primary mr-2;
}
.inputitems-item:first-child {
.taginput-item:first-child {
@apply ml-2;
}
/* Autocomplete */
.autocomplete-menu {
@apply max-h-[200px] drop-shadow-md text-black;
.autocomplete {
@apply max-h-[200px] drop-shadow-md text-black z-10;
}
.autocomplete-item {
@apply py-1.5 px-4 text-start;
}
.autocomplete-item-group-title {
@apply opacity-50 py-0 px-2;
}
/* Dropdown */
.dropdown {
@apply inline-flex relative;
@ -218,6 +225,9 @@ body {
}
/* Radio */
.radio {
@apply mr-2;
}
.form-radio {
@apply bg-none text-primary accent-primary;
}

6
src/components/Account/ActorAutoComplete.vue
View file

@ -1,5 +1,5 @@
<template>
<o-inputitems
<o-taginput
:modelValue="modelValueWithDisplayName"
@update:modelValue="(val: IActor[]) => $emit('update:modelValue', val)"
:data="availableActors"
@ -8,12 +8,12 @@
:open-on-focus="false"
field="displayName"
:placeholder="t('Add a recipient')"
@typing="getActors"
@input="getActors"
>
<template #default="props">
<ActorInline :actor="props.option" />
</template>
</o-inputitems>
</o-taginput>
</template>
<script setup lang="ts">

6
src/components/Comment/EventComment.vue
View file

@ -235,7 +235,7 @@ import type { Locale } from "date-fns";
import ReportModal from "@/components/Report/ReportModal.vue";
import { useCreateReport } from "@/composition/apollo/report";
import { Snackbar } from "@/plugins/snackbar";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import RouteName from "@/router/name";
const router = useRouter();
@ -372,7 +372,7 @@ const reportComment = async (
};
const snackbar = inject<Snackbar>("snackbar");
const { oruga } = useProgrammatic();
const { notification } = useOruga();
onCreateReportError((e) => {
isReportModalActive.value = false;
@ -387,7 +387,7 @@ onCreateReportError((e) => {
oneCreateReportDone(() => {
isReportModalActive.value = false;
oruga.notification.open({
notification.open({
message: t("Comment from {'@'}{username} reported", {
username: props.comment.actor?.preferredUsername,
}),

6
src/components/Discussion/DiscussionComment.vue
View file

@ -157,7 +157,7 @@ import type { Locale } from "date-fns";
import { useI18n } from "vue-i18n";
import { useCreateReport } from "@/composition/apollo/report";
import { Snackbar } from "@/plugins/snackbar";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import ReportModal from "@/components/Report/ReportModal.vue";
const Editor = defineAsyncComponent(
@ -220,7 +220,7 @@ const reportComment = async (
};
const snackbar = inject<Snackbar>("snackbar");
const { oruga } = useProgrammatic();
const { notification } = useOruga();
onCreateReportError((e) => {
isReportModalActive.value = false;
@ -235,7 +235,7 @@ onCreateReportError((e) => {
oneCreateReportDone(() => {
isReportModalActive.value = false;
oruga.notification.open({
notification.open({
message: t("Comment from {'@'}{username} reported", {
username: props.modelValue.actor?.preferredUsername,
}),

6
src/components/Event/EventActionSection.vue
View file

@ -381,7 +381,7 @@ import { ApolloCache, FetchResult } from "@apollo/client/core";
import { useMutation } from "@vue/apollo-composable";
import { useCreateReport } from "@/composition/apollo/report";
import { useDeleteEvent } from "@/composition/apollo/event";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import ExternalParticipationButton from "./ExternalParticipationButton.vue";
import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
import Bullhorn from "vue-material-design-icons/Bullhorn.vue";
@ -619,11 +619,11 @@ onJoinEventMutationDone(({ data }) => {
}
});
const { oruga } = useProgrammatic();
const { notification } = useOruga();
onJoinEventMutationError((error) => {
if (error.message) {
oruga.notification.open({
notification.open({
message: error.message,
variant: "danger",
position: "bottom-right",

3
src/components/Event/EventMetadataList.vue
View file

@ -10,9 +10,9 @@
</div>
</div>
<o-field
grouped
:label="$t('Find or add an element')"
label-for="event-metadata-autocomplete"
class="flex-wrap justify-center gap-2"
>
<o-autocomplete
expanded
@ -27,6 +27,7 @@
id="event-metadata-autocomplete"
@select="addElement"
dir="auto"
class="flex-1 min-w-[200px]"
>
<template v-slot="props">
<div class="dark:bg-violet-3 p-1 flex items-center gap-1">

8
src/components/Event/EventParticipationCard.vue
View file

@ -337,7 +337,7 @@ import ViewCompact from "vue-material-design-icons/ViewCompact.vue";
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
import Video from "vue-material-design-icons/Video.vue";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import { computed, inject } from "vue";
import { useI18n } from "vue-i18n";
import { Dialog } from "@/plugins/dialog";
@ -401,7 +401,7 @@ const openDeleteEventModal = (
});
};
const { oruga } = useProgrammatic();
const { notification } = useOruga();
const snackbar = inject<Snackbar>("snackbar");
const {
@ -419,7 +419,7 @@ onDeleteEventDone(() => {
*/
emit("eventDeleted", props.participation.event.id);
oruga.notification.open({
notification.open({
message: t("Event {eventTitle} deleted", {
eventTitle: props.participation.event.title,
}),
@ -460,7 +460,7 @@ const gotToWithCheck = async (
) {
const organizerActor = participation.event.organizerActor as IPerson;
await changeIdentity(organizerActor);
oruga.notification.open({
notification.open({
message: t(
"Current identity has been changed to {identityName} in order to manage this event.",
{

25
src/components/Event/FullAddressAutoComplete.vue
View file

@ -23,9 +23,9 @@
:data="addressData"
v-model="queryTextWithDefault"
:placeholder="placeholderWithDefault"
:customFormatter="(elem: IAddress) => addressFullName(elem)"
:debounceTyping="debounceDelay"
@typing="asyncData"
:formatter="(elem: IAddress) => addressFullName(elem)"
:debounce="debounceDelay"
@input="asyncData"
:icon="canShowLocateMeButton ? null : 'map-marker'"
expanded
@select="setSelected"
@ -114,30 +114,39 @@
required
v-model="selected.description"
id="addressNameInput"
expanded
/>
</o-field>
<o-field :label="t('Street')" labelFor="streetInput">
<o-input v-model="selected.street" id="streetInput" />
<o-input v-model="selected.street" id="streetInput" expanded />
</o-field>
<o-field grouped>
<o-field :label="t('Postal Code')" labelFor="postalCodeInput">
<o-input v-model="selected.postalCode" id="postalCodeInput" />
<o-input
v-model="selected.postalCode"
id="postalCodeInput"
expanded
/>
</o-field>
<o-field :label="t('Locality')" labelFor="localityInput">
<o-input v-model="selected.locality" id="localityInput" />
<o-input
v-model="selected.locality"
id="localityInput"
expanded
/>
</o-field>
</o-field>
<o-field grouped>
<o-field :label="t('Region')" labelFor="regionInput">
<o-input v-model="selected.region" id="regionInput" />
<o-input v-model="selected.region" id="regionInput" expanded />
</o-field>
<o-field :label="t('Country')" labelFor="countryInput">
<o-input v-model="selected.country" id="countryInput" />
<o-input v-model="selected.country" id="countryInput" expanded />
</o-field>
</o-field>
</section>

6
src/components/Event/TagInput.vue
View file

@ -11,7 +11,7 @@
<HelpCircleOutline :size="16" />
</o-tooltip>
</template>
<o-inputitems
<o-taginput
v-model="tagsStrings"
:data="filteredTags"
:allow-autocomplete="true"
@ -21,11 +21,11 @@
:maxlength="20"
:maxitems="10"
:placeholder="$t('Eg: Stockholm, Dance, Chess…')"
@typing="debouncedGetFilteredTags"
@input="debouncedGetFilteredTags"
:id="id"
dir="auto"
>
</o-inputitems>
</o-taginput>
</o-field>
</template>
<script lang="ts" setup>

3
src/components/Home/SearchFields.vue
View file

@ -17,6 +17,7 @@
autocomplete="off"
autocorrect="off"
maxlength="1024"
expanded
/>
<full-address-auto-complete
:resultType="AddressSearchType.ADMINISTRATIVE"
@ -102,7 +103,7 @@ const submit = () => {
const { t } = useI18n({ useScope: "global" });
</script>
<style scoped>
#search-anchor :deep(.o-ctrl-input) {
#search-anchor :deep(.o-input__wrapper) {
flex: 1;
}
</style>

6
src/components/NavBar.vue
View file

@ -235,7 +235,7 @@ import { useLazyQuery, useMutation } from "@vue/apollo-composable";
import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor";
import { changeIdentity } from "@/utils/identity";
import { useRegistrationConfig } from "@/composition/apollo/config";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import {
UNREAD_ACTOR_CONVERSATIONS,
UNREAD_ACTOR_CONVERSATIONS_SUBSCRIPTION,
@ -350,12 +350,12 @@ onDone(({ data }) => {
const showMobileMenu = ref(false);
const { oruga } = useProgrammatic();
const { notification } = useOruga();
const performLogout = async () => {
console.debug("Logging out client...");
await logout();
oruga.notification.open({
notification.open({
message: t("You have been logged-out"),
variant: "success",
position: "bottom-right",

1
src/components/Report/ReportModal.vue
View file

@ -55,6 +55,7 @@
id="additional-comments"
autofocus
ref="reportAdditionalCommentsInput"
expanded
/>
</o-field>

24
src/components/Share/ShareModal.vue
View file

@ -13,19 +13,17 @@
<o-tooltip
: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"
:title="t('Copy URL to clipboard')"
/>
</o-tooltip>
/>
<o-button
variant="primary"
icon-right="content-paste"
native-type="button"
@click="copyURL"
@keyup.enter="copyURL"
:title="t('Copy URL to clipboard')"
/>
</p>
</o-field>
<div class="flex flex-wrap gap-1">
@ -132,7 +130,7 @@ const props = withDefaults(
const { t } = useI18n({ useScope: "global" });
const URLInput = ref<{ $refs: { input: HTMLInputElement } } | null>(null);
const URLInput = ref<{ $refs: { inputRef: HTMLInputElement } } | null>(null);
const showCopiedTooltip = ref(false);
@ -162,7 +160,7 @@ const mastodonShare = computed((): string | undefined =>
);
const copyURL = (): void => {
URLInput.value?.$refs.input.select();
URLInput.value?.$refs.inputRef.select();
document.execCommand("copy");
showCopiedTooltip.value = true;
setTimeout(() => {

2
src/main.ts
View file

@ -18,7 +18,7 @@ import { notifierPlugin } from "./plugins/notifier";
import FloatingVue from "floating-vue";
import "floating-vue/dist/style.css";
import Oruga from "@oruga-ui/oruga-next";
import "@oruga-ui/oruga-next/dist/oruga.css";
import "@oruga-ui/theme-oruga/dist/oruga.css";
import "./assets/oruga-tailwindcss.css";
import { orugaConfig } from "./oruga-config";
import MaterialIcon from "./components/core/MaterialIcon.vue";

27
src/oruga-config.ts
View file

@ -22,22 +22,24 @@ export const orugaConfig = {
roundedClass: "rounded",
variantClass: "input-",
iconRightClass: "input-icon-right",
sizeClass: "input-size-",
},
inputitems: {
itemClass: "inputitems-item",
containerClass: "rounded",
taginput: {
itemClass: "taginput-item",
rootClass: "taginput",
},
autocomplete: {
menuClass: "autocomplete-menu",
rootClass: "autocomplete",
itemClass: "autocomplete-item",
itemGroupTitleClass: "autocomplete-item-group-title",
},
icon: {
variantClass: "icon-",
},
checkbox: {
rootClass: "checkbox",
checkClass: "checkbox-check",
checkCheckedClass: "checkbox-checked",
inputClass: "checkbox-check",
inputCheckedClass: "checkbox-checked",
labelClass: "checkbox-label",
},
dropdown: {
@ -62,14 +64,15 @@ export const orugaConfig = {
},
switch: {
labelClass: "switch-label",
checkCheckedClass: "switch-check-checked",
switchCheckedClass: "switch-check-checked",
},
select: {
selectClass: "select",
},
radio: {
checkCheckedClass: "radio-checked",
checkClass: "form-radio",
rootClass: "radio",
inputCheckedClass: "radio-checked",
inputClass: "form-radio",
labelClass: "radio-label",
},
notification: {
@ -90,8 +93,8 @@ export const orugaConfig = {
linkClass: "pagination-link",
linkCurrentClass: "pagination-link-current",
linkDisabledClass: "pagination-link-disabled",
nextBtnClass: "pagination-next",
prevBtnClass: "pagination-previous",
nextButtonClass: "pagination-next",
prevButtonClass: "pagination-previous",
ellipsisClass: "pagination-ellipsis",
},
tabs: {
@ -99,7 +102,7 @@ export const orugaConfig = {
navTabsClass: "tabs-nav",
navTypeClass: "tabs-nav-",
navSizeClass: "tabs-nav-",
tabItemWrapperClass: "tabs-nav-item-wrapper",
itemWrapperClass: "tabs-nav-item-wrapper",
itemHeaderTypeClass: "tabs-nav-item-",
itemHeaderActiveClass: "tabs-nav-item-active-",
},

1
src/plugins/notifier.ts
View file

@ -26,7 +26,6 @@ export class Notifier {
duration: 5000,
position: "bottom-right",
type,
hasIcon: true,
});
}
}

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">

4
tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
View file

@ -18,7 +18,7 @@ exports[`CommentTree > renders a comment tree with comments 1`] = `
</div>
</div>
<div data-v-5d0380ab=\\"\\" class=\\"\\">
<o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\" iconboth=\\"false\\"></o-button-stub>
<o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\"></o-button-stub>
</div>
</article>
</form>
@ -56,7 +56,7 @@ exports[`CommentTree > renders an empty comment tree 1`] = `
</div>
</div>
<div data-v-5d0380ab=\\"\\" class=\\"\\">
<o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\" iconboth=\\"false\\"></o-button-stub>
<o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\"></o-button-stub>
</div>
</article>
</form>