mirror/blockbench
2
0
Fork 0
mirror of https://github.com/JannisX11/blockbench.git synced 2024-11-21 01:13:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add dynamic icon vue component

Browse Source
This commit is contained in:
JannisX11 2023-06-22 22:35:01 +02:00
parent a26077e2f1
commit a2f4e325d9
3 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/interface/action_control.js
View File

@ -394,7 +394,7 @@ BARS.defineActions(function() {
template: `
<dialog id="action_selector" v-if="open">
<div class="tool" ref="search_type_menu" @click="openTypeMenu($event)">
<div class="icon_wrapper normal" v-html="getIconNode(search_types[search_type] ? search_types[search_type].icon : 'fullscreen').outerHTML"></div>
<dynamic-icon :icon="search_types[search_type] ? search_types[search_type].icon : 'fullscreen'" />
</div>
<input type="text" v-model="search_input" inputmode="search" @input="e => search_input = e.target.value" autocomplete="off" autosave="off" autocorrect="off" spellcheck="false" autocapitalize="off">
<i class="material-icons" id="action_search_bar_icon" @click="search_input = ''">{{ search_input ? 'clear' : 'search' }}</i>
@ -407,7 +407,7 @@ BARS.defineActions(function() {
@click="click(item, $event)"
@mouseenter="index = i"
>
<div class="icon_wrapper normal" v-html="getIconNode(item.icon, item.color).outerHTML"></div>
<dynamic-icon :icon="item.icon" :color="item.color" />
<span>{{ item.name }}</span>
<label class="keybinding_label">{{ item.keybind_label || (item.keybind ? item.keybind.label : '') }}</label>
</li>

2
js/interface/actions.js
View File

@ -2510,7 +2510,7 @@ const BARS = {
<ul class="list" id="bar_item_list">
<li v-for="item in searchedBarItems" v-on:click="addItem(item)" :class="{separator_item: item.type == 'separator'}">
<div class="icon_wrapper normal" v-html="getIconNode(item.icon, item.color).outerHTML"></div>
<dynamic-icon :icon="item.icon" :color="item.color" />
<div class="icon_wrapper add"><i class="material-icons">add</i></div>
{{ item.name }}
</li>

10
js/interface/vue_components.js
View File

@ -136,3 +136,13 @@ Vue.component('numeric-input', {
</div>
`
})
Vue.component('dynamic-icon', {
props: {
icon: String,
color: String,
},
render(h) {
let node = Blockbench.getIconNode(this.icon, this.color);
return h(node.tagName, {class: node.className, src: node.attributes.src?.value}, node.textContent);
}
})