changes to spatial properties screen

This commit is contained in:
booploops 2021-12-30 03:13:52 -08:00
parent 025bcae25f
commit f50c1a7206
2 changed files with 71 additions and 24 deletions

View file

@ -103,6 +103,16 @@ body[platform='linux'] {
display: none !important;
}
input[type="text"], input[type="number"] {
background: #1c1c1c;
border-radius: 3px;
border: 1px solid rgb(200 200 200 / 25%);
color: #eee;
padding: 6px;
font-size: 1em;
font-family: inherit;
}
.bg-artwork--placeholder {
position: absolute;
@ -1652,12 +1662,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.spatialproperties-panel {
.modal-window {
height: 600px;
max-height: 600px;
height: 700px;
max-height: 700px;
width: 800px;
max-width: 800px;
overflow: hidden;
.info-header {
padding-left: 12px;
}
.visual-container {
display: flex;
justify-content: center;
@ -1680,7 +1694,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: calc(12px * 6);
border-radius: 6px;
transform: rotateX(60deg) rotateZ(-45deg);
transition: transform 0.2s var(--appleEase);
transition: transform 0.2s linear;
}
.face:nth-of-type(1) {

View file

@ -6,26 +6,56 @@
<button class="close-btn" @click="close()"></button>
</div>
<div class="modal-content">
<div class="row">
<div class="col"><h3>Room Dimensions</h3></div>
</div>
<div class="row">
<div class="col">
<label>
Width
<input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="room_dimensions.width" step="1"/>
</label>
<label>
Height
<input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="room_dimensions.height" step="1"/>
</label>
<label>
Depth
<input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="room_dimensions.depth" step="1"/>
</label>
<div class="row">
<div class="col-3 flex-center">
Width
</div>
<div class="col flex-center">
<input type="range" class="md-slider" min="0" max="100" @input="setRoom()" style="width: 100%;"
v-model="room_dimensions.width" step="1"/>
</div>
<div class="col-3 flex-center">
<input type="number" min="0" @input="setRoom()" style="width: 100%;text-align: center"
v-model="room_dimensions.width" step="1"/>
</div>
</div>
<div class="row">
<div class="col-3 flex-center">
Height
</div>
<div class="col flex-center">
<input type="range" class="md-slider" min="0" max="100" @input="setRoom()" style="width: 100%;"
v-model="room_dimensions.height" step="1"/>
</div>
<div class="col-3 flex-center">
<input type="number" min="0" @input="setRoom()" style="width: 100%;text-align: center"
v-model="room_dimensions.height" step="1"/>
</div>
</div>
<div class="row">
<div class="col-3 flex-center">
Depth
</div>
<div class="col flex-center">
<input type="range" class="md-slider" min="0" max="100" @input="setRoom()" style="width: 100%;"
v-model="room_dimensions.depth" step="1"/>
</div>
<div class="col-3 flex-center">
<input type="number" min="0" @input="setRoom()" style="width: 100%;text-align: center"
v-model="room_dimensions.depth" step="1"/>
</div>
</div>
<label v-if="!app.cfg.audio.normalization">
Gain
<input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
<input type="number" min="0" @input="setRoom()" style="width: 100%;"
v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
</label>
</div>
@ -36,9 +66,12 @@
</div>
</div>
</div>
<div class="row">
<div class="col"><h3>Room Materials</h3></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col">
<div class="col flex-center">
<label>
Up
<select class="md-select" @input="setRoom()"
@ -50,7 +83,7 @@
<div class="col"></div>
</div>
<div class="row">
<div class="col">
<div class="col flex-center">
<label>
Left
<select class="md-select" @input="setRoom()"
@ -59,7 +92,7 @@
</select>
</label>
</div>
<div class="col">
<div class="col flex-center">
<label>
Front
<select class="md-select" @input="setRoom()"
@ -75,7 +108,7 @@
</select>
</label>
</div>
<div class="col">
<div class="col flex-center">
<label>
Right
<select class="md-select" @input="setRoom()"
@ -87,7 +120,7 @@
</div>
<div class="row">
<div class="col"></div>
<div class="col">
<div class="col flex-center">
<label>
Down
<select class="md-select" @input="setRoom()"