add file menu

wentin · Aug 13, 2018 · 75834f6 · 75834f6
1 parent 721c33a
commit 75834f6
Show file tree

Hide file tree

Showing 4 changed files with 187 additions and 199 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/index.html b/index.html
@@ -42,6 +42,13 @@
   'font-menu-opened': appStates.drawer.fontMenu.isActive }">
   <div class="tabs select-disabled">
     <div class="logo-text"><span class="accent-text">Font</span> Playground</div>
+    <div class="menu label-text">
+      <span>File</span>
+      <ul>
+        <li @click="openFile">Open…</li>
+        <li @click="saveFileToCodepen">Save to CodePen</li>
+      </ul>
+    </div>
     <div class="tab label-text" :class="{ active: tab.isActive }" v-for="tab in appStates.tabs" @click="activateTab(tab)">{{ tab.name }}</div>
     <div class="social">
       <a href="http://eepurl.com/dCxipf" target="_blank" class="newsletter icon-button">
@@ -241,7 +248,7 @@ <h4 class="subtitle-text">FONT INFO</h4>
     <div class="section section-font-size">
       <div class="slider slider-font-size">
         <label for="range-input" class="label-text">Font Size</label>
-        <input type="text" class="value-text" v-model="fontSize" @input="handleFontSizeChange">
+        <input type="text" class="value-text" v-model="fontSize" @input="handleFontSizeChange" @keydown="captureKeydown">
         <input type="range" min="1"  max="400" step="1" v-model="fontSize" @input="handleFontSizeChange">
       </div>
     </div>
@@ -269,7 +276,7 @@ <h4 class="subtitle-text">VARIABLE OPTIONS</h4>
         <div class="slider" v-for="axis in activeFont.variableOptions.axes" :class="{selected: axis.isSelected}">
           <span v-if="isSlider2dActive" class="radio-button" @click="activateAxis(axis)"></span>
           <label for="range-input" class="label-text">{{axis.name}}</label>
-          <input type="text" class="value-text" v-model="axis.defaultValue" @input="handleActiveFontChange">
+          <input type="text" class="value-text" v-model="axis.defaultValue" @input="handleActiveFontChange" @keydown="captureKeydown">
           <input type="range" :min="axis.minValue"  :max="axis.maxValue" step="0.01" v-model="axis.defaultValue" @input="handleActiveFontChange">
         </div>
       </div>
@@ -288,7 +295,7 @@ <h4 class="subtitle-text">CSS</h4>
       </code>
     </div>
     <div class="section section-export">
-      <form class="form-export" action="https://codepen.io/pen/define" method="POST" target="_blank">
+      <form id="form-export" action="https://codepen.io/pen/define" method="POST" target="_blank">
         <input type="hidden" name="data" :value='codepenJSON'>
         <button class="button button-export" type="submit">
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>export</title><path d="M15.5,11h-1a.5.5,0,0,0-.5.5V14H4V11.5a.5.5,0,0,0-.5-.5h-1a.5.5,0,0,0-.5.5v4a.5.5,0,0,0,.5.5h13a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,15.5,11Z"/><path d="M7,11.5a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5V7h3L9,2,4,7H7Z"/></svg>
@@ -323,7 +330,7 @@ <h1>Contact</h1>
     </p>
   </div>
 </div>
-<!-- <script src="http://localhost:35729/livereload.js"></script> -->
+<script src="http://localhost:35729/livereload.js"></script>
 <script src="js/clipboard.min.js"></script>
 <script src="js/app.js"></script>
 </body>