add blender generated theme for drawings page

src/blenderbim/blenderbim/bim/data/webui/sioserver.py

@@ -112,7 +112,6 @@ class BlenderNamespace(socketio.AsyncNamespace):
 
     async def on_drawings_data(self, sid, data):
         print(f"Drawings data from Blender client {sid}")
-        print(data)
         blender_messages[sid]["drwings_data"] = data
         await sio.emit("drawings_data", {"blenderId": sid, "data": data}, namespace="/web")
 

src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css

@@ -39,20 +39,20 @@
 
 html {
     font-size: var(--base-font-size);
-    color: var(--text-color);
+    color: var(--blender-text);
 }
 
 body {
-    background-color: var(--bg-color);
-    color: var(--text-color);
+    background-color: var(--blender-window-background, var(--bg-color));
+    color: var(--blender-text, var(--text-color));
     margin: 0;
     font-family: var(--font-family);
 }
 
 #container {
     margin-top: var(--margin-medium);
-    margin-left: var(--margin-small);
-    margin-right: var(--margin-small);
+    margin-left: var(--margin-tiny);
+    margin-right: var(--margin-tiny);
     margin-bottom: var(--margin-medium);
     height: calc(100vh - var(--nav-height));
     box-sizing: border-box;
@@ -64,13 +64,13 @@ h3 {
 }
 
 nav {
-    background-color: var(--nav-bg-color);
+    background-color: var(--blender-top-bar-header, var(--nav-bg-color));
     height: var(--nav-height);
     padding: var(--padding-medium) 0;
     display: flex;
     align-items: center;
     position: relative;
-    border-bottom: 2px solid var(--nav-border-color);
+    border-bottom: 2px solid var(--blender-tab-outline, var(--nav-border-color));
 }
 
 nav .logo {
@@ -93,17 +93,17 @@ nav ul li {
 
 nav ul li a {
     text-decoration: none;
-    color: var(--nav-link-color);
+    color: var(--blender-text, var(--nav-link-color));
     font-size: var(--font-size-large);
 }
 
 nav ul li a:hover,
 nav ul li a.active {
-    color: var(--nav-link-hover-color);
+    color: var(--blender-selected-object, var(--nav-link-hover-color));
 }
 
 .warning {
-    color: var(--warning-color);
+    color: var(--blender-info-warning, var(--warning-color));
     margin-bottom: var(--margin-small);
     padding: var(--padding-tiny);
     display: none;
@@ -127,8 +127,8 @@ nav ul li a.active {
     overflow-y: auto;
     overflow: hidden;
     transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
-    border: 1px solid var(--border-color);
-    background-color: var(--nav-bg-color);
+    border: 1px solid var(--blender-tab-outline, var(--details-border-color));
+    background-color: var(--blender-panel-background, var(--nav-bg-color));
     z-index: 1;
     opacity: 0;
     visibility: hidden;
@@ -146,7 +146,7 @@ nav ul li a.active {
 
 .client {
     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;
 }
 
@@ -155,7 +155,7 @@ nav ul li a.active {
     overflow: hidden;
     padding-left: var(--padding-small);
     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);
     opacity: 0;
 }
@@ -166,13 +166,13 @@ nav ul li a.active {
 }
 
 .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);
 }
 
 #show-connected-button {
     width: auto;
-    background-color: var(--bg-color);
+    background-color: var(--blender-panel-header, var(--bg-color));
     border: none;
     font-size: var(--base-font-size);
 }
@@ -191,66 +191,96 @@ nav ul li a.active {
 
 .left {
     flex: 1;
-    background-color: var(--bg-color);
     display: flex;
     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 {
     flex: 4;
-    background-color: var(--bg-color);
-    border: 1px solid var(--border-color);
+    background-color: var(--blender-window-background, var(--bg-color));
+    border: 1px solid var(--blender-tab-outline, var(--border-color));
 }
 
 #svg-container {
     height: 100%;
 }
 
-.panel {
-    background-color: var(--nav-bg-color);
-    border: 1px solid var(--border-color);
-    padding: 10px;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
+.svg-name {
+    margin-bottom: var(--margin-small);
 }
 
-.card-header,
-.card-body {
-    background-color: var(--bg-color);
-    border: 1px solid var(--border-color);
-    overflow: auto;
+.panel {
+    background-color: var(--blender-window-background, var(--bg-color));
+    border: 1px solid var(--blender-tab-outline, var(--border-color));
+    padding: var(--padding-small);
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.card-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .card {
-    background-color: var(--nav-bg-color);
-    overflow: auto;
+    background-color: var(--blender-even-row, var(--nav-bg-color));
+    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 {
     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 {
     outline: none;
 }
 
 footer {
-    background-color: var(--nav-bg-color);
+    background-color: var(--blender-top-bar-header, var(--nav-bg-color));
     text-align: right;
     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 {
     margin: 0;
-    color: var(--text-color);
+    color: var(--blender-text, var(--nav-link-color));
     margin-right: var(--margin-small);
     font-size: 0.8rem;
 }
 
 /* remove bootstrap css confilcts */
+
 *,
 ::after,
 ::before {
@@ -259,5 +289,5 @@ footer p {
 
 .btn,
 .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

@@ -177,7 +177,7 @@ nav ul li a.active {
 
 .client {
     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;
 }
 

src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js

@@ -8,7 +8,9 @@ $(document).ready(function () {
   var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
     ? "light"
     : "dark";
-  var theme = localStorage.getItem("theme") || systemTheme;
+  $(":root").css("color-scheme", systemTheme);
+  var defaultTheme = "blender";
+  var theme = localStorage.getItem("theme") || defaultTheme;
   setTheme(theme);
 
   $("#dropdown-menu").change(function () {
@@ -122,7 +124,7 @@ function handleThemeData(themeData) {
   const cssRule = generateCssVariableRule(themeData.theme);
   console.log(cssRule);
 
-  var styleElement = $("#index-stylesheet")[0];
+  var styleElement = $("#drawings-stylesheet")[0];
   if (styleElement) {
     var sheet = styleElement.sheet || styleElement.styleSheet;
     sheet.insertRule(cssRule, sheet.cssRules.length);
@@ -226,6 +228,9 @@ function displayDrawingsNames(blenderId, ifcFile) {
         };
         console.log(msg);
         socket.emit("get_svg", msg);
+
+        $("li").removeClass("selected-svg");
+        $(this).addClass("selected-svg");
       });
 
     if (type === "drawing") $("#drawings-sub-panel").append(label);
@@ -244,21 +249,24 @@ function displayDrawingsNames(blenderId, ifcFile) {
 }
 
 function setTheme(theme) {
+  $("html").removeClass("light dark blender").addClass(theme);
   if (theme === "light") {
-    $("html").removeClass("dark").addClass("light");
     $("#toggle-theme").html('<i class="fas fa-sun"></i>');
-  } else {
-    $("html").removeClass("light").addClass("dark");
+  } else if (theme === "dark") {
     $("#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);
 }
 
 function toggleTheme() {
-  if ($("html").hasClass("dark")) {
-    setTheme("light");
-  } else {
+  if ($("html").hasClass("light")) {
     setTheme("dark");
+  } else if ($("html").hasClass("dark")) {
+    setTheme("blender");
+  } else {
+    setTheme("light");
   }
 }
 

src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en" class="blender">
   <head>
     <meta charset="UTF-8" />
     <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="col-2 left">
         <!-- Dropdown menu -->
-        <div class="dropdown mb-3">
+        <div class="dropdown mb-1">
           <label for="dropdown-menu">IFC File:</label>
           <select class="p-0 pl-2" id="dropdown-menu">
             <!-- IFC files will be dynamically populated here -->
@@ -78,7 +78,7 @@
         </div>
         <!-- Panel with sub-panels -->
         <div class="panel">
-          <div id="accordion">
+          <div class="card-container" id="accordion">
             <div class="card pb-2">
               <div class="card-header overflow-hidden" id="headingOne">
                 <button
@@ -90,7 +90,7 @@
                 </button>
               </div>
 
-              <div id="collapseOne" class="collapse show">
+              <div id="collapseOne" class="collapse show card-container">
                 <div class="card-body">
                   <ul class="sub-panel pl-2" id="drawings-sub-panel">
                     <!-- Drawings will be dynamically populated here -->
@@ -108,7 +108,7 @@
                   Sheets
                 </button>
               </div>
-              <div id="collapseTwo" class="collapse show">
+              <div id="collapseTwo" class="collapse show card-container">
                 <div class="card-body">
                   <ul class="sub-panel pl-2" id="sheets-sub-panel">
                     <!-- Sheets will be dynamically populated here -->