diff --git a/website/o3dv/exportdialog.js b/website/o3dv/exportdialog.js index 6ad391b..5c2f314 100644 --- a/website/o3dv/exportdialog.js +++ b/website/o3dv/exportdialog.js @@ -216,7 +216,7 @@ OV.ExportDialog = class let fileLink = $('').addClass ('ov_dialog_file_link').appendTo (fileList); fileLink.attr ('href', url); fileLink.attr ('download', file.GetName ()); - $('').addClass ('ov_dialog_file_link_icon').attr ('src', 'assets/images/dialog/file_download.svg').appendTo (fileLink); + OV.CreateSvgIcon (fileLink, 'assets/images/dialog/file_download.svg', 'ov_dialog_file_link_icon'); $('
').addClass ('ov_dialog_file_link_text').html (file.GetName ()).appendTo (fileLink); } diff --git a/website/o3dv/modal.js b/website/o3dv/modal.js index a3242e0..36223d2 100644 --- a/website/o3dv/modal.js +++ b/website/o3dv/modal.js @@ -240,7 +240,7 @@ OV.ListPopup = class extends OV.PopupDialog { let listItemDiv = $('
').addClass ('ov_popup_list_item').appendTo (this.listDiv); if (item.icon) { - $('').addClass ('ov_popup_list_item_icon').attr ('src', item.icon).appendTo (listItemDiv); + OV.CreateSvgIcon (listItemDiv, item.icon, 'ov_popup_list_item_icon'); } if (item.color) { let iconDiv = $('
').addClass ('ov_popup_list_item_icon').appendTo (listItemDiv); diff --git a/website/o3dv/navigator.js b/website/o3dv/navigator.js index d45df71..581043f 100644 --- a/website/o3dv/navigator.js +++ b/website/o3dv/navigator.js @@ -94,7 +94,7 @@ OV.NavigatorInfoPanel = class { let button = $('
').addClass ('ov_navigator_info_button').appendTo (parentDiv); $('
').addClass ('ov_navigator_info_button_text').html (buttonText).appendTo (button); - $('').addClass ('ov_navigator_info_button_icon').attr ('src', 'assets/images/navigator/arrow_right.svg').appendTo (button); + OV.CreateSvgIcon (button, 'assets/images/navigator/arrow_right.svg', 'ov_navigator_info_button_icon'); button.click (() => { onClick (button); }); diff --git a/website/o3dv/sidebarpanel.js b/website/o3dv/sidebarpanel.js index 6bdf576..94c30ba 100644 --- a/website/o3dv/sidebarpanel.js +++ b/website/o3dv/sidebarpanel.js @@ -14,7 +14,7 @@ OV.SidebarPanel = class this.titleDiv = $('
').addClass ('ov_sidebar_title').appendTo (this.panelDiv); this.contentDiv = $('
').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv); $('
').addClass ('ov_sidebar_title_text').html (this.GetTitle ()).appendTo (this.titleDiv); - let titleImg = $('').addClass ('ov_sidebar_title_img').attr ('src', 'assets/images/sidebar/close.svg').appendTo (this.titleDiv); + let titleImg = OV.CreateSvgIcon (this.titleDiv, 'assets/images/sidebar/close.svg', 'ov_sidebar_title_img'); titleImg.click (() => { callbacks.onClose (); }); diff --git a/website/o3dv/toolbar.js b/website/o3dv/toolbar.js index 5f006c7..34c46b8 100644 --- a/website/o3dv/toolbar.js +++ b/website/o3dv/toolbar.js @@ -13,7 +13,7 @@ OV.ToolbarButton = class CreateDomElement (parentDiv) { this.buttonDiv = $('
').addClass ('ov_toolbar_button').appendTo (parentDiv); - this.buttonImg = $('').addClass ('ov_toolbar_button').appendTo (this.buttonDiv); + this.buttonImg = OV.CreateSvgIcon (this.buttonDiv); this.buttonImg.attr ('src', this.image); if (this.onClick !== null) { this.buttonDiv.click (this.onClick); diff --git a/website/o3dv/treeview.js b/website/o3dv/treeview.js index 96b0435..6247f13 100644 --- a/website/o3dv/treeview.js +++ b/website/o3dv/treeview.js @@ -28,7 +28,7 @@ OV.TreeViewButton = class CreateDomElement (parentDiv) { - this.domElement = $('').addClass ('ov_tree_item_button').appendTo (parentDiv); + this.domElement = OV.CreateSvgIcon (parentDiv, this.imagePath, 'ov_tree_item_button'); this.domElement.attr ('src', this.imagePath); if (this.clickHandler !== null) { this.domElement.click (this.clickHandler); @@ -234,9 +234,9 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem CreateDomElement (parentDiv) { this.CreateMainElement (parentDiv); - $('').addClass ('ov_tree_item_icon').attr ('src', this.iconPath).appendTo (this.mainElement); + OV.CreateSvgIcon (this.mainElement, this.iconPath, 'ov_tree_item_icon'); let buttonContainer = $('
').addClass ('ov_tree_item_button_container').appendTo (this.mainElement); - this.openCloseButton = $('').addClass ('ov_tree_item_button').attr ('src', this.openButtonPath).appendTo (buttonContainer); + this.openCloseButton = OV.CreateSvgIcon (buttonContainer, this.openButtonPath, 'ov_tree_item_button'); this.CreateNameElement (); } }; diff --git a/website/o3dv/utils.js b/website/o3dv/utils.js index 3584681..a55f0b1 100644 --- a/website/o3dv/utils.js +++ b/website/o3dv/utils.js @@ -116,7 +116,19 @@ OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName) OV.DownloadUrlAsFile (url, fileName); }; -OV.CreateIconButton = function (iconName, hoverIconName, title, link) +OV.CreateSvgIcon = function (parent, sourceImage, extraClass) +{ + let img = $('').addClass ('svg_icon').appendTo (parent); + if (sourceImage !== undefined && sourceImage !== null) { + img.attr ('src', sourceImage); + } + if (extraClass !== undefined && extraClass !== null) { + img.addClass (extraClass); + } + return img; +}; + +OV.CreateHeaderButton = function (iconName, hoverIconName, title, link) { let buttonLink = $(''); buttonLink.attr ('href', link); diff --git a/website/o3dv/website.css b/website/o3dv/website.css index 22cb4ff..317873f 100644 --- a/website/o3dv/website.css +++ b/website/o3dv/website.css @@ -28,6 +28,12 @@ img display: block; } +img.svg_icon +{ + width: 18px; + height: 18px; +} + div.header { overflow: auto; @@ -199,12 +205,6 @@ div.ov_toolbar div.ov_toolbar_button.selected background: #e1e1e1; } -div.ov_toolbar img.ov_toolbar_button -{ - width: 18px; - height: 18px; -} - div.ov_toolbar div.ov_toolbar_separator { background: #cccccc; @@ -254,8 +254,6 @@ div.ov_navigator_info_panel div.ov_navigator_info_button_text div.ov_navigator_info_panel img.ov_navigator_info_button_icon { - width: 18px; - height: 18px; padding: 6px; float: right; } @@ -278,8 +276,6 @@ div.ov_sidebar_title div.ov_sidebar_title_text div.ov_sidebar_title img.ov_sidebar_title_img { - width: 18px; - height: 18px; float: right; cursor: pointer; } @@ -357,8 +353,6 @@ div.ov_tree_view div.ov_tree_item_button_container div.ov_tree_view img.ov_tree_item_button { - width: 18px; - height: 18px; padding: 5px; float: left; cursor: pointer; @@ -366,8 +360,6 @@ div.ov_tree_view img.ov_tree_item_button div.ov_tree_view img.ov_tree_item_icon { - width: 18px; - height: 18px; padding: 5px; float: left; } @@ -527,8 +519,6 @@ div.ov_dialog a.ov_dialog_file_link div.ov_dialog img.ov_dialog_file_link_icon { - width: 18px; - height: 18px; margin-right: 10px; float: left; } @@ -657,8 +647,6 @@ div.ov_popup div.ov_popup_list_item div.ov_popup img.ov_popup_list_item_icon { - width: 18px; - height: 18px; margin-right: 10px; float: left; }