From 318f97d9428834045712ab16efdc07ef2144de0f Mon Sep 17 00:00:00 2001
From: teramotodaiki <i101323@gmail.com>
Date: Tue, 19 Nov 2019 00:32:05 +0900
Subject: [PATCH] feat: sticky header

---
 src/CodeView.tsx          | 15 +++++++++++++++
 src/styles/code-view.scss | 22 ++++++++++++++++++++++
 src/styles/region.scss    |  2 +-
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/CodeView.tsx b/src/CodeView.tsx
index ebfdfb9..13f971c 100644
--- a/src/CodeView.tsx
+++ b/src/CodeView.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { CoffeeScript } from 'coffeescript';
 import * as React from 'react';
 import { appendEmptyLine } from './append-empty-line';
@@ -6,7 +7,9 @@ import { blockify, cellify, ICodeCell } from './cellify';
 import { CodeCell } from './CodeCell';
 import './completion';
 import { Sandbox } from './sandbox';
+import style from './styles/code-view.scss';
 import { TextCell } from './TextCell';
+import flex from './styles/flex.scss';
 
 export interface CodeViewProps {
   code: string;
@@ -63,8 +66,20 @@ export function CodeView({ code }: CodeViewProps) {
     onGame();
   }, []);
 
+  const fileInfo = {
+    iconUrl:
+      'https://assets.hackforplay.xyz/img/6d152a956071fc7b2e7ec0c8590146e4.png',
+    name: {
+      ja: 'プレイヤー'
+    }
+  };
+
   return (
     <>
+      <div className={classNames(style.header, flex.horizontal)}>
+        <img src={fileInfo.iconUrl} alt="" className={style.icon} />
+        <div className={style.name}>{fileInfo.name.ja}</div>
+      </div>
       {cellsRef.current.map(cell =>
         cell.type === 'code' ? (
           <CodeCell
diff --git a/src/styles/code-view.scss b/src/styles/code-view.scss
index bcd8e70..c584d08 100644
--- a/src/styles/code-view.scss
+++ b/src/styles/code-view.scss
@@ -3,6 +3,28 @@
 
 $padding: 4px;
 
+.header {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  padding-top: 8px;
+  background-color: $backgroundColor;
+  z-index: 10;
+  align-items: center;
+  height: 32px;
+
+  .icon {
+    height: 100%;
+    margin-right: 8px;
+  }
+
+  .name {
+    font-size: 21px;
+    font-weight: 600;
+    color: $textColor;
+  }
+}
+
 .installer {
   width: 50%;
   padding-left: $padding;
diff --git a/src/styles/region.scss b/src/styles/region.scss
index a5f4701..b4e2125 100644
--- a/src/styles/region.scss
+++ b/src/styles/region.scss
@@ -29,7 +29,7 @@
 // エディタ表示部分
 .editorView {
   @extend %base;
-  padding: 8px 8px $footerHeight 8px;
+  padding: 0px 8px $footerHeight 8px;
   overflow: scroll;
 
   z-index: 9;