@appscode/design-system 1.0.43-alpha.165 → 1.0.43-alpha.168

package/components/_navbar.scss

@@ -578,16 +578,20 @@
 }
 .theme-choicee {
   border: 1px solid $ac-white-light;
-  li{
+  li {
+    border-right: 1px solid $ac-white-light;
     cursor: pointer;
     transition: 0.3s ease-in-out;
+    &:last-child {
+      border-right: none;
+    }
     &:hover {
       color: $ac-black;
     }
     &.is-active {
       background-color: $ac-white-light;
     }
-  } 
+  }
 }
 // start dark theme
 .is-dark-theme {

package/components/ui-builder/_ui-builder.scss

@@ -23,7 +23,7 @@
 }
 .key-value-save {
   display: grid;
-  grid-template-columns: 1fr 1fr auto;
+  grid-template-columns: 1fr 1fr auto auto;
   grid-gap: 15px;
 }
 .value-list-save {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.165",
+  "version": "1.0.43-alpha.168",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -2,37 +2,47 @@
   <div class="ac-preview is-active is-not-fixed">
     <div class="ac-preview-inner">
       <!-- preview body start  -->
-      <div class="ac-preview-body mt-0 pt-20">
-        <div
-          v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
-          class="left-content"
-        >
-          <div class="ac-files pt-0">
-            <ul v-if="!isPreviewLoading">
-              <li
-                v-for="(previewYaml, idx) in filteredYamls"
-                :key="previewYaml.name + idx"
-                :class="{ 'is-active': activeKey === previewYaml.uid }"
-              >
-                <a @click.prevent="setActivePreview(previewYaml.uid)">
-                  <span>
-                    <img
-                      src="~@appscode/design-system-images/icons/file-icon.svg"
-                      alt=""
-                    />
-                  </span>
-                  <span>{{ previewYaml.name }}</span>
-                </a>
-              </li>
-            </ul>
-            <sidebar-loader v-else />
+      <div 
+        class="ac-preview-body mt-0 pt-20"
+        :class="{ 'is-justify-content-center': isYamlsEmpty && !isPreviewLoading }"
+      >
+        <strong v-if="isYamlsEmpty && !isPreviewLoading">
+          No Data Available
+          <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
+        </strong>
+        <template v-else>
+          <div
+            v-if="!isPreviewLoading && previewYamls"
+            class="left-content"
+          >
+            <div class="ac-files pt-0">
+              <ul v-if="!isPreviewLoading">
+                <li
+                  v-for="(previewYaml, idx) in filteredYamls"
+                  :key="previewYaml.name + idx"
+                  :class="{ 'is-active': activeKey === previewYaml.uid }"
+                  :title="previewYaml.name"
+                >
+                  <a @click.prevent="setActivePreview(previewYaml.uid)">
+                    <span>
+                      <img
+                        src="~@appscode/design-system-images/icons/file-icon.svg"
+                        alt=""
+                      />
+                    </span>
+                    <span>{{ previewYaml.name }}</span>
+                  </a>
+                </li>
+              </ul>
+              <sidebar-loader v-else />
+            </div>
           </div>
-        </div>
-        <div class="right-content">
           <div class="right-content">
             <resource-loader v-if="isPreviewLoading" />
+            <strong v-else-if="isYamlsNotSelected">Selecet a data from sidebar</strong>
+            <strong v-else-if="hideValue"> *************** </strong>
             <editor
-              v-else-if="!isPreviewLoading && !hideValue"
+              v-else
               v-model="activeFile.content"
               :original-value="originalValue"
               :language="activeFile.format"
@@ -40,9 +50,8 @@
               :editor-height="editorHeight"
               :show-minimap="showMinimap"
             />
-            <span v-else> *************** </span>
           </div>
-        </div>
+        </template>
       </div>
     </div>
   </div>
@@ -132,6 +141,15 @@ export default defineComponent({
         return element.uid === this.activeKey;
       });
       return val === undefined ? false : true;
+    },
+    isYamlsEmpty(){
+      return this.filteredYamls.length === 0; 
+    },
+    isYamlsNotSelected(){
+      const val = this.filteredYamls.find(element => {
+        return element.uid === this.activeKey;
+      })
+      return val === undefined;
     }
   },
   methods: {

package/vue-components/v3/editor/ResourceKeyValueEditor.vue

@@ -9,6 +9,7 @@
         <ac-button
           modifier-classes="is-square is-primary"
           :icon-class="toggleHideValue ? 'eye-slash' : 'eye'"
+          :disabled="previewYamls.length === 0"
           @click.prevent="toggleHideValue = !toggleHideValue"
         />
       </header-item>

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

@@ -1,21 +1,14 @@
 <template>
-  <li class="">
-   <a @click="showTheme = !showTheme" class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center">
-    <span>Theme Change</span>
-      <span>
-          <i v-if="showTheme" class="fa fa-angle-up"></i>
-          <i v-else class="fa fa-angle-down"></i>
-      </span>
-  </a>
-   <ul v-if="showTheme" class="ac-vscrollbar">
+  <li class="mt-10 b-t-1 pt-10">
+    <ul class="ac-vscrollbar">
       <li>
         <div class="ac-menu-contentt theme-choicee">
-          <ul class="is-flex is-flex-direction-row  is-justify-content-space-between">
+          <ul class="is-flex is-flex-direction-row is-justify-content-center">
             <li
               v-for="theme of Object.keys(themeModes)"
               :title="themeModes[theme].displayName"
               @click="themeMode = theme"
-              class="p-10 pl-30 pr-30"
+              class="p-10 pl-30 pr-30 is-flex-grow-1 has-text-centered"
               :class="{ 'is-active': themeMode === theme }"
               :key="theme"
             >
@@ -24,8 +17,8 @@
           </ul>
         </div>
       </li>
-   </ul>
-</li>
+    </ul>
+  </li>
 </template>
 <script>
 import { defineComponent } from "vue";
@@ -33,13 +26,8 @@ import { defineComponent } from "vue";
 export default defineComponent({
   data() {
     return {
-      showTheme: false,
       themeMode: "",
       themeModes: {
-        system: {
-          displayName: "System Theme",
-          iconClass: "fa-desktop",
-        },
         light: {
           displayName: "Light Theme",
           iconClass: "fa-sun-o",
@@ -48,6 +36,10 @@ export default defineComponent({
           displayName: "Dark Theme",
           iconClass: "fa-moon-o",
         },
+        system: {
+          displayName: "System Theme",
+          iconClass: "fa-desktop",
+        },
       },
     };
   },