Changed web UI to a spiffier Firefly one.

This closes ticket #135 #52 and 3) of ticket #143
Temporary removed experimental section (playlist.html and
the daap java player)
This commit is contained in:
Anders Betnér 2006-06-14 20:27:16 +00:00
parent 97328767d8
commit 74f95473cb
10 changed files with 151 additions and 119 deletions

View File

@ -5,7 +5,7 @@ SUBDIRS=lib-js
adminrootdir = ${pkgdatadir}/admin-root adminrootdir = ${pkgdatadir}/admin-root
adminroot_DATA = ftr.html linkOpaque.gif status.html aspl-license.txt \ adminroot_DATA = ftr.html linkOpaque.gif status.html aspl-license.txt \
gpl-license.txt linkTransparent.gif config-update.html hdr.html \ gpl-license.txt linkTransparent.gif config-update.html hdr.html \
mt-daapd.css ff_logo_182.gif config.html index.html required.gif \ mt-daapd.css ff_logo_sm.gif config.html index.html required.gif \
gpl-license.html aspl-license.html thanks.html feedback.html \ gpl-license.html aspl-license.html thanks.html feedback.html \
playlist.html playlist.js smart.html smart.js DAAPApplet-0.1.jar \ playlist.html playlist.js smart.html smart.js DAAPApplet-0.1.jar \
smartpopup.html applet.html mt-daapd.js CREDITS status.js \ smartpopup.html applet.html mt-daapd.js CREDITS status.js \
@ -13,7 +13,7 @@ adminroot_DATA = ftr.html linkOpaque.gif status.html aspl-license.txt \
EXTRA_DIST = ftr.html linkOpaque.gif status.html aspl-license.txt \ EXTRA_DIST = ftr.html linkOpaque.gif status.html aspl-license.txt \
gpl-license.txt linkTransparent.gif config-update.html hdr.html \ gpl-license.txt linkTransparent.gif config-update.html hdr.html \
mt-daapd.css ff_logo_182.gif config.html index.html required.gif \ mt-daapd.css ff_logo_sm.gif config.html index.html required.gif \
gpl-license.html aspl-license.html thanks.html feedback.html \ gpl-license.html aspl-license.html thanks.html feedback.html \
playlist.html playlist.js smart.html smart.js DAAPApplet-0.1.jar \ playlist.html playlist.js smart.html smart.js DAAPApplet-0.1.jar \
smartpopup.html applet.html mt-daapd.js CREDITS status.js \ smartpopup.html applet.html mt-daapd.js CREDITS status.js \

View File

@ -36,17 +36,9 @@ select {
background-color: yellow; background-color: yellow;
} }
</style> </style>
<h1>Configuration</h1> <h1>Configuration</span></h1><span id="toggle_basic_advanced"></span>
<p class="description">
<!-- Note that the following fields will only be editable if the
configuration file itself is writable by the mt-daapd server. If you
make changes to these settings, they will not be reflected in the
running server. The server must be restarted for these values to
take effect.-->
This is still in beta, but it seems to work. Go ahead and give it a spin.</p>
<div id="config_not_writable_warning" style="display: none;">Your config file is not writable, you can not change anything using this webpage</div> <div id="config_not_writable_warning" style="display: none;">Your config file is not writable, you can not change anything using this webpage</div>
<div id="toggle_basic_advanced"></div>
<form id="theform" method="get" action="#"> <form id="theform" method="get" action="#">
</form> </form>
<div id="buttons"></div> <div id="buttons"></div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
admin-root/ff_logo_sm.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,3 +1,3 @@
</td></tr></table> </div> <!-- end of id="content" -->
</body>
</body></html> </html>

View File

@ -22,40 +22,48 @@
</head> </head>
<body @ispage smart.html:onload="init()":@> <body @ispage smart.html:onload="init()":@>
<table class="main" border="0" width="100%" summary="Main navigation"><tr> <div id="firefly_head">
<td class="navi">
<a href="http://www.fireflymediaserver.org/" title="link to project home"> <a href="http://www.fireflymediaserver.org/" title="link to project home">
<img src="ff_logo_182.gif" width="182" height="47" alt="mt-daap logo"/> <img src="ff_logo_sm.gif" width="136" height="36" alt="firefly logo"/>
</a> </a>
<!-- <div class="ministatus">Version @VERSION@</div>-->
<div class="ministatus">Version @VERSION@</div>
<div class="naviheader">Welcome, @user@</div>
<div class="navibox">
<div class="navilink"><a class="@ispage index.html:naviselected:navi@" href="index.html">home</a></div>
<div class="navilink"><a class="@ispage config.html:naviselected:navi@" href="config.html">config</a></div>
<div class="navilink"><a class="@ispage status.html:naviselected:navi@" href="status.html">status</a></div>
<div class="navilink"><a class="@ispage smart.html:naviselected:navi@" href="smart.html">smart</a></div>
<!-- <div class="navilink"><a class="@ispage feedback.html:naviselected:navi@" href="feedback.html">feedback</a></div> -->
<div class="navilink"><a class="@ispage thanks.html:naviselected:navi@" href="thanks.html">thanks</a></div>
</div> </div>
<div id="tagline">
The best open-source media server for the <a href="http://www.rokulabs.com">Roku SoundBridge</a> and iTunes
</div>
<div id="navigation">
<ul>
<li><a @ispage index.html:class="naviselected":@ href="index.html">home</a></li>
<li><a @ispage config.html:class="naviselected":@ href="config.html">configuration</a></li>
<li><a @ispage status.html:class="naviselected":@ href="status.html">server status</a></li>
<li><a @ispage smart.html:class="naviselected":@ href="smart.html">smart playlists</a></li>
<!-- <li><a @ispage feedback.html:class="naviselected":@ href="feedback.html">feedback</a></li> -->
<li><a class="@ispage thanks.html:naviselected:navi@" href="thanks.html">thanks</a></li>
<li></li>
</ul>
<div class="links">
<a class="@ispage gpl-license.html:naviselected:navi@" href="gpl-license.html">GPL license</a><br />
<a class="@ispage aspl-license.html:naviselected:navi@" href="aspl-license.html">ASPL license</a><br />
</div>
<div class="links">
<b>Links</b><br />
<a href="http://www.fireflymediaserver.org/">firefly homepage</a><br />
<a href="http://svn.sourceforge.net/viewcvs.cgi/mt-daapd/">firefly source code</a><br />
</div>
</div>
<!--
<div class="naviheader">Experimental</div> <div class="naviheader">Experimental</div>
<div class="navibox"> <div class="navibox">
<div class="navilink"><a class="@ispage playlist.html:naviselected:navi@" href="playlist.html">playlist</a></div> <div class="navilink"><a class="@ispage playlist.html:naviselected:navi@" href="playlist.html">playlists</a></div>
<div class="navilink"><a class="@ispage applet.html:naviselected:navi@" href="applet.html">applet</a></div> <div class="navilink"><a class="@ispage applet.html:naviselected:navi@" href="applet.html">applet</a></div>
</div> </div>
-->
<div class="naviheader">Links</div> <!-- <div id="session_count" class="ministatus">@session-count@ Connected Users</div>-->
<div class="navibox">
<div class="navilink"><a class="navi"
href="http://www.fireflymediaserver.org/">firefly home</a></div>
<div class="navilink"><a class="navi" href="http://svn.sourceforge.net/viewcvs.cgi/mt-daapd/">source code</a></div>
<div class="navilink"><a class="@ispage gpl-license.html:naviselected:navi@" href="gpl-license.html">GPL license</a></div>
<div class="navilink"><a class="@ispage aspl-license.html:naviselected:navi@" href="aspl-license.html">ASPL license</a></div>
</div>
<div id="session_count" class="ministatus">@session-count@ Connected Users</div> <div id="content">
</td><td class="main">

View File

@ -1,13 +1,13 @@
@include hdr.html@ @include hdr.html@
<div style="width: 50em;">
<h1>Welcome</h1> <h1>Welcome</h1>
<p class="description"> <p>
This is the administrative web interface for the Firefly Media Server, This is the administrative web interface for the Firefly Media Server,
version @version@. version @version@.
</p> </p>
<h3>About</h3> <h3>About</h3>
<p class="description"> <p>
Firefly is an open-source media server for the Roku SoundBridge and Firefly is an open-source media server for the Roku SoundBridge and
Apple iTunes. It runs on POSIX platforms as well as Win32. It supports Apple iTunes. It runs on POSIX platforms as well as Win32. It supports
server-side transcoding and other advanced features. While every effort server-side transcoding and other advanced features. While every effort
@ -22,7 +22,7 @@ licensing of this software.
</p> </p>
<h3>Legal Info</h3> <h3>Legal Info</h3>
<p class="description"> <p>
Portions of this program are Copyright &copy; Portions of this program are Copyright &copy;
1999-2001 Apple Computer, Inc. All Rights Reserved. See the link 1999-2001 Apple Computer, Inc. All Rights Reserved. See the link
labeled <a href="aspl-license.html">ASPL License</a> for more information. labeled <a href="aspl-license.html">ASPL License</a> for more information.
@ -40,5 +40,5 @@ TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
REPAIR OR CORRECTION. REPAIR OR CORRECTION.
</p> </p>
</div>
@include ftr.html@ @include ftr.html@

View File

@ -1,9 +1,11 @@
/* General */ /* General */
body body
{ background: #DEE7EC; { background: #ffffff;
font: 0.7em Verdana, Helvetica, Arial, sans-serif; font: 0.7em Verdana, Helvetica, Arial, sans-serif;
color: #3C5C6B; color: #000000;
margin: 0;
padding: 0;
} }
img img
@ -14,24 +16,10 @@ table.main
{ border: 0px; { border: 0px;
} }
div.ministatus /*div.ministatus
{ text-align: center; { text-align: center;
margin: 1em 0em 1em 0em; margin: 1em 0em 1em 0em;
} }*/
td.navi
{ vertical-align: top;
text-align: left;
border: 0px;
width: 182px;
}
td.main
{ vertical-align: top;
text-align: left;
padding: 0em 0em 0em 2em;
border: 0px;
}
a a
{ color: blue; { color: blue;
@ -44,47 +32,32 @@ a:hover
} }
/* Navigation */ /* Navigation */
div.naviheader {
div.naviheader background-color: #A3C1E8;
{ background: #8CACBB;
color: #DEE7EC;
padding: 0.5em 0em 0.5em 1em; padding: 0.5em 0em 0.5em 1em;
margin: 1em 0em 0em 0em; margin: 1em 0em 0em 0em;
font-weight: bold; font-weight: bold;
border-color: #A3C1E8;
border-style: solid;
border-width: 1px 1px 0 1px;
} }
div.navibox div.navibox
{ border: 1px solid #8CACBB; { padding: 0.5em 0em 0.5em 0em;
padding: 0.5em 0em 0.5em 0em;
margin: 0em 0em 1em 0em; margin: 0em 0em 1em 0em;
border-color: #A3C1E8;
border-style: solid;
border-width: 0 1px 1px 1px;
background-color: #f0f0f0;
} }
div.navilink
{ padding: 0.1em 0.1em 0.1em 1.1em;
}
div.navilink:hover
{ background: #FFFFFF;
}
a.navi,a.navi:visited,a.naviselected
{ text-decoration: none;
color: #3C5C6B;
}
a.naviselected
{ font-weight: bold;
}
/* Main */ /* Main */
h1,h2,h3 h1,h2,h3
{ border-bottom: 1px solid #8CACBB; { border-bottom: 1px solid #A3C1E8;
} }
p.description
{
}
p.license p.license
{ text-align: justify; { text-align: justify;
@ -102,13 +75,13 @@ pre
} }
.playlistfield .playlistfield
{ border: 0px solid black; { border: 1px solid grey;
padding: 4px 0px 4px 0.5em; /* padding: 4px 0px 4px 0.5em;*/
width: 300px; width: 300px;
} }
textarea.text textarea.text
{ border: 0px solid black; { border: 1px solid grey;
padding: 4px 0px 4px 0.5em; padding: 4px 0px 4px 0.5em;
} }
@ -149,7 +122,7 @@ td.submit
} }
table table
{ border: 1px solid #8CACBB; { border: 1px solid #A3C1E8;
border-spacing: 0px; border-spacing: 0px;
border-collapse: collapse; border-collapse: collapse;
} }
@ -157,8 +130,8 @@ table
th th
{ font-weight: bold; { font-weight: bold;
text-align: right; text-align: right;
background: #8CACBB; background: #A3C1E8;
color: #DEE7EC; color: #000000;
} }
td td
@ -171,7 +144,69 @@ td.text
{ text-align: left; { text-align: left;
} }
#navigation {
li float: left;/*74A8F5*/
{ padding-bottom: 0.5em; background-color: #A3C1E8;
padding-top: 3em;
height: 500px;
} }
#navigation ul {
padding: 0;
margin: 0;
}
#navigation li {
padding: 0;
margin: 0;
list-style-type: none;
}
#navigation li a {
font-size: 120%;
display: block;
width: 12em;
text-decoration:none;
color: #000000;
padding: 2px 0.5em 2px 0.5em;
border-color: #ffffff;
border-width: 1px 0 1px 0;
border-style: solid;
}
#navigation li a:hover {
background-color: #F2BB73;
color: #000000;
/* border: 1px solid #F47D24;*/
}
#navigation li a.naviselected {
background-color: #ffffff;
}
.links {
padding-top: 1em;
padding-left: .5em;
}
#content {
float: left;
margin-left: 3em;
}
#tagline {
padding: 0.25em 0 0.25em 0.5em;
border-color: #F47D24;
border-style: solid;
border-width: 1px 0 1px 0;
background-color: #F2BB73
}
#firefly_head {
background-color: #f0f0f0;
padding-top: 4px;
padding-left: .5em;
}
#pl_editor label {
float: left;
width: 7em;
font: icon;
padding-top: .3em;
padding-left: 1em;
}
/ * Config.html */
#toggle_basic_advanced {
font: icon !important;
margin-left: 30em;
}

View File

@ -10,28 +10,25 @@
<div id="pl_data"> <div id="pl_data">
</div> </div>
<div id="pl_editor" style="display: none;">
<div id="pl_editor" style="display:none"> <div class="naviheader">
<h2>Please specify new playlist</h2> New playlist
</div>
<div class="navibox">
<form name="pl_form" action=""> <form name="pl_form" action="">
<div>
<input type="hidden" name="playlist_id"/> <input type="hidden" name="playlist_id"/>
<table width="400"> <label for="playlist_name">Name</label>
<tr> <input id="playlist_name" class="playlistfield" type="text" name="playlist_name" />
<th>New playlist</th> <br />
<th> <label for="playlist_spec">Playlist criteria</label>
<textarea id="playlist_spec" class="playlistfield" rows="5" name="playlist_spec"></textarea>
<br />
<input type="button" onclick="javascript:pl_update();" name="submit_button" value="Submit"/> <input type="button" onclick="javascript:pl_update();" name="submit_button" value="Submit"/>
<input type="button" onclick="javascript:pl_cancel();" value="Cancel"/> <input type="button" onclick="javascript:pl_cancel();" value="Cancel"/>
<input type="button" onclick="javascript:popUp('smartpopup.html');" value="Wizard"/> <input type="button" onclick="javascript:popUp('smartpopup.html');" value="Wizard"/>
</th>
<tr> </div>
<td>Name</td>
<td><input class="playlistfield" type="text" name="playlist_name"/></td>
</tr>
<tr>
<td>Playlist criteria</td>
<td><textarea class="playlistfield" rows="5" name="playlist_spec"></textarea></td>
</tr>
</table>
</form> </form>
</div> </div>

View File

@ -157,7 +157,7 @@ Section "MainSection" SEC01
File "${ADMIN_ROOT}\required.gif" File "${ADMIN_ROOT}\required.gif"
File "${ADMIN_ROOT}\playlist.js" File "${ADMIN_ROOT}\playlist.js"
File "${ADMIN_ROOT}\playlist.html" File "${ADMIN_ROOT}\playlist.html"
File "${ADMIN_ROOT}\ff_logo_182.gif" File "${ADMIN_ROOT}\ff_logo_sm.gif"
File "${ADMIN_ROOT}\mt-daapd.js" File "${ADMIN_ROOT}\mt-daapd.js"
File "${ADMIN_ROOT}\mt-daapd.css" File "${ADMIN_ROOT}\mt-daapd.css"
File "${ADMIN_ROOT}\linkTransparent.gif" File "${ADMIN_ROOT}\linkTransparent.gif"
@ -483,7 +483,7 @@ Section Uninstall
Delete "$INSTDIR\admin-root\linkTransparent.gif" Delete "$INSTDIR\admin-root\linkTransparent.gif"
Delete "$INSTDIR\admin-root\mt-daapd.css" Delete "$INSTDIR\admin-root\mt-daapd.css"
Delete "$INSTDIR\admin-root\mt-daapd.js" Delete "$INSTDIR\admin-root\mt-daapd.js"
Delete "$INSTDIR\admin-root\ff_logo_182.gif" Delete "$INSTDIR\admin-root\ff_logo_sm.gif"
Delete "$INSTDIR\admin-root\playlist.html" Delete "$INSTDIR\admin-root\playlist.html"
Delete "$INSTDIR\admin-root\playlist.js" Delete "$INSTDIR\admin-root\playlist.js"
Delete "$INSTDIR\admin-root\required.gif" Delete "$INSTDIR\admin-root\required.gif"