feat(core/managed): new visual iteration for version sidebar, 'decomm…

…issioned' cards (spinnaker#8478) * feat(core/managed): add environment names, new visual treatment to version sidebar * feat(core/managed): add 'archived' status appearance, use in cards Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
pdk27 · Aug 10, 2020 · 3d5d149 · 3d5d149
1 parent 7a15f5d
commit 3d5d149
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 17 deletions.
diff --git a/app/scripts/modules/core/src/managed/ArtifactRow.module.css b/app/scripts/modules/core/src/managed/ArtifactRow.module.css
@@ -1,22 +1,27 @@
 .ArtifactRow {
-  height: 48px;
+  height: 56px;
   display: block;
+  position: relative;
   cursor: pointer;
+  margin-bottom: 2px;
+  border-radius: 2px;
+  transition: background-color 150ms ease-in-out;
 }
 
 .ArtifactRow:not(.selected):hover {
-  background-color: #f1f4fa;
+  background-color: #e8eaf2;
 }
 
 .selected {
-  background-color: var(--color-white);
+  background-color: #c7def5;
 }
 
 .content {
   display: flex;
   align-items: center;
   height: 100%;
   padding-top: 4px;
+  padding-bottom: 12px;
 }
 .version {
   display: flex;
@@ -29,12 +34,31 @@
   flex: 1 1 auto;
   overflow: hidden;
 }
+.version,
+.text {
+  transition: margin 150ms ease-in-out;
+}
+.ArtifactRow:hover {
+  .version,
+  .text {
+    margin-top: -13px;
+  }
+}
+
 .sha {
   font-size: 14px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
+
+.ArtifactRow.selected .sha {
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c4b5f;
+}
+
 .name {
   font-size: 12px;
   font-style: italic;
@@ -50,13 +74,24 @@
 
 .stages {
   display: flex;
-  height: 6px;
-  padding-bottom: 2px;
+  position: absolute;
+  height: 8px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  transition: height 150ms ease-in-out;
 }
 
 .stage {
+  display: flex;
   flex: 1 1 auto;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.5);
   margin-right: 2px;
+  text-transform: uppercase;
+  transition: background-color 150ms ease-in-out;
 
   &.current {
     background-color: var(--color-status-success);
@@ -70,16 +105,13 @@
     background-color: var(--color-status-progress);
   }
 
-  &.pending {
-    background-color: var(--color-status-inactive);
-  }
-
+  &.pending,
   &.skipped {
-    background-color: var(--color-status-inactive);
+    background-color: var(--color-alabaster);
   }
 
   &.previous {
-    background-color: var(--color-status-neutral);
+    background-color: #dbcec8;
   }
 
   &.vetoed {
@@ -90,3 +122,37 @@
 .stage:last-child {
   margin-right: 0;
 }
+
+.stageName {
+  opacity: 0;
+  user-select: none;
+  pointer-events: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  transition: opacity 150ms ease-in-out;
+}
+
+.ArtifactRow:not(.selected):hover {
+  .stage.pending,
+  .stage.skipped {
+    background-color: #e8eaf2;
+  }
+}
+
+.ArtifactRow.selected {
+  .stage.pending,
+  .stage.skipped {
+    background-color: #c7def5;
+  }
+}
+
+.ArtifactRow:hover {
+  .stages {
+    height: 21px;
+  }
+
+  .stageName {
+    opacity: 1;
+  }
+}
diff --git a/app/scripts/modules/core/src/managed/ArtifactsList.tsx b/app/scripts/modules/core/src/managed/ArtifactsList.tsx
@@ -62,22 +62,30 @@ export const ArtifactRow = ({ isSelected, clickHandler, version: versionInfo, re
       <div className={styles.content}>
         {build?.id && (
           <div className={styles.version}>
-            <Pill text={`#${build.id}`} />
+            <Pill bgColor={isSelected ? '#2c4b5f' : undefined} text={`#${build.id}`} />
           </div>
         )}
         <div className={classNames(styles.text, { 'sp-margin-m-left': !build?.id })}>
           <div className={styles.sha}>{git?.commit || displayName}</div>
           {name && <div className={styles.name}>{name}</div>}
         </div>
         <StatusBubbleStack
-          borderColor={isSelected ? 'var(--color-white)' : isHovered ? '#f1f4fa' : 'var(--color-alabaster)'}
+          borderColor={isSelected ? '#c7def5' : isHovered ? '#e8eaf2' : 'var(--color-alabaster)'}
           maxBubbles={3}
           statuses={getArtifactStatuses(versionInfo)}
         />
       </div>
       <div className={styles.stages}>
         {environments
-          .map(({ name, state }) => <span key={name} className={classNames(styles.stage, styles[state])} />)
+          .map(({ name, state }) => (
+            <span
+              key={name}
+              className={classNames(styles.stage, styles[state], 'text-bold flex-container-h center middle')}
+              style={{ width: `${environments.length / 100}%` }}
+            >
+              <span className={styles.stageName}>{name}</span>
+            </span>
+          ))
           .reverse()}
       </div>
     </div>

diff --git a/app/scripts/modules/core/src/managed/StatusBubble.less b/app/scripts/modules/core/src/managed/StatusBubble.less
@@ -58,6 +58,10 @@
     background-color: var(--color-status-error);
   }
 
+  .status-archived {
+    background-color: var(--color-status-archived);
+  }
+
   .quantity-pill {
     align-self: flex-end;
     color: var(--color-icon-light);

diff --git a/app/scripts/modules/core/src/managed/StatusBubble.tsx b/app/scripts/modules/core/src/managed/StatusBubble.tsx
@@ -10,7 +10,7 @@ const QUANITITY_SIZES = ['small', 'medium', 'large', 'extraLarge'];
 
 export interface IStatusBubbleProps {
   iconName: IconNames;
-  appearance: 'inactive' | 'neutral' | 'info' | 'progress' | 'success' | 'warning' | 'error';
+  appearance: 'inactive' | 'neutral' | 'info' | 'progress' | 'success' | 'warning' | 'error' | 'archived';
   size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
   quantity?: string | number;
 }

diff --git a/app/scripts/modules/core/src/managed/StatusCard.less b/app/scripts/modules/core/src/managed/StatusCard.less
@@ -30,4 +30,8 @@
   &.status-card-error {
     background-color: var(--color-status-error-light);
   }
+
+  &.status-card-archived {
+    background-color: var(--color-status-archived-light);
+  }
 }
diff --git a/app/scripts/modules/core/src/managed/StatusCard.tsx b/app/scripts/modules/core/src/managed/StatusCard.tsx
@@ -8,7 +8,7 @@ import { StatusBubble } from './StatusBubble';
 import './StatusCard.less';
 
 export interface IStatusCardProps {
-  appearance: 'inactive' | 'neutral' | 'info' | 'progress' | 'success' | 'warning' | 'error';
+  appearance: 'inactive' | 'neutral' | 'info' | 'progress' | 'success' | 'warning' | 'error' | 'archived';
   iconName: IconNames;
   title: React.ReactNode;
   description?: React.ReactNode;

diff --git a/app/scripts/modules/core/src/managed/VersionStateCard.tsx b/app/scripts/modules/core/src/managed/VersionStateCard.tsx
@@ -42,7 +42,7 @@ const cardAppearanceByState: { [state: string]: CardAppearance } = {
   },
   previous: {
     icon: 'cloudDecommissioned',
-    appearance: 'neutral',
+    appearance: 'archived',
     title: ({ replacedAtMillis, replacedByVersionName }: CardTitleMetadata) => (
       <span className="sp-group-margin-xs-xaxis">
         <span>Decommissioned {replacedAtMillis && relativeTime(replacedAtMillis)}</span>