Merge #2632

2632: Interface cosmetics r=mergify[bot] a=ghostwheel42

## What type of PR?

enhancement, bug-fix

## What does this PR do?

- add default sort order to all tables
- repair sliders
- add quota in list
- improve mailu logo in roundcube webmail when using responsive skin
- show version in the footer (after login)

### Related issue(s)

- closes #2570
 

Co-authored-by: Alexander Graf <ghostwheel42@users.noreply.github.com>

core/admin/assets/assets/app.css

@@ -57,3 +57,9 @@ fieldset:disabled .form-control:disabled {
 .input-group-text {
   margin-right: 1em;
 }
+
+/* version string */
+.mailu-version {
+  font-size: 60%;
+  line-height: 0;
+}

core/admin/assets/assets/app.js

@@ -86,9 +86,12 @@ $('document').ready(function() {
         if (value_element.length) {
             value_element = $(value_element[0]);
             var infinity = $(this).data('infinity');
-            var step = $(this).attr('step');
+            var unit = $(this).data('unit');
+            if (typeof unit === 'undefined' || unit === false) {
+                unit=1;
+            }
             $(this).on('input', function() {
-                var num = (infinity && this.value == 0) ? '∞' : (this.value/step).toFixed(2);
+                var num = (infinity && this.value == 0) ? '∞' : (this.value/unit).toFixed(2);
                 if (num.endsWith('.00')) num = num.substr(0, num.length - 3);
                 value_element.text(num);
             }).trigger('input');

core/admin/mailu/configuration.py

@@ -18,6 +18,7 @@ DEFAULT_CONFIG = {
     'TEMPLATES_AUTO_RELOAD': True,
     'MEMORY_SESSIONS': False,
     'FETCHMAIL_ENABLED': True,
+    'MAILU_VERSION': 'unknown',
     # Database settings
     'DB_FLAVOR': None,
     'DB_USER': 'mailu',
@@ -157,6 +158,10 @@ class ConfigManager:
         self.config['HOSTNAME'] = hostnames[0]
         self.config['DEFAULT_SPAM_THRESHOLD'] = int(self.config['DEFAULT_SPAM_THRESHOLD'])
         self.config['PROXY_AUTH_WHITELIST'] = set(ipaddress.ip_network(cidr, False) for cidr in (cidr.strip() for cidr in self.config['PROXY_AUTH_WHITELIST'].split(',')) if cidr)
+        try:
+            self.config['MAILU_VERSION'] = open('/version', 'r').read()
+        except FileNotFoundError:
+            pass
 
         # update the app config
         app.config.update(self.config)

core/admin/mailu/ui/templates/admin/list.html

@@ -11,7 +11,7 @@
 {%- endblock %}
 
 {%- block content %}
-{%- call macros.table() %}
+{%- call macros.table(order='[[1,"asc"]]') %}
 <thead>
   <tr>
     <th data-orderable="false">{% trans %}Actions{% endtrans %}</th>
@@ -22,6 +22,7 @@
   {%- for admin in admins %}
   <tr>
     <td>
+      <a href="{{ url_for('.user_edit', user_email=admin.email) }}" title="{% trans %}Edit{% endtrans %}"><i class="fas fa-pencil-alt"></i></a>&nbsp;
       <a href="{{ url_for('.admin_delete', admin=admin.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
     </td>
     <td>{{ admin }}</td>

core/admin/mailu/ui/templates/alias/list.html

@@ -13,7 +13,7 @@
 {%- endblock %}
 
 {%- block content %}
-{%- call macros.table() %}
+{%- call macros.table(order='[[1,"asc"]]') %}
 <thead>
   <tr>
     <th data-orderable="false">{% trans %}Actions{% endtrans %}</th>

core/admin/mailu/ui/templates/alternative/list.html

@@ -13,7 +13,7 @@
 {%- endblock %}
 
 {%- block content %}
-{%- call macros.table() %}
+{%- call macros.table(order='[[1,"asc"]]') %}
 <thead>
   <tr>
     <th data-orderable="false">{% trans %}Actions{% endtrans %}</th>

core/admin/mailu/ui/templates/base.html

@@ -78,6 +78,11 @@
           <i class="fa fa-code-branch" aria-hidden="true"></i><span class="sr-only">fork</span>
           on <a href="https://github.com/Mailu/Mailu">Github</a>
         </span>
+        <div class="mailu-version">
+          <span class="fa-pull-right">
+            {{ config["MAILU_VERSION"] }}
+          </span>
+        </div>
       </footer>
     </div>
     <script src="{{ url_for('static', filename='vendor.js') }}"></script>

core/admin/mailu/ui/templates/domain/create.html

@@ -10,7 +10,7 @@
   {{ form.hidden_tag() }}
   {{ macros.form_field(form.name) }}
   {{ macros.form_fields((form.max_users, form.max_aliases)) }}
-  {{ macros.form_field(form.max_quota_bytes, step=50*10**6, max=50*10**9, data_infinity="true",
+  {{ macros.form_field(form.max_quota_bytes, step=50*10**6, max=50*10**9, data_infinity="true", data_unit=10**9,
       prepend='<span class="input-group-text"><span id="max_quota_bytes_value"></span>&nbsp;GB</span>') }}
   {{ macros.form_field(form.signup_enabled) }}
   {{ macros.form_field(form.comment) }}

core/admin/mailu/ui/templates/domain/list.html

@@ -19,6 +19,7 @@
     <th>{% trans %}Domain name{% endtrans %}</th>
     <th>{% trans %}Mailbox count{% endtrans %}</th>
     <th>{% trans %}Alias count{% endtrans %}</th>
+    <th>{% trans %}Quota{% endtrans %}</th>
     <th>{% trans %}Comment{% endtrans %}</th>
     <th>{% trans %}Enable sign-up{% endtrans %}</th>
     <th>{% trans %}Created{% endtrans %}</th>
@@ -46,6 +47,7 @@
     <td>{{ domain.name }}</td>
     <td data-order="{{ domain.users | count }}">{{ domain.users | count }} / {{ '∞' if domain.max_users == -1 else domain.max_users }}</td>
     <td data-order="{{ domain.aliases | count }}">{{ domain.aliases | count }} / {{ '∞' if domain.max_aliases == -1 else domain.max_aliases }}</td>
+    <td data-sort="{{ domain.max_quota_bytes }}">{{ (domain.max_quota_bytes | filesizeformat) if domain.max_quota_bytes else '∞' }}</td>
     <td>{{ domain.comment or '' }}</td>
     <td data-sort="{{ domain.signup_enabled }}">{% if domain.signup_enabled %}{% trans %}yes{% endtrans %}{% else %}{% trans %}no{% endtrans %}{% endif %}</td>
     <td data-order="{{ domain.created_at or '0000-00-00' }}">{{ domain.created_at | format_date }}</td>

core/admin/mailu/ui/templates/fetch/list.html

@@ -13,7 +13,7 @@
 {%- endblock %}
 
 {%- block content %}
-{%- call macros.table() %}
+{%- call macros.table(order='[[1,"asc"]]') %}
 <thead>
   <tr>
     <th data-orderable="false">{% trans %}Actions{% endtrans %}</th>

core/admin/mailu/ui/templates/manager/list.html

@@ -13,7 +13,7 @@
 {%- endblock %}
 
 {%- block content %}
-{%- call macros.table(order='[[2,"asc"]]') %}
+{%- call macros.table(order='[[1,"asc"]]') %}
 <thead>
   <tr>
     <th data-orderable="false">{% trans %}Actions{% endtrans %}</th>
@@ -24,6 +24,7 @@
 {%- for manager in domain.managers %}
 <tr>
   <td>
+    <a href="{{ url_for('.user_edit', user_email=manager.email) }}" title="{% trans %}Edit{% endtrans %}"><i class="fas fa-pencil-alt"></i></a>&nbsp;
     <a href="{{ url_for('.manager_delete', domain_name=domain.name, user_email=manager.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
   </td>
   <td>{{ manager }}</td>

core/admin/mailu/ui/templates/token/list.html

@@ -13,7 +13,7 @@
 {%- endblock %}
 
 {%- block content %}
-{%- call macros.table() %}
+{%- call macros.table(order='[[1,"asc"]]') %}
 <thead>
   <tr>
     <th data-orderable="false">{% trans %}Actions{% endtrans %}</th>

core/admin/mailu/ui/templates/user/create.html

@@ -21,7 +21,7 @@
   {%- endcall %}
 
   {%- call macros.card(_("Features and quotas"), theme="success") %}
-  {{ macros.form_field(form.quota_bytes, step=50*10**6, max=(max_quota_bytes or domain.max_quota_bytes or 50*10**9), data_infinity="true",
+  {{ macros.form_field(form.quota_bytes, step=50*10**6, max=(max_quota_bytes or domain.max_quota_bytes or 50*10**9), data_infinity="true", data_unit=10**9,
       prepend='<span class="input-group-text"><span id="quota_bytes_value"></span>&nbsp;GB</span>') }}
   {{ macros.form_field(form.enable_imap) }}
   {{ macros.form_field(form.enable_pop) }}

core/admin/mailu/ui/templates/user/list.html

@@ -13,7 +13,7 @@
 {%- endblock %}
 
 {%- block content %}
-{%- call macros.table() %}
+{%- call macros.table(order='[[2,"asc"]]') %}
 <thead>
   <tr>
     <th data-orderable="false">{% trans %}Actions{% endtrans %}</th>

webmails/roundcube/login/skins/elastic/mailu.css

@@ -9,3 +9,13 @@
   color: #fff;
   background-color: #45555c;
 }
+@media screen and (max-width: 480px) {
+  #taskmenu a.button-mailu {
+    background-position: 0px;
+    background-size: 40px 40px;
+  }
+  #taskmenu a.button-mailu.selected, #taskmenu a.button-mailu.selected:hover, #taskmenu a.button-mailu:hover {
+    color: #000;
+    background-color: #ececec;
+  }
+}