@appscode/design-system 1.1.0 → 2.0.0

package/vue-components/v3/navbar/NavbarItemContent.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="ac-menu-content">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ac-menu-content {
+  position: absolute;
+  right: 0;
+  top: 80px;
+  min-width: 180px;
+  opacity: 0;
+  visibility: hidden;
+  transition: 0.3s ease-in;
+  width: 260px;
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+    0 0px 0 1px rgba(10, 10, 10, 0.02);
+
+  &.quick-access {
+    background-color: $white-100;
+    padding: 20px;
+    min-width: 260px !important;
+    max-height: 250px;
+    overflow-y: auto;
+    border-radius: 4px;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid $primary-90;
+      padding-bottom: 20px;
+
+      p {
+        font-size: 13px;
+        color: $primary-10;
+      }
+
+      button {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        color: $primary-20;
+      }
+    }
+
+    .body-content {
+      margin-top: 20px;
+
+      p {
+        font-size: 13px;
+        color: $primary-10;
+      }
+
+      .organizations {
+        .organization {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 5px 0;
+
+          .org-info {
+            display: flex;
+            align-items: center;
+
+            img {
+              max-width: 30px;
+              margin-right: 10px;
+              object-fit: cover;
+            }
+          }
+
+          .remove {
+            border: none;
+            padding: 0;
+            font-size: 11px;
+            color: $danger;
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  &::-webkit-scrollbar {
+    width: 7px;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background-color: #d1d4de;
+    border-radius: 10px;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background-color: $primary-80;
+    border-radius: 10px;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $primary-80;
+  }
+
+  // &:last-child {
+  //   right: 0;
+  // }
+
+  &.is-notification {
+    right: 0;
+    background-color: $white-100;
+    box-shadow: 0px 4px 8px rgba(84, 101, 126, 0.2);
+    border-radius: 4px;
+    min-width: 330px;
+    max-height: 400px;
+    overflow-y: auto;
+
+    .notification-header {
+      padding: 20px 20px 6px 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+
+      .left-content {
+        p {
+          font-weight: 500;
+          font-size: 13px;
+          line-height: 19px;
+          margin-bottom: 15px;
+
+          span {
+            font-weight: normal;
+          }
+
+          &.date {
+            font-size: 11px;
+            line-height: 14px;
+            font-weight: normal;
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      .right-content {
+        .button {
+          border: none;
+          margin: 0;
+          padding: 10px;
+          font-size: 13px;
+
+          &.is-active {
+            background-color: $primary;
+            color: $white-100;
+
+            img {
+              filter: brightness(100);
+            }
+          }
+
+          &:hover {
+            background-color: $primary;
+            color: $white-100;
+
+            img {
+              filter: brightness(100);
+            }
+          }
+        }
+      }
+    }
+
+    .notification-body {
+      .single-notification-item {
+        display: block;
+        border-top: 1px solid $primary-90;
+        padding: 15px 20px;
+        font-weight: 500;
+
+        &.is-complete {
+          font-weight: 400;
+        }
+
+        &:hover {
+          background-color: #d1e3f2;
+        }
+
+        p {
+          color: $primary-10;
+          font-size: 11px;
+        }
+
+        .notification-status {
+          margin-top: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          p {
+            font-size: 11px;
+            color: $primary-20;
+
+            &.is-success {
+              color: $success;
+            }
+
+            &.is-danger {
+              color: $danger;
+            }
+
+            &.is-warning {
+              color: $warning;
+            }
+          }
+        }
+      }
+    }
+
+    .see-all-message {
+      border-top: 1px solid $primary-90;
+      text-align: center;
+      font-weight: 500;
+      font-size: 13px;
+      color: $primary-10;
+      display: block;
+      padding: 10px 20px;
+    }
+  }
+
+  ul {
+    background-color: $white-100;
+    padding: 0;
+    // border-radius: 4px;
+    overflow: hidden;
+
+    li {
+      a {
+        display: block;
+        padding: 8px 15px;
+        color: $primary-10;
+        transition: 0.3s ease-in-out;
+        font-size: 13px;
+
+        &:hover {
+          background-color: $primary-95;
+
+          p {
+            color: $primary !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.ac-menu-item {
+  &.is-active {
+    .ac-menu-content {
+      opacity: 1;
+      visibility: visible;
+      top: 35px;
+      z-index: 99;
+
+      &::after {
+        position: absolute;
+        content: "";
+        right: 38px;
+        top: -6px;
+        background-color: $white-100;
+        width: 15px;
+        height: 15px;
+        transform: rotate(45deg);
+        box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.16);
+        z-index: -1;
+      }
+    }
+  }
+}
+</style>

package/vue-components/v3/navbar/Notification.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+import TimeConvert from "../../plugins/time-convert";
+import type { Notification } from "../../types/notification";
+const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
+const NavbarItemContent = defineAsyncComponent(
+  () => import("./NavbarItemContent.vue")
+);
+withDefaults(
+  defineProps<{
+    notifications?: Array<Notification>;
+    unreadNotification?: number;
+  }>(),
+  {
+    notifications: () => [],
+    unreadNotification: 0,
+  }
+);
+defineEmits(["isActive"]);
+function notificationTime(time: number) {
+  return TimeConvert.getDayDifferences({ past: time });
+}
+</script>
+<template>
+  <navbar-item ref="notificationItem" @is-active="$emit('isActive', $event)">
+    <template #navbar-item>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_534_14009)">
+          <path
+            d="M9.15331 14C9.03611 14.2021 8.86787 14.3698 8.66546 14.4864C8.46305 14.603 8.23357 14.6643 7.99998 14.6643C7.76639 14.6643 7.53691 14.603 7.3345 14.4864C7.13208 14.3698 6.96385 14.2021 6.84665 14M14.6666 11.3334H1.33331C1.86375 11.3334 2.37245 11.1227 2.74753 10.7476C3.1226 10.3725 3.33331 9.86381 3.33331 9.33337V6.00004C3.33331 4.76236 3.82498 3.57538 4.70015 2.70021C5.57532 1.82504 6.7623 1.33337 7.99998 1.33337C9.23766 1.33337 10.4246 1.82504 11.2998 2.70021C12.175 3.57538 12.6666 4.76236 12.6666 6.00004V9.33337C12.6666 9.86381 12.8774 10.3725 13.2524 10.7476C13.6275 11.1227 14.1362 11.3334 14.6666 11.3334Z"
+            stroke="#061B2D"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_534_14009">
+            <rect width="16" height="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+
+      <span v-if="unreadNotification > 999" class="notification-count"
+        >999+</span
+      >
+      <span v-else-if="unreadNotification !== 0" class="notification-count">{{
+        unreadNotification
+      }}</span>
+    </template>
+
+    <template #navbar-content>
+      <navbar-item-content
+        class="navbar-dropdown-wrapper"
+        style="width: 320px; right: -30px"
+      >
+        <div class="dropdown-inner">
+          <div class="notification-header">
+            <h5>Notification</h5>
+            <span>{{ notifications.length }}</span>
+          </div>
+
+          <div class="notification-body ac-scrollbar p-0">
+            <a
+              v-for="data in notifications"
+              href="#"
+              class="single-notification"
+              :key="data.id"
+            >
+              <!-- <span class="round-icon">Z</span> -->
+              <div class="notification-content">
+                <h6>{{ data.msg }}</h6>
+                <p>{{ data.status }}</p>
+              </div>
+              <span>{{ notificationTime(data.time) }}</span>
+            </a>
+
+            <a
+              v-if="!notifications.length"
+              href="#"
+              class="single-notification"
+            >
+              <!-- <span class="round-icon">Y</span> -->
+              <div class="notification-content">
+                <h6>No New Notification</h6>
+                <p></p>
+              </div>
+              <span> </span>
+            </a>
+          </div>
+        </div>
+      </navbar-item-content>
+    </template>
+  </navbar-item>
+</template>
+
+<style lang="scss" scoped>
+.notification-count {
+  position: absolute;
+  background-color: $primary;
+  color: $white-100;
+  padding: 4px;
+  font-size: 11px;
+  line-height: 1;
+  border-radius: 50px;
+  min-width: 20px;
+  height: 20px;
+  right: -10px;
+  top: -8px;
+  border: 1px solid $primary-97;
+  opacity: 1;
+  z-index: 9;
+}
+.dropdown-inner {
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: $white-100;
+  border: 1px solid $primary-90;
+}
+.notification-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid $primary-90;
+  padding: 8px 16px;
+  h5 {
+    color: $primary-5;
+  }
+  span {
+    display: flex;
+    color: $primary-30;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background-color: $primary-95;
+  }
+}
+.notification-body {
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  a {
+    display: flex;
+    color: $primary-20;
+    padding: 16px;
+    border-bottom: 1px solid $primary-95;
+    transition: 0.3s ease-in-out;
+    justify-content: space-between;
+
+    &:hover {
+      background-color: $primary-97;
+    }
+    .round-icon {
+      width: 36px;
+      height: 36px;
+      background-color: $primary-95;
+      color: $primary;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      margin-right: 8px;
+      line-height: 1;
+      font-weight: 500;
+    }
+
+    .notification-content {
+      width: calc(100% - 100px);
+      h6 {
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      p {
+        font-size: 12px;
+      }
+    }
+
+    span {
+      font-size: 11px;
+      color: $primary-30;
+    }
+  }
+}
+.notification-footer {
+  button {
+    background-color: transparent;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 8px;
+    color: $primary;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>