fix(core/pipeline): make revision dropdown usable, layout tweaks (#7569)

spinnaker · Oct 26, 2019 · 629a98f · 629a98f
1 parent c2bbf20
commit 629a98f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/app/scripts/modules/core/src/pipeline/config/actions/history/ShowPipelineHistoryModal.tsx b/app/scripts/modules/core/src/pipeline/config/actions/history/ShowPipelineHistoryModal.tsx
@@ -118,10 +118,16 @@ export function ShowPipelineHistoryModal(props: IShowHistoryModalProps) {
           )}
           {!loading && history.length > 1 && (
             <>
-              <div className="history-header row">
+              <div className="history-header row horizontal">
                 <div className="col-md-4">
                   <FormField
                     label="Revision"
+                    layout={({ label, input }) => (
+                      <div className="flex-container-h baseline margin-between-lg">
+                        <div className="bold">{label}</div>
+                        <div className="flex-grow">{input}</div>
+                      </div>
+                    )}
                     input={inputProps => (
                       <ReactSelectInput
                         clearable={false}
@@ -133,7 +139,7 @@ export function ShowPipelineHistoryModal(props: IShowHistoryModalProps) {
                     value={version}
                   />
                 </div>
-                <div className="col-md-4">
+                <div className="diff-section col-md-4 horizontal middle">
                   <DiffSummary summary={diff.summary} />
                   {version > 0 && (
                     <button className="btn btn-sm btn-primary" onClick={restoreVersion}>

diff --git a/app/scripts/modules/core/src/pipeline/config/actions/history/showHistory.less b/app/scripts/modules/core/src/pipeline/config/actions/history/showHistory.less
@@ -3,33 +3,36 @@
 
 .history-header {
   padding-bottom: 10px;
+  align-items: stretch;
 }
 
 .show-history {
   overflow-x: hidden;
   overflow-y: auto;
   clear: both;
   max-height: calc(~'100vh - 220px');
-  .form-control {
-    border: 0;
-    height: 100%;
-    padding-left: 15px;
-  }
+
   .form-group {
     margin: 0 -15px;
   }
 }
 
+.diff-section {
+  padding-left: 0;
+}
+
 .diff-summary {
   vertical-align: middle;
   display: inline-block;
-  margin: 0 20px;
+  margin-right: 20px;
   font-size: 120%;
   font-weight: 600;
   letter-spacing: -1px;
+
   .footer-additions {
     color: var(--color-success);
   }
+
   .footer-removals {
     color: var(--color-danger);
     display: inline-block;
@@ -39,48 +42,58 @@
 
 .diff-view {
   display: block;
+
   .diff {
     color: var(--color-black);
     font-size: 80%;
     overflow-x: visible;
     margin: 0;
     padding-bottom: 0;
+
     .match,
     .add,
     .remove {
       font-family: @font-family-monospace;
+
       &::before {
         position: relative;
         left: 0;
       }
     }
+
     .match {
       color: var(--color-dovegray);
+
       &::before {
         content: ' ';
       }
     }
 
     .add {
       background-color: var(--color-github-history-add); // copied from GitHub
+
       &::before {
         content: '+';
       }
     }
 
     .remove {
       background-color: var(--color-github-history-remove); // also copied from GitHub
+
       &::before {
         content: '-';
       }
     }
+
     .form-group {
       margin-bottom: 0;
     }
+
     &::-webkit-scrollbar {
       height: 8px;
     }
   }
+
   .summary-nav {
     cursor: pointer;
     z-index: 2;
@@ -89,13 +102,16 @@
     top: 0;
     right: -7px;
     height: calc(~'100% - 8px');
+
     .delta {
       width: 100%;
       position: absolute;
       min-height: 3px;
+
       &.add {
         background: var(--color-success);
       }
+
       &.remove {
         background: var(--color-danger);
       }