diff options
Diffstat (limited to 'includes/js/dijit/demos/mail')
-rw-r--r-- | includes/js/dijit/demos/mail/icons.gif | bin | 0 -> 1757 bytes | |||
-rw-r--r-- | includes/js/dijit/demos/mail/icons.png | bin | 0 -> 2908 bytes | |||
-rw-r--r-- | includes/js/dijit/demos/mail/mail.css | 133 | ||||
-rw-r--r-- | includes/js/dijit/demos/mail/mail.css.commented.css | 157 | ||||
-rw-r--r-- | includes/js/dijit/demos/mail/mail.json | 75 | ||||
-rw-r--r-- | includes/js/dijit/demos/mail/newMail.html | 8 |
6 files changed, 373 insertions, 0 deletions
diff --git a/includes/js/dijit/demos/mail/icons.gif b/includes/js/dijit/demos/mail/icons.gif Binary files differnew file mode 100644 index 0000000..d0b1760 --- /dev/null +++ b/includes/js/dijit/demos/mail/icons.gif diff --git a/includes/js/dijit/demos/mail/icons.png b/includes/js/dijit/demos/mail/icons.png Binary files differnew file mode 100644 index 0000000..f333fbe --- /dev/null +++ b/includes/js/dijit/demos/mail/icons.png diff --git a/includes/js/dijit/demos/mail/mail.css b/includes/js/dijit/demos/mail/mail.css new file mode 100644 index 0000000..13474c4 --- /dev/null +++ b/includes/js/dijit/demos/mail/mail.css @@ -0,0 +1,133 @@ +html, body, #main{ + width: 100%; + height: 100%; + overflow: hidden; + padding: 0 0 0 0; + margin: 0 0 0 0; + font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif; +} +#banner, #footer { +background-color: #ededff; +color: #333; +padding:3px; +} +#banner { text-align:right; } +#listPane tr:hover, #listPane td:hover, .dijitTreeContent:hover { + background-color: #ededed; + color: #333; + cursor: pointer; +} +#listPane tr, #listPane td { cursor: pointer; } +table.demoTable { + border-collapse: collapse; +} +th { + background-color: #4f8ce5; + color: #666; + font-weight:: bold !important; + margin:0; + padding:3px; + background-image:url('../../themes/soria/images/titleBar.png'); + background-position:0px -1px; +} +.dijitRtl caption, +.dijitRtl th { + text-align:right; +} +th .arrowNode { + position:relative; + float:left; + top:4px; + left:4px; + width:16px; + height:16px; +} +.dijitRtl th .arrowNode{ + float:right; +} +th.arrowUp .arrowNode { + margin-right: 5px; + margin-top: -4px; + margin-bottom: 5px; + width: 15px; + height:15px; + background:transparent url("../../themes/soria/images/spriteRoundedIconsSmall.png") -45px top no-repeat; +} +th.arrowDown .arrowNode { + margin-right: 5px; + margin-top: -4px; + margin-bottom: 5px; + width: 15px; + height:15px; + background:transparent url("../../themes/soria/images/spriteRoundedIconsSmall.png") -15px top no-repeat; +} +.demoTable td { padding:3px; } +.demoTable { + border-spacing:0; + padding:0; margin:0; + width:98%; + +} +.oddRow { + background-color: #f2f5f9; +} +#message { + padding: 8px; +} +.subject { + background: gray; + width: 100%; + padding-top: 5px; + padding-bottom: 10px; +} +.message { + border: black 2px; +} +.messageHeader { + font:12pt Arial,sans-serif; + font-weight:bold; + color:#333; +} +body .dojoSplitPane { + background: #ededff; + overflow: auto; +} +.mailIconCancel, +.mailIconOptions, +.mailIconFolderDocuments, +.mailIconFolderInbox, +.mailIconFolderSent, +.mailIconGetMail, +.mailIconNewMessage, +.mailIconMailbox, +.mailIconOk, +.mailIconTrashcanFull { + background-image: url('icons.png'); + background-repeat: no-repeat; + 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; } +.mailIconFolderInbox { background-position: -66px; } +.mailIconFolderSent { background-position: -88px; } +.mailIconGetMail { background-position: -110px; } +.mailIconNewMessage { background-position: -132px; } +.mailIconMailbox { background-position: -154px; } +.mailIconOk { background-position: -176px; } +.mailIconTrashcanFull { background-position: -198px; } diff --git a/includes/js/dijit/demos/mail/mail.css.commented.css b/includes/js/dijit/demos/mail/mail.css.commented.css new file mode 100644 index 0000000..02e2635 --- /dev/null +++ b/includes/js/dijit/demos/mail/mail.css.commented.css @@ -0,0 +1,157 @@ +html, body, #main{ + width: 100%; /* make the body expand to fill the visible window */ + height: 100%; + overflow: hidden; /* erase window level scrollbars */ + padding: 0 0 0 0; + margin: 0 0 0 0; + font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif; +} + +#banner, #footer { +background-color: #ededff; +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: #ededed; + color: #333; + cursor: pointer; +} +#listPane tr, #listPane td { cursor: pointer; } + +table.demoTable { + border-collapse: collapse; +} + +th { + background-color: #4f8ce5; + color: #666; + font-weight:: bold !important; + margin:0; + padding:3px; + background-image:url('../../themes/soria/images/titleBar.png'); + background-position:0px -1px; +} + +.dijitRtl caption, +.dijitRtl th { + text-align:right; +} + +th .arrowNode { + position:relative; + float:left; + top:4px; + left:4px; + width:16px; + height:16px; +} + +.dijitRtl th .arrowNode{ + float:right; +} + +th.arrowUp .arrowNode { + margin-right: 5px; + margin-top: -4px; + margin-bottom: 5px; + width: 15px; + height:15px; + background:transparent url("../../themes/soria/images/spriteRoundedIconsSmall.png") -45px top no-repeat; +} + +th.arrowDown .arrowNode { + margin-right: 5px; + margin-top: -4px; + margin-bottom: 5px; + width: 15px; + height:15px; + background:transparent url("../../themes/soria/images/spriteRoundedIconsSmall.png") -15px top no-repeat; +} + +.demoTable td { padding:3px; } +.demoTable { + border-spacing:0; + padding:0; margin:0; + width:98%; + +} +.oddRow { + background-color: #f2f5f9; +} + +#message { + padding: 8px; +} + +/* Stuff for new messages */ + +.subject { + background: gray; + width: 100%; + padding-top: 5px; + padding-bottom: 10px; +} + +.message { + border: black 2px; +} +.messageHeader { + font:12pt Arial,sans-serif; + font-weight:bold; + color:#333; +} +body .dojoSplitPane { + background: #ededff; + overflow: auto; +} + +/* Icons */ + +.mailIconCancel, +.mailIconOptions, +.mailIconFolderDocuments, +.mailIconFolderInbox, +.mailIconFolderSent, +.mailIconGetMail, +.mailIconNewMessage, +.mailIconMailbox, +.mailIconOk, +.mailIconTrashcanFull { + background-image: url('icons.png'); /* mail icons sprite image */ + background-repeat: no-repeat; + 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; } +.mailIconFolderInbox { background-position: -66px; } +.mailIconFolderSent { background-position: -88px; } +.mailIconGetMail { background-position: -110px; } +.mailIconNewMessage { background-position: -132px; } +.mailIconMailbox { background-position: -154px; } +.mailIconOk { background-position: -176px; } +.mailIconTrashcanFull { background-position: -198px; } diff --git a/includes/js/dijit/demos/mail/mail.json b/includes/js/dijit/demos/mail/mail.json new file mode 100644 index 0000000..67f1a04 --- /dev/null +++ b/includes/js/dijit/demos/mail/mail.json @@ -0,0 +1,75 @@ +{ + identifier: 'id', + label: 'label', + items: [ + + // Hierarchy of folders + { type: 'folder', id: 'inbox', label:'Inbox', icon:'mailIconFolderInbox' }, + { 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'} + ]}, + + // Address book (list of people that have sent me messages) + { type: 'address', id: 'adam', label: "Adam Arlen" }, + { type: 'address', id: 'bob', label: "Bob Baxter" }, + { type: 'address', id: 'carrie', label: "Carrie Crow" }, + + // Flat list of messages (each message lists it's folder) + + { type: 'message', id: 'node1.1', folder: 'inbox', label: "today's meeting", sender: "Adam Arlen", sent: "2005-12-19", + text: "Today's meeting is cancelled.<br>Let's do it tomorrow instead.<br><br>Adam" }, + { type: 'message', id: 'node1.2', folder: 'inbox', label: "remaining work", sender: "Bob Baxter", sent: "2005-12-18", + 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: "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>" + }, + { type: 'message', id: 'node2.1', folder: 'deleted', label: "today's meeting", sender: "Madam Marlen", sent: "2005-12-19", + text: "Today's meeting is cancelled.<br>Let's do it tomorrow instead.<br><br>Madam" }, + { type: 'message', id: 'node2.2', folder: 'deleted', label: "congratulations", sender: "Rob Raxter", sent: "2005-12-18", text: " Good job on that project! " }, + { type: 'message', id: 'node2.3', folder: 'deleted', label: "schedule", sender: "Carrie Crow", sent: "2005-12-17", text: " Are we still on schedule?<br>The deadline is next Friday. " }, + { type: 'message', id: 'node2.4', folder: 'deleted', label: "paint", sender: "Daniel Dooey", 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>" + }, + { type: 'message', id: 'node3.1', folder: 'work', label: "today's meeting", sender: "Bob Baxter", sent: "2005-12-19", + text: "Today's meeting is cancelled.<br>Unnecessary.<br><br>Bob" }, + { type: 'message', id: 'node3.2', folder: 'work', label: "remaining work", sender: "Bob Baxter", sent: "2005-12-18", text: " Are we still on schedule?<br>The deadline is next Friday. " }, + { type: 'message', id: 'node3.3', folder: 'work', label: "lunch", sender: "Bob Baxter", sent: "2005-12-17", text: + "Where do you want to go for lunch?<br><br><ul><li>Fresh Choice<li>Starbucks<li>Dominos</ul><br><br>Let me know..." + }, + { type: 'message', id: 'node3.4', folder: 'work', label: "paint", sender: "Bob Baxter", 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>" + }, + { type: 'message', id: 'node4.1', folder: 'fun', label: "today's meeting", sender: "Jack Jackson", sent: "2005-12-19", + text: "Today's meeting is cancelled.<br>Let's do it friday instead.<br><br>Joe" }, + { type: 'message', id: 'node4.2', folder: 'fun', label: "remaining work", sender: "Jack Jackson", sent: "2005-12-18", + 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: 'node4.3', folder: 'fun', label: "lunch", sender: "Jack Jackson", sent: "2005-12-17", text: + "Where do you want to go for lunch?<br><br><ul><li>Indian<li>Mexican<li>Chinese<li>Japanese<li>Pizza</ul><br><br>Let me know..." + }, + { type: 'message', id: 'node4.4', folder: 'fun', label: "paint", sender: "Jack Jackson", 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>" + }, + + { type: 'message', id: 'node5.1', folder: 'deleted', label: "today's meeting", sender: "Jill Jones", sent: "2005-12-19", + text: "Today's meeting is cancelled.<br>Let's do it thursday instead.<br><br>Jill" }, + { type: 'message', id: 'node5.2', folder: 'deleted', label: "remaining work", sender: "Jill Jones", sent: "2005-12-18", + 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: 'node5.3', folder: 'deleted', label: "lunch", sender: "Jill Jones", 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: 'node5.4', folder: 'deleted', label: "paint", sender: "Jill Jones", 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>" + } + ] +} diff --git a/includes/js/dijit/demos/mail/newMail.html b/includes/js/dijit/demos/mail/newMail.html new file mode 100644 index 0000000..f269ad3 --- /dev/null +++ b/includes/js/dijit/demos/mail/newMail.html @@ -0,0 +1,8 @@ +<textarea dojoType="dijit.Editor" style="overflow:auto" + extraPlugins="[{name:'dijit._editor.plugins.LinkDialog'}]" + +> +<i> This is just a sample message. There is email-address auto-complete in the to: field. +<br><br> give it a whirl. +</i> +</textarea> |