@appscode/design-system 1.1.0 → 2.0.0

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

@@ -1,283 +1,250 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch, computed, nextTick } from "vue";
+import HeroiconsCog6Tooth from "~icons/heroicons/cog-6-tooth";
+import HeroiconsWrenchScrewdriver from "~icons/heroicons/wrench-screwdriver";
+import HeroiconsUserGroup from "~icons/heroicons/user-group";
+import HeroiconsChartPie from "~icons/heroicons/chart-pie";
+import HeroiconsPower from "~icons/heroicons/power";
+import HeroiconsCheck from "~icons/heroicons/check";
+
+import type { User } from "../../types/user";
+
+interface FormatedOrgs extends User {
+  isPersonalAccount?: boolean;
+}
+
+interface Props {
+  user: User;
+  serverDomain?: string;
+  accountsDomain?: string;
+  showAccountSwitcher?: boolean;
+  organizations?: Array<FormatedOrgs>;
+  showThemeMode?: boolean;
+  isPlatformDomain?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  serverDomain: "",
+  accountsDomain: "",
+  showAccountSwitcher: false,
+  organizations: () => [],
+  showThemeMode: false,
+  isPlatformDomain: false,
+});
+
+const emit = defineEmits(["set:theme", "on-logout", "activeorg$set"]);
+
+const NavbarItem = defineAsyncComponent(
+  () => import("../navbar/NavbarItem.vue")
+);
+const NavbarItemContent = defineAsyncComponent(
+  () => import("../navbar/NavbarItemContent.vue")
+);
+
+const ThemeMode = defineAsyncComponent(() => import("../navbar/ThemeMode.vue"));
+
+const dropDownStatus = ref("close");
+const dropDownSectionHeight = ref<string | null>(null);
+const dropdownItems = ref(null as { $el: HTMLElement } | null);
+
+const formattedOrganizations = computed(() => {
+  let activeUser: User | undefined = undefined;
+  const filteredList = props.organizations.filter((item) => {
+    if (item.username === props.user.username) {
+      activeUser = item;
+    } else {
+      return true;
+    }
+    return false;
+  });
+
+  if (activeUser) filteredList.unshift(activeUser);
+
+  return filteredList || [];
+});
+
+const toggleList = () => {
+  dropDownStatus.value = dropDownStatus.value === "open" ? "close" : "open";
+  nextTick(() => {
+    dropdownItems.value?.$el.scrollTo(0, 0);
+  });
+};
+
+const onOrganizationClick = (orgName: string) => {
+  dropdownItems.value?.$el.scrollTo(0, 0);
+  emit("activeorg$set", orgName);
+};
+
+const onMouseLeave = () => {
+  dropDownStatus.value = "close";
+};
+
+const setTheme = (val: string) => {
+  emit("set:theme", val);
+};
+
+watch(dropDownStatus, (n) => {
+  if (n === "open") {
+    nextTick(() => {
+      const dropDownUl = dropdownItems.value;
+      if (dropDownUl)
+        dropDownSectionHeight.value = `${dropDownUl.$el.scrollHeight}px`;
+    });
+  } else {
+    dropDownSectionHeight.value = null;
+  }
+});
+</script>
+
 <template>
-  <navbar-item>
-    <button class="button ac-nav-button ac-profile-button">
-      {{ user.full_name || user.username }}
-      <i class="fa fa-angle-down" aria-hidden="true"></i>
-      <div class="ac-user-profile">
+  <navbar-item :modifierClasses="'ac-profile-button'">
+    <template #navbar-item>
+      <div class="ac-user-profile mr-8">
         <img :src="user.avatar_url" alt="User Photo" />
       </div>
-    </button>
-    <navbar-item-content class="navbar-dropdown-wrapper">
-      <div
-        v-if="user.username"
-        class="user-profile-wrapper"
-        @mouseleave="onMouseLeave()"
-      >
-        <div class="profile-area">
-          <div class="profile-photo">
-            <img
-              :src="user.avatar_url"
-              alt="User Photo"
-              class="width-50 height-50"
-            />
-            <button class="camera-icon"></button>
-          </div>
-          <div class="profile-info" style="width: calc(100% - 60px)">
-            <a
-              :href="`${serverDomain}/${user.username}`"
-              :title="user.username.toUpperCase()"
-              data-testid="user-profile-link"
-              class="line-break-anywhere is-ellipsis-1"
-              >{{ user.username.toUpperCase() }}</a
-            >
-            <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
+      {{ user.full_name || user.username }}
+      <i class="fa fa-angle-down" aria-hidden="true"></i>
+    </template>
+    <!-- <button class="button ac-nav-button ac-profile-button">
+
+    </button> -->
+
+    <template #navbar-content>
+      <navbar-item-content class="navbar-dropdown-wrapper">
+        <div
+          v-if="user.username"
+          class="user-profile-wrapper"
+          @mouseleave="onMouseLeave()"
+        >
+          <div class="profile-area">
+            <div class="profile-photo">
+              <img
+                :src="user.avatar_url"
+                alt="User Photo"
+                class="width-32 height-32"
+              />
+              <button class="camera-icon"></button>
+            </div>
+            <div class="profile-info" style="width: calc(100% - 60px)">
+              <a
+                :href="`${serverDomain}/${user.username}`"
+                :title="user.username.toUpperCase()"
+                data-testid="user-profile-link"
+                class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
+                >{{ user.username }}</a
+              >
+              <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
+            </div>
           </div>
-        </div>
-        <transition-group name="list" tag="ul">
-          <li key="settings">
-            <a
-              data-testid="user-settings-link"
-              :href="`${serverDomain}/user/settings/`"
-              >Settings</a
-            >
-          </li>
-          <li v-if="user.is_admin" key="site-admin">
-            <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
-              >Site Administration</a
-            >
-          </li>
-          <li
-            v-if="showAccountSwitcher"
-            :class="`is-${dropDownStatus}`"
-            key="switcher"
+          <transition-group
+            name="list"
+            tag="ul"
+            class="list-items py-2 ac-scrollbar px-0"
           >
-            <a
-              class="
-                ac-dropdown-button
-                is-fullwidth
-                is-flex
-                is-justify-content-space-between
-                is-align-items-center
-              "
-              @click="toggleList()"
-            >
-              <span>Switch Account</span>
-              <span
-                ><i
-                  :class="`fa fa-angle-${
-                    dropDownStatus === 'open' ? 'up' : 'down'
-                  }`"
-                ></i
-              ></span>
-            </a>
-            <transition-group
-              name="list"
-              tag="ul"
-              class="ac-vscrollbar"
-              ref="dropdownItems"
-              :style="{ maxHeight: dropDownSectionHeight }"
+            <li key="settings">
+              <a
+                data-testid="user-settings-link"
+                :href="`${serverDomain}/user/settings/`"
+                ><span class="icon"><HeroiconsCog6Tooth /></span
+                ><span>Settings</span></a
+              >
+            </li>
+            <li v-if="user.is_admin" key="site-admin">
+              <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
+                ><span class="icon"><HeroiconsWrenchScrewdriver /></span
+                ><span>Site Administration</span></a
+              >
+            </li>
+            <li
+              v-if="showAccountSwitcher"
+              :class="`is-${dropDownStatus}`"
+              key="switcher"
             >
-              <li
-                v-for="(org, idx) in formattedOrganizations"
-                :key="org.username"
+              <a
+                class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
+                @click="toggleList()"
               >
-                <a
-                  class="is-flex is-align-items-center"
-                  @click="onOrganizationClick(org.username)"
+                <div class="is-flex gap-8">
+                  <span class="icon"><HeroiconsUserGroup /></span
+                  ><span>Switch Account</span>
+                </div>
+                <span
+                  ><i
+                    :class="`fa fa-angle-${
+                      dropDownStatus === 'open' ? 'up' : 'down'
+                    }`"
+                  ></i
+                ></span>
+              </a>
+              <transition-group
+                name="list"
+                tag="ul"
+                class="ac-vscrollbar"
+                ref="dropdownItems"
+                :style="{ maxHeight: dropDownSectionHeight }"
+              >
+                <li
+                  v-for="(org, idx) in formattedOrganizations"
+                  :key="org.username"
                 >
-                  <div class="width-30 height-30 image">
-                    <img
-                      :src="org.avatar_url"
-                      class="ac-user-profile is-rounded"
-                      alt="icon"
-                    />
-                  </div>
-                  <div
-                    class="
-                      is-flex
-                      is-align-items-center
-                      is-justify-content-space-between
-                      is-fullwidth
-                      ml-10
-                    "
+                  <a
+                    class="is-flex is-align-items-center"
+                    @click="onOrganizationClick(org.username)"
                   >
-                    <div class="org-info">
-                      <strong
-                        :title="org.username"
-                        class="line-break-anywhere is-ellipsis-1"
-                        >{{ org.username }}</strong
-                      >
-                      <p>
-                        {{
-                          org.isPersonalAccount
-                            ? "Personal Account"
-                            : "Organization"
-                        }}
-                      </p>
+                    <div class="width-30 height-30 image">
+                      <img
+                        :src="org.avatar_url"
+                        class="ac-user-profile is-rounded"
+                        alt="icon"
+                      />
                     </div>
-                    <span
-                      v-if="idx === 0"
-                      class="
-                        material-icons-outlined
-                        font-size-18
-                        ml-10
-                        is-pulled-right
-                      "
+                    <div
+                      class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10"
                     >
-                      check
-                    </span>
-                  </div>
-                </a>
-              </li>
-            </transition-group>
-          </li>
-          <li key="dashboard">
-            <nuxt-link
-              v-if="isPlatformDomain"
-              to="/dashboard"
-              data-testid="user-dashboard-link"
-            >
-              Dashboard
-            </nuxt-link>
-            <a
-              v-else
-              :href="`${serverDomain}/dashboard`"
-              data-testid="user-dashboard-link"
-            >
-              Dashboard
-            </a>
-          </li>
-          <li key="signout" @click="$emit('on-logout')">
-            <a
-              data-testid="user-logout-link"
-              :href="`${accountsDomain}/user/logout`"
-            >
-              Sign out
-            </a>
-          </li>
-          <li key="theme" v-if="showThemeMode">
-            <theme-mode @set:theme="setTheme" />
-          </li>
-        </transition-group>
-      </div>
-    </navbar-item-content>
+                      <div class="org-info">
+                        <strong
+                          :title="org.username"
+                          class="line-break-anywhere is-ellipsis-1"
+                          >{{ org.username }}</strong
+                        >
+                        <p>
+                          {{
+                            org.isPersonalAccount
+                              ? "Personal Account"
+                              : "Organization"
+                          }}
+                        </p>
+                      </div>
+                      <span
+                        v-if="idx === 0"
+                        class="material-icons font-size-18 ml-10 is-pulled-right"
+                      >
+                        <HeroiconsCheck />
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              </transition-group>
+            </li>
+            <li key="signout" @click="$emit('on-logout')">
+              <a
+                data-testid="user-logout-link"
+                :href="`${accountsDomain}/user/logout`"
+              >
+                <span class="icon"><HeroiconsPower /></span>
+                <span>Sign out</span>
+              </a>
+            </li>
+            <!-- <li key="theme" v-if="showThemeMode">
+              <theme-mode @set:theme="setTheme" />
+            </li> -->
+          </transition-group>
+        </div>
+      </navbar-item-content>
+    </template>
   </navbar-item>
 </template>
 
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    // active user info
-    user: {
-      type: Object,
-      default: () => ({}),
-    },
-    serverDomain: {
-      type: String,
-      default: "",
-    },
-    accountsDomain: {
-      type: String,
-      default: "",
-    },
-    showAccountSwitcher: {
-      type: Boolean,
-      default: false,
-    },
-    // all available organization list including personal account
-    organizations: {
-      type: Array,
-      default: () => [],
-    },
-    showThemeMode: {
-      type: Boolean,
-      default: false,
-    },
-    isPlatformDomain: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["set:theme", "on-logout"],
-
-  components: {
-    NavbarItem: defineAsyncComponent(() =>
-      import("../../v2/navbar/NavbarItem.vue").then((module) => module.default)
-    ),
-    NavbarItemContent: defineAsyncComponent(() =>
-      import("../../v2/navbar/NavbarItemContent.vue").then(
-        (module) => module.default
-      )
-    ),
-    ThemeMode: defineAsyncComponent(() =>
-      import("../../v3/navbar/ThemeMode.vue").then((module) => module.default)
-    ),
-  },
-
-  computed: {
-    formattedOrganizations() {
-      let activeUser;
-      const filteredList = this.organizations.filter((item) => {
-        if (item.username === this.user.username) {
-          activeUser = item;
-        } else {
-          return true;
-        }
-        return false;
-      });
-
-      filteredList.unshift(activeUser);
-
-      return filteredList || [];
-    },
-  },
-
-  data() {
-    return {
-      dropDownStatus: "close",
-      dropDownSectionHeight: null,
-    };
-  },
-
-  methods: {
-    toggleList() {
-      this.dropDownStatus = this.dropDownStatus === "open" ? "close" : "open";
-      this.$nextTick(() => {
-        this.$refs["dropdownItems"].$el.scrollTo(0, 0);
-      });
-    },
-    onOrganizationClick(orgName) {
-      this.$refs["dropdownItems"].$el.scrollTo(0, 0);
-      this.$emit("activeorg$set", orgName);
-    },
-    onMouseLeave() {
-      this.dropDownStatus = "close";
-    },
-    setTheme(val) {
-      this.$emit("set:theme", val);
-    },
-  },
-
-  watch: {
-    dropDownStatus: {
-      immediate: true,
-      handler(n) {
-        if (n === "open") {
-          this.$nextTick(() => {
-            const dropDownUl = this.$refs["dropdownItems"];
-            if (dropDownUl)
-              this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
-          });
-        } else {
-          this.dropDownSectionHeight = null;
-        }
-      },
-    },
-  },
-});
-</script>
 <style lang="scss" scoped>
 .ac-vscrollbar {
   overflow: auto !important;
@@ -285,4 +252,164 @@ export default defineComponent({
 .line-break-anywhere {
   line-break: anywhere;
 }
-</style>
+.navbar-dropdown-wrapper {
+  width: 240px;
+}
+
+.user-profile-wrapper {
+  background-color: $white-100;
+  border-radius: 4px;
+  border: 1px solid $primary-90;
+
+  .profile-area {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid $primary-90;
+    padding: 16px 16px;
+
+    .profile-photo {
+      // width: 50px;
+      // height: 50px;
+      border-radius: 50%;
+      position: relative;
+      z-index: 1;
+      margin-right: 10px;
+
+      img {
+        border-radius: 50%;
+        width: 100%;
+        border: 2px solid #d2e7f9;
+      }
+
+      .camera-icon {
+        position: absolute;
+        right: -10px;
+        top: 0;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+      }
+    }
+
+    .profile-info {
+      p {
+        color: $primary-10;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 1.3;
+      }
+
+      a {
+        font-size: 1rem;
+        color: $primary-20;
+        line-height: 1.3;
+      }
+    }
+  }
+  .list-items {
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+  }
+}
+
+.ac-menu-item {
+  &.ac-profile-button {
+    margin-right: 15px;
+    button.button.ac-nav-button {
+      .ac-user-profile {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 2px solid $primary-90;
+      }
+      i.fa {
+        padding-left: 8px;
+      }
+    }
+  }
+}
+
+.list-items {
+  li {
+    &.is-close {
+      ul {
+        max-height: 0;
+        visibility: hidden;
+        transition: max-height 0.25s ease-out;
+        &.ac-vscrollbar {
+          padding: 0;
+        }
+      }
+    }
+
+    &.is-open {
+      ul {
+        padding: 8px;
+        max-height: 200px;
+        visibility: visible;
+        transition: max-height 0.25s ease-out;
+        li {
+          padding: 0;
+          border: 1px solid $primary-95;
+        }
+      }
+    }
+    a {
+      padding: 8px 16px;
+      font-weight: 500;
+      display: block;
+      color: $primary-10;
+      transition: 0.3s;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      &:hover {
+        background-color: $primary-97;
+        color: $primary;
+      }
+    }
+  }
+}
+.ac-menu-item {
+  .is-fullwidth {
+    width: 100%;
+  }
+}
+.ac-nav-button {
+  background-color: transparent;
+  border: none;
+  color: $primary-80;
+  padding: 0 14px;
+  margin-left: 15px;
+
+  // &.ac-profile-button {
+  //   color: $primary-10;
+  //   font-weight: 500;
+  // }
+
+  &:last-child {
+    margin-left: 0;
+  }
+
+  span {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width: 15px;
+    height: 15px;
+    background-color: $white-100;
+    font-size: 12px;
+    line-height: 15px;
+    border-radius: 50%;
+    color: $primary;
+    z-index: 9;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: none !important;
+  }
+}
+</style>