mirror of
https://github.com/rembo10/headphones.git
synced 2026-03-24 13:49:27 +00:00
Added styled Checkbox, Radio & Select list
This commit is contained in:
Brinken
@@ -179,6 +179,8 @@ h2 { font-size: 13px; color: #FFF; text-decoration: none;}
|
||||
h3 { font-size: 12px; color: #FFF; text-decoration: none;}
|
||||
h4 { font-size: 10px; color: #FFF; text-decoration: none;}
|
||||
|
||||
p { margin-top: 8px; margin-bottom: 8px; }
|
||||
|
||||
p.indented { margin-top: 20px; margin-bottom: 20px; font-size: 12px; }
|
||||
p.center { text-align: center; font-size: 18px; }
|
||||
.smalltext2 { font-size: 12px; margin-left: 45px; }
|
||||
@@ -529,7 +531,38 @@ text-shadow: 1px 1px 0px rgb(87,160,0);
|
||||
}
|
||||
|
||||
.table_wrapper { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; width: 100%; background-color: #313131; position: relative; min-height: 50px; clear: both; _height: 302px; zoom: 1; }
|
||||
/*All inputs in the main content
|
||||
/*All inputs in the main content */
|
||||
|
||||
.checkbox,
|
||||
.radio {
|
||||
width: 19px;
|
||||
height: 25px;
|
||||
padding: 0 5px 0 0;
|
||||
background: url(../images/checkbox.png) no-repeat;
|
||||
display: block;
|
||||
clear: left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.radio
|
||||
{
|
||||
background: url(../images/radio.png) no-repeat;
|
||||
}
|
||||
|
||||
.select{
|
||||
position: absolute;
|
||||
width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
|
||||
height: 21px;
|
||||
padding: 0 24px 0 8px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 0px rgb(170,170,170);
|
||||
font-size: 12px/21px;
|
||||
line-height: 19px;
|
||||
background: url(../images/select.png) no-repeat;
|
||||
overflow: hidden;
|
||||
background-color: #272727;
|
||||
}
|
||||
|
||||
/*Tooltip*/
|
||||
.tooltip
|
||||
@@ -586,8 +619,8 @@ text-shadow: 1px 1px 0px rgb(87,160,0);
|
||||
background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
}
|
||||
|
||||
form input[type="radio"],
|
||||
form input[type='submit']
|
||||
.submit,
|
||||
input[type="submit"]
|
||||
{
|
||||
border: 1px solid #000;
|
||||
border-radius: 3px;
|
||||
@@ -595,12 +628,14 @@ form input[type='submit']
|
||||
font-weight: bold;
|
||||
padding: 3px 6px 3px 6px;
|
||||
background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
text-shadow: 1px 1px 0px rgb(180,180,180);
|
||||
background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
|
||||
text-shadow: 1px 1px 0px rgb(180,180,180);
|
||||
}
|
||||
.text-pass,
|
||||
.text-field,
|
||||
input[type="password"],
|
||||
input[type="text"]
|
||||
{
|
||||
|
||||
BIN
data/images/checkbox.png
Normal file
BIN
data/images/checkbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
data/images/radio.png
Normal file
BIN
data/images/radio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
data/images/select.png
Normal file
BIN
data/images/select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
@@ -31,7 +31,9 @@
|
||||
|
||||
<!-- Script by Brinken -->
|
||||
<script type="text/javascript" src="js/FancyScript.js"></script>
|
||||
|
||||
<!-- Custom Form elements-->
|
||||
<script type="text/javascript" src="js/custom-form-elements.js" ></script>
|
||||
<link type="text/css" href="css/custom-form-elements.css" rel="stylesheet" />
|
||||
<!-- jScrollPane -->
|
||||
<!-- styles needed by jScrollPane -->
|
||||
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
|
||||
@@ -85,7 +87,7 @@
|
||||
<option value="artist">Artist</option>
|
||||
<option value="album">Album</option>
|
||||
</select>
|
||||
<input type="submit" value="GO"/>
|
||||
<input class="submit" type="submit" value="GO"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="clear" />
|
||||
|
||||
@@ -40,14 +40,19 @@
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<h3>HTTP Password:</h3>
|
||||
<input type="password" name="http_password" value="${config['http_pass']}" size="30" maxlength="40" />
|
||||
<p>
|
||||
<h3>HTTP Password:</h3>
|
||||
<input type="password" name="http_password" value="${config['http_pass']}" size="30" maxlength="40" />
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<h3>Launch Browser on Startup: <input type="checkbox" name="launch_browser" value="1" ${config['launch_browser']} /></h3>
|
||||
<p>
|
||||
Launch Browser on Startup:
|
||||
<input class="styled" type="checkbox" name="launch_browser" value="1" ${config['launch_browser']} />
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -102,7 +107,10 @@
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<h3>Use Black Hole: <input type="checkbox" name="blackhole" value=1 ${config['use_blackhole']} /></h3>
|
||||
<p>
|
||||
Use Black Hole:
|
||||
<input class="styled" type="checkbox" name="blackhole" value="1" ${config['use_blackhole']} />
|
||||
</p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@@ -115,7 +123,9 @@
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<h3>Usenet Retention:<input type="text" name="usenet_retention" value="${config['usenet_retention']}" size="20" maxlength="40"></h3>
|
||||
<h3>Usenet Retention:
|
||||
<input type="text" name="usenet_retention" value="${config['usenet_retention']}" size="20" maxlength="40">
|
||||
</h3>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -146,8 +156,12 @@
|
||||
<td>
|
||||
<h3>Music Download Directory:</h3><input type="text" name="download_torrent_dir" value="${config['download_torrent_dir']}" size="40" />
|
||||
|
||||
<div class="tooltip"><span>Full path to the directory where your torrent client downloads your music
|
||||
i.e. /Users/name/Downloads/music</span></div>
|
||||
<div class="tooltip">
|
||||
<span>
|
||||
Full path to the directory where your torrent client downloads your music
|
||||
i.e. /Users/name/Downloads/music
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td></td>
|
||||
@@ -164,7 +178,9 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="middle">
|
||||
<h3>NZBMatrix: <input type="checkbox" name="nzbmatrix" value="1" ${config['use_nzbmatrix']} /></h3>
|
||||
<h3>NZBMatrix:
|
||||
<input class="styled" type="checkbox" name="nzbmatrix" value="1" ${config['use_nzbmatrix']} />
|
||||
</h3>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@@ -180,7 +196,9 @@
|
||||
|
||||
<tr>
|
||||
<td id="middle">
|
||||
<h3>Newznab: <input type="checkbox" name="newznab" value="1" ${config['use_newznab']} /></h3>
|
||||
<h3>Newznab:
|
||||
<input class="styled" type="checkbox" name="newznab" value="1" ${config['use_newznab']} />
|
||||
</h3>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@@ -197,7 +215,9 @@
|
||||
|
||||
<tr>
|
||||
<td id="middle">
|
||||
<h3>NZBs.org: <input type="checkbox" name="nzbsorg" value="1" ${config['use_nzbsorg']} /></h3>
|
||||
<h3>NZBs.org:
|
||||
<input class="styled" type="checkbox" name="nzbsorg" value="1" ${config['use_nzbsorg']} />
|
||||
</h3>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@@ -217,7 +237,9 @@
|
||||
|
||||
<tr>
|
||||
<td id="middle">
|
||||
<h3>Newzbin: <input type="checkbox" name="newzbin" value="1" ${config['use_newzbin']} /></h3>
|
||||
<h3>Newzbin:
|
||||
<input class="styled" type="checkbox" name="newzbin" value="1" ${config['use_newzbin']} />
|
||||
</h3>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@@ -241,17 +263,25 @@
|
||||
|
||||
<tr>
|
||||
<td id="middle">
|
||||
<h3>Isohunt: <input type="checkbox" name="use_isohunt" value="1" ${config['use_isohunt']} /></h3><br />
|
||||
<h3>Isohunt:
|
||||
<input class="styled" type="checkbox" name="use_isohunt" value="1" ${config['use_isohunt']} />
|
||||
</h3>
|
||||
<br />
|
||||
</td>
|
||||
|
||||
<td id="middle">
|
||||
<h3>Mininova: <input type="checkbox" name="use_mininova" value="1" ${config['use_mininova']} /></h3><br />
|
||||
<h3>Mininova:
|
||||
<input class="styled" type="checkbox" name="use_mininova" value="1" ${config['use_mininova']} />
|
||||
</h3>
|
||||
<br />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td id="middle">
|
||||
<h3>Kick Ass Torrents: <input type="checkbox" name="use_kat" value="1" ${config['use_kat']} /></h3>
|
||||
<h3>Kick Ass Torrents:
|
||||
<input class="styled" type="checkbox" name="use_kat" value="1" ${config['use_kat']} />
|
||||
</h3>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -261,24 +291,60 @@
|
||||
|
||||
<table class="configtable" summary="Quality & Post Processing">
|
||||
<tr>
|
||||
<td>
|
||||
<td width="200">
|
||||
<h2>Album Quality:</h2><br />
|
||||
<h4><input type="radio" name="preferred_quality" value="0" ${config['pref_qual_0']} /> Highest Quality excluding Lossless</h4>
|
||||
<h4><input type="radio" name="preferred_quality" value="1" ${config['pref_qual_1']} /> Highest Quality including Lossless</h4>
|
||||
<h4><input type="radio" name="preferred_quality" value="3" ${config['pref_qual_3']} /> Lossless Only</h4>
|
||||
<h4><input type="radio" name="preferred_quality" value="2" ${config['pref_qual_2']} /> Preferred Bitrate:
|
||||
<input type="text" name="preferred_bitrate" value="${config['pref_bitrate']}" size="3" maxlength="5" />kbps</h4>
|
||||
<i class="smalltext2"><input type="checkbox" name="detect_bitrate" value="1" ${config['detect_bitrate']} />Auto-Detect Preferred Bitrate </i>
|
||||
<p>
|
||||
<input class="styled" type="radio" name="preferred_quality" value="0" ${config['pref_qual_0']} />
|
||||
Highest Quality excluding Lossless
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="radio" name="preferred_quality" value="1" ${config['pref_qual_1']} />
|
||||
Highest Quality including Lossless
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="radio" name="preferred_quality" value="3" ${config['pref_qual_3']} />
|
||||
Lossless Only
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="radio" name="preferred_quality" value="2" ${config['pref_qual_2']} />
|
||||
Preferred Bitrate:
|
||||
<input type="text" name="preferred_bitrate" value="${config['pref_bitrate']}" size="3" maxlength="5" />kbps
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="detect_bitrate" value="1" ${config['detect_bitrate']} />
|
||||
Auto-Detect Preferred Bitrate
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<h2>Post-Processing:</h2>
|
||||
<h4><input type="checkbox" name="move_files" value="1" ${config['move_files']} /> Move downloads to Destination Folder</h4>
|
||||
<h4><input type="checkbox" name="rename_files" value="1" ${config['rename_files']} /> Rename files</h4>
|
||||
<h4><input type="checkbox" name="correct_metadata" value="1" ${config['correct_metadata']} /> Correct metadata</h4>
|
||||
<h4><input type="checkbox" name="cleanup_files" value="1" ${config['cleanup_files']} /> Delete leftover files (.m3u, .nfo, .sfv, .nzb, etc.)</h4>
|
||||
<h4><input type="checkbox" name="add_album_art" value="1" ${config['add_album_art']}> Add album art as 'folder.jpg' to album folder</h4>
|
||||
<h4><input type="checkbox" name="embed_album_art" value="1" ${config['embed_album_art']}> Embed album art in each file</h4>
|
||||
<h4><input type="checkbox" name="embed_lyrics" value="1" ${config['embed_lyrics']}> Embed lyrics</h4>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="move_files" value="1" ${config['move_files']} />
|
||||
Move downloads to Destination Folder
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="rename_files" value="1" ${config['rename_files']} />
|
||||
Rename files
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="correct_metadata" value="1" ${config['correct_metadata']} />
|
||||
Correct metadata
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="cleanup_files" value="1" ${config['cleanup_files']} />
|
||||
Delete leftover files (.m3u, .nfo, .sfv, .nzb, etc.)
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="add_album_art" value="1" ${config['add_album_art']} />
|
||||
Add album art as 'folder.jpg' to album folder
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="embed_album_art" value="1" ${config['embed_album_art']} />
|
||||
Embed album art in each file
|
||||
</p>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="embed_lyrics" value="1" ${config['embed_lyrics']} />
|
||||
Embed lyrics
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -286,8 +352,11 @@
|
||||
<td>
|
||||
<br />
|
||||
|
||||
<h3>Path to Destination folder:</h3><input type="text" name="destination_dir" value="${config['dest_dir']}" size="40" />
|
||||
<div class="tooltip">
|
||||
<h3>
|
||||
Path to Destination folder:
|
||||
</h3>
|
||||
<input type="text" name="destination_dir" value="${config['dest_dir']}" size="40" />
|
||||
<div class="tooltip">
|
||||
<span>
|
||||
i.e. /Users/name/Music/iTunes or /Volumes/share/music
|
||||
</span>
|
||||
@@ -304,20 +373,39 @@
|
||||
<td>
|
||||
<h2>Renaming Options:</h2>
|
||||
<br />
|
||||
<h3>Folder Format:</h3><input type="text" name="folder_format" value="${config['folder_format']}" size="43" />
|
||||
<div class="tooltip"><span>Use: artist, album, year, releasetype and first (first letter in artist name)
|
||||
E.g.: first/artist/album [year] = G/Girl Talk/All Day [2010]</span></div>
|
||||
<h3>
|
||||
Folder Format:
|
||||
</h3>
|
||||
<input type="text" name="folder_format" value="${config['folder_format']}" size="43" />
|
||||
<div class="tooltip">
|
||||
<span>
|
||||
Use: artist, album, year, releasetype and first (first letter in artist name)
|
||||
E.g.: first/artist/album [year] = G/Girl Talk/All Day [2010]
|
||||
</span>
|
||||
</div>
|
||||
<br /><br />
|
||||
<h3>File Format:</h3><input type="text" name="file_format" value="${config['file_format']}" size="43" />
|
||||
<div class="tooltip"><span>Use: tracknumber, title, artist, album and year</span></div>
|
||||
<h3>
|
||||
File Format:
|
||||
</h3>
|
||||
<input type="text" name="file_format" value="${config['file_format']}" size="43" />
|
||||
<div class="tooltip">
|
||||
<span>
|
||||
Use: tracknumber, title, artist, album and year
|
||||
<span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h2>Miscellaneous:</h2>
|
||||
<br />
|
||||
<h3><input type="checkbox" name="include_extras" value="1" ${config['include_extras']} />Automatically Include Extras When Adding an Artist</h3>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="include_extras" value="1" ${config['include_extras']} />
|
||||
Automatically Include Extras When Adding an Artist
|
||||
</p>
|
||||
<div class="tooltip"><span>(EPs, Compilations, Live Albums, Remix Albums and Singles)</span></div>
|
||||
<br /><br />
|
||||
<h3>Interface: <select name="interface"><h3>
|
||||
<h3>
|
||||
Interface: <select class="styled" name="interface">
|
||||
<h3>
|
||||
%for interface in config['interface_list']:
|
||||
<%
|
||||
if interface == headphones.INTERFACE:
|
||||
@@ -329,34 +417,46 @@
|
||||
%endfor
|
||||
</select>
|
||||
<br /><br />
|
||||
<h3>Log Directory:</h3><input type="text" name="log_dir" value="${config['log_dir']}" size="40">
|
||||
<h3>Log Directory:</h3>
|
||||
<input type="text" name="log_dir" value="${config['log_dir']}" size="40" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h2>Re-Encoding Options:</h2>
|
||||
<div class="tooltip"><span>Note: this option requires the lame or ffmpeg encoder</span></div>
|
||||
<br />
|
||||
<h3><input type="checkbox" name="encode" id="encode" value="1" ${config['encode']}/> Re-encode downloads during postprocessing</h3>
|
||||
<br />
|
||||
<div id="encoderoptions">
|
||||
<h4><input type="checkbox" name="encoderlossless" value="1" ${config['encoderlossless']}/> Only re-encode lossless files (.flac)</h4>
|
||||
<div class="tooltip">
|
||||
<span>
|
||||
Note: this option requires the lame or ffmpeg encoder
|
||||
</span>
|
||||
</div>
|
||||
<h2>Re-Encoding Options:</h2>
|
||||
|
||||
<br />
|
||||
<%
|
||||
if config['encoder'] == 'lame':
|
||||
lameselect = 'selected="selected"'
|
||||
ffmpegselect = ''
|
||||
else:
|
||||
lameselect = ''
|
||||
ffmpegselect = 'selected="selected"'
|
||||
%>
|
||||
<h4>Encoder: <select name="encoder">
|
||||
<option value="lame" ${lameselect}>lame</option>
|
||||
<option value="ffmpeg" ${ffmpegselect}>ffmpeg</option>
|
||||
</select>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="encode" id="encode" value="1" ${config['encode']} />
|
||||
Re-encode downloads during postprocessing
|
||||
</p>
|
||||
<br />
|
||||
<div id="encoderoptions">
|
||||
<h4>
|
||||
<input class="styled" type="checkbox" name="encoderlossless" value="1" ${config['encoderlossless']} />
|
||||
Only re-encode lossless files (.flac)
|
||||
</h4>
|
||||
<br />
|
||||
<%
|
||||
if config['encoder'] == 'lame':
|
||||
lameselect = 'selected="selected"'
|
||||
ffmpegselect = ''
|
||||
else:
|
||||
lameselect = ''
|
||||
ffmpegselect = 'selected="selected"'
|
||||
%>
|
||||
<h4>Encoder: <select class="styled" name="encoder">
|
||||
<option value="lame" ${lameselect}>lame</option>
|
||||
<option value="ffmpeg" ${ffmpegselect}>ffmpeg</option>
|
||||
</select>
|
||||
|
||||
Format: <select name="encoderoutputformat">
|
||||
%for x in ['mp3', 'ogg', 'm4a']:
|
||||
Format: <select name="encoderoutputformat">
|
||||
%for x in ['mp3', 'ogg', 'm4a']:
|
||||
<%
|
||||
if config['encoderoutputformat'] == x:
|
||||
outputselect = 'selected'
|
||||
@@ -364,25 +464,30 @@
|
||||
outputselect = ''
|
||||
%>
|
||||
<option value=${x} ${outputselect}>${x}</option>
|
||||
%endfor
|
||||
</select></h4>
|
||||
<br />
|
||||
%endfor
|
||||
</select>
|
||||
</h4>
|
||||
<br />
|
||||
|
||||
<h3>Audio Properties:</h3>
|
||||
<br />
|
||||
<h4>VBR/CBR: <select name="encodervbrcbr">
|
||||
%for x in ['cbr', 'vbr']:
|
||||
<%
|
||||
if config['encodervbrcbr'] == x:
|
||||
outputselect = 'selected'
|
||||
else:
|
||||
outputselect = ''
|
||||
%>
|
||||
<option value=${x} ${outputselect}>${x}</option>
|
||||
%endfor
|
||||
</select>
|
||||
<h3>
|
||||
Audio Properties:
|
||||
</h3>
|
||||
<br />
|
||||
<h4>
|
||||
VBR/CBR:
|
||||
<select name="encodervbrcbr">
|
||||
%for x in ['cbr', 'vbr']:
|
||||
<%
|
||||
if config['encodervbrcbr'] == x:
|
||||
outputselect = 'selected'
|
||||
else:
|
||||
outputselect = ''
|
||||
%>
|
||||
<option value=${x} ${outputselect}>${x}</option>
|
||||
%endfor
|
||||
</select>
|
||||
|
||||
Quality: <select name="encoderquality">
|
||||
Quality: <select class="styled" name="encoderquality">
|
||||
%for x in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]:
|
||||
<%
|
||||
if config['encoderquality'] == x:
|
||||
@@ -395,7 +500,7 @@
|
||||
</select></h4>
|
||||
|
||||
<br />
|
||||
<h4>Bitrate: <select name="bitrate">
|
||||
<h4>Bitrate: <select class="styled" name="bitrate">
|
||||
%for x in [64, 128, 192, 256, 320]:
|
||||
<%
|
||||
if config["bitrate"] == x:
|
||||
@@ -415,7 +520,7 @@
|
||||
freq44100 = ''
|
||||
freq48000 = 'selected="selected"'
|
||||
%>
|
||||
Sampling: <select name="samplingfrequency">
|
||||
Sampling: <select class="styled" name="samplingfrequency">
|
||||
<option value=44100 ${freq44100}>44.1 kHz</option>
|
||||
<option value=48000 ${freq48000}>48.0 kHz</option>
|
||||
</select></h4>
|
||||
@@ -431,18 +536,33 @@
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h2>Prowl Notification:</h2><br />
|
||||
<h3><input type="checkbox" name="prowl_enabled" id="prowl" value="1" ${config['prowl_enabled']} />Enable Prowl Notifications</h3><br />
|
||||
<h2>
|
||||
Prowl Notification:
|
||||
</h2>
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="prowl_enabled" id="prowl" value="1" ${config['prowl_enabled']} />
|
||||
Enable Prowl Notifications
|
||||
</p>
|
||||
<div id="prowloptions">
|
||||
<h3>API key:</h3><input type="text" name="prowl_keys" value="${config['prowl_keys']}" size="40"><br /><br />
|
||||
<h3><input type="checkbox" name="prowl_onsnatch" value="1" ${config['prowl_onsnatch']} />Notify on snatch?</h3><br />
|
||||
<h3>Priority (-2,-1,0,1 or 2):</h3><input type="text" name="prowl_priority" value="${config['prowl_priority']}" size="2">
|
||||
<h3>
|
||||
API key:
|
||||
</h3>
|
||||
<input type="text" name="prowl_keys" value="${config['prowl_keys']}" size="40"><br /><br />
|
||||
<p>
|
||||
<input class="styled" type="checkbox" name="prowl_onsnatch" value="1" ${config['prowl_onsnatch']} />
|
||||
Notify on snatch?
|
||||
</p>
|
||||
<br />
|
||||
<h3>
|
||||
Priority (-2,-1,0,1 or 2):
|
||||
</h3>
|
||||
<input type="text" name="prowl_priority" value="${config['prowl_priority']}" size="2">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h3>Muscbrainz Mirror: <select name="mirror"><h3>
|
||||
<h3>Muscbrainz Mirror: <select class="styled" name="mirror"><h3>
|
||||
%for mirror in config['mirror_list']:
|
||||
<%
|
||||
if mirror == headphones.MIRROR:
|
||||
@@ -454,14 +574,16 @@
|
||||
else:
|
||||
mirrortext = ''
|
||||
%>
|
||||
<option value="${mirror}" ${selected}>${mirror} ${mirrortext}</option>
|
||||
<option class="styled" value="${mirror}" ${selected}>${mirror} ${mirrortext}</option>
|
||||
%endfor
|
||||
</select>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="center"><input type="submit" value="Save Changes"><br />
|
||||
(Web Interface changes require a restart to take effect)</h3>
|
||||
<p class="center">
|
||||
<input class="submit" type="submit" value="Save Changes" />
|
||||
<br />
|
||||
(Web Interface changes require a restart to take effect)</p>
|
||||
</form>
|
||||
</%def>
|
||||
|
||||
|
||||
@@ -19,6 +19,10 @@
|
||||
<h1>Scan Music Library</h1><br />
|
||||
<p>
|
||||
Where do you keep your music?<br /><br />
|
||||
</p>
|
||||
<form action="musicScan" method="GET">
|
||||
%if headphones.MUSIC_DIR:
|
||||
<input type="text" value="${headphones.MUSIC_DIR}" name="path" size="60" />
|
||||
<div class="tooltip">
|
||||
<span>
|
||||
You can put in any directory, and it will scan for audio files in that folder
|
||||
@@ -26,17 +30,19 @@
|
||||
For example: '/Users/name/Music'
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
<br /><br />
|
||||
<form action="musicScan" method="GET">
|
||||
%if headphones.MUSIC_DIR:
|
||||
<input type="text" value="${headphones.MUSIC_DIR}" name="path" size="70" />
|
||||
%else:
|
||||
<input type="text" value="Enter a Music Directory to scan" onfocus="if (this.value==this.defaultValue) this.value='';" name="path" size="70" />
|
||||
<input type="text" value="Enter a Music Directory to scan" onfocus="if (this.value==this.defaultValue) this.value='';" name="path" size="60" />
|
||||
<div class="tooltip">
|
||||
<span>
|
||||
You can put in any directory, and it will scan for audio files in that folder
|
||||
(including all subdirectories)<br />
|
||||
For example: '/Users/name/Music'
|
||||
</span>
|
||||
</div>
|
||||
%endif
|
||||
<br />
|
||||
<br />
|
||||
<input type="checkbox" name="autoadd" value="1" ${checked(headphones.ADD_ARTISTS)}> Automatically add new artists
|
||||
<input class="styled" type="checkbox" name="autoadd" value="1" ${checked(headphones.ADD_ARTISTS)}> Automatically add new artists
|
||||
<br />
|
||||
<br />
|
||||
<input type="submit" />
|
||||
|
||||
144
data/js/custom-form-elements.js
Normal file
144
data/js/custom-form-elements.js
Normal file
@@ -0,0 +1,144 @@
|
||||
/*
|
||||
|
||||
CUSTOM FORM ELEMENTS
|
||||
|
||||
Created by Ryan Fait
|
||||
www.ryanfait.com
|
||||
|
||||
The only things you may need to change in this file are the following
|
||||
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
|
||||
|
||||
The numbers you set for checkboxHeight and radioHeight should be one quarter
|
||||
of the total height of the image want to use for checkboxes and radio
|
||||
buttons. Both images should contain the four stages of both inputs stacked
|
||||
on top of each other in this order: unchecked, unchecked-clicked, checked,
|
||||
checked-clicked.
|
||||
|
||||
You may need to adjust your images a bit if there is a slight vertical
|
||||
movement during the different stages of the button activation.
|
||||
|
||||
The value of selectWidth should be the width of your select list image.
|
||||
|
||||
Visit http://ryanfait.com/ for more information.
|
||||
|
||||
*/
|
||||
|
||||
var checkboxHeight = "25";
|
||||
var radioHeight = "25";
|
||||
var selectWidth = "190";
|
||||
|
||||
|
||||
/* No need to change anything after this */
|
||||
|
||||
|
||||
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
|
||||
|
||||
var Custom = {
|
||||
init: function() {
|
||||
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
|
||||
for(a = 0; a < inputs.length; a++) {
|
||||
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
|
||||
span[a] = document.createElement("span");
|
||||
span[a].className = inputs[a].type;
|
||||
|
||||
if(inputs[a].checked == true) {
|
||||
if(inputs[a].type == "checkbox") {
|
||||
position = "0 -" + (checkboxHeight*2) + "px";
|
||||
span[a].style.backgroundPosition = position;
|
||||
} else {
|
||||
position = "0 -" + (radioHeight*2) + "px";
|
||||
span[a].style.backgroundPosition = position;
|
||||
}
|
||||
}
|
||||
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
|
||||
inputs[a].onchange = Custom.clear;
|
||||
if(!inputs[a].getAttribute("disabled")) {
|
||||
span[a].onmousedown = Custom.pushed;
|
||||
span[a].onmouseup = Custom.check;
|
||||
} else {
|
||||
span[a].className = span[a].className += " disabled";
|
||||
}
|
||||
}
|
||||
}
|
||||
inputs = document.getElementsByTagName("select");
|
||||
for(a = 0; a < inputs.length; a++) {
|
||||
if(inputs[a].className == "styled") {
|
||||
option = inputs[a].getElementsByTagName("option");
|
||||
active = option[0].childNodes[0].nodeValue;
|
||||
textnode = document.createTextNode(active);
|
||||
for(b = 0; b < option.length; b++) {
|
||||
if(option[b].selected == true) {
|
||||
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
|
||||
}
|
||||
}
|
||||
span[a] = document.createElement("span");
|
||||
span[a].className = "select";
|
||||
span[a].id = "select" + inputs[a].name;
|
||||
span[a].appendChild(textnode);
|
||||
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
|
||||
if(!inputs[a].getAttribute("disabled")) {
|
||||
inputs[a].onchange = Custom.choose;
|
||||
} else {
|
||||
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
|
||||
}
|
||||
}
|
||||
}
|
||||
document.onmouseup = Custom.clear;
|
||||
},
|
||||
pushed: function() {
|
||||
element = this.nextSibling;
|
||||
if(element.checked == true && element.type == "checkbox") {
|
||||
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
|
||||
} else if(element.checked == true && element.type == "radio") {
|
||||
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
|
||||
} else if(element.checked != true && element.type == "checkbox") {
|
||||
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
|
||||
} else {
|
||||
this.style.backgroundPosition = "0 -" + radioHeight + "px";
|
||||
}
|
||||
},
|
||||
check: function() {
|
||||
element = this.nextSibling;
|
||||
if(element.checked == true && element.type == "checkbox") {
|
||||
this.style.backgroundPosition = "0 0";
|
||||
element.checked = false;
|
||||
} else {
|
||||
if(element.type == "checkbox") {
|
||||
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
|
||||
} else {
|
||||
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
|
||||
group = this.nextSibling.name;
|
||||
inputs = document.getElementsByTagName("input");
|
||||
for(a = 0; a < inputs.length; a++) {
|
||||
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
|
||||
inputs[a].previousSibling.style.backgroundPosition = "0 0";
|
||||
}
|
||||
}
|
||||
}
|
||||
element.checked = true;
|
||||
}
|
||||
},
|
||||
clear: function() {
|
||||
inputs = document.getElementsByTagName("input");
|
||||
for(var b = 0; b < inputs.length; b++) {
|
||||
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
|
||||
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
|
||||
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
|
||||
inputs[b].previousSibling.style.backgroundPosition = "0 0";
|
||||
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
|
||||
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
|
||||
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
|
||||
inputs[b].previousSibling.style.backgroundPosition = "0 0";
|
||||
}
|
||||
}
|
||||
},
|
||||
choose: function() {
|
||||
option = this.getElementsByTagName("option");
|
||||
for(d = 0; d < option.length; d++) {
|
||||
if(option[d].selected == true) {
|
||||
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
window.onload = Custom.init;
|
||||
Reference in New Issue
Block a user