mirror of
https://github.com/Part-DB/Part-DB-server.git
synced 2025-06-21 01:25:55 +02:00
Added an toggle to activate a simple dark mode.
The dark mode is only available on browsers that support mix-blend-mode. There are some quirks with hover images...
This commit is contained in:
Jan Böhmer
parent
6882f91ef2
commit
c64e4fe3d6
5 changed files with 52 additions and 6 deletions
|
|
@ -165,7 +165,7 @@ showing the sidebar (on devices with md or higher)
|
|||
.toast-container {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
z-index: 1;
|
||||
z-index: 3000; /* Over darkmode layer for correct colors! */
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
|
|
@ -347,7 +347,6 @@ btn-xs
|
|||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
|
||||
.hoverpic:hover {
|
||||
|
|
@ -356,6 +355,10 @@ btn-xs
|
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.darkmode--activated .hoverpic:hover {
|
||||
background: black;
|
||||
}
|
||||
|
||||
|
||||
.thumbnail-sm {
|
||||
max-height: 100px;
|
||||
|
|
@ -790,3 +793,11 @@ table.dataTable {
|
|||
font-size: 17.5px;
|
||||
border-left: 5px solid #eee;
|
||||
}
|
||||
|
||||
.darkmode-layer {
|
||||
z-index: 2020;
|
||||
}
|
||||
|
||||
.darkmode--activated img {
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
|
@ -88,6 +88,8 @@ require('../css/tagsinput.css');
|
|||
//Tristate checkbox support
|
||||
require('./jquery.tristate.js');
|
||||
|
||||
require('darkmode-js');
|
||||
|
||||
require('../ts_src/ajax_ui');
|
||||
import {ajaxUI} from "../ts_src/ajax_ui";
|
||||
|
||||
|
|
@ -97,6 +99,26 @@ window.ajaxUI = ajaxUI;
|
|||
require('../ts_src/event_listeners');
|
||||
|
||||
|
||||
|
||||
//Register darkmode (we must do it here, TS does not support ES6 constructor...
|
||||
try {
|
||||
//The browser needs to support mix blend mode
|
||||
if(typeof window.getComputedStyle(document.body).mixBlendMode !== 'undefined') {
|
||||
const darkmode = new Darkmode();
|
||||
|
||||
$(document).on("ajaxUI:start ajaxUI:reload", function () {
|
||||
//Show darkmode toggle to user
|
||||
$('#toggleDarkmodeContainer, #toggleDarkmodeSeparator').removeAttr('hidden');
|
||||
$('#toggleDarkmode').prop('checked', darkmode.isActivated());
|
||||
$('#toggleDarkmode').change(function () {
|
||||
darkmode.toggle();
|
||||
});
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
//Ignore all errors (for compatibiltiy with old browsers)
|
||||
}
|
||||
|
||||
//Start AjaxUI AFTER all event has been registered
|
||||
$(document).ready(ajaxUI.start());
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
"bootswatch": "^4.3.1",
|
||||
"copy-webpack-plugin": "^5.0.4",
|
||||
"corejs-typeahead": "^1.2.1",
|
||||
"darkmode-js": "^1.5.3",
|
||||
"datatables.net-bs4": "^1.10.19",
|
||||
"datatables.net-buttons-bs4": "^1.5.4",
|
||||
"datatables.net-colreorder-bs4": "^1.5.1",
|
||||
|
|
|
|||
|
|
@ -58,13 +58,13 @@
|
|||
{% if true %}
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="search_manufacturer" name="search_manufacturer" value="true">
|
||||
<label for="search_manufacturer" class="custom-control-label">{% trans %}manufacturer.label{% endtrans %}</label>
|
||||
<label for="search_manufacturer" class="custom-control-label">{% trans %}manufacturer.label{% endtrans %}</label>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if true %}
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="search_footprint" name="search_footprint" value="true">
|
||||
<label for="search_footprint" class="custom-control-label">{% trans %}footprint.label{% endtrans %}</label>
|
||||
<input type="checkbox" class="custom-control-input" id="search_footprint" name="search_footprint" value="true">
|
||||
<label for="search_footprint" class="custom-control-label">{% trans %}footprint.label{% endtrans %}</label>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="custom-control custom-checkbox">
|
||||
|
|
@ -104,8 +104,15 @@
|
|||
{% else %}
|
||||
<a class="dropdown-item" href="{{ path('login', {'_target_path': app.request.pathinfo | loginPath}) }}" id="login-link"><i class="fa fa-sign-in-alt fa-fw" aria-hidden="true"></i> {% trans %}user.login{% endtrans %}</a>
|
||||
{% endif %}
|
||||
<li role="separator" class="dropdown-divider" id="toggleDarkmodeSeparator" hidden></li>
|
||||
<div class="px-4 px-3" id="toggleDarkmodeContainer" hidden>
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" id="toggleDarkmode">
|
||||
<label class="custom-control-label" for="toggleDarkmode">{% trans %}ui.toggle_darkmode{% endtrans %}</label>
|
||||
</div>
|
||||
</div>
|
||||
<li role="separator" class="dropdown-divider"></li>
|
||||
<a class="dropdown-item disabled" href="#">{% trans %}user.language_select{% endtrans %}</a>
|
||||
<h6 class="dropdown-header">{% trans %}user.language_select{% endtrans %}</h6>
|
||||
<a class="dropdown-item" data-no-ajax href="{{ path(app.request.attributes.get('_route'),
|
||||
app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}">
|
||||
{% trans %}language.english{% endtrans %}</a>
|
||||
|
|
|
|||
|
|
@ -2275,6 +2275,11 @@ d@1, d@^1.0.1:
|
|||
es5-ext "^0.10.50"
|
||||
type "^1.0.1"
|
||||
|
||||
darkmode-js@^1.5.3:
|
||||
version "1.5.3"
|
||||
resolved "https://registry.yarnpkg.com/darkmode-js/-/darkmode-js-1.5.3.tgz#89a5b72681d58a9b11b079fdeba7abc7c7b75ee9"
|
||||
integrity sha512-Az6X5E6RJ72TQls1v3wIWuknb6J7XjRReMMOpMM8SXXbeO4bxGKJeJDtf7GdcIgmiTQ/cPqqObpr7LRzsAJDow==
|
||||
|
||||
datatables.net-bs4@^1.10.15, datatables.net-bs4@^1.10.19:
|
||||
version "1.10.20"
|
||||
resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.10.20.tgz#beff1c8d3510826c0678eaa055270607c0e53882"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue