From 9587d12bc52c5ec994b43d20b793d422a0a552f6 Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle <139135120+andrewwallacespeckle@users.noreply.github.com> Date: Mon, 25 Mar 2024 13:08:40 +0000 Subject: [PATCH 001/105] Add settings tab. Update style of component --- .../frontend-2/pages/projects/[id]/index.vue | 17 ++++++- .../pages/projects/[id]/index/settings.vue | 39 +++++++++++++++ .../src/components/layout/PageTabs.vue | 47 ++++++++++++++----- 3 files changed, 90 insertions(+), 13 deletions(-) create mode 100644 packages/frontend-2/pages/projects/[id]/index/settings.vue diff --git a/packages/frontend-2/pages/projects/[id]/index.vue b/packages/frontend-2/pages/projects/[id]/index.vue index e79a33bc94..e7445cb5c7 100644 --- a/packages/frontend-2/pages/projects/[id]/index.vue +++ b/packages/frontend-2/pages/projects/[id]/index.vue @@ -33,7 +33,11 @@ import { } from '~~/lib/projects/graphql/queries' import { useGeneralProjectPageUpdateTracking } from '~~/lib/projects/composables/projectPages' import { LayoutPageTabs, type LayoutPageTabItem } from '@speckle/ui-components' -import { CubeIcon, ChatBubbleLeftRightIcon } from '@heroicons/vue/24/outline' +import { + CubeIcon, + ChatBubbleLeftRightIcon, + Cog6ToothIcon +} from '@heroicons/vue/24/outline' import { projectRoute } from '~/lib/common/helpers/route' import { convertThrowIntoFetchResult } from '~/lib/common/helpers/graphql' @@ -123,6 +127,11 @@ const pageTabItems = computed((): LayoutPageTabItem[] => [ id: 'discussions', icon: ChatBubbleLeftRightIcon, count: commentCount.value + }, + { + title: 'Settings', + id: 'settings', + icon: Cog6ToothIcon } // { // title: 'Automations', @@ -136,7 +145,8 @@ const activePageTab = computed({ get: () => { const path = router.currentRoute.value.path if (/\/discussions\/?$/i.test(path)) return pageTabItems.value[1] - if (/\/automations\/?$/i.test(path)) return pageTabItems.value[2] + // if (/\/automations\/?$/i.test(path)) return pageTabItems.value[2] + if (/\/settings\/?$/i.test(path)) return pageTabItems.value[2] return pageTabItems.value[0] }, set: (val: LayoutPageTabItem) => { @@ -150,6 +160,9 @@ const activePageTab = computed({ case 'automations': router.push({ path: projectRoute(projectId.value, 'automations') }) break + case 'settings': + router.push({ path: projectRoute(projectId.value, 'settings') }) + break } } }) diff --git a/packages/frontend-2/pages/projects/[id]/index/settings.vue b/packages/frontend-2/pages/projects/[id]/index/settings.vue new file mode 100644 index 0000000000..d9c167bdf7 --- /dev/null +++ b/packages/frontend-2/pages/projects/[id]/index/settings.vue @@ -0,0 +1,39 @@ + + diff --git a/packages/ui-components/src/components/layout/PageTabs.vue b/packages/ui-components/src/components/layout/PageTabs.vue index f325c17af2..08987a1f82 100644 --- a/packages/ui-components/src/components/layout/PageTabs.vue +++ b/packages/ui-components/src/components/layout/PageTabs.vue @@ -7,7 +7,7 @@ class="relative flex sm:justify-between overflow-x-auto" :class=" vertical - ? 'items-center sm:items-start sm:flex-col sm:w-2/12 border-r border-outline gap-4 pl-4' + ? 'items-center sm:items-start sm:flex-col sm:w-3/12 gap-4' : 'border-b border-outline-3 lg:border-none gap-8 w-full' " > @@ -25,13 +25,13 @@ ref="buttonContainer" class="flex" :class=" - vertical ? 'flex-wrap sm:flex-nowrap flex-row sm:flex-col gap-4' : 'gap-6' + vertical ? 'flex-wrap sm:flex-nowrap flex-row sm:flex-col gap-1' : 'gap-6' " >

{{ title }}

@@ -39,19 +39,14 @@ v-for="item in items" :key="item.id" :data-tab-id="item.id" - class="tab-button relative z-10 flex items-center gap-1.5 pb-2 border-b-[2px] border-transparent text-base max-w-max px-2" - :class="[ - activeItem?.id === item.id - ? 'text-primary hover:text-primary' - : 'text-foreground', - vertical ? 'hover:border-outline' : 'hover:border-outline-2' - ]" + :class="buttonClass(item)" + class="tab-button" @click="setActiveItem(item)" > {{ item.title }}
('activeItem', { required: true }) const buttonContainer = ref(null as Nullable) +const buttonClass = computed(() => { + return (item: LayoutPageTabItem) => { + const isActive = activeItem.value?.id === item.id + const baseClasses = ['relative', 'z-10', 'flex', 'items-center'] + + if (props.vertical) { + baseClasses.push('text-sm', 'gap-2', 'border-l-[4px] pl-1.5 py-1.5') + if (isActive) + baseClasses.push( + 'font-bold bg-primary-muted border-primary hover:border-outline' + ) + else baseClasses.push('text-foreground border-transparent') + } else { + baseClasses.push( + 'text-base', + 'gap-1.5', + 'hover:border-outline-2', + 'pb-2', + 'border-b-[2px]', + 'border-transparent', + 'max-w-max' + ) + if (isActive) baseClasses.push('text-primary', 'hover:text-primary') + else baseClasses.push('text-foreground') + } + + return baseClasses + } +}) + const activeItemRef = computed(() => { const id = activeItem.value?.id if (!id) return null From 52a3266abd9b93005340721ecaba3226a8b7d10d Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle <139135120+andrewwallacespeckle@users.noreply.github.com> Date: Mon, 25 Mar 2024 14:07:54 +0000 Subject: [PATCH 002/105] Structuring of files/components --- .../project/page/settings/Block.vue | 19 +++++++++++++++++++ .../project/page/settings/general/General.vue | 8 ++++++++ .../page/settings/general/block/Access.vue | 14 ++++++++++++++ .../settings/general/block/Discussions.vue | 11 +++++++++++ .../page/settings/general/block/General.vue | 14 ++++++++++++++ .../pages/projects/[id]/index/settings.vue | 3 +-- .../src/components/layout/PageTabs.vue | 15 ++++++++++++--- 7 files changed, 79 insertions(+), 5 deletions(-) create mode 100644 packages/frontend-2/components/project/page/settings/Block.vue create mode 100644 packages/frontend-2/components/project/page/settings/general/General.vue create mode 100644 packages/frontend-2/components/project/page/settings/general/block/Access.vue create mode 100644 packages/frontend-2/components/project/page/settings/general/block/Discussions.vue create mode 100644 packages/frontend-2/components/project/page/settings/general/block/General.vue diff --git a/packages/frontend-2/components/project/page/settings/Block.vue b/packages/frontend-2/components/project/page/settings/Block.vue new file mode 100644 index 0000000000..01bb16e50b --- /dev/null +++ b/packages/frontend-2/components/project/page/settings/Block.vue @@ -0,0 +1,19 @@ + + diff --git a/packages/frontend-2/components/project/page/settings/general/General.vue b/packages/frontend-2/components/project/page/settings/general/General.vue new file mode 100644 index 0000000000..7b2079dcbb --- /dev/null +++ b/packages/frontend-2/components/project/page/settings/general/General.vue @@ -0,0 +1,8 @@ + + diff --git a/packages/frontend-2/components/project/page/settings/general/block/Access.vue b/packages/frontend-2/components/project/page/settings/general/block/Access.vue new file mode 100644 index 0000000000..ab09bb8102 --- /dev/null +++ b/packages/frontend-2/components/project/page/settings/general/block/Access.vue @@ -0,0 +1,14 @@ + + diff --git a/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue b/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue new file mode 100644 index 0000000000..e1a911981d --- /dev/null +++ b/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue @@ -0,0 +1,11 @@ + + diff --git a/packages/frontend-2/components/project/page/settings/general/block/General.vue b/packages/frontend-2/components/project/page/settings/general/block/General.vue new file mode 100644 index 0000000000..e2d9e9452f --- /dev/null +++ b/packages/frontend-2/components/project/page/settings/general/block/General.vue @@ -0,0 +1,14 @@ + + diff --git a/packages/frontend-2/pages/projects/[id]/index/settings.vue b/packages/frontend-2/pages/projects/[id]/index/settings.vue index d9c167bdf7..b1141d1d8f 100644 --- a/packages/frontend-2/pages/projects/[id]/index/settings.vue +++ b/packages/frontend-2/pages/projects/[id]/index/settings.vue @@ -7,8 +7,7 @@ :items="settingsTabItems" >
diff --git a/packages/ui-components/src/components/layout/PageTabs.vue b/packages/ui-components/src/components/layout/PageTabs.vue index 08987a1f82..42e3f49e25 100644 --- a/packages/ui-components/src/components/layout/PageTabs.vue +++ b/packages/ui-components/src/components/layout/PageTabs.vue @@ -7,7 +7,7 @@ class="relative flex sm:justify-between overflow-x-auto" :class=" vertical - ? 'items-center sm:items-start sm:flex-col sm:w-3/12 gap-4' + ? 'items-center sm:items-start sm:flex-col sm:w-3/12 gap-6' : 'border-b border-outline-3 lg:border-none gap-8 w-full' " > @@ -25,7 +25,9 @@ ref="buttonContainer" class="flex" :class=" - vertical ? 'flex-wrap sm:flex-nowrap flex-row sm:flex-col gap-1' : 'gap-6' + vertical + ? 'flex-wrap sm:flex-nowrap flex-row sm:flex-col gap-1 w-full' + : 'gap-6' " >

{{ item.title }}
Date: Mon, 25 Mar 2024 14:29:27 +0000 Subject: [PATCH 003/105] Updates to TexInput --- .../components/project/page/settings/Block.vue | 9 +++++++-- .../page/settings/general/block/General.vue | 16 ++++++++++++++-- .../src/components/form/TextInput.vue | 2 +- .../src/composables/form/textInput.ts | 4 ++-- 4 files changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/frontend-2/components/project/page/settings/Block.vue b/packages/frontend-2/components/project/page/settings/Block.vue index 01bb16e50b..8ea283ca63 100644 --- a/packages/frontend-2/components/project/page/settings/Block.vue +++ b/packages/frontend-2/components/project/page/settings/Block.vue @@ -1,6 +1,6 @@ diff --git a/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue b/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue index e1a911981d..e3635075aa 100644 --- a/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue +++ b/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue @@ -4,8 +4,26 @@ + diff --git a/packages/frontend-2/components/project/page/settings/general/block/General.vue b/packages/frontend-2/components/project/page/settings/general/block/ProjectInfo.vue similarity index 93% rename from packages/frontend-2/components/project/page/settings/general/block/General.vue rename to packages/frontend-2/components/project/page/settings/general/block/ProjectInfo.vue index e420e2e68a..00a59d020a 100644 --- a/packages/frontend-2/components/project/page/settings/general/block/General.vue +++ b/packages/frontend-2/components/project/page/settings/general/block/ProjectInfo.vue @@ -1,5 +1,5 @@ - + + diff --git a/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue b/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue index f88953f0ad..443a68bc47 100644 --- a/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue +++ b/packages/frontend-2/components/project/page/settings/general/block/Discussions.vue @@ -4,9 +4,14 @@ - + + diff --git a/packages/frontend-2/components/project/page/settings/general/block/ProjectInfo.vue b/packages/frontend-2/components/project/page/settings/general/block/ProjectInfo.vue index eddb54d95c..c21f94157c 100644 --- a/packages/frontend-2/components/project/page/settings/general/block/ProjectInfo.vue +++ b/packages/frontend-2/components/project/page/settings/general/block/ProjectInfo.vue @@ -27,13 +27,11 @@ diff --git a/packages/ui-components/src/components/layout/PageTabs.vue b/packages/ui-components/src/components/layout/PageTabs.vue index b3d4e5d64a..1bcaeadd9d 100644 --- a/packages/ui-components/src/components/layout/PageTabs.vue +++ b/packages/ui-components/src/components/layout/PageTabs.vue @@ -1,13 +1,13 @@
Name
diff --git a/packages/frontend-2/components/project/page/settings/general/General.vue b/packages/frontend-2/components/project/page/settings/general/General.vue index 7dead91433..9345a589bd 100644 --- a/packages/frontend-2/components/project/page/settings/general/General.vue +++ b/packages/frontend-2/components/project/page/settings/general/General.vue @@ -3,19 +3,26 @@
@@ -38,7 +45,10 @@ const { result: pageResult } = useQuery(projectSettingsGeneralQuery, () => ({ const project = computed(() => pageResult.value?.project) -const handleUpdate = (updates: Partial) => { +const handleUpdate = ( + updates: Partial, + customSuccessMessage?: string +) => { if (!project.value) { return } @@ -48,6 +58,6 @@ const handleUpdate = (updates: Partial) => { ...updates } - updateProject(updatePayload) + updateProject(updatePayload, customSuccessMessage) } diff --git a/packages/frontend-2/lib/projects/composables/projectManagement.ts b/packages/frontend-2/lib/projects/composables/projectManagement.ts index c10f1809ce..4830d35214 100644 --- a/packages/frontend-2/lib/projects/composables/projectManagement.ts +++ b/packages/frontend-2/lib/projects/composables/projectManagement.ts @@ -268,16 +268,18 @@ export function useUpdateProject() { return async ( update: ProjectUpdateInput, + customSuccessMessage?: string, options?: Partial<{ optimisticResponse: UpdateProjectMetadataMutation }> ) => { if (!activeUser.value) return + const defaultSuccessMessage = 'Project updated' + const successMessage = customSuccessMessage || defaultSuccessMessage + const result = await apollo .mutate({ mutation: updateProjectMetadataMutation, - variables: { - update - }, + variables: { update }, optimisticResponse: options?.optimisticResponse }) .catch(convertThrowIntoFetchResult) @@ -285,7 +287,7 @@ export function useUpdateProject() { if (result?.data?.projectMutations.update?.id) { triggerNotification({ type: ToastNotificationType.Success, - title: 'Project updated' + title: successMessage }) } else { const errMsg = getFirstErrorMessage(result.errors) diff --git a/packages/ui-components/src/components/layout/PageTabs.vue b/packages/ui-components/src/components/layout/PageTabs.vue index 1bcaeadd9d..12269f5e18 100644 --- a/packages/ui-components/src/components/layout/PageTabs.vue +++ b/packages/ui-components/src/components/layout/PageTabs.vue @@ -97,7 +97,7 @@ const buttonClass = computed(() => { else baseClasses.push('text-foreground border-transparent') } else { baseClasses.push( - 'text-base', + 'text-sm sm:text-base', 'gap-1.5', 'hover:border-outline-2', 'pb-2', From e5a367dd13254524131234305b181332331e5d4e Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle <139135120+andrewwallacespeckle@users.noreply.github.com> Date: Wed, 3 Apr 2024 12:27:00 +0100 Subject: [PATCH 014/105] Radio Group Same Height --- .../src/components/form/RadioGroup.stories.ts | 3 +- .../src/components/form/RadioGroup.vue | 90 ++++++++++--------- 2 files changed, 52 insertions(+), 41 deletions(-) diff --git a/packages/ui-components/src/components/form/RadioGroup.stories.ts b/packages/ui-components/src/components/form/RadioGroup.stories.ts index 678437f96a..8502b54eaa 100644 --- a/packages/ui-components/src/components/form/RadioGroup.stories.ts +++ b/packages/ui-components/src/components/form/RadioGroup.stories.ts @@ -63,7 +63,8 @@ export const Default: RadioGroupStoryType = { { value: 'option3', title: 'Option 3', - introduction: 'Introduction for Option 3', + introduction: + 'Introduction for Option 3 but a bit longer so it drops onto 2 lines', icon: WrenchIcon, help: 'This is an example helper' } diff --git a/packages/ui-components/src/components/form/RadioGroup.vue b/packages/ui-components/src/components/form/RadioGroup.vue index 4c473563ea..eb6388ce54 100644 --- a/packages/ui-components/src/components/form/RadioGroup.vue +++ b/packages/ui-components/src/components/form/RadioGroup.vue @@ -1,56 +1,66 @@ @@ -19,24 +20,39 @@ import { UserCircleIcon } from '@heroicons/vue/24/outline' import { FormRadioGroup } from '@speckle/ui-components' +import { ProjectVisibility } from '~/lib/common/generated/gql/graphql' const props = defineProps<{ currentCommentsPermission?: boolean + currentVisibility?: ProjectVisibility }>() const emit = defineEmits(['update-comments-permission']) const selectedOption = ref(props.currentCommentsPermission ? 'anyone' : 'teamMembers') -const radioOptions = [ +const radioOptions = computed(() => [ { value: 'anyone', title: 'Anyone', icon: UserGroupIcon }, { value: 'teamMembers', title: 'Team Members Only', icon: UserCircleIcon, - help: 'When the Project Access is “Private” only team members can comment.' + help: + props.currentVisibility === ProjectVisibility.Private + ? 'When the Project Access is “Private” only team members can comment.' + : undefined } -] +]) + +watch( + () => props.currentVisibility, + (newVisibility) => { + if (newVisibility === ProjectVisibility.Private) { + selectedOption.value = 'teamMembers' + } + }, + { immediate: true } +) const emitUpdate = (value: string) => { emit('update-comments-permission', value === 'anyone') diff --git a/packages/ui-components/src/components/form/RadioGroup.vue b/packages/ui-components/src/components/form/RadioGroup.vue index eb6388ce54..dc57fe8faf 100644 --- a/packages/ui-components/src/components/form/RadioGroup.vue +++ b/packages/ui-components/src/components/form/RadioGroup.vue @@ -5,30 +5,31 @@ v-for="option in options" :key="option.value" class="w-full flex flex-col border rounded-md" - :class=" + :class="[ + disabled ? 'opacity-40' : '', selected === option.value ? 'bg-primary-muted border-outline-1' : 'bg-foundation border-primary-muted' - " + ]" > -

-
+
{{ option.introduction }}
@@ -48,7 +52,7 @@
{{ option.help }} @@ -57,7 +61,10 @@