feat(front): upgrade to Oruga 0.8.x

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

14
package-lock.json generated
View file

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

View file

@ -28,7 +28,8 @@
"@apollo/client": "^3.3.16", "@apollo/client": "^3.3.16",
"@framasoft/socket": "^1.0.0", "@framasoft/socket": "^1.0.0",
"@framasoft/socket-apollo-link": "^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/tracing": "^7.1",
"@sentry/vue": "^7.1", "@sentry/vue": "^7.1",
"@tiptap/core": "^2.0.0-beta.41", "@tiptap/core": "^2.0.0-beta.41",

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -28,6 +28,7 @@
@input="(event: any) => updateUsername(event.target.value)" @input="(event: any) => updateUsername(event.target.value)"
id="identity-display-name" id="identity-display-name"
dir="auto" dir="auto"
expanded
/> />
</o-field> </o-field>
@ -69,6 +70,7 @@
aria-required="false" aria-required="false"
v-model="identity.summary" v-model="identity.summary"
id="identity-summary" id="identity-summary"
expanded
/> />
</o-field> </o-field>
@ -118,41 +120,37 @@
<o-tooltip <o-tooltip
:label="t('URL copied to clipboard')" :label="t('URL copied to clipboard')"
:active="showCopiedTooltip.atom" :active="showCopiedTooltip.atom"
always
variant="success" variant="success"
position="left" 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 <o-tooltip
:label="t('URL copied to clipboard')" :label="t('URL copied to clipboard')"
:active="showCopiedTooltip.ics" :active="showCopiedTooltip.ics"
always
variant="success" variant="success"
position="left" 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 <o-button
icon-left="refresh" icon-left="refresh"
variant="text" variant="text"

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -240,49 +240,46 @@
<o-tooltip <o-tooltip
:label="$t('URL copied to clipboard')" :label="$t('URL copied to clipboard')"
:active="showCopiedTooltip.atom" :active="showCopiedTooltip.atom"
always
variant="success" variant="success"
position="left" 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 <o-tooltip
:label="$t('URL copied to clipboard')" :label="$t('URL copied to clipboard')"
:active="showCopiedTooltip.ics" :active="showCopiedTooltip.ics"
always
variant="success" variant="success"
position="left" 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 <o-button
icon-left="refresh" icon-left="refresh"
variant="text" variant="text"

View file

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

View file

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

View file

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

View file

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

View file

@ -18,7 +18,7 @@ exports[`CommentTree > renders a comment tree with comments 1`] = `
</div> </div>
</div> </div>
<div data-v-5d0380ab=\\"\\" class=\\"\\"> <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> </div>
</article> </article>
</form> </form>
@ -56,7 +56,7 @@ exports[`CommentTree > renders an empty comment tree 1`] = `
</div> </div>
</div> </div>
<div data-v-5d0380ab=\\"\\" class=\\"\\"> <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> </div>
</article> </article>
</form> </form>