wip: project list ui improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/projectList/createNewProjectBtn.vue

@@ -0,0 +1,142 @@
+<template>
+  <v-menu v-if="connectToExternalDB" offset-y bottom open-on-hover>
+    <template #activator="{ on }">
+      <slot :on="on">
+        <div>
+          <v-btn
+            v-if="_isUIAllowed('projectCreate',true)"
+            v-ge="['home', 'project-new']"
+            :x-large="$vuetify.breakpoint.lgAndUp"
+            :large="$vuetify.breakpoint.mdAndDown"
+            data-v-step="1"
+            outlined
+            rounded
+            color="primary"
+            class="nc-new-project-menu elevation-3"
+            v-on="on"
+          >
+            <v-icon class="mr-2">
+              mdi-plus
+            </v-icon>
+
+            <!-- New Project -->
+            {{ $t('title.newProj') }}
+            <v-icon class="mr-1" small>
+              mdi-menu-down
+            </v-icon>
+          </v-btn>
+        </div>
+      </slot>
+    </template>
+    <v-list dense>
+      <v-list-item
+        class="create-xc-db-project nc-create-xc-db-project"
+        @click="onCreateProject('xcdb')"
+      >
+        <v-list-item-icon class="mr-2">
+          <v-icon small color="blue">
+            mdi-plus
+          </v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>
+          <!-- Create -->
+          <span>{{
+            $t('general.create')
+          }}</span>
+        </v-list-item-title>
+        <v-spacer />
+        <v-tooltip right>
+          <template #activator="{ on }">
+            <v-icon
+              x-small
+              color="grey"
+              class="ml-4"
+              v-on="on"
+            >
+              mdi-information-outline
+            </v-icon>
+          </template>
+          <!-- Create a new project -->
+          <span class="caption">{{
+            $t('tooltip.xcDB')
+          }}</span>
+        </v-tooltip>
+      </v-list-item>
+      <v-list-item
+        title
+        class="pt-2 create-external-db-project nc-create-external-db-project"
+        @click="onCreateProject()"
+      >
+        <v-list-item-icon class="mr-2">
+          <v-icon small color="green">
+            mdi-database-outline
+          </v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>
+          <!-- Create By Connecting <br>To An External Database -->
+          <span
+            style="line-height: 1.5em"
+            v-html="
+              $t('activity.createProjectExtended.extDB')
+            "
+          />
+        </v-list-item-title>
+        <v-spacer />
+        <v-tooltip right>
+          <template #activator="{ on }">
+            <v-icon
+              x-small
+              color="grey"
+              class="ml-4"
+              v-on="on"
+            >
+              mdi-information-outline
+            </v-icon>
+          </template>
+          <!-- Supports MySQL, PostgreSQL, SQL Server & SQLite -->
+          <span class="caption">{{
+            $t('tooltip.extDB')
+          }}</span>
+        </v-tooltip>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+  <x-btn
+    v-else-if="_isUIAllowed('projectCreate',true)"
+    v-ge="['home', 'project-new']"
+    outlined
+    data-v-step="1"
+    color="primary"
+    @click="onCreateProject('xcdb')"
+  >
+    <!-- New Project -->
+    {{ $t('title.newProj') }}
+  </x-btn>
+  <span v-else />
+</template>
+
+<script>
+export default {
+  name: 'CreateNewProjectBtn',
+  computed: {
+    connectToExternalDB() {
+      return this.$store.state.project && this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.connectToExternalDB
+    }
+  },
+  methods: {
+    onCreateProject(xcdb) {
+      if (xcdb === 'xcdb') {
+        this.$router.push('/project/xcdb')
+        this.$tele.emit('project:create:xcdb:trigger')
+      } else {
+        this.$router.push('/project/0')
+        this.$tele.emit('project:create:extdb:trigger')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui/layouts/default.vue

@@ -33,7 +33,7 @@
             }})</span>
           </v-tooltip>
 
-          <span class="body-1 ml-n2" @click="$router.push('/projects')"> {{ brandName }}</span>
+          <span class="body-1 ml-n1" @click="$router.push('/projects')"> {{ brandName }}</span>
         </v-toolbar-title>
 
         <!--        <v-toolbar-items  />-->

packages/nc-gui/mixins/colors.js

@@ -8,5 +8,13 @@ export default {
     textColors() {
       return this.$store.state.windows.darkTheme ? colors.light : colors.dark
     }
+  },
+  methods: {
+    getColor(i) {
+      return this.colors[i % this.colors.length]
+    },
+    getTextColor(i) {
+      return this.textColors[i % this.textColors.length]
+    }
   }
 }

packages/nc-gui/pages/projects/list.vue

@@ -0,0 +1,229 @@
+<template>
+  <div
+    class="d-flex "
+    style="height:calc(100vh - 52px)"
+  >
+    <v-navigation-drawer
+      left
+      permanent
+      width="max(300px,20%)"
+      class="h-100"
+    >
+      <div class="d-flex flex-column h-100">
+        <div class="advance-menu flex-grow-1 pt-8">
+          <v-list
+            v-if="_isUIAllowed('treeViewProjectSettings')"
+            shaped
+            dense
+            :class="{ 'advanced-border': overShieldIcon }"
+          >
+            <v-list-item-group v-model="activePage" color="x-active" mandatory>
+              <v-list-item
+                v-for="item in navDrawerOptions"
+                :key="item.title"
+                :value="item.title"
+                dense
+                class="body-2"
+              >
+                <v-list-item-title>
+                  <v-icon small class="ml-5">
+                    {{ item.icon }}
+                  </v-icon>
+                  <span
+                    class="font-weight-medium ml-3"
+                    :class="{'textColor--text text--lighten-2':item.title!==activePage}"
+                  >
+                    {{ item.title }}
+                  </span>
+                </v-list-item-title>
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+        </div>
+        <v-divider />
+        <extras class="pl-6 " />
+        <div class="sponsor ml-2 mb-2 mr-2">
+          <sponsor-mini nav />
+        </div>
+      </div>
+    </v-navigation-drawer>
+    <v-container class="flex-grow-1 py-9 px-15 h-100" style="overflow-y: auto">
+      <div class="d-flex">
+        <h2 class="display-1 ml-5 mb-7 font-weight-medium textColor--text text--lighten-2 flex-grow-1">
+          {{ activePage }}
+        </h2>
+
+        <div class="">
+          <create-new-project-btn />
+        </div>
+      </div>
+      <v-divider class="mb-3" />
+      <div v-if="projectList &&projectList.length" class="nc-project-item-container d-flex d-100">
+        <div
+          v-for="(project,i) in projectList"
+          :key="project.id"
+          class=" nc-project-item elevation-0 d-flex align-center justify-center flex-column py-5"
+        >
+          <div
+            class="nc-project-thumbnail pointer text-uppercase d-flex align-center justify-center"
+            :style="{backgroundColor:getTextColor(i)}"
+            @click="openProject(project)"
+          >
+            {{ project.title.split(' ').map(w => w[0]).slice(0, 2).join('') }}
+
+            <v-icon class="nc-project-star-icon" small color="white" v-on="on" @click.stop>
+              mdi-star-outline
+            </v-icon>
+
+            <v-menu bottom offset-y>
+              <template #activator="{on}">
+                <v-icon class="nc-project-option-menu-icon" color="white" v-on="on" @click.stop>
+                  mdi-menu-down
+                </v-icon>
+              </template>
+              <v-list dense>
+                <v-list-item>
+                  <v-list-item-title>
+                    <v-icon small color="red">
+                      mdi-delete-outline
+                    </v-icon>
+                    Delete
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </div>
+
+          <div class="text-center pa-2 nc-project-title body-2 font-weight-medium ">
+            {{ project.title }}
+          </div>
+        </div>
+
+        <div class="pointer nc-project-item nc-project-item elevation-0 d-flex align-center justify-center flex-column">
+          <create-new-project-btn>
+            <template #default="{on}">
+              <div
+                class="nc-project-thumbnail nc-add-project text-uppercase d-flex align-center justify-center grey lighten-2 "
+                v-on="on"
+              >
+                +
+              </div>
+            </template>
+          </create-new-project-btn>
+          <div class="text-center pa-2 nc-project-title body-2 font-weight-medium ">
+            Add project
+          </div>
+        </div>
+      </div>
+      <div
+        v-else
+        class="px-4 py-10 text-center textColor--text text--lighten-3 caption backgroundColor "
+      >
+        Please create a project
+      </div>
+    </v-container>
+  </div>
+</template>
+
+<script>
+
+import colors from '~/mixins/colors'
+import CreateNewProjectBtn from '~/components/projectList/createNewProjectBtn'
+import Extras from '~/components/project/spreadsheet/components/extras'
+import SponsorMini from '~/components/sponsorMini'
+
+export default {
+  name: 'List',
+  components: { SponsorMini, Extras, CreateNewProjectBtn },
+  mixins: [colors],
+  data: () => ({
+    projectList: null,
+    activePage: null,
+    navDrawerOptions: [{
+      title: 'My NocoDB',
+      icon: 'mdi-folder-outline'
+    }, {
+      title: 'Shared With Me',
+      icon: 'mdi-account-group'
+    }, {
+      title: 'Recent',
+      icon: 'mdi-clock-outline'
+    }, {
+      title: 'Starred',
+      icon: 'mdi-star'
+    }]
+  }),
+  mounted() {
+    this.loadProjectList()
+  },
+  methods: {
+    async loadProjectList() {
+      const { list, pageInfo } = await this.$api.project.list()
+      this.projectList = list
+    },
+    async openProject(project) {
+      await this.$router.push({
+        path: `/nc/${project.id}`
+      })
+      this.$tele.emit(`project:open:${this.projects.length}`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.nc-project-item-container {
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.nc-project-item {
+  width: 150px;
+  align-items: center;
+}
+
+.nc-project-thumbnail {
+  height: 100px;
+  width: 100px;
+  font-size: 50px;
+  color: white;
+  font-weight: bold;
+  border-radius: 4px;
+  margin-inside: auto;
+  position: relative;
+}
+
+.nc-project-option-menu-icon,.nc-project-star-icon {
+  position: absolute;
+  opacity: 0;
+  transition: .3s opacity;
+}
+.nc-project-star-icon{
+  top:8px;
+  right: 10px;
+}
+.nc-project-option-menu-icon{
+  bottom: 5px;
+  right: 5px;
+}
+.nc-project-thumbnail:hover .nc-project-option-menu-icon,.nc-project-thumbnail:hover .nc-project-star-icon{
+  opacity: 1;
+}
+.nc-project-title {
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.nc-project-title.nc-add-project {
+  font-size: 60px;
+}
+
+/deep/ .v-navigation-drawer__border {
+  background-color: transparent !important;
+}
+
+.nc-project-thumbnail:hover {
+  background-image: linear-gradient(#0002, #0002);
+}
+
+</style>