Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark Mode #1229

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Dark Mode #1229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions src/web_interface/static/css/line_numbering.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
113 changes: 109 additions & 4 deletions src/web_interface/templates/base.html
View file
Open in desktop
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,90 @@
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 :is(.table-hover td:hover, .list-group-item-action:hover, .dropdown-item:hover) {
background-color: var(--secondary) !important;
color: var(--text-color-dark) !important;
}
</style>
{% block styles %}{% endblock %}
</head>
Expand Down Expand Up @@ -221,6 +317,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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 %}