glimmerjs · locks · Jan 12, 2018 · Nov 8, 2017
diff --git a/src/ui/components/Main/component.ts b/src/ui/components/Main/component.ts
@@ -16,6 +16,7 @@ class ComponentFiles {
   @tracked name: string;
   @tracked template: File;
   @tracked component: File;
+  @tracked isVisible: boolean = true;
 
   constructor(options: Partial<ComponentFiles>) {
     this.id = _id++;
@@ -40,6 +41,7 @@ class HelperFiles {
   isEditable = true;
   @tracked name: string;
   @tracked helper: File;
+  @tracked isVisible: boolean = true;
 
   constructor(options: Partial<HelperFiles>) {
     this.id = _id++;
@@ -295,6 +297,10 @@ export default class extends Component {
       });
     });
   }
+
+  toggleVisibility(files: ComponentFiles | HelperFiles) {
+    files.isVisible = !files.isVisible;
+  }
 }
 
 function pathForTemplate(name) {

diff --git a/src/ui/components/Main/template.hbs b/src/ui/components/Main/template.hbs
@@ -22,7 +22,7 @@
       </header>
       {{#each components key="id" as |component|}}
         <div class="component">
-          <h2 class="component-name">
+          <h1 class="component-name">
               <span class="bracket">&lt;</span>
               {{~#if component.isEditable~}}
                 <EditableTitle @value={{component.name}} @onChange={{action componentNameDidChange component}} />
@@ -33,35 +33,38 @@
               {{#if component.isEditable}}
                 <RemoveButton @onClick={{action removeComponent component}} />
               {{/if}}
-          </h2>
-          {{#if component.template}}
-          <div class="file template">
-            <h3 class="file-name">template.hbs</h3>
-            <CodeEditor @file={{component.template}} />
-          </div>
-          {{/if}}
-
-          {{#if component.component}}
-            <div class="file implementation">
-              <h3 class="file-name">
-                component.ts
-                <RemoveButton @onClick={{action removeComponentImplementation component}} />
-              </h3>
-              <CodeEditor @file={{component.component}} />
-            </div>
-          {{else}}
-            <div class="file add-implementation">
-              <button class="button" onclick={{action addComponentImplementation component}}>
-                Add TypeScript
-              </button>
+              <span class="toggle {{if component.isVisible "" "hidden"}}" onclick={{action toggleVisibility component}} title="toggle" aria-label="toggle"></span>
+          </h1>
+          {{#if component.isVisible}}
+            {{#if component.template}}
+            <div class="file template">
+              <h2 class="file-name">template.hbs</h2>
+              <CodeEditor @file={{component.template}} />
             </div>
+            {{/if}}
+
+            {{#if component.component}}
+              <div class="file implementation">
+                <h2 class="file-name">
+                  component.ts
+                  <RemoveButton @onClick={{action removeComponentImplementation component}} />
+                </h2>
+                <CodeEditor @file={{component.component}} />
+              </div>
+            {{else}}
+              <div class="file add-implementation">
+                <button class="button" onclick={{action addComponentImplementation component}}>
+                  Add TypeScript
+                </button>
+              </div>
+            {{/if}}
           {{/if}}
         </div>
       {{/each}}
 
       {{#each helpers key="id" as |helper|}}
         <div class="helper">
-          <h2 class="helper-name">
+          <h1 class="helper-name">
               <span class="bracket">\{{</span>
               {{~#if helper.isEditable~}}
                 <EditableTitle @value={{helper.name}} @onChange={{action helperNameDidChange helper}} />
@@ -72,15 +75,18 @@
               {{#if helper.isEditable}}
                 <RemoveButton @onClick={{action removeHelper helper}} />
               {{/if}}
-          </h2>
-        {{#if helper.helper}}
-          <div class="file implementation">
-            <h3 class="file-name">
-              helper.ts
-            </h3>
-            <CodeEditor @file={{helper.helper}} />
-          </div>
-        {{/if}}
+              <span class="toggle {{if helper.isVisible "" "hidden"}}" onclick={{action toggleVisibility helper}} title="toggle" aria-label="toggle"></span>
+          </h1>
+          {{#if helper.isVisible}}
+            {{#if helper.helper}}
+              <div class="file implementation">
+                <h2 class="file-name">
+                  helper.ts
+                </h2>
+                <CodeEditor @file={{helper.helper}} />
+              </div>
+            {{/if}}
+          {{/if}}
         </div>
       {{/each}}
     </div>

diff --git a/src/ui/index.html b/src/ui/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Glimmer Playground</title>
     <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
     <link rel="shortcut icon" href="{{rootURL}}images/favicon.png">
 
     {{content-for "head"}}

diff --git a/src/ui/styles/app.scss b/src/ui/styles/app.scss
@@ -1,8 +1,8 @@
+@import "./solarized";
 @import "./variables";
 @import "./z-index";
 @import "./animations";
 @import "./responsive";
-@import "./solarized";
 @import "./typography";
 
 @import "./components/glimmer-repl";

diff --git a/src/ui/styles/components/glimmer-repl.scss b/src/ui/styles/components/glimmer-repl.scss
@@ -31,7 +31,7 @@ glimmer-repl {
       min-height: 100vh;
     }
 
-    padding: 23px 32px 32px 32px;
+    padding: 26px 32px 32px 32px;
   }
 
   .editor {
@@ -42,15 +42,22 @@ glimmer-repl {
     @include solarized-dark;
   }
 
-  h2.component-name, h2.helper-name {
+  .component:first-of-type h1.component-name {
+    border-top: none;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  h1.component-name, h1.helper-name {
     position: relative;
     display: flex;
     align-items: center;
     margin: 0;
-    padding: 6px 15px;
+    border-top: 1px solid $horizonal-rule-color;
+    padding: 6px 15px 9px 15px;
+    color: $blue;
     font-weight: normal;
     font-size: 1.2rem;
-    color: $blue;
     @include monospace;
 
     > .bracket {
@@ -65,10 +72,33 @@ glimmer-repl {
     button.confirm {
       margin-left: 15px;
     }
-  }
 
-  .component:first-of-type h2.component-name {
-    padding-top: 15px;
+    .toggle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 30px;
+      cursor: pointer;
+
+      &:after {
+        position: absolute;
+        top: calc(50% - 3px);
+        right: 15px;
+        content: '';
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 6px solid $base00;
+        transition: all 0.2s;
+      }
+
+      &.hidden:after {
+        right: 15px;
+        transform: rotate(90deg);
+      }
+    }
   }
 
   @include desktop {
@@ -77,10 +107,16 @@ glimmer-repl {
     }
   }
 
+  @include mobile {
+    .file {
+      padding-left: 4px;
+    }
+  }
+
   .file-name {
     display: flex;
     align-items: center;
-    min-height: 24px;
+    min-height: 25px;
     font-weight: normal;
     font-size: 0.8rem;
     margin: 0 17px 15px 27px;
@@ -103,11 +139,6 @@ glimmer-repl {
     }
   }
 
-
-  .title {
-    text-align: center;
-  }
-
   .toggle-visualizer {
     position: fixed;
     right: 15px;

diff --git a/src/ui/styles/components/glimmer-visualizer.scss b/src/ui/styles/components/glimmer-visualizer.scss
@@ -8,9 +8,11 @@ glimmer-visualizer {
 
   padding: 17px;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 
   color: $base3;
   background: $base03;
+  font-size: 14px;
   font-family: Menlo, Courier, monospace;
   box-shadow: rgba(black, 0.4) 0 0 35px;
   z-index: z('visualizer');

diff --git a/src/ui/styles/ui/header.scss b/src/ui/styles/ui/header.scss
@@ -3,7 +3,8 @@
   align-items: center;
   flex-wrap: wrap;
   min-height: $header-height;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
+  border-bottom: 1px solid $horizonal-rule-color;
+  background-color: $base03;
 
   .button {
     flex-grow: 1;
@@ -51,6 +52,15 @@
   }
 }
 
+@media only screen and (min-height: 700px) {
+  .header {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
+  }
+}
+
 @media only screen
         and (min-width : 630px)
         and (max-width : #{$breakpoint-mobile - 1px})

diff --git a/src/ui/styles/variables.scss b/src/ui/styles/variables.scss
@@ -1,5 +1,6 @@
 $breakpoint-mobile: 1025px;
 $glimmer-orange: #F5835F;
+$horizonal-rule-color: lighten($base03, 4%);
 $header-height: 50px;
 $overlay-window-max-width: 700px;
 $overlay-side-padding: 30px;