mirror of
https://github.com/JannisX11/blockbench.git
synced 2024-11-21 01:13:37 +08:00
Add buttons to fold panels
This commit is contained in:
JannisX11
parent
4c3b79c0cc
commit
8f42f3a277
@ -1008,7 +1008,8 @@
|
||||
font-weight: 300;
|
||||
}
|
||||
.panel .bar.next_to_title {
|
||||
margin-top: -30px;
|
||||
margin-top: -34px;
|
||||
margin-right: 32px;
|
||||
position: relative;
|
||||
float: right;
|
||||
pointer-events: none;
|
||||
|
||||
@ -55,23 +55,42 @@
|
||||
}
|
||||
|
||||
h3.panel_handle {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 6px 12px;
|
||||
background: var(--color-ui);
|
||||
color: var(--color-subtle_text);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.panel p {
|
||||
margin-left: 12px;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
background: var(--color-ui);
|
||||
place-content: space-between;
|
||||
}
|
||||
body > h3.panel_handle {
|
||||
pointer-events: none;
|
||||
box-shadow: 0 0 16px black;
|
||||
width: auto;
|
||||
}
|
||||
h3.panel_handle > label {
|
||||
flex: 0 1 0;
|
||||
font-size: 1.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-subtle_text);
|
||||
margin: 6px 8px;
|
||||
padding: 0px 4px;
|
||||
cursor: move;
|
||||
}
|
||||
h3.panel_handle > .tool.panel_folding_button {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 4px;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
h3.panel_handle > .tool.panel_folding_button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.panel p {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
#center {
|
||||
grid-area: center;
|
||||
|
||||
56
index.html
56
index.html
@ -686,28 +686,30 @@
|
||||
<div id="left_bar" class="sidebar">
|
||||
|
||||
<div id="uv" class="panel selection_only">
|
||||
<div class="bar next_to_title" id="uv_title_bar">
|
||||
<div id="project_resolution_status" onclick="BarItems.project_window.trigger()"></div>
|
||||
</div>
|
||||
<div id="uv_panel_sides" onclick="main_uv.loadSelectedFace()" class="bar tabs_small">
|
||||
<div class="panel_inside">
|
||||
<div class="bar next_to_title" id="uv_title_bar">
|
||||
<div id="project_resolution_status" onclick="BarItems.project_window.trigger()"></div>
|
||||
</div>
|
||||
<div id="uv_panel_sides" onclick="main_uv.loadSelectedFace()" class="bar tabs_small">
|
||||
|
||||
<input type="radio" name="side" id="north_radio" checked>
|
||||
<label class="tl" for="north_radio">face.north</label>
|
||||
<input type="radio" name="side" id="north_radio" checked>
|
||||
<label class="tl" for="north_radio">face.north</label>
|
||||
|
||||
<input type="radio" name="side" id="south_radio">
|
||||
<label class="tl" for="south_radio">face.south</label>
|
||||
|
||||
<input type="radio" name="side" id="west_radio">
|
||||
<label class="tl" for="west_radio">face.west</label>
|
||||
<input type="radio" name="side" id="south_radio">
|
||||
<label class="tl" for="south_radio">face.south</label>
|
||||
|
||||
<input type="radio" name="side" id="west_radio">
|
||||
<label class="tl" for="west_radio">face.west</label>
|
||||
|
||||
<input type="radio" name="side" id="east_radio">
|
||||
<label class="tl" for="east_radio">face.east</label>
|
||||
<input type="radio" name="side" id="east_radio">
|
||||
<label class="tl" for="east_radio">face.east</label>
|
||||
|
||||
<input type="radio" name="side" id="up_radio">
|
||||
<label class="tl" for="up_radio">face.up</label>
|
||||
<input type="radio" name="side" id="up_radio">
|
||||
<label class="tl" for="up_radio">face.up</label>
|
||||
|
||||
<input type="radio" name="side" id="down_radio">
|
||||
<label class="tl" for="down_radio">face.down</label>
|
||||
<input type="radio" name="side" id="down_radio">
|
||||
<label class="tl" for="down_radio">face.down</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -715,18 +717,20 @@
|
||||
<div id="right_bar" class="sidebar">
|
||||
|
||||
<div id="element" class="panel selection_only">
|
||||
<p class="tl">panel.element.position</p>
|
||||
<div class="toolbar_wrapper element_position"></div>
|
||||
<p class="tl">panel.element.size</p>
|
||||
<div class="toolbar_wrapper element_size"></div>
|
||||
<p class="tl">panel.element.origin</p>
|
||||
<div class="toolbar_wrapper element_origin"></div>
|
||||
<p class="tl">panel.element.rotation</p>
|
||||
<div class="toolbar_wrapper element_rotation"></div>
|
||||
<div class="panel_inside">
|
||||
<p class="tl">panel.element.position</p>
|
||||
<div class="toolbar_wrapper element_position"></div>
|
||||
<p class="tl">panel.element.size</p>
|
||||
<div class="toolbar_wrapper element_size"></div>
|
||||
<p class="tl">panel.element.origin</p>
|
||||
<div class="toolbar_wrapper element_origin"></div>
|
||||
<p class="tl">panel.element.rotation</p>
|
||||
<div class="toolbar_wrapper element_rotation"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="color" class="panel">
|
||||
<div id="color_panel_wrapper">
|
||||
<div id="color_panel_wrapper" class="panel_inside">
|
||||
<div id="color_panel_head">
|
||||
<div class="main" v-bind:style="{'background-color': hover_color || main_color}"></div>
|
||||
<div class="side">
|
||||
|
||||
@ -10,6 +10,7 @@ class Panel {
|
||||
this.selection_only = data.selection_only == true;
|
||||
this.condition = data.condition;
|
||||
this.onResize = data.onResize;
|
||||
this.folded = false;
|
||||
if (data.toolbars) {
|
||||
this.toolbars = data.toolbars;
|
||||
} else {
|
||||
@ -34,7 +35,6 @@ class Panel {
|
||||
'inside-vue': data.component
|
||||
},
|
||||
template: `<div class="panel ${this.selection_only ? 'selection_only' : ''} ${this.growable ? 'grow' : ''}" id="${this.id}">
|
||||
<h3 class="panel_handle">${this.name}</h3>
|
||||
<inside-vue class="panel_inside" ref="inside"></inside-vue>
|
||||
</div>`,
|
||||
mounted() {
|
||||
@ -46,14 +46,18 @@ class Panel {
|
||||
|
||||
this.inside_vue = this.vue.$refs.inside;
|
||||
|
||||
this.node = $('.panel#'+this.id).get(0)
|
||||
this.handle = $(this.node).find('h3.panel_handle').get(0)
|
||||
|
||||
} else {
|
||||
this.node = $('.panel#'+this.id).get(0)
|
||||
this.handle = $('<h3 class="panel_handle">'+this.name+'</h3>').get(0)
|
||||
$(this.node).prepend(this.handle)
|
||||
}
|
||||
this.node = $('.panel#'+this.id).get(0)
|
||||
this.handle = $(`<h3 class="panel_handle">
|
||||
<label>${this.name}</label>
|
||||
<div class="tool panel_folding_button"><i class="material-icons">expand_more</i></div>
|
||||
</h3>`).get(0)
|
||||
this.handle.lastElementChild.addEventListener('click', (e) => {
|
||||
this.folded = !this.folded;
|
||||
$(this.node).find('> .panel_inside').css('display', this.folded ? 'none' : '');
|
||||
$(this.handle).find('> .panel_folding_button > i').text(this.folded ? 'expand_less' : 'expand_more');
|
||||
})
|
||||
$(this.node).prepend(this.handle)
|
||||
|
||||
|
||||
if (!Blockbench.isMobile) {
|
||||
@ -65,6 +69,7 @@ class Panel {
|
||||
appendTo: 'body',
|
||||
zIndex: 19,
|
||||
scope: 'panel',
|
||||
handle: '> label',
|
||||
start: function() {
|
||||
Interface.panel = scope;
|
||||
},
|
||||
|
||||
@ -760,8 +760,8 @@ class UVEditor {
|
||||
}
|
||||
setToMainSlot() {
|
||||
var scope = this;
|
||||
$('.panel#uv').append(this.jquery.main)
|
||||
$('.panel#uv').on('mousewheel', function(e) {
|
||||
$('.panel#uv > .panel_inside').append(this.jquery.main)
|
||||
$('.panel#uv > .panel_inside').on('mousewheel', function(e) {
|
||||
|
||||
if (!Project.box_uv && !e.ctrlOrCmd && $('#uv_panel_sides:hover, #uv_viewport:not(.zoomed):hover').length) {
|
||||
var faceIDs = {'north': 0, 'south': 1, 'west': 2, 'east': 3, 'up': 4, 'down': 5}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user