Skip to content

Commit

Permalink
website - more icon options added + icons updated
Browse files Browse the repository at this point in the history 
- button added to switch settings and display of buttons changed
- option to change icon font size added
- option to change icon size added
- bootstrap icons updated
- tabler icons updated to always use the latest version
  • Loading branch information
@spilymp
spilymp committed Jun 30, 2022
1 parent 30bee88 commit 794130c
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 21 deletions.
29 changes: 26 additions & 3 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,35 @@ h3 {
text-align: right;
}

.align-left {
text-align: left;
}

label {
text-align: right;
}

hr {
border: solid 1px #d2d2d2;
width : 100%;
width: 100%;
}

footer {
font-size: 0.8em;
}

.icon {
max-width: 300px;
}

.visibility-hidden {
visibility: hidden;
}

/**
* Special classes for the button to open icon websites.
*/

.icon-set-website .column:nth-child(2) {
padding-right: 0rem;
}
Expand All @@ -48,8 +64,15 @@ footer {
width: 100%;
}

.icon-set-website .column:nth-child(3) a i {
padding-bottom: 0.3rem;
.button-icon {
padding-bottom: 0.4rem;
font-size: 2rem;
vertical-align: middle;
}

/**
* Special classe to toggle the settings.
*/
.settings-card.deactivated {
display: none;
}
120 changes: 102 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<!-- Font Awesome -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css"
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Simple Line Icons -->
Expand All @@ -26,15 +26,14 @@
crossorigin="anonymous" />

<!-- Bootstrap Icons-->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
as="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" as="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<!-- Remix Icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

<!-- Tabler Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@1.63.0/iconfont/tabler-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/@tabler/icons@latest/iconfont/tabler-icons.min.css">

<!-- Weather Icons-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css" rel="stylesheet">
Expand All @@ -56,16 +55,24 @@
let icon = new IBO_ICON({
'font_color': document.getElementById('iconFontColor').value,
'font_family': document.getElementById('iconSet').value,
'font_size': document.getElementById('iconFontSizeValue').value,
'icon_background': document.getElementById('iconBackgroundColor').value,
'icon_class': document.getElementById('iconClass').value,
'icon_width': document.getElementById('iconSizeValue').value,
'odoo_version': document.getElementById('odooVersion').value,
});
icon.draw("icon");
}

function toggle_settings() {
document.querySelectorAll('.settings-card').forEach(function (element) {
element.classList.toggle('deactivated');
});
}

function download() {
var image = document.getElementsByClassName('ibo-icon-canvas')[0].toDataURL("image/png").replace("image/png", "image/octet-stream");
document.getElementById("download").setAttribute("href", image);
let image = document.getElementsByClassName('ibo-icon-canvas')[0].toDataURL("image/png").replace("image/png", "image/octet-stream");
document.getElementById('download').setAttribute('href', image);
}

function populateIconSetWebsite() {
Expand Down Expand Up @@ -133,7 +140,8 @@ <h1>IBO - Icon Builder for Odoo</h1>

<div class="container">
<div class="row row-center">
<div class="column align-center">
<div class="column align-center settings-card front">

<div class="row">
<div class="column column-center">
<label for="odooVersion">Odoo Version</label>
Expand Down Expand Up @@ -168,8 +176,9 @@ <h1>IBO - Icon Builder for Odoo</h1>
</div>

<div class="column">
<a href="https://fontawesome.com/v5/search?m=free&s=solid%2Cregular" id="iconSetWebsite" class="button button-outline" target="_blank">
<i class="fas fa-globe-europe"></i>
<a href="https://fontawesome.com/v5/search?m=free&s=solid%2Cregular" id="iconSetWebsite"
class="button button-outline" target="_blank">
<i class="fas fa-globe-europe button-icon"></i>
</a>
</div>
</div>
Expand All @@ -183,6 +192,40 @@ <h1>IBO - Icon Builder for Odoo</h1>
</div>
</div>

<div class="row">
<div class="column column-center">
<label for="iconBackgroundColor">Icon Background Color</label>
</div>
<div class="column">
<input type="color" onchange="clickColor(0, -1, -1, 5)" value="#9b4dca"
id="iconBackgroundColor">
</div>
</div>

<div class="row">
<div class="column align-right">

<button class="button button-outline" type="submit" value="Switch Settings" onclick="toggle_settings()">
<i class="fas fa-sliders-h button-icon"></i>
</button>

<button class="button button-outline" type="submit" value="Generate" onclick="generate()">
<i class="fas fa-play button-icon"></i>
</button>

<a id="download" download="odoo_icon.png">
<button type="submit" value="Download" onclick="download()">
Download
</button>
</a>

</div>
</div>

</div>

<div class="column align-center settings-card back deactivated">

<div class="row">
<div class="column column-center">
<label for="iconFontColor">Icon Font Color</label>
Expand All @@ -193,24 +236,63 @@ <h1>IBO - Icon Builder for Odoo</h1>
</div>

<div class="row">

<div class="column column-center">
<label for="iconBackgroundColor">Icon Background Color</label>
<label for="iconSize">Icon Font Size</label>
</div>
<div class="column">
<input type="color" onchange="clickColor(0, -1, -1, 5)" value="#9b4dca"
id="iconBackgroundColor">
<div class="row" id="iconSize">
<div class="column column-center">
<input id="iconSizeSlider" type="range" value="300" min="100" max="800" oninput="document.getElementById('iconSizeValue').value = this.value">
</div>
<div class="column column-center">
<input id="iconSizeValue" type="text" value="300">
</div>
</div>
</div>

</div>

<div class="row">
<div class="column column-center">
<label for="iconFontSize">Icon Font Size</label>
</div>
<div class="column">
<div class="row" id="iconFontSize">
<div class="column column-center">
<input id="iconFontSizeSlider" type="range" value="150" min="00" max="800" oninput="document.getElementById('iconFontSizeValue').value = this.value">
</div>
<div class="column column-center">
<input id="iconFontSizeValue" type="text" value="150">
</div>
</div>
</div>
</div>

<!-- placeholder -->
<div class="row">
<div class="column">
<input type="text" class="visibility-hidden">
</div>
<div class="column align-center">
</div>

<div class="row">
<div class="column align-right">

<button class="button button-outline" type="submit" value="Switch Settings" onclick="toggle_settings()">
<i class="fas fa-sliders-h button-icon"></i>
</button>

<button class="button button-outline" type="submit" value="Generate" onclick="generate()">
<i class="fas fa-play button-icon"></i>
</button>

<a id="download" download="odoo_icon.png">
<button class="button" type="submit" value="Download" onclick="download()">Download</button>
<button type="submit" value="Download" onclick="download()">
Download
</button>
</a>
<input class="button button-outline" type="submit" value="Generate" onclick="generate()">

</div>
</div>

Expand Down Expand Up @@ -238,7 +320,8 @@ <h2>Documentation</h2>
To set an icon you have to find and enter the corresponding css class.
Please check the corresponding page of the icon set for this purpose:
<ul>
<li><a href="https://fontawesome.com/v5/search?m=free&s=solid%2Cregular">Font Awesome 5 Solid & Regular</a></li>
<li><a href="https://fontawesome.com/v5/search?m=free&s=solid%2Cregular">Font Awesome 5 Solid &
Regular</a></li>
<li><a href="https://fontawesome.com/v5/search?m=free&s=brands">Font Awesome 5 Brands</a></li>
<li><a href="https://fontawesome.com/v4/icons/">Font Awesome 4.7</a></li>
<li><a href="https://icons.getbootstrap.com/">Bootstrap Icons</a></li>
Expand Down Expand Up @@ -352,7 +435,8 @@ <h3>Parameter</h3>
<td>icon_class</td>
<td>e.g. "fas fa-address-card"</td>
<td>CSS class name of your symbol for the icon, the class will automatically try to find
the corresponding unicode. If an unicode (parameter "icon_text") is set the class will be ignored.</td>
the corresponding unicode. If an unicode (parameter "icon_text") is set the class will
be ignored.</td>
</tr>
<tr>
<td>icon_text</td>
Expand Down

0 comments on commit 794130c

Please sign in to comment.