Merge pull request #186 from SibrenVasse/dark_flash
Frontend improvements
This commit is contained in:
commit
d97b52184e
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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"] {
|
||||
|
|
|
@ -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')
|
||||
})
|
||||
});
|
||||
});
|
||||
|
|
40
static/assets/js/theme.js
Normal file
40
static/assets/js/theme.js
Normal file
|
@ -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')
|
||||
})
|
||||
});
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue