feat(core/filters): Update filter section layout (#8177)

* feat(core/filters): Update layout of filter header * feat(core/filters): CSS and hover states * feat(core/filters): Extract hide/show button from filter view * feat(core/filters): Update margin * feat(core/nav): Move css to component file
spinnaker · Apr 29, 2020 · 46a3d14 · 46a3d14
1 parent 9e91340
commit 46a3d14
Show file tree

Hide file tree

Showing 14 changed files with 115 additions and 86 deletions.
diff --git a/app/scripts/modules/core/src/cluster/filter/FilterSection.tsx b/app/scripts/modules/core/src/cluster/filter/FilterSection.tsx
@@ -36,14 +36,14 @@ export class FilterSection extends React.Component<IFilterSectionProps, IFilterS
       <div className="collapsible-filter-section">
         <div className="section-heading clickable" onClick={this.toggle}>
           <h4>
-            <span className={`glyphicon glyphicon-chevron-right`} style={chevronStyle} />
-            {` ${this.props.heading}`}
+            <div className="sp-margin-xs-right">{` ${this.props.heading}`}</div>
             {this.props.helpKey && (
-              <span>
+              <div>
                 {' '}
                 <HelpField id={this.props.helpKey} placement="right" />
-              </span>
+              </div>
             )}
+            <div className={`arrow glyphicon glyphicon-chevron-right`} style={chevronStyle} />
           </h4>
         </div>
         {this.state.expanded && <div className="content-body">{this.props.children}</div>}

diff --git a/app/scripts/modules/core/src/cluster/filter/collapsibleFilterSection.html b/app/scripts/modules/core/src/cluster/filter/collapsibleFilterSection.html
@@ -1,9 +1,9 @@
 <div class="collapsible-filter-section">
   <a href class="section-heading" ng-click="toggle()">
     <h4>
-      <span class="glyphicon glyphicon-chevron-right" style="{{getIconStyle()}}"></span>
-      {{heading}}
+      <div class="sp-margin-xs-right">{{heading}}</div>
       <help-field ng-if="helpKey" key="{{helpKey}}" placement="right"></help-field>
+      <div class="arrow glyphicon glyphicon-chevron-right" style="{{getIconStyle()}}"></div>
     </h4>
   </a>
   <div class="content-body" ng-if="state.expanded" ng-transclude></div>

diff --git a/app/scripts/modules/core/src/filterModel/FilterCollapse.less b/app/scripts/modules/core/src/filterModel/FilterCollapse.less
@@ -0,0 +1,11 @@
+.filters-toggle {
+  position: absolute;
+
+  .filters-placeholder {
+    margin-top: 11px;
+  }
+
+  .show-filter-text {
+    border-left: 1px solid var(--color-accessory-light);
+  }
+}
diff --git a/app/scripts/modules/core/src/filterModel/FilterCollapse.tsx b/app/scripts/modules/core/src/filterModel/FilterCollapse.tsx
@@ -3,6 +3,7 @@ import { $rootScope } from 'ngimport';
 
 import { ReactInjector } from 'core/reactShims';
 import { Tooltip } from 'core/presentation';
+import './FilterCollapse.less';
 
 export class FilterCollapse extends React.Component<{}> {
   private onClick = (pin: boolean) => {
@@ -13,24 +14,31 @@ export class FilterCollapse extends React.Component<{}> {
 
   public render() {
     return (
-      <>
+      <div className="filters-toggle layer-high sp-margin-s-xaxis">
         <h3 className="filters-placeholder">
           <Tooltip value="Show filters">
-            <a className="btn btn-xs btn-default pin clickable" onClick={() => this.onClick(true)}>
+            <button
+              className="btn btn-xs btn-default pin clickable"
+              onClick={() => this.onClick(true)}
+              style={{ display: ReactInjector.insightFilterStateModel.filtersExpanded ? 'none' : 'inherit' }}
+            >
               <i className="fa fa-forward" />
-            </a>
+              <span className="show-filter-text"> Show filters</span>
+            </button>
           </Tooltip>
         </h3>
-        <Tooltip value="Hide filters">
-          <a
-            className="btn btn-xs btn-default pull-right unpin clickable"
-            onClick={() => this.onClick(false)}
-            style={{ display: ReactInjector.insightFilterStateModel.filtersExpanded ? 'inherit' : 'none' }}
-          >
-            <i className="fa fa-backward" />
-          </a>
-        </Tooltip>
-      </>
+        <h3 className="filters-placeholder">
+          <Tooltip value="Hide filters">
+            <button
+              className="btn btn-xs btn-default pull-left unpin clickable"
+              onClick={() => this.onClick(false)}
+              style={{ display: ReactInjector.insightFilterStateModel.filtersExpanded ? 'inherit' : 'none' }}
+            >
+              <i className="fa fa-backward" />
+            </button>
+          </Tooltip>
+        </h3>
+      </div>
     );
   }
 }
diff --git a/app/scripts/modules/core/src/filterModel/filterCollapse.component.ts b/app/scripts/modules/core/src/filterModel/filterCollapse.component.ts
@@ -0,0 +1,6 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+import { FilterCollapse } from './FilterCollapse';
+
+export const FILTER_COLLAPSE_COMPONENT = 'spinnaker.core.filterModel.filterCollapse.component';
+module(FILTER_COLLAPSE_COMPONENT, []).component('filterCollapse', react2angular(FilterCollapse));
diff --git a/app/scripts/modules/core/src/function/filter/FunctionFilters.tsx b/app/scripts/modules/core/src/function/filter/FunctionFilters.tsx
@@ -5,7 +5,7 @@ import { Subscription } from 'rxjs';
 
 import { Application } from 'core/application';
 import { CloudProviderLabel, CloudProviderLogo } from 'core/cloudProvider';
-import { FilterCollapse, ISortFilter, digestDependentFilters } from 'core/filterModel';
+import { ISortFilter, digestDependentFilters } from 'core/filterModel';
 import { FilterSection } from 'core/cluster/filter/FilterSection';
 import { FunctionState } from 'core/state';
 
@@ -138,7 +138,6 @@ export class FunctionFilters extends React.Component<IFunctionFiltersProps, IFun
 
     return (
       <div>
-        <FilterCollapse />
         <div className="heading">
           <span
             className="btn btn-default btn-xs"

diff --git a/app/scripts/modules/core/src/insight/insightFilter.component.html b/app/scripts/modules/core/src/insight/insightFilter.component.html
@@ -1,21 +1 @@
-<h3 class="filters-placeholder">
-  <a
-    href
-    class="btn btn-xs btn-default pin"
-    ng-click="$ctrl.insightFilterStateModel.pinFilters(true)"
-    uib-tooltip="Show filters"
-  >
-    <i class="fa fa-forward"></i>
-  </a>
-</h3>
-
-<a
-  href
-  class="btn btn-xs btn-default pull-right unpin"
-  ng-click="$ctrl.insightFilterStateModel.pinFilters(false)"
-  ng-show="$ctrl.insightFilterStateModel.filtersExpanded"
->
-  <i class="fa fa-backward" uib-tooltip="Hide filters"></i>
-</a>
-
 <div ng-transclude class="insight-filter-content"></div>
diff --git a/app/scripts/modules/core/src/insight/insightLayout.component.html b/app/scripts/modules/core/src/insight/insightLayout.component.html
@@ -3,6 +3,7 @@
   ng-if="!$ctrl.app.notFound && !$ctrl.app.hasError"
   ng-class="$ctrl.insightFilterStateModel.filtersExpanded ? 'filters-expanded' : 'filters-collapsed'"
 >
+  <filter-collapse ng-if="!$ctrl.insightFilterStateModel.filtersHidden" class="filter-toggle"></filter-collapse>
   <div ui-view="nav" ng-if="!$ctrl.insightFilterStateModel.filtersHidden" class="nav"></div>
   <div ui-view="master" class="nav-content" data-scroll-id="nav-content"></div>
   <div ui-view="detail" class="detail-content" ng-if="$ctrl.ready"></div>

diff --git a/app/scripts/modules/core/src/insight/insightLayout.component.ts b/app/scripts/modules/core/src/insight/insightLayout.component.ts
@@ -2,6 +2,7 @@ import { module } from 'angular';
 
 import { Application } from 'core/application';
 import { InsightFilterStateModel, INSIGHT_FILTER_STATE_MODEL } from './insightFilterState.model';
+import { FILTER_COLLAPSE_COMPONENT } from 'core/filterModel/filterCollapse.component';
 
 class InsightLayoutCtrl {
   public app: Application;
@@ -24,4 +25,7 @@ export const insightLayoutComponent = {
 };
 
 export const INSIGHT_LAYOUT_COMPONENT = 'spinnaker.core.insight.insightLayout.component';
-module(INSIGHT_LAYOUT_COMPONENT, [INSIGHT_FILTER_STATE_MODEL]).component('insightLayout', insightLayoutComponent);
+module(INSIGHT_LAYOUT_COMPONENT, [INSIGHT_FILTER_STATE_MODEL, FILTER_COLLAPSE_COMPONENT]).component(
+  'insightLayout',
+  insightLayoutComponent,
+);
diff --git a/app/scripts/modules/core/src/loadBalancer/filter/LoadBalancerFilters.tsx b/app/scripts/modules/core/src/loadBalancer/filter/LoadBalancerFilters.tsx
@@ -5,7 +5,7 @@ import { Subscription } from 'rxjs';
 
 import { Application } from 'core/application';
 import { CloudProviderLabel, CloudProviderLogo } from 'core/cloudProvider';
-import { FilterCollapse, ISortFilter, digestDependentFilters } from 'core/filterModel';
+import { ISortFilter, digestDependentFilters } from 'core/filterModel';
 import { FilterSection } from 'core/cluster/filter/FilterSection';
 import { LoadBalancerState } from 'core/state';
 
@@ -190,7 +190,6 @@ export class LoadBalancerFilters extends React.Component<ILoadBalancerFiltersPro
 
     return (
       <div>
-        <FilterCollapse />
         <div className="heading">
           <span
             className="btn btn-default btn-xs"

diff --git a/app/scripts/modules/core/src/navigation/navigation.less b/app/scripts/modules/core/src/navigation/navigation.less
@@ -8,10 +8,6 @@
   }
   .nav {
     padding: 0 0 0 10px;
-    background-color: var(--color-cirrus);
-    border: 1px solid var(--color-alto);
-    border-radius: 0;
-    border-bottom-width: 0;
 
     h3 {
       margin-right: 10px;

diff --git a/app/scripts/modules/core/src/pipeline/executions/Executions.tsx b/app/scripts/modules/core/src/pipeline/executions/Executions.tsx
@@ -17,7 +17,7 @@ import { CreatePipeline } from '../config/CreatePipeline';
 import { ExecutionFilters } from '../filter/ExecutionFilters';
 import { ExecutionFilterService } from '../filter/executionFilter.service';
 import { ExecutionGroups } from './executionGroup/ExecutionGroups';
-import { FilterTags, IFilterTag, ISortFilter } from 'core/filterModel';
+import { FilterTags, FilterCollapse, IFilterTag, ISortFilter } from 'core/filterModel';
 import { Spinner } from 'core/widgets/spinners/Spinner';
 import { ExecutionState } from 'core/state';
 import { IRetryablePromise } from 'core/utils/retryablePromise';
@@ -236,14 +236,10 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
     this.state.poll && this.state.poll.cancel();
   }
 
-  private showFilters = (): void => {
-    this.setState({ filtersExpanded: true });
-    this.insightFilterStateModel.pinFilters(true);
-  };
-
-  private hideFilters = (): void => {
-    this.setState({ filtersExpanded: false });
-    this.insightFilterStateModel.pinFilters(false);
+  private toggleFilters = (): void => {
+    const newState = !this.state.filtersExpanded;
+    this.setState({ filtersExpanded: newState });
+    this.insightFilterStateModel.pinFilters(newState);
   };
 
   private groupByChanged = (event: React.ChangeEvent<HTMLSelectElement>): void => {
@@ -290,23 +286,11 @@ export class Executions extends React.Component<IExecutionsProps, IExecutionsSta
       return (
         <div className="executions-section">
           <div className={`insight ${filtersExpanded ? 'filters-expanded' : 'filters-collapsed'}`}>
+            <div onClick={this.toggleFilters}>
+              <FilterCollapse />
+            </div>
+
             <div className="nav">
-              <h3 className="filters-placeholder">
-                <Tooltip value="Show filters">
-                  <a className="btn btn-xs btn-default pin clickable" onClick={this.showFilters}>
-                    <i className="fa fa-forward" />
-                  </a>
-                </Tooltip>
-              </h3>
-              <a
-                className="btn btn-xs btn-default pull-right unpin clickable"
-                style={{ display: filtersExpanded ? '' : 'none' }}
-                onClick={this.hideFilters}
-              >
-                <Tooltip value="Hide filters">
-                  <i className="fa fa-backward" />
-                </Tooltip>
-              </a>
               {!loading && <ExecutionFilters application={app} setReloadingForFilters={this.setReloadingForFilters} />}
             </div>
             <div

diff --git a/app/scripts/modules/core/src/pipeline/executions/executions.less b/app/scripts/modules/core/src/pipeline/executions/executions.less
@@ -6,6 +6,8 @@
 .executions-section {
   display: flex;
   flex: 1 1 auto;
+  margin-top: 6px;
+
   .execution-groups-header {
     margin-left: -8px;
     position: relative;
@@ -38,6 +40,19 @@
       font-size: 100%;
     }
   }
+
+  .insight {
+    .full-content {
+      margin-top: 6px;
+    }
+  }
+
+  .filters-collapsed {
+    .execution-groups-header {
+      margin-left: 68px;
+    }
+  }
+
   .form-group > * {
     margin-right: 3px;
   }

diff --git a/app/scripts/modules/core/src/presentation/main.less b/app/scripts/modules/core/src/presentation/main.less
@@ -159,6 +159,7 @@ html {
       overflow-y: auto;
     }
   }
+
   .filters-content {
     overflow-x: hidden;
     @media (min-width: 708px) and (max-width: 992px) {
@@ -208,7 +209,20 @@ html {
         width: 260px;
       }
     }
+
+    .main-content {
+      > .header {
+        margin-left: 68px;
+      }
+    }
+
+    .nav-content {
+      > .header {
+        margin-left: 72px;
+      }
+    }
   }
+
   &.filters-expanded {
     .detail-content {
       @media (min-width: 768px) and (max-width: 992px) {
@@ -237,6 +251,9 @@ html {
         width: inherit;
         display: block;
       }
+      .heading {
+        margin-top: 32px;
+      }
       @media (min-width: 768px) and (max-width: 992px) {
         width: 180px;
       }
@@ -258,15 +275,8 @@ html {
   .nav {
     overflow-x: hidden;
     position: relative;
-    width: 39px;
     padding-top: 5px;
-    .pin,
-    .unpin {
-      position: absolute;
-      right: 7px;
-      top: 5px;
-      padding: 1px 3px;
-    }
+
     .pin {
       padding-left: 5px;
     }
@@ -278,10 +288,10 @@ html {
       margin: 10px;
     }
     .filters-placeholder {
-      margin-top: 20px;
       font-size: 120%;
     }
   }
+
   .detail-content {
     overflow: visible;
     margin: 0;
@@ -310,7 +320,7 @@ html {
     }
   }
   .nav-content {
-    margin: 0 25px;
+    margin-right: 25px;
     @media (max-width: 768px) {
       width: 70%;
     }
@@ -977,15 +987,31 @@ select:invalid {
 .collapsible-filter-section {
   a.section-heading {
     color: var(--color-black);
+    text-decoration: none;
   }
+
   h4 {
-    padding: 10px 5px 0;
-    background-color: var(--color-cirrus);
+    padding: 10px 5px;
     margin: 0;
+    display: flex;
+    align-items: center;
+
     .glyphicon {
       font-size: 13px;
-      opacity: 0.7;
       margin-right: 4px;
+      margin-left: auto;
+    }
+
+    .arrow {
+      visibility: hidden;
+    }
+
+    &:hover {
+      background-color: var(--color-accent-g3);
+      .arrow {
+        visibility: visible;
+        text-decoration: none;
+      }
     }
     font-weight: 600;
     text-transform: uppercase;