nocodb/packages/nc-gui/layouts/shared-view.vue

<script lang="ts" setup>
import { PlanTitles } from 'nocodb-sdk'

const { isLoading, appInfo } = useGlobal()

const { isDark } = useTheme()

const { isMobileMode } = storeToRefs(useConfigStore())

const { sharedView, allowCSVDownload } = useSharedView()

const { isFullScreen } = storeToRefs(useSidebarStore())

const { activePlanTitle } = useEeConfig()

const router = useRouter()

const route = router.currentRoute

const disableTopbar = computed(() => route.value.query?.disableTopbar === 'true' || isFullScreen.value)

const ncNotFound = computed(() => route.value.query?.ncNotFound === 'true')

const showSignUpButton = computed(() => {
  if (appInfo.value.ee) return false

  return !activePlanTitle.value || activePlanTitle.value === PlanTitles.FREE
})

onMounted(() => {
  // check if we are inside an iframe
  // if we are, communicate to the parent page whenever we navigate to a new url,
  // so that the parent page can respond to it properly.
  // E.g. by making the browser navigate to that url, and not just the iframe.
  // This is useful for integrating NocoDB into other products,
  // such as Outline (https://github.com/outline/outline/pull/4184).
  if (window.parent !== window) {
    const notifyLocationChange = (value: string) =>
      window.parent.postMessage(
        {
          event: 'locationchange',
          payload: { value },
        },
        '*',
      )

    router.afterEach((to) => notifyLocationChange(location.origin + to.fullPath))
    useEventListener(window, 'beforeunload', () => {
      const { href } = document.activeElement as { href?: string }
      if (href) notifyLocationChange(href)
    })
  }

  // handle meta title
  if (sharedView.value?.title) {
    document.title = `${sharedView.value.title}`
  } else {
    document.title = 'NocoDB'
  }
})
</script>

<script lang="ts">
export default {
  name: 'SharedView',
}
</script>

<template>
  <a-layout id="nc-app">
    <a-layout class="!flex-col bg-nc-bg-default">
      <GeneralPageDoesNotExist v-if="ncNotFound" />
      <template v-else>
        <a-layout-header
          v-if="!disableTopbar"
          class="nc-table-topbar flex items-center justify-between !bg-transparent !px-3 !py-2 border-b-1 border-nc-border-gray-medium !h-[46px]"
        >
          <div class="flex items-center gap-6 h-7 max-w-[calc(100%_-_280px)] xs:max-w-[calc(100%_-_90px)]">
            <a
              class="transition-all duration-200 cursor-pointer transform hover:scale-105"
              href="https://github.com/nocodb/nocodb"
              target="_blank"
              rel="noopener noreferrer"
            >
              <img v-if="isDark" width="96" alt="NocoDB" src="~/assets/img/brand/text.png" class="flex-none min-w-[96px]" />
              <img v-else width="96" alt="NocoDB" src="~/assets/img/brand/nocodb.png" class="flex-none min-w-[96px]" />
            </a>

            <div class="flex items-center gap-2 text-nc-content-gray-emphasis text-sm truncate">
              <template v-if="isLoading">
                <span data-testid="nc-loading">{{ $t('general.loading') }}</span>

                <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin ': isLoading }" />
              </template>

              <div v-else class="text-sm font-semibold truncate nc-shared-view-title flex gap-2 items-center">
                <GeneralViewIcon v-if="sharedView" class="h-4 w-4 ml-0.5" :meta="sharedView" />

                <span class="truncate">
                  {{ sharedView?.title }}
                </span>

                <NcTooltip v-if="sharedView?.description?.length" placement="bottom">
                  <template #title>
                    {{ sharedView?.description }}
                  </template>

                  <NcButton type="text" class="!hover:bg-transparent" size="xsmall">
                    <GeneralIcon icon="info" class="!w-3.5 !h-3.5 nc-info-icon text-nc-content-gray-subtle2" />
                  </NcButton>
                </NcTooltip>
              </div>
            </div>
          </div>

          <div class="flex items-center gap-3">
            <DashboardMiniSidebarTheme placement="bottom" render-as-btn />

            <LazySmartsheetToolbarExportWithProvider v-if="allowCSVDownload" />

            <a
              v-if="showSignUpButton"
              href="https://app.nocodb.com/signin"
              target="_blank"
              class="!no-underline xs:hidden"
              rel="noopener"
            >
              <NcButton size="xs"> {{ $t('labels.signUpForFree') }} </NcButton>
            </a>
          </div>
        </a-layout-header>
        <NcFullScreen v-model="isFullScreen" class="h-full" :page-only="true">
          <div
            class="nc-shared-view-container w-full overflow-hidden"
            :class="{
              'nc-shared-mobile-view': isMobileMode,
              'disable-topbar': disableTopbar,
            }"
          >
            <slot />
          </div>
        </NcFullScreen>
      </template>
    </a-layout>
  </a-layout>
</template>

<style lang="scss" scoped>
#nc-app {
  .ant-layout-header {
    @apply !h-[46px];

    line-height: unset;
  }

  :deep(.nc-table-toolbar) {
    @apply px-2;
  }

  .nc-shared-view-container {
    &:not(.disable-topbar) {
      --topbar-height: 2.875rem; // 46px

      height: calc(100vh - (var(--topbar-height) - 3.6px));

      @supports (height: 100dvh) {
        height: calc(100dvh - (var(--topbar-height) - 3.6px));
      }
    }

    &.disable-topbar {
      height: 100vh;

      @supports (height: 100dvh) {
        height: 100dvh;
      }
    }
  }
}
</style>