Merge pull request #2230 from SchrodingersGat/settings-visual-refactor

Settings visual refactor

InvenTree/common/models.py

@@ -807,19 +807,19 @@ class InvenTreeSetting(BaseInvenTreeSetting):
         # login / SSO
         'LOGIN_ENABLE_PWD_FORGOT': {
             'name': _('Enable password forgot'),
-            'description': _('Enable password forgot function on the login-pages'),
+            'description': _('Enable password forgot function on the login pages'),
             'default': True,
             'validator': bool,
         },
         'LOGIN_ENABLE_REG': {
             'name': _('Enable registration'),
-            'description': _('Enable self-registration for users on the login-pages'),
+            'description': _('Enable self-registration for users on the login pages'),
             'default': False,
             'validator': bool,
         },
         'LOGIN_ENABLE_SSO': {
             'name': _('Enable SSO'),
-            'description': _('Enable SSO on the login-pages'),
+            'description': _('Enable SSO on the login pages'),
             'default': False,
             'validator': bool,
         },

InvenTree/templates/InvenTree/settings/category.html

@@ -7,6 +7,12 @@
 {% trans "Category Settings" %}
 {% endblock %}
 
+{% block actions %}
+<button class='btn btn-success' id='new-cat-param' disabled=''>
+    <div class='fas fa-plus-circle'></div> {% trans "New Parameter" %}
+</button>
+{% endblock %}
+
 {% block content %}
 
 <div class='row'>
@@ -21,12 +27,6 @@
     </form>
 </div>
 
-<div id='cat-param-buttons'>
-    <button class='btn btn-success' id='new-cat-param' disabled=''>
-        <div class='fas fa-plus-circle'></div> {% trans "New Parameter" %}
-    </button>
-</div>
-
 <table class='table table-striped table-condensed' id='cat-param-table' data-toolbar='#cat-param-buttons'>
 </table>
 

InvenTree/templates/InvenTree/settings/currencies.html

@@ -13,29 +13,31 @@
 <table class='table table-striped table-condensed'>
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="INVENTREE_DEFAULT_CURRENCY" icon="fa-globe" %}
-    </tbody>
-</table>
 
-<table class='table table-striped table-condensed'>
-    <tbody>
         <tr>
+            <td></td>
             <th>{% trans "Base Currency" %}</th>
             <th>{{ base_currency }}</th>
         </tr>
         <tr>
-            <th colspan='2'>{% trans "Exchange Rates" %}</th>
+            <td></td>
+            <th colspan='4'>{% trans "Exchange Rates" %}</th>
         </tr>
         {% for rate in rates %}
         <tr>
-            <td>{{ rate.currency }}</td>
+            <td></td>
             <td>{{ rate.value }}</td>
+            <td>{{ rate.currency }}</td>
+            <td></td>
+            <td></td>
         </tr>
         {% endfor %}
         <tr>
+            <th></th>
             <th>
                 {% trans "Last Update" %}
             </th>
-            <td>
+            <td colspan="3">
                 {% if rates_updated %}
                 {{ rates_updated }}
                 {% else %}
@@ -44,7 +46,7 @@
                 <form action='{% url "settings-currencies-refresh" %}' method='post'>
                     <div id='refresh-rates-form'>
                         {% csrf_token %}
-                        <button type='submit' id='update-rates' class='btn btn-outline-secondary float-right'>{% trans "Update Now" %}</button>
+                        <button type='submit' id='update-rates' class='btn btn-primary float-right'>{% trans "Update Now" %}</button>
                     </div>
                 </form>
             </td>

InvenTree/templates/InvenTree/settings/login.html

@@ -17,7 +17,7 @@
         {% include "InvenTree/settings/setting.html" with key="LOGIN_ENABLE_PWD_FORGOT" icon="fa-info-circle" %}
         {% include "InvenTree/settings/setting.html" with key="LOGIN_MAIL_REQUIRED" icon="fa-info-circle" %}
         <tr>
-            <td>{% trans 'Signup' %}</td>
+            <th><h5>{% trans 'Signup' %}</h5></th>
             <td colspan='4'></td>
         </tr>
         {% include "InvenTree/settings/setting.html" with key="LOGIN_ENABLE_REG" icon="fa-info-circle" %}

InvenTree/templates/InvenTree/settings/part.html

@@ -9,8 +9,6 @@
 
 {% block content %}
 
-<h4>{% trans "Part Options" %}</h4>
-
 <table class='table table-striped table-condensed'>
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="PART_IPN_REGEX" %}
@@ -40,12 +38,17 @@
     </tbody>
 </table>
 
+<div class='panel-heading'>
+    <div class='d-flex flex-span'>
         <h4>{% trans "Part Import" %}</h4>
-
+        {% include "spacer.html" %}
+        <div class='btn-group' role='group'>
             <button class='btn btn-success' id='import-part'>
                 <span class='fas fa-plus-circle'></span> {% trans "Import Part" %}
             </button>        
-
+        </div>
+    </div>
+</div>
 
 <table class='table table-striped table-condensed'>
     <tbody>
@@ -53,15 +56,17 @@
     </tbody>
 </table>
 
-
-
+<div class='panel-heading'>
+    <span class='d-flex flex-span'>
         <h4>{% trans "Part Parameter Templates" %}</h4>
-
-<div id='param-buttons'>
+        {% include "spacer.html" %}
+        <div class='btn-group' role='group'>
             <button class='btn btn-success' id='new-param'>
                 <span class='fas fa-plus-circle'></span> {% trans "New Parameter" %}
             </button>
         </div>
+    </span>
+</div>
 
 <table class='table table-striped table-condensed' id='param-table' data-toolbar='#param-buttons'>
 </table>

InvenTree/templates/InvenTree/settings/setting.html

@@ -21,15 +21,13 @@
         </div>
         {% else %}
         <div id='setting-{{ setting.pk }}'>
-            <strong>
             <span id='setting-value-{{ setting.key.upper }}' fieldname='{{ setting.key.upper }}'>
                 {% if setting.value %}
-                {{ setting.value }}
+                <strong>{{ setting.value }}</strong>
                 {% else %}
-                <em>{% trans "No value set" %}</em>
+                <em style='color: #855;'>{% trans "No value set" %}</em>
                 {% endif %}
             </span>
-            </strong>
             {{ setting.units }}
         </div>
         {% endif %}

InvenTree/templates/InvenTree/settings/user.html

@@ -11,17 +11,17 @@
 {% trans "Account Settings" %}
 {% endblock %}
 
-{% block content %}
-{% mail_configured as mail_conf %}
-
-<div class='btn-group' style='float: right;'>
+{% block actions %}
 <div class='btn btn-primary' type='button' id='edit-user' title='{% trans "Edit User Information" %}'>
     <span class='fas fa-user-cog'></span> {% trans "Edit" %}
 </div>
 <div class='btn btn-primary' type='button' id='edit-password' title='{% trans "Change Password" %}'>
     <span class='fas fa-key'></span> {% trans "Set Password" %}
 </div>
-</div>
+{% endblock %}
+
+{% block content %}
+{% mail_configured as mail_conf %}
 
 <table class='table table-striped table-condensed'>
     <tr>
@@ -39,10 +39,14 @@
 </table>
 
 <div class='panel-heading'>
+    <div class='d-flex flex-span'>
         <h4>{% trans "Email" %}</h4>
+        {% include "spacer.html" %}
+    </div>
 </div>
 
-<div>
+<div class='row'>
+    <div class='col-sm-6'>
         {% if user.emailaddress_set.all %}
         <p>{% trans 'The following email addresses are associated with your account:' %}</p>
 
@@ -51,19 +55,25 @@
             <fieldset class="blockLabels">
 
             {% for emailaddress in user.emailaddress_set.all %}
+            <div>
                 <div class="ctrlHolder">
                     <label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%}">
                         
                         <input id="email_radio_{{forloop.counter}}" type="radio" name="email" {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{%endif %} value="{{emailaddress.email}}"/>
                         
-            {{ emailaddress.email }}
-                {% if emailaddress.verified %}
-                <span class="verified">{% trans "Verified" %}</span>
+                        {% if emailaddress.primary %}
+                        <b>{{ emailaddress.email }}</b>
                         {% else %}
-                <span class="unverified">{% trans "Unverified" %}</span>
+                        {{ emailaddress.email }}
                         {% endif %}
-                {% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
                     </label>
+                    {% if emailaddress.verified %}
+                    <span class='badge badge-right rounded-pill bg-success'>{% trans "Verified" %}</span>
+                    {% else %}
+                    <span class='badge badge-right rounded-pill bg-warning'>{% trans "Unverified" %}</span>
+                    {% endif %}
+                    {% if emailaddress.primary %}<span class='badge badge-right rounded-pill bg-primary'>{% trans "Primary" %}</span>{% endif %}
+                </div>
             </div>
             {% endfor %}
 
@@ -82,18 +92,28 @@
         </p>
 
         {% endif %}
-
+    </div>
+    <div class='col-sm-6'>
         {% if can_add_email %}
-        <br>
-        <h4>{% trans "Add Email Address" %}</h4>
+        <h5>{% trans "Add Email Address" %}</h5>
 
         <form method="post" action="{% url 'account_email' %}" class="add_email">
             {% csrf_token %}
-            {{ add_email_form|crispy }}
+
+            <label for="id_email" class=" requiredField">
+                E-mail<span class="asteriskField">*</span>
+            </label>
+            <div id="div_id_email" class="form-group input-group mb-3">
+                <div class='input-group-prepend'><span class='input-group-text'>@</span></div>
+                <input type="email" name="email" placeholder='{% trans "Enter e-mail address" %}' class="textinput textInput form-control" required="" id="id_email">
+                <div class='input-group-append'>
                     <button class="btn btn-primary" name="action_add" type="submit">{% trans "Add Email" %}</button>
+                </div>
+            </div>
+
         </form>
     {% endif %}
-    <br>
+    </div>
 </div>
 
 <div class='panel-heading'>
@@ -135,7 +155,9 @@
     </form>
     
     {% else %}
-    <p>{% trans 'You currently have no social network accounts connected to this account.' %}</p>
+    <div class='alert alert-block alert-warning'>
+        {% trans "There are no social network accounts connected to your InvenTree account" %}
+    </div>
     {% endif %}
 
     <br>
@@ -155,26 +177,26 @@
 
 <div class='row'>
 
+    <div class='col-sm-6'>
         <form action='{% url "settings-appearance" %}' method='post'>
             {% csrf_token %}
             <input name='next' type='hidden' value='{% url "settings" %}'>
-        <div class="col-sm-6" style="width: 200px;">
-            <div id="div_id_themes" class="form-group">
-                <div class="controls ">
-                    <select name='theme' class='select form-control'>
+            <label for='theme' class=' requiredField'>
+                {% trans "Select theme" %}
+            </label>
+            <div class='form-group input-group mb-3'>
+                <select id='theme' name='theme' class='select form-control'>
                     {% get_available_themes as themes %}
                     {% for theme in themes %}
                     <option value='{{ theme.key }}'>{{ theme.name }}</option>
                     {% endfor %}
                 </select>
+                <div class='input-group-append'>
+                    <input type="submit" value="{% trans 'Set Theme' %}" class="btn btn-primary">
                 </div>
             </div>
-        </div>
-        <div class="col-sm-6" style="width: auto;">
-            <input type="submit" value="{% trans 'Set Theme' %}" class="btn btn btn-primary">
-        </div>
         </form>
-
+    </div>
 </div>
 
 <div class='panel-heading'>
@@ -186,7 +208,10 @@
         <form action="{% url 'set_language' %}" method="post">
             {% csrf_token %}
             <input name="next" type="hidden" value="{% url 'settings' %}">
-            <div class="col-sm-6" style="width: 200px;"><div id="div_id_language" class="form-group"><div class="controls ">
+            <label for='language' class=' requiredField'>
+                {% trans "Select language" %}
+            </label>
+            <div class='form-group input-group mb-3'>
                 <select name="language" class="select form-control">
                     {% get_current_language as LANGUAGE_CODE %}
                     {% get_available_languages as LANGUAGES %}
@@ -204,10 +229,10 @@
                         </option>
                     {% endfor %}
                 </select>
-            </div></div></div>
-            <div class="col-sm-6" style="width: auto;">
+                <div class='input-group-append'>
                     <input type="submit" value="{% trans 'Set Language' %}" class="btn btn btn-primary">
                 </div>
+            </div>
     </form>
     </div>
     <div class="col-sm-6">

InvenTree/templates/panel.html

@@ -1,7 +1,14 @@
 <div class='panel panel-hidden' id='panel-{% block label %}name{% endblock %}'>
     {% block panel_heading %}
     <div class='panel-heading'>
+        <div class='d-flex flex-wrap'>
             <h4>{% block heading %}HEADING{% endblock %}</h4>
+            {% include "spacer.html" %}
+            <div class='btn-group' role='group'>
+                {% block actions %}
+                {% endblock %}
+            </div>
+        </div>
     </div>
     {% endblock %}
     {% block panel_content %}