Organized the categories and appointments invitations inside a tabContainer
parent
17319cc8dd
commit
5217bed5ae
|
@ -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"/>
|
||||
<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 -->
|
||||
|
||||
<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 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>
|
||||
|
|
|
@ -14,17 +14,6 @@ DIV.bottomToolbar
|
|||
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
|
||||
{
|
||||
border-bottom: 1px solid #9B9B9B;
|
||||
|
@ -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%;
|
||||
}
|
||||
{ width:100%; }
|
||||
|
||||
#whiteListTableHeader
|
||||
{
|
||||
DIV#calendarOptionsTabs
|
||||
{ position: absolute;
|
||||
top: 225px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
#contactsCategoriesListWrapper
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue