From e45a670ff51af0c72a0f74571050b006457945a9 Mon Sep 17 00:00:00 2001 From: Ziad-I <68874104+Ziad-I@users.noreply.github.com> Date: Sat, 3 Aug 2024 11:54:47 +0300 Subject: [PATCH] add csv page uses blender theme css variables --- .../bim/data/webui/static/css/index.css | 81 ++++++++++++++++++- .../bim/data/webui/static/js/index.js | 18 +++-- .../bim/data/webui/templates/index.html | 2 +- src/blenderbim/blenderbim/tool/web.py | 12 ++- 4 files changed, 99 insertions(+), 14 deletions(-) diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css index ef5adbd8d9..590f6937d2 100644 --- a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css +++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css @@ -103,7 +103,7 @@ nav ul li a.active { } .warning { - color: var(--warning-color); + color: var(--blender-info-warning, var(--warning-color)); margin-bottom: var(--margin-small); padding: var(--padding-tiny); display: none; @@ -128,7 +128,7 @@ nav ul li a.active { overflow: hidden; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; border: 1px solid var(--blender-tab-outline, var(--table-border-color)); - background-color: var(--blender-panel-background-color, var(--nav-bg-color)); + background-color: var(--blender-panel-background, var(--nav-bg-color)); z-index: 1; opacity: 0; visibility: hidden; @@ -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(--blender-panel-background-color, var(--nav-bg-color)); + background-color: var(--blender-panel-background, var(--nav-bg-color)); margin-top: var(--margin-tiny); opacity: 0; } @@ -173,7 +173,6 @@ nav ul li a.active { #show-connected-button { width: auto; background-color: var(--blender-panel-header, var(--bg-color)); - border: none; font-size: var(--base-font-size); color: var(--blender-text, var(--text-color)) } @@ -211,6 +210,17 @@ footer p { margin-top: var(--margin-small); } +:root.blender button { + background-color: var(--blender-panel-header); + color: var(--blender-text); + border-color: var(--blender-tab-outline); + transition: filter 0.2s ease; +} + +:root.blender button:hover { + filter: brightness(1.2); +} + /* ------------ Overwriting Tabulator CSS rules ------------ */ :root.light .tabulator-header, @@ -222,4 +232,67 @@ footer p { :root.light .tabulator { border-top: 1px solid var(--table-border-color); border-bottom: 2px solid var(--table-border-color); +} + +:root.blender .tabulator-table-holder, +:root.blender .tabulator { + background-color: var(--blender-panel-background) !important; +} + +:root.blender .tabulator-header { + border-bottom-color: var(--blender-tab-outline); + color: var(--blender-text); +} + +:root.blender .tabulator-header, +:root.blender .tabulator .tabulator-header .tabulator-col { + background-color: var(--blender-panel-header) !important; +} + +:root.blender .tabulator { + border-top-color: var(--blender-tab-outline); + border-bottom-color: var(--blender-tab-outline); + color: var(--blender-text); +} + +:root.blender .tabulator-row-odd .tabulator-cell { + background-color: var(--blender-odd-row); + transition: filter 0.2s ease; +} + +:root.blender .tabulator-row-even .tabulator-cell { + background-color: var(--blender-even-row); + transition: filter 0.2s ease; +} + +:root.blender .tabulator-row-odd:hover .tabulator-cell, +:root.blender .tabulator-row-even:hover .tabulator-cell { + filter: brightness(1.4); +} + +:root.blender .tabulator-row, +:root.blender .tabulator-cell { + color: var(--blender-text); +} + + + +:root.blender .tabulator-selected .tabulator-cell { + background-color: var(--blender-selected-object) !important; +} + + +:root.blender .tabulator-selected:hover .tabulator-cell { + background-color: var(--blender-active-object) !important; + filter: brightness(1) +} + +.tabulator-menu-item { + color: var(--blender-text) !important; + background-color: var(--blender-panel-background) !important; + transition: filter 0.1s ease; +} + +.tabulator-menu-item:hover { + filter: brightness(1.4); } \ No newline at end of file diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js index f0f149a82e..98b045bd00 100644 --- a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js +++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js @@ -8,7 +8,8 @@ $(document).ready(function () { var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"; - var theme = localStorage.getItem("theme") || systemTheme; + var defaultTheme = "blender"; + var theme = localStorage.getItem("theme") || defaultTheme; setTheme(theme); connectSocket(); @@ -297,30 +298,33 @@ function compareHeaders(headers1, headers2) { } function setTheme(theme) { + $("html").removeClass("light dark blender").addClass(theme); var stylesheet = $("#tabulator-stylesheet"); if (theme === "light") { stylesheet.attr( "href", "https://unpkg.com/tabulator-tables/dist/css/tabulator_site.min.css" ); - $("html").removeClass("dark").addClass("light"); $("#toggle-theme").html(''); - } else { + } else if (theme === "dark") { stylesheet.attr( "href", "https://unpkg.com/tabulator-tables/dist/css/tabulator_site_dark.min.css" ); - $("html").removeClass("light").addClass("dark"); $("#toggle-theme").html(''); + } else if (theme === "blender") { + $("#toggle-theme").html(''); } 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"); } } diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html index 4401c0bdaf..151795c9d8 100644 --- a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html +++ b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/blenderbim/blenderbim/tool/web.py b/src/blenderbim/blenderbim/tool/web.py index 98db5b5c51..51f64a0e5c 100644 --- a/src/blenderbim/blenderbim/tool/web.py +++ b/src/blenderbim/blenderbim/tool/web.py @@ -381,7 +381,9 @@ class Web(blenderbim.core.tool.Web): return tuple(getattr(theme, attribute)[:]) def mix_colors(color1, color2): - alpha1, alpha2 = color1[3] * 255, color2[3] * 255 + alpha1 = color1[3] * 255 if len(color1) > 3 else 255 + alpha2 = color2[3] * 255 if len(color2) > 3 else 255 + alpha = 255 - ((255 - alpha1) * (255 - alpha2) / 255) red = (color1[0] * (255 - alpha2) + color2[0] * alpha2) / 255 green = (color1[1] * (255 - alpha2) + color2[1] * alpha2) / 255 @@ -392,6 +394,9 @@ class Web(blenderbim.core.tool.Web): panel = prefs.panelcolors view_3d = bpy.context.preferences.themes[0].view_3d top_bar = bpy.context.preferences.themes[0].topbar.space + info = bpy.context.preferences.themes[0].info + file_browser = bpy.context.preferences.themes[0].file_browser + theme = { "window_background": get_color(prefs, "back"), "text": get_color(prefs, "text"), @@ -399,11 +404,14 @@ class Web(blenderbim.core.tool.Web): "tab_outline": get_color(prefs, "tab_outline"), "navigation_bar": get_color(prefs, "navigation_bar"), "panel_header": get_color(panel, "header"), - "panel_background_color": mix_colors(get_color(panel, "back"), get_color(panel, "sub_back")), + "panel_background": mix_colors(get_color(panel, "back"), get_color(panel, "sub_back")), "top_bar_header": get_color(top_bar, "header"), "top_bar_header_text": get_color(top_bar, "header_text"), "active_object": get_color(view_3d, "object_active"), "selected_object": get_color(view_3d, "object_selected"), + "info_warning": get_color(info, "info_warning"), + "odd_row": get_color(file_browser.space, "back"), + "even_row": mix_colors(get_color(file_browser.space, "back"), get_color(file_browser, "row_alternate")), } cls.send_webui_data(theme, "theme", "theme_data", use_web_data=False)