add language drop-down selector

This commit is contained in:
Stewart Allen 2020-04-02 17:06:38 -04:00
commit a55502cf92
3 changed files with 48 additions and 4 deletions

View file

@ -1464,6 +1464,23 @@ var gs_kiri_init = exports;
UI.modeExport.innerHTML = "E<u>x</u>port";
}
// populate language drop-down
let lp = $('langpop');
let elp = DOC.createElement("div");
let dlp = DOC.createElement("div");
elp.appendChild(DOC.createTextNode('english'));
dlp.appendChild(DOC.createTextNode('danish'));
lp.appendChild(elp);
lp.appendChild(dlp);
elp.onclick = function() {
SDB.setItem('kiri-lang', 'en-us');
LOC.reload();
};
dlp.onclick = function() {
SDB.setItem('kiri-lang', 'da-dk');
LOC.reload();
};
SPACE.addEventHandlers(self, [
'keyup', keyUpHandler,
'keydown', keyDownHandler,

View file

@ -21,8 +21,9 @@
<body>
<!-- app title home page links -->
<div id="appid">
<span id="applang" title="language">A<div id="langpop"></div></span>
<span><a href="#" id="appname">Kiri:Moto</a> by <a href="/" target="home">Grid.Space</a></span>
<span id="apphelp">?</span>
<span id="apphelp" title="help">?</span>
</div>
<!-- left control menu -->
<div id="control-left" class="control"><div id="assets"></div></div>

View file

@ -232,6 +232,9 @@ th, tr, td, span, div, label, button {
background-color: rgba(170,221,255,0.75);
color: rgba(0,0,0,0.5);
}
#appid span:hover {
background-color: rgba(170,221,255,0.5);
}
#appid a {
color: rgba(0,0,0,0.75);
font-weight: bold;
@ -239,12 +242,35 @@ th, tr, td, span, div, label, button {
#appid a:hover {
color: rgba(0,50,50,0.75);
}
#applang:hover .drop {
display: block;
}
#apphelp {
margin-left: 5px;
}
#applang {
position: relative;
margin-right: 5px;
font-weight: bold;
}
#langpop {
display: none;
position: absolute;
white-space: nowrap;
top: 105%;
left: 0;
border-radius: 5px;
border: 1px solid #ddd;
background-color: rgba(255,255,255,0.75);
padding: 5px;
}
#langpop > div {
padding: 5px;
}
#langpop > div:hover {
background-color: rgba(255,128,128,0.5);
border-radius: 5px;
}
#applang:hover #langpop {
display: block;
}
#container {
width: 100%;
height: 100%;