From a9676d6481e6966d939ea4e44ad610eb9231c370 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Thu, 14 Dec 2023 10:50:38 +0100 Subject: [PATCH 1/3] feat(front): upgrade to Oruga 0.8.x Signed-off-by: Thomas Citharel --- package-lock.json | 14 ++-- package.json | 3 +- src/assets/oruga-tailwindcss.css | 20 ++++-- src/components/Account/ActorAutoComplete.vue | 6 +- src/components/Comment/EventComment.vue | 6 +- .../Discussion/DiscussionComment.vue | 6 +- src/components/Event/EventActionSection.vue | 6 +- src/components/Event/EventMetadataList.vue | 3 +- .../Event/EventParticipationCard.vue | 8 +-- .../Event/FullAddressAutoComplete.vue | 25 ++++--- src/components/Event/TagInput.vue | 6 +- src/components/Home/SearchFields.vue | 3 +- src/components/NavBar.vue | 6 +- src/components/Report/ReportModal.vue | 1 + src/components/Share/ShareModal.vue | 24 ++++--- src/main.ts | 2 +- src/oruga-config.ts | 27 ++++---- src/plugins/notifier.ts | 1 - src/views/Account/children/EditIdentity.vue | 50 +++++++------- src/views/Admin/SettingsView.vue | 12 ++-- .../Conversations/ConversationListView.vue | 6 +- src/views/Discussions/CreateView.vue | 1 + src/views/Discussions/DiscussionView.vue | 1 + src/views/Event/EditView.vue | 65 +++++++++++-------- src/views/Group/CreateView.vue | 1 + src/views/Group/GroupSettings.vue | 26 ++++---- src/views/Moderation/ReportView.vue | 1 + src/views/Posts/EditView.vue | 1 + src/views/Posts/PostView.vue | 2 +- src/views/Resources/ResourceFolder.vue | 5 ++ src/views/Settings/AccountSettings.vue | 10 ++- src/views/Settings/NotificationsView.vue | 65 +++++++++---------- src/views/User/LoginView.vue | 2 + src/views/User/PasswordReset.vue | 2 + src/views/User/RegisterView.vue | 2 + src/views/User/ResendConfirmation.vue | 1 + .../__snapshots__/CommentTree.spec.ts.snap | 4 +- 37 files changed, 243 insertions(+), 181 deletions(-) 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 @@ 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 /> 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 @@ - - + /> +

@@ -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 /> @@ -69,6 +70,7 @@ aria-required="false" v-model="identity.summary" id="identity-summary" + expanded /> @@ -118,41 +120,37 @@ + {{ t("RSS/Atom Feed") }} - {{ t("RSS/Atom Feed") }} - + {{ t("ICS/WebCal Feed") }} - {{ t("ICS/WebCal Feed") }} -
- +
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 @@ 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 /> 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 @@
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 /> @@ -133,6 +134,7 @@ aria-required="true" v-model="newResource.title" id="new-resource-title" + expanded /> @@ -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 /> @@ -200,6 +204,7 @@ type="textarea" v-model="newResource.summary" id="new-resource-summary" + expanded /> 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 />

{{ t("You'll receive a confirmation email.") }}

@@ -72,6 +73,7 @@ password-reveal minlength="6" v-model="passwordForEmailChange" + expanded /> @@ -117,6 +119,7 @@ minlength="6" id="account-old-password" v-model="oldPassword" + expanded /> @@ -128,6 +131,7 @@ minlength="6" id="account-new-password" v-model="newPassword" + expanded /> @@ -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 @@ + {{ $t("RSS/Atom Feed") }} - {{ $t("RSS/Atom Feed") }} - + + {{ $t("ICS/WebCal Feed") }} - {{ $t("ICS/WebCal Feed") }} - @@ -29,6 +30,7 @@ password-reveal minlength="6" v-model="credentials.passwordConfirmation" + expanded />