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

52
UI/WebServerResources/UIxPreferences.css
View File

@ -13,17 +13,6 @@ DIV.bottomToolbar
left: 2em;
right: 2em;
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
{
@ -70,40 +59,27 @@ DIV.listWrapper
.listWrapper TABLE TD
{ height: 22px; }
#whiteListLabel
{
position: absolute;
left: 12px;
}
#calendarCategoriesLabel
{
position: absolute;
top: 305px;
left:0;
}
#calendarCategoriesListWrapper
{ top: 320px;
{ top:1em;
bottom: 30px;
right: 2em;
left: 2em; }
#appointmentsWhiteListWrapper
{ top: 230px;
height: 54px;
left:235px;
width:275px;
{ top:4.5em;
bottom: 30px;
right: 2em;
left: 2em; }
}
#tableViewWhiteList
{
width: 100%;
}
#whiteListTableHeader
{
#tableViewWhiteList
{ width:100%; }
DIV#calendarOptionsTabs
{ position: absolute;
top: 225px;
left: 0px;
right: 0px;
bottom: 0px;
}
#contactsCategoriesListWrapper

7
UI/WebServerResources/UIxPreferences.js
View File

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

5
UI/WebServerResources/generic.css
View File

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