LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Organized the categories and appointments invitations inside a tabContainer

pull/45/head
Alexandre Cloutier 2014-07-16 14:01:50 -04:00
parent 17319cc8dd
commit 5217bed5ae
4 changed files with 103 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
UI/Templates/PreferencesUI/UIxPreferences.wox
View File

@ -216,74 +216,86 @@
const:name="reminderList" const:name="reminderList"
const:id="reminderList" const:id="reminderList"
string="itemReminderText" var:selection="reminder"/></dd> string="itemReminderText" var:selection="reminder"/></dd>
<dt><var:string label:value="Appointments invitations:"/></dt>
<dd><input type="checkbox"
const:name="preventInvitations"
const:id="preventInvitations"
var:checked="preventInvitations" />
<var:string label:value="Prevent from being invited to appointments"/></dd>
</dl> </dl>
<label id="whiteListLabel"><var:string label:value="White list for appointments invitations:"/></label> <div class="tabsContainer" id="calendarOptionsTabs">
<div id="appointmentsWhiteListWrapper" class="listWrapper"> <ul>
<table class="tableview" id="tableViewWhiteList"> <li target="calendarCategoriesView">
<thead> <span><var:string label:value="Categories"/></span></li>
<tr class="tableview"> <li target="calendarAppointmentsInvitationsView">
<th const:class="tbtv_headercell" const:id="whiteListTableHeader"> <span><var:string label:value="Appointments invitations"/></span></li>
<var:string label:value="Contacts names"/></th> </ul>
</tr> <div class="tabs">
</thead> <div id="calendarCategoriesView" class="tab">
<tbody> <div id="calendarCategoriesListWrapper" class="listWrapper">
<var:foreach list="appointmentsWhiteList" item="contact"> <table class="categoriesList" cellspacing="0">
<tr const:class="whiteListRow"> <thead>
<td const:class="whiteListCell"> <tr class="tableview">
<var:string var:value="contact"/></td> <th const:class="tbtv_headercell" const:id="nameTableHeader">
</tr> <var:string label:value="Name"/></th>
</var:foreach> <th const:class="tbtv_headercell" const:id="colorTableHeader">
</tbody> <var:string label:value="Color"/></th>
</table> </tr>
</div> </thead>
<div id="whiteListToolbar"> <tbody>
<a const:id="appointmentsWhiteListAdd" href="#"> <var:foreach list="calendarCategoryList" item="category">
<img rsrc:src="add-icon.png" label:title="Add" id="WhiteListAdd"/></a> <tr const:class="categoryListRow">
<a const:id="appointmentsWhiteListDelete" href="#"> <td const:class="categoryListCell">
<img rsrc:src="remove-icon.png" label:title="Delete" id="WhiteListDelete" /></a> <var:string var:value="category"/></td>
</div> <td const:class="categoryListCell">
<input type="hidden" const:id="whiteList" <div const:class="colorBox" var:data-color="categoryColor"><entity name="nbsp"/></div></td>
const:name="whiteList" var:value="whiteList"/> </tr>
</var:foreach>
<label id="calendarCategoriesLabel"><var:string label:value="Categories"/></label> </tbody>
<div id="calendarCategoriesListWrapper" class="listWrapper"> </table>
<table class="categoriesList" cellspacing="0"> </div><!-- #calendarCategoriesListWrapper -->
<thead> <div class="bottomToolbar">
<tr class="tableview"> <a const:id="calendarCategoryAdd" class="bottomButton" href="#">
<th const:class="tbtv_headercell" const:id="nameTableHeader"> <span><img rsrc:src="add-icon.png" label:title="Add" /></span></a>
<var:string label:value="Name"/></th> <a const:id="calendarCategoryDelete" class="bottomButton" href="#">
<th const:class="tbtv_headercell" const:id="colorTableHeader"> <span><img rsrc:src="remove-icon.png" label:title="Delete" /> </span></a>
<var:string label:value="Color"/></th> </div><!-- .bottomToolbar -->
</tr></thead> <input type="hidden" const:id="calendarCategoriesValue"
<tbody> const:name="calendarCategoriesValue" var:value="calendarCategoriesValue"/>
<var:foreach list="calendarCategoryList" item="category"> </div><!-- #calendarCategoriesView -->
<tr const:class="categoryListRow">
<td const:class="categoryListCell"> <div id="calendarAppointmentsInvitationsView" class="tab">
<var:string var:value="category"/></td> <div><input type="checkbox"
<td const:class="categoryListCell"> const:name="preventInvitations"
<div const:class="colorBox" var:data-color="categoryColor"><entity name="nbsp"/></div></td> const:id="preventInvitations"
</tr> var:checked="preventInvitations" />
</var:foreach> <var:string label:value="Prevent from being invited to appointments"/></div>
</tbody> <hr />
</table> <var:string label:value="White list for appointments invitations:"/>
</div> <div id="appointmentsWhiteListWrapper" class="listWrapper">
<div class="bottomToolbar"> <table id="tableViewWhiteList" cellspacing="0">
<a const:id="calendarCategoryAdd" class="bottomButton" href="#"> <thead>
<span><img rsrc:src="add-icon.png" label:title="Add" /> <tr class="tableview">
</span></a> <th const:class="tbtv_headercell" const:id="whiteListTableHeader">
<a const:id="calendarCategoryDelete" class="bottomButton" href="#"> <var:string label:value="Contacts names"/></th>
<span><img rsrc:src="remove-icon.png" label:title="Delete" /> </tr>
</span></a> </thead>
</div> <tbody>
<input type="hidden" const:id="calendarCategoriesValue" <var:foreach list="appointmentsWhiteList" item="contact">
const:name="calendarCategoriesValue" var:value="calendarCategoriesValue"/> <tr const:class="whiteListRow">
</div> <td const:class="whiteListCell">
<var:string var:value="contact"/></td>
</tr>
</var:foreach>
</tbody>
</table>
</div><!-- #appointmentsWhiteListWrapper -->
<div class="bottomToolbar">
<a const:id="appointmentsWhiteListAdd" class="bottomButton" href="#">
<span><img rsrc:src="add-icon.png" label:title="Add" /></span></a>
<a const:id="appointmentsWhiteListDelete" class="bottomButton" href="#">
<span><img rsrc:src="remove-icon.png" label:title="Delete" /></span></a>
</div><!-- .bottomToolbar -->
<input type="hidden" const:id="whiteList"
const:name="whiteList" var:value="whiteList"/>
</div><!-- #calendarAppointmentsInvitationsView -->
</div><!-- .tabs -->
</div><!-- #calendarOptionsTabs -->
</div><!-- #calendarOptionsView -->
</var:if> </var:if>
<div id="contactsOptionsView" class="tab"> <div id="contactsOptionsView" class="tab">
<label><var:string label:value="Categories"/></label> <label><var:string label:value="Categories"/></label>

52
UI/WebServerResources/UIxPreferences.css
View File

@ -13,17 +13,6 @@ DIV.bottomToolbar
left: 2em; left: 2em;
right: 2em; right: 2em;
bottom: 8px; } bottom: 8px; }
#whiteListToolbar
{ position: absolute;
height: 20px;
top: 286px;
width: 275px;
left: 235px;
background-image: url("thead_bg.png");
border: 1px solid #9B9B9B;
background-color: #E6E7E6;
}
#WhiteListAdd, #WhiteListDelete #WhiteListAdd, #WhiteListDelete
{ {
@ -70,40 +59,27 @@ DIV.listWrapper
.listWrapper TABLE TD .listWrapper TABLE TD
{ height: 22px; } { height: 22px; }
#whiteListLabel
{
position: absolute;
left: 12px;
}
#calendarCategoriesLabel
{
position: absolute;
top: 305px;
left:0;
}
#calendarCategoriesListWrapper #calendarCategoriesListWrapper
{ top: 320px; { top:1em;
bottom: 30px; bottom: 30px;
right: 2em; right: 2em;
left: 2em; } left: 2em; }
#appointmentsWhiteListWrapper #appointmentsWhiteListWrapper
{ top: 230px; { top:4.5em;
height: 54px; bottom: 30px;
left:235px; right: 2em;
width:275px; left: 2em; }
} #tableViewWhiteList
{ width:100%; }
#tableViewWhiteList
{ DIV#calendarOptionsTabs
width: 100%; { position: absolute;
} top: 225px;
left: 0px;
#whiteListTableHeader right: 0px;
{ bottom: 0px;
} }
#contactsCategoriesListWrapper #contactsCategoriesListWrapper

7
UI/WebServerResources/UIxPreferences.js
View File

@ -215,6 +215,13 @@ function initPreferences() {
mailController.attachToTabsContainer(tabsContainer); mailController.attachToTabsContainer(tabsContainer);
} }
// Inner tabs on the calendar module tab
tabsContainer = $('calendarOptionsTabs');
if (tabsContainer) {
var mailController = new SOGoTabsController();
mailController.attachToTabsContainer(tabsContainer);
}
_setupEvents(); _setupEvents();
// Optional function called when initializing the preferences // Optional function called when initializing the preferences

5
UI/WebServerResources/generic.css
View File

@ -374,7 +374,7 @@ TH.tbtv_navcell
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
background-color: #E7E7E7; background-color: #E7E7E7;
height: 20px; } height: 20px;}
TD.sortableTableHeader:active, TD.sortableTableHeader:active,
TH.sortableTableHeader:active TH.sortableTableHeader:active
@ -410,7 +410,8 @@ TH.tbtv_headercell IMG.tbtv_sortcell
text-align: right; text-align: right;
border: 0px; border: 0px;
width: 12px; width: 12px;
height: 12px; } height: 12px;
top:0;}
.tableview .tableview
{ cursor: default; { cursor: default;