Refactor action control, support toggles

This commit is contained in:
JannisX11 2021-02-10 14:05:25 +01:00
parent 218ee55e1f
commit 62e2625744
3 changed files with 22 additions and 18 deletions

View File

@ -844,7 +844,7 @@
margin-left: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
#action_selector > div > ul {
#action_selector ul {
background-color: var(--color-bright_ui);
color: var(--color-accent_text);
min-height: 20px;
@ -861,7 +861,7 @@
font-size: 0.94em
}
#action_selector ul > li {
height: 32px;
height: 30px;
padding: 4px;
overflow: hidden;
display: flex;
@ -871,7 +871,7 @@
flex-grow: 0;
flex-shrink: 0;
}
#action_selector ul > li div.name {
#action_selector ul > li span {
padding-left: 4px;
flex-grow: 1;
flex-shrink: 0;

View File

@ -645,20 +645,7 @@
<div id="page_wrapper" class="hidden">
<dialog id="action_selector" v-if="open">
<input type="text" v-model="search_input" autocomplete="off" autosave="off" autocorrect="off" spellcheck="off" autocapitalize="off">
<i class="material-icons" id="action_search_bar_icon">search</i>
<div>
<ul>
<li v-for="(item, i) in actions" v-on:click="ActionControl.click(item, $event)" v-bind:class="{selected: i === index}" v-on:mouseenter="index = i">
<div class="icon_wrapper normal" v-html="Blockbench.getIconNode(item.icon, item.color).outerHTML"></div>
<div class="name">{{ item.name }}</div>
<label>{{ item.keybind.label }}</label>
</li>
</ul>
<div class="small_text" v-if="actions[index]">{{ Pressing.alt ? actions[index].keybind.label : actions[index].description }}</div>
</div>
</dialog>
<dialog id="action_selector"></dialog>
<div id="blackout" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"></div>

View File

@ -1948,7 +1948,24 @@ const BARS = {
}
return list;
}
}
},
template: `
<dialog id="action_selector" v-if="open">
<input type="text" v-model="search_input" autocomplete="off" autosave="off" autocorrect="off" spellcheck="off" autocapitalize="off">
<i class="material-icons" id="action_search_bar_icon">search</i>
<div>
<ul>
<li v-for="(item, i) in actions"
v-html="item.menu_node.innerHTML"
:class="{selected: i === index}"
@click="ActionControl.click(item, $event)"
@mouseenter="index = i"
></li>
</ul>
<div class="small_text" v-if="actions[index]">{{ Pressing.alt ? actions[index].keybind.label : actions[index].description }}</div>
</div>
</dialog>
`
})
},
updateConditions() {