fancier new-file dialog (#218)

index.html

@@ -63,6 +63,35 @@
         <div class="downArrow"></div>
       </div>
     </div>
+
+    <!-- NEW FILE POPUP -->
+    <div id="newFilePopup">
+      <h2>
+        New file
+      </h2>
+      <div class="content">
+        <div id="fileNameContainer">
+            <span id="fileName" contenteditable="true"></span><span id="fileExtension"></span>
+        </div>
+        <div class="fileTypeButtons">
+          <div class="fileTypeButton checked" data-ext=".html">HTML</div>
+          <div class="fileTypeButton" data-ext=".css">CSS</div>
+          <div class="fileTypeButton disabled" data-ext=".js">JavaScript</div>
+        </div>
+        <div class="errorBox">
+        The file name has one of the following issues:
+          <ul>
+            <li>Length is not between 1-255</li>
+            <li>Contains an invaild character</li>
+            <li>A file with that name already exists</li>
+          </ul>
+        </div>
+      </div>
+      <div class = "newFileFooter">
+        <div class="newFileFooter-button" id="closeFileName">Close</div>
+        <div class="newFileFooter-button" id="createFileName">Create</div>
+      </div>
+    </div>
 
     <div class="topBar">
       <div class="left">

resources/css/newfile.scss

@@ -0,0 +1,124 @@
+#newFilePopup {
+  width: 450px;
+  position: fixed;
+  top: calc( 50% - ( 350px / 2 ) );
+  left: calc( 50% - ( 450px / 2 ) );
+  border: 1px solid #42ba92;
+  border-radius: 5px;
+  padding: 10px;
+  background-color: #42ba92;
+  color: white;
+  text-align: center;
+  display: none;
+  font-family: "Source Sans Pro", sans-serif;
+  z-index: 4;
+  .content {
+    margin-bottom: 10px;
+    padding: 0 25px;
+  }
+  &.error {
+    #fileNameContainer {
+      border-color: #F45;
+    }
+    #createFileName {
+      background: #aaa !important;
+      border-color: #aaa;
+      color: #ddd;
+      cursor: default;
+    }
+    .errorBox {
+      opacity: 1;
+      max-height: 500px;
+    }
+  }
+}
+
+.errorBox {
+  margin: 0;
+  text-align: left;
+  font-size: 70%;
+  color: #A00;
+  display: inline-block;
+  overflow: hidden;
+  opacity: 0;
+  max-height: 1px;
+  transition: .4s all;
+}
+
+#fileNameContainer {
+  display: inline-block;
+  width: 100%;
+  padding: 5px 0;
+  //padding-left: 47px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
+  font-family: "Source Sans Pro", sans-serif;
+  font-size: 16pt;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  transition: .4s border-color;
+}
+#fileName {
+  min-width: 10px;
+  display: inline-block;
+  color: white;
+  outline: none !important;
+}
+#fileExtension {
+  color: #FA8;
+}
+
+.fileTypeButtons {
+  display:flex;
+  justify-content: space-between;
+  align-content: center;
+}
+.fileTypeButton {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  margin: 10px 0;
+  padding: 10px;
+  border: 1px solid coral;
+  border-radius: 5px;
+  font-size: 16px;
+  line-height: 100px;
+  text-align: center;
+  background-color: coral;
+  cursor: pointer;
+  &:hover {
+    background: #FA8;
+  }
+  &.checked {
+    box-shadow: inset 0 0 0 5px white;
+  }
+  &.disabled {
+    background: #aaa !important;
+    border-color: #aaa;
+    color: #ddd;
+    cursor: default;
+  }
+}
+
+.newFileFooter {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 5px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px
+}
+.newFileFooter-button {
+  border: 1px solid coral;
+  border-radius: 5px;
+  display: inline-block;
+  background-color: coral;
+  padding: 5px 10px;
+  margin: 0 2px;
+  cursor:pointer;
+  transition: all .4s;
+  &:hover {
+    background: #FA8;
+  }
+}