Bladeren bron

[frontend] Add spacer support in sidebar accordion items and adjust the left padding slightly

Johan Ahlen 4 jaren geleden
bovenliggende
commit
42b57cc4f1

+ 4 - 1
desktop/core/src/desktop/js/components/sidebar/AccordionSubItem.vue

@@ -18,6 +18,7 @@
 
 <template>
   <BaseNavigationItem
+    v-if="item.type === 'navigation'"
     :key="item.name"
     :css-classes="
       active
@@ -29,9 +30,11 @@
   >
     {{ item.displayName }}
   </BaseNavigationItem>
+  <SpacerItem v-else-if="item.type === 'spacer'" />
 </template>
 
 <script lang="ts">
+  import SpacerItem from 'components/sidebar/SpacerItem.vue';
   import Vue from 'vue';
   import Component from 'vue-class-component';
   import { Prop } from 'vue-property-decorator';
@@ -39,7 +42,7 @@
   import { SidebarAccordionSubItem } from './types';
 
   @Component({
-    components: { BaseNavigationItem }
+    components: { SpacerItem, BaseNavigationItem }
   })
   export default class AccordionSubItem extends Vue {
     @Prop()

+ 1 - 8
desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue

@@ -49,7 +49,7 @@
     ASSIST_ACTIVE_DB_CHANGED_EVENT,
     ASSIST_SET_DATABASE_EVENT
   } from 'ko/components/assist/events';
-  import { AppType, Connector, EditorInterpreter, HueConfig, Namespace } from 'types/config';
+  import { AppType, Connector, HueConfig, Namespace } from 'types/config';
   import { hueWindow } from 'types/types';
   import { CONFIG_REFRESHED_EVENT, getLastKnownConfig } from 'utils/hueConfig';
   import huePubSub from 'utils/huePubSub';
@@ -365,13 +365,7 @@
               });
             } else {
               const subApps: SidebarAccordionSubItem[] = [];
-              let lastWasSql = false;
-              let dividerAdded = false;
               config.interpreters.forEach(interpreter => {
-                if (!dividerAdded && lastWasSql && !(<EditorInterpreter>interpreter).is_sql) {
-                  subApps.push({ type: 'spacer' });
-                  dividerAdded = true;
-                }
                 const interpreterItem: SidebarAccordionSubItem = {
                   type: 'navigation',
                   name: `${appName}-${interpreter.type}`,
@@ -385,7 +379,6 @@
                 } else {
                   subApps.push(interpreterItem);
                 }
-                lastWasSql = (<EditorInterpreter>interpreter).is_sql;
               });
 
               if (appName === 'editor' && (<hueWindow>window).SHOW_ADD_MORE_EDITORS) {

+ 9 - 0
desktop/core/src/desktop/js/components/sidebar/sidebar.scss

@@ -260,6 +260,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  padding-left: 5px;
 
   &.sidebar-active {
     color: $sidebar-selection-color;
@@ -298,11 +299,19 @@
   height: 0;
   transition: height $sidebar-animation-duration-base;
   overflow: hidden;
+
+  .sidebar-sidebar-spacer {
+    height: 5px;
+  }
 }
 
 .sidebar-sidebar-item-tooltip-accordion-items {
   overflow-x: hidden;
   border-top: 1px solid transparent;
+
+  .sidebar-sidebar-spacer {
+    height: 5px;
+  }
 }
 
 .sidebar-sidebar-item-tooltip-accordion-items-overflow-top {