| 2150 |
mathias |
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
|
2 |
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
3 |
<html>
|
|
|
4 |
<head>
|
|
|
5 |
<title>Demo Mail Application</title>
|
|
|
6 |
|
|
|
7 |
<style type="text/css">
|
|
|
8 |
@import "../../dojo/resources/dojo.css";
|
|
|
9 |
@import "../themes/soria/soria.css";
|
|
|
10 |
@import "mail/mail.css";
|
|
|
11 |
</style>
|
|
|
12 |
|
|
|
13 |
<script type="text/javascript" src="../../dojo/dojo.js"
|
|
|
14 |
djConfig="isDebug: false, parseOnLoad: true, defaultTestTheme: 'soria'"></script>
|
|
|
15 |
<script type="text/javascript" src="../tests/_testCommon.js"></script>
|
|
|
16 |
<!--
|
|
|
17 |
<script type="text/javascript" src="../dijit.js"></script>
|
|
|
18 |
<script type="text/javascript" src="../dijit-all.js"></script>
|
|
|
19 |
-->
|
|
|
20 |
<script type="text/javascript">
|
|
|
21 |
// Use profile builds, if available. Since we use pretty much all of the widgets, just use dijit-all.
|
|
|
22 |
// A custom profile would provide some additional savings.
|
|
|
23 |
dojo.require("dijit.dijit");
|
|
|
24 |
dojo.require("dijit.dijit-all");
|
|
|
25 |
|
|
|
26 |
dojo.require("dojo.parser");
|
|
|
27 |
dojo.require("dojo.data.ItemFileWriteStore");
|
|
|
28 |
|
|
|
29 |
dojo.require("dijit.dijit");
|
|
|
30 |
dojo.require("dijit.Declaration");
|
|
|
31 |
dojo.require("dijit.form.Button");
|
|
|
32 |
dojo.require("dijit.Menu");
|
|
|
33 |
dojo.require("dijit.Tree");
|
|
|
34 |
dojo.require("dijit.Tooltip");
|
|
|
35 |
dojo.require("dijit.Dialog");
|
|
|
36 |
dojo.require("dijit.Toolbar");
|
|
|
37 |
dojo.require("dijit._Calendar");
|
|
|
38 |
dojo.require("dijit.ColorPalette");
|
|
|
39 |
dojo.require("dijit.Editor");
|
|
|
40 |
dojo.require("dijit._editor.plugins.LinkDialog");
|
|
|
41 |
dojo.require("dijit.ProgressBar");
|
|
|
42 |
|
|
|
43 |
dojo.require("dijit.form.ComboBox");
|
|
|
44 |
dojo.require("dijit.form.CheckBox");
|
|
|
45 |
dojo.require("dijit.form.FilteringSelect");
|
|
|
46 |
dojo.require("dijit.form.Textarea");
|
|
|
47 |
|
|
|
48 |
dojo.require("dijit.layout.LayoutContainer");
|
|
|
49 |
dojo.require("dijit.layout.SplitContainer");
|
|
|
50 |
dojo.require("dijit.layout.AccordionContainer");
|
|
|
51 |
dojo.require("dijit.layout.TabContainer");
|
|
|
52 |
dojo.require("dijit.layout.ContentPane");
|
|
|
53 |
|
|
|
54 |
dojo.addOnLoad(function(){
|
|
|
55 |
dijit.setWaiRole(dojo.body(), "application");
|
|
|
56 |
});
|
|
|
57 |
|
|
|
58 |
var paneId=1;
|
|
|
59 |
|
|
|
60 |
// for "new message" tab closing
|
|
|
61 |
function testClose(pane,tab){
|
|
|
62 |
return confirm("Are you sure you want to leave your changes?");
|
|
|
63 |
}
|
|
|
64 |
|
|
|
65 |
// fake mail download code:
|
|
|
66 |
var numMails;
|
|
|
67 |
var updateFetchStatus = function(x){
|
|
|
68 |
if (x == 0) {
|
|
|
69 |
dijit.byId('fakeFetch').update({ indeterminate: false });
|
|
|
70 |
return;
|
|
|
71 |
}
|
|
|
72 |
dijit.byId('fakeFetch').update({ progress: x });
|
|
|
73 |
if (x == numMails){
|
|
|
74 |
dojo.fadeOut({ node: 'fetchMail', duration:800,
|
|
|
75 |
// set progress back to indeterminate. we're cheating, because this
|
|
|
76 |
// doesn't actually have any data to "progress"
|
|
|
77 |
onEnd: function(){
|
|
|
78 |
dijit.byId('fakeFetch').update({ indeterminate: true });
|
|
|
79 |
dojo.byId('fetchMail').style.visibility='hidden'; // remove progress bar from tab order
|
|
|
80 |
}
|
|
|
81 |
}).play();
|
|
|
82 |
}
|
|
|
83 |
}
|
|
|
84 |
var fakeReport = function(percent){
|
|
|
85 |
// FIXME: can't set a label on an indeterminate progress bar
|
|
|
86 |
// like if(this.indeterminate) { return " connecting."; }
|
|
|
87 |
return "Fetching: "+(percent*this.maximum) + " of " + this.maximum + " messages.";
|
|
|
88 |
}
|
|
|
89 |
var fakeDownload = function(){
|
|
|
90 |
dojo.byId('fetchMail').style.visibility='visible';
|
|
|
91 |
numMails = Math.floor(Math.random()*10)+1;
|
|
|
92 |
dijit.byId('fakeFetch').update({ maximum: numMails, progress:0 });
|
|
|
93 |
dojo.fadeIn({ node: 'fetchMail', duration:300 }).play();
|
|
|
94 |
for (var i=0; i<=numMails; i++){
|
|
|
95 |
setTimeout("updateFetchStatus("+i+")",((i+1)*(Math.floor(Math.random()*100)+400)));
|
|
|
96 |
}
|
|
|
97 |
}
|
|
|
98 |
// fake sending dialog progress bar
|
|
|
99 |
var stopSendBar = function(){
|
|
|
100 |
dijit.byId('fakeSend').update({indeterminate: false});
|
|
|
101 |
dijit.byId('sendDialog').hide();
|
|
|
102 |
tabs.selectedChildWidget.onClose = function(){return true;}; // don't want confirm message
|
|
|
103 |
tabs.closeChild(tabs.selectedChildWidget);
|
|
|
104 |
}
|
|
|
105 |
|
|
|
106 |
var showSendBar = function(){
|
|
|
107 |
dijit.byId('fakeSend').update({ indeterminate: true });
|
|
|
108 |
dijit.byId('sendDialog').show();
|
|
|
109 |
setTimeout("stopSendBar()", 3000);
|
|
|
110 |
}
|
|
|
111 |
|
|
|
112 |
</script>
|
|
|
113 |
</head>
|
|
|
114 |
<body class="soria">
|
|
|
115 |
<div dojoType="dojo.data.ItemFileWriteStore" jsId="mailStore"
|
|
|
116 |
url="mail/mail.json"></div>
|
|
|
117 |
|
|
|
118 |
<!-- Inline declaration of a table widget (thanks Alex!) -->
|
|
|
119 |
|
|
|
120 |
<table dojoType="dijit.Declaration"
|
|
|
121 |
widgetClass="demo.Table" class="demoTable"
|
|
|
122 |
defaults="{ store: null, query: { query: { type: 'message' } }, columns: [ { name: 'From', attribute: 'sender' }, { name: 'Subject', attribute: 'label' }, { name: 'Sent on', attribute: 'sent',
|
|
|
123 |
format: function(v){ return dojo.date.locale.format(dojo.date.stamp.fromISOString(v), {selector: 'date'}); }
|
|
|
124 |
} ] }">
|
|
|
125 |
<thead dojoAttachPoint="head">
|
|
|
126 |
<tr dojoAttachPoint="headRow"></tr>
|
|
|
127 |
</thead>
|
|
|
128 |
<tbody dojoAttachPoint="body">
|
|
|
129 |
<tr dojoAttachPoint="row"></tr>
|
|
|
130 |
</tbody>
|
|
|
131 |
|
|
|
132 |
<script type="dojo/method">
|
|
|
133 |
dojo.forEach(this.columns, function(item, idx){
|
|
|
134 |
var icn = item.className||"";
|
|
|
135 |
// add a header for each column
|
|
|
136 |
var tth = document.createElement("th");
|
|
|
137 |
tth.innerHTML = "<span class='arrowNode'></span> "+ item.name;
|
|
|
138 |
tth.className = icn;
|
|
|
139 |
dojo.connect(tth, "onclick", dojo.hitch(this, "onSort", idx));
|
|
|
140 |
this.headRow.appendChild(tth);
|
|
|
141 |
|
|
|
142 |
// and fill in the column cell in the template row
|
|
|
143 |
this.row.appendChild(document.createElement("td"));
|
|
|
144 |
this.row.lastChild.className = icn;
|
|
|
145 |
}, this);
|
|
|
146 |
this.runQuery();
|
|
|
147 |
</script>
|
|
|
148 |
<script type="dojo/method" event="onSort" args="index">
|
|
|
149 |
var ca = this.columns[index].attribute;
|
|
|
150 |
var qs = this.query.sort;
|
|
|
151 |
// clobber an existing sort arrow
|
|
|
152 |
dojo.query("> th", this.headRow).removeClass("arrowUp").removeClass("arrowDown");
|
|
|
153 |
if(qs && qs[0].attribute == ca){
|
|
|
154 |
qs[0].descending = !qs[0].descending;
|
|
|
155 |
}else{
|
|
|
156 |
this.query.sort = [{
|
|
|
157 |
attribute: ca,
|
|
|
158 |
descending: false
|
|
|
159 |
}];
|
|
|
160 |
}
|
|
|
161 |
var th = dojo.query("> th", this.headRow)[index];
|
|
|
162 |
dojo.addClass(th, (this.query.sort[0].descending ? "arrowUp" : "arrowDown"));
|
|
|
163 |
this.runQuery();
|
|
|
164 |
</script>
|
|
|
165 |
<script type="dojo/method" event="runQuery">
|
|
|
166 |
this.query.onBegin = dojo.hitch(this, function(){ dojo.query("tr", this.body).orphan(); });
|
|
|
167 |
this.query.onItem = dojo.hitch(this, "onItem");
|
|
|
168 |
this.query.onComplete = dojo.hitch(this, function(){
|
|
|
169 |
dojo.query("tr:nth-child(odd)", this.body).addClass("oddRow");
|
|
|
170 |
dojo.query("tr:nth-child(even)", this.body).removeClass("oddRow");
|
|
|
171 |
});
|
|
|
172 |
this.store.fetch(this.query);
|
|
|
173 |
</script>
|
|
|
174 |
<script type="dojo/method" event="onItem" args="item">
|
|
|
175 |
var tr = this.row.cloneNode(true);
|
|
|
176 |
dojo.query("td", tr).forEach(function(n, i, a){
|
|
|
177 |
var tc = this.columns[i];
|
|
|
178 |
var tv = this.store.getValue(item, tc.attribute)||"";
|
|
|
179 |
if(tc.format){ tv = tc.format(tv, item, this.store); }
|
|
|
180 |
n.innerHTML = tv;
|
|
|
181 |
}, this);
|
|
|
182 |
this.body.appendChild(tr);
|
|
|
183 |
dojo.connect(tr, "onclick", this, function(){ this.onClick(item); });
|
|
|
184 |
</script>
|
|
|
185 |
</table>
|
|
|
186 |
|
|
|
187 |
<!-- Inline declaration for programmatically created "New Message" tabs -->
|
|
|
188 |
<div dojoType="dijit.Declaration"
|
|
|
189 |
widgetClass="mail.NewMessage">
|
|
|
190 |
<div dojoType="dijit.layout.LayoutContainer" dojoAttachPoint="container" title="Composing..." closeable="true">
|
|
|
191 |
<div dojoType="dijit.layout.LayoutContainer" layoutAlign="top" style="overflow: visible; z-index: 10; color:#666; ">
|
|
|
192 |
<table width=100%>
|
|
|
193 |
<tr style="padding-top:5px;">
|
|
|
194 |
<td style="padding-left:20px; padding-right: 8px; text-align:right;"><label for="${id}_to">To:</label></td>
|
|
|
195 |
<td width=100%>
|
|
|
196 |
<select dojoType="dijit.form.ComboBox" id="${id}_to" hasDownArrow="false">
|
|
|
197 |
<option></option>
|
|
|
198 |
<option>adam@yahoo.com</option>
|
|
|
199 |
<option>barry@yahoo.com</option>
|
|
|
200 |
<option>bob@yahoo.com</option>
|
|
|
201 |
<option>cal@yahoo.com</option>
|
|
|
202 |
<option>chris@yahoo.com</option>
|
|
|
203 |
<option>courtney@yahoo.com</option>
|
|
|
204 |
</select>
|
|
|
205 |
</td>
|
|
|
206 |
</tr>
|
|
|
207 |
<tr>
|
|
|
208 |
<td style="padding-left: 20px; padding-right:8px; text-align:right;"><label for="${id}_subject">Subject:</label></td>
|
|
|
209 |
<td width=100%>
|
|
|
210 |
<select dojoType="dijit.form.ComboBox" id="${id}_subject" hasDownArrow="false">
|
|
|
211 |
<option></option>
|
|
|
212 |
<option>progress meeting</option>
|
|
|
213 |
<option>reports</option>
|
|
|
214 |
<option>lunch</option>
|
|
|
215 |
<option>vacation</option>
|
|
|
216 |
<option>status meeting</option>
|
|
|
217 |
</select>
|
|
|
218 |
</td>
|
|
|
219 |
</tr>
|
|
|
220 |
</table>
|
|
|
221 |
<hr noshade size="1">
|
|
|
222 |
</div>
|
|
|
223 |
|
|
|
224 |
<!-- new messase part -->
|
|
|
225 |
<div dojoType="dijit.layout.LayoutContainer" layoutAlign="client">
|
|
|
226 |
<!-- FIXME: editor as direct widget here doesn't init -->
|
|
|
227 |
<div dojoType="dijit.layout.ContentPane" href="mail/newMail.html"></div>
|
|
|
228 |
</div>
|
|
|
229 |
|
|
|
230 |
<div dojoType="dijit.layout.LayoutContainer" layoutAlign="bottom" align=center>
|
|
|
231 |
<button dojoType="dijit.form.Button" iconClass="mailIconOk"
|
|
|
232 |
>Send
|
|
|
233 |
<script type="dojo/method" event="onClick">
|
|
|
234 |
var toField = dojo.byId("${id}_to");
|
|
|
235 |
if (toField.value == ""){
|
|
|
236 |
alert("Please enter a recipient address");
|
|
|
237 |
}else{
|
|
|
238 |
showSendBar();
|
|
|
239 |
}
|
|
|
240 |
</script>
|
|
|
241 |
</button>
|
|
|
242 |
<button dojoType="dijit.form.Button" iconClass="mailIconCancel"
|
|
|
243 |
>Cancel
|
|
|
244 |
<script type="dojo/method" event="onClick">
|
|
|
245 |
tabs.closeChild(tabs.selectedChildWidget);
|
|
|
246 |
</script>
|
|
|
247 |
</button>
|
|
|
248 |
</div>
|
|
|
249 |
|
|
|
250 |
|
|
|
251 |
</div>
|
|
|
252 |
</div>
|
|
|
253 |
|
|
|
254 |
|
|
|
255 |
<div dojoType="dijit.layout.LayoutContainer" id="main">
|
|
|
256 |
|
|
|
257 |
<!-- toolbar with new mail button, etc. -->
|
|
|
258 |
<div dojoType="dijit.Toolbar" layoutAlign="top" style="height:25px;">
|
|
|
259 |
<div id="getMail" dojoType="dijit.form.ComboButton"
|
|
|
260 |
iconClass="mailIconGetMail" optionsTitle="Mail Source Options">
|
|
|
261 |
<script type="dojo/method" event="onClick">
|
|
|
262 |
fakeDownload();
|
|
|
263 |
</script>
|
|
|
264 |
<span>Get Mail</span>
|
|
|
265 |
<ul dojoType="dijit.Menu">
|
|
|
266 |
<li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">Yahoo</li>
|
|
|
267 |
<li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">GMail</li>
|
|
|
268 |
</ul>
|
|
|
269 |
</div>
|
|
|
270 |
<span dojoType="dijit.Tooltip" connectId="getMail">Click to download new mail.</span>
|
|
|
271 |
|
|
|
272 |
<button
|
|
|
273 |
id="newMsg" dojoType="dijit.form.Button"
|
|
|
274 |
iconClass="mailIconNewMessage">
|
|
|
275 |
New Message
|
|
|
276 |
<script type="dojo/method" event="onClick">
|
|
|
277 |
/* make a new tab for composing the message */
|
|
|
278 |
var newTab = new mail.NewMessage({id: "new"+paneId }).container;
|
|
|
279 |
dojo.mixin(newTab,
|
|
|
280 |
{
|
|
|
281 |
title: "New Message #" + paneId++,
|
|
|
282 |
closable: true,
|
|
|
283 |
onClose: testClose
|
|
|
284 |
}
|
|
|
285 |
);
|
|
|
286 |
tabs.addChild(newTab);
|
|
|
287 |
tabs.selectChild(newTab);
|
|
|
288 |
</script>
|
|
|
289 |
</button>
|
|
|
290 |
<span dojoType="dijit.Tooltip" connectId="newMsg">Click to compose new message.</span>
|
|
|
291 |
|
|
|
292 |
<button id="options" dojoType="dijit.form.Button" iconClass="mailIconOptions">
|
|
|
293 |
Options
|
|
|
294 |
<script type="dojo/method" event="onClick">
|
|
|
295 |
dijit.byId('optionsDialog').show();
|
|
|
296 |
</script>
|
|
|
297 |
</button>
|
|
|
298 |
<div dojoType="dijit.Tooltip" connectId="options">Set various options</div>
|
|
|
299 |
</div>
|
|
|
300 |
|
|
|
301 |
<div dojoType="dijit.layout.TabContainer" id="tabs" jsId="tabs" layoutAlign="client">
|
|
|
302 |
<!-- main section with tree, table, and preview -->
|
|
|
303 |
<div dojoType="dijit.layout.SplitContainer"
|
|
|
304 |
orientation="horizontal"
|
|
|
305 |
sizerWidth="5"
|
|
|
306 |
activeSizing="0"
|
|
|
307 |
title="Inbox"
|
|
|
308 |
>
|
|
|
309 |
<div dojoType="dijit.layout.AccordionContainer" sizeMin="20" sizeShare="20">
|
|
|
310 |
<div dojoType="dijit.layout.AccordionPane" title="Folders">
|
|
|
311 |
<div dojoType="dijit.Tree" id="mytree" store="mailStore"
|
|
|
312 |
labelAttr="label" childrenAttr="folders" query="{type:'folder'}" label="Folders">
|
|
|
313 |
<script type="dojo/method" event="onClick" args="item">
|
|
|
314 |
if(!item){
|
|
|
315 |
return; // top level node in tree doesn't correspond to any item
|
|
|
316 |
}
|
|
|
317 |
/* filter the message list to messages in this folder */
|
|
|
318 |
table.query.query = {
|
|
|
319 |
type: "message",
|
|
|
320 |
folder: mailStore.getValue(item, "id")
|
|
|
321 |
};
|
|
|
322 |
table.runQuery();
|
|
|
323 |
</script>
|
|
|
324 |
<script type="dojo/method" event="getIconClass" args="item">
|
|
|
325 |
return (item && mailStore.getValue(item, "icon")) || "mailIconFolderDocuments";
|
|
|
326 |
</script>
|
|
|
327 |
</div>
|
|
|
328 |
</div>
|
|
|
329 |
<div dojoType="dijit.layout.AccordionPane" title="Address Book">
|
|
|
330 |
<span dojoType="demo.Table" store="mailStore"
|
|
|
331 |
query="{ query: { type: 'address' }, columns: [ {name: 'User name', attribute: 'label'} ], sort: [ { attribute: 'label' } ] }"
|
|
|
332 |
id="addresses" style="width: 100%">
|
|
|
333 |
<script type="dojo/method" event="preamble">
|
|
|
334 |
this.query = { type: "address" };
|
|
|
335 |
this.columns = [
|
|
|
336 |
{
|
|
|
337 |
name: "Name",
|
|
|
338 |
attribute: "label"
|
|
|
339 |
}
|
|
|
340 |
];
|
|
|
341 |
</script>
|
|
|
342 |
<script type="dojo/method" event="onClick" args="item">
|
|
|
343 |
table.query.query.sender = mailStore.getValue(item, "sender");
|
|
|
344 |
delete table.query.query.folder;
|
|
|
345 |
table.runQuery();
|
|
|
346 |
</script>
|
|
|
347 |
</span>
|
|
|
348 |
</div>
|
|
|
349 |
</div> <!-- end of Accordion -->
|
|
|
350 |
|
|
|
351 |
<div dojoType="dijit.layout.SplitContainer"
|
|
|
352 |
id="rightPane"
|
|
|
353 |
orientation="vertical"
|
|
|
354 |
sizerWidth="5"
|
|
|
355 |
activeSizing="0"
|
|
|
356 |
sizeMin="50" sizeShare="85"
|
|
|
357 |
>
|
|
|
358 |
<div id="listPane" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
|
|
|
359 |
<span dojoType="demo.Table" store="mailStore"
|
|
|
360 |
query="{ query: { type: 'message' }, sort: [ { attribute: 'label' } ] }"
|
|
|
361 |
id="foo" jsId="table" style="width: 100%">
|
|
|
362 |
<script type="dojo/method" event="onClick" args="item">
|
|
|
363 |
var sender = this.store.getValue(item, "sender");
|
|
|
364 |
var subject = this.store.getValue(item, "label");
|
|
|
365 |
var sent = dojo.date.locale.format(
|
|
|
366 |
dojo.date.stamp.fromISOString(this.store.getValue(item, "sent")),
|
|
|
367 |
{formatLength: "long", selector: "date"});
|
|
|
368 |
var text = this.store.getValue(item, "text");
|
|
|
369 |
var messageInner = "<span class='messageHeader'>From: " + sender + "<br>" +
|
|
|
370 |
"Subject: "+ subject + "<br>" +
|
|
|
371 |
"Date: " + sent + "<br><br></span>" +
|
|
|
372 |
text;
|
|
|
373 |
dijit.byId("message").setContent(messageInner);
|
|
|
374 |
</script>
|
|
|
375 |
</span>
|
|
|
376 |
</div>
|
|
|
377 |
<div id="message" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="80">
|
|
|
378 |
<p>
|
|
|
379 |
This is a simple application mockup showing some of the dojo widgets:
|
|
|
380 |
</p>
|
|
|
381 |
<ul>
|
|
|
382 |
<li>layout widgets: SplitContainer, LayoutContainer, AccordionContainer</li>
|
|
|
383 |
<li>TooltipDialog, Tooltip</li>
|
|
|
384 |
<li>Tree</li>
|
|
|
385 |
<li>form widgets: Button, DropDownButton, ComboButton, FilteringSelect, ComboBox</li>
|
|
|
386 |
<li>Editor</li>
|
|
|
387 |
</ul>
|
|
|
388 |
<p>
|
|
|
389 |
The message list above originally contains all the messages, but you can filter it
|
|
|
390 |
by clicking on items in the left Accordion.
|
|
|
391 |
Then click on the messages in the above list to display them.
|
|
|
392 |
There's no server running, so the app is just a facade and it doesn't really do anything.
|
|
|
393 |
<!-- TODO: delete button (we can delete since we are using ItemFileWriteStore -->
|
|
|
394 |
</p>
|
|
|
395 |
<p>
|
|
|
396 |
<span style="font-family: 'Comic Sans MS',Textile,cursive; color: blue; font-style: italic;">-- Bill</span>
|
|
|
397 |
</p>
|
|
|
398 |
</div>
|
|
|
399 |
</div> <!-- end of vertical SplitContainer -->
|
|
|
400 |
</div> <!-- end of horizontal SplitContainer -->
|
|
|
401 |
</div> <!-- end of TabContainer -->
|
|
|
402 |
<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" id="footer" align="left">
|
|
|
403 |
<span style="float:right;">DojoMail v1.0 (demo only)</span>
|
|
|
404 |
<div id="fetchMail" style="opacity:0;visibility:hidden">
|
|
|
405 |
<div annotate="true" id="fakeFetch" dojoType="dijit.ProgressBar" style="height:15px; width:275px;" indeterminate="true" report="fakeReport"></div>
|
|
|
406 |
</div>
|
|
|
407 |
</div>
|
|
|
408 |
</div> <!-- end of Layoutcontainer -->
|
|
|
409 |
|
|
|
410 |
<div dojoType="dijit.Dialog" id="optionsDialog" title="Options:">
|
|
|
411 |
<table>
|
|
|
412 |
<tr><td style="text-align:right;"><label for="option1">Transport type:</label></td><td>
|
|
|
413 |
<select id="option1" dojoType="dijit.form.FilteringSelect">
|
|
|
414 |
<option value="pop3">POP3</option>
|
|
|
415 |
<option value="imap">IMAP</option>
|
|
|
416 |
</select></td></tr>
|
|
|
417 |
<tr><td style="text-align:right;"><label for="option2">Server:</label></td><td><input id="option2" dojoType="dijit.form.TextBox" type="text">
|
|
|
418 |
</td></tr>
|
|
|
419 |
|
|
|
420 |
<tr><td style="text-align:right;"><input type="checkbox" id="fooCB" dojoType="dijit.form.CheckBox"></td><td><label for="fooCB">Leave messages on Server</label></td></tr>
|
|
|
421 |
<tr><td style="text-align:right;"><input type="checkbox" id="fooCB2" dojoType="dijit.form.CheckBox"></td><td><label for="fooCB2">Remember Password</label></td></tr>
|
|
|
422 |
|
|
|
423 |
<tr><td colspan="2" style="text-align:center;">
|
|
|
424 |
<button dojoType="dijit.form.Button" type="submit" iconClass="mailIconOk">OK</button>
|
|
|
425 |
<button dojoType="dijit.form.Button" type="submit" iconClass="mailIconCancel">Abort</button>
|
|
|
426 |
</td></tr>
|
|
|
427 |
</table>
|
|
|
428 |
</div>
|
|
|
429 |
<div dojoType="dijit.Dialog" id="sendDialog" title="Sending Mail">
|
|
|
430 |
<div id="sendMailBar" style="text-align:center">
|
|
|
431 |
<div id="fakeSend" dojoType="dijit.ProgressBar" style="height:15px; width:175px;" indeterminate="true" ></div>
|
|
|
432 |
</div>
|
|
|
433 |
<div>
|
|
|
434 |
</body>
|
|
|
435 |
</html>
|