mirror of
https://github.com/JannisX11/blockbench.git
synced 2025-04-12 17:41:57 +08:00
Add hybrid submenu system
This commit is contained in:
JannisX11
parent
9dcf166f6f
commit
5cf1dd9cde
@ -517,22 +517,25 @@
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin-right: -12px;
|
||||
margin-left: 6px;
|
||||
margin-top: -1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.contextMenu li.enabled {
|
||||
padding-left: 29px;
|
||||
border-left: 5px solid var(--color-accent);
|
||||
}
|
||||
.contextMenu li.focused, .contextMenu li.parent.opened {
|
||||
.contextMenu li.focused,
|
||||
.contextMenu li.parent.opened,
|
||||
.contextMenu li.hybrid_parent.opened {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
.contextMenu li i {
|
||||
.contextMenu li > i {
|
||||
margin-top: 1px;
|
||||
margin-right: 4px;
|
||||
margin-left: -28px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.contextMenu li img {
|
||||
.contextMenu li > img {
|
||||
cursor: default;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@ -543,16 +546,31 @@
|
||||
margin-right: 5px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.contextMenu li span {
|
||||
.contextMenu li > span {
|
||||
pointer-events: none;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
.contextMenu li.focused > .contextMenu.sub {
|
||||
.contextMenu li.parent.focused > .contextMenu.sub {
|
||||
display: block;
|
||||
}
|
||||
.contextMenu li.hybrid_parent.opened > .contextMenu.sub {
|
||||
display: block;
|
||||
}
|
||||
.contextMenu li.opened > .contextMenu.sub {
|
||||
display: block;
|
||||
}
|
||||
.contextMenu .menu_more_button {
|
||||
background-color: var(--color-bright_ui);
|
||||
width: 28px;
|
||||
margin: -4px -8px -4px 2px;
|
||||
padding: 4px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.contextMenu .menu_more_button:hover,
|
||||
.hybrid_parent.opened .menu_more_button {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
li.menu_separator {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
|
||||
@ -1305,24 +1305,25 @@ BARS.defineActions(function() {
|
||||
new Action('timeline_setups', {
|
||||
name: 'menu.timeline.setups',
|
||||
icon: 'folder_special',
|
||||
condition: {modes: ['animate'], project: true, method: () => Project.timeline_setups.length},
|
||||
children() {
|
||||
return Project.timeline_setups.map(setup => {
|
||||
return {
|
||||
name: setup.name,
|
||||
icon: 'star_outline',
|
||||
click() {
|
||||
Timeline.vue._data.animators.purge();
|
||||
unselectAll();
|
||||
setup.animators.forEach(uuid => {
|
||||
var ba = Animation.selected.animators[uuid]
|
||||
if (ba) ba.addToTimeline();
|
||||
})
|
||||
Timeline.vue.channels.position = !!setup.channels.position;
|
||||
Timeline.vue.channels.rotation = !!setup.channels.rotation;
|
||||
Timeline.vue.channels.scale = !!setup.channels.scale;
|
||||
Timeline.vue.channels.hide_empty = !!setup.channels.hide_empty;
|
||||
},
|
||||
children: [
|
||||
{icon: 'check_circle', name: 'menu.preview.angle.load', click() {
|
||||
Timeline.vue._data.animators.purge();
|
||||
unselectAll();
|
||||
setup.animators.forEach(uuid => {
|
||||
var ba = Animation.selected.animators[uuid]
|
||||
if (ba) ba.addToTimeline();
|
||||
})
|
||||
Timeline.vue.channels.position = !!setup.channels.position;
|
||||
Timeline.vue.channels.rotation = !!setup.channels.rotation;
|
||||
Timeline.vue.channels.scale = !!setup.channels.scale;
|
||||
Timeline.vue.channels.hide_empty = !!setup.channels.hide_empty;
|
||||
}},
|
||||
{icon: 'delete', name: 'generic.delete', click() {
|
||||
Project.timeline_setups.remove(setup);
|
||||
}}
|
||||
@ -1338,6 +1339,7 @@ BARS.defineActions(function() {
|
||||
name: 'menu.timeline.save_setup',
|
||||
description: 'menu.timeline.save_setup.desc',
|
||||
icon: 'star',
|
||||
condition: {modes: ['animate']},
|
||||
async click() {
|
||||
let name = await Blockbench.textPrompt('generic.name', 'Timeline Setup');
|
||||
let setup = {
|
||||
@ -1351,6 +1353,7 @@ BARS.defineActions(function() {
|
||||
animators: Timeline.animators.map(animator => animator.uuid),
|
||||
};
|
||||
Project.timeline_setups.push(setup);
|
||||
BARS.updateConditions();
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@ -24,17 +24,19 @@ class Menu {
|
||||
this.node = $('<ul class="contextMenu"></ul>')[0]
|
||||
this.structure = structure
|
||||
}
|
||||
hover(node, event) {
|
||||
hover(node, event, expand) {
|
||||
if (event) event.stopPropagation()
|
||||
$(open_menu.node).find('li.focused').removeClass('focused')
|
||||
$(open_menu.node).find('li.opened').removeClass('opened')
|
||||
var obj = $(node)
|
||||
obj.addClass('focused')
|
||||
obj.parents('li.parent').addClass('opened')
|
||||
obj.parents('li.parent, li.hybrid_parent').addClass('opened')
|
||||
|
||||
if (obj.hasClass('parent')) {
|
||||
if (obj.hasClass('parent') || (expand && obj.hasClass('hybrid_parent'))) {
|
||||
var childlist = obj.find('> ul.contextMenu.sub')
|
||||
|
||||
if (expand) obj.addClass('opened');
|
||||
|
||||
var p_width = obj.outerWidth()
|
||||
childlist.css('left', p_width + 'px')
|
||||
var el_width = childlist.width()
|
||||
@ -136,17 +138,14 @@ class Menu {
|
||||
ctxmenu.children().detach()
|
||||
|
||||
function createChildList(object, node) {
|
||||
|
||||
if (typeof object.children == 'function') {
|
||||
var list = object.children(context)
|
||||
} else {
|
||||
var list = object.children
|
||||
}
|
||||
node.find('ul.contextMenu.sub').detach();
|
||||
if (list.length) {
|
||||
node.addClass('parent')
|
||||
.find('ul.contextMenu.sub').detach()
|
||||
var childlist = $('<ul class="contextMenu sub"></ul>')
|
||||
node.append(childlist)
|
||||
list.forEach(function(s2, i) {
|
||||
getEntry(s2, childlist)
|
||||
})
|
||||
@ -154,6 +153,17 @@ class Menu {
|
||||
if (last.length && last.hasClass('menu_separator')) {
|
||||
last.remove()
|
||||
}
|
||||
if (typeof object.click == 'function' && object instanceof Action == false) {
|
||||
node.addClass('hybrid_parent');
|
||||
let more_button = Interface.createElement('div', {class: 'menu_more_button'}, Blockbench.getIconNode('more_horiz'));
|
||||
node.append(more_button);
|
||||
$(more_button).mouseenter(e => {
|
||||
scope.hover(node.get(0), e, true);
|
||||
})
|
||||
} else {
|
||||
node.addClass('parent');
|
||||
}
|
||||
node.append(childlist)
|
||||
return childlist.children().length;
|
||||
}
|
||||
return 0;
|
||||
@ -256,7 +266,7 @@ class Menu {
|
||||
entry.append(label);
|
||||
}
|
||||
if (typeof s.click === 'function') {
|
||||
entry.click(e => {
|
||||
entry.on('click', e => {
|
||||
if (e.target == entry.get(0)) {
|
||||
s.click(context, e)
|
||||
}
|
||||
@ -264,7 +274,7 @@ class Menu {
|
||||
}
|
||||
//Submenu
|
||||
if (typeof s.children == 'function' || typeof s.children == 'object') {
|
||||
child_count = createChildList(s, entry)
|
||||
child_count = createChildList(s, entry);
|
||||
}
|
||||
if (child_count !== 0 || typeof s.click === 'function') {
|
||||
parent.append(entry)
|
||||
|
||||
@ -1508,13 +1508,10 @@ class Preview {
|
||||
id: preset.name,
|
||||
preset,
|
||||
icon,
|
||||
click: preset.default ? () => {
|
||||
click: () => {
|
||||
preview.loadAnglePreset(preset)
|
||||
} : null,
|
||||
},
|
||||
children: !preset.default && [
|
||||
{icon: 'check_circle', name: 'menu.preview.angle.load', click() {
|
||||
preview.loadAnglePreset(preset)
|
||||
}},
|
||||
{icon: 'edit', name: 'menu.preview.angle.edit', click() {
|
||||
editCameraPreset(preset, presets);
|
||||
}},
|
||||
|
||||
@ -1429,7 +1429,6 @@
|
||||
"menu.preview.save_angle": "Save Angle...",
|
||||
"menu.preview.angle": "Angles",
|
||||
"menu.preview.angle.initial": "Initial Angle",
|
||||
"menu.preview.angle.load": "Load",
|
||||
"menu.preview.angle.edit": "Edit Angle...",
|
||||
|
||||
"menu.preview.perspective": "Perspective",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user