Create function for icon creation.

This commit is contained in:
kovacsv 2021-07-25 09:30:57 +02:00
parent 4475e3faf2
commit 6e05b1a584
8 changed files with 27 additions and 27 deletions

View File

@ -216,7 +216,7 @@ OV.ExportDialog = class
let fileLink = $('<a>').addClass ('ov_dialog_file_link').appendTo (fileList);
fileLink.attr ('href', url);
fileLink.attr ('download', file.GetName ());
$('<img>').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');
$('<div>').addClass ('ov_dialog_file_link_text').html (file.GetName ()).appendTo (fileLink);
}

View File

@ -240,7 +240,7 @@ OV.ListPopup = class extends OV.PopupDialog
{
let listItemDiv = $('<div>').addClass ('ov_popup_list_item').appendTo (this.listDiv);
if (item.icon) {
$('<img>').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 = $('<div>').addClass ('ov_popup_list_item_icon').appendTo (listItemDiv);

View File

@ -94,7 +94,7 @@ OV.NavigatorInfoPanel = class
{
let button = $('<div>').addClass ('ov_navigator_info_button').appendTo (parentDiv);
$('<div>').addClass ('ov_navigator_info_button_text').html (buttonText).appendTo (button);
$('<img>').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);
});

View File

@ -14,7 +14,7 @@ OV.SidebarPanel = class
this.titleDiv = $('<div>').addClass ('ov_sidebar_title').appendTo (this.panelDiv);
this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
$('<div>').addClass ('ov_sidebar_title_text').html (this.GetTitle ()).appendTo (this.titleDiv);
let titleImg = $('<img>').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 ();
});

View File

@ -13,7 +13,7 @@ OV.ToolbarButton = class
CreateDomElement (parentDiv)
{
this.buttonDiv = $('<div>').addClass ('ov_toolbar_button').appendTo (parentDiv);
this.buttonImg = $('<img>').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);

View File

@ -28,7 +28,7 @@ OV.TreeViewButton = class
CreateDomElement (parentDiv)
{
this.domElement = $('<img>').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);
$('<img>').addClass ('ov_tree_item_icon').attr ('src', this.iconPath).appendTo (this.mainElement);
OV.CreateSvgIcon (this.mainElement, this.iconPath, 'ov_tree_item_icon');
let buttonContainer = $('<div>').addClass ('ov_tree_item_button_container').appendTo (this.mainElement);
this.openCloseButton = $('<img>').addClass ('ov_tree_item_button').attr ('src', this.openButtonPath).appendTo (buttonContainer);
this.openCloseButton = OV.CreateSvgIcon (buttonContainer, this.openButtonPath, 'ov_tree_item_button');
this.CreateNameElement ();
}
};

View File

@ -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 = $('<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 = $('<a>');
buttonLink.attr ('href', link);

View File

@ -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;
}