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

additional dark mode fixes #1313

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

additional dark mode fixes #1313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ee292c
fix: dark mode fix for dependency graph node text color
jstucke Dec 10, 2024
b31aeca
fix: dark mode fix for GraphQL search
jstucke Dec 11, 2024
a802b85
fix: add missing hljs dark mode classes
jstucke Dec 13, 2024
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
68 changes: 43 additions & 25 deletions src/web_interface/static/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ body.dark-mode a.nav-link.active {
border-color: var(--border-color-dark) var(--border-color-dark) var(--background-color-dark) !important;
}

body.dark-mode :is(pre, .pagination-page-info b, .line-number, .list-group-item-action,
body.dark-mode :is(pre:not(.CodeMirror-line), .pagination-page-info b, .line-number, .list-group-item-action,
.table:not(.table-borderless), .list-group-flush) {
color: var(--text-color-dark) !important;
background-color: var(--background-color-dark) !important;
Expand All @@ -163,7 +163,7 @@ body.dark-mode :is(a:link, a:visited, a:active) {
}

body.dark-mode :is(.navbar-light .navbar-nav > li > a, .list-group-item > a, .list-group-item > div > a,
.jstree-node > a, a.text-dark) {
.jstree-node > a, a.text-dark, .close) {
color: var(--text-color-dark) !important;
}

Expand All @@ -186,19 +186,11 @@ body.dark-mode :is(.table.table-borderless, .bg-light) {

/* d2h: text file diff */
body.dark-mode .d2h-del {
background-color: #644344 !important;
}

body.dark-mode del {
background-color: #682529 !important;
background-color: #6c3538 !important;
}

body.dark-mode .d2h-ins {
background-color: #4b644b !important;
}

body.dark-mode ins {
background-color: #2a5c2a !important;
background-color: rgb(36, 89, 55) !important;
}

body.dark-mode .d2h-tag {
Expand Down Expand Up @@ -263,39 +255,65 @@ body.dark-mode .nav-tabs {
}

/* hljs: highlight.js code highlighting */
/* The default theme is the GitHub light theme. Therefore, these color values mostly come from the GitHub dark theme */
body.dark-mode .hljs {
background: inherit;
color: var(--text-color-dark);
}

body.dark-mode .hljs-string {
color: var(--element-color-primary-light);
body.dark-mode :is(.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable,
.hljs-type, .hljs-variable.language_, .invalid-feedback) {
color: #ff7b72;
}

body.dark-mode :is(.hljs-attr, .hljs-number, .hljs-meta, .hljs-literal) {
color: var(--link-color-dark);
body.dark-mode :is(.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_) {
color: #d2a8ff;
}

body.dark-mode :is(.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator,
.hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable) {
color: #79c0ff;
}

body.dark-mode :is(.hljs-title, .hljs-title.class_) {
color: #ad80ff;
body.dark-mode :is(.hljs-meta .hljs-string, .hljs-regexp, .hljs-string) {
color: #a5d6ff;
}

body.dark-mode :is(.hljs-keyword, .hljs-variable, .invalid-feedback) {
color: #ff5565;
body.dark-mode :is(.hljs-built_in, .hljs-symbol) {
color: #ffa657;
}

body.dark-mode .hljs-built_in {
color: #ffc863;
body.dark-mode :is(.hljs-code, .hljs-comment, .hljs-formula) {
color: #8b949e;
}

body.dark-mode .hljs-name {
color: #6aff8e;
body.dark-mode :is(.hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag) {
color: #7ee787;
}

body.dark-mode .close {
body.dark-mode :is(.hljs-subst, .hljs-emphasis, .hljs-strong) {
color: var(--text-color-dark);
}

body.dark-mode .hljs-section {
color: #1f6feb;
font-weight: 700;
}

body.dark-mode .hljs-bullet {
color: #f2cc60;
}

body.dark-mode :is(.hljs-addition, ins) {
color: #aff5b4;
background-color: #033a16;
}

body.dark-mode :is(.hljs-deletion, del) {
color: #ffdcd7;
background-color: #67060c;
}

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... */
Expand Down
31 changes: 31 additions & 0 deletions src/web_interface/static/js/dark_mode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
const lightTextColor = "#212529";
const darkTextColor = "#ccc";
const lightLineColor = "#f8f9fa";
const darkLineColor = "#343a40";

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();
}
});

function getTextColor() {
return isDark() ? darkTextColor : lightTextColor;
}

function getLineColor() {
return isDark() ? darkLineColor : lightLineColor;
}

function isDark() {
return (
document.getElementById("darkModeSwitch").checked ||
localStorage.getItem('darkMode') === 'enabled'
);
}
104 changes: 66 additions & 38 deletions src/web_interface/static/js/dependency_graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
var allConnectedNodes;
var allNodes;
var dataset;
var graphOptions;
var groupOptions;
var highlightActive = false;
var network;
let allConnectedNodes;
let allNodes;
let dataset;
let graphOptions;
let groupOptions;
let highlightActive = false;
let network;

function dependencyGraph(nodes, edges, groups, colors) {
let graphCanvas = $("#dependencyGraph")[0];
Expand All @@ -15,24 +15,27 @@ function dependencyGraph(nodes, edges, groups, colors) {
};

// map group names to colors --> {'mime/type': {color: '#...'}}
// jshint ignore:start
groupOptions = groups.reduce((obj, curr, i) => {return {...obj, [curr]: {color: colors[i]}}}, {});
// jshint ignore:end
groupOptions = groups.reduce(
(obj, curr, i) => {
return {...obj, [curr]: {color: colors[i]}};
}, {}
);

// set the graph options. Most of this is physics model initialization
graphOptions = {
nodes: {
shape: 'dot',
font: {
size: 18,
face: 'Tahoma'
}
face: 'Tahoma',
color: getTextColor(),
},
},
groups: groupOptions,
edges: {
color: { inherit: true },
color: {inherit: true},
width: 0.5,
arrows: { to: true },
arrows: {to: true},
},
interaction: {
dragNodes: false,
Expand All @@ -52,7 +55,7 @@ function dependencyGraph(nodes, edges, groups, colors) {
timestep: 0.05,
adaptiveTimestep: true,
stabilization: {
enabled: false
enabled: false
}
},
layout: {
Expand Down Expand Up @@ -86,12 +89,12 @@ function filterNodesList() {
try {
// the filter input supports regex
var expr = new RegExp($(this).val(), 'i');
} catch(SyntaxError) {
} catch (SyntaxError) {
// invalid search
return;
}

$("#nodesList > div").each(function(){
$("#nodesList > div").each(function () {
// hide all nodes in the list that are filtered out, show the rest
let mime = $(this).find('a')[0].dataset.nodemime;
let name = $(this).find('a')[0].dataset.nodelabel;
Expand All @@ -114,7 +117,15 @@ function drawNodesList() {
let node = dataset.nodes.get(nodeId);
let color = groupOptions[node.group].color;
if (node.label !== undefined) {
nodesList.append('<div><span style="color: ' + color + ';">&#9679;</span>&nbsp;<a href="#" class="text-dark" data-nodeid="' + node.id + '" data-nodelabel="' + node.label + '" data-nodemime="' + node.group + '" style="text-decoration: none;">' + node.label + '</a></div>');
nodesList.append(`
<div>
<span style="color: ${color};">&#9679;</span>&nbsp;
<a href="#" class="text-dark" data-nodeid="${node.id}" data-nodelabel="${node.label}"
data-nodemime="${node.group}" style="text-decoration: none;">
${node.label}
</a>
</div>
`);
}
}
}
Expand All @@ -126,7 +137,7 @@ function drawDetails() {

// check if something is selected
let selected = network.getSelectedNodes();
if (selected.length == 0) {
if (selected.length === 0) {
details.append('<div>No node selected</div>');
return;
}
Expand All @@ -146,21 +157,21 @@ function drawDetails() {
</div>
<div>
<span class="font-weight-bold">Full:&nbsp;</span>${node.full_file_type}
</div>`
);
</div>
`);
}

function drawNetwork(dataset, graphOptions, canvas) {
// create the network on an empty canvas
let network = new vis.Network(canvas, dataset, graphOptions, main = "Dependency Graph");
allNodes = dataset.nodes.get({ returnType: "Object" });
let network = new vis.Network(canvas, dataset, graphOptions, main = "Dependency Graph");
allNodes = dataset.nodes.get({returnType: "Object"});

// get a decent stabilization before starting a 60 second timeout that
// get a decent stabilization before starting a 60-second timeout that
// aborts the physics simulation to preserve resources
network.on("stabilizationIterationsDone", function (params) {
setTimeout(() => {
network.stopSimulation();
network.setOptions( { physics: false } );
network.setOptions({physics: false});
}, 60000);
});
network.stabilize(200);
Expand Down Expand Up @@ -189,11 +200,11 @@ function neighbourhoodHighlight(params) {
// if something is selected:
if (params.nodes.length > 0) {
highlightActive = true;
var i, j;
var selectedNode = params.nodes[0];
var degrees = 1;
let i, j;
const selectedNode = params.nodes[0];
const degrees = 1;
network.focus(selectedNode, {scale: 0.4, animation: {easingFunction: 'easeInOutQuad'}});

// mark all nodes as hard to read.
for (let nodeId in allNodes) {
allNodes[nodeId].color = "rgba(200,200,200,0.5)";
Expand All @@ -202,10 +213,10 @@ function neighbourhoodHighlight(params) {
allNodes[nodeId].label = undefined;
}
}
var connectedNodes = network.getConnectedNodes(selectedNode);

const connectedNodes = network.getConnectedNodes(selectedNode);
allConnectedNodes = [];

// get the second degree nodes
for (i = 1; i < degrees; i++) {
for (j = 0; j < connectedNodes.length; j++) {
Expand All @@ -214,27 +225,27 @@ function neighbourhoodHighlight(params) {
);
}
}

// all second degree nodes get a different color and their label back
for (i = 0; i < allConnectedNodes.length; i++) {
allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
allNodes[allConnectedNodes[i]].label =
allNodes[allConnectedNodes[i]].hiddenLabel;
allNodes[allConnectedNodes[i]].hiddenLabel;
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
}
}

// all first degree nodes get their own color and their label back
for (i = 0; i < connectedNodes.length; i++) {
allNodes[connectedNodes[i]].color = undefined;
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
allNodes[connectedNodes[i]].label =
allNodes[connectedNodes[i]].hiddenLabel;
allNodes[connectedNodes[i]].hiddenLabel;
allNodes[connectedNodes[i]].hiddenLabel = undefined;
}
}

// the main node gets its own color and its label back.
allNodes[selectedNode].color = undefined;
if (allNodes[selectedNode].hiddenLabel !== undefined) {
Expand All @@ -253,7 +264,7 @@ function neighbourhoodHighlight(params) {
highlightActive = false;
}
// transform the object into an array
var updateArray = [];
let updateArray = [];
for (let nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
Expand All @@ -265,3 +276,20 @@ function neighbourhoodHighlight(params) {
drawNodesList();
drawDetails();
}

function updateNodeTextColor() {
console.log("changing color");
Object.entries(network.body.nodes).forEach(
([_, node]) => {
node.setOptions({
font: {
color: getTextColor(),
}
});
}
);
}

$(document).ready(function () {
document.getElementById("darkModeSwitch").addEventListener("change", updateNodeTextColor);
});
Loading
Loading