Merge pull request #186 from SibrenVasse/dark_flash

Frontend improvements

app/dashboard/templates/dashboard/alias_log.html

@@ -145,12 +145,13 @@
 
   <nav aria-label="Alias log navigation">
     <ul class="pagination">
-      <li class="page-item {% if page_id == 0 %}disabled{% endif %}">
-        <a class="page-link"
+      <li class="page-item">
+        <a class="btn btn-outline-secondary {% if page_id == 0 %}disabled{% endif %}"
            href="{{ url_for('dashboard.alias_log', alias_id=alias_id, page_id=page_id-1) }}">Previous</a>
       </li>
-      <li class="page-item {% if last_page %}disabled{% endif %}">
-        <a class="page-link" href="{{ url_for('dashboard.alias_log', alias_id=alias_id, page_id=page_id+1) }}">Next</a>
+      <li class="page-item">
+        <a class="btn btn-outline-secondary {% if last_page %}disabled{% endif %}"
+           href="{{ url_for('dashboard.alias_log', alias_id=alias_id, page_id=page_id+1) }}">Next</a>
       </li>
     </ul>
   </nav>

app/dashboard/templates/dashboard/index.html

@@ -400,13 +400,15 @@
     <div class="col">
       <nav aria-label="Alias navigation">
         <ul class="pagination">
-          <li class="page-item {% if page == 0 %}disabled{% endif %}">
-            <a class="page-link"
-               href="{{ url_for('dashboard.index', page=page-1, query=query, sort=sort, filter=filter) }}">Previous</a>
+          <li class="page-item">
+            <a class="btn btn-outline-secondary {% if page == 0 %}disabled{% endif %}"
+               href="{{ url_for('dashboard.index', page=page-1, query=query, sort=sort, filter=filter) }}">
+              Previous</a>
           </li>
-          <li class="page-item {% if last_page %}disabled{% endif %}">
-            <a class="page-link"
-               href="{{ url_for('dashboard.index', page=page+1, query=query, sort=sort, filter=filter) }}">Next</a>
+          <li class="page-item">
+            <a class="btn btn-outline-secondary {% if last_page %}disabled{% endif %}"
+               href="{{ url_for('dashboard.index', page=page+1, query=query, sort=sort, filter=filter) }}">
+              Next</a>
           </li>
         </ul>
       </nav>

app/dashboard/views/index.py

@@ -1,11 +1,11 @@
 from dataclasses import dataclass
-
 from flask import render_template, request, redirect, url_for, flash
 from flask_login import login_required, current_user
 from sqlalchemy.orm import joinedload
 
 from app import alias_utils
 from app.api.serializer import get_alias_infos_with_pagination_v2
+from app.config import PAGE_LIMIT
 from app.dashboard.base import dashboard_bp
 from app.extensions import db
 from app.log import LOG
@@ -140,18 +140,22 @@ def index():
 
     stats = get_stats(current_user)
 
+    alias_infos = get_alias_infos_with_pagination_v2(
+        current_user, page, query, sort, alias_filter
+    )
+    last_page = len(alias_infos) < PAGE_LIMIT
+
     return render_template(
         "dashboard/index.html",
         client_users=client_users,
-        alias_infos=get_alias_infos_with_pagination_v2(
-            current_user, page, query, sort, alias_filter
-        ),
+        alias_infos=alias_infos,
         highlight_alias_id=highlight_alias_id,
         query=query,
         AliasGeneratorEnum=AliasGeneratorEnum,
         mailboxes=mailboxes,
         show_intro=show_intro,
         page=page,
+        last_page=last_page,
         sort=sort,
         filter=alias_filter,
         stats=stats,

static/assets/css/darkmode.css

@@ -9,7 +9,7 @@
     --heading-color: #818cab;
     --heading-background: #FFF;
     --border: 1px solid rgba(0, 40, 100, 0.12);
-    --input-bg-color: var(--light);
+    --input-bg-color: var(--white);
 }
 
 [data-theme="dark"] {

static/assets/js/core.js

@@ -104,17 +104,4 @@ $(document).ready(function() {
       });
     });
   }
-
-  /** Dark mode controller */
-  if (store.get('dark-mode') === true) {
-    document.documentElement.setAttribute('data-theme', 'dark')
-  }
-  $('[data-toggle="dark-mode"]').on('click', function () {
-    if (store.get('dark-mode') === true) {
-      store.set('dark-mode', false);
-      return document.documentElement.setAttribute('data-theme', 'light')
-    }
-    store.set('dark-mode', true)
-    document.documentElement.setAttribute('data-theme', 'dark')
-  })
-});
+});

static/assets/js/theme.js

@@ -0,0 +1,40 @@
+let setCookie = function(name, value, days) {
+    if (!name || !value) return false;
+    let expires = '';
+    let secure = '';
+    if (location.protocol === 'https:') secure = 'Secure; ';
+
+    if (days) {
+      let date = new Date();
+      date.setTime(date.getTime() + (days * 24*60*60*1000));
+      expires = 'Expires=' + date.toUTCString() + '; ';
+    }
+
+    document.cookie = name + '=' + value + '; ' +
+                      expires +
+                      secure +
+                      'sameSite=Lax; ' +
+                      'domain=' + window.location.hostname + '; ' +
+                      'path=/';
+    return true;
+  }
+
+let getCookie = function(name) {
+  let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+  if (match) return match[2];
+}
+
+$(document).ready(function() {
+  /** Dark mode controller */
+  if (getCookie('dark-mode') === "true") {
+    document.documentElement.setAttribute('data-theme', 'dark');
+  }
+  $('[data-toggle="dark-mode"]').on('click', function () {
+    if (getCookie('dark-mode') === "true") {
+      setCookie('dark-mode', 'false', 30);
+      return document.documentElement.setAttribute('data-theme', 'light')
+    }
+    setCookie('dark-mode', 'true', 30);
+    document.documentElement.setAttribute('data-theme', 'dark')
+  })
+});

templates/base.html

@@ -1,7 +1,7 @@
 {% from "_formhelpers.html" import render_field, render_field_errors %}
 
 <!doctype html>
-<html lang="en" dir="ltr">
+<html lang="en" dir="ltr" data-theme="{% if request.cookies.get('dark-mode') == 'true' %}dark{% endif %}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport"
@@ -40,6 +40,8 @@
   <script src="/static/assets/js/vendors/circle-progress.min.js"></script>
   <script src="/static/assets/js/core.js"></script>
 
+  <script src="/static/assets/js/theme.js"></script>
+
   <!-- ClipboardJS -->
   <script src="/static/vendor/clipboard.min.js"></script>
 

templates/footer.html

@@ -33,8 +33,7 @@
       </div>
       <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
         Copyright © {{ YEAR }}
-        <a href="https://simplelogin.io" target="_blank">SimpleLogin
-        </a>.
+        <a href="https://simplelogin.io" target="_blank">SimpleLogin</a>.
         All rights reserved.
       </div>
     </div>