Added secondary tool icon (#141)

* Added secondary tool icon

* Create secondary icon in html instead of js

* Revert change to handlebars integrity

* revert package.lock changes

* revert package.lock changes

* Set styles in css instead of js+html

Co-authored-by: James Deacon <james@volute.co.uk>
Co-authored-by: Ophir LOJKINE <pere.jobs@gmail.com>
Co-authored-by: Ophir LOJKINE <ophir.lojkine@auto-grid.com>
This commit is contained in:
jamesdeacon 2020-10-14 22:35:14 +01:00 committed by GitHub
parent eab4370376
commit 96414aa2f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 2 deletions

View file

@ -88,6 +88,7 @@ html, body, svg {
}
#menu .tool {
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
@ -190,6 +191,24 @@ html, body, svg {
}
#menu .tool.hasSecondary .tool-icon{
margin-top:0px;
margin-left:0px;
}
#menu .tool .tool-icon.secondaryIcon{
display: none;
}
#menu .tool.hasSecondary .tool-icon.secondaryIcon{
display: block;
position: absolute;
bottom: 0px;
left: 26px;
width: 12px;
height: 12px;
}
input {
font-size:16px;
}

View file

@ -39,7 +39,9 @@
<div id="menuItems">
<ul id="tools" class="tools">
<li class="tool" tabindex="-1">
<img class="tool-icon" width="35" height="35" src="" alt="icon" /><span class="tool-name"></span>
<img class="tool-icon" width="35" height="35" src="" alt="icon" />
<span class="tool-name"></span>
<img class="tool-icon secondaryIcon" width="35" height="35" src="data:," alt="icon" />
</li>
</ul>

View file

@ -123,6 +123,12 @@ Tools.HTML = {
Tools.i18n.t("keyboard shortcut") + ": " +
toolShortcut + ")" +
(Tools.list[toolName].secondary ? " [" + Tools.i18n.t("click_to_toggle") + "]" : "");
if(Tools.list[toolName].secondary) {
elem.classList.add('hasSecondary');
var secondaryIcon = elem.getElementsByClassName('secondaryIcon')[0];
secondaryIcon.src = Tools.list[toolName].secondary.icon;
toolIconElem.classList.add("primaryIcon");
}
});
},
changeTool: function (oldToolName, newToolName) {
@ -133,6 +139,16 @@ Tools.HTML = {
},
toggle: function (toolName, name, icon) {
var elem = document.getElementById("toolID-" + toolName);
// Change secondary icon
var primaryIcon = elem.getElementsByClassName("primaryIcon")[0];
var secondaryIcon = elem.getElementsByClassName("secondaryIcon")[0];
var primaryIconSrc = primaryIcon.src;
var secondaryIconSrc = secondaryIcon.src;
primaryIcon.src = secondaryIconSrc;
secondaryIcon.src = primaryIconSrc;
// Change primary icon
elem.getElementsByClassName("tool-icon")[0].src = icon;
elem.getElementsByClassName("tool-name")[0].textContent = Tools.i18n.t(name);
},

2
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "whitebophir",
"version": "1.6.2",
"version": "1.6.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {