fix: disbale toolbar and top bar

2 months ago · 8a2048f8a5
10 changed files with 46 additions and 45 deletions
--- a/packages/nc-gui/components/feed/Changelog/Item.vue
+++ b/packages/nc-gui/components/feed/Changelog/Item.vue
@ -62,7 +62,7 @@ const renderedText = computedAsync(async () => {
      </div>

      <div class="content">
-        <div class="flex flex-col py-6 gap-8">
+        <div class="flex flex-col py-6 gap-5">
          <div class="flex items-center">
            <div
              v-for="tag in tags"
@ -73,7 +73,7 @@ const renderedText = computedAsync(async () => {
                'bg-green-50': tag.color === 'green',
              }"
              :href="tag.href"
-              class="mr-4 flex gap-2 items-center px-1 rounded-md"
+              class="mr-3 flex gap-2 items-center px-1 rounded-md"
            >
              <component
                :is="tag.icon"
@ -90,7 +90,7 @@ const renderedText = computedAsync(async () => {
                  'text-purple-500': tag.color === 'purple',
                  'text-green-500': tag.color === 'green',
                }"
-                class="leading-5"
+                class="leading-5 text-[13px]"
              >
                {{ tag.text }}
              </span>
@ -147,7 +147,7 @@ const renderedText = computedAsync(async () => {
      @apply sticky top-0
      transform: translateY(calc(-50% + 3px)) translateX(50%);
      &:before {
-        @apply bg-brand-500 absolute w-1.5 h-1.5 left-0 rounded-full transform -translate-x-1/2;
+        @apply bg-brand-500 absolute w-2 h-2 border-2 border-white left-0 rounded-full transform -translate-x-1/2;
        content: '';
      }
    }
--- a/packages/nc-gui/components/feed/Changelog/index.vue
+++ b/packages/nc-gui/components/feed/Changelog/index.vue
@ -27,7 +27,7 @@ const { isLoading } = useInfiniteScroll(
    class="overflow-y-auto nc-scrollbar-md mx-auto w-full"
  >
    <div class="max-w-260 mx-auto">
-      <FeedChangelogItem v-for="feed in githubFeed" :item="feed" />
+      <FeedChangelogItem v-for="feed in githubFeed" :key="feed.Id" :item="feed" />
    </div>
  </div>
 </template>
--- a/packages/nc-gui/components/feed/Recents/Card.vue
+++ b/packages/nc-gui/components/feed/Recents/Card.vue
@ -19,9 +19,9 @@ const {
 } = props

 const feedIcon = {
-  'Twitter': iconMap.twitter,
-  'Youtube': iconMap.youtube,
-  'Github Release': iconMap.githubSolid,
+  Twitter: iconMap.twitter,
+  Youtube: iconMap.youtube,
+  Github: iconMap.githubSolid,
 }

 const renderedText = computedAsync(async () => {
@ -40,9 +40,9 @@ const renderedText = computedAsync(async () => {

 <template>
  <div class="bg-white rounded-2xl" style="width: 656px">
-    <div class="flex items-center justify-between px-5 py-5">
+    <div class="flex items-center justify-between px-5 py-4">
      <div class="flex items-center gap-3">
-        <component :is="feedIcon[source]" class="w-4 h-4 stroke-transparent" />
+        <component :is="feedIcon[source as any]" class="w-4 h-4 stroke-transparent" />
        <span class="font-weight-medium leading-5">
          {{ source }}
        </span>
@ -51,9 +51,9 @@ const renderedText = computedAsync(async () => {
        {{ timeAgo(CreatedAt) }}
      </div>
    </div>
-    <template v-if="source === 'Github Release'">
+    <template v-if="source === 'Github'">
      <LazyCellAttachmentPreviewImage v-if="Images?.length" :srcs="getPossibleAttachmentSrc(Images[0], 'card_cover')" />
-      <div class="prose pl-5 mt-5" v-html="renderedText"></div>
+      <div class="prose px-5 mt-5" v-html="renderedText"></div>
    </template>
    <template v-else-if="source === 'Youtube'">
      <YoutubeVue3 :videoid="extractYoutubeVideoId(Url)" :height="410" :width="656" :autoplay="0" />
--- a/packages/nc-gui/components/feed/Recents/index.vue
+++ b/packages/nc-gui/components/feed/Recents/index.vue
@ -24,11 +24,11 @@ const { isLoading } = useInfiniteScroll(
  <div
    ref="scrollContainer"
    :style="{
-      height: 'calc(100dvh - var(--toolbar-height) - 3.25rem)',
+      height: 'calc(100dvh - var(--toolbar-height) - 3.1rem)',
    }"
    class="overflow-y-auto nc-scrollbar-md w-full"
  >
-    <div class="flex flex-col items-center gap-6">
+    <div class="flex flex-col my-6 items-center gap-6">
      <FeedRecentsCard v-for="feed in socialFeed" :key="feed.Id" :item="feed" />
    </div>
  </div>
--- a/packages/nc-gui/components/feed/Roadmap.vue
+++ b/packages/nc-gui/components/feed/Roadmap.vue
@ -4,22 +4,6 @@ const iFrame = ref<HTMLIFrameElement | null>(null)
 const isLoaded = ref(false)

 const handleIframeLoad = () => {
-  if (!iFrame.value) {
-    return
-  }
-  const iframeDocument = iFrame.value?.contentDocument || iFrame.value?.contentWindow?.document
-
-  const classList = ['.nc-table-topbar', '.nc-table-toolbar']
-
-  for (const className of classList) {
-    nextTick(() => {
-      const element = iframeDocument?.querySelector(className)
-
-      if (element) {
-        element.remove()
-      }
-    })
-  }
  isLoaded.value = true
 }
 </script>
@ -27,7 +11,7 @@ const handleIframeLoad = () => {
 <template>
  <div
    :style="{
-      height: 'calc(100dvh - var(--toolbar-height))',
+      height: 'calc(100dvh - var(--toolbar-height) + 4rem)',
    }"
    :class="{
      'hidden': !isLoaded,
@ -40,7 +24,7 @@ const handleIframeLoad = () => {

    <iframe
      ref="iFrame"
-      src="http://localhost:3000/#/nc/kanban/dc9d297d-2d89-4a33-9804-87924148913a"
+      src="http://localhost:3000/#/nc/kanban/dc9d297d-2d89-4a33-9804-87924148913a?disableTopbar=true&disableToolbar=true"
      width="100%"
      height="100%"
      style="border: none"
--- a/packages/nc-gui/components/feed/Social.vue
+++ b/packages/nc-gui/components/feed/Social.vue
@ -33,16 +33,17 @@ const openUrl = (url: string) => {
 </script>

 <template>
-  <div style="width: 232px" class="flex flex-col border-gray-200 rounded-lg border-1">
+  <div style="width: 232px" class="flex flex-col bg-white border-gray-200 rounded-lg border-1">
    <div class="text-gray-800 font-semibold leading-6 border-b-1 border-gray-200 px-4 py-3">Stay tuned</div>
    <div class="flex flex-col gap-2">
      <div
        v-for="social in socialIcons"
        :key="social.name"
        class="flex items-center cursor-pointer rounded-lg hover:bg-gray-100 py-3 px-4 gap-2 text-gray-800"
+        @click="openUrl(social.link)"
      >
        <component :is="social.icon" class="w-5 h-5 stroke-transparent" />
-        <span class="font-semibold" @click="openUrl(social.link)">{{ social.name }}</span>
+        <span class="font-semibold">{{ social.name }}</span>
      </div>
    </div>
  </div>
--- a/packages/nc-gui/components/feed/View.vue
+++ b/packages/nc-gui/components/feed/View.vue
@ -43,7 +43,7 @@ const tabs = [
 <template>
  <FeedHeader />

-  <FeedSocial class="absolute right-4 top-28" />
+  <FeedSocial v-if="activeTab === 'recents'" class="absolute right-4 top-28" />
  <div class="flex flex-col h-full">
    <NcTabs v-model:activeKey="activeTab" centered>
      <a-tab-pane v-for="tab in tabs" :key="tab.key" class="bg-gray-50 !h-full">
--- a/packages/nc-gui/components/feed/Youtube/Player.vue
+++ b/packages/nc-gui/components/feed/Youtube/Player.vue
@ -14,16 +14,23 @@ const {
 </script>

 <template>
-  <div class="flex flex-col mt-6 gap-5">
-    <YoutubeVue3 :videoid="extractYoutubeVideoId(Url)" :height="470" :width="764" :autoplay="0" :controls="1" />
+  <div class="mt-6 border-b-1 border-gray-200">
+    <YoutubeVue3
+      :videoid="extractYoutubeVideoId(Url)"
+      class="!rounded-xl"
+      :height="470"
+      :width="764"
+      :autoplay="0"
+      :controls="1"
+    />

-    <div class="text-gray-900 font-bold text-2xl">
-      {{ Title }}
-    </div>
-    <div class="text-gray-900">
-      {{ Description.length > 200 ? `${Description.slice(0, 280)}...` : Description }}
+    <div class="flex flex-col py-5 gap-4">
+      <div class="text-gray-900 font-bold text-2xl">
+        {{ Title }}
+      </div>
+      <div class="text-gray-900">
+        {{ Description.length > 200 ? `${Description.slice(0, 280)}...` : Description }}
+      </div>
    </div>
  </div>
 </template>
-
-<style lang="scss"></style>
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@ -12,6 +12,10 @@ const containerRef = ref<HTMLElement>()

 const { width } = useElementSize(containerRef)

+const router = useRouter()
+
+const disableToolbar = computed(() => router.currentRoute.value.query?.disableToolbar === 'true')
+
 const isTab = computed(() => {
  if (!isCalendar.value) return false
  return width.value > 1200
@ -29,7 +33,7 @@ provide(IsToolbarIconMode, isToolbarIconMode)

 <template>
  <div
-    v-if="!isMobileMode"
+    v-if="!isMobileMode && !disableToolbar"
    ref="containerRef"
    :class="{
      'px-4': isMobileMode,
--- a/packages/nc-gui/layouts/shared-view.vue
+++ b/packages/nc-gui/layouts/shared-view.vue
@ -7,6 +7,10 @@ const { sharedView, allowCSVDownload } = useSharedView()

 const router = useRouter()

+const route = router.currentRoute
+
+const disableTopbar = computed(() => route.value.query?.disableTopbar === 'true')
+
 onMounted(() => {
  // check if we are inside an iframe
  // if we are, communicate to the parent page whenever we navigate to a new url,
@ -50,6 +54,7 @@ export default {
  <a-layout id="nc-app">
    <a-layout class="!flex-col bg-white">
      <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-gray-200 !h-[46px]"
      >
        <div class="flex items-center gap-6 h-7 max-w-[calc(100%_-_280px)] xs:max-w-[calc(100%_-_90px)]">