mirror of
https://github.com/lovasoa/whitebophir
synced 2024-11-10 06:24:17 +00:00
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:
parent
eab4370376
commit
96414aa2f1
4 changed files with 39 additions and 2 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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
2
package-lock.json
generated
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "whitebophir",
|
||||
"version": "1.6.2",
|
||||
"version": "1.6.3",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
Loading…
Reference in a new issue