From 5b6b8b6ad13c26ea955cb4565c3b3e4beb205536 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <osd@foosel.net>
Date: Tue, 13 Jan 2015 11:49:28 +0100
Subject: [PATCH] And some more moving around of templates

---
 src/octoprint/templates/dialogs.jinja2        | 148 ------------------
 .../templates/dialogs/confirmation.jinja2     |  14 ++
 .../templates/dialogs/firstrun.jinja2         |  54 +++++++
 .../templates/{ => dialogs}/settings.jinja2   |  22 +--
 .../settings/accesscontrol.jinja2             |   0
 .../{ => dialogs}/settings/api.jinja2         |   0
 .../{ => dialogs}/settings/appearance.jinja2  |   0
 .../{ => dialogs}/settings/features.jinja2    |   0
 .../{ => dialogs}/settings/folders.jinja2     |   0
 .../{ => dialogs}/settings/logs.jinja2        |   0
 .../settings/printerprofiles.jinja2           |   0
 .../settings/serialconnection.jinja2          |   0
 .../settings/temperatures.jinja2              |   0
 .../settings/terminalfilters.jinja2           |   0
 .../{ => dialogs}/settings/webcam.jinja2      |   0
 .../templates/dialogs/slicing.jinja2          |  48 ++++++
 src/octoprint/templates/index.jinja2          |  24 ++-
 src/octoprint/templates/navbar.jinja2         |  45 ------
 .../templates/overlays/dragndrop.jinja2       |  14 ++
 .../templates/overlays/offline.jinja2         |  14 ++
 20 files changed, 176 insertions(+), 207 deletions(-)
 delete mode 100644 src/octoprint/templates/dialogs.jinja2
 create mode 100644 src/octoprint/templates/dialogs/confirmation.jinja2
 create mode 100644 src/octoprint/templates/dialogs/firstrun.jinja2
 rename src/octoprint/templates/{ => dialogs}/settings.jinja2 (79%)
 rename src/octoprint/templates/{ => dialogs}/settings/accesscontrol.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/api.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/appearance.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/features.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/folders.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/logs.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/printerprofiles.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/serialconnection.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/temperatures.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/terminalfilters.jinja2 (100%)
 rename src/octoprint/templates/{ => dialogs}/settings/webcam.jinja2 (100%)
 create mode 100644 src/octoprint/templates/dialogs/slicing.jinja2
 delete mode 100644 src/octoprint/templates/navbar.jinja2
 create mode 100644 src/octoprint/templates/overlays/dragndrop.jinja2
 create mode 100644 src/octoprint/templates/overlays/offline.jinja2

diff --git a/src/octoprint/templates/dialogs.jinja2 b/src/octoprint/templates/dialogs.jinja2
deleted file mode 100644
index ad9adab9..00000000
--- a/src/octoprint/templates/dialogs.jinja2
+++ /dev/null
@@ -1,148 +0,0 @@
-<div id="slicing_configuration_dialog" class="modal hide fade">
-    <div class="modal-header">
-        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
-        <h3 data-bind="text: title"></h3>
-    </div>
-    <div class="modal-body">
-        <p>{{ _('Please configure which slicer and which slicing profile to use and name the GCode file to slice to below, or click "Cancel" if you do not wish to slice the file now.') }}</p>
-        <form class="form-horizontal">
-            <div class="control-group">
-                <label class="control-label">{{ _('Slicer') }}</label>
-                <div class="controls">
-                    <select data-bind="options: slicers, optionsText: 'name', optionsValue: 'key', optionsCaption: '{{ _('Select a slicer...') }}', value: slicer, valueAllowUnset: true"></select>
-                </div>
-            </div>
-            <div class="control-group">
-                <label class="control-label">{{ _('Slicing Profile') }}</label>
-                <div class="controls">
-                    <select data-bind="options: profiles, optionsText: 'name', optionsValue: 'key', optionsCaption: '{{ _('Select a slicing profile...') }}', value: profile, valueAllowUnset: true"></select>
-                </div>
-            </div>
-            <div class="control-group">
-                <label class="control-label">{{ _('Printer Profile') }}</label>
-                <div class="controls">
-                    <select data-bind="options: printerProfiles.profiles.items, optionsText: 'name', optionsValue: 'id', value: printerProfile, optionsCaption: '{{ _('Select a printer profile...') }}'"></select>
-                </div>
-            </div>
-            <div class="control-group">
-                <label class="control-label">{{ _('GCode Filename') }}</label>
-                <div class="controls">
-                    <div class="input-append">
-                        <input type="text" data-bind="value: gcodeFilename">
-                        <span class="add-on">.gco</span>
-                    </div>
-                </div>
-            </div>
-            <div class="control-group">
-                <label class="control-label">{{ _('After slicing...') }}</label>
-                <div class="controls">
-                    <select data-bind="options: afterSlicingOptions, optionsText: 'text', optionsValue: 'value', value: afterSlicing"></select>
-                </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.enableSliceButton()) { $root.slice() } }, enabled: enableSliceButton, css: {disabled: !$root.enableSliceButton()}">{{ _('Slice') }}</a>
-    </div>
-</div>
-
-<div id="offline_overlay" xmlns="http://www.w3.org/1999/html">
-    <div id="offline_overlay_background"></div>
-    <div id="offline_overlay_wrapper">
-        <div class="container">
-            <div class="hero-unit">
-                <h1 id="offline_overlay_title">{{ _('Server is offline') }}</h1>
-                <p id="offline_overlay_message"></p>
-                <p>
-                    <a class="btn btn-primary btn-large" id="offline_overlay_reconnect">{{ _('Attempt to reconnect') }}</a>
-                </p>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="drop_overlay" data-bind="visible: loginState.isUser()">
-    <div id="drop_overlay_background"></div>
-    <div id="drop_overlay_wrapper">
-        {% if enableSdSupport %}
-            <div class="dropzone" id="drop_locally"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload locally') }}</span></div>
-            <div class="dropzone_background" id="drop_locally_background"></div>
-            <div class="dropzone" id="drop_sd"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload to SD') }}<br><small data-bind="visible: !isSdReady()">({{ _('SD not initialized') }})</small></span></div>
-            <div class="dropzone_background" id="drop_sd_background"></div>
-        {% else %}
-            <div class="dropzone" id="drop"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload') }}</span></div>
-            <div class="dropzone_background" id="drop_background"></div>
-        {% endif %}
-    </div>
-</div>
-
-<div id="confirmation_dialog" class="modal hide fade">
-    <div class="modal-header">
-        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
-        <h3>{{ _('Are you sure?') }}</h3>
-    </div>
-    <div class="modal-body">
-        <p class="confirmation_dialog_message"></p>
-        <p>{{ _('Are you sure you want to proceed?') }}</p>
-    </div>
-    <div class="modal-footer">
-        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
-        <a href="#" class="btn btn-danger confirmation_dialog_acknowledge">{{ _('Proceed') }}</a>
-    </div>
-</div>
-
-<div id="first_run_dialog" class="modal hide fade" data-backdrop="static" data-keyboard="false">
-    <div class="modal-header">
-        <h3><i class="icon-warning-sign"></i> {{ _('Configure Access Control') }}</h3>
-    </div>
-    <div class="modal-body">
-        {% trans %}<p>
-            <strong>Please read the following, it is very important for your printer's health!</strong>
-        </p>
-        <p>
-            OctoPrint by default now ships with Access Control enabled, meaning you won't be able to do anything with the
-            printer unless you login first as a configured user. This is to <strong>prevent strangers - possibly with
-            malicious intent - to gain access to your printer</strong> via the internet or another untrustworthy network
-            and using it in such a way that it is damaged or worse (i.e. causes a fire).
-        </p>
-        <p>
-            It looks like you haven't configured access control yet. Please <strong>set up an username and password</strong> for the
-            initial administrator account who will have full access to both the printer and OctoPrint's settings, then click
-            on "Keep Access Control Enabled":
-        </p>{% endtrans %}
-        <form class="form-horizontal">
-            <div class="control-group" data-bind="css: {success: validUsername()}">
-                <label class="control-label" for="first_run_username">{{ _('Username') }}</label>
-                <div class="controls">
-                    <input type="text" class="input-medium" data-bind="value: username, valueUpdate: 'afterkeydown'">
-                </div>
-            </div>
-            <div class="control-group" data-bind="css: {success: validPassword()}">
-                <label class="control-label" for="first_run_username">{{ _('Password') }}</label>
-                <div class="controls">
-                    <input type="password" class="input-medium" data-bind="value: password, valueUpdate: 'afterkeydown'">
-                </div>
-            </div>
-            <div class="control-group" data-bind="css: {error: passwordMismatch(), success: validPassword() && !passwordMismatch()}">
-                <label class="control-label" for="first_run_username">{{ _('Confirm Password') }}</label>
-                <div class="controls">
-                    <input type="password" class="input-medium" data-bind="value: confirmedPassword, valueUpdate: 'afterkeydown'">
-                    <span class="help-inline" data-bind="visible: passwordMismatch()">{{ _('Passwords do not match') }}</span>
-                </div>
-            </div>
-        </form>
-        {% trans %}<p>
-            <strong>Note:</strong> In case that your OctoPrint installation is only accessible from within a trustworthy network and you don't
-            need Access Control for other reasons, you may alternatively disable Access Control. You should only
-            do this if you are absolutely certain that only people you know and trust will be able to connect to it.
-        </p>
-        <p>
-            <strong>Do NOT underestimate the risk of an unsecured access from the internet to your printer!</strong>
-        </p>{% endtrans %}
-    </div>
-    <div class="modal-footer">
-        <a href="#" class="btn btn-danger" data-bind="click: disableAccessControl">{{ _('Disable Access Control') }}</a>
-        <a href="#" class="btn btn-primary" data-bind="click: keepAccessControl, enable: validData(), css: {disabled: !validData()}">{{ _('Keep Access Control Enabled') }}</a>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/octoprint/templates/dialogs/confirmation.jinja2 b/src/octoprint/templates/dialogs/confirmation.jinja2
new file mode 100644
index 00000000..63395d34
--- /dev/null
+++ b/src/octoprint/templates/dialogs/confirmation.jinja2
@@ -0,0 +1,14 @@
+<div id="confirmation_dialog" class="modal hide fade">
+    <div class="modal-header">
+        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+        <h3>{{ _('Are you sure?') }}</h3>
+    </div>
+    <div class="modal-body">
+        <p class="confirmation_dialog_message"></p>
+        <p>{{ _('Are you sure you want to proceed?') }}</p>
+    </div>
+    <div class="modal-footer">
+        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
+        <a href="#" class="btn btn-danger confirmation_dialog_acknowledge">{{ _('Proceed') }}</a>
+    </div>
+</div>
diff --git a/src/octoprint/templates/dialogs/firstrun.jinja2 b/src/octoprint/templates/dialogs/firstrun.jinja2
new file mode 100644
index 00000000..9c3360d4
--- /dev/null
+++ b/src/octoprint/templates/dialogs/firstrun.jinja2
@@ -0,0 +1,54 @@
+<div id="first_run_dialog" class="modal hide fade" data-backdrop="static" data-keyboard="false">
+    <div class="modal-header">
+        <h3><i class="icon-warning-sign"></i> {{ _('Configure Access Control') }}</h3>
+    </div>
+    <div class="modal-body">
+        {% trans %}<p>
+            <strong>Please read the following, it is very important for your printer's health!</strong>
+        </p>
+            <p>
+                OctoPrint by default now ships with Access Control enabled, meaning you won't be able to do anything with the
+                printer unless you login first as a configured user. This is to <strong>prevent strangers - possibly with
+                malicious intent - to gain access to your printer</strong> via the internet or another untrustworthy network
+                and using it in such a way that it is damaged or worse (i.e. causes a fire).
+            </p>
+            <p>
+                It looks like you haven't configured access control yet. Please <strong>set up an username and password</strong> for the
+                initial administrator account who will have full access to both the printer and OctoPrint's settings, then click
+                on "Keep Access Control Enabled":
+            </p>{% endtrans %}
+        <form class="form-horizontal">
+            <div class="control-group" data-bind="css: {success: validUsername()}">
+                <label class="control-label" for="first_run_username">{{ _('Username') }}</label>
+                <div class="controls">
+                    <input type="text" class="input-medium" data-bind="value: username, valueUpdate: 'afterkeydown'">
+                </div>
+            </div>
+            <div class="control-group" data-bind="css: {success: validPassword()}">
+                <label class="control-label" for="first_run_username">{{ _('Password') }}</label>
+                <div class="controls">
+                    <input type="password" class="input-medium" data-bind="value: password, valueUpdate: 'afterkeydown'">
+                </div>
+            </div>
+            <div class="control-group" data-bind="css: {error: passwordMismatch(), success: validPassword() && !passwordMismatch()}">
+                <label class="control-label" for="first_run_username">{{ _('Confirm Password') }}</label>
+                <div class="controls">
+                    <input type="password" class="input-medium" data-bind="value: confirmedPassword, valueUpdate: 'afterkeydown'">
+                    <span class="help-inline" data-bind="visible: passwordMismatch()">{{ _('Passwords do not match') }}</span>
+                </div>
+            </div>
+        </form>
+        {% trans %}<p>
+            <strong>Note:</strong> In case that your OctoPrint installation is only accessible from within a trustworthy network and you don't
+            need Access Control for other reasons, you may alternatively disable Access Control. You should only
+            do this if you are absolutely certain that only people you know and trust will be able to connect to it.
+        </p>
+            <p>
+                <strong>Do NOT underestimate the risk of an unsecured access from the internet to your printer!</strong>
+            </p>{% endtrans %}
+    </div>
+    <div class="modal-footer">
+        <a href="#" class="btn btn-danger" data-bind="click: disableAccessControl">{{ _('Disable Access Control') }}</a>
+        <a href="#" class="btn btn-primary" data-bind="click: keepAccessControl, enable: validData(), css: {disabled: !validData()}">{{ _('Keep Access Control Enabled') }}</a>
+    </div>
+</div>
diff --git a/src/octoprint/templates/settings.jinja2 b/src/octoprint/templates/dialogs/settings.jinja2
similarity index 79%
rename from src/octoprint/templates/settings.jinja2
rename to src/octoprint/templates/dialogs/settings.jinja2
index 8388e4c1..be6bccaa 100644
--- a/src/octoprint/templates/settings.jinja2
+++ b/src/octoprint/templates/dialogs/settings.jinja2
@@ -31,17 +31,17 @@
             </ul>
 
             <div class="tab-content span8">
-                {% include 'settings/serialconnection.jinja2' %}
-                {% include 'settings/printerprofiles.jinja2' %}
-                {% include 'settings/temperatures.jinja2' %}
-                {% include 'settings/terminalfilters.jinja2' %}
-                {% include 'settings/features.jinja2' %}
-                {% include 'settings/webcam.jinja2' %}
-                {% include 'settings/accesscontrol.jinja2' %}
-                {% include 'settings/api.jinja2' %}
-                {% include 'settings/folders.jinja2' %}
-                {% include 'settings/appearance.jinja2' %}
-                {% include 'settings/logs.jinja2' %}
+                {% include 'dialogs/settings/serialconnection.jinja2' %}
+                {% include 'dialogs/settings/printerprofiles.jinja2' %}
+                {% include 'dialogs/settings/temperatures.jinja2' %}
+                {% include 'dialogs/settings/terminalfilters.jinja2' %}
+                {% include 'dialogs/settings/features.jinja2' %}
+                {% include 'dialogs/settings/webcam.jinja2' %}
+                {% include 'dialogs/settings/accesscontrol.jinja2' %}
+                {% include 'dialogs/settings/api.jinja2' %}
+                {% include 'dialogs/settings/folders.jinja2' %}
+                {% include 'dialogs/settings/appearance.jinja2' %}
+                {% include 'dialogs/settings/logs.jinja2' %}
 
                 {% for plugin_name, vars in settingsPlugins.items() %}
                     <div class="tab-pane" id="settings_plugin_{{ plugin_name }}" data-bind="allowBindings: false">
diff --git a/src/octoprint/templates/settings/accesscontrol.jinja2 b/src/octoprint/templates/dialogs/settings/accesscontrol.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/accesscontrol.jinja2
rename to src/octoprint/templates/dialogs/settings/accesscontrol.jinja2
diff --git a/src/octoprint/templates/settings/api.jinja2 b/src/octoprint/templates/dialogs/settings/api.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/api.jinja2
rename to src/octoprint/templates/dialogs/settings/api.jinja2
diff --git a/src/octoprint/templates/settings/appearance.jinja2 b/src/octoprint/templates/dialogs/settings/appearance.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/appearance.jinja2
rename to src/octoprint/templates/dialogs/settings/appearance.jinja2
diff --git a/src/octoprint/templates/settings/features.jinja2 b/src/octoprint/templates/dialogs/settings/features.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/features.jinja2
rename to src/octoprint/templates/dialogs/settings/features.jinja2
diff --git a/src/octoprint/templates/settings/folders.jinja2 b/src/octoprint/templates/dialogs/settings/folders.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/folders.jinja2
rename to src/octoprint/templates/dialogs/settings/folders.jinja2
diff --git a/src/octoprint/templates/settings/logs.jinja2 b/src/octoprint/templates/dialogs/settings/logs.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/logs.jinja2
rename to src/octoprint/templates/dialogs/settings/logs.jinja2
diff --git a/src/octoprint/templates/settings/printerprofiles.jinja2 b/src/octoprint/templates/dialogs/settings/printerprofiles.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/printerprofiles.jinja2
rename to src/octoprint/templates/dialogs/settings/printerprofiles.jinja2
diff --git a/src/octoprint/templates/settings/serialconnection.jinja2 b/src/octoprint/templates/dialogs/settings/serialconnection.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/serialconnection.jinja2
rename to src/octoprint/templates/dialogs/settings/serialconnection.jinja2
diff --git a/src/octoprint/templates/settings/temperatures.jinja2 b/src/octoprint/templates/dialogs/settings/temperatures.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/temperatures.jinja2
rename to src/octoprint/templates/dialogs/settings/temperatures.jinja2
diff --git a/src/octoprint/templates/settings/terminalfilters.jinja2 b/src/octoprint/templates/dialogs/settings/terminalfilters.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/terminalfilters.jinja2
rename to src/octoprint/templates/dialogs/settings/terminalfilters.jinja2
diff --git a/src/octoprint/templates/settings/webcam.jinja2 b/src/octoprint/templates/dialogs/settings/webcam.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/webcam.jinja2
rename to src/octoprint/templates/dialogs/settings/webcam.jinja2
diff --git a/src/octoprint/templates/dialogs/slicing.jinja2 b/src/octoprint/templates/dialogs/slicing.jinja2
new file mode 100644
index 00000000..3b0ad040
--- /dev/null
+++ b/src/octoprint/templates/dialogs/slicing.jinja2
@@ -0,0 +1,48 @@
+<div id="slicing_configuration_dialog" class="modal hide fade">
+    <div class="modal-header">
+        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+        <h3 data-bind="text: title"></h3>
+    </div>
+    <div class="modal-body">
+        <p>{{ _('Please configure which slicer and which slicing profile to use and name the GCode file to slice to below, or click "Cancel" if you do not wish to slice the file now.') }}</p>
+        <form class="form-horizontal">
+            <div class="control-group">
+                <label class="control-label">{{ _('Slicer') }}</label>
+                <div class="controls">
+                    <select data-bind="options: slicers, optionsText: 'name', optionsValue: 'key', optionsCaption: '{{ _('Select a slicer...') }}', value: slicer, valueAllowUnset: true"></select>
+                </div>
+            </div>
+            <div class="control-group">
+                <label class="control-label">{{ _('Slicing Profile') }}</label>
+                <div class="controls">
+                    <select data-bind="options: profiles, optionsText: 'name', optionsValue: 'key', optionsCaption: '{{ _('Select a slicing profile...') }}', value: profile, valueAllowUnset: true"></select>
+                </div>
+            </div>
+            <div class="control-group">
+                <label class="control-label">{{ _('Printer Profile') }}</label>
+                <div class="controls">
+                    <select data-bind="options: printerProfiles.profiles.items, optionsText: 'name', optionsValue: 'id', value: printerProfile, optionsCaption: '{{ _('Select a printer profile...') }}'"></select>
+                </div>
+            </div>
+            <div class="control-group">
+                <label class="control-label">{{ _('GCode Filename') }}</label>
+                <div class="controls">
+                    <div class="input-append">
+                        <input type="text" data-bind="value: gcodeFilename">
+                        <span class="add-on">.gco</span>
+                    </div>
+                </div>
+            </div>
+            <div class="control-group">
+                <label class="control-label">{{ _('After slicing...') }}</label>
+                <div class="controls">
+                    <select data-bind="options: afterSlicingOptions, optionsText: 'text', optionsValue: 'value', value: afterSlicing"></select>
+                </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.enableSliceButton()) { $root.slice() } }, enabled: enableSliceButton, css: {disabled: !$root.enableSliceButton()}">{{ _('Slice') }}</a>
+    </div>
+</div>
diff --git a/src/octoprint/templates/index.jinja2 b/src/octoprint/templates/index.jinja2
index c3754f4b..6630fd1d 100644
--- a/src/octoprint/templates/index.jinja2
+++ b/src/octoprint/templates/index.jinja2
@@ -73,7 +73,16 @@
     <body>
         <div id="navbar" class="navbar navbar-static-top">
             <div class="navbar-inner" data-bind="css: appearance.color">
-                {% include 'navbar.jinja2' %}
+                <div class="container">
+                    <a class="brand" href="#"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
+                    <div class="nav-collapse">
+                        <ul class="nav pull-right">
+                            {% include 'navbar/settings.jinja2' %}
+                            {% include 'navbar/systemmenu.jinja2' %}
+                            {% include 'navbar/login.jinja2' %}
+                        </ul>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="container octoprint-container">
@@ -115,8 +124,17 @@
             </div>
         </div>
 
-        {% include 'settings.jinja2' %}
-        {% include 'dialogs.jinja2' %}
+        <!-- Dialogs -->
+        {% include 'dialogs/confirmation.jinja2' %}
+        {% include 'dialogs/firstrun.jinja2' %}
+        {% include 'dialogs/settings.jinja2' %}
+        {% include 'dialogs/slicing.jinja2' %}
+        <!-- End of dialogs -->
+
+        <!-- Overlays -->
+        {% include 'overlays/dragndrop.jinja2' %}
+        {% include 'overlays/offline.jinja2' %}
+        <!-- End of overlays -->
 
         <!-- Plugin template files -->
         {%  if templatePlugins %}
diff --git a/src/octoprint/templates/navbar.jinja2 b/src/octoprint/templates/navbar.jinja2
deleted file mode 100644
index 517ae5f5..00000000
--- a/src/octoprint/templates/navbar.jinja2
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="container">
-    <a class="brand" href="#"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
-    <div class="nav-collapse">
-        <ul class="nav pull-right">
-            <li style="display: none;" data-bind="visible: loginState.isAdmin">
-                <a id="navbar_show_settings" class="pull-right" href="#settings_dialog">
-                    <i class="icon-wrench"></i> {{ _('Settings') }}
-                </a>
-            </li>
-            {% if enableSystemMenu %}
-                <li class="dropdown" style="display: none" data-bind="visible: loginState.isAdmin">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                        <i class="icon-off"></i> {{ _('System') }}
-                        <b class="caret"></b>
-                    </a>
-                    <ul class="dropdown-menu" data-bind="foreach: systemActions">
-                        <li><a href="#" data-bind="click: $root.triggerAction, text: name"></a></li>
-                    </ul>
-                </li>
-            {% endif %}
-            {% if enableAccessControl %}
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                        <i class="icon-user"></i> <span data-bind="text: loginState.userMenuText">{{ _('Login') }}</span>
-                        <b class="caret"></b>
-                    </a>
-                    <div id="login_dropdown_loggedout" style="padding: 15px" class="dropdown-menu" data-bind="css: {hide: loginState.loggedIn(), 'dropdown-menu': !loginState.loggedIn()}">
-                        <label for="login_user">{{ _('Username') }}</label>
-                        <input type="text" id="login_user" placeholder="{{ _('Username') }}" autocapitalize="none">
-                        <label for="login_pass">{{ _('Password') }}</label>
-                        <input type="password" id="login_pass" placeholder="{{ _('Password') }}">
-                        <label class="checkbox">
-                            <input type="checkbox" id="login_remember"> {{ _('Remember me') }}
-                        </label>
-                        <button class="btn btn-block btn-primary" id="login_button" data-bind="click: loginState.login">{{ _('Login') }}</button>
-                    </div>
-                    <ul id="login_dropdown_loggedin" class="hide" data-bind="css: {hide: !loginState.loggedIn(), 'dropdown-menu': loginState.loggedIn()}">
-                        <li><a href="#" id="change_password_button" data-bind="click: function() { users.showChangePasswordDialog(loginState.currentUser()); }">{{ _('Change Password') }}</a></li>
-                        <li><a href="#" id="logout_button" data-bind="click: loginState.logout">{{ _('Logout') }}</a></li>
-                    </ul>
-                </li>
-            {% endif %}
-        </ul>
-    </div>
-</div>
diff --git a/src/octoprint/templates/overlays/dragndrop.jinja2 b/src/octoprint/templates/overlays/dragndrop.jinja2
new file mode 100644
index 00000000..9d07238e
--- /dev/null
+++ b/src/octoprint/templates/overlays/dragndrop.jinja2
@@ -0,0 +1,14 @@
+<div id="drop_overlay" data-bind="visible: loginState.isUser()">
+    <div id="drop_overlay_background"></div>
+    <div id="drop_overlay_wrapper">
+        {% if enableSdSupport %}
+            <div class="dropzone" id="drop_locally"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload locally') }}</span></div>
+            <div class="dropzone_background" id="drop_locally_background"></div>
+            <div class="dropzone" id="drop_sd"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload to SD') }}<br><small data-bind="visible: !isSdReady()">({{ _('SD not initialized') }})</small></span></div>
+            <div class="dropzone_background" id="drop_sd_background"></div>
+        {% else %}
+            <div class="dropzone" id="drop"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload') }}</span></div>
+            <div class="dropzone_background" id="drop_background"></div>
+        {% endif %}
+    </div>
+</div>
diff --git a/src/octoprint/templates/overlays/offline.jinja2 b/src/octoprint/templates/overlays/offline.jinja2
new file mode 100644
index 00000000..31e981ad
--- /dev/null
+++ b/src/octoprint/templates/overlays/offline.jinja2
@@ -0,0 +1,14 @@
+<div id="offline_overlay" xmlns="http://www.w3.org/1999/html">
+    <div id="offline_overlay_background"></div>
+    <div id="offline_overlay_wrapper">
+        <div class="container">
+            <div class="hero-unit">
+                <h1 id="offline_overlay_title">{{ _('Server is offline') }}</h1>
+                <p id="offline_overlay_message"></p>
+                <p>
+                    <a class="btn btn-primary btn-large" id="offline_overlay_reconnect">{{ _('Attempt to reconnect') }}</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>