fix lang selection, cleanup drop menus
This commit is contained in:
Stewart Allen
parent
8967a3bd76
commit
c0d0189072
4 changed files with 69 additions and 47 deletions
|
|
@ -144,9 +144,12 @@ CAM.init = function(kiri, api) {
|
|||
isIndexed = undefined;
|
||||
isCamMode = mode === 'CAM';
|
||||
SPACE.platform.setColor(isCamMode ? 0xeeeeee : 0xcccccc);
|
||||
$('set-tools').style.display = isCamMode ? '' : 'none';
|
||||
$('camops').style.display = isCamMode && isArrange ? 'flex' : '';
|
||||
UI.func.animate.style.display = isCamMode ? '' : 'none';
|
||||
api.uc.setVisible($('set-tools'), isCamMode);
|
||||
api.uc.setVisible($('camops'), isCamMode && isArrange);
|
||||
api.uc.setVisible(UI.func.animate, isCamMode);
|
||||
// $('set-tools').style.display = isCamMode ? '' : 'none';
|
||||
// $('camops').style.display = isCamMode && isArrange ? 'flex' : '';
|
||||
// UI.func.animate.style.display = isCamMode ? '' : 'none';
|
||||
if (!isCamMode) {
|
||||
func.clearPops();
|
||||
func.tabClear();
|
||||
|
|
|
|||
|
|
@ -78,7 +78,14 @@ gapp.register("kiri.ui", [], (root, exports) => {
|
|||
confirm,
|
||||
prompt,
|
||||
alert,
|
||||
onBlur
|
||||
onBlur,
|
||||
setVisible(el, bool) {
|
||||
if (bool) {
|
||||
el.classList.remove('hide');
|
||||
} else {
|
||||
el.classList.add('hide');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function onBlur(obj, fn) {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
--menu-text: #222;
|
||||
--menu-border: #555;
|
||||
--dark-menu-text: #111;
|
||||
--menu-hover: #ddd;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Russo One';
|
||||
|
|
@ -97,6 +98,9 @@ a, a:hover, a:visited {
|
|||
.top-menu-right {
|
||||
align-items: self-end;
|
||||
}
|
||||
.top-menu-center .content > div > label {
|
||||
text-align: center !important;
|
||||
}
|
||||
.top-menu-right .content {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
|
@ -117,6 +121,10 @@ a, a:hover, a:visited {
|
|||
font-size: smaller;
|
||||
}
|
||||
#top .content {
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: var(--menu);
|
||||
border-top: 1px dashed var(--menu-border);
|
||||
border-left: 1px solid var(--menu-border);
|
||||
|
|
@ -124,29 +132,37 @@ a, a:hover, a:visited {
|
|||
border-bottom: 1px solid var(--menu-border);
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
padding: 3px 5px 3px 5px;
|
||||
gap: 4px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
#top .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 2px;
|
||||
}
|
||||
#top .content > div {
|
||||
display: contents;
|
||||
}
|
||||
#top .content > div > span {
|
||||
text-align: center;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#top .content > div > label {
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#top .content > div > span {
|
||||
text-align: right;
|
||||
}
|
||||
#top .content > div > span {
|
||||
padding: 2px 7px 2px 7px;
|
||||
padding-left: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
#top .content > div > label {
|
||||
padding: 2px 7px 2px 7px;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#top .content > div > label:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
#top .content.onecol {
|
||||
grid-template-columns: 1fr !important;
|
||||
#top .content > div:hover {
|
||||
background-color: var(--menu-hover);
|
||||
}
|
||||
|
||||
#app-name {
|
||||
|
|
@ -166,15 +182,12 @@ a, a:hover, a:visited {
|
|||
display: flex;
|
||||
}
|
||||
#app-name-pop {
|
||||
/* display: none; */
|
||||
color: var(--fg-gray);
|
||||
font-family: sans-serif;
|
||||
position: absolute;
|
||||
/* right: -6px; */
|
||||
top: 100%;
|
||||
}
|
||||
#app-name-pop .content {
|
||||
/* grid-template-columns: 1fr; */
|
||||
text-align: center;
|
||||
}
|
||||
#app-lang {
|
||||
|
|
@ -518,31 +531,30 @@ th, tr, td, label {
|
|||
#lang-hold {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: -15px;
|
||||
bottom: 0;
|
||||
top: -35px;
|
||||
left: -35px;
|
||||
right: -35px;
|
||||
bottom: -35px;
|
||||
}
|
||||
#lang-pop {
|
||||
border: 1px solid red;
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: -1px;
|
||||
align-items: stretch;
|
||||
right: calc(100% + 2px);
|
||||
top: 0;
|
||||
padding: 1px;
|
||||
text-align: right;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
align-items: stretch;
|
||||
white-space: nowrap;
|
||||
background-color: var(--menu);
|
||||
border: 1px solid var(--menu-border);
|
||||
border-radius: 4px;
|
||||
flex-direction: column;
|
||||
}
|
||||
#lang-pop > div {
|
||||
padding: 5px 7px 5px 7px;
|
||||
padding: 2px 7px 2px 7px;
|
||||
}
|
||||
#lang-pop > div:hover {
|
||||
color: #000;
|
||||
background-color: #f4f4f4;
|
||||
background-color: var(--menu-hover);
|
||||
}
|
||||
|
||||
#mid {
|
||||
|
|
@ -888,7 +900,7 @@ th, tr, td, label {
|
|||
display: block;
|
||||
}
|
||||
#camops {
|
||||
display: none;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
height: 38px;
|
||||
margin: 0 0 max(4px, env(safe-area-inset-bottom)) 0;
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@
|
|||
<i class="fas fa-map-marker"></i>
|
||||
<label>tool</label>
|
||||
<div class="top-menu-drop top-menu-left">
|
||||
<div id="pop-nozzle" class="content onecol"></div>
|
||||
<div id="pop-nozzle" class="content"></div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -121,12 +121,12 @@
|
|||
<span>
|
||||
<label>Kiri:Moto</label>
|
||||
<div id="app-name-pop" class="top-menu-drop top-menu-center">
|
||||
<div class="content onecol">
|
||||
<div class="content">
|
||||
<div id="app-help">
|
||||
<label lk="help">help</label>
|
||||
</div>
|
||||
<hr width="100%">
|
||||
<div>
|
||||
<hr width="100%">
|
||||
<label id="app-info">version</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -191,22 +191,23 @@
|
|||
<label>setup</label>
|
||||
<div class="top-menu-drop top-menu-right">
|
||||
<div class="content">
|
||||
<div id="set-prefs">
|
||||
<label lk="prefs">prefs</label>
|
||||
<span><i class="fas fa-sliders-h"></i></span>
|
||||
</div>
|
||||
<div id="set-device">
|
||||
<label lk="machine">machine</label>
|
||||
<span><i class="fas fa-cube"></i></span>
|
||||
</div>
|
||||
<div id="set-tools">
|
||||
<label lk="tools">tools<label>
|
||||
<label lk="tools">tools</label>
|
||||
<span><i class="fas fa-tools"></i></span>
|
||||
</div>
|
||||
<div id="app-export">
|
||||
<label lk="export">export</label>
|
||||
<span><i class="fas fa-download"></i></span>
|
||||
</div>
|
||||
<div id="app-lang">
|
||||
<label lk="language">language</label>
|
||||
<span><i class="fas fa-language"></i></span>
|
||||
<div id="lang-pop">
|
||||
<span id="lang-hold"></span>
|
||||
<div id="lset-zh">简体中文</div>
|
||||
<div id="lset-da">dansk</div>
|
||||
<div id="lset-de">deutsch</div>
|
||||
|
|
@ -215,12 +216,11 @@
|
|||
<div id="lset-fr">français</div>
|
||||
<div id="lset-pl">polskie</div>
|
||||
<div id="lset-pt">português</div>
|
||||
<span id="lang-hold"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-export">
|
||||
<label lk="export">export</label>
|
||||
<span><i class="fas fa-download"></i></span>
|
||||
<div id="set-prefs">
|
||||
<label lk="prefs">prefs</label>
|
||||
<span><i class="fas fa-sliders-h"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue