Simplistic folder add dialog

src/octoprint/static/js/app/viewmodels/files.js

@@ -55,6 +55,12 @@ $(function() {
         self.uploadButton = undefined;
         self.uploadSdButton = undefined;
 
+        self.addFolderDialog = undefined;
+        self.addFolderName = ko.observable(undefined);
+        self.enableAddFolder = ko.computed(function() {
+            return self.loginState.isUser() && self.addFolderName() && self.addFolderName().trim() != "";
+        });
+
         self.allItems = ko.observable(undefined);
         self.listStyle = ko.observable("folders_files");
         self.currentPath = ko.observable("");
@@ -256,6 +262,23 @@ $(function() {
             self.highlightCurrentFilename();
         };
 
+        self.showAddFolderDialog = function() {
+            if (self.addFolderDialog) {
+                self.addFolderDialog.modal("show");
+            }
+        };
+
+        self.addFolder = function() {
+            var name = self.addFolderName();
+
+            // "local" only for now since we only support local and sdcard,
+            // and sdcard doesn't support creating folders...
+            OctoPrint.files.createFolder("local", name, self.currentPath())
+                .done(function() {
+                    self.addFolderDialog.modal("hide");
+                });
+        };
+
         self.loadFile = function(file, printAfterLoad) {
             if (!file) {
                 return;
@@ -471,6 +494,8 @@ $(function() {
                 scrollBy: "102px"
             });
 
+            self.addFolderDialog = $("#add_folder_dialog");
+
             //~~ Gcode upload
 
             self.uploadButton = $("#gcode_upload");
@@ -656,6 +681,6 @@ $(function() {
     OCTOPRINT_VIEWMODELS.push([
         GcodeFilesViewModel,
         ["settingsViewModel", "loginStateViewModel", "printerStateViewModel", "slicingViewModel"],
-        "#files_wrapper"
+        ["#files_wrapper", "#add_folder_dialog"]
     ]);
 });

src/octoprint/templates/dialogs/files.jinja2

@@ -0,0 +1,21 @@
+<div id="add_folder_dialog" class="modal hide fade">
+    <div class="modal-header">
+        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+        <h3>Create Folder</h3>
+    </div>
+    <div class="modal-body">
+        <p>{{ _('Please specify the name of the folder to create.') }}</p>
+        <form class="form-horizontal">
+            <div class="control-group">
+                <label class="control-label">{{ _('Folder name') }}</label>
+                <div class="controls">
+                    <input type="text" data-bind="value: addFolderName, valueUpdate: 'afterkeydown'">
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
+        <a href="#" class="btn btn-primary" data-bind="click: function() { if ($root.enableAddFolder()) { $root.addFolder() } }, enabled: $root.enableAddFolder(), css: {disabled: !$root.enableAddFolder()}">{{ _('Create') }}</a>
+    </div>
+</div>

src/octoprint/templates/index.jinja2

@@ -130,6 +130,7 @@
             {% include 'dialogs/usersettings.jinja2' %}
             {% include 'dialogs/wizard.jinja2' %}
             {% include 'dialogs/about.jinja2' %}
+            {% include 'dialogs/files.jinja2' %}
             <!-- End of dialogs -->
 
             <!-- Overlays -->

src/octoprint/templates/sidebar/files.jinja2

@@ -44,6 +44,11 @@
     <small>{{ _('Free') }}: <span data-bind="text: freeSpaceString"></span> / {{ _('Total') }}: <span data-bind="text: totalSpaceString"></span> <i class="icon-exclamation-sign" data-bind="visible: diskusageWarning" style="display: none"></i></small>
 </div>
 <div style="display: none;" data-bind="visible: loginState.isUser">
+    <div class="row-fluid folder-button">
+        <span class="btn addfolder-button span12" data-bind="click: function() { if ($root.loginState.isUser()) { $root.showAddFolderDialog(); } }, css: {disabled: !$root.loginState.isUser()}">
+            <i class="icon-folder-close"></i> {{ _('Create folder...') }}
+        </span>
+    </div>
     <div class="row-fluid upload-buttons">
         {% if enableSdSupport %}
             <span class="btn btn-primary fileinput-button span6" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">