From 6b454e6bf36e7b55bcae2cd729806600e295f9ed Mon Sep 17 00:00:00 2001
From: Nick Volpe <nvolpe@nvolpe-ltm1.internal.salesforce.com>
Date: Thu, 7 Dec 2017 11:33:13 -0500
Subject: [PATCH] First pass at sub-bar redesign.

---
 src/components/EditorContainer.jsx |   4 +-
 src/components/EditorsColumn.jsx   |   4 +-
 src/components/Preview.jsx         |  24 ++++---
 src/css/application.css            | 106 +++++++++++++++++------------
 4 files changed, 82 insertions(+), 56 deletions(-)

diff --git a/src/components/EditorContainer.jsx b/src/components/EditorContainer.jsx
index 11db7cf0ff..bc60909072 100644
--- a/src/components/EditorContainer.jsx
+++ b/src/components/EditorContainer.jsx
@@ -21,12 +21,12 @@ function EditorContainer({children, language, source, style, onHide, onRef}) {
       style={prefixAll(style)}
     >
       <div
-        className="editors__label editors__label_expanded"
+        className="editors__label editors__label_expanded sub-bar"
         onClick={onHide}
       >
+        <span className="u__icon editors__chevron">&#xf078;</span>
         {t(`languages.${language}`)}
         {' '}
-        <span className="u__icon">&#xf078;</span>
       </div>
       {helpText}
       {children}
diff --git a/src/components/EditorsColumn.jsx b/src/components/EditorsColumn.jsx
index 199cdb7a4a..6a745ade1d 100644
--- a/src/components/EditorsColumn.jsx
+++ b/src/components/EditorsColumn.jsx
@@ -114,10 +114,10 @@ export default class EditorsColumn extends React.Component {
             `editor.${language}`,
           )}
         >
-          <div className="editors__label editors__label_collapsed">
+          <div className="editors__label editors__label_collapsed sub-bar">
+            <span className="u__icon editors__chevron">&#xf077;</span>
             {t(`languages.${language}`)}
             {' '}
-            <span className="u__icon">&#xf077;</span>
           </div>
         </div>
       ));
diff --git a/src/components/Preview.jsx b/src/components/Preview.jsx
index 8e01392bf1..07fa0f2998 100644
--- a/src/components/Preview.jsx
+++ b/src/components/Preview.jsx
@@ -28,16 +28,20 @@ export default function Preview({
 
   return (
     <div className="preview output__item">
-      <div className="preview__title-bar">
-        <span
-          className="preview__button preview__button_pop-out u__icon"
-          onClick={onPopOutProject}
-        >&#xf08e;</span>
-        {title}
-        <span
-          className="preview__button preview__button_reset u__icon"
-          onClick={onRefreshClick}
-        >&#xf021;</span>
+      <div className="preview__title-bar sub-bar">
+        <div className="sub-bar__left">
+          {title}
+        </div>
+        <div className="sub-bar__right">
+          <span
+            className="sub-bar__button"
+            onClick={onPopOutProject}
+          >Full screen</span>
+          <span
+            className="sub-bar__button"
+            onClick={onRefreshClick}
+          >Refresh</span>
+        </div>
       </div>
       {projectFrames}
     </div>
diff --git a/src/css/application.css b/src/css/application.css
index d50779fb03..67f092894c 100644
--- a/src/css/application.css
+++ b/src/css/application.css
@@ -71,6 +71,7 @@
 :root {
   --color-low-contrast-gray: #eee;
   --color-chrome: #e2e2e2;
+  --color-border: #bbb;
   --color-light-gray: #aaa;
   --color-gray: #666;
   --color-dark-gray: #444;
@@ -82,6 +83,7 @@
   --color-blue: #00b8ff;
   --size-rounded-corners: 0.2em;
   --size-top-bar: 4em;
+  --size-sub-bar: 2em;
   --size-top-bar-menu-button: 2.8em;
   --box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.5);
   --font-size-menu: 1.7vh;
@@ -168,6 +170,7 @@ body {
 
 .top-bar__wordmark-container > svg {
   width: 6.5em;
+  height: var(--size-top-bar);
 }
 
 .top-bar__snapshot_in-progress {
@@ -292,6 +295,57 @@ body {
   flex: 1 0 0;
 }
 
+/** @define sub-bars */
+
+.sub-bar {
+  box-shadow: var(--box-shadow);
+  font-size: var(--font-size-menu);
+  font-family: "Roboto";
+  padding-left: 0.5em;
+  height: 2em;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  background-color: var(--color-chrome);
+  z-index: 2;
+}
+
+.sub-bar__left,
+.sub-bar__right {
+  white-space: nowrap;
+}
+
+.sub-bar__left {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 0.5em;
+  flex: 1;
+}
+
+.sub-bar__right {
+  text-align: right;
+}
+
+.sub-bar__button {
+  border-left: 0.1em solid var(--color-border);
+  padding: 0 1em;
+  height: var(--size-sub-bar);
+  line-height: var(--size-sub-bar);
+  display: inline-block;
+  color: var(--color-gray);
+  font-weight: bold;
+  cursor: pointer;
+  user-select: none;
+}
+
+.sub-bar__button:hover {
+  background-color: var(--color-low-contrast-gray);
+}
+
+.sub-bar__button:active {
+  box-shadow: inset 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.3);
+}
+
 /** @define instructions */
 
 .instructions {
@@ -390,23 +444,11 @@ body {
 }
 
 .editors__label {
-  background-color: var(--color-chrome);
-  color: var(--color-dark-gray);
   cursor: pointer;
-  font-family: 'Roboto';
-  font-size: var(--font-size-menu);
-  padding: 0.5em 1em;
-  text-align: right;
-  user-select: none;
 }
 
-.editors__label_expanded {
-  background-color: rgba(226, 226, 226, 0.9);
-  box-shadow: var(--box-shadow);
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
+.editors__chevron {
+  margin-right: 0.5em;
 }
 
 .editors__column-divider {
@@ -473,7 +515,7 @@ body {
   left: 0;
   position: absolute;
   right: 0;
-  top: 4.4vh;
+  top: 3.4vh;
   z-index: 0;
 }
 
@@ -490,35 +532,10 @@ body {
 }
 
 .preview__title-bar {
-  box-shadow: var(--box-shadow);
-  font-size: 2.2vh;
-  height: 2.4vh;
+  position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  padding: 1vh;
-  position: absolute;
-  text-align: center;
-  font-weight: bold;
-  vertical-align: middle;
-  background-color: var(--color-chrome);
-  z-index: 2;
-}
-
-.preview__title {
-  text-align: center;
-}
-
-.preview__button {
-  padding: 0 0.5em;
-}
-
-.preview__button_pop-out {
-  float: left;
-}
-
-.preview__button_reset {
-  float: right;
 }
 
 /** @define error-list */
@@ -566,11 +583,16 @@ body {
 /** @define notification-list */
 
 .notification-list__notification {
-  margin: 0.2rem 0;
+  font-size: var(--font-size-menu);
+  margin-bottom: 0.1em;
   padding: 1rem 0;
   text-align: center;
 }
 
+.notification-list__notification:last-child {
+  margin-bottom: 0;
+}
+
 /* postcss-bem-linter: ignore */
 .notification-list__notification a {
   color: inherit;