Merge pull request #987 from outoftime/title-bar

Add title bar to project preview

Author: outoftime

src/components/Preview.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import partial from 'lodash/partial';
 import classnames from 'classnames';
-import generatePreview from '../util/generatePreview';
+import generatePreview, {generateTextPreview} from '../util/generatePreview';
 import PreviewFrame from './PreviewFrame';
 
 function generateFrameSrc(
@@ -43,14 +43,17 @@ export default function Preview({
         {u__hidden: !isSyntacticallyValid},
       )}
     >
-      <span
-        className="preview__button preview__button_reset"
-        onClick={onRefreshClick}
-      >&#xf021;</span>
-      <span
-        className="preview__button preview__button_pop-out"
-        onClick={partial(onPopOutProject, project)}
-      >&#xf08e;</span>
+      <div className="preview__title-bar">
+        <span
+          className="preview__button preview__button_pop-out u__icon"
+          onClick={partial(onPopOutProject, project)}
+        >&#xf08e;</span>
+        {generateTextPreview(project)}
+        <span
+          className="preview__button preview__button_reset u__icon"
+          onClick={onRefreshClick}
+        >&#xf021;</span>
+      </div>
       <PreviewFrame
         src={
           generateFrameSrc(project, isSyntacticallyValid, lastRefreshTimestamp)

src/css/application.css

@@ -85,6 +85,7 @@ body {
   position: relative;
   display: flex;
   flex: 0 1 100vh;
+  z-index: 1;
 }
 
 .layout__sidebar {
@@ -556,31 +557,41 @@ body {
 .preview__frame {
   border: 0;
   z-index: 0;
-  flex: 1 0 100%;
+  position: absolute;
+  top: 1.5em;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
-.preview__button {
-  font-family: 'FontAwesome';
-  width: 16px;
-  height: 18px;
+.preview__title-bar {
+  top: 0;
+  left: 0;
+  right: 0;
   position: absolute;
-  cursor: pointer;
-  opacity: 0.25;
-  z-index: 1;
+  text-align: center;
+  height: 1.5em;
+  font-weight: bold;
+  line-height: 1.5em;
+  vertical-align: middle;
+  background-color: var(--color-gray);
+  z-index: 2;
 }
 
-.preview__button:hover {
-  opacity: 0.5;
+.preview__title {
+  text-align: center;
+}
+
+.preview__button {
+  padding: 0 0.5em;
 }
 
 .preview__button_pop-out {
-  right: 10px;
-  top: 11px;
+  float: left;
 }
 
 .preview__button_reset {
-  right: 35px;
-  top: 10px;
+  float: right;
 }
 
 /** @define error-list */