@appscode/design-system 1.0.43-alpha.14 → 1.0.43-alpha.142

package/vue-components/v2/loaders/SidebarLoader.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <content-loader
+      :width="100"
+      :height="175"
+      :speed="2"
+      :primaryColor="primaryLoaderColor"
+      :secondaryColor="secondaryLoaderColor"
+    >
+      <rect x="2" y="1" rx="3" ry="3" width="96" height="20" />
+      <rect x="15" y="23" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="40" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="57" rx="3" ry="3" width="83" height="15" />
+
+      <rect x="2" y="78" rx="3" ry="3" width="96" height="20" />
+      <rect x="15" y="100" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="117" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="134" rx="3" ry="3" width="83" height="15" />
+
+      <rect x="2" y="155" rx="3" ry="3" width="96" height="20" />
+    </content-loader>
+  </div>
+</template>
+
+<script>
+import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: {
+    ContentLoader
+  },
+  props: {
+    primaryLoaderColor: {
+      type: String,
+      default: "#f5f7f9"
+    },
+    secondaryLoaderColor: {
+      type: String,
+      default: "#ecebeb"
+    }
+  }
+};
+</script>

package/vue-components/v2/modal/Modal.vue

@@ -6,7 +6,7 @@
       v-if="showModal"
       class="ac-modal is-middle-alignment"
       :class="modifierClasses"
-      @click.self="destroyModal"
+      @click.self="onModalOutsideClick"
     >
       <div class="ac-modal-inner">
         <!-- modal header start  -->
@@ -17,7 +17,10 @@
             <header-item>
               <ac-button
                 modifier-classes="is-square is-transparent"
-                :icon-image="require('@/assets/images/icons/close-icon.svg')"
+                :disabled="isCloseOptionDisabled"
+                :icon-image="
+                  require('@appscode/design-system-images/icons/close-icon.svg')
+                "
                 @click.stop="destroyModal"
               />
             </header-item>
@@ -36,7 +39,12 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div class="ac-modal-footer action-footer">
+        <div
+          class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between"
+        >
+          <div>
+            <slot name="modal-footer-left" />
+          </div>
           <buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
           </buttons>
@@ -52,28 +60,36 @@ export default {
   props: {
     open: {
       type: Boolean,
-      default: false,
+      default: false
     },
     title: {
       type: String,
-      default: "Modal",
+      default: "Modal"
     },
     modifierClasses: {
       type: String,
-      default: "",
+      default: ""
+    },
+    isCloseOptionDisabled: {
+      type: Boolean,
+      default: false
     },
+    ignoreOutsideClick: {
+      type: Boolean,
+      default: false
+    }
   },
 
   components: {
     HeaderItems: () => import("../header/HeaderItems.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
     Buttons: () => import("../button/Buttons.vue"),
-    AcButton: () => import("../button/Button.vue"),
+    AcButton: () => import("../button/Button.vue")
   },
 
   data() {
     return {
-      showModal: false,
+      showModal: false
     };
   },
 
@@ -86,8 +102,8 @@ export default {
         } else {
           this.destroyModal();
         }
-      },
-    },
+      }
+    }
   },
 
   methods: {
@@ -97,16 +113,21 @@ export default {
         this.destroyModal();
       }
     },
+    onModalOutsideClick() {
+      if (this.ignoreOutsideClick) return;
+      this.destroyModal();
+    },
     initializeModal() {
       this.showModal = true;
       document.addEventListener("keydown", this.onKeyDown);
     },
     destroyModal() {
+      if (this.isCloseOptionDisabled) return;
       this.showModal = false;
       document.removeEventListener("keydown", this.onKeyDown);
 
       this.$emit("closemodal", true);
-    },
-  },
+    }
+  }
 };
 </script>

package/vue-components/v2/modals/DeleteConfirmationModal.vue

@@ -0,0 +1,77 @@
+<template>
+  <!-- modal start  -->
+  <modal
+    :title="title"
+    modifier-classes="is-normal"
+    :open="open"
+    @closemodal="closeModal"
+  >
+    <!-- freedom content start  -->
+    <div class="action-message pt-35 pb-35 has-text-centered">
+      <h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>
+      <p class="is-description">{{ itemName }} {{ itemName ? "?" : "" }}</p>
+    </div>
+
+    <!-- freedom content end -->
+
+    <!-- modal footer start -->
+    <template #modal-footer-controls>
+      <ac-button
+        @click.stop="closeModal"
+        title="Cancel"
+        modifier-classes="is-outlined"
+      />
+      <ac-button
+        modifier-classes="is-danger"
+        :is-loader-active="isDeleteActive"
+        title="Yes"
+        @click.stop="confirm(true)"
+      />
+    </template>
+  </modal>
+  <!-- modal end  -->
+</template>
+
+<script>
+export default {
+  components: {
+    Modal: () => import("./../modal/Modal.vue"),
+    AcButton: () => import("./../button/Button.vue")
+  },
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    message: {
+      type: String,
+      default: ""
+    },
+    itemName: {
+      type: String,
+      default: ""
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    isDeleteActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    confirm(response) {
+      this.$emit("delete-confirmation-modal$confirm", response);
+    },
+    closeModal() {
+      this.confirm(false);
+      this.$emit("closemodal", true);
+    }
+  }
+};
+</script>

package/vue-components/v2/modals/JsonShowModal.vue

@@ -10,7 +10,9 @@
         <ac-button
           modifier-classes="is-square is-primary"
           icon-class="copy"
-          v-clipboard:copy="`${editorTitle}: &quot;${editorContent}&quot;`"
+          v-clipboard:copy="
+            `${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`
+          "
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"
         />
@@ -26,6 +28,8 @@
 </template>
 
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   props: {
     open: {
@@ -43,7 +47,13 @@ export default {
   },
   components: {
     Modal: () => import("../modal/Modal.vue"),
-    Editor: () => import("../editor/Editor.vue"),
+    Editor: () => ({
+      component: import("../editor/Editor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 20000,
+    }),
     AcButton: () => import("../button/Button.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
   },

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

@@ -1,10 +1,13 @@
 <template>
-  <div class="app-drawer-wrapper d-table-cell">
-    <div class="drawer-icon">
+  <div class="app-drawer-wrapper is-flex">
+    <div
+      class="drawer-icon  is-flex is-justify-content-center is-align-items-center"
+    >
       <svg
         class="gb_We"
         focusable="false"
         viewBox="0 0 24 24"
+        style="width: 22px;margin-top: 2px;"
         :style="{ fill: 'white' }"
       >
         <path
@@ -20,16 +23,14 @@
             <article class="media">
               <figure class="media-left">
                 <p class="image">
-                  <img
-                    :src="app.icon_url"
-                  />
+                  <img :src="app.icon_url" />
                 </p>
               </figure>
               <div class="media-content">
                 <div class="content">
                   <p>
-                    <strong>{{app.title}}</strong>
-                    <span>{{app.sub_title}}</span>
+                    <strong>{{ app.title }}</strong>
+                    <span>{{ app.sub_title }}</span>
                   </p>
                 </div>
               </div>
@@ -50,7 +51,7 @@ export default {
     }
   },
   components: {
-    NavbarItemContent: () => import("./NavbarItemContent.vue"),
-  },
+    NavbarItemContent: () => import("./NavbarItemContent.vue")
+  }
 };
 </script>

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,106 @@
         <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);">
+            <p :title="user.username.toUpperCase()" class="line-break-anywhere is-ellipsis-1">{{ user.username.toUpperCase() }}</p>
             <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>
+          <li v-if="user.is_admin" key="site-admin">
+            <a :href="`${serverDomain}/admin`">Site Administration</a>
+          </li>
+          <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="`${serverDomain}/user/logout`"> Sign out </a>
           </li>
-        </ul>
+        </transition-group>
       </div>
     </navbar-item-content>
   </navbar-item>
@@ -40,6 +115,7 @@
 <script>
 export default {
   props: {
+    // active user info
     user: {
       type: Object,
       default: () => ({}),
@@ -48,11 +124,86 @@ export default {
       type: String,
       default: "",
     },
+    showAccountSwitcher: {
+      type: Boolean,
+      default: false,
+    },
+    // all available organization list including personal account
+    organizations: {
+      type: Array,
+      default: () => [],
+    },
   },
 
   components: {
     NavbarItem: () => import("./NavbarItem.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>