Glassvision/IfcOpenShell
1
0
Fork 0
mirror of https://github.com/IfcOpenShell/IfcOpenShell.git synced 2026-09-17 14:02:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

add blender generated theme for drawings page

Browse Source
This commit is contained in:
Ziad-I
2024-08-05 12:37:45 +03:00
committed by Dion Moult
parent 72caf7525e
commit 48c5100d3b
5 changed files with 90 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blenderbim/blenderbim/bim/data/webui/sioserver.py
-1
View File
@@ -112,7 +112,6 @@ class BlenderNamespace(socketio.AsyncNamespace):
async def on_drawings_data(self, sid, data): async def on_drawings_data(self, sid, data):
print(f"Drawings data from Blender client {sid}") print(f"Drawings data from Blender client {sid}")
print(data)
blender_messages[sid]["drwings_data"] = data blender_messages[sid]["drwings_data"] = data
await sio.emit("drawings_data", {"blenderId": sid, "data": data}, namespace="/web") await sio.emit("drawings_data", {"blenderId": sid, "data": data}, namespace="/web")
src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
+68 -38
View File
@@ -39,20 +39,20 @@
html { html {
font-size: var(--base-font-size); font-size: var(--base-font-size);
color: var(--text-color); color: var(--blender-text);
} }
body { body {
background-color: var(--bg-color); background-color: var(--blender-window-background, var(--bg-color));
color: var(--text-color); color: var(--blender-text, var(--text-color));
margin: 0; margin: 0;
font-family: var(--font-family); font-family: var(--font-family);
} }
#container { #container {
margin-top: var(--margin-medium); margin-top: var(--margin-medium);
margin-left: var(--margin-small); margin-left: var(--margin-tiny);
margin-right: var(--margin-small); margin-right: var(--margin-tiny);
margin-bottom: var(--margin-medium); margin-bottom: var(--margin-medium);
height: calc(100vh - var(--nav-height)); height: calc(100vh - var(--nav-height));
box-sizing: border-box; box-sizing: border-box;
@@ -64,13 +64,13 @@ h3 {
} }
nav { nav {
background-color: var(--nav-bg-color); background-color: var(--blender-top-bar-header, var(--nav-bg-color));
height: var(--nav-height); height: var(--nav-height);
padding: var(--padding-medium) 0; padding: var(--padding-medium) 0;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
border-bottom: 2px solid var(--nav-border-color); border-bottom: 2px solid var(--blender-tab-outline, var(--nav-border-color));
} }
nav .logo { nav .logo {
@@ -93,17 +93,17 @@ nav ul li {
nav ul li a { nav ul li a {
text-decoration: none; text-decoration: none;
color: var(--nav-link-color); color: var(--blender-text, var(--nav-link-color));
font-size: var(--font-size-large); 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: var(--nav-link-hover-color); color: var(--blender-selected-object, var(--nav-link-hover-color));
} }
.warning { .warning {
color: var(--warning-color); color: var(--blender-info-warning, var(--warning-color));
margin-bottom: var(--margin-small); margin-bottom: var(--margin-small);
padding: var(--padding-tiny); padding: var(--padding-tiny);
display: none; display: none;
@@ -127,8 +127,8 @@ nav ul li a.active {
overflow-y: auto; overflow-y: auto;
overflow: hidden; overflow: hidden;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out; transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
border: 1px solid var(--border-color); border: 1px solid var(--blender-tab-outline, var(--details-border-color));
background-color: var(--nav-bg-color); background-color: var(--blender-panel-background, var(--nav-bg-color));
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@@ -146,7 +146,7 @@ nav ul li a.active {
.client { .client {
padding: var(--margin-small); padding: var(--margin-small);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--blender-tab-outline, var(--details-border-color));
cursor: pointer; cursor: pointer;
} }
@@ -155,7 +155,7 @@ nav ul li a.active {
overflow: hidden; overflow: hidden;
padding-left: var(--padding-small); padding-left: var(--padding-small);
transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out; transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
background-color: var(--nav-bg-color); background-color: var(--blender-panel-background, var(--nav-bg-color));
margin-top: var(--margin-tiny); margin-top: var(--margin-tiny);
opacity: 0; opacity: 0;
} }
@@ -166,13 +166,13 @@ nav ul li a.active {
} }
.client-detail { .client-detail {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--blender-tab-outline, var(--details-border-color));
padding: var(--padding-small); padding: var(--padding-small);
} }
#show-connected-button { #show-connected-button {
width: auto; width: auto;
background-color: var(--bg-color); background-color: var(--blender-panel-header, var(--bg-color));
border: none; border: none;
font-size: var(--base-font-size); font-size: var(--base-font-size);
} }
@@ -191,66 +191,96 @@ nav ul li a.active {
.left { .left {
flex: 1; flex: 1;
background-color: var(--bg-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; height: 100%;
box-sizing: border-box;
background-color: var(--blender-odd-row, var(--bg-color));
padding: var(--padding-small);
} }
.right { .right {
flex: 4; flex: 4;
background-color: var(--bg-color); background-color: var(--blender-window-background, var(--bg-color));
border: 1px solid var(--border-color); border: 1px solid var(--blender-tab-outline, var(--border-color));
} }
#svg-container { #svg-container {
height: 100%; height: 100%;
} }
.panel { .svg-name {
background-color: var(--nav-bg-color); margin-bottom: var(--margin-small);
border: 1px solid var(--border-color);
padding: 10px;
flex-grow: 1;
display: flex;
flex-direction: column;
} }
.card-header, .panel {
.card-body { background-color: var(--blender-window-background, var(--bg-color));
background-color: var(--bg-color); border: 1px solid var(--blender-tab-outline, var(--border-color));
border: 1px solid var(--border-color); padding: var(--padding-small);
overflow: auto; display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.card-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
} }
.card { .card {
background-color: var(--nav-bg-color); background-color: var(--blender-even-row, var(--nav-bg-color));
overflow: auto; display: flex;
flex-direction: column;
overflow-y: auto;
flex: 1;
}
.card-header {
background-color: var(--blender-panel-header, var(--bg-color));
border: 1px solid var(--blender-tab-outline, var(--border-color));
flex-shrink: 0;
}
.card-body {
background-color: var(--blender-panel-background, var(--bg-color));
border: 1px solid var(--blender-tab-outline, var(--border-color));
overflow-y: auto;
flex: 1;
} }
li.svg-name { li.svg-name {
list-style-type: none; list-style-type: none;
} }
.selected-svg {
background-color: var(--blender-active-highlight, var(--bg-color));
color: var(--blender-active-text-highlight, var(--nav-link-hover-color));
}
#dropdown-menu:focus { #dropdown-menu:focus {
outline: none; outline: none;
} }
footer { footer {
background-color: var(--nav-bg-color); background-color: var(--blender-top-bar-header, var(--nav-bg-color));
text-align: right; text-align: right;
padding: var(--padding-tiny); padding: var(--padding-tiny);
border-top: 1px solid var(--nav-border-color); border-top: 1px solid var(--blender-tab-outline, var(--nav-border-color));
} }
footer p { footer p {
margin: 0; margin: 0;
color: var(--text-color); color: var(--blender-text, var(--nav-link-color));
margin-right: var(--margin-small); margin-right: var(--margin-small);
font-size: 0.8rem; font-size: 0.8rem;
} }
/* remove bootstrap css confilcts */ /* remove bootstrap css confilcts */
*, *,
::after, ::after,
::before { ::before {
@@ -259,5 +289,5 @@ footer p {
.btn, .btn,
.btn:hover { .btn:hover {
color: var(--nav-link-hover-color); color: var(--blender-text, var(--nav-link-color));
} }
src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
+1 -1
View File
@@ -177,7 +177,7 @@ nav ul li a.active {
.client { .client {
padding: var(--margin-small); padding: var(--margin-small);
border-bottom: 1px solid 1px solid var(--blender-tab-outline, var(--details-border-color)); border-bottom: 1px solid var(--blender-tab-outline, var(--details-border-color));
cursor: pointer; cursor: pointer;
} }
src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+16 -8
View File
@@ -8,7 +8,9 @@ $(document).ready(function () {
var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
? "light" ? "light"
: "dark"; : "dark";
var theme = localStorage.getItem("theme") || systemTheme; $(":root").css("color-scheme", systemTheme);
var defaultTheme = "blender";
var theme = localStorage.getItem("theme") || defaultTheme;
setTheme(theme); setTheme(theme);
$("#dropdown-menu").change(function () { $("#dropdown-menu").change(function () {
@@ -122,7 +124,7 @@ function handleThemeData(themeData) {
const cssRule = generateCssVariableRule(themeData.theme); const cssRule = generateCssVariableRule(themeData.theme);
console.log(cssRule); console.log(cssRule);
var styleElement = $("#index-stylesheet")[0]; var styleElement = $("#drawings-stylesheet")[0];
if (styleElement) { if (styleElement) {
var sheet = styleElement.sheet || styleElement.styleSheet; var sheet = styleElement.sheet || styleElement.styleSheet;
sheet.insertRule(cssRule, sheet.cssRules.length); sheet.insertRule(cssRule, sheet.cssRules.length);
@@ -226,6 +228,9 @@ function displayDrawingsNames(blenderId, ifcFile) {
}; };
console.log(msg); console.log(msg);
socket.emit("get_svg", msg); socket.emit("get_svg", msg);
$("li").removeClass("selected-svg");
$(this).addClass("selected-svg");
}); });
if (type === "drawing") $("#drawings-sub-panel").append(label); if (type === "drawing") $("#drawings-sub-panel").append(label);
@@ -244,21 +249,24 @@ function displayDrawingsNames(blenderId, ifcFile) {
} }
function setTheme(theme) { function setTheme(theme) {
$("html").removeClass("light dark blender").addClass(theme);
if (theme === "light") { if (theme === "light") {
$("html").removeClass("dark").addClass("light");
$("#toggle-theme").html('<i class="fas fa-sun"></i>'); $("#toggle-theme").html('<i class="fas fa-sun"></i>');
} else { } else if (theme === "dark") {
$("html").removeClass("light").addClass("dark");
$("#toggle-theme").html('<i class="fas fa-moon"></i>'); $("#toggle-theme").html('<i class="fas fa-moon"></i>');
} else if (theme === "blender") {
$("#toggle-theme").html('<i class="fas fa-adjust"></i>');
} }
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
} }
function toggleTheme() { function toggleTheme() {
if ($("html").hasClass("dark")) { if ($("html").hasClass("light")) {
setTheme("light");
} else {
setTheme("dark"); setTheme("dark");
} else if ($("html").hasClass("dark")) {
setTheme("blender");
} else {
setTheme("light");
} }
} }
src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+5 -5
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="dark"> <html lang="en" class="blender">
<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" />
@@ -69,7 +69,7 @@
<div class="container-fluid d-flex" id="container"> <div class="container-fluid d-flex" id="container">
<div class="col-2 left"> <div class="col-2 left">
<!-- Dropdown menu --> <!-- Dropdown menu -->
<div class="dropdown mb-3"> <div class="dropdown mb-1">
<label for="dropdown-menu">IFC File:</label> <label for="dropdown-menu">IFC File:</label>
<select class="p-0 pl-2" id="dropdown-menu"> <select class="p-0 pl-2" id="dropdown-menu">
<!-- IFC files will be dynamically populated here --> <!-- IFC files will be dynamically populated here -->
@@ -78,7 +78,7 @@
</div> </div>
<!-- Panel with sub-panels --> <!-- Panel with sub-panels -->
<div class="panel"> <div class="panel">
<div id="accordion"> <div class="card-container" id="accordion">
<div class="card pb-2"> <div class="card pb-2">
<div class="card-header overflow-hidden" id="headingOne"> <div class="card-header overflow-hidden" id="headingOne">
<button <button
@@ -90,7 +90,7 @@
</button> </button>
</div> </div>
<div id="collapseOne" class="collapse show"> <div id="collapseOne" class="collapse show card-container">
<div class="card-body"> <div class="card-body">
<ul class="sub-panel pl-2" id="drawings-sub-panel"> <ul class="sub-panel pl-2" id="drawings-sub-panel">
<!-- Drawings will be dynamically populated here --> <!-- Drawings will be dynamically populated here -->
@@ -108,7 +108,7 @@
Sheets Sheets
</button> </button>
</div> </div>
<div id="collapseTwo" class="collapse show"> <div id="collapseTwo" class="collapse show card-container">
<div class="card-body"> <div class="card-body">
<ul class="sub-panel pl-2" id="sheets-sub-panel"> <ul class="sub-panel pl-2" id="sheets-sub-panel">
<!-- Sheets will be dynamically populated here --> <!-- Sheets will be dynamically populated here -->