Split settings into multiple pages

- Tab style navigation

InvenTree/InvenTree/static/css/inventree.css

@@ -198,6 +198,28 @@
     margin-bottom: 20px;
 }
 
+.settings-container {
+    width: 80%;
+    padding: 15px;
+}
+
+.settings-nav {
+    height: 100%;
+    width: 160px;
+    position: fixed;
+    z-index: 1;
+    //top: 0;
+    //left: 0;
+    overflow-x: hidden;
+    padding-top: 20px;
+    padding-right: 25px;
+}
+
+.settings-content {
+    margin-left: 175px;
+    padding: 0px 10px;
+}
+
 .breadcrump {
     margin-bottom: 5px;
 }

InvenTree/InvenTree/urls.py

@@ -53,6 +53,16 @@ apipatterns = [
     url(r'^$', InfoView.as_view(), name='inventree-info'),
 ]
 
+settings_urls = [
+
+    url(r'^user/?', SettingsView.as_view(template_name='InvenTree/settings/user.html'), name='settings-user'),
+    url(r'^currency/?', SettingsView.as_view(template_name='InvenTree/settings/currency.html'), name='settings-currency'),
+    url(r'^part/?', SettingsView.as_view(template_name='InvenTree/settings/part.html'), name='settings-part'),
+
+    # Catch any other urls
+    url(r'^.*$', SettingsView.as_view(template_name='InvenTree/settings/settings.html'), name='settings'),
+]
+
 urlpatterns = [
     url(r'^part/', include(part_urls)),
     url(r'^supplier-part/', include(supplier_part_urls)),
@@ -70,7 +80,7 @@ urlpatterns = [
     url(r'^login/', auth_views.LoginView.as_view(), name='login'),
     url(r'^logout/', auth_views.LogoutView.as_view(template_name='registration/logout.html'), name='logout'),
     
-    url(r'^settings/', SettingsView.as_view(), name='settings'),
+    url(r'^settings/', include(settings_urls)),
 
     url(r'^edit-user/', EditUserView.as_view(), name='edit-user'),
     url(r'^set-password/', SetPasswordView.as_view(), name='set-password'),

InvenTree/templates/InvenTree/settings.html

@@ -1,97 +0,0 @@
-{% extends "base.html" %}
-
-{% block page_title %}
-InvenTree | Settings
-{% endblock %}
-
-{% block content %}
-<h3>InvenTree Settings</h3>
-<hr>
-
-<div class='tab'>
-    <button class='vtab'>User Settings</button>
-    <button class='vtab'>Currency Settings</button>
-    <button class='vtab'></button>
-</div>
-
-<div class='row'>
-    <div class='col-sm-6'>
-        <h4>User Information</h4>
-    </div>
-    <div class='col-sm-6'>
-        <div class='btn-group' style='float: right;'>
-            <div class='btn btn-primary' type='button' id='edit-user' title='Edit User Information'>Edit</div>
-            <div class='btn btn-primary' type='button' id='edit-password' title='Change Password'>Set Password</div>
-        </div>
-    </div>
-</div>
-
-
-<div class='settings' id='settings-user'>
-    <table class='table table-striped table-condensed'>
-        <tr>
-            <td>First Name</td>
-            <td>{{ user.first_name }}</td>
-        </tr>
-        <tr>
-            <td>Last Name</td>
-            <td>{{ user.last_name }}</td>
-        </tr>
-        <tr>
-            <td>Email Address</td>
-            <td>{{ user.email }}</td>
-        </tr>
-    </table>
-</div>
-
-<div class='settings' id='settings-currency'>
-    <table class='table table-striped table-condensed'>
-        <thead>
-            <tr>
-                <th>Currency</th>
-                <th>Value</th>
-                <th>Default</th>
-            </tr>
-        </thead>
-    </table>
-</div>
-
-<div class='settings' id='settings-parameters'>
-    <table class='table table-striped table-condensed'>
-        <thead>
-            <tr>
-                <th>Name</th>
-                <th>Units</th>
-            </tr>
-        </thead>
-    </table>
-</div>
-
-{% endblock %}
-
-{% block js_load %}
-{{ block.super }}
-{% endblock %}
-
-{% block js_ready %}
-{{ block.super }}
-
-    $("#edit-user").on('click', function() {
-        launchModalForm(
-            "{% url 'edit-user' %}",
-            {
-                reload: true,
-            }
-        );
-    });
-
-    $("#edit-password").on('click', function() {
-        launchModalForm(
-            "{% url 'set-password' %}",
-            {
-                reload: true,
-            }
-        );
-    });
-
-{% endblock %}

InvenTree/templates/InvenTree/settings/currency.html

@@ -0,0 +1,9 @@
+{% extends "InvenTree/settings/settings.html" %}
+
+{% block tabs %}
+{% include "InvenTree/settings/tabs.html" with tab='currency' %}
+{% endblock %}
+
+{% block settings %}
+
+{% endblock %}

InvenTree/templates/InvenTree/settings/part.html

@@ -0,0 +1,9 @@
+{% extends "InvenTree/settings/settings.html" %}
+
+{% block tabs %}
+{% include "InvenTree/settings/tabs.html" with tab='part' %}
+{% endblock %}
+
+{% block settings %}
+
+{% endblock %}

InvenTree/templates/InvenTree/settings/settings.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+
+{% load static %}
+
+{% block page_title %}
+InvenTree | Settings
+{% endblock %}
+
+{% block content %}
+<h3>InvenTree Settings</h3>
+<hr>
+
+<div class='settings-container'>
+
+    <div class='settings-nav'>
+        {% block tabs %}
+        {% include "InvenTree/settings/tabs.html" %} 
+        {% endblock %}
+    </div>
+    
+    <div class='settings-content'>
+        {% block settings %}
+        {% endblock %}
+    </div>
+
+</div>
+
+{% endblock %}
+
+{% block js_load %}
+{{ block.super }}
+{% endblock %}

InvenTree/templates/InvenTree/settings/tabs.html

@@ -0,0 +1,11 @@
+<ul class='nav nav-pills nav-stacked'>
+    <li{% ifequal tab 'user' %} class='active'{% endifequal %}>
+        <a href="{% url 'settings-user' %}">User</a>
+    </li>
+    <li{% ifequal tab 'currency' %} class='active'{% endifequal %}>
+        <a href="{% url 'settings-currency' %}">Currency</a>
+    </li>
+    <li{% ifequal tab 'part' %} class='active'{% endifequal %}>
+        <a href="{% url 'settings-part' %}">Part</a>
+    </li>
+</ul>

InvenTree/templates/InvenTree/settings/user.html

@@ -0,0 +1,59 @@
+{% extends "InvenTree/settings/settings.html" %}
+
+{% block tabs %}
+{% include "InvenTree/settings/tabs.html" with tab='user' %}
+{% endblock %}
+
+{% block settings %}
+
+<div class='row'>
+        <div class='col-sm-6'>
+            <h4>User Information</h4>
+        </div>
+        <div class='col-sm-6'>
+            <div class='btn-group' style='float: right;'>
+                <div class='btn btn-primary' type='button' id='edit-user' title='Edit User Information'>Edit</div>
+                <div class='btn btn-primary' type='button' id='edit-password' title='Change Password'>Set Password</div>
+            </div>
+        </div>
+    </div>    
+
+<table class='table table-striped table-condensed'>
+    <tr>
+        <td>First Name</td>
+        <td>{{ user.first_name }}</td>
+    </tr>
+    <tr>
+        <td>Last Name</td>
+        <td>{{ user.last_name }}</td>
+    </tr>
+    <tr>
+        <td>Email Address</td>
+        <td>{{ user.email }}</td>
+    </tr>
+</table>
+
+{% endblock %}
+
+{% block js_ready %}
+{{ block.super }}
+
+    $("#edit-user").on('click', function() {
+        launchModalForm(
+            "{% url 'edit-user' %}",
+            {
+                reload: true,
+            }
+        );
+    });
+
+    $("#edit-password").on('click', function() {
+        launchModalForm(
+            "{% url 'set-password' %}",
+            {
+                reload: true,
+            }
+        );
+    });
+
+{% endblock %}