okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changes to spatial properties screen

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

20
src/renderer/style.less
View file

@ -103,6 +103,16 @@ body[platform='linux'] {
display: none !important; 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 { .bg-artwork--placeholder {
position: absolute; position: absolute;
@ -1652,12 +1662,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.spatialproperties-panel { .spatialproperties-panel {
.modal-window { .modal-window {
height: 600px; height: 700px;
max-height: 600px; max-height: 700px;
width: 800px; width: 800px;
max-width: 800px; max-width: 800px;
overflow: hidden; overflow: hidden;
.info-header {
padding-left: 12px;
}
.visual-container { .visual-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -1680,7 +1694,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: calc(12px * 6); height: calc(12px * 6);
border-radius: 6px; border-radius: 6px;
transform: rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition: transform 0.2s var(--appleEase); transition: transform 0.2s linear;
} }
.face:nth-of-type(1) { .face:nth-of-type(1) {

75
src/renderer/views/components/spatial-properties.ejs
View file

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