style(core/navigation): remove dead zones from nav dropdown (#5087)

spinnaker · Mar 29, 2018 · 7e66219 · 7e66219
1 parent c96f74b
commit 7e66219
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/app/scripts/modules/core/src/application/nav/ApplicationHeader.tsx b/app/scripts/modules/core/src/application/nav/ApplicationHeader.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Subscription } from 'rxjs';
 import { BindAll } from 'lodash-decorators';
 
 import { Application } from 'core/application';
@@ -32,14 +31,19 @@ export interface IApplicationHeaderState {
 @BindAll()
 export class ApplicationHeader extends React.Component<IApplicationHeaderProps, IApplicationHeaderState> {
 
-  private activeStateChangeSubscription: Subscription;
+  private stopListeningToStateChange: Function;
   private stopListeningToAppRefresh: Function;
   private dataSourceAttribute: any;
 
   constructor(props: IApplicationHeaderProps) {
     super(props);
     this.configureApplicationEventListeners(props.app);
-    this.state = this.parseCategories(props);
+    this.stopListeningToStateChange = ReactInjector.$uiRouter.transitionService.onSuccess({}, () => this.resetActiveCategory());
+    const categories = this.parseCategories(props);
+    this.state = Object.assign(
+      categories,
+      { activeCategory: this.getActiveCategory(categories.primaryCategories.concat(categories.secondaryCategories)) }
+    );
   }
 
   public componentWillReceiveProps(nextProps: IApplicationHeaderProps) {
@@ -49,7 +53,6 @@ export class ApplicationHeader extends React.Component<IApplicationHeaderProps,
 
   private configureApplicationEventListeners(app: Application): void {
     this.clearApplicationListeners();
-    this.activeStateChangeSubscription = app.activeStateChangeStream.subscribe(() => this.resetActiveCategory());
     this.stopListeningToAppRefresh = app.onRefresh(null, () => {
       // if the user changes the data sources from the config page, regenerate categories
       if (app.attributes.dataSources !== this.dataSourceAttribute) {
@@ -60,9 +63,6 @@ export class ApplicationHeader extends React.Component<IApplicationHeaderProps,
   }
 
   private clearApplicationListeners(): void {
-    if (this.activeStateChangeSubscription) {
-      this.activeStateChangeSubscription.unsubscribe();
-    }
     if (this.stopListeningToAppRefresh) {
       this.stopListeningToAppRefresh();
     }
@@ -77,10 +77,15 @@ export class ApplicationHeader extends React.Component<IApplicationHeaderProps,
   }
 
   private resetActiveCategory() {
-    const categories = this.state.primaryCategories.concat(this.state.secondaryCategories);
+    const activeCategory = this.getActiveCategory(this.state.primaryCategories.concat(this.state.secondaryCategories));
+    if (activeCategory !== this.state.activeCategory) {
+      this.setState({ activeCategory });
+    }
+  }
+
+  private getActiveCategory(categories: IDataSourceCategory[]) {
     const active = this.props.app.dataSources.find(ds => ds.activeState && ReactInjector.$state.includes(ds.activeState));
-    const activeCategory = categories.find(c => c.dataSources.includes(active));
-    this.setState({ activeCategory });
+    return categories.find(c => c.dataSources.includes(active));
   }
 
   private getNavigationCategories(dataSources: ApplicationDataSource[], primary: boolean): IDataSourceCategory[] {
@@ -112,6 +117,7 @@ export class ApplicationHeader extends React.Component<IApplicationHeaderProps,
   }
 
   public componentWillUnmount(): void {
+    this.stopListeningToStateChange();
     this.clearApplicationListeners();
   }
 

diff --git a/app/scripts/modules/core/src/application/nav/CategoryDropdown.tsx b/app/scripts/modules/core/src/application/nav/CategoryDropdown.tsx
@@ -111,7 +111,7 @@ export class CategoryDropdown extends React.Component<ICategoryDropdownProps, IC
     const defaultDataSource = category.dataSources[0];
     return (
       <UISref to={defaultDataSource.sref}>
-        <a>
+        <a className="nav-item">
           <span className={`horizontal middle ${isActive ? 'active' : ''}`} onClick={this.close}>
             <NavIcon icon={category.icon}/>
             {' ' + category.label}
@@ -157,7 +157,7 @@ export class CategoryDropdown extends React.Component<ICategoryDropdownProps, IC
       >
         <Dropdown.Toggle
           bsStyle="link"
-          className={`nav-item horizontal middle ${isActive ? 'active' : ''}`}
+          className={`horizontal middle ${isActive ? 'active' : ''}`}
           noCaret={true}
         >
           {this.createMenuTitle(isActive)}

diff --git a/app/scripts/modules/core/src/application/nav/applicationNav.component.less b/app/scripts/modules/core/src/application/nav/applicationNav.component.less
@@ -83,8 +83,9 @@
 
 .nav-section {
   .dropdown-menu {
-    margin-top: -20px;
-    left: 15px;
+    margin-top: -15px;
+    padding: 0;
+    left: 25px;
     border-radius: 1px;
     border: none;
     box-shadow: 0 0 12px var(--color-dovegray);
@@ -95,26 +96,28 @@
       display: flex;
       color: var(--color-primary);
       font-size: 14px;
-      padding: 5px 15px;
+      padding: 8px 15px;
     }
     > li a:hover {
       background-color: var(--color-accent-g2);
     }
   }
   .btn-link {
     border: 0;
+    padding: 0;
+    &:hover {
+      text-decoration: none;
+    }
+    &:focus {
+      outline: none !important;
+    }
   }
   .nav-item, .nav-menu-item {
     color: var(--color-accent);
     text-transform: uppercase;
     font-weight: 600;
   }
   .nav-item {
-    a {
-      &:hover, &:focus, &:active {
-        text-decoration: none;
-      }
-    }
     cursor: pointer;
     padding: 25px 25px;
     transition: color 200ms ease-in;

diff --git a/app/scripts/modules/core/src/application/service/applicationDataSource.ts b/app/scripts/modules/core/src/application/service/applicationDataSource.ts
@@ -285,7 +285,7 @@ export class ApplicationDataSource implements IDataSourceConfig {
       this.label = this.$filter('robotToHuman')(config.key);
     }
 
-    if (!config.activeState) {
+    if (!config.activeState && this.sref) {
       this.activeState = '**' + this.sref + '.**';
     }