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

Update to settings page

Browse source
This commit is contained in:
booploops 2021-12-25 00:08:50 -08:00
parent 29b3656348
commit 211453512b
2 changed files with 43 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/renderer/ameframework.css
View file

@ -13,7 +13,7 @@
} }
.md-option-container { .md-option-container {
border-radius: 10px; /* border-radius: 10px; */
overflow: hidden; overflow: hidden;
} }
@ -59,6 +59,14 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
background: transparent; background: transparent;
} }
.md-option-header {
padding: 10px;
border-bottom: 1px solid rgb(200 200 200 / 25%);
font-weight: 500;
font-size: 0.9em;
background: rgb(255 255 255 / 10%);
}
.md-option-segment { .md-option-segment {
width: 100%; width: 100%;
display: flex; display: flex;

60
src/renderer/views/pages/settings.ejs
View file

@ -1,7 +1,9 @@
<script type="text/x-template" id="cider-settings"> <script type="text/x-template" id="cider-settings">
<div class="content-inner settings-page"> <div class="content-inner settings-page">
<h1 class="header-text">Settings <small>(WIP)</small></h1>
<div class="md-option-container"> <div class="md-option-container">
<div class="md-option-header">
<span>Audio</span>
</div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">
Audio Quality Audio Quality
@ -23,6 +25,9 @@
<input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/> <input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/>
</div> </div>
</div> </div>
<div class="md-option-header">
<span>Visual</span>
</div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">
Animated Artwork Animated Artwork
@ -49,6 +54,34 @@
</select> </select>
</div> </div>
</div> </div>
<div class="md-option-line">
<div class="md-option-segment">
Window Transparency
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;" v-model="app.cfg.visual.window_transparency" @change="app.getHTMLStyle()">
<option value="default">Default</option>
<option value="acrylic" v-if="app.platform == 'win32'">Acrylic</option>
<option value="disabled">Disabled</option>
</select>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Hardware Acceleration<br>
<small>(Requires relaunch)</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;" v-model="app.cfg.behavior.hw_acceleration">
<option value="default">Default</option>
<option value="webgpu">WebGPU</option>
<option value="disabled">Disabled</option>
</select>
</div>
</div>
<div class="md-option-header">
<span>Unfinished / Non Functional</span>
</div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">
Discord Rich Presence Discord Rich Presence
@ -87,31 +120,6 @@
<input type="checkbox" switch/> <input type="checkbox" switch/>
</div> </div>
</div> </div>
<div class="md-option-line">
<div class="md-option-segment">
Hardware Acceleration<br>
<small>(Requires relaunch)</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;" v-model="app.cfg.behavior.hw_acceleration">
<option value="default">Default</option>
<option value="webgpu">WebGPU</option>
<option value="disabled">Disabled</option>
</select>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Window Transparency
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;" v-model="app.cfg.visual.window_transparency" @change="app.getHTMLStyle()">
<option value="default">Default</option>
<option value="acrylic" v-if="app.platform == 'win32'">Acrylic</option>
<option value="disabled">Disabled</option>
</select>
</div>
</div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">
Theme Theme