updates

assets/src/js/app.js

@@ -60,6 +60,79 @@ $(document).on('ready pjax:success', function() {
     return false;
   });
 
+  if ($('main').hasClass('browse')) {
+    $('.new').click(function(event) {
+      event.preventDefault();
+
+      if ($(this).data("opened")) {
+        $('#new-file').fadeOut(200);
+        $(this).data("opened", false);
+      } else {
+        $('#new-file').fadeIn(200);
+        $(this).data("opened", true);
+      }
+
+      return false;
+    });
+
+    $('#new-file').on('keypress', 'input', function(event) {
+      if (event.keyCode == 13) {
+        event.preventDefault();
+        var value = $(this).val(),
+          splited = value.split(":"),
+          filename = "",
+          archtype = "";
+
+        if (value == "") {
+          notification({
+            text: "You have to write something. If you want to close the box, click the button again.",
+            type: 'warning',
+            timeout: 5000
+          });
+
+          return false;
+        } else if (splited.length == 1) {
+          filename = value;
+        } else if (splited.length == 2) {
+          filename = splited[0];
+          archtype = splited[1];
+        } else {
+          notification({
+            text: "Hmm... I don't understand you. Try writing something like 'name[:archtype]'.",
+            type: 'error'
+          });
+
+          return false;
+        }
+
+        var content = '{"filename": "' + filename + '", "archtype": "' + archtype + '"}';
+
+        $.ajax({
+          type: 'POST',
+          url: window.location.pathname,
+          data: content,
+          dataType: 'json',
+          encode: true,
+        }).done(function(data) {
+          notification({
+            text: "File created successfully. You will be redirected.",
+            type: 'success',
+            timeout: 5000
+          });
+        }).fail(function(data) {
+          // error types
+          notification({
+            text: 'Something went wrong.',
+            type: 'error'
+          });
+          console.log(data);
+        });
+
+        return false;
+      }
+    });
+  }
+
   // If it's editor page
   if ($(".editor")[0]) {
     editor = false;

assets/src/sass/_browse.scss

@@ -24,9 +24,22 @@
 
 .browse .actions .go-right {
   margin-left: auto;
+  position   : relative;
 }
 
 .browse tr {
   line-height  : 2em;
   border-bottom: 1px solid rgba(0,0,0,0.03);
+}
+
+.browse #new-file {
+  display         : none;
+  position        : absolute;
+  right           : 0;
+  top             : 2.5em;
+  background-color: #263238;
+  color           : rgba(255,255,255,.5);
+  border-radius   : .5em;
+  padding         : 1em;
+  width           : 182%;
 }

assets/src/sass/_forms.scss

@@ -1,5 +1,5 @@
 /* FORMS ELEMENTS */
-form input {
+input {
   width           : 100%;
   background-color: rgba(0, 0, 0, 0.25);
   color           : rgba(255, 255, 255, 0.3);
@@ -12,13 +12,13 @@ form input {
   transition      : .5s ease-out all;
 }
 
-form input:focus {
+input:focus {
   color  : rgba(255, 255, 255, 0.7);
   border : 0;
   outline: 0;
 }
 
-form label {
+label {
   width  : 10.5em;
   display: inline-block;
   margin : .1em 0 0;
@@ -109,6 +109,10 @@ button.delete {
   transition: .2s ease-in-out opacity;
 }
 
+div[data-type="array-item"] {
+  position: relative;
+}
+
 label:hover > .actions,
 h1:hover > .actions,
 h3:hover > .actions,
@@ -120,8 +124,4 @@ input[data-parent-type="array"] + .actions {
   position: absolute;
   top     : 1em;
   right   : .5em;
-}
-
-div[data-type="array-item"] {
-  position: relative;
 }