@appscode/design-system 1.0.43-alpha.16 → 1.0.43-alpha.162

package/vue-components/v2/navbar/ThemeMode.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <button
+      v-if="themeMode"
+      class="button ac-nav-button"
+      style="color: #ffffff; font-size: 15px;"
+      @click="toggleTheme"
+      :title="themeModes[themeMode].displayName"
+    >
+      <i :class="`fa ${themeModes[themeMode].iconClass}`" />
+    </button>
+    <div class="ac-menu-content theme-choice">
+      <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
+        <li 
+          v-for="theme of Object.keys(themeModes)"
+          :title="themeModes[theme].displayName"
+          @click="themeMode = theme"
+          :class="{'is-active': themeMode === theme}"
+          :key="theme"
+        >
+          <i :class="['fa', themeModes[theme].iconClass]" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      themeMode: "",
+      themeModes: {
+        system: {
+          displayName: "System Theme",
+          iconClass: "fa-desktop",
+        },
+        light: {
+          displayName: "Light Theme",
+          iconClass: "fa-sun-o",
+        },
+        dark: {
+          displayName: "Dark Theme",
+          iconClass: "fa-moon-o",
+        }
+      }
+    };
+  },
+
+  mounted() {
+    // get theme mode from localStorage or set default one
+    this.themeMode = localStorage.getItem("themeMode") || "light";
+  },
+
+  destroyed() {
+    this.removeColorSchemeEventListener();
+  },
+
+  watch: {
+    themeMode: {
+      handler(n) {
+        this.onThemeModeChange(n);
+      }
+    }
+  },
+
+  methods: {
+    // handle theme mode button click
+    toggleTheme() {
+      if (this.themeMode === "light") this.themeMode = "dark";
+      else if (this.themeMode === "dark") this.themeMode = "system";
+      else if (this.themeMode === "system") this.themeMode = "light";
+    },
+
+    // triggered when theme mode is updated
+    onThemeModeChange(n) {
+      localStorage.setItem("themeMode", n);
+
+      let theme = n;
+      if (n === "system") {
+        const isDarkMode =
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches;
+        this.addColorSchemeEventListener();
+        theme = isDarkMode ? "dark" : "light";
+      } else {
+        this.removeColorSchemeEventListener();
+      }
+      this.$emit("set:theme", theme);
+      this.handleDarkThemeClass(theme);
+    },
+
+    // add proper css class to update the ui theme
+    handleDarkThemeClass(currentTheme) {
+      if (currentTheme === "light") {
+        document.documentElement.classList.remove("is-dark-theme");
+      } else {
+        document.documentElement.classList.add("is-dark-theme");
+      }
+    },
+
+    // add system theme listener event
+    addColorSchemeEventListener() {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", this.handleSystemThemeChange);
+    },
+
+    // remove system theme listener event
+    removeColorSchemeEventListener() {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .removeEventListener("change", this.handleSystemThemeChange);
+    },
+
+    handleSystemThemeChange() {
+      this.onThemeModeChange(this.themeMode);
+    }
+  }
+};
+</script>

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

@@ -7,31 +7,130 @@
         <img :src="user.avatar_url" alt="User Photo" />
       </div>
     </button>
-    <navbar-item-content>
-      <div v-if="user.username" class="user-profile-wrapper">
+    <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" />
+            <img
+              :src="user.avatar_url"
+              alt="User Photo"
+              class="width-50 height-50"
+            />
             <button class="camera-icon"></button>
           </div>
-          <div class="profile-info">
-            <p>{{ user.username.toUpperCase() }}</p>
+          <div class="profile-info" style="width: calc(100% - 60px)">
+            <a
+              :href="`${serverDomain}/${user.username}`"
+              :title="user.username.toUpperCase()"
+              class="line-break-anywhere is-ellipsis-1"
+              >{{ user.username.toUpperCase() }}</a
+            >
             <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
           </div>
         </div>
-        <ul>
-          <li>
+        <transition-group name="list" tag="ul">
+          <li key="settings">
             <a :href="`${serverDomain}/user/settings/`">Settings</a>
           </li>
-          <template v-if="user.is_admin">
-            <li>
-              <a :href="`${serverDomain}/admin`"> Site Administration </a>
-            </li>
-          </template>
-          <li>
-            <a :href="`${serverDomain}/user/logout`"> Sign out </a>
+          <li v-if="isLoggedinUserAdmin" key="site-admin">
+            <a :href="`${accountsDomain}/admin`">Site Administration</a>
           </li>
-        </ul>
+          <li
+            v-if="showAccountSwitcher"
+            :class="`is-${dropDownStatus}`"
+            key="switcher"
+          >
+            <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
+                v-for="(org, idx) in formattedOrganizations"
+                :key="org.username"
+              >
+                <a
+                  class="is-flex is-align-items-center"
+                  @click="onOrganizationClick(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
+                    "
+                  >
+                    <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-outlined
+                        font-size-18
+                        ml-10
+                        is-pulled-right
+                      "
+                    >
+                      check
+                    </span>
+                  </div>
+                </a>
+              </li>
+            </transition-group>
+          </li>
+          <li key="dashboard">
+            <a :href="`${serverDomain}/dashboard`"> Dashboard </a>
+          </li>
+          <li key="signout">
+            <a :href="`${accountsDomain}/user/logout`"> Sign out </a>
+          </li>
+        </transition-group>
       </div>
     </navbar-item-content>
   </navbar-item>
@@ -40,19 +139,103 @@
 <script>
 export default {
   props: {
+    // active user info
     user: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
     serverDomain: {
       type: String,
-      default: "",
+      default: ""
+    },
+    accountsDomain: {
+      type: String,
+      default: ""
     },
+    showAccountSwitcher: {
+      type: Boolean,
+      default: false
+    },
+    // all available organization list including personal account
+    organizations: {
+      type: Array,
+      default: () => []
+    },
+    isLoggedinUserAdmin: {
+      type: Boolean,
+      default: false
+    }
   },
 
   components: {
     NavbarItem: () => import("./NavbarItem.vue"),
-    NavbarItemContent: () => import("./NavbarItemContent.vue"),
+    NavbarItemContent: () => import("./NavbarItemContent.vue")
+  },
+
+  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";
+    }
+  },
+
+  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>
+</script>
+<style lang="scss" scoped>
+.ac-vscrollbar {
+  overflow: auto !important;
+}
+.line-break-anywhere {
+  line-break: anywhere;
+}
+</style>

package/vue-components/v2/preloader/Preloader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column"
+    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader"
     style="height: calc(100vh - 200px);"
   >
     <span v-if="showSpinner" class="spinner"></span>
@@ -15,12 +15,12 @@ export default {
   props: {
     showSpinner: {
       type: Boolean,
-      default: true,
+      default: true
     },
     message: {
       type: String,
-      default: "Fetching! Please wait for sometime...",
-    },
-  },
+      default: "Loading ..."
+    }
+  }
 };
 </script>

package/vue-components/v2/sidebar/ClusterSwitcher.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+    <img
+      width="40"
+      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+      alt="provider-icon"
+    />
+  </div>
+  <multiselect
+    v-else
+    v-model="selectedCluster"
+    placeholder="Selected Cluster"
+    label="name"
+    track-by="name"
+    :options="clusterOptions"
+    :allow-empty="false"
+    deselectLabel=""
+    selectLabel=""
+    selectedLabel=""
+  >
+    <template slot="singleLabel" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        /><span
+          ><span>{{ props.option.displayName }}</span></span
+        >
+      </div>
+    </template>
+    <template slot="option" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          class="mr-15"
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        />
+        <div>
+          <p>{{ props.option.displayName }}</p>
+          <p class="location">{{ props.option.location }}</p>
+        </div>
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+export default {
+  props: {
+    sidebarCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    mouseHover: {
+      type: Boolean,
+      default: false,
+    },
+    clusterOptions: {
+      type: Array,
+      default: [],
+    },
+    value: {
+      type: String,
+      default: "",
+    }
+  },
+
+  components: {
+    Multiselect: () => import("vue-multiselect"),
+  },
+
+  data() {
+    return {
+      selectedCluster: null,
+      selectedClusterName: "",
+    };
+  },
+
+  methods: {
+    getProviderIcon(provider) {
+      return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
+    },
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler(n) {
+        this.selectedClusterName = n;
+      },
+    },
+    selectedCluster: {
+      deep: true,
+      handler(n) {
+        this.selectedClusterName = n.name;
+      },
+    },
+    selectedClusterName(n) {
+      if (this.selectedCluster && n !== this.selectedCluster.name) {
+        this.clusterOptions.forEach((item) => {
+          if (this.selectedClusterName === item.name) {
+            this.selectedCluster = item;
+          }
+        });
+      }
+      this.$emit("input", n);
+    },
+    clusterOptions: {
+      deep: true,
+      immediate: true,
+      async handler(list) {
+        if (list) {
+          list.forEach(async (item) => {
+            if(item.name === this.selectedClusterName) {
+              this.selectedCluster = item;
+            }
+          });
+        }
+      },
+    },
+  },
+};
+</script>

package/vue-components/v2/sidebar/SidebarItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <li ref="sidebarItem">
     <router-link
       :id="id"
       :title="title"
@@ -38,5 +38,27 @@ export default {
       default: "@/assets/images/icons/basic.svg",
     },
   },
+  watch: {
+    isActive: {
+      immediate: true,
+      handler(n) {
+        if (n) {
+          this.$nextTick(() => {
+            setTimeout(() => {
+              const top = (this.$refs.sidebarItem && this.$refs.sidebarItem.getBoundingClientRect().top) || 0;
+              // preventing scroll to options that are already visible
+              if (top > window.innerHeight - 200) {
+                // scroll to selected option item
+                this.$refs.sidebarItem.scrollIntoView({
+                  behavior: 'smooth',
+                  block: "center"
+                });
+              }
+            }, 500);  
+          });
+        }
+      }
+    }
+  }
 };
 </script>

package/vue-components/v2/sidebar/SidebarItemWithDropDown.vue

@@ -10,7 +10,7 @@
       </span>
     </a>
 
-    <ul :ref="title" :style="{ maxHeight: dropDownSectionHeight }">
+    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight }">
       <slot />
     </ul>
   </li>
@@ -23,10 +23,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
     title: {
       type: String,
       default: "Sidebar Item",
@@ -41,27 +37,32 @@ export default {
     return {
       dropDownStatus: "close",
       dropDownSectionHeight: null,
+      isCompMounted: false,
     };
   },
 
-  watch: {
-    isLoaderActive(n) {
-      if (!n) {
-        this.$nextTick(() => {
-          // for expanding dropdown
-          this.setDropdownMaxHeight("open");
-        });
+  mounted() {
+    this.isCompMounted = true;
+    setTimeout(() => {
+      // for expanding dropdown
+      if (this.isDropDownOpen) {
+        this.setDropdownMaxHeight("open");
+      } else {
+        this.setDropdownMaxHeight("close");
       }
-    },
+    }, 700);
+  },
+
+  watch: {
     title(n, o) {
-      if (n && !this.isLoaderActive) {
+      if (n && this.isCompMounted) {
         this.$nextTick(() => {
           // for expanding dropdown
           this.setDropdownMaxHeight("open");
         });
       }
 
-      if (o && !this.isLoaderActive) {
+      if (o && this.isCompMounted) {
         this.$nextTick(() => {
           // for expanding dropdown
           this.setDropdownMaxHeight("close");
@@ -84,7 +85,7 @@ export default {
           this.$emit("dropDownItemChange");
 
           this.$nextTick(() => {
-            const dropDownUl = this.$refs[this.title];
+            const dropDownUl = this.$refs["sectionItems"];
             if (dropDownUl)
               this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
           });
@@ -99,11 +100,9 @@ export default {
   methods: {
     setDropdownMaxHeight(mode) {
       if (mode === "open") {
-        this.$refs[this.title][0].style.maxHeight = `${
-          this.$refs[this.title][0].scrollHeight
-        }px`;
+        this.dropDownSectionHeight = `${this.$refs["sectionItems"].scrollHeight}px`;
       } else {
-        this.$refs[this.title][0].style.maxHeight = null;
+        this.dropDownSectionHeight = null;
       }
     },
     toggleDropDownStatus() {