refactor(gui-v2): ui changes

Signed-off-by: Pranav C <pranavxc@gmail.com>
2 years ago · cd291d82c1
13 changed files with 35 additions and 29 deletions
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@ -39,7 +39,7 @@ const applyChanges = async () => await filterComp.value?.applyChanges()
        <div class="flex items-center gap-1">
          <MdiFilterOutline />
          <!-- Filter -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.filter') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.filter') }}</span>
          <MdiMenuDown class="text-grey" />
        </div>
      </a-button>
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@ -86,7 +86,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
          <MdiEyeOffOutline />

          <!-- Fields -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('objects.fields') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('objects.fields') }}</span>

          <MdiMenuDown class="text-grey" />
        </div>
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@ -126,7 +126,7 @@ onMounted(() => {
      <div class="flex items-center gap-1" @click="genShareLink">
        <MdiOpenInNewIcon />
        <!-- Share View -->
-        <span class="!text-sm font-weight-medium"> {{ $t('activity.shareView') }}</span>
+        <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>
      </div>
    </a-button>

--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@ -40,7 +40,7 @@ watch(
        ><div class="flex items-center gap-1">
          <MdiSortIcon />
          <!-- Sort -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.sort') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span>
          <MdiMenuDownIcon class="text-grey" />
        </div>
      </a-button>
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
@ -136,10 +136,10 @@ async function changeLockType(type: LockType) {
          <component
            :is="viewIcons[selectedView?.type].icon"
            class="nc-view-icon group-hover:hidden"
-            :class="`text-${viewIcons[selectedView?.type].color}`"
+            :style="{ color: viewIcons[selectedView?.type].color }"
          />
-          <span class="!text-sm font-weight-medium">{{ selectedView?.title }}</span>
-          <component :is="Icon" />
+          <span class="!text-sm font-weight-normal">{{ selectedView?.title }}</span>
+          <component :is="Icon" class="text-gray-500" />
          <MdiMenuDown class="text-grey" />
        </div>
      </a-button>
@ -162,7 +162,7 @@ async function changeLockType(type: LockType) {

              <template #expandIcon></template>
              <a-menu-item>
-                <!--              <div class="min-w-[350px] max-w-[500px] shadow bg-white"> -->
+                <!--              <div class=" max-w-[500px] shadow bg-white"> -->
                <!--                <div> -->
                <div class="nc-locked-menu-item" @click="changeLockType(LockType.Collaborative)">
                  <div>
@ -307,6 +307,6 @@ async function changeLockType(type: LockType) {

 <style scoped>
 .nc-locked-menu-item > div {
-  @apply grid grid-cols-[30px,auto] gap-2  p-2 items-center;
+  @apply grid grid-cols-[30px, auto] gap-2  p-2 items-center min-w-[350px];
 }
 </style>
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@ -31,7 +31,7 @@ const { isOpen } = useSidebar()

    <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />

-    <ToggleDrawer class="mr-2" />
+    <ToggleDrawer v-if="!isOpen" class="mr-2" />
  </div>
 </template>

--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@ -36,6 +36,7 @@ function onOpenModal(type: ViewTypes, title = '') {

 <template>
  <a-menu :selected-keys="[]" class="flex-1 flex flex-col">
+    <div class="flex-1"></div>
    <div v-if="isUIAllowed('virtualViewsCreateOrEdit')">
      <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
        {{ $t('activity.createView') }}
@ -52,7 +53,7 @@ function onOpenModal(type: ViewTypes, title = '') {
          </template>

          <div class="text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" />
+            <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />

            <div>{{ $t('objects.viewType.grid') }}</div>

@ -74,7 +75,7 @@ function onOpenModal(type: ViewTypes, title = '') {
          </template>

          <div class="text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" />
+            <component :is="viewIcons[ViewTypes.GALLERY].icon" :style="{ color: viewIcons[ViewTypes.GALLERY].color }" />

            <div>{{ $t('objects.viewType.gallery') }}</div>

@ -97,7 +98,7 @@ function onOpenModal(type: ViewTypes, title = '') {
          </template>

          <div class="text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" />
+            <component :is="viewIcons[ViewTypes.FORM].icon" :style="{ color: viewIcons[ViewTypes.FORM].color }" />

            <div>{{ $t('objects.viewType.form') }}</div>

@ -107,9 +108,10 @@ function onOpenModal(type: ViewTypes, title = '') {
          </div>
        </a-tooltip>
      </a-menu-item>
+
+      <div class="w-full h-4"></div>
    </div>

-    <div class="flex-1"></div>
    <!--    <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" /> -->

    <!--    <div class="flex-auto justify-end flex flex-col gap-3 mt-3"> -->
@ -129,7 +131,7 @@ function onOpenModal(type: ViewTypes, title = '') {
    <!--      </button> -->
    <!--    </div> -->

-    <general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
+    <!--    <general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
      <template #front>
        <div class="flex h-full w-full gap-6 flex-col">
          <general-social />
@ -149,7 +151,7 @@ function onOpenModal(type: ViewTypes, title = '') {
      </template>

      <template #back>
-        <!-- todo: add project cost -->
+        &lt;!&ndash; todo: add project cost &ndash;&gt;
        <a
          href="https://github.com/sponsors/nocodb"
          target="_blank"
@ -160,7 +162,7 @@ function onOpenModal(type: ViewTypes, title = '') {
          {{ $t('activity.sponsorUs') }}
        </a>
      </template>
-    </general-flipping-card>
+    </general-flipping-card> -->

    <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
  </a-menu>
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@ -160,7 +160,7 @@ function onStopEdit() {
        <component
          :is="viewIcons[vModel.type].icon"
          class="nc-view-icon group-hover:hidden"
-          :class="`text-${viewIcons[vModel.type].color}`"
+          :style="{ color: viewIcons[vModel?.type]?.color }"
        />
      </div>

--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@ -99,13 +99,13 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
    class="relative shadow-md h-full"
    theme="light"
  >
-    <!--
    <Toolbar
      v-if="isOpen"
      class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"
      :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }"
    />

+    <!--
    <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
      <template #start>
        <a-tooltip v-if="isUIAllowed('virtualViewsCreateOrEdit')" placement="left">
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@ -15,8 +15,12 @@ const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
      />
    </div>
  </a-tooltip> -->
-
-  <a-button size="small" @click="toggle(!isOpen)">
-    <div class="flex items-center gap-2"><MdiMenu /> Views</div>
-  </a-button>
+  <div :class="{ 'nc-active-btn': isOpen }">
+    <a-button size="small" @click="toggle(!isOpen)">
+      <div class="flex items-center gap-1 text-xs" :class="{ 'text-gray-500': !isOpen }">
+        <MdiMenu class="!text-xs" />
+        Views
+      </div>
+    </a-button>
+  </div>
 </template>
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@ -22,7 +22,7 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 <template>
  <div
    v-if="!isForm"
-    class="flex gap-2"
+    class="flex gap-2 justify-start"
    @click="
      () => {
        clickCount = clickCount + 1
@ -45,7 +45,7 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })

      <div class="dot" />
    </template>
-    <h3 class="pt-3 px-3 text-xs text-gray-500 font-semibold">{{ $t('objects.views') }}</h3>
+    <!--    <h3 class="pt-3 px-3 text-xs text-gray-500 font-semibold">{{ $t('objects.views') }}</h3> -->

    <!--    <LockMenu v-if="isUIAllowed('view-type')" @click.stop /> -->

@ -60,7 +60,7 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
    <!--    <div :class="{ 'w-[calc(100%_+_16px)] h-[1px] bg-gray-200 mt-1 -ml-1': !isOpen, 'dot': isOpen }" /> -->

    <ToggleDrawer />
-
+    <span></span>
    <slot name="end" />
  </div>
  <div v-else>
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@ -83,10 +83,10 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi

            <SmartsheetForm v-else-if="isForm" />
          </div>
-          <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
        </div>
      </template>
    </div>
+    <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
  </div>
 </template>

--- a/packages/nc-gui-v2/utils/viewUtils.ts
+++ b/packages/nc-gui-v2/utils/viewUtils.ts
@ -8,8 +8,8 @@ import MdiKanbanIcon from '~icons/mdi/tablet-dashboard'
 import MdiEyeIcon from '~icons/mdi/eye-circle-outline'

 export const viewIcons = {
-  [ViewTypes.GRID]: { icon: MdiGridIcon, color: 'blue' },
-  [ViewTypes.FORM]: { icon: MdiFormIcon, color: 'pink' },
+  [ViewTypes.GRID]: { icon: MdiGridIcon, color: '#8f96f2' },
+  [ViewTypes.FORM]: { icon: MdiFormIcon, color: '#ec4899' },
  calendar: { icon: MdiCalendarIcon, color: 'purple' },
  [ViewTypes.GALLERY]: { icon: MdiGalleryIcon, color: 'orange' },
  [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' },