Glassvision/IfcOpenShell
1
0
Fork 0
mirror of https://github.com/IfcOpenShell/IfcOpenShell.git synced 2026-09-16 21:42:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

add css variables and switching themes for gantt page

Browse Source
This commit is contained in:
Ziad-I
2024-07-20 20:16:55 +03:00
committed by Dion Moult
parent c852e624e9
commit 8e6d13242e
3 changed files with 211 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
+178 -139
View File
@@ -1,19 +1,65 @@
:root { :root {
--font-family: Arial, sans-serif;
--margin-small: 0.625rem;
--margin-medium: 1.25rem;
--margin-large: 2.5rem;
--padding-small: 0.125rem;
--padding-medium: 1rem;
--font-size-small: 1rem;
--font-size-large: 1.2rem;
--logo-height: 2.5rem;
--folder-collapse-font-size: 0.75rem;
--folder-collapse-font-family: Courier, "Courier New", monospace;
--box-shadow: 0 0 0.7rem #5f5f5f66;
}
:root.dark {
color-scheme: dark; color-scheme: dark;
--bg-color: #252525;
--primary-text-color: #e0e0e0;
--secondary-text-color: #c7c7c7;
--nav-bg-color: #121212;
--nav-border-color: #25682a;
--nav-link-color: #fff;
--nav-link-hover-color: #3fb449;
--warning-color: #FFDB8F;
--border-color: #464444;
--hover-bg-color: #3a3a3a;
--highlight-color: #009136;
--task-complete-bg-color: #777777;
--milestone-border-color: #ffffff;
--group-item-bg-color: #4b4b4b;
--input-bg-color: #3b3b3b;
--input-border-color: #000;
}
:root.light {
color-scheme: light;
--bg-color: #ffffff;
--primary-text-color: #000000;
--nav-bg-color: #f8f8f8;
--nav-border-color: #cccccc;
--nav-link-color: #000000;
--nav-link-hover-color: #38a63d;
--warning-color: #FF4500;
}
html {
font-size: var(--base-font-size);
} }
body { body {
background-color: #252525; background-color: var(--bg-color);
color: #e0e0e0; color: var(--primary-text-color);
margin: 0; margin: 0;
font-family: Arial, sans-serif; font-family: var(--font-family);
} }
#container { #container {
margin-top: 20px; margin-top: var(--margin-medium);
margin-left: 10px; margin-left: var(--margin-small);
margin-right: 10px; margin-right: var(--margin-small);
margin-bottom: 20px; margin-bottom: var(--margin-medium);
} }
h3 { h3 {
@@ -21,79 +67,89 @@ h3 {
} }
nav { nav {
background-color: #121212; background-color: var(--nav-bg-color);
padding: 1em 0; padding: var(--padding-medium) 0;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
border-bottom: 2px solid #25682a; border-bottom: 2px solid var(--nav-border-color);
} }
nav .logo { nav .logo {
margin-left: 40px; margin-left: var(--margin-large);
height: 40px; height: var(--logo-height);
/* Adjust height as needed */
} }
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
margin-left: 1px; margin-left: 0.0625rem;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
justify-content: center; justify-content: center;
} }
nav ul li { nav ul li {
margin-right: 50px; margin-right: 3.125rem;
} }
nav ul li a { nav ul li a {
text-decoration: none; text-decoration: none;
color: #fff; color: var(--nav-link-color);
font-size: 1.2em; font-size: var(--font-size-large);
} }
nav ul li a:hover, nav ul li a:hover,
nav ul li a.active { nav ul li a.active {
color: #3fb449; color: var(--nav-link-hover-color);
} }
.warning { .warning {
color: #FFDB8F; color: var(--warning-color);
margin-bottom: 10px; margin-bottom: var(--margin-small);
padding: 2px; padding: var(--padding-small);
display: none; display: none;
/* Initially hidden */
} }
.table-description { .table-description {
margin-bottom: 1rem; margin-bottom: var(--margin-medium);
width: 50%; width: 50%;
background-color: transparent; background-color: transparent;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
border-color: #464444; border-color: var(--border-color);
border: 1px solid #464444; border: 1px solid var(--border-color);
border-radius: 0.25rem; border-radius: 0.25rem;
box-shadow: 0 0 0.7rem rgba(95, 95, 95, 0.4); box-shadow: var(--box-shadow);
text-align: center; text-align: center;
} }
.table-description tr { .table-description tr {
display: table-row; display: table-row;
border-bottom: 1px solid #464444; border-bottom: 1px solid var(--border-color);
}
#toggle-theme {
border: none;
background: none;
cursor: pointer;
font-size: var(--font-size-large);
margin-right: var(--margin-medium);
}
#toggle-theme:focus {
outline: none;
} }
.gantt-info { .gantt-info {
margin: 0.5rem; margin: 0.5rem;
font-size: 1rem; font-size: var(--font-size-small);
font-weight: bold; font-weight: bold;
} }
.btn { .btn {
margin: 0.5rem; margin: 0.5rem;
font-size: 1rem; font-size: var(--font-size-small);
cursor: pointer; cursor: pointer;
} }
@@ -104,86 +160,76 @@ nav ul li a.active {
} }
/* ------------ Overwriting JSGantt CSS rules ------------ */ /* ------------ Overwriting JSGantt CSS rules ------------ */
:root.dark div.gantt {
div.gantt { background-color: var(--bg-color);
background-color: #252525; color: var(--secondary-text-color);
color: #c7c7c7;
} }
.gantt table { :root.dark .gantt table,
border-color: #464444; :root.dark .gantt td {
; border-color: var(--border-color);
}
.gantt td {
border-color: #464444;
;
} }
/* Headings and cell defaults */ /* Headings and cell defaults */
.gmajorheading, :root.dark .gmajorheading,
.gminorheading, :root.dark .gminorheading,
.gminorheadingwkend, :root.dark .gminorheadingwkend,
.gtaskcell, :root.dark .gtaskcell,
.gtaskcellcurrent, :root.dark .gtaskcellcurrent,
.gtaskcellwkend, :root.dark .gtaskcellwkend,
.gname, :root.dark .gname,
.ggroupitem, :root.dark .ggroupitem,
.gtaskheading { :root.dark .gtaskheading {
background-color: #252525; background-color: var(--bg-color);
border-color: #464444; border-color: var(--border-color);
;
} }
.gtaskheading, :root.dark .gtaskheading,
.gname, :root.dark .gname,
.gtaskname, :root.dark .gtaskname,
.gres, :root.dark .gres,
.gdur, :root.dark .gdur,
.gcomp, :root.dark .gcomp,
.gstartdate, :root.dark .gstartdate,
.gplanstartdate, :root.dark .gplanstartdate,
.gplanenddate, :root.dark .gplanenddate,
.gcost, :root.dark .gcost,
.gchartlbl, :root.dark .gchartlbl,
.gcontainercol, :root.dark .gcontainercol,
.genddate { :root.dark .genddate {
color: #c7c7c7; color: var(--secondary-text-color);
border-color: #464444; border-color: var(--border-color);
;
} }
.gtaskname>div { :root.dark .gtaskname>div {
color: #c7c7c7; color: var(--secondary-text-color);
} }
.gtaskbarcontainer.gplan, :root.dark .gtaskbarcontainer.gplan,
.gchartlbl.gcontainercol { :root.dark .gchartlbl.gcontainercol {
background: #252525; background: var(--bg-color);
border-color: #464444; border-color: var(--border-color);
} }
.gtaskname div, :root.dark .gtaskname div,
.gtaskheading div, :root.dark .gtaskheading div,
.gtaskname span { :root.dark .gtaskname span {
color: #c7c7c7; color: var(--secondary-text-color);
} }
:root.dark .gtasklist,
.gtasklist, :root.dark .gadditional {
.gadditional { border: var(--border-color) 1px solid;
border: #464444 1px solid
} }
.gchartgrid { :root.dark .gchartgrid {
background-color: #252525; background-color: var(--bg-color);
} }
.glistgrid, :root.dark .glistgrid,
.glistlbl { :root.dark .glistlbl {
background-color: #252525; background-color: var(--bg-color);
border-color: #464444; border-color: var(--border-color);
;
} }
/* .gTaskInfo { /* .gTaskInfo {
@@ -193,88 +239,81 @@ div.gantt {
} */ } */
/* Dark mode scrollbar */ /* Dark mode scrollbar */
.frame::-webkit-scrollbar-thumb { :root.dark .frame::-webkit-scrollbar-thumb,
background-color: #252525; :root.dark .frame::-webkit-scrollbar-track {
} background-color: var(--bg-color);
.frame::-webkit-scrollbar-track {
background-color: #252525;
} }
/* Highlight row */ /* Highlight row */
.gitemhighlight td { :root.dark .gitemhighlight td {
background-color: #009136; background-color: var(--highlight-color);
color: #ffffff; color: var(--nav-link-color);
} }
/* Differentiate Group, Milestone and Ordinary task items (applied to row) */ /* Differentiate Group, Milestone and Ordinary task items (applied to row) */
.ggroupitem { :root.dark .ggroupitem {
background-color: #252525; background-color: var(--bg-color);
font-weight: bold; font-weight: bold;
border-color: #464444; border-color: var(--border-color);
} }
.gmileitem, :root.dark .gmileitem,
.glineitem { :root.dark .glineitem {
background-color: #252525; background-color: var(--bg-color);
} }
/* Task bar caption text styles */ /* Task bar caption text styles */
.gmilecaption, :root.dark .gmilecaption,
.ggroupcaption, :root.dark .ggroupcaption,
.gcaption { :root.dark .gcaption {
color: #ffffff; color: var(--nav-link-color);
} }
/* Task complete %age bar */ /* Task complete %age bar */
.gtaskcomplete { :root.dark .gtaskcomplete {
background-color: #777777; background-color: var(--task-complete-bg-color);
} }
/* Milestones */ /* Milestones */
.gmdtop { :root.dark .gmdtop,
border-bottom: 5px solid #ffffff; :root.dark .gmdbottom {
border-bottom: 5px solid var(--milestone-border-color);
} }
.gmdbottom { :root.dark .gfoldercollapse {
border-top: 5px solid #ffffff; color: var(--secondary-text-color);
}
.gfoldercollapse {
color: #c7c7c7;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
font-size: var(--folder-collapse-font-size);
font-size: 12px; font-family: var(--folder-collapse-font-family);
font-family: Courier, "Courier New", monospace;
} }
/* Highlight for collapsible row */ /* Highlight for collapsible row */
.gname.ggroupitem { :root.dark .gname.ggroupitem {
background-color: rgb(75, 75, 75); background-color: var(--group-item-bg-color);
} }
/* Form label and selected highlighting */ /* Form label and selected highlighting */
.gformlabel { :root.dark .gformlabel {
background-color: #2e2e2e; background-color: var(--formlabel-bg-color);
color: #c7c7c7; color: var(--secondary-text-color);
border: #4a4a4a 1px solid; border: var(--formlabel-border-color) 1px solid;
} }
span.gformlabel:hover { :root.dark span.gformlabel:hover {
background-color: #3a3a3a; background-color: var(--hover-bg-color);
border-color: #565656; border-color: var(--border-color);
} }
span.gselected { :root.dark span.gselected {
background-color: #565656; background-color: var(--formlabel-selected-bg-color);
border-color: #777777; border-color: var(--task-complete-bg-color);
color: #ffffff; color: var(--nav-link-color);
} }
.gantt-inputtable { :root.dark .gantt-inputtable {
background-color: #3b3b3b; background-color: var(--input-bg-color);
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #000; border: 1px solid var(--input-border-color);
color: #c7c7c7; color: var(--secondary-text-color);
} }
src/blenderbim/blenderbim/bim/data/webui/static/js/gantt.js
+25
View File
@@ -19,6 +19,12 @@ const pageSizes = [
// Document ready function // Document ready function
$(document).ready(function () { $(document).ready(function () {
var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
? "light"
: "dark";
var theme = localStorage.getItem("theme") || systemTheme;
setTheme(theme);
connectSocket(); connectSocket();
}); });
@@ -357,3 +363,22 @@ function editValue(list, task, event, cell, column) {
}; };
socket.emit("web_operator", msg); socket.emit("web_operator", msg);
} }
function setTheme(theme) {
if (theme === "light") {
$("html").removeClass("dark").addClass("light");
$("#toggle-theme").html('<i class="fas fa-sun"></i>');
} else {
$("html").removeClass("light").addClass("dark");
$("#toggle-theme").html('<i class="fas fa-moon"></i>');
}
localStorage.setItem("theme", theme);
}
function toggleTheme() {
if ($("html").hasClass("dark")) {
setTheme("light");
} else {
setTheme("dark");
}
}
src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
+8 -1
View File
@@ -1,11 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Client</title> <title>Web Client</title>
<link rel="stylesheet" type="text/css" href="/jsgantt/jsgantt.css" /> <link rel="stylesheet" type="text/css" href="/jsgantt/jsgantt.css" />
<link rel="stylesheet" href="/static/css/gantt.css" /> <link rel="stylesheet" href="/static/css/gantt.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
/>
<script <script
type="text/javascript" type="text/javascript"
src="https://code.jquery.com/jquery-3.6.0.min.js" src="https://code.jquery.com/jquery-3.6.0.min.js"
@@ -31,6 +35,9 @@
<li><a href="/">IFC Data</a></li> <li><a href="/">IFC Data</a></li>
<li><a href="/gantt" class="active">Gantt Chart</a></li> <li><a href="/gantt" class="active">Gantt Chart</a></li>
</ul> </ul>
<button id="toggle-theme" onclick="toggleTheme()">
<i class="fas fa-moon"></i>
</button>
</nav> </nav>
<div id="container"></div> <div id="container"></div>
</body> </body>