From 524c28579284f6afc55d1891002c42e6b25e6b7e Mon Sep 17 00:00:00 2001 From: kovacsv Date: Fri, 27 Aug 2021 18:12:31 +0200 Subject: [PATCH] Use css variables in svg icons. --- assets/logos/3dviewer_net_logo.svg | 2 + assets/logos/3dviewer_net_logo_text.svg | 2 + website/assets/images/3dviewer_net_logo.svg | 74 +---------- .../assets/images/3dviewer_net_logo_text.svg | 116 +----------------- website/embed.html | 5 +- website/index.html | 7 +- website/o3dv/css/core.css | 4 + website/o3dv/css/dialogs.css | 22 ++-- website/o3dv/css/embed.css | 4 +- website/o3dv/css/website.css | 27 +++- website/o3dv/js/modal.js | 5 +- website/o3dv/js/settingssidebarpanel.js | 3 +- website/o3dv/js/themehandler.js | 8 ++ website/o3dv/js/website.js | 15 ++- 14 files changed, 83 insertions(+), 211 deletions(-) create mode 100644 assets/logos/3dviewer_net_logo.svg create mode 100644 assets/logos/3dviewer_net_logo_text.svg diff --git a/assets/logos/3dviewer_net_logo.svg b/assets/logos/3dviewer_net_logo.svg new file mode 100644 index 0000000..35d447f --- /dev/null +++ b/assets/logos/3dviewer_net_logo.svg @@ -0,0 +1,2 @@ + + diff --git a/assets/logos/3dviewer_net_logo_text.svg b/assets/logos/3dviewer_net_logo_text.svg new file mode 100644 index 0000000..b8ae419 --- /dev/null +++ b/assets/logos/3dviewer_net_logo_text.svg @@ -0,0 +1,2 @@ + + diff --git a/website/assets/images/3dviewer_net_logo.svg b/website/assets/images/3dviewer_net_logo.svg index c1fef28..fc500b8 100644 --- a/website/assets/images/3dviewer_net_logo.svg +++ b/website/assets/images/3dviewer_net_logo.svg @@ -1,72 +1,2 @@ - - + + diff --git a/website/assets/images/3dviewer_net_logo_text.svg b/website/assets/images/3dviewer_net_logo_text.svg index 7e15bc0..fae74d3 100644 --- a/website/assets/images/3dviewer_net_logo_text.svg +++ b/website/assets/images/3dviewer_net_logo_text.svg @@ -1,114 +1,2 @@ - - + + diff --git a/website/embed.html b/website/embed.html index 97edce4..6157feb 100644 --- a/website/embed.html +++ b/website/embed.html @@ -134,7 +134,10 @@
- + + + +
diff --git a/website/index.html b/website/index.html index b4a1dd1..bf55e19 100644 --- a/website/index.html +++ b/website/index.html @@ -140,6 +140,7 @@ + @@ -148,7 +149,7 @@
- +
@@ -165,7 +166,9 @@
-
+
+ +
Drag and drop your 3D models here.
obj, 3ds, stl, ply, gltf, glb, 3dm, fbx, off diff --git a/website/o3dv/css/core.css b/website/o3dv/css/core.css index e90e43f..9a3228f 100644 --- a/website/o3dv/css/core.css +++ b/website/o3dv/css/core.css @@ -8,8 +8,12 @@ --ov_secondary_hover_color: #e4f4ff; --ov_icon_color: #263238; --ov_light_icon_color: #838383; + --ov_logo_text_color: #15334a; + --ov_logo_border_color: #000000; --ov_toolbar_background_color: #f5f5f5; --ov_toolbar_selected_background_color: #e1e1e1; + --ov_dialog_foreground_color: #000000; + --ov_dialog_background_color: #ffffff; --ov_border_color: #cccccc; --ov_light_border_color: #dddddd; --ov_shadow: 0px 0px 10px #cccccc; diff --git a/website/o3dv/css/dialogs.css b/website/o3dv/css/dialogs.css index 63984e4..0e21e04 100644 --- a/website/o3dv/css/dialogs.css +++ b/website/o3dv/css/dialogs.css @@ -5,8 +5,8 @@ div.ov_modal_overlay div.ov_dialog { - color: var(--ov_foreground_color); - background: var(--ov_background_color); + color: var(--ov_dialog_foreground_color); + background: var(--ov_dialog_background_color); width: 400px; padding: 20px; box-shadow: var(--ov_shadow); @@ -124,8 +124,8 @@ div.ov_dialog div.ov_dialog_copyable_input div.ov_dialog div.ov_dialog_copyable_input input { - color: var(--ov_foreground_color); - background: var(--ov_background_color); + color: var(--ov_dialog_foreground_color); + background: var(--ov_dialog_background_color); width: 70%; margin-top: 6px; box-sizing: border-box; @@ -157,8 +157,8 @@ div.ov_dialog input.ov_dialog_checkradio div.ov_popup { - color: var(--ov_foreground_color); - background: var(--ov_background_color); + color: var(--ov_dialog_foreground_color); + background: var(--ov_dialog_background_color); width: 200px; padding: 10px; box-shadow: var(--ov_shadow); @@ -193,8 +193,8 @@ div.ov_popup div.ov_popup_list_item_name div.ov_progress { - color: var(--ov_foreground_color); - background: var(--ov_background_color); + color: var(--ov_dialog_foreground_color); + background: var(--ov_dialog_background_color); text-align: center; width: 400px; padding: 20px; @@ -202,11 +202,12 @@ div.ov_progress border-radius: 5px; } -div.ov_progress img.ov_progress_img +div.ov_progress svg.ov_progress_img { + width: 80px; height: 80px; margin-bottom: 10px; - display: inline; + display: inline-block; } div.ov_progress div.ov_progress_text @@ -215,7 +216,6 @@ div.ov_progress div.ov_progress_text text-align: center; } - @media (hover) { diff --git a/website/o3dv/css/embed.css b/website/o3dv/css/embed.css index 03a691a..ff5b553 100644 --- a/website/o3dv/css/embed.css +++ b/website/o3dv/css/embed.css @@ -3,10 +3,12 @@ div.embed_viewer overflow: auto; } -div.embed_viewer img.embed_logo +div.embed_viewer svg.embed_logo { + width: 40px; height: 40px; position: absolute; right: 10px; bottom: 10px; + display: block; } diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css index 484a94d..a3fafa2 100644 --- a/website/o3dv/css/website.css +++ b/website/o3dv/css/website.css @@ -32,11 +32,19 @@ div.title img.logo_image float: left; } +div.title svg.logo_image +{ + width: 190px; + height: 40px; + float: left; +} + div.title div.logo_text { - font-size: 16px; + color: var(--ov_foreground_color); + font-size: 18px; font-weight: bold; - padding: 10px; + padding: 9px; float: left; } @@ -68,9 +76,10 @@ div.intro overflow: auto; } -div.intro img.intro_logo +div.intro svg.intro_logo { display: inline; + width: 140px; height: 140px; max-width: 80%; } @@ -260,6 +269,18 @@ div.ov_sidebar_content button.pcr-button float: left; } +div.pcr-app +{ + color: var(--ov_dialog_foreground_color); + background: var(--ov_dialog_background_color); +} + +div.pcr-app input.pcr-result +{ + color: var(--ov_foreground_color) !important; + background: var(--ov_background_color) !important; +} + div.ov_property_table { overflow: auto; diff --git a/website/o3dv/js/modal.js b/website/o3dv/js/modal.js index 67b3446..bde72e8 100644 --- a/website/o3dv/js/modal.js +++ b/website/o3dv/js/modal.js @@ -149,7 +149,6 @@ OV.ProgressDialog = class extends OV.Dialog { super (); this.modal.SetCloseable (false); - this.imageDiv = null; this.textDiv = null; } @@ -158,9 +157,9 @@ OV.ProgressDialog = class extends OV.Dialog let contentDiv = this.modal.GetContentDiv (); contentDiv.addClass ('ov_progress'); - this.imageDiv = $('').addClass ('ov_progress_img').attr ('src', 'assets/images/3dviewer_net_logo.svg').appendTo (contentDiv); + $('').addClass ('ov_progress_img').appendTo (contentDiv); + console.log (contentDiv.html ()); this.textDiv = $('
').addClass ('ov_progress_text').appendTo (contentDiv); - this.SetText (text); } diff --git a/website/o3dv/js/settingssidebarpanel.js b/website/o3dv/js/settingssidebarpanel.js index 67a4a78..953e181 100644 --- a/website/o3dv/js/settingssidebarpanel.js +++ b/website/o3dv/js/settingssidebarpanel.js @@ -55,12 +55,11 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel { let contentDiv = $('
').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv); let titleDiv = $('
').addClass ('ov_sidebar_subtitle').appendTo (contentDiv); - let colorInput = $('
').addClass ('color-picker').addClass ('ov_sidebar_color').appendTo (titleDiv); + let colorInput = $('
').addClass ('color-picker').appendTo (titleDiv); $('').html (title).appendTo (titleDiv); const pickr = Pickr.create ({ el : colorInput.get (0), theme : 'monolith', - appClass : 'ov_sidebar_color', position : 'left-start', swatches : predefinedColors, comparison : false, diff --git a/website/o3dv/js/themehandler.js b/website/o3dv/js/themehandler.js index 0eb197c..327eaff 100644 --- a/website/o3dv/js/themehandler.js +++ b/website/o3dv/js/themehandler.js @@ -11,8 +11,12 @@ OV.ThemeHandler = class { '--ov_secondary_hover_color': '#e4f4ff', '--ov_icon_color': '#263238', '--ov_light_icon_color': '#838383', + '--ov_logo_text_color': '#15334a', + '--ov_logo_border_color': '#000000', '--ov_toolbar_background_color': '#f5f5f5', '--ov_toolbar_selected_background_color': '#e1e1e1', + '--ov_dialog_foreground_color': '#000000', + '--ov_dialog_background_color': '#ffffff', '--ov_border_color': '#cccccc', '--ov_light_border_color': '#dddddd', '--ov_shadow': '0px 0px 10px #cccccc', @@ -29,8 +33,12 @@ OV.ThemeHandler = class { '--ov_secondary_hover_color': '#e4f4ff', '--ov_icon_color': '#fafafa', '--ov_light_icon_color': '#dadada', + '--ov_logo_text_color': '#fafafa', + '--ov_logo_border_color': '#fafafa', '--ov_toolbar_background_color': '#333333', '--ov_toolbar_selected_background_color': '#444444', + '--ov_dialog_foreground_color': '#fafafa', + '--ov_dialog_background_color': '#333333', '--ov_border_color': '#444444', '--ov_light_border_color': '#333333', '--ov_shadow': 'none', diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js index f129154..8f600f1 100644 --- a/website/o3dv/js/website.js +++ b/website/o3dv/js/website.js @@ -37,6 +37,7 @@ OV.Website = class color : 0x8ec9f0, side : THREE.DoubleSide }); + this.themeHandler = new OV.ThemeHandler (); this.detailsPanel = null; this.settingsPanel = null; this.model = null; @@ -66,8 +67,7 @@ OV.Website = class this.Resize (); }); - let themeHandler = new OV.ThemeHandler (); - themeHandler.SwitchTheme ('dark'); + this.themeHandler.SwitchTheme ('dark'); } Resize () @@ -405,6 +405,17 @@ OV.Website = class this.dialog = OV.ShowSharingDialog (importer, this.settings, this.viewer.GetCamera ()); }); + // TODO: remove + let theme = 'dark'; + AddButton (this.toolbar, this.eventHandler, 'share', 'Dark Mode', true, () => { + if (theme === 'dark') { + theme = 'light' + } else { + theme = 'dark'; + } + this.themeHandler.SwitchTheme (theme); + }); + this.parameters.fileInput.on ('change', (ev) => { if (ev.target.files.length > 0) { this.eventHandler.HandleEvent ('model_load_started', { source : 'open_file' });