Client-side UI improvements for container
-----------------------------------------
Key: SHINDIG-2
URL: https://issues.apache.org/jira/browse/SHINDIG-2
Project: Shindig
Issue Type: Improvement
Reporter: Martin Webb
Priority: Minor
Attachments: dragndrop.js
Client-side UI improvements:
* Allow container to set initial gadget height, width and title along with the
specUrl
* Continue supporting existing samples that do not provide gadget height, width
and title with the specUrl
* Demonstrate a three column based container
* Demonstrate more gadgets:
http://www.google.com/ig/modules/horoscope.xml
http://www.labpixies.com/campaigns/todo/todo.xml
http://googatrix.googlepages.com/HotmailGadget.xml
http://gadgets.weather.com/services/gadgets/googlegadget/gadget.xml
http://www.livebug.com/gadget/webmsn.xml
http://antonshevchuk.googlepages.com/photogallery.xml
http://www.twizi.com/expedia.xml
http://hosting.gmodules.com/ig/gadgets/file/111357399372471521016/coolcalendar.xml
http://www.irt.org/carousel/igoogle.xml
http://www.irt.org/games/js/sol/igoogle.xml
http://www.irt.org/games/js/mind/igoogle9.xml
http://bejeweledg.googlecode.com/svn/trunk/bejeweled.xml
http://customrss.googlepages.com/customrss.xml
http://will.hughesfamily.net.au/modules/g2/g2imagemodule.xml
http://1o4.jp/google/module/slim-reader.xml
* Demo a real world example, with typical advert headers and footers
* Add support for drag n' drop - only client side - no interaction with server
side, and not saving of state client side either!
There is a working copy of he changed client application at:
http://www.irt.org/shindig/opensocial.html - however, this is likely to change
within the next day or so - it is provided as a means to demo the changes.
All changes are in the shindig/javascript/container directory
Index: gadgets.css
===================================================================
--- gadgets.css (revision 608772)
+++ gadgets.css (working copy)
@@ -1,5 +1,5 @@
.gadgets-gadget-chrome {
- float: left;
+ float: none;
margin: 4px;
border: 1px solid #7aa5d6;
}
@@ -11,6 +11,7 @@
.gadgets-gadget-title-bar {
padding: 2px 4px;
background-color: #e5ecf9;
+ cursor: move;
}
.gadgets-gadget-title {
@@ -36,7 +37,21 @@
.gadgets-gadget-content {
padding: 4px;
+ width: 98%;
}
.gadgets-log-entry {
}
+
+
+.container-column {
+ float: left;
+ margin: 4px;
+ width: 32%;
+}
+.container-vertial-divider {
+ width: 2%;
+}
+.container {
+ text-align: center;
+}
Index: gadgets.js
===================================================================
--- gadgets.js (revision 608772)
+++ gadgets.js (working copy)
@@ -448,13 +448,16 @@
gadgets.IfrGadget.prototype.cssClassGadgetContent = 'gadgets-gadget-content';
gadgets.IfrGadget.prototype.getTitleBarContent = function(continuation) {
- continuation('<div class="' + this.cssClassTitleBar + '"><span class="' +
- this.cssClassTitle + '">Title</span> | <span class="' +
+ continuation('<div class="' + this.cssClassTitleBar +
+ '" id="' + this.cssClassTitleBar + '-' + this.id +
+ '"><span class="' + this.cssClassTitle + '">' +
+ (this.title ? this.title : 'Title') +
+ '</span> | <span class="' +
this.cssClassTitleButtonBar +
'"><a href="#" onclick="gadgets.container.getGadget(' + this.id +
- ').handleOpenUserPrefsDialog()" class="' + this.cssClassTitleButton +
+ ').handleOpenUserPrefsDialog();return false" class="' +
this.cssClassTitleButton +
'">settings</a> <a href="#" onclick="gadgets.container.getGadget(' +
- this.id + ').handleToggle()" class="' + this.cssClassTitleButton +
+ this.id + ').handleToggle();return false" class="' +
this.cssClassTitleButton +
'">toggle</a></span></div>');
};
@@ -477,7 +480,10 @@
continuation('<div class="' + this.cssClassGadgetContent + '"><iframe id="' +
iframeId + '" name="' + iframeId + '" class="' + this.cssClassGadget +
'" src="' + this.getIframeUrl() +
- '" frameborder="0" scrolling="no"></iframe></div>');
+ '" frameborder="no" scrolling="no"' +
+ (this.height ? ' height="' + this.height + '"' : '') +
+ (this.width ? ' width="' + this.width + '"' : '') +
+ '></iframe></div>');
};
gadgets.IfrGadget.prototype.getIframeId = function() {
Two new files to be attached...
Any suggestions for improvements, "you should have done it this way..." welcomed
Regards
Martin
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
