diff --git a/package-lock.json b/package-lock.json
index 2472fa7ea..1733b5365 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 809abd5f2..c6e47b404 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/assets/oruga-tailwindcss.css b/src/assets/oruga-tailwindcss.css
index 41a417086..00e02ceb5 100644
--- a/src/assets/oruga-tailwindcss.css
+++ b/src/assets/oruga-tailwindcss.css
@@ -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;
}
diff --git a/src/components/Account/ActorAutoComplete.vue b/src/components/Account/ActorAutoComplete.vue
index 6e561d5a0..1f009d8cb 100644
--- a/src/components/Account/ActorAutoComplete.vue
+++ b/src/components/Account/ActorAutoComplete.vue
@@ -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">
diff --git a/src/components/Comment/EventComment.vue b/src/components/Comment/EventComment.vue
index 672daa30f..2512753fc 100644
--- a/src/components/Comment/EventComment.vue
+++ b/src/components/Comment/EventComment.vue
@@ -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,
}),
diff --git a/src/components/Discussion/DiscussionComment.vue b/src/components/Discussion/DiscussionComment.vue
index a7d75bae8..419b41586 100644
--- a/src/components/Discussion/DiscussionComment.vue
+++ b/src/components/Discussion/DiscussionComment.vue
@@ -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,
}),
diff --git a/src/components/Event/EventActionSection.vue b/src/components/Event/EventActionSection.vue
index 46bfb8a87..6c8d1eb80 100644
--- a/src/components/Event/EventActionSection.vue
+++ b/src/components/Event/EventActionSection.vue
@@ -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",
diff --git a/src/components/Event/EventMetadataList.vue b/src/components/Event/EventMetadataList.vue
index 2258db5a8..cf4180e5f 100644
--- a/src/components/Event/EventMetadataList.vue
+++ b/src/components/Event/EventMetadataList.vue
@@ -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">
diff --git a/src/components/Event/EventParticipationCard.vue b/src/components/Event/EventParticipationCard.vue
index a8302e462..0376ee13e 100644
--- a/src/components/Event/EventParticipationCard.vue
+++ b/src/components/Event/EventParticipationCard.vue
@@ -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.",
{
diff --git a/src/components/Event/FullAddressAutoComplete.vue b/src/components/Event/FullAddressAutoComplete.vue
index fd2d5af78..9bfc60f90 100644
--- a/src/components/Event/FullAddressAutoComplete.vue
+++ b/src/components/Event/FullAddressAutoComplete.vue
@@ -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>
diff --git a/src/components/Event/TagInput.vue b/src/components/Event/TagInput.vue
index d344524cd..1019ae4cd 100644
--- a/src/components/Event/TagInput.vue
+++ b/src/components/Event/TagInput.vue
@@ -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>
diff --git a/src/components/Home/SearchFields.vue b/src/components/Home/SearchFields.vue
index f4fdc5517..0b2271be0 100644
--- a/src/components/Home/SearchFields.vue
+++ b/src/components/Home/SearchFields.vue
@@ -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>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index bfca88d7f..827a47056 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -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",
diff --git a/src/components/Report/ReportModal.vue b/src/components/Report/ReportModal.vue
index e3738a630..f06a5f771 100644
--- a/src/components/Report/ReportModal.vue
+++ b/src/components/Report/ReportModal.vue
@@ -55,6 +55,7 @@
id="additional-comments"
autofocus
ref="reportAdditionalCommentsInput"
+ expanded
/>
</o-field>
diff --git a/src/components/Share/ShareModal.vue b/src/components/Share/ShareModal.vue
index 8c7efa1b9..1b223270d 100644
--- a/src/components/Share/ShareModal.vue
+++ b/src/components/Share/ShareModal.vue
@@ -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(() => {
diff --git a/src/main.ts b/src/main.ts
index c8a14fae6..0ce5ca9cf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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";
diff --git a/src/oruga-config.ts b/src/oruga-config.ts
index 38db635ec..384561ae1 100644
--- a/src/oruga-config.ts
+++ b/src/oruga-config.ts
@@ -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-",
},
diff --git a/src/plugins/notifier.ts b/src/plugins/notifier.ts
index 23719b706..e78a2e01e 100644
--- a/src/plugins/notifier.ts
+++ b/src/plugins/notifier.ts
@@ -26,7 +26,6 @@ export class Notifier {
duration: 5000,
position: "bottom-right",
type,
- hasIcon: true,
});
}
}
diff --git a/src/views/Account/children/EditIdentity.vue b/src/views/Account/children/EditIdentity.vue
index 9266aaedc..73cef1ec9 100644
--- a/src/views/Account/children/EditIdentity.vue
+++ b/src/views/Account/children/EditIdentity.vue
@@ -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"
diff --git a/src/views/Admin/SettingsView.vue b/src/views/Admin/SettingsView.vue
index ea7356665..8c25bded2 100644
--- a/src/views/Admin/SettingsView.vue
+++ b/src/views/Admin/SettingsView.vue
@@ -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">{{
diff --git a/src/views/Conversations/ConversationListView.vue b/src/views/Conversations/ConversationListView.vue
index b2f413857..0aee3d89a 100644
--- a/src/views/Conversations/ConversationListView.vue
+++ b/src/views/Conversations/ConversationListView.vue
@@ -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,
diff --git a/src/views/Discussions/CreateView.vue b/src/views/Discussions/CreateView.vue
index f44ebc6f1..916291617 100644
--- a/src/views/Discussions/CreateView.vue
+++ b/src/views/Discussions/CreateView.vue
@@ -36,6 +36,7 @@
<o-input
aria-required="true"
required
+ expanded
v-model="discussion.title"
id="discussion-title"
/>
diff --git a/src/views/Discussions/DiscussionView.vue b/src/views/Discussions/DiscussionView.vue
index 43e9f05ca..6d7e09c0f 100644
--- a/src/views/Discussions/DiscussionView.vue
+++ b/src/views/Discussions/DiscussionView.vue
@@ -65,6 +65,7 @@
<o-input
:value="discussion.title"
v-model="newTitle"
+ expanded
id="discussion-title"
/>
</o-field>
diff --git a/src/views/Event/EditView.vue b/src/views/Event/EditView.vue
index 3d9deba6c..48c1f87c5 100644
--- a/src/views/Event/EditView.vue
+++ b/src/views/Event/EditView.vue
@@ -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",
diff --git a/src/views/Group/CreateView.vue b/src/views/Group/CreateView.vue
index 94fa1a3e3..d36e453f0 100644
--- a/src/views/Group/CreateView.vue
+++ b/src/views/Group/CreateView.vue
@@ -15,6 +15,7 @@
<o-input
aria-required="true"
required
+ expanded
v-model="group.name"
id="group-display-name"
/>
diff --git a/src/views/Group/GroupSettings.vue b/src/views/Group/GroupSettings.vue
index 64a0d5c70..36b7dd423 100644
--- a/src/views/Group/GroupSettings.vue
+++ b/src/views/Group/GroupSettings.vue
@@ -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>
diff --git a/src/views/Moderation/ReportView.vue b/src/views/Moderation/ReportView.vue
index 0574dcf0a..f77578e2d 100644
--- a/src/views/Moderation/ReportView.vue
+++ b/src/views/Moderation/ReportView.vue
@@ -387,6 +387,7 @@
<o-input
type="textarea"
v-model="noteContent"
+ expanded
id="newNoteInput"
></o-input>
</o-field>
diff --git a/src/views/Posts/EditView.vue b/src/views/Posts/EditView.vue
index e92d90525..71ef3bebc 100644
--- a/src/views/Posts/EditView.vue
+++ b/src/views/Posts/EditView.vue
@@ -29,6 +29,7 @@
v-model="editablePost.title"
id="post-title"
dir="auto"
+ expanded
/>
</o-field>
diff --git a/src/views/Posts/PostView.vue b/src/views/Posts/PostView.vue
index 91cae5892..1853a04e1 100644
--- a/src/views/Posts/PostView.vue
+++ b/src/views/Posts/PostView.vue
@@ -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>
diff --git a/src/views/Resources/ResourceFolder.vue b/src/views/Resources/ResourceFolder.vue
index 64b69b3de..76f48c09d 100644
--- a/src/views/Resources/ResourceFolder.vue
+++ b/src/views/Resources/ResourceFolder.vue
@@ -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>
diff --git a/src/views/Settings/AccountSettings.vue b/src/views/Settings/AccountSettings.vue
index 3376d8ec4..ada893dd9 100644
--- a/src/views/Settings/AccountSettings.vue
+++ b/src/views/Settings/AccountSettings.vue
@@ -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",
diff --git a/src/views/Settings/NotificationsView.vue b/src/views/Settings/NotificationsView.vue
index 66651134f..8fd4e5bf2 100644
--- a/src/views/Settings/NotificationsView.vue
+++ b/src/views/Settings/NotificationsView.vue
@@ -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"
diff --git a/src/views/User/LoginView.vue b/src/views/User/LoginView.vue
index f1b1320d0..e41641dca 100644
--- a/src/views/User/LoginView.vue
+++ b/src/views/User/LoginView.vue
@@ -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"
diff --git a/src/views/User/PasswordReset.vue b/src/views/User/PasswordReset.vue
index 75a5dc671..775a4a462 100644
--- a/src/views/User/PasswordReset.vue
+++ b/src/views/User/PasswordReset.vue
@@ -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">
diff --git a/src/views/User/RegisterView.vue b/src/views/User/RegisterView.vue
index 2c3e37adf..7cd47f9fe 100644
--- a/src/views/User/RegisterView.vue
+++ b/src/views/User/RegisterView.vue
@@ -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>
diff --git a/src/views/User/ResendConfirmation.vue b/src/views/User/ResendConfirmation.vue
index 57fb472a6..a0d4439ae 100644
--- a/src/views/User/ResendConfirmation.vue
+++ b/src/views/User/ResendConfirmation.vue
@@ -14,6 +14,7 @@
type="email"
id="emailAddress"
v-model="emailValue"
+ expanded
/>
</o-field>
<p class="flex flex-wrap gap-1 mt-2">
diff --git a/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap b/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
index 06bb38137..9eacac965 100644
--- a/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
+++ b/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
@@ -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>