feat: some keyboard actions and design updates

m-emre-yalcin · Aug 14, 2022 · 70db8cd · 70db8cd · vercel · Aug 14, 2022
1 parent 0187ad8
commit 70db8cd
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 19 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,11 +8,27 @@ const router = useRouter();
 const barItems = ref([
   {
     name: "Projects",
-    href: "/",
   },
   {
     name: "Settings",
-    href: "/settings",
+    showList: false,
+    list: [
+      {
+        name: "Theme",
+      },
+      {
+        name: "Download store",
+      },
+      {
+        name: "Reset store",
+      },
+      {
+        name: "Change user",
+      },
+      {
+        name: "Notifications",
+      },
+    ],
   },
 ]);
 

diff --git a/src/assets/base.css b/src/assets/base.css
@@ -25,7 +25,9 @@ body {
   /* background-image: url(@/assets/images/Floral-Grey-Seamless-Pattern-For-Website-Background.jpg);*/
   background-color: var(--primary-color);
 }
-input {
+input,
+textarea,
+select {
   outline: unset;
   font-family: var(--main-font);
 }

diff --git a/src/components/actionsbox.vue b/src/components/actionsbox.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useHomeStore } from "../stores/home";
 import { storeToRefs } from "pinia";
 import colors from "../assets/colors.json";
@@ -19,6 +19,14 @@ const getThemes = (prefix: "p-" | "s-" | "t-") => {
     });
 };
 
+onMounted(() => {
+  document.body.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      store.closeActions();
+    }
+  });
+});
+
 const datalist = ref({
   project: [
     {
@@ -105,7 +113,12 @@ const executeItemAction = (item: any, type: any) => {
           @click="executeItemAction(item, actionsbox.data.type)"
         >
           <template v-if="item.key">
-            <input type="text" v-model="actionsbox.data.item[item.key]" />
+            <input
+              autofocus
+              type="text"
+              v-model="actionsbox.data.item[item.key]"
+              @keydown.enter="store.closeActions()"
+            />
           </template>
 
           <template v-else-if="item.colors">

diff --git a/src/components/tab.vue b/src/components/tab.vue
@@ -44,7 +44,6 @@ defineProps<{
   gap: 10px;
   padding: 4px 10px;
   user-select: none;
-  background-color: rgb(82, 39, 74);
   color: #eee;
   svg {
     fill: white;
@@ -64,6 +63,7 @@ defineProps<{
     }
   }
   &:not(.active) {
+    background-color: rgb(72, 1, 62) !important;
     cursor: pointer;
 
     &:hover {

diff --git a/src/components/tabs.vue b/src/components/tabs.vue
@@ -15,7 +15,7 @@ const { tabs } = storeToRefs(store);
 
 <template>
   <!-- contains all opened projects or settings -->
-  <div class="tabs not-draggable">
+  <div class="tabs not-draggable" v-if="tabs.length">
     <draggable
       :list="tabs"
       :animation="100"
@@ -47,7 +47,7 @@ const { tabs } = storeToRefs(store);
   align-items: flex-end;
   grid-auto-flow: column;
   justify-content: flex-start;
-  max-width: calc(100vw - 8px);
+  max-width: calc(100vw);
   margin-top: 6px;
 
   ::-webkit-scrollbar,

diff --git a/src/components/title-bar.vue b/src/components/title-bar.vue
@@ -1,24 +1,40 @@
 <script lang="ts" setup>
 import IconCarrot from "./icons/IconCarrot.vue";
 export interface Props {
-  items: Array<{
-    name: string;
-    href: string;
-  }>;
   title: string;
+  items: Array<Item>;
 }
-
+export type Item = {
+  name: string;
+  showList?: boolean;
+  list: Array<Item>;
+};
 defineProps<Props>();
+
+function toggleList(item: Item, value?: boolean) {
+  if (typeof arguments[1] !== "undefined") item.showList = value;
+  else item.showList = !item.showList;
+}
 </script>
 
 <template>
   <header class="draggable">
     <nav class="not-draggable">
       <ul>
-        <li v-for="item in items" :key="item.href">
-          <router-link :to="item.href">
-            <span class="name">{{ item.name }}</span>
-          </router-link>
+        <li
+          v-for="item in items"
+          :key="item.name"
+          tabindex="-1"
+          @blur.stop.prevent="toggleList(item, false)"
+          @click="toggleList(item)"
+        >
+          <div class="name">{{ item.name }}</div>
+
+          <ul class="drop-down" v-if="item.showList">
+            <li v-for="subItem in item.list" :key="subItem.name">
+              {{ subItem.name }}
+            </li>
+          </ul>
         </li>
       </ul>
     </nav>
@@ -88,11 +104,13 @@ header {
       align-items: center;
 
       li {
-        a {
+        position: relative;
+
+        .name {
           cursor: pointer;
           text-decoration: none;
           color: rgb(214, 214, 214);
-          font-weight: 300;
+          font-weight: 400;
           padding: 4px 6px;
           font-size: 14px;
           border-radius: 4px;
@@ -101,6 +119,43 @@ header {
             background-color: rgba(255, 255, 255, 0.1);
           }
         }
+
+        ul.drop-down {
+          position: absolute;
+          display: flex;
+          flex-direction: column;
+          background-color: white;
+          z-index: 10;
+          border-radius: 6px;
+          left: 0px;
+          top: calc(100% + 4px);
+          box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
+
+          li {
+            color: rgb(20, 20, 20);
+            background-color: white;
+            padding: 4px 8px;
+            display: flex;
+            width: 100%;
+            min-width: 140px;
+            border-bottom: 1px solid #eee;
+
+            &:first-child {
+              border-top-left-radius: 6px;
+              border-top-right-radius: 6px;
+            }
+            &:last-child {
+              border-bottom-left-radius: 6px;
+              border-bottom-right-radius: 6px;
+              border-bottom: unset;
+            }
+
+            &:hover {
+              background-color: rgb(68, 8, 60);
+              color: white;
+            }
+          }
+        }
       }
     }
   }

diff --git a/src/components/welcome.vue b/src/components/welcome.vue
@@ -1,6 +1,22 @@
+<script lang="ts" setup>
+import { useHomeStore } from "../stores/home";
+import IconPlus from "./icons/IconPlus.vue";
+const store = useHomeStore();
+</script>
+
 <template>
   <div class="welcome-container">
     <h1>Welcome to task manager!</h1>
+
+    <div class="start-container">
+      <div
+        class="btn add-project"
+        @click="store.addTab()"
+        title="Start one project"
+      >
+        <IconPlus />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,9 +25,43 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   flex: 1;
   height: inherit;
   user-select: none;
   color: white;
+
+  .start-container {
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    h2 {
+      font-size: 0.8rem;
+      margin-bottom: 4px;
+      opacity: 0.8;
+    }
+
+    .btn.add-project {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 60px;
+      border-radius: 20px;
+      background-color: rgb(110, 0, 98);
+      &:hover {
+        background-color: rgb(151, 0, 133);
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+        fill: rgb(218, 218, 218);
+      }
+    }
+  }
 }
 </style>