From: Jouni Koivuviita Date: Fri, 30 Nov 2007 14:55:36 +0000 (+0000) Subject: Added "Additional demos"-panel to index.html X-Git-Tag: 6.7.0.beta1~5349 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=1683b54ad198f3bd8704c65265f9f506a6840025;p=vaadin-framework.git Added "Additional demos"-panel to index.html svn changeset:3085/svn branch:trunk --- diff --git a/build/package/WebContent/demo/css/ie.css b/build/package/WebContent/demo/css/ie.css index 7deda93bd0..58d6ef84b3 100644 --- a/build/package/WebContent/demo/css/ie.css +++ b/build/package/WebContent/demo/css/ie.css @@ -8,4 +8,13 @@ a.more span { color: #5c666a; +} + + +* html #additional-demos { + margin-top: -3px; +} + +*+html #additional-demos { + margin-top: -3px; } \ No newline at end of file diff --git a/build/package/WebContent/demo/css/styles.css b/build/package/WebContent/demo/css/styles.css index 111fcff01e..a77dd73e65 100644 --- a/build/package/WebContent/demo/css/styles.css +++ b/build/package/WebContent/demo/css/styles.css @@ -191,20 +191,27 @@ a.more span { /* demo icons */ -#demos ul { +#demo-buttons { list-style: none; margin: 0; padding: 0; + width: 100%; } -#demos li { +#demo-buttons li { float: left; width: 160px; height: 135px; margin-top: 14px; } -#demos li a { +#demo-buttons .clearer { + float: none; + height: 0; + margin: 0; +} + +#demo-buttons li a { display: block; padding-top: 115px; height: 20px; @@ -212,38 +219,36 @@ a.more span { text-align: center; } -#demos #windowed-demos { +#demo-buttons #windowed-demos { background: #fff url(../img/demos/windowed.png) no-repeat; } -#demos #reservr { +#demo-buttons #reservr { background: #fff url(../img/demos/reservr.png) no-repeat; margin-right: 15px; } -#demos #feature-browser { +#demo-buttons #feature-browser { background: #fff url(../img/demos/features.png) no-repeat; margin-right: 15px; } -#demos #notifications { +#demo-buttons #notifications { background: #fff url(../img/demos/notifications.png) no-repeat; } /* package contents */ -#package-contents { +.panel { width: 300px; - float: right; padding: 0 17px 0 17px; - margin: -155px 0 0 0; background: #ecf0f3 url(../img/package-bg.png); overflow: hidden; font-size: 1.1em; } -#package-contents .top { +.panel .top { height: 5px; width: 334px; margin: 0 -17px 0 -17px; @@ -251,7 +256,7 @@ a.more span { overflow: hidden; } -#package-contents .bottom { +.panel .bottom { height: 5px; width: 334px; margin: 0 -17px 0 -17px; @@ -259,6 +264,11 @@ a.more span { overflow: hidden; } +#package-contents { + float: right; + margin: -105px 1px 0 0; +} + #package-contents-content { margin: 13px 0 17px 0; } @@ -307,4 +317,20 @@ a.more span { #package-contents .support { clear: left; padding-top: 1.5em; +} + + + +/* additional demos */ + +#additional-demos { + clear: left; + font-size: 1em; + margin-top: 10px; +} + +#additional-demos h3 { + font-size: 1.1em; + margin: 4px 0 5px 0; + color: #5b7b93; } \ No newline at end of file diff --git a/build/package/WebContent/demo/img/demos/features.png b/build/package/WebContent/demo/img/demos/features.png new file mode 100644 index 0000000000..aaf8e5d14d Binary files /dev/null and b/build/package/WebContent/demo/img/demos/features.png differ diff --git a/build/package/WebContent/demos.html b/build/package/WebContent/demos.html index ae5ca07b41..1c5c99ad51 100644 --- a/build/package/WebContent/demos.html +++ b/build/package/WebContent/demos.html @@ -47,8 +47,6 @@ } demoArea.onmouseout = this.blurDemos; - - // TODO implement feedback popup }, togglePackage : function() { diff --git a/build/package/WebContent/index.html b/build/package/WebContent/index.html index 27c4e24bb5..e605412db6 100644 --- a/build/package/WebContent/index.html +++ b/build/package/WebContent/index.html @@ -16,10 +16,12 @@ var itmill = function() { var isIE = /MSIE/.test(navigator.userAgent) && !window.opera; - var packageOpen = false; var packageContent; var package; var demoArea; + var demos; + var additionalDemos; + var additionalDemosContent; return { @@ -27,23 +29,32 @@ // Fetch references packageContent = document.getElementById("package-contents-content"); package = document.getElementById("package-contents"); - demoArea = document.getElementById("demos"); + demoArea = document.getElementById("demo-buttons"); + demos = demoArea.getElementsByTagName("li"); + additionalDemos = document.getElementById("additional-demos"); + additionalDemosContent = document.getElementById("additional-demos-content"); - // Hide package contents initially + // Hide panel initially packageContent.style.display = "none"; + additionalDemosContent.style.display = "none"; + + // Enable additional demos panel hiding/showing + var toggle = additionalDemos.getElementsByTagName("h3")[0]; + toggle.style.cursor = "pointer"; + toggle.title = "Show/hide additional demos"; + // Use the quick-n-dirty way to attach event listeners + toggle.onclick = function() {itmill.togglePanel(additionalDemosContent)}; // Enable package contents panel hiding/showing - var toggle = package.getElementsByTagName("h3")[0]; + toggle = package.getElementsByTagName("h3")[0]; toggle.style.cursor = "pointer"; toggle.title = "Show/hide package contents"; // Use the quick-n-dirty way to attach event listeners - toggle.onclick = this.togglePackage; + toggle.onclick = function() {itmill.togglePanel(packageContent)}; - // TODO enable demo button hovers - var demos = demoArea.getElementsByTagName("li"); + // enable demo button hovers for(var i=0; i < demos.length; i++) { demos[i].onmouseover = this.focusDemo; - //demos[i].onmouseout = this.blurDemos; } demoArea.onmouseout = this.blurDemos; @@ -51,14 +62,25 @@ // TODO implement feedback popup }, - togglePackage : function() { - if(packageOpen) { - packageContent.style.display = "none"; - packageOpen = false; + togglePanel : function(which) { + if(which._open) { + which.style.display = "none"; + which._open = false; + } else { + which.style.display = "block"; + which._open = true; + } + // Dirty fix to reposition package-content panel + if(which == additionalDemosContent) { + var current = package.style.marginTop ? parseInt(package.style.marginTop) : -105; + if(which._open) { + if(!which._height) + which._height = additionalDemos.offsetHeight - package.offsetHeight; + package.style.marginTop = (current + which._height) + "px"; } else { - packageContent.style.display = "block"; - packageOpen = true; + package.style.marginTop = (current - which._height) + "px"; } + } }, focusDemo : function(e) { @@ -67,7 +89,6 @@ if(target.nodeType != 1 || target.nodeName != "LI") return; - var demos = document.getElementById("demos").getElementsByTagName("li"); for(var i=0; i < demos.length; i++) { var demo = demos[i]; if(demo != target) { @@ -88,9 +109,8 @@ blurDemos : function(e) { var evt = e ? e : window.event; var target = evt.toElement || evt.relatedTarget; - if((target == demoArea || target.parentNode == demoArea || target.parentNode.parentNode == demoArea) && target.nodeName != "H2") + if(target == demoArea || target.parentNode == demoArea || target.parentNode.parentNode == demoArea) return; - var demos = document.getElementById("demos").getElementsByTagName("li"); for(var i=0; i < demos.length; i++) { if(isIE) demos[i].style.filter = ""; @@ -118,12 +138,30 @@

Demos

- + +
+ +
+
+ +

» Additional demos

+ +
+ +
+ +
+
@@ -158,7 +196,7 @@
-
+

» Package contents