[dojo-contributors] [Dojo-checkins] dante - r10319 - in dijit/trunk/demos: . mail

Alex Russell alex at dojotoolkit.org
Tue Aug 21 13:48:20 EDT 2007


Looks much nicer!

Do we still need those top/bottom gutter areas?

Anyway, looks great. Nice work.

Regards

On Tuesday 21 August 2007 6:31 am, dojo-checkins-admin at dojotoolkit.org 
wrote:
> Author: dante
> Date: Tue Aug 21 13:31:19 2007
> New Revision: 10319
>
> Added:
>    dijit/trunk/demos/mail/icons.png   (contents, props changed)
>    dijit/trunk/demos/mail/newMail.html   (contents, props changed)
> Modified:
>    dijit/trunk/demos/mail.html
>    dijit/trunk/demos/mail/icons.gif
>    dijit/trunk/demos/mail/mail.css
>    dijit/trunk/demos/mail/mail.json
> Log:
>
> refs #4217 - adds editor to new message composition, attaches onClose
> handler, message view includes standing from/subject/date info, style
> cleanups for tables, and safari, Dialog for options, Dialog for
> (fake) downloading of new messages, icon cleanup, using png/gif
> one-offs for icon sprite, and adds CheckBox example (in options).
>
>
>
> Modified: dijit/trunk/demos/mail.html
> =====================================================================
>========= --- dijit/trunk/demos/mail.html	(original)
> +++ dijit/trunk/demos/mail.html	Tue Aug 21 13:31:19 2007
> @@ -23,8 +23,10 @@
>  		dojo.require("dijit._Calendar");
>  		dojo.require("dijit.ColorPalette");
>  		dojo.require("dijit.Editor");
> +
>
>  		dojo.require("dijit.form.ComboBox");
> +		dojo.require("dijit.form.CheckBox");
>  		dojo.require("dijit.form.FilteringSelect");
>  		dojo.require("dijit.form.Textarea");
>
> @@ -35,6 +37,23 @@
>  		dojo.require("dijit.layout.ContentPane");
>
>  		var paneId=1;
> +
> +		// for "new message" tab closing
> +		function testClose(pane,tab){
> +		  return confirm("Are you sure you want to leave your changes?");
> +		}
> +
> +		// fake mail download code:
> +		var numMails = 6;
> +		var updateFetchStatus = function(x){
> +			dojo.byId('fetchStatus').innerHTML = x+" of "+numMails;
> +			if (x == numMails){ dijit.byId('fetchDialog').hide(); }
> +		}
> +		var fakeDownload = function(){
> +			for (var i=1; i<=numMails; i++){
> +				setTimeout("updateFetchStatus("+i+")",i*420);
> +			}
> +		}
>  	</script>
>
>  	<style type="text/css">
> @@ -105,12 +124,12 @@
>  	<div dojoType="dijit.Declaration"
>  		widgetClass="mail.NewMessage">
>  		<div dojoType="dijit.layout.LayoutContainer"
> dojoAttachPoint="container" title="Composing..." closeable="true">
> -			<div dojoType="dijit.layout.LayoutContainer" layoutAlign="top"
> style="overflow: visible; z-index: 10;"> +			<div
> dojoType="dijit.layout.LayoutContainer" layoutAlign="top"
> style="overflow: visible; z-index: 10; color:#666; "> <table
> width=100%>
> -					<tr>
> -						<td style="padding-right: 20px;"><label
> for="${id}_to">To:</label></td> +					<tr style="padding-top:5px;">
> +						<td style="padding-left:20px; padding-right: 8px;
> text-align:right;"><label for="${id}_to">To:</label></td> <td
> width=100%>
> -							<select dojoType="dijit.form.ComboBox" id="${id}_to"
> style="width: 100%;" hasDownArrow="false"> +							<select
> dojoType="dijit.form.ComboBox" id="${id}_to" style="width: 100%;
> background-image:none; " hasDownArrow="false"> <option></option>
>  								<option>adam at yahoo.com</option>
>  								<option>barry at yahoo.com</option>
> @@ -122,9 +141,9 @@
>  						</td>
>  					</tr>
>  					<tr>
> -						<td style="padding-right: 20px;"><label
> for="${id}_subject">Subject:</label></td> +						<td
> style="padding-left: 20px; padding-right:8px;
> text-align:right;"><label for="${id}_subject">Subject:</label></td>
> <td width=100%>
> -							<select dojoType="dijit.form.ComboBox" id="${id}_subject"
> style="width: 100%;" hasDownArrow="false"> +							<select
> dojoType="dijit.form.ComboBox" id="${id}_subject" style="width:
> 200px; background-image:none;" hasDownArrow="false">
> <option></option>
>  								<option>progress meeting</option>
>  								<option>reports</option>
> @@ -135,24 +154,18 @@
>  						</td>
>  					</tr>
>  				</table>
> +			<hr noshade size="1">
>  			</div>
>
>  			<div dojoType="dijit.layout.LayoutContainer" layoutAlign="bottom"
> align=center> -				<button dojoType="dijit.form.Button"
> iconClass="mailIconOk"> -					Send
> -				</button>
> +				<button dojoType="dijit.form.Button"
> iconClass="mailIconOk">Send</button> +				<button
> dojoType="dijit.form.Button"
> iconClass="mailIconCancel">Cancel</button> </div>
>
> +			<!-- new messase part -->
>  			<div dojoType="dijit.layout.LayoutContainer"
> layoutAlign="client"> -				<!-- TODO: want to use Editor here or even
> Textrea, but both fail on initialization -				<div
> dojoType="dijit.form.Textarea">
> -					Type the address above (try an address starting with a,b,c,d,
> to test autocompletion, -					and then type your message here...
> -					<br><br><br><br><br><br><br><br><br><br>
> -				</div>
> -				-->
> -				<textarea style="width: 98%; height: 99%; padding: 8px;"
> rows=30>Type the address above (try an address starting with a,b,c,d,
> to test autocompletion, -and then type your message
> here...</textarea>
> +				<!-- FIXME: editor as direct widget here doesn't init -->
> +				<div dojoType="dijit.layout.ContentPane"
> href="mail/newMail.html"></div> </div>
>  		</div>
>  	</div>
> @@ -162,13 +175,17 @@
>
>  		<!-- blue header at top of inbox -->
>  		<div dojoType="dijit.layout.ContentPane" layoutAlign="top"
> id="banner" align=center> -			My Mailbox
> +			DojoMail v0.9b (demo only)
>  		</div>
>
>  		<!-- toolbar with new mail button, etc. -->
> -		<div dojoType="dijit.Toolbar" layoutAlign="top">
> -			<div id="getMail" dojoType="dijit.form.ComboButton"
> onClick="alert('pretending to download new mail');" +		<div
> dojoType="dijit.Toolbar" layoutAlign="top" style="height:25px;">
> +			<div id="getMail" dojoType="dijit.form.ComboButton"
>  				iconClass="mailIconGetMail">
> +				<script type="dojo/method" event="onClick">
> +					dijit.byId('fetchDialog').show();
> +					fakeDownload();
> +				</script>
>  				<span>Get Mail</span>
>  				<ul dojoType="dijit.Menu">
>  					<li dojoType="dijit.MenuItem"
> iconClass="mailIconGetMail">Yahoo</li> @@ -184,11 +201,12 @@
>  				<script type="dojo/method" event="onClick">
>  					/* make a new tab for composing the message */
>
> -					var newTab = new mail.NewMessage({id: "new"+paneId}).container;
> +					var newTab = new mail.NewMessage({id: "new"+paneId 
> }).container; dojo.mixin(newTab,
>  						{
>  							title: "New Message #" + paneId++,
> -							closable: true
> +							closable: true,
> +							onClose: testClose
>  						}
>  					);
>  					tabs.addChild(newTab);
> @@ -197,24 +215,13 @@
>  			</button>
>  			<span dojoType="dijit.Tooltip" connectId="newMsg">Click to
> compose new message.</span>
>
> -			<div id="options" dojoType="dijit.form.DropDownButton"
> iconClass="mailIconOptions"> -				<span>Options</span>
> -				<div dojoType="dijit.TooltipDialog" title="Options">
> -			  		<label for="option1">Transport type</label>
> -			  		<select id="option1" dojoType="dijit.form.FilteringSelect">
> -			  			<option value="pop3">POP3</option>
> -			  			<option value="imap">IMAP</option>
> -			  		</select>
> -			  		<br>
> -			  		<label for="option2">Server:</label> <input id="option2"
> dojoType="dijit.form.TextBox" type="text"> -			  		<br>
> -			  		<button dojoType="dijit.form.Button" type="submit"
> iconClass="mailIconOk">OK</button> -				</div>
> -			</div>
> -			<div dojoType="dijit.Tooltip" connectId="options">
> -				Set various options.  Currently broken due to<br>
> -				a bug with having a popup in a popup. :-(
> -			</div>
> +			<button id="options" dojoType="dijit.form.Button"
> iconClass="mailIconOptions"> +			Options
> +				<script type="dojo/method" event="onClick">
> +					dijit.byId('optionsDialog').show();
> +				</script>
> +			</button>
> +			<div dojoType="dijit.Tooltip" connectId="options">Set various
> options</div> </div>
>
>  		<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom"
> id="footer" align=center> @@ -301,7 +308,11 @@
>  							query="{ query: { type: 'message' }, sort: [ { attribute:
> 'label' } ]  }" id="foo" jsId="table" style="width: 100%">
>  							<script type="dojo/method" event="onClick" args="item">
> -								dijit.byId("message").setContent(this.store.getValue(item,
> "text")); +								var messageInner = "<span
> class='messageHeader'>From:
> "+this.store.getValue(item,"sender")+"<br>"+ +									"Subject:
> "+this.store.getValue(item,"label")+"<br>"+ +									"Date:
> "+this.store.getValue(item,"sent")+"<br><br></span>"+
> +									this.store.getValue(item,"text");
> +								dijit.byId("message").setContent(messageInner);
>  							</script>
>  						</span>
>  					</div>
> @@ -330,6 +341,28 @@
>  				</div>	<!-- end of vertical SplitContainer -->
>  			</div> <!-- end of horizontal SplitContainer -->
>  		</div> <!-- end of TabContainer -->
> -	</div> <!-- end of Layoutcontainer -->
> +	</div> <!-- end of Layoutcontainer -->
> +<div dojoType="dijit.Dialog" id="fetchDialog" title="(simulated)">
> +	Fetching Mail: <span id="fetchStatus"></span><div
> style="width:200px; height:10px; border:1px solid #333;
> background:url('../themes/soria/images/progressBarAnim.gif')
> repeat-x;"></div> +</div>
> +<div dojoType="dijit.Dialog" id="optionsDialog" title="Options:">
> +	<table>
> +	<tr><td style="text-align:right;"><label for="option1">Transport
> type:</label></td><td> +	<select id="option1"
> dojoType="dijit.form.FilteringSelect"> +		<option
> value="pop3">POP3</option>
> +		<option value="imap">IMAP</option>
> +	</select></td></tr>
> +	<tr><td style="text-align:right;"><label
> for="option2">Server:</label></td><td><input id="option2"
> dojoType="dijit.form.TextBox" type="text"> +	</td></tr>
> +
> +	<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> +	<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> +
> +	<tr><td colspan="2" style="text-align:center;">
> +	<button dojoType="dijit.form.Button" type="submit"
> iconClass="mailIconOk">OK</button> +	<button
> dojoType="dijit.form.Button" type="submit"
> iconClass="mailIconCancel">Abort</button> +	</td></tr>
> +	</table>
> +</div>
>  </body>
>  </html>
>
> Modified: dijit/trunk/demos/mail/icons.gif
> =====================================================================
>========= Binary files. No diff available.
>
> Added: dijit/trunk/demos/mail/icons.png
> =====================================================================
>========= Binary file. No diff available.
>
> Modified: dijit/trunk/demos/mail/mail.css
> =====================================================================
>========= --- dijit/trunk/demos/mail/mail.css	(original)
> +++ dijit/trunk/demos/mail/mail.css	Tue Aug 21 13:31:19 2007
> @@ -4,27 +4,42 @@
>  	overflow: hidden;	/* erase window level scrollbars */
>  	padding: 0 0 0 0;
>  	margin: 0 0 0 0;
> -	font-family: Myriad,Tahoma,Verdana,sans-serif;
> +	font: Arail,Myriad,Tahoma,Verdana,sans-serif;
>  }
>
>  #banner, #footer {
> -background-color: #274383; color: white;
> +background-color: #b7cdee;
> +color: #333;
> +padding:3px;
>  }
> +#banner { text-align:right; }
>
>  /* list of messages
>  TODO: If i add the rules below as a plain tr/td it seems to mess up
> accordion, tree, etc. ??? */
>  #listPane tr:hover, #listPane td:hover, .dijitTreeContent:hover {
> -	background-color: gray;
> -	color: white;
> +	background-color: #b7cdee;
> +	color: #333;
>  	cursor: pointer;
>  }
>  #listPane tr, #listPane td { cursor: pointer; }
>
>  th {
> -	background-color: #274383; color: white; font: bold;
> +	background-color: #4f8ce5;
> +	color: #fff;
> +	font-weight:: bold !important;
> +	margin:0;
> +	padding:3px;
> +	background-image:url('../../themes/soria/images/gradientTopBg.png')
>; +	background-position:0px -1px;
> +}
> +.demoTable td { padding:3px; }
> +.demoTable {
> +	border-spacing:0;
> +	padding:0; margin:0;
> +	width:98%;
> +
>  }
> -
>  .oddRow {
>  	background-color: #f2f5f9;
>  }
> @@ -45,7 +60,11 @@
>  .message {
>  	border: black 2px;
>  }
> -
> +.messageHeader {
> +	font:12pt Arial,sans-serif;
> +	font-weight:bold;
> +	color:#333;
> +}
>  body .dojoSplitPane {
>  	background: #ededff;
>  	overflow: auto;
> @@ -63,12 +82,28 @@
>  .mailIconMailbox,
>  .mailIconOk,
>  .mailIconTrashcanFull {
> -	background-image: url('icons.gif'); /* mail icons sprite image */
> +	background-image: url('icons.png'); /* mail icons sprite image */
>  	background-repeat: no-repeat;
> -	width: 18px;
> -	height: 18px;
> +	width: 16px;
> +	height: 16px;
>  	text-align: center;
> +	padding-right:4px;
>  }
> +
> +.dj_ie6 .mailIconCancel,
> +.dj_ie6 .mailIconOptions,
> +.dj_ie6 .mailIconFolderDocuments,
> +.dj_ie6 .mailIconFolderInbox,
> +.dj_ie6 .mailIconFolderSent,
> +.dj_ie6 .mailIconGetMail,
> +.dj_ie6 .mailIconNewMessage,
> +.dj_ie6 .mailIconMailbox,
> +.dj_ie6 .mailIconOk,
> +.dj_ie6 .mailIconTrashcanFull {
> +	background-image: url('icons.gif');
> +}
> +
> +
>  .mailIconCancel { background-position: 0px; }
>  .mailIconOptions { background-position: -22px; }
>  .mailIconFolderDocuments { background-position: -44px; }
>
> Modified: dijit/trunk/demos/mail/mail.json
> =====================================================================
>========= --- dijit/trunk/demos/mail/mail.json	(original)
> +++ dijit/trunk/demos/mail/mail.json	Tue Aug 21 13:31:19 2007
> @@ -4,9 +4,9 @@
>  	items: [
>
>  		// Hierarchy of folders
> -		{ type: 'folder', id: 'mailbox', label:'Mail Folders', folders: [
> +		{ type: 'folder', id: 'mailbox', label:'Folders', folders: [
>  			{ type: 'folder', id: 'inbox', label:'Inbox',
> icon:'mailIconFolderInbox' }, -			{ type: 'folder', id: 'deleted',
> label:'Trash Can', icon:'mailIconTrashcanFull' }, +			{ type:
> 'folder', id: 'deleted', label:'Trash', icon:'mailIconTrashcanFull'
> }, { type: 'folder', id: 'save', label:'Save',  folders:[
>  				{ id: 'work', label:'stuff for work'},
>  				{ id: 'fun', label:'stuff for fun'}
> @@ -26,8 +26,8 @@
>  			text:
>  				"<p>Hey, we need to talk about who's gonna do all the left over
> work.  Pick a day you want to meet: <div
> dojoType='dijit._Calendar'></div></p>" },
> -		{ type: 'message', id: 'node1.3', folder: 'inbox', label: "lunch",
> sender: "Carrey Crown", sent: "2005-12-17", text: -				"Where do you
> want to go for lunch?<br><br><ul><li>McDonalds<li>Burger
> King<li>KFC</ul><br><br>Let me know..." +		{ type: 'message', id:
> 'node1.3', folder: 'inbox', label: "Hey, look!", sender: "Carrey
> Crown", sent: "2005-12-17", text: +				"This is our new simple mail
> app. What do you think? <br><br>You can navigate around this demo
> with arrows and tabs ... <br><br>Regards,<br>Carrey" },
>  		{ type: 'message', id: 'node1.4', folder: 'inbox', label: "paint",
> sender: "David Davis", sent: "2005-12-16", text: "<p>what color is
> good for the new office?</p><div
> dojoType='dijit.ColorPalette'></div><p>Let me know soon</p>"
>
> Added: dijit/trunk/demos/mail/newMail.html
> =====================================================================
>========= --- (empty file)
> +++ dijit/trunk/demos/mail/newMail.html	Tue Aug 21 13:31:19 2007
> @@ -0,0 +1,5 @@
> +<div dojoType="dijit.Editor" style="overflow:auto">
> +<i> This is just a sample message. There is email-address
> auto-complete in the to: field. +<br><br> give it a whirl.
> +</i>
> +</div>
> \ No newline at end of file
> _______________________________________________
> Dojo-checkins mailing list
> Dojo-checkins at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-checkins

-- 
Alex Russell
alex at sitepen.com     A99F 8785 F491 D5FD 04D7 ACD9 4158 FFDF 2894 6876
alex at dojotoolkit.org BE03 E88D EABB 2116 CC49 8259 CF78 E242 59C3 9723
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: application/pgp-signature
Size: 186 bytes
Desc: not available
Url : http://mail.dojotoolkit.org/pipermail/dojo-contributors/attachments/20070821/563a0c78/attachment.sig 


More information about the dojo-contributors mailing list