Skip to content

Commit

Permalink
fix: use SVG icons instead of Unicode characters
Browse files Browse the repository at this point in the history
  • Loading branch information
@teddy-gustiaux
teddy-gustiaux committed Apr 21, 2019
1 parent 8a6c001 commit 0134689
Show file tree
Hide file tree
Showing 12 changed files with 78 additions and 24 deletions.
46 changes: 35 additions & 11 deletions src/options/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,6 @@ a:hover {
margin-right: 0.8rem;
}

.release-info:after {
content: "\00A0\2197";
}

.select select {
background-color: var(--bg-color);
color: var(--font-color);
Expand All @@ -143,12 +139,14 @@ a:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: white;
fill: white;
}

.button.is-link.is-outlined {
background-color: transparent;
border-color: var(--primary-color);
color: var(--primary-color);
fill: var(--primary-color);
}

.select:not(.is-multiple):not(.is-loading)::after {
Expand All @@ -159,6 +157,34 @@ a:hover {
border-color: var(--font-color);
}


/* ======================== */
/* ====== SVG icons ======= */
/* ======================== */

.svg-icon-tab {
fill: var(--font-color);
width: 1.5rem;
height: 1.5rem;
}

.svg-icon-link {
width: 1.2rem;
height: 1.2rem;
}

.svg-icon-theme-switch svg {
fill: var(--font-color);
width: 1.8rem;
height: 1.8rem;
}

.svg-icon-dropdown {
fill: var(--font-color);
width: 1.2rem;
height: 1.2rem;
}

/* ======================== */
/* ===== Theme switch ===== */
/* ======================== */
Expand All @@ -167,17 +193,15 @@ a:hover {
padding-left: 3.5rem;
}

.theme-switch-icon {
font-size: 1.6rem;
}
.theme-switch-icon.theme-switch-icon-left {
.theme-switch-icon-left {
padding-right: 0.3rem;
}

.theme-switch-wrapper {
float:right; clear:right;
float:right;
clear:right;
}

.switch[type="checkbox"] + label {
padding-top: 0.45rem;
.theme-switch-wrapper .switch[type="checkbox"] + label {
padding-top: 0.7rem;
}
1 change: 1 addition & 0 deletions src/options/img/icons/about.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/options/img/icons/bookmark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/options/img/icons/code.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/options/img/icons/external-link.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/options/img/icons/folder.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/options/img/icons/moon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/options/img/icons/star.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/options/img/icons/sun.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 23 additions & 13 deletions src/options/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ <h1 class="title" data-locale="options_title"></h1>
</div>
<div class="column is-one-fifth">
<div class="theme-switch-wrapper">
<span class="theme-switch-icon theme-switch-icon-left">&#9728;</span>
<span class="theme-switch-icon-left svg-icon-theme-switch" data-svg="img/icons/sun.svg"></span>
<input id="theme-switch" class="switch is-rounded is-info" type="checkbox">
<label for="theme-switch"></label>
<span class="theme-switch-icon">&#9790;</span>
<span class="svg-icon-theme-switch" data-svg="img/icons/moon.svg"></span>
</div>
</div>
</div>
Expand All @@ -41,25 +41,29 @@ <h1 class="title" data-locale="options_title"></h1>
<ul>
<li class="item is-active tab_menu" data-tab="1">
<a>
<span class="icon is-small tab-icon">&#10100;&#10101;</span>
<span class="svg-icon-tab" data-svg="img/icons/code.svg"></span>
<span>&nbsp;</span>
<span data-locale="options_release_notes"></span>
</a>
</li>
<li class="item tab_menu" data-tab="2">
<a>
<span class="icon is-small tab-icon">&#9873;</span>
<span class="svg-icon-tab" data-svg="img/icons/bookmark.svg"></span>
<span>&nbsp;</span>
<span data-locale="options_ff_built_in"></span>
</a>
</li>
<li class="item tab_menu" data-tab="3">
<a>
<span class="icon is-small tab-icon">&#128970;</span>
<span class="svg-icon-tab" data-svg="img/icons/star.svg"></span>
<span>&nbsp;</span>
<span data-locale="options_quick_bookmark_icon"></span>
</a>
</li>
<li class="item tab_menu" data-tab="4">
<a>
<span class="icon is-small tab-icon">&#8505;</span>
<span class="svg-icon-tab" data-svg="img/icons/about.svg"></span>
<span>&nbsp;</span>
<span data-locale="options_about"></span>
</a>
</li>
Expand All @@ -85,10 +89,16 @@ <h1 class="title" data-locale="options_title"></h1>
<p data-locale="options_release_changelog_github"></p>
</div>
<div class="field">
<a class="button is-link is-outlined release-info" data-locale="options_release_latest_changelog"
href="https://github.com/teddy-gustiaux/default-bookmark-folder/releases/latest" target="_blank"></a>
<a class="button is-link is-outlined release-info" data-locale="options_release_full_changelog"
href="https://github.com/teddy-gustiaux/default-bookmark-folder/blob/master/CHANGELOG.md" target="_blank"></a>
<a class="button is-link is-outlined release-info" href="https://github.com/teddy-gustiaux/default-bookmark-folder/releases/latest" target="_blank">
<span data-locale="options_release_latest_changelog"></span>
<span>&nbsp;</span>
<span class="svg-icon-link" data-svg="img/icons/external-link.svg"></span>
</a>
<a class="button is-link is-outlined release-info" href="https://github.com/teddy-gustiaux/default-bookmark-folder/blob/master/CHANGELOG.md" target="_blank">
<span data-locale="options_release_full_changelog"></span>
<span>&nbsp;</span>
<span class="svg-icon-link" data-svg="img/icons/external-link.svg"></span>
</a>
</div>
</div>
<!-- END OPTIONS TAB -->
Expand All @@ -113,7 +123,7 @@ <h1 class="title" data-locale="options_title"></h1>
</select>
</div>
<div class="icon is-small is-left">
&#128447;
<span class="svg-icon-dropdown" data-svg="img/icons/folder.svg"></span>
</div>
</div>
<p class="help"><span data-locale="options_ff_built_in_folder_help_1"></span> <i data-locale="options_ff_built_in_folder_help_2"></i>.</p>
Expand All @@ -137,7 +147,7 @@ <h1 class="title" data-locale="options_title"></h1>
</select>
</div>
<div class="icon is-small is-left">
&#128447;
<span class="svg-icon-dropdown" data-svg="img/icons/folder.svg"></span>
</div>
</div>
<p class="help"><span data-locale="options_ff_built_in_folder_all_tabs_help_1"></span> <i data-locale="options_ff_built_in_folder_all_tabs_help_2"></i>.</p>
Expand Down Expand Up @@ -191,7 +201,7 @@ <h1 class="title" data-locale="options_title"></h1>
</select>
</div>
<div class="icon is-small is-left">
&#128447;
<span class="svg-icon-dropdown" data-svg="img/icons/folder.svg"></span>
</div>
</div>
<p class="help"><span data-locale="options_icon_folder_help_1"></span> <i data-locale="options_icon_folder_help_2"></i>.</p>
Expand Down
11 changes: 11 additions & 0 deletions src/options/scripts/display.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,17 @@ function insertDataFromManifest() {
document.querySelector(AUTHOR).textContent = manifest.author;
}

// Inserts SVG icons inline
function insertSvgIcons() {
const elementsWithSvgIcon = document.querySelectorAll('[data-svg]');
Array.from(elementsWithSvgIcon).forEach(async elementWithSvgIcon => {
const svgUrl = browser.runtime.getURL(`options/${elementWithSvgIcon.dataset.svg}`);
const response = await fetch(svgUrl);
const data = await response.text();
elementWithSvgIcon.insertAdjacentHTML('afterbegin', data);
});
}

// -------------------------------------------------------------------------------------------------
// TABS
// -------------------------------------------------------------------------------------------------
Expand Down
1 change: 1 addition & 0 deletions src/options/scripts/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ function saveOptions() {

function insertData() {
insertDataFromLocales();
insertSvgIcons();
insertDataFromManifest();
}

Expand Down

0 comments on commit 0134689

Please sign in to comment.