Skip to content

GitLab

Commit 94531f30 authored by Jonathan Wilkes's avatar Jonathan Wilkes
Browse files

clean up the prefs dialog a bit

parent f1171651
Hide whitespace changes
Inline Side-by-side
pd/nw/css/default.css
View file @ 94531f30
......@@ -497,16 +497,16 @@ div.y2 {
}
/* Main tab widget */
/* All the display, width, and height settings below are a house of cards.
I don't have the schooling to actually predict how all these CSS elements
work together to create the whole. I just fudged around until I found a
way to get the buttons anchored at the bottom of the dialog without
triggering scrollbars to appear. If someone knows a way to do it "right"
without becoming an order of magnitude more complex, do feel free... */
.prefs_tab_group {
/* I needed to get this div to expand with the inner div content so
that I could resize the prefs window to display the content without
a scrollbar. I just played stackexchange roulette until I found
something that worked. I have no idea why absolute positioning
solves my problem, nor do I have time to become a CSS wizard just
to get this single thing to work. */
display: table;
width: 90%;
/* height: 90vh; */
}
/* Configure the radio buttons to hide off-screen */
......@@ -542,9 +542,9 @@ div.y2 {
/* Checked tabs must be white with the bottom border removed */
.prefs_tab:checked + label {
background-color:white;
background-color: #f3f3f3;
font-weight: bold;
border-bottom: 1px solid white;
border-bottom: 1px solid #f3f3f3;
margin-bottom: -1px;
}
......@@ -552,35 +552,25 @@ div.y2 {
.prefs_tab_group > div {
display: none;
border-top: 1px solid black;
/* border-bottom: 1px solid black; */
background-color: white;
/* padding: 10px 10px; */
padding: 0px;
margin: 0px;
height: 100%;
/* height: 95%; */
/* margin-bottom: -20px; */
/* overflow: auto; */
/* box-shadow: 0 0 20px #444;
-moz-box-shadow: 0 0 20px #444;
-webkit-box-shadow: 0 0 20px #444;
*/
/* border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
*/
}
/* This matches tabs displaying to their associated radio inputs */
.tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
display: table;
padding: 8px;
line-height: 20px;
width: 100%;
/* height: 100%; */
height: 78vh;
}
.audio_dev_settings {
padding-bottom: 8px;
padding-top: 8px;
}
#prefs_buttons {
display: table;
height: 10vh;
......
pd/nw/dialog_prefs.html
View file @ 94531f30
......@@ -4,246 +4,247 @@
<link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body class="dialog_body" id="prefs_body">
<div class="container noselect prefs_container">
<div class="prefs_tab_group">
<input type="radio"
name="prefs_radio_group"
id="audio_tab_radio"
class="tab1 prefs_tab"
checked="checked" />
<label for="audio_tab_radio" data-i18n="[title]prefs.heading.audio_tt">
<span data-i18n="prefs.heading.audio"></span>
</label>
<input type="radio"
name="prefs_radio_group"
id="midi_tab_radio"
class="tab2 prefs_tab"/>
<label for="midi_tab_radio" data-i18n="[title]prefs.heading.midi_tt">
<span data-i18n="prefs.heading.midi"></span>
</label>
<input type="radio"
name="prefs_radio_group"
id="gui_tab_radio"
class="tab3 prefs_tab"/>
<label for="gui_tab_radio" data-i18n="[title]prefs.heading.gui_tt">
<span data-i18n="prefs.heading.gui"></span>
</label>
<div class="tab1">
<label data-i18n="[title]prefs.audio.api_tt">
<span data-i18n="prefs.audio.api"></span>
<select id="audio_api" onchange="change_api(this);">
</select>
<div class="container noselect prefs_container">
<div class="prefs_tab_group">
<input type="radio"
name="prefs_radio_group"
id="audio_tab_radio"
class="tab1 prefs_tab"
checked="checked" />
<label for="audio_tab_radio" data-i18n="[title]prefs.heading.audio_tt">
<span data-i18n="prefs.heading.audio"></span>
</label>
<br/>
<label data-i18n="[title]prefs.audio.sr_tt">
<span data-i18n="prefs.audio.sr"></span>
<input type="text"
id="rate"
name="rate"
onchange="attr_change(this);">
<input type="radio"
name="prefs_radio_group"
id="midi_tab_radio"
class="tab2 prefs_tab"/>
<label for="midi_tab_radio" data-i18n="[title]prefs.heading.midi_tt">
<span data-i18n="prefs.heading.midi"></span>
</label>
<br/>
<label data-i18n="[title]prefs.audio.advance_tt">
<span data-i18n="prefs.audio.advance"></span>
<input type="text"
id="advance"
name="advance"
onchange="attr_change(this);">
<input type="radio"
name="prefs_radio_group"
id="gui_tab_radio"
class="tab3 prefs_tab"/>
<label for="gui_tab_radio" data-i18n="[title]prefs.heading.gui_tt">
<span data-i18n="prefs.heading.gui"></span>
</label>
<br/>
<div id="callback_container" class="hidden">
<label data-i18n="[title]prefs.audio.callback_tt">
<span data-i18n="prefs.audio.callback"></span>
<input type="checkbox" id="callback" name="callback">
<div class="tab1">
<div>
<label data-i18n="[title]prefs.audio.api_tt">
<span data-i18n="prefs.audio.api"></span>
<select id="audio_api" onchange="change_api(this);">
</select>
</label>
<label data-i18n="[title]prefs.audio.sr_tt">
<span data-i18n="prefs.audio.sr"></span>
<input type="text"
id="rate"
name="rate"
onchange="attr_change(this);">
</label>
</div>
<div class="audio_dev_settings">
<label data-i18n="[title]prefs.audio.blocksize_tt">
<span data-i18n="prefs.audio.blocksize"></span>
<select id="blocksize"
onchange="attr_change(this);">
<option value="64">64</option>
<option value="128">128</option>
<option value="256">256</option>
<option value="512">512</option>
<option value="1024">1024</option>
<option value="2048">2048</option>
</select>
</label>
<label data-i18n="[title]prefs.audio.advance_tt">
<span data-i18n="prefs.audio.advance"></span>
<input type="text"
id="advance"
name="advance"
onchange="attr_change(this);">
</label>
</div class="audio_dev_settings">
<div id="callback_container" class="hidden">
<label data-i18n="[title]prefs.audio.callback_tt">
<span data-i18n="prefs.audio.callback"></span>
<input type="checkbox" id="callback" name="callback">
</label>
</div>
<table>
<tr>
<td>
Input Devices
</td>
<td>
<span data-i18n="prefs.audio.channels"></span>
</td>
</tr>
<tr>
<td>
<select id="in1" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans1"
name="inchans1"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="in2" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans2"
name="inchans2"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="in3" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans3"
name="inchans3"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="in4" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans4"
name="inchans4"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
Output Devices
</td>
<td>
<span data-i18n="prefs.audio.channels"></span>
</td>
</tr>
<tr>
<td>
<select id="out1" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans1"
name="outchans1"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="out2" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans2"
name="outchans2"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="out3" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans3"
name="outchans3"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="out4" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans4"
name="outchans4"
onchange="dev_change(this);">
</label>
</td>
</tr>
</table>
</div>
<label data-i18n="[title]prefs.audio.blocksize_tt">
<span data-i18n="prefs.audio.blocksize"></span>
<select id="blocksize"
onchange="attr_change(this);">
<option value="64">64</option>
<option value="128">128</option>
<option value="256">256</option>
<option value="512">512</option>
<option value="1024">1024</option>
<option value="2048">2048</option>
</select>
</label>
<br/>
<table>
<tr>
<td>
Input Devices
</td>
<td>
<span data-i18n="prefs.audio.channels"></span>
</td>
</tr>
<tr>
<td>
<select id="in1" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans1"
name="inchans1"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="in2" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans2"
name="inchans2"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="in3" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans3"
name="inchans3"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="in4" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="inchans4"
name="inchans4"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
Output Devices
</td>
<td>
<span data-i18n="prefs.audio.channels"></span>
</td>
</tr>
<tr>
<td>
<select id="out1" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans1"
name="outchans1"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="out2" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans2"
name="outchans2"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="out3" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans3"
name="outchans3"
onchange="dev_change(this);">
</label>
</td>
</tr>
<tr>
<td>
<select id="out4" onchange="dev_change(this);"></select>
</td>
<td>
<label data-i18n="[title]prefs.audio.channels_tt">
<input type="text"
id="outchans4"
name="outchans4"
onchange="dev_change(this);">
</label>
</td>
</tr>
</table>
</div>
<div class="tab2">
<select id="midi_api" onchange="change_api(this);">
</select>
<br/>
<select id="midi_in1" onchange="dev_change(this);"></select>
<br/>
<select id="midi_in2" onchange="dev_change(this);"></select>
<br/>
<select id="midi_in3" onchange="dev_change(this);"></select>
<br/>
<select id="midi_in4" onchange="dev_change(this);"></select>
<br/>
<select id="midi_out1" onchange="dev_change(this);"></select>
<br/>
<select id="midi_out2" onchange="dev_change(this);"></select>
<br/>
<select id="midi_out3" onchange="dev_change(this);"></select>
<br/>
<select id="midi_out4" onchange="dev_change(this);"></select>
<br/>
</div>
<div class="tab2">
<select id="midi_api" onchange="change_api(this);">
</select>
<br/>
<select id="midi_in1" onchange="dev_change(this);"></select>
<br/>
<select id="midi_in2" onchange="dev_change(this);"></select>
<br/>
<select id="midi_in3" onchange="dev_change(this);"></select>
<br/>
<select id="midi_in4" onchange="dev_change(this);"></select>
<br/>
<select id="midi_out1" onchange="dev_change(this);"></select>
<br/>
<select id="midi_out2" onchange="dev_change(this);"></select>
<br/>
<select id="midi_out3" onchange="dev_change(this);"></select>
<br/>
<select id="midi_out4" onchange="dev_change(this);"></select>
<br/>
</div>
<div class="tab3">
<label data-i18n="[title]prefs.gui.presets.gui_preset_tt">
<span data-i18n="prefs.gui.presets.gui_preset"></span>
</label>
<select id="gui_preset" onchange="gui_preset_change(this);">
<option data-i18n="prefs.gui.presets.default" value="default">
</option>
<option data-i18n="prefs.gui.presets.inverted" value="inverted">
</option>
<option data-i18n="prefs.gui.presets.vanilla" value="vanilla">
</option>
<option data-i18n="prefs.gui.presets.vanilla_inverted" value="vanilla_inverted">
</option>
<option data-i18n="prefs.gui.presets.extended" value="extended">
</option>
<option data-i18n="prefs.gui.presets.c64" value="c64">
</option>
<option data-i18n="prefs.gui.presets.subdued" value="subdued">
</option>
<option data-i18n="prefs.gui.presets.strongbad" value="strongbad">
</option>
</select>
<div class="tab3">
<label data-i18n="[title]prefs.gui.presets.gui_preset_tt">
<span data-i18n="prefs.gui.presets.gui_preset"></span>
</label>
<select id="gui_preset" onchange="gui_preset_change(this);">
<option data-i18n="prefs.gui.presets.default" value="default">
</option>
<option data-i18n="prefs.gui.presets.inverted" value="inverted">
</option>
<option data-i18n="prefs.gui.presets.vanilla" value="vanilla">
</option>
<option data-i18n="prefs.gui.presets.vanilla_inverted" value="vanilla_inverted">
</option>
<option data-i18n="prefs.gui.presets.extended" value="extended">
</option>
<option data-i18n="prefs.gui.presets.c64" value="c64">
</option>
<option data-i18n="prefs.gui.presets.subdued" value="subdued">
</option>
<option data-i18n="prefs.gui.presets.strongbad" value="strongbad">
</option>
</select>
</div>
</div>
</div>
<div class="submit_buttons prefs_buttons">
<button type="button" onClick="ok()" data-i18n="[title]prefs.ok_tt">
......@@ -256,8 +257,7 @@
<span data-i18n="prefs.close"></span>
</button>
</div>
</div>
</div>
<script>
"use strict";
var gui = require("nw.gui");
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment