1
0
Fork 0

Update settings page to use field templates.

Add tabs to switch user settings/plugin settings
Add new field templates 'custom', 'password', radio' and 'yesno'
Update main.js to support advanced fileds
Update duepuntozero, dispy e loozah themes
This commit is contained in:
Fabio Comuni 2011-07-06 12:10:00 +02:00
commit e7834e60f8
11 changed files with 385 additions and 853 deletions

View file

@ -1,212 +0,0 @@
<div class="tabs-wrapper">
<a class="tabs" id="profile-settings-link"><a href="settings">$ptitle</a>
<a class="tabs" id="plugin-settings-link"><a href="settings/addon">$lbl_plug</a>
<div class="tabs-end"></div>
</div>
<h1>$ptitle</h1>
$uexport
$nickname_block
<form action="settings" id="settings-form" method="post" autocomplete="off" >
<h3 class="settings-heading">$lbl_pass1</h3>
<div id="settings-password-wrapper" >
<p id="settings-password-desc" >
$lbl_pass2
</p>
<label id="settings-password-label" for="settings-password" >$lbl_pass3 </label>
<input type="password" id="settings-password" name="npassword" />
</div>
<div id="settings-password-end" ></div>
<div id="settings-confirm-wrapper" >
<label id="settings-confirm-label" for="settings-confirm" >$lbl_pass4 </label>
<input type="password" id="settings-confirm" name="confirm" />
</div>
<div id="settings-confirm-end" ></div>
<div id="settings-openid-wrapper" >
$oidhtml
</div>
<div id="settings-openid-end" ></div>
<div class="settings-submit-wrapper" >
<input type="submit" name="submit" class="settings-submit" value="$submit" />
</div>
<h3 class="settings-heading">$lbl_basic</h3>
<div id="settings-username-wrapper" >
<label id="settings-username-label" for="settings-username" >$lbl_fn </label>
<input type="text" name="username" id="settings-username" value="$username" />
</div>
<div id="settings-username-end" ></div>
<div id="settings-email-wrapper" >
<label id="settings-email-label" for="settings-email" >$lbl_email </label>
<input type="text" name="email" id="settings-email" value="$email" />
</div>
<div id="settings-email-end" ></div>
<div id="settings-timezone-wrapper" >
<label id="settings-timezone-label" for="timezone_select" >$lbl_tz </label>
$zoneselect
</div>
<div id="settings-timezone-end" ></div>
<div id="settings-defloc-wrapper" >
<label id="settings-defloc-label" for="settings-defloc" >$lbl_loc1 </label>
<input type="text" name="defloc" id="settings-defloc" value="$defloc" />
</div>
<div id="settings-defloc-end" ></div>
<div id="settings-allowloc-wrapper" >
<label id="settings-allowloc-label" for="settings-allowloc" >$lbl_loc2 </label>
<input type="checkbox" name="allow_location" id="settings-allowloc" value="1" $loc_checked />
</div>
<div id="settings-allowloc-end" ></div>
<div id="settings-theme-select">
<label id="settings-theme-label" for="theme-select" >$lbl_theme </label>
$theme
</div>
<div id="settings-theme-end"></div>
<div class="settings-submit-wrapper" >
<input type="submit" name="submit" class="settings-submit" value="$submit" />
</div>
<h3 class="settings-heading">$lbl_prv</h3>
<input type="hidden" name="visibility" value="$visibility" />
<div id="settings-maxreq-wrapper">
<label id="settings-maxreq-label" for="settings-maxreq" >$lbl_maxreq</label>
<input id="settings-maxreq" name="maxreq" value="$maxreq" />
<div id="settings-maxreq-desc">$lbl_maxrdesc</div>
</div>
<div id="settings-maxreq-end"></div>
$profile_in_dir
$profile_in_net_dir
<div id="settings-default-perms" class="settings-default-perms" >
<div id="settings-default-perms-menu" class="fakelink" onClick="openClose('settings-default-perms-select');" >$permissions $permdesc</div>
<div id="settings-default-perms-menu-end"></div>
<div id="settings-default-perms-select" style="display: none;" >
$aclselect
</div>
</div>
<div id="settings-default-perms-end"></div>
<div id="settings-blockw-wrapper" >
<label id="settings-blockw-label" for="settings-blockw" >$lbl_rempost </label>
<input type="checkbox" name="blockwall" id="settings-blockw" value="1" $blockw_checked />
</div>
<div id="settings-blockw-end" ></div>
<div id="settings-expire-desc">$lbl_exp1 <input type="text" size="3" name="expire" value="$expire" /> $lbl_exp2</div>
<div id="settings-expire-end"></div>
<div class="settings-submit-wrapper" >
<input type="submit" name="submit" class="settings-submit" value="Submit" />
</div>
<h3 class="settings-heading">$lbl_not1</h3>
<div id="settings-notify-wrapper">
<div id="settings-notify-desc">$lbl_not2 </div>
<label for="notify1" id="settings-label-notify1">$lbl_not3</label>
<input id="notify1" type="checkbox" $sel_notify1 name="notify1" value="1" />
<div id="notify1-end"></div>
<label for="notify2" id="settings-label-notify2">$lbl_not4</label>
<input id="notify2" type="checkbox" $sel_notify2 name="notify2" value="2" />
<div id="notify2-end"></div>
<label for="notify3" id="settings-label-notify3">$lbl_not5</label>
<input id="notify3" type="checkbox" $sel_notify3 name="notify3" value="4" />
<div id="notify3-end"></div>
<label for="notify4" id="settings-label-notify4">$lbl_not6</label>
<input id="notify4" type="checkbox" $sel_notify4 name="notify4" value="8" />
<div id="notify4-end"></div>
<label for="notify5" id="settings-label-notify5">$lbl_not7</label>
<input id="notify5" type="checkbox" $sel_notify5 name="notify5" value="16" />
<div id="notify5-end"></div>
</div>
<div id="settings=notify-end"></div>
<div class="settings-submit-wrapper" >
<input type="submit" name="submit" class="settings-submit" value="$submit" />
</div>
<h3 class="settings-imap">$lbl_imap0</h3>
<p>
$imap_desc
$mail_disabled
</p>
<label for="imap-server" id="settings-label-imap1">$lbl_imap1</label>
<input type="text" id="imap-server" name="mail_server" value="$imap_server" $imap_disabled />
<div id="imap-server-end"></div>
<label for="imap-port" id="settings-label-imap2">$lbl_imap2</label>
<input type="text" id="imap-port" name="mail_port" value="$imap_port" $imap_disabled />
<div id="imap-port-end"></div>
<label for="imap-ssl" id="settings-label-imap3">$lbl_imap3</label>
<input type="text" id="imap-ssl" name="mail_ssl" value="$imap_ssl" $imap_disabled />
<div id="imap-ssl-end"></div>
<label for="imap-user" id="settings-label-imap4">$lbl_imap4</label>
<input type="text" id="imap-user" name="mail_user" value="$imap_user" $imap_disabled />
<div id="imap-user-end"></div>
<label for="imap-pass" id="settings-label-imap5">$lbl_imap5</label>
<input type="password" id="imap-pass" name="mail_pass" value="" $imap_disabled />
<div id="imap-pass-end"></div>
<label for="imap-replyto" id="settings-label-imap6">$lbl_imap6</label>
<input type="text" id="imap-replyto" name="mail_replyto" value="$imap_replyto" $imap_disabled />
<div id="imap-replyto-end"></div>
<label for="imap-pubmail" id="settings-label-imap7">$lbl_imap7</label>
<input type="checkbox" name="mail_pubmail" id="imap-pubmail" $pubmail_checked value="1" $imap_disabled />
<div id="imap-pubmail-end"></div>
<div class="settings-submit-wrapper" >
<input type="submit" name="submit" class="settings-submit" value="$submit" />
</div>
<h3 class="settings-heading">$lbl_advn</h3>
$pagetype
<div class="settings-submit-wrapper" >
<input type="submit" name="submit" class="settings-submit" value="$submit" />
</div>

View file

@ -741,6 +741,13 @@ div[id$="wrapper"] br { clear: left; }
/**
* register, settings & profile forms
*/
#id_openid_url,
.openid {
background: url(login-bg.gif) no-repeat;
background-position: 0 50%;
padding-left: 18px;
}
#settings-nickname-desc {
background-color: #DDEFFF;
-webkit-border-radius: 5px;
@ -750,20 +757,17 @@ div[id$="wrapper"] br { clear: left; }
}
#register-form div,
#profile-edit-form div,
#settings-form div {
#profile-edit-form div {
clear: both;
}
#register-form label,
#profile-edit-form label,
#settings-form label {
#profile-edit-form label {
width: 300px; float: left;
}
#register-form span,
#profile-edit-form span,
#settings-form span {
#profile-edit-form span {
color: #555753;
display:block;
margin-bottom: 20px;
@ -956,31 +960,6 @@ div[id$="wrapper"] br { clear: left; }
#adminpage dd {
margin-left: 200px;
}
#adminpage .field {
clear: left;
margin-bottom: 5px;
padding-bottom: 5px;
}
#adminpage .field label {
float: left;
width: 200px;
font-weight: bold;
}
#adminpage .field input,
#adminpage .field textarea {
width: 400px;
}
#adminpage .field textarea { height: 100px; }
#adminpage .field_help {
display: block;
margin-left: 200px;
color: #666666;
}
#adminpage h3 {
border-bottom: 1px solid #cccccc;
}
@ -1012,6 +991,67 @@ div[id$="wrapper"] br { clear: left; }
#adminpage table tr:hover { background-color: #bbc7d7; }
#adminpage .selectall { text-align: right; }
/**
* Form fields
*/
.field {
margin-bottom: 10px;
padding-bottom: 10px;
overflow: auto;
width: 100%
}
.field label {
float: left;
width: 200px;
}
.field input,
.field textarea {
width: 400px;
}
.field textarea { height: 100px; }
.field_help {
display: block;
margin-left: 200px;
color: #666666;
}
.field .onoff {
float: left;
width: 80px;
}
.field .onoff a {
display: block;
border:1px solid #666666;
background-image:url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 16px;
text-decoration: none;
}
.field .onoff .off {
border-color:#666666;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.field .onoff .on {
border-color:#204A87;
padding-right: 40px;
background-position: right center;
background-color: #3465A4;
color: #FFFFFF;
text-align: left;
}
.hidden { display: none!important; }
.field.radio .field_help { margin-left: 0px; }
/**
* ICONS
*/

View file

@ -27,6 +27,7 @@ input {
img { border :0px; }
#id_openid_url,
.openid {
background: url(login-bg.gif) no-repeat;
background-position: 0 50%;
@ -402,130 +403,7 @@ input#dfrn-url {
margin-left: 50px;
}
#settings-nick-wrapper {
margin-top: 20px;
}
#settings-expire-end {
margin-bottom: 30px;
}
#settings-username-end,
#settings-email-end,
#settings-nick-end,
#settings-defloc-end,
#settings-allowloc-end,
#settings-blockw-end,
#settings-timezone-end,
#settings-theme-end,
#settings-password-end,
#settings-confirm-end,
#settings-openid-end,
#settings-maxreq-end,
#notify1-end,
#notify2-end,
#notify3-end,
#notify4-end,
#notify5-end,
#imap-server-end,
#imap-port-end,
#imap-ssl-end,
#imap-user-end,
#imap-pass-end,
#imap-replyto-end,
#imap-pubmail-end {
margin-bottom: 5px;
clear: both;
}
#settings-username-label,
#settings-email-label,
#settings-nick-label,
#settings-defloc-label,
#settings-allowloc-label,
#settings-blockw-label,
#settings-timezone-label,
#settings-theme-label,
#settings-password-label,
#settings-confirm-label,
#settings-openid-label,
#settings-maxreq-label,
#settings-label-notify1,
#settings-label-notify2,
#settings-label-notify3,
#settings-label-notify4,
#settings-label-notify5,
#settings-label-imap1,
#settings-label-imap2,
#settings-label-imap3,
#settings-label-imap4,
#settings-label-imap5,
#settings-label-imap6,
#settings-label-imap7 {
float: left;
width: 200px;
}
#settings-username,
#settings-email,
#settings-nick,
#settings-defloc,
#settings-allowloc,
#settings-blockw,
#timezone-select,
#theme-select,
#settings-password,
#settings-confirm,
#settings-maxreq,
#notify1,
#notify2,
#notify3,
#notify4,
#notify5,
#imap-server,
#imap-port,
#imap-ssl,
#imap-user,
#imap-pass,
#imap-replyto,
#imap-pubmail {
float: left;
margin-bottom: 20px;
}
#settings-openid {
float: left;
margin-bottom: 20px;
width: 127px;
}
#settings-maxreq-desc {
float: left;
margin-left: 20px;
}
#settings-theme-label,
#settings-defloc-label {
margin-top: 20px;
}
#settings-defloc {
margin-top: 20px;
}
#theme-select {
margin-top: 20px;
width: 207px;
}
#settings-notify-desc {
margin-top: 20px;
margin-bottom: 20px;
}
#settings-nick-desc {
width: 500px;
}
#cropimage-wrapper, #cropimage-preview-wrapper {
float: left;
@ -1588,30 +1466,6 @@ input#dfrn-url {
width: 180px;
}
/*
.profile-tabs {
float: left;
padding: 4px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 5px;
font-size: 0.8em;
font-weight: bold;
background-color: #ECECEC;
border: 1px solid #858585;
}
.profile-tabs:hover {
background-color: #0CBEFE;
color: #F5F6FB;
border: 1px solid #F5F6FB;
}
#profile-tabs-end {
clear: both;
}*/
.comment-edit-text-empty {
color: gray;
height: 30px;
@ -2582,9 +2436,10 @@ a.mail-list-link {
* Form fields
*/
.field {
clear: left;
margin-bottom: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
padding-bottom: 10px;
overflow: auto;
width: 100%
}
.field label {
@ -2603,7 +2458,40 @@ a.mail-list-link {
color: #666666;
}
.field .onoff {
float: left;
width: 80px;
}
.field .onoff a {
display: block;
border:1px solid #666666;
background-image:url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 16px;
text-decoration: none;
}
.field .onoff .off {
border-color:#666666;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.field .onoff .on {
border-color:#204A87;
padding-right: 40px;
background-position: right center;
background-color: #3465A4;
color: #FFFFFF;
text-align: left;
}
.hidden { display: none!important; }
.field.radio .field_help { margin-left: 0px; }
/**
* ADMIN

View file

@ -41,12 +41,14 @@ input:hover {
cursor: pointer;
}
#id_openid_url,
.openid {
background-color: #ECECEC !important;
background: url(login-bg.gif) no-repeat;
background-position: 0 50%;
padding-left: 18px;
}
#id_openid_url:hover,
.openid:hover {
background-color: #0CBEFE !important;
}
@ -531,133 +533,6 @@ input#dfrn-url {
margin-left: 50px;
}
#settings-nick-wrapper {
margin-bottom: 15px;
}
#settings-expire-end {
margin-bottom: 30px;
}
#settings-username-end,
#settings-email-end,
#settings-nick-end,
#settings-defloc-end,
#settings-allowloc-end,
#settings-blockw-end,
#settings-timezone-end,
#settings-theme-end,
#settings-password-end,
#settings-confirm-end,
#settings-openid-end,
#settings-maxreq-end,
#notify1-end,
#notify2-end,
#notify3-end,
#notify4-end,
#notify5-end,
#imap-server-end,
#imap-port-end,
#imap-ssl-end,
#imap-user-end,
#imap-pass-end,
#imap-replyto-end,
#imap-pubmail-end {
margin-bottom: 5px;
clear: both;
}
#settings-username-label,
#settings-email-label,
#settings-nick-label,
#settings-defloc-label,
#settings-allowloc-label,
#settings-blockw-label,
#settings-timezone-label,
#settings-theme-label,
#settings-password-label,
#settings-confirm-label,
#settings-openid-label,
#settings-maxreq-label,
#settings-label-notify1,
#settings-label-notify2,
#settings-label-notify3,
#settings-label-notify4,
#settings-label-notify5,
#settings-label-imap1,
#settings-label-imap2,
#settings-label-imap3,
#settings-label-imap4,
#settings-label-imap5,
#settings-label-imap6,
#settings-label-imap7 {
float: left;
width: 200px;
}
#settings-username,
#settings-email,
#settings-nick,
#settings-defloc,
#settings-allowloc,
#settings-blockw,
#timezone-select,
#theme-select,
#settings-password,
#settings-confirm,
#settings-maxreq,
#notify1,
#notify2,
#notify3,
#notify4,
#notify5,
#imap-server,
#imap-port,
#imap-ssl,
#imap-user,
#imap-pass,
#imap-replyto,
#imap-pubmail {
float: left;
margin-bottom: 20px;
}
#settings-openid {
float: left;
margin-bottom: 20px;
width: 127px;
}
#settings-maxreq-desc {
float: left;
margin-left: 20px;
}
#settings-theme-label,
#settings-defloc-label {
margin-top: 20px;
}
#settings-defloc {
margin-top: 20px;
}
#theme-select {
margin-top: 20px;
width: 207px;
}
#settings-notify-desc {
margin-top: 20px;
margin-bottom: 20px;
}
#settings-nick-desc {
width: 500px;
}
#settings-nick {
margin-bottom: 30px;
}
#cropimage-wrapper, #cropimage-preview-wrapper {
float: left;
@ -2594,15 +2469,15 @@ a.mail-list-link {
* Form fields
*/
.field {
clear: left;
margin-bottom: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
padding-bottom: 10px;
overflow: auto;
width: 100%
}
.field label {
float: left;
width: 200px;
font-weight: bold;
}
.field input,
@ -2618,6 +2493,40 @@ a.mail-list-link {
}
.field .onoff {
float: left;
width: 80px;
}
.field .onoff a {
display: block;
border:1px solid #666666;
background-image:url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 16px;
text-decoration: none;
}
.field .onoff .off {
border-color:#666666;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.field .onoff .on {
border-color:#204A87;
padding-right: 40px;
background-position: right center;
background-color: #3465A4;
color: #FFFFFF;
text-align: left;
}
.hidden { display: none!important; }
.field.radio .field_help { margin-left: 0px; }
/**
* ADMIN
*/