fix(core): Layout v1 feedback (#8404)

* fix(core): Layout v1 feedback * Update app/scripts/modules/core/src/application/nav/navAtoms.ts Co-authored-by: Chris Thielen <christopherthielen@users.noreply.github.com> Co-authored-by: Chris Thielen <christopherthielen@users.noreply.github.com>
spinnaker · Jul 9, 2020 · 8578626 · 8578626
1 parent ea88ddf
commit 8578626
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 5 deletions.
diff --git a/app/scripts/modules/core/src/application/nav/navAtoms.ts b/app/scripts/modules/core/src/application/nav/navAtoms.ts
@@ -3,5 +3,6 @@ import { CollapsibleSectionStateCache } from '../../cache/collapsibleSectionStat
 
 export const verticalNavExpandedAtom = atom({
   key: 'verticalNavExpanded',
-  default: !CollapsibleSectionStateCache.isSet('verticalNav') || CollapsibleSectionStateCache.isExpanded('verticalNav'),
+  default:
+    !CollapsibleSectionStateCache.isSet('verticalNav') || CollapsibleSectionStateCache.isExpanded('verticalNav'),
 });
diff --git a/app/scripts/modules/core/src/application/nav/verticalNav.less b/app/scripts/modules/core/src/application/nav/verticalNav.less
@@ -23,6 +23,7 @@
       width: 36px;
       height: 36px;
       font-size: 15px;
+      cursor: pointer;
     }
 
     .header-icon-pulsing {

diff --git a/app/scripts/modules/core/src/header/SpinnakerHeader.tsx b/app/scripts/modules/core/src/header/SpinnakerHeader.tsx
@@ -5,6 +5,7 @@ import { UIRouterContext } from '@uirouter/react-hybrid';
 
 import { NgReact } from 'core/reactShims';
 import { verticalNavExpandedAtom } from 'core/application/nav/navAtoms';
+import { CollapsibleSectionStateCache } from 'core/cache';
 import { Overridable } from 'core/overrideRegistry';
 import { GlobalSearch } from 'core/search/global/GlobalSearch';
 import { HelpMenu } from 'core/help/HelpMenu';
@@ -32,7 +33,10 @@ export const SpinnakerHeaderContent = () => {
     currentState.name.includes('project.application.') || currentState.name.includes('applications.application.');
 
   const [verticalNavExpanded, setVerticalNavExpanded] = useRecoilState(verticalNavExpandedAtom);
-  const toggleNav = () => setVerticalNavExpanded(!verticalNavExpanded);
+  const toggleNav = () => {
+    setVerticalNavExpanded(!verticalNavExpanded);
+    CollapsibleSectionStateCache.setExpanded('verticalNav', !verticalNavExpanded);
+  };
 
   const isDevicePhoneOrSmaller = () => {
     const bodyStyles = window.getComputedStyle(document.body);

diff --git a/app/scripts/modules/core/src/pipeline/config/graph/PipelineGraph.tsx b/app/scripts/modules/core/src/pipeline/config/graph/PipelineGraph.tsx
@@ -33,6 +33,7 @@ export interface IPipelineGraphProps {
 export interface IPipelineGraphState {
   allNodes: IPipelineGraphNode[];
   graphHeight: number;
+  graphWidth: string;
   labelOffsetX: number;
   labelOffsetY: number;
   maxLabelWidth: number;
@@ -46,6 +47,7 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
   private defaultState: IPipelineGraphState = {
     allNodes: [],
     graphHeight: 0,
+    graphWidth: '',
     labelOffsetX: this.defaultNodeRadius + 3,
     labelOffsetY: this.defaultNodeRadius + 10,
     maxLabelWidth: 0,
@@ -272,6 +274,12 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
     }
     newState.maxLabelWidth = Math.max(this.minLabelWidth, newState.maxLabelWidth);
 
+    if (newState.maxLabelWidth === this.minLabelWidth) {
+      newState.graphWidth = (newState.phaseCount + 1) * (newState.maxLabelWidth + phaseOffset) + 5 + 'px';
+    } else {
+      newState.graphWidth = '100%';
+    }
+
     // get the saved horizontal scroll position for executions
     if (props.execution) {
       const offsetForId = PipelineGraphService.xScrollOffset[props.execution.id] || 0;
@@ -445,15 +453,15 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
 
   public render() {
     const { execution } = this.props;
-    const { allNodes, graphHeight, labelOffsetX, labelOffsetY, maxLabelWidth, nodeRadius } = this.state;
+    const { allNodes, graphHeight, graphWidth, labelOffsetX, labelOffsetY, maxLabelWidth, nodeRadius } = this.state;
 
     return (
       <div className="pipeline-graph" ref={this.refCallback} onWheel={this.handleWheel}>
         <svg
           className="pipeline-graph"
           style={{
             height: graphHeight,
-            width: '100%',
+            width: graphWidth,
             padding: this.graphVerticalPadding + 'px ' + nodeRadius * 2 + 'px ' + '0 ' + nodeRadius * 2 + 'px',
           }}
         >

diff --git a/app/scripts/modules/core/src/pipeline/config/graph/pipelineGraph.less b/app/scripts/modules/core/src/pipeline/config/graph/pipelineGraph.less
@@ -175,4 +175,5 @@ svg.pipeline-graph {
   background-color: var(--color-cirrus);
   border: 1px solid var(--color-alto);
   border-top: none;
+  max-width: 72vw;
 }
diff --git a/app/scripts/modules/core/src/presentation/details.less b/app/scripts/modules/core/src/presentation/details.less
@@ -59,6 +59,7 @@
   background-color: var(--color-white);
   box-shadow: -2px 2px 3px 1px var(--color-alto);
   margin-left: var(--xs-spacing);
+  padding-bottom: 36px;
 
   .actions {
     display: flex;

diff --git a/app/scripts/modules/core/src/presentation/navigation/pageNavigator.component.ts b/app/scripts/modules/core/src/presentation/navigation/pageNavigator.component.ts
@@ -102,7 +102,7 @@ const pageNavigatorComponent: ng.IComponentOptions = {
   controller: PageNavigatorController,
   transclude: true,
   template: `
-    <div class="row">
+    <div class="row flex-1">
       <div class="col-md-3 hidden-sm hidden-xs flex-1" ng-show="!$ctrl.hideNavigation">
         <ul class="page-navigation">
           <li ng-repeat="page in $ctrl.pageNavigationState.pages"

diff --git a/app/scripts/modules/core/src/task/tasks.less b/app/scripts/modules/core/src/task/tasks.less
@@ -67,6 +67,7 @@
 
   .task-step,
   .task-error-message {
+    word-break: break-all;
     > :first-child {
       padding-left: 20px;
     }