feat(nc-gui): new share ui

packages/nc-gui/components/dlg/share-and-collaborate/View.vue

@@ -1,19 +1,12 @@
 <script lang="ts" setup>
 import type { ViewType } from 'nocodb-sdk'
-import { LoadingOutlined } from '@ant-design/icons-vue'
-import ManageUsers from './ManageUsers.vue'
-import { useViewsStore } from '~/store/views'
 
 const { isViewToolbar } = defineProps<{
   isViewToolbar?: boolean
 }>()
 
-const { copy } = useCopy()
-const { dashboardUrl } = useDashboard()
 const baseStore = useBase()
 const { base } = storeToRefs(baseStore)
-const { navigateToProjectPage } = baseStore
-const { activeView } = storeToRefs(useViewsStore())
 
 let view: Ref<ViewType | undefined>
 if (isViewToolbar) {
@@ -25,53 +18,12 @@ if (isViewToolbar) {
   }
 }
 
-const { formStatus, showShareModal, invitationUsersData, isInvitationLinkCopied } = storeToRefs(useShare())
-const { resetData } = useShare()
-// const { inviteUser } = useManageUsers()
-
-// const expandedSharedType = ref<'none' | 'base' | 'view'>('view')
-const isOpeningManageAccess = ref(false)
-
-const inviteUrl = computed(() =>
-  invitationUsersData.value.invitationToken ? `${dashboardUrl.value}#/signup/${invitationUsersData.value.invitationToken}` : null,
-)
-
-const indicator = h(LoadingOutlined, {
-  style: {
-    fontSize: '24px',
-  },
-  spin: true,
-})
-
-/*
-const onShare = async () => {
-  if (!invitationValid) return
-
-  await inviteUser({
-    email: invitationUsersData.value.emails!,
-    roles: invitationUsersData.value.role!,
-  })
-}
-*/
+const activeTab = ref<'base' | 'view'>('base')
 
-const copyInvitationLink = async () => {
-  await copy(inviteUrl.value!)
+const { formStatus, showShareModal } = storeToRefs(useShare())
+const { resetData } = useShare()
 
-  isInvitationLinkCopied.value = true
-}
-
-const openManageAccess = async () => {
-  isOpeningManageAccess.value = true
-  try {
-    await navigateToProjectPage({ page: 'collaborator' })
-    showShareModal.value = false
-  } catch (e) {
-    console.error(e)
-    message.error('Failed to open manage access')
-  } finally {
-    isOpeningManageAccess.value = false
-  }
-}
+const highlightStyle = ref({ top: isViewToolbar ? '160px' : '4px' })
 
 watch(showShareModal, (val) => {
   if (!val) {
@@ -80,131 +32,125 @@ watch(showShareModal, (val) => {
     }, 500)
   }
 })
+
+watch(showShareModal, () => {
+  if (isViewToolbar && view.value) {
+    activeTab.value = 'view'
+  }
+})
+
+const updateHighlightPosition = () => {
+  nextTick(() => {
+    const activeTab = document.querySelector('.nc-share-active') as HTMLElement
+    if (activeTab) {
+      highlightStyle.value.top = `${activeTab.offsetTop}px`
+    }
+  })
+}
+
+watch(activeTab, () => {
+  updateHighlightPosition()
+})
 </script>
 
 <template>
-  <a-modal
+  <NcModal
     v-model:visible="showShareModal"
-    class="!top-[1%]"
+    :centered="false"
     :class="{ active: showShareModal }"
     wrap-class-name="nc-modal-share-collaborate"
-    :closable="false"
-    :mask-closable="formStatus === 'base-collaborateSaving' ? false : true"
-    :ok-button-props="{ hidden: true } as any"
-    :cancel-button-props="{ hidden: true } as any"
-    :footer="null"
-    :width="formStatus === 'manageCollaborators' ? '60rem' : '40rem'"
+    :mask-closable="formStatus !== 'base-collaborateSaving'"
+    :width="formStatus === 'manageCollaborators' ? '60rem' : '48rem'"
   >
-    <div v-if="formStatus === 'base-collaborateSaving'" class="flex flex-row w-full px-5 justify-between items-center py-1">
-      <div class="flex text-base font-bold">Adding Members</div>
-      <a-spin :indicator="indicator" />
-    </div>
-    <template v-else-if="formStatus === 'base-collaborateSaved'">
-      <div class="flex flex-col py-1.5">
-        <div class="flex flex-row w-full px-5 justify-between items-center py-0.5">
-          <div class="flex text-base font-medium">Members added</div>
-          <div class="flex">
-            <MdiCheck />
-          </div>
-        </div>
-        <div class="flex flex-row mx-3 mt-2.5 pt-3.5 border-t-1 border-gray-100 justify-end gap-x-2">
-          <a-button type="text" class="!border-1 !border-gray-200 !rounded-md" @click="showShareModal = false">Close </a-button>
-          <a-button
-            type="text"
-            class="!border-1 !border-gray-200 !rounded-md"
-            data-testid="docs-share-invitation-copy"
-            :data-invite-link="inviteUrl"
-            @click="copyInvitationLink"
-          >
-            <div v-if="isInvitationLinkCopied" class="flex flex-row items-center gap-x-1">
-              <MdiTick class="h-3.5" />
-              {{ $t('activity.copiedInviteLink') }}
-            </div>
-            <div v-else class="flex flex-row items-center gap-x-1">
-              <MdiContentCopy class="h-3.3" />
-              {{ $t('activity.copyInviteLink') }}
-            </div>
-          </a-button>
-        </div>
-      </div>
-    </template>
-    <div v-else-if="formStatus === 'manageCollaborators'">
-      <ManageUsers v-if="formStatus === 'manageCollaborators'" @close="formStatus = 'collaborate'" />
-    </div>
-    <div v-else class="flex flex-col px-1">
-      <div class="flex flex-row justify-between items-center pb-1 mx-4 mt-3">
-        <div class="flex text-base font-medium">{{ $t('activity.share') }}</div>
-      </div>
-      <div v-if="isViewToolbar && activeView" class="share-view">
-        <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
-          <component
-            :is="viewIcons[view?.type]?.icon"
-            class="nc-view-icon group-hover"
-            :style="{ color: viewIcons[view?.type]?.color }"
-          />
-          <div>{{ $t('activity.shareView') }}</div>
+    <div class="flex flex-col gap-6">
+      <div class="flex text-xl font-bold">{{ $t('activity.share') }}</div>
+      <div class="flex flex-1 gap-3">
+        <div
+          v-if="isViewToolbar"
+          class="flex relative flex-col flex-grow-1 cursor-pointer p-1 w-32 rounded-[10px] h-80 bg-gray-200"
+        >
+          <div :style="highlightStyle" class="highlight"></div>
+
           <div
-            class="max-w-79/100 ml-2 px-2 py-0.5 rounded-md bg-gray-100 capitalize text-ellipsis overflow-hidden"
-            :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap' }"
+            data-testid="nc-share-base-tab"
+            :class="{ 'nc-share-active': activeTab === 'base' }"
+            class="flex flex-col z-1 text-gray-600 items-center rounded-lg w-full justify-center h-1/2"
+            @click="activeTab = 'base'"
           >
-            {{ activeView.title }}
+            <GeneralProjectIcon
+              :color="parseProp(base.meta).iconColor"
+              :type="base.type"
+              :class="{
+                '!grayscale ': activeTab !== 'base',
+              }"
+              :style="{
+                filter: activeTab !== 'base' ? 'grayscale(100%) brightness(115%)' : '',
+              }"
+              class="nc-view-icon transition-all w-6 h-6 group-hover"
+            />
+            <span
+              :class="{
+                'font-semibold': activeTab === 'base',
+              }"
+            >
+              Base
+            </span>
           </div>
-        </div>
-        <DlgShareAndCollaborateSharePage />
-      </div>
-      <div class="share-base">
-        <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
-          <GeneralProjectIcon :color="parseProp(base.meta).iconColor" :type="base.type" class="nc-view-icon group-hover" />
-
-          <div>{{ $t('activity.shareBase.label') }}</div>
           <div
-            class="max-w-79/100 ml-2 px-2 py-0.5 rounded-md bg-gray-100 capitalize text-ellipsis overflow-hidden"
-            :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap' }"
+            :class="{ 'nc-share-active': activeTab === 'view' }"
+            data-testid="nc-share-view-tab"
+            class="flex flex-col items-center text-gray-600 z-1 w-full cursor-pointer rounded-lg justify-center h-1/2"
+            @click="activeTab = 'view'"
           >
-            {{ base.title }}
+            <component
+              :is="viewIcons[view?.type]?.icon"
+              :class="{
+                'text-gray-500': activeTab !== 'view',
+              }"
+              :style="{ color: activeTab === 'view' ? viewIcons[view?.type]?.color : '' }"
+              class="nc-view-icon transition-all !text-2xl group-hover"
+            />
+            <span
+              :class="{
+                'font-semibold': activeTab === 'view',
+              }"
+            >
+              View
+            </span>
           </div>
         </div>
-        <LazyDlgShareAndCollaborateShareBase />
-      </div>
-      <div class="flex flex-row justify-end mx-3 mt-1 mb-2 pt-4 gap-x-2">
-        <NcButton type="secondary" data-testid="docs-cancel-btn" @click="showShareModal = false">
-          {{ $t('general.close') }}
-        </NcButton>
-        <NcButton
-          data-testid="docs-share-manage-access"
-          type="secondary"
-          :loading="isOpeningManageAccess"
-          @click="openManageAccess"
-          >{{ $t('activity.manageProjectAccess') }}</NcButton
-        >
-
-        <!-- <a-button
-          v-if="formStatus === 'base-collaborate'"
-          data-testid="docs-share-btn"
-          class="!border-0 !rounded-md"
-          type="primary"
-          :disabled="!invitationValid"
-          @click="onShare"
-        >
-          Share
-        </a-button> -->
+        <div class="flex flex-1 h-full flex-col">
+          <LazyDlgShareAndCollaborateShareBase v-if="activeTab === 'base'" :is-view="isViewToolbar" />
+          <LazyDlgShareAndCollaborateSharePage v-else-if="activeTab === 'view'" />
+        </div>
       </div>
     </div>
-  </a-modal>
+  </NcModal>
 </template>
 
 <style lang="scss" scoped>
+.nc-share-active {
+  @apply bg-transparent !text-gray-900;
+}
+
+.highlight {
+  @apply absolute h-[calc(50%-4px)] w-[calc(8rem-8px)] shadow bg-white rounded-lg transition-all duration-300;
+  z-index: 0;
+}
+
 .share-collapse-item {
   @apply !rounded-lg !mb-2 !mt-4 !border-0;
 }
 
 .ant-collapse {
   @apply !bg-white !border-0;
 }
-</style>
 
-<style lang="scss">
 .nc-modal-share-collaborate {
+  .ant-modal-content {
+    @apply !rounded-2xl;
+  }
+
   .ant-modal {
     top: 10vh !important;
   }
@@ -226,10 +172,6 @@ watch(showShareModal, (val) => {
     @apply !p-0;
   }
 
-  .ant-modal-content {
-    @apply !rounded-lg !px-1 !py-2;
-  }
-
   .ant-select-selector {
     @apply !rounded-md !border-gray-200 !border-1;
   }

packages/nc-gui/components/general/CopyUrl.vue

@@ -37,9 +37,9 @@ const copyUrl = async () => {
     class="flex flex-row items-center justify-end text-gray-600 gap-x-1.5 py-1.5 px-1.5 bg-gray-50 rounded-md border-1 border-gray-200"
   >
     <div class="flex flex-row block flex-1 overflow-hidden pl-3 cursor-pointer" @click="copyUrl">
-      <div class="overflow-hidden whitespace-nowrap text-gray-500">{{ url }}</div>
+      <div class="overflow-hidden whitespace-nowrap truncate text-gray-500">{{ url }}</div>
     </div>
-    <div class="flex flex-row gap-x-1">
+    <div class="flex !text-gray-700 flex-row gap-x-1">
       <NcTooltip>
         <template #title>
           {{ $t('activity.openInANewTab') }}

packages/nc-gui/components/general/ShareProject.vue

@@ -64,8 +64,7 @@ const copySharedBase = async () => {
       @click="showShareModal = true"
     >
       <div v-if="!isMobileMode" class="flex flex-row items-center w-full gap-x-1">
-        <MaterialSymbolsPublic v-if="visibility === 'public'" class="h-3.5" />
-        <MaterialSymbolsLockOutline v-else-if="visibility === 'private'" class="h-3.5" />
+        <component :is="iconMap.mobileShare" class="h-3.5" />
         <div class="flex">{{ $t('activity.share') }}</div>
       </div>
       <GeneralIcon v-else icon="mobileShare" />

packages/nc-gui/components/nc/Modal.vue

@@ -8,13 +8,15 @@ const props = withDefaults(
     maskClosable?: boolean
     showSeparator?: boolean
     wrapClassName?: string
+    centered?: boolean
   }>(),
   {
     size: 'medium',
     destroyOnClose: true,
     maskClosable: true,
     showSeparator: true,
     wrapClassName: '',
+    centered: true,
   },
 )
 
@@ -86,7 +88,7 @@ const slots = useSlots()
     v-model:visible="visible"
     :class="{ active: visible }"
     :width="width"
-    :centered="true"
+    :centered="centered"
     :closable="false"
     :wrap-class-name="newWrapClassName"
     :footer="null"

packages/nc-gui/components/nc/Switch.vue

@@ -1,19 +1,30 @@
 <script lang="ts" setup>
-const props = withDefaults(defineProps<{ checked: boolean; disabled?: boolean; size?: 'default' | 'small' }>(), {
-  size: 'small',
-})
-
+const props = withDefaults(
+  defineProps<{ checked: boolean; disabled?: boolean; size?: 'default' | 'small'; loading?: boolean }>(),
+  {
+    size: 'small',
+  },
+)
 const emit = defineEmits(['change', 'update:checked'])
-
 const checked = useVModel(props, 'checked', emit)
 
+const loading = computed(() => props.loading)
+
 const onChange = (e: boolean) => {
   emit('change', e)
 }
 </script>
 
 <template>
-  <a-switch v-model:checked="checked" :disabled="disabled" class="nc-switch" v-bind="$attrs" :size="size" @change="onChange">
+  <a-switch
+    v-model:checked="checked"
+    :disabled="disabled"
+    :loading="loading"
+    :size="size"
+    class="nc-switch"
+    v-bind="$attrs"
+    @change="onChange"
+  >
   </a-switch>
   <span v-if="$slots.default" class="cursor-pointer pl-2" @click="checked = !checked">
     <slot />