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">
|
<nav aria-label="Alias log navigation">
|
||||||
<ul class="pagination">
|
<ul class="pagination">
|
||||||
<li class="page-item {% if page_id == 0 %}disabled{% endif %}">
|
<li class="page-item">
|
||||||
<a class="page-link"
|
<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>
|
href="{{ url_for('dashboard.alias_log', alias_id=alias_id, page_id=page_id-1) }}">Previous</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="page-item {% if last_page %}disabled{% endif %}">
|
<li class="page-item">
|
||||||
<a class="page-link" href="{{ url_for('dashboard.alias_log', alias_id=alias_id, page_id=page_id+1) }}">Next</a>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -400,13 +400,15 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<nav aria-label="Alias navigation">
|
<nav aria-label="Alias navigation">
|
||||||
<ul class="pagination">
|
<ul class="pagination">
|
||||||
<li class="page-item {% if page == 0 %}disabled{% endif %}">
|
<li class="page-item">
|
||||||
<a class="page-link"
|
<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>
|
href="{{ url_for('dashboard.index', page=page-1, query=query, sort=sort, filter=filter) }}">
|
||||||
|
Previous</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="page-item {% if last_page %}disabled{% endif %}">
|
<li class="page-item">
|
||||||
<a class="page-link"
|
<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>
|
href="{{ url_for('dashboard.index', page=page+1, query=query, sort=sort, filter=filter) }}">
|
||||||
|
Next</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
from dataclasses import dataclass
|
from dataclasses import dataclass
|
||||||
|
|
||||||
from flask import render_template, request, redirect, url_for, flash
|
from flask import render_template, request, redirect, url_for, flash
|
||||||
from flask_login import login_required, current_user
|
from flask_login import login_required, current_user
|
||||||
from sqlalchemy.orm import joinedload
|
from sqlalchemy.orm import joinedload
|
||||||
|
|
||||||
from app import alias_utils
|
from app import alias_utils
|
||||||
from app.api.serializer import get_alias_infos_with_pagination_v2
|
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.dashboard.base import dashboard_bp
|
||||||
from app.extensions import db
|
from app.extensions import db
|
||||||
from app.log import LOG
|
from app.log import LOG
|
||||||
|
@ -140,18 +140,22 @@ def index():
|
||||||
|
|
||||||
stats = get_stats(current_user)
|
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(
|
return render_template(
|
||||||
"dashboard/index.html",
|
"dashboard/index.html",
|
||||||
client_users=client_users,
|
client_users=client_users,
|
||||||
alias_infos=get_alias_infos_with_pagination_v2(
|
alias_infos=alias_infos,
|
||||||
current_user, page, query, sort, alias_filter
|
|
||||||
),
|
|
||||||
highlight_alias_id=highlight_alias_id,
|
highlight_alias_id=highlight_alias_id,
|
||||||
query=query,
|
query=query,
|
||||||
AliasGeneratorEnum=AliasGeneratorEnum,
|
AliasGeneratorEnum=AliasGeneratorEnum,
|
||||||
mailboxes=mailboxes,
|
mailboxes=mailboxes,
|
||||||
show_intro=show_intro,
|
show_intro=show_intro,
|
||||||
page=page,
|
page=page,
|
||||||
|
last_page=last_page,
|
||||||
sort=sort,
|
sort=sort,
|
||||||
filter=alias_filter,
|
filter=alias_filter,
|
||||||
stats=stats,
|
stats=stats,
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
--heading-color: #818cab;
|
--heading-color: #818cab;
|
||||||
--heading-background: #FFF;
|
--heading-background: #FFF;
|
||||||
--border: 1px solid rgba(0, 40, 100, 0.12);
|
--border: 1px solid rgba(0, 40, 100, 0.12);
|
||||||
--input-bg-color: var(--light);
|
--input-bg-color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] {
|
[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 %}
|
{% from "_formhelpers.html" import render_field, render_field_errors %}
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en" dir="ltr">
|
<html lang="en" dir="ltr" data-theme="{% if request.cookies.get('dark-mode') == 'true' %}dark{% endif %}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
|
@ -40,6 +40,8 @@
|
||||||
<script src="/static/assets/js/vendors/circle-progress.min.js"></script>
|
<script src="/static/assets/js/vendors/circle-progress.min.js"></script>
|
||||||
<script src="/static/assets/js/core.js"></script>
|
<script src="/static/assets/js/core.js"></script>
|
||||||
|
|
||||||
|
<script src="/static/assets/js/theme.js"></script>
|
||||||
|
|
||||||
<!-- ClipboardJS -->
|
<!-- ClipboardJS -->
|
||||||
<script src="/static/vendor/clipboard.min.js"></script>
|
<script src="/static/vendor/clipboard.min.js"></script>
|
||||||
|
|
||||||
|
|
|
@ -33,8 +33,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
|
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
|
||||||
Copyright © {{ YEAR }}
|
Copyright © {{ YEAR }}
|
||||||
<a href="https://simplelogin.io" target="_blank">SimpleLogin
|
<a href="https://simplelogin.io" target="_blank">SimpleLogin</a>.
|
||||||
</a>.
|
|
||||||
All rights reserved.
|
All rights reserved.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue