Skip to content

Commit

Permalink
feat: dark mode for webinterface
Browse files Browse the repository at this point in the history
  • Loading branch information
@jstucke
jstucke committed Nov 25, 2024
1 parent 28035d0 commit 868a725
Show file tree
Hide file tree
Showing 9 changed files with 527 additions and 36 deletions.
4 changes: 0 additions & 4 deletions src/web_interface/static/css/line_numbering.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
#preview-div pre{
border: 1px solid white;
}

#preview-div pre .line-number {
color:black;
display:block;;
Expand Down
365 changes: 365 additions & 0 deletions src/web_interface/static/fact_logo_invertible.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 20 additions & 13 deletions src/web_interface/static/js/system_health.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
const BOOTSTRAP_DANGER_COLOR = "#dc3545";
const BOOTSTRAP_PRIMARY_COLOR = "#007bff";

function change_button(button_id) {
element = document.getElementById(button_id);
["fa-caret-down", "fa-caret-up"].forEach(class_name => element.classList.toggle(class_name));
Expand Down Expand Up @@ -86,23 +83,33 @@ function updatePluginCard(pluginName, pluginData) {
const statsElement = document.getElementById(`${pluginName}-stats`);
if (pluginData.active > 0) {
activeIndicatorElement.classList.add("fa-spin");
activeIndicatorElement.style.color = BOOTSTRAP_PRIMARY_COLOR;
activeElement.style.color = BOOTSTRAP_PRIMARY_COLOR;
activeIndicatorElement.classList.remove("text-muted");
activeIndicatorElement.classList.add("text-primary");
activeElement.classList.remove("text-muted");
activeElement.classList.add("text-primary");
} else {
activeIndicatorElement.classList.remove("fa-spin");
activeIndicatorElement.style.color = "darkgrey";
activeElement.style.color = "darkgrey";
activeIndicatorElement.classList.remove("text-primary");
activeIndicatorElement.classList.add("text-muted");
activeElement.classList.remove("text-primary");
activeElement.classList.add("text-muted");
}
activeElement.innerText = pluginData.active.toString();
if (pluginData.queue > 100) {
queueIndicatorElement.style.color = BOOTSTRAP_DANGER_COLOR;
queueElement.style.color = BOOTSTRAP_DANGER_COLOR;
queueIndicatorElement.classList.remove("text-muted");
queueIndicatorElement.classList.add("text-danger");
queueElement.classList.remove("text-muted");
queueElement.classList.add("text-danger");
} else if (pluginData.queue > 0) {
queueIndicatorElement.style.color = "black";
queueElement.style.color = "black";
queueIndicatorElement.classList.remove("text-muted");
queueIndicatorElement.classList.remove("text-danger");
queueElement.classList.remove("text-muted");
queueElement.classList.remove("text-danger");
} else {
queueIndicatorElement.style.color = "darkgrey";
queueElement.style.color = "darkgrey";
queueIndicatorElement.classList.remove("text-danger");
queueIndicatorElement.classList.add("text-muted");
queueElement.classList.remove("text-danger");
queueElement.classList.add("text-muted");
}
queueElement.innerText = pluginData.queue.toString();
outQueueElement.innerText = pluginData.out_queue.toString();
Expand Down
131 changes: 127 additions & 4 deletions src/web_interface/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,30 @@

initQuickSearch();
});

function toggleDarkMode() {
let isDark = document.body.classList.toggle('dark-mode');
localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
}
document.addEventListener('DOMContentLoaded', (event) => {
let isDark = (localStorage.getItem('darkMode') || 'disabled') === 'enabled';
document.getElementById("darkModeSwitch").checked = isDark;
if (isDark) {
toggleDarkMode();
}
});
</script>

{% block head %}
{% endblock %}

<style>
a:link{
color:#2b669a;
text-decoration:none;
a {
color: inherit;
}
a:link {
color: #2b669a;
text-decoration: none;
}
.clickable {
cursor:pointer;
Expand Down Expand Up @@ -116,9 +131,108 @@
width: 100%;
height: 100%;
font-size: 14px;
color: #515151;
overflow-wrap: anywhere;
}
:root {
--background-color-light: #fff;
--text-color-light: #212529;
--background-color-dark: #2e3339;
--border-color-dark: #454d55;
--background-color-dark-element: #343a40;
--text-color-dark: #ccc;
}
body {
background-color: var(--background-color-light);
color: var(--text-color-light);
}
.dark-mode {
background-color: var(--background-color-dark);
color: var(--text-color-dark);
}
body.dark-mode :is(.list-group-item, .dropdown-item) {
color: var(--text-color-dark) !important;
border-color: var(--border-color-dark) !important;
background-color: inherit !important;
}
body.dark-mode a.nav-link.active {
color: inherit !important;
background-color: inherit !important;
border-color: var(--border-color-dark) var(--border-color-dark) var(--background-color-dark) !important;
}
body.dark-mode :is(pre, a, a:link, .pagination-page-info b) {
color: var(--text-color-dark) !important;
}
body.dark-mode :is(div.card, .dropdown-menu, select, input, .list-group-item-action, .modal-content,
.table:not(.table-borderless), a.page-link, span.page-link, .btn-light, textarea) {
color: var(--text-color-dark) !important;
background-color: var(--background-color-dark-element) !important;
border: 1px solid var(--border-color-dark) !important;
}
body.dark-mode :is(.list-group-flush, .table.table-borderless, .bg-light) {
color: var(--text-color-dark) !important;
background-color: var(--background-color-dark-element) !important;
}
body.dark-mode :is(th) {
color: inherit !important;
background-color: inherit !important;
}
body.dark-mode :is(.input-group-text, .thead-light, .table-head-light) {
background-color: var(--secondary) !important;
color: var(--text-color-dark) !important;
border-color: var(--border-color-dark) !important;
}
body.dark-mode :is(.table-primary, .list-group-item-primary) {
background-color: #385779 !important;
color: #7ebcff !important;
}
body.dark-mode :is(.alert-success, .table-success, .table-success > td) {
background-color: #405945 !important;
color: #d4edda !important;
}
body.dark-mode :is(.alert-warning, .table-warning, .table-warning > td) {
background-color: #938457 !important;
color: #ffe8a4 !important;
}
body.dark-mode :is(.alert-danger, .table-danger, .table-danger > td) {
background-color: #774c4e !important;
color: #f5c6cb !important;
}
body.dark-mode :is(.table-bordered td, .table-bordered th, .border-light, .table td, .table th, .border,
.form-control) {
border-color: var(--border-color-dark) !important;
}
body.dark-mode .nav-tabs {
border-bottom: 1px solid var(--border-color-dark) !important;
}
body.dark-mode .hljs {
background: inherit;
color: var(--text-color-dark);
}
body.dark-mode .hljs-string {
color: #58c5b2;
}
body.dark-mode .jumbotron {
background-color: #343a40;
}
body.dark-mode .close {
color: var(--text-color-dark);
}
body.dark-mode input[type="checkbox"] {
/* This is a bit of a hack: For whatever reason, you can't change the background color of checkboxes.
We can invert the color with CSS, though... */
filter: invert(75%) hue-rotate(180deg);
}
body.dark-mode :is(.table-hover td:hover, .table-hover th:hover, .table-hover tr:hover,
.list-group-item-action:hover, .dropdown-item:hover) {
background-color: var(--secondary) !important;
color: var(--text-color-dark) !important;
}
body.dark-mode .li-hover {
box-shadow: 0 0 0 rgba(0,123,255,.15);
}
body.dark-mode .li-hover:hover {
box-shadow: 5px 5px 20px rgba(0,123,255,.35);
}
</style>
{% block styles %}{% endblock %}
</head>
Expand Down Expand Up @@ -223,6 +337,15 @@
{% endfor %}
</ul>

{# dark mode switch #}
<div class="custom-control custom-switch">
<i class="far fa-sun" style="color: #fff; margin-left: -38px; margin-right: 38px;"></i>
<input type="checkbox" class="custom-control-input" id="darkModeSwitch" onchange="toggleDarkMode()">
<label class="custom-control-label" for="darkModeSwitch">
<i class="fas fa-moon" style="color: #fff;"></i>
</label>
</div>

<!-- Navbar Quick Search Input -->
<div id="quick_search_div" class="nav navbar-nav ml-md-auto d-block">
<div class="input-group mr-sm-2" style="z-index: 100;" >
Expand Down
2 changes: 1 addition & 1 deletion src/web_interface/templates/generic_view/nice_fo_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h6>{{ number_of_unanalyzed_files }} files not analyzed yet</h6>
</a>
{% endif %}
{% for fo in fo_list %}
<div class="list-group-item list-group-item-action border-top">
<div class="list-group-item list-group-item-action">
{{ file_information_span(fo, root_uid, selected_analysis, filename_only) }}
</div>
{% endfor %}
Expand Down
6 changes: 3 additions & 3 deletions src/web_interface/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

<div class="p-0 m-2">
<center>
<img width="100%" height="auto" src="{{ url_for('static', filename='fact_logo.png') }}" style="max-width: 445px;">
<img width="100%" height="auto" src="{{ url_for('static', filename='fact_logo_invertible.svg') }}" style="max-width: 445px;">

<br /><br />

Expand Down Expand Up @@ -124,7 +124,7 @@ <h4 class="card-title mb-3">Latest Comments</h4>
{{ comment.comment }}
</div>
<div class="footnote">
<span style="color: #000;">{{ comment.author }}</span> ‒ <span class="text-muted">{{ comment.time | int | nice_unix_time }}</span>
{{ comment.author }} ‒ <span class="text-muted">{{ comment.time | int | nice_unix_time }}</span>
</div>
</div>
</a>
Expand All @@ -143,7 +143,7 @@ <h4 class="card-title mb-3">Latest Comparisons</h4>
<ul class="list-group list-group-flush px-0">
{% for id, hids, submission_date in latest_comparison_results %}
<li class="list-group-item bg-light p-2 clickable li-hover" onclick="location.href='/compare/{{ id }}'">
<a href="/compare/{{ id }}" style="color: #515151;">
<a href="/compare/{{ id }}">
<div class="p-1" style="width: 100%; height: 100%; font-size: 14px;">
{% for uid in hids %}
{{ hids[uid] }}
Expand Down
6 changes: 3 additions & 3 deletions src/web_interface/templates/show_analysis.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ <h5 class="modal-title">Add analysis to file</h5>
</button>

<div id="summary-div">
<div class="mb-3" id="loading-summary-gif" style="display: none; border: 1px solid #dddddd; padding: 5px; text-align: center">
<div class="mb-3 border" id="loading-summary-gif" style="display: none; padding: 5px; text-align: center">
<img src="{{ url_for("static", filename = "Pacman.gif") }}" alt="loading gif">
<p>Loading summary for included files ..</p>
</div>
Expand Down Expand Up @@ -354,7 +354,7 @@ <h5 class="modal-title">Add analysis to file</h5>
<button type="button" class="btn btn-primary btn-sm" onclick="load_preview();">Update</button>
</div>
</div>
<div id="preview-loading-gif" style="display: block; border: 1px solid #dddddd; padding: 5px; text-align: center">
<div id="preview-loading-gif" class="border" style="display: block; padding: 5px; text-align: center">
<img src="{{ url_for('static', filename = 'Pacman.gif') }}" alt="loading...">
</div>
<div id="preview-content" class="m-0 mt-2 p-0"></div>
Expand Down Expand Up @@ -411,7 +411,7 @@ <h5 class="modal-title">Add analysis to file</h5>
<div>{{ comment.time|int|nice_unix_time }}</div>
</td>
<td width="80%">
<span style="font-family: monospace; color: #000; font-size: 14px">
<span style="font-family: monospace; font-size: 14px">
{{ comment.comment | urlize }}
</span>
</td>
Expand Down
12 changes: 6 additions & 6 deletions src/web_interface/templates/system_health.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,19 +84,19 @@ <h6 class="card-subtitle mb-2 text-muted">{{ version }}</h6>
<td style="width: 46px;">{{ threads }}</td>

<td style="width: 30px;" data-toggle="tooltip" data-placement="bottom" title="Currently processing">
<i class="fas fa-cog" style="color: darkgrey" id="{{ plugin_name }}-active-indicator"></i>
<i class="fas fa-cog text-muted" id="{{ plugin_name }}-active-indicator"></i>
</td>
<td style="width: 46px;" id="{{ plugin_name }}-active"></td>
<td class="text-muted" style="width: 46px;" id="{{ plugin_name }}-active"></td>

<td style="width: 20px;" data-toggle="tooltip" data-placement="bottom" title="Pending tasks">
<i class="fas fa-sign-in-alt" style="color: darkgrey" id="{{ plugin_name }}-queue-indicator"></i>
<i class="fas fa-sign-in-alt text-muted" id="{{ plugin_name }}-queue-indicator"></i>
</td>
<td id="{{ plugin_name }}-queue"></td>
<td class="text-muted" id="{{ plugin_name }}-queue"></td>

<td style="width: 20px;" data-toggle="tooltip" data-placement="bottom" title="Finished tasks ready for collection">
<i class="fas fa-sign-out-alt" style="color: darkgrey" id="{{ plugin_name }}-out-queue-indicator"></i>
<i class="fas fa-sign-out-alt text-muted" id="{{ plugin_name }}-out-queue-indicator"></i>
</td>
<td id="{{ plugin_name }}-out-queue"></td>
<td class="text-muted" id="{{ plugin_name }}-out-queue"></td>
</tr>
</table>

Expand Down
4 changes: 2 additions & 2 deletions src/web_interface/templates/upload/upload_successful.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="alert alert-success mt-4">
<h3 class="alert-heading">Upload Successful</h3>
<hr />
The analysis results will be available <a href="/analysis/{{ uid | safe }}">here</a> when ready.
You can monitor the analysis and unpacking progress <a href="/system_health">here</a>.
The analysis results will be available <a href="/analysis/{{ uid | safe }}"><i class="fas fa-arrow-up-right-from-square"></i> here</a> when ready.
You can monitor the analysis and unpacking progress <a href="/system_health"><i class="fas fa-arrow-up-right-from-square"></i> here</a>.
</div>
{% endblock %}

0 comments on commit 868a725

Please sign in to comment.