mirrors
/
vaadin-framework
mirror of https://github.com/vaadin/framework.git
Watch 1
Star 0
Fork 0
Code Issues 0 Releases 330 Wiki Activity
Browse Source

Moved this prototype stuff to WEB-INF/lib/themes 

svn changeset:193/svn branch:toolkit
tags/6.7.0.beta1
Joonas Lehtinen 17 years ago
parent
6a135983f2
commit
6f51ae0f6f
13 changed files with 0 additions and 742 deletions
Split View Show Diff Stats
  1. 0
    0
      WebContent/themes/example/example_styles.css
  2. 0
    80
      WebContent/themes/example/example_theme.js
  3. 0
    227
      WebContent/themes/playground/components.html
  4. 0
    238
      WebContent/themes/playground/default.css
  5. BIN
      WebContent/themes/playground/img/bg1.gif
  6. BIN
      WebContent/themes/playground/img/bg2.gif
  7. BIN
      WebContent/themes/playground/img/bg3.jpg
  8. BIN
      WebContent/themes/playground/img/tree/off.gif
  9. BIN
      WebContent/themes/playground/img/tree/on.gif
  10. BIN
      WebContent/themes/playground/table-prototypes/aquaHeaderIcon.gif
  11. 0
    88
      WebContent/themes/playground/table-prototypes/table-proto-firefox.html
  12. 0
    40
      WebContent/themes/playground/table-prototypes/table-proto-ie.html
  13. 0
    69
      WebContent/themes/playground/table-prototypes/table-proto-safari.html

+ 0
- 0
WebContent/themes/example/example_styles.css View File


+ 0
- 80
WebContent/themes/example/example_theme.js View File

@@ -1,80 +0,0 @@
/** Construct example theme that extends some other theme
* typically the DefaultTheme.
*
* @param themeRoot The base URL of theme resources.
* @param defaultTheme Theme to be extended.
*
*/


function ExampleTheme(themeRoot, defaultTheme) {
this.themeName = "ExampleTheme";
this.root = themeRoot;
this.parent = defaultTheme;
// Tell the parent where to look for theme icons
this.parent.iconRoot = this.root;
}

/** Register all renderers to a ajax client.
*
* @param client The ajax client instance.
*/
ExampleTheme.prototype.registerTo = function(client) {

// We register our own customlayout handler.
// This way the layouts can be in different place.
client.registerRenderer(this,"customlayout",null,this.renderCustomLayout);
}

ExampleTheme.prototype.renderCustomLayout = function(renderer,uidl,target,layoutInfo) {

// Shortcuts
var theme = renderer.theme;
var parentTheme = theme.parent;
// Get style
var style = uidl.getAttribute("style");
if (style == null) return null;
// Load the layout
var url = theme.root + style + ".html";
var text = renderer.client.loadDocument(url,false);
if (text == null) return null;

// Create containing element
var main = parentTheme.createPaintableElement(renderer,uidl,target);
var n = parentTheme.createElementTo(main, "div");
n.setAttribute("id",uidl.getAttribute("id"));
n.innerHTML=text;
var divs = n.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
var div = divs.item(i);
var name = div.getAttribute("location");
if (name != null) {
for (var j=0; j < uidl.childNodes.length; j++) {
var c = uidl.childNodes.item(j);
if (c.nodeType == Node.ELEMENT_NODE
&& c.nodeName == "location"
&& c.getAttribute("name") == name) {
for (var k=0; k<c.childNodes.length; k++) {
var cc = c.childNodes.item(k);
if (cc.nodeType == Node.ELEMENT_NODE) {
var parent = div.parentNode;
// TODO
if (parent != null) {
parentTheme.removeAllChildNodes(div);
var newNode = renderer.client.renderUIDL(cc,div);
}
}
}
}
}
}
}
}

+ 0
- 227
WebContent/themes/playground/components.html View File

@@ -1,227 +0,0 @@
<HTML>
<HEAD>
<link rel="stylesheet" href="default.css" type="text/css"/>
</HEAD>
<BODY>


<DIV class="table">
<DIV class="caption pad">Table
<DIV class="outset popup">
<DIV class="border pad">
<IMG class="icon" src="img/icon.gif"/>
<DIV class="content">
This is the popup description.
IT can be multiline.
</DIV>
</DIV>
</DIV>
</DIV>

<DIV class="outset">
<DIV class="border">
<TABLE>
<TR class="header">
<TD class="empty"></TD>
<TD class="cheader clickable bg"><DIV class="caption">R header 1</DIV></TD>
<TD class="cheader clickable bg"><DIV class="caption">R header 2</DIV></TD>
<TD class="cheader clickable bg"><DIV class="caption">R header 3</DIV></TD>
</TR>
<TR class="odd clickable">
<TD class="rheader"><DIV class="caption">C header 1</DIV></TD>
<TD>cell</TD>
<TD>cell</TD>
<TD>cell</TD>
</TR>
<TR class="even clickable">
<TD class="rheader"><DIV class="caption">C header</DIV></TD>
<TD>cell</TD>
<TD>cell</TD>
<TD>cell</TD>
</TR>
<TR class="odd clickable">
<TD class="rheader"><DIV class="caption">C header</DIV></TD>
<TD>cell</TD>
<TD>cell with some more stuff<br/>asdasdas</TD>
<TD>cell</TD>
</TR>
<TR class="even clickable">
<TD class="rheader"><DIV class="caption">C header</DIV></TD>
<TD>cell</TD>
<TD>cell</TD>
<TD>cell</TD>
</TR>
</TABLE>
<DIV class="nav pad">&lt;&lt; 5 / 72 &gt;&gt;</DIV>
</DIV>
</DIV>
</DIV>

<BR/>

<DIV class="panel outset">
<DIV class="border">
<DIV class="caption pad">Panel</DIV>
<DIV class="content">
This is supposed to be panel content.
<P>
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.


<DIV class="tabsheet">
<DIV class="caption">Tabsheet</DIV>
<DIV class="tabs">
<DIV class="tab clickable inline"><DIV class="caption border pad inline">Tab 1</DIV></DIV>
<DIV class="tab-on inline"><DIV class="caption border pad inline">Tab 2</DIV></DIV>
<DIV class="tab clickable inline"><DIV class="caption border pad inline">Tab 3</DIV></DIV>
<DIV class="tab disabled inline"><DIV class="caption border pad inline">Disabled</DIV></DIV>
</DIV>
<DIV class="outset">
<DIV class="content border">
This is supposed to be tabsheet content.
<P>
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
</P>
</DIV>
</DIV>
</DIV>

<BR/>

<DIV class="button outset clickable">
<DIV class="border pad bg">
<DIV class="caption">Ok</DIV>
</DIV>
</DIV>

<DIV class="button outset clickable error">
<DIV class="border pad bg">
<DIV class="caption">Error</DIV>
</DIV>
</DIV>

<DIV class="button outset disabled">
<DIV class="border pad bg">
<DIV class="caption">Disabled asdasdasdasdasdasdasdasdasd</DIV>
</DIV>
</DIV>

<DIV class="link clickable">
<DIV class="border pad">
<DIV class="caption">This is a link</DIV>
<DIV class="description">
Perhaps a link should display it's description directly? I think so :-)<br/>
Multiline.
</DIV>
</DIV>
</DIV>

<DIV class="link disabled">
<DIV class="border pad">
<DIV class="caption">This is a link</DIV>
<DIV class="description">
Perhaps a link should display it's description directly? I think so :-)<br/>
Multiline.
</DIV>
</DIV>
</DIV>

</DIV>
</DIV>
</DIV>

<BR/>
<DIV class="outset">
<DIV class="border">
<DIV class="caption capshift inline pad">Panel lite</DIV>
<DIV class="content">
<DIV class="textfield">
<DIV class="caption">Textfield</DIV>
<DIV class="border">
<DIV class="inset">
<INPUT type="text">
</DIV>
</DIV>
</DIV>

<DIV class="textfield error">
<DIV class="caption">Textfield</DIV>
<DIV class="border">
<DIV class="inset">
<INPUT type="text">
</DIV>
</DIV>
</DIV>

<DIV class="textfield disabled">
<DIV class="caption">Disabled</DIV>
<DIV class="border">
<DIV class="inset">
<INPUT type="text">
</DIV>
</DIV>
</DIV>

</DIV>
</DIV>
</DIV>
</DIV>



<DIV class="tree">
<DIV class="placeholder">
<DIV class="caption">Tree</DIV>
<DIV class="content">
<DIV class="node clickable">
<IMG src="img/tree/on.gif" class="icon">
<DIV class="caption inline">Node</DIV>
</DIV>
<DIV class="nodes">
<DIV class="node clickable">
<IMG src="img/tree/off.gif" class="icon">
<DIV class="caption inline">Node</DIV>
</DIV>
<DIV class="node clickable">
<IMG src="img/tree/on.gif" class="icon">
<DIV class="caption inline">Node</DIV>
</DIV>
<DIV class="nodes">
<DIV class="node clickable">
<IMG src="img/tree/off.gif" class="icon">
<DIV class="caption inline">Node</DIV>
</DIV>
<DIV class="node clickable">
<IMG src="img/tree/off.gif" class="icon">
<DIV class="caption inline">Node</DIV>
</DIV>
</DIV>
</DIV>
<DIV class="node clickable">
<IMG src="img/tree/off.gif" class="icon">
<DIV class="caption inline">Node</DIV>
</DIV>
<DIV class="node clickable">
<IMG src="img/tree/off.gif" class="icon">
<DIV class="caption inline">Node</DIV>
</DIV>
</DIV>
</DIV>


</BODY>
</HTML>

+ 0
- 238
WebContent/themes/playground/default.css View File

@@ -1,238 +0,0 @@
* {
font-size: 10pt;
font-family: sans-serif;
}
.popup {
font-weight: normal;
position: absolute;
z-index: 1000;
background: white;
}
.popup .content {
display: inline;
}
.popup .icon {
vertical-align: middle;
}
.popup.hide {
display: inline;
border: none;
}
.popup.hide .border {
display: inline;
border: none;
}
.popup.hide .icon {
display: inline;
width: 16px;
height: 16px;
}
.popup.hide .content {
display: none;
}
.inline {
display: inline;
}
.pad {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 7px;
padding-right: 7px;
}
.bg {
background-image: url('img/bg1.gif');
background-repeat: repeat-x;
}
.disabled {
color: #999999;
opacity: 0.5;
filter: alpha(opacity=50);
}
.disabled .caption {
color: #999999;
}
.disabled .border .caption {
color: #999999;
}
.caption {
font-weight: bold;
color: black;
clear: both;
}
.content {
padding: 7px;
}
.capshift {
position: relative;
top: -10px;
left: 3px;
background-color: white;
}
.clickable {
cursor: hand;
cursor: pointer;
}
DIV.clickable.outset:hover {
border: 1px solid #eeeeee;
}
DIV.clickable:hover .border {
border: 1px solid #aaaaee;
}
.border {
border-top: 1px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
}
.error .border {
border-color: #ee6666;
}
.inset {
border-top: 2px solid #eeeeee;
border-left: 2px solid #eeeeee;
}
.outset {
border-bottom: 2px solid #eeeeee;
border-right: 2px solid #eeeeee;
}
/* COMPONENTS */
.link {
border: 1px solid white;
}
.link .caption {
color: blue;
}
.link .description {
font-size: smaller;
padding-left: 7px;
}
.link DIV.border {
border: 1px solid white;
}
DIV.link.clickable:hover .border {
background-image: url('img/bg1.gif');
background-repeat: repeat-x;
}
.tabs {
padding-left: 0px !important;
padding-left: 1px;
padding-top: 5px;
padding-bottom: 3px;
}
.tab, .tab-on {
border-right: 2px solid #eeeeee;
border-bottom: none;
}
.tab-on {
position: relative;
top: 1px;
}
.tab .caption {
background-image: url('img/bg1.gif');
background-repeat: repeat-x;
border-bottom: none;
}
DIV.tab.clickable:hover .caption {
background-image: url('img/bg1.gif');
background-repeat: repeat-x;
}
.tab-on .caption {
border-bottom: 1px solid white;
border-bottom: none;
background-color: white;
}
.node {
border: 1px solid white;
}
.nodes {
padding-left: 16px;
}
.node .caption {
vertical-align: top;
font-weight: normal;
}
DIV.node:hover{
border: 1px solid #aaaaee;
background-image: url('img/bg1.gif');
background-repeat: repeat-x;
}
DIV.node:hover .caption {
color: blue;
}
.panel {
background-image: url('img/bg3.jpg');
background-repeat: no-repeat;
}
DIV.textfield:hover .border {
border: 1px solid #aaaaee;
}
.textfield INPUT {
border: none;
}
.table TABLE {
border-collapse: collapse;
empty-cells: show;
xborder: 1px solid #999999;
width: 100%;
}
.table TD {
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border-left: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
.table .odd {
background-color: #f9f9f9;
}
.table .cheader {
border-bottom-color: #999999;
border-left: 1px solid #999999;
}
.table .rheader {
text-align: right;
border-right: 1px solid #999999;
border-left: none;
}
.table .empty {
border-bottom-color: #999999;
border-right-color: #999999;
}
.table .nav {
border-top: 2px solid #eeeeee;
text-align: center;
}
.table TR.clickable:hover {
background-image: url('img/bg1.gif');
background-repeat: repeat-x;
}
.table TR.clickable:hover TD {
border-bottom: 1px solid #9999ee;
}
.over .caption {
color: #6666cc;
}

BIN
WebContent/themes/playground/img/bg1.gif View File


BIN
WebContent/themes/playground/img/bg2.gif View File


BIN
WebContent/themes/playground/img/bg3.jpg View File


BIN
WebContent/themes/playground/img/tree/off.gif View File


BIN
WebContent/themes/playground/img/tree/on.gif View File


BIN
WebContent/themes/playground/table-prototypes/aquaHeaderIcon.gif View File


+ 0
- 88
WebContent/themes/playground/table-prototypes/table-proto-firefox.html View File

@@ -1,88 +0,0 @@
<html>
<head>
<title>Table concept prototype</title>
<style>
.header {
color:white;
padding-left:2px;
padding-bottom:2px;
border:1px solid #458cee;
background: transparent url(aquaHeaderIcon.gif) 0 -5px repeat-x;
}
div.table {
border: 1px solid silver;
width: 515px;
}
#scroller {
width: 15px;
float: right;
margin-top: 15px;
height: 315px;
overflow: -moz-scrollbars-vertical;
overflow-y: auto;
overflow-x: hidden;
}
div.horiz-scroller {
width: 500px;
height: 345px; '
overflow: -moz-scrollbars-horizontal;
overflow-y: hidden;
overflow-x: auto;
}
#tbody {
overflow: hidden;
height: 312px;
}

div.table td {
font: 11px "Lucida Grande",LucidaGrande,verdana,sans-serif;
}
div.table tbody td {
border-bottom: 1px solid #eee;
}

div.table tbody td.unknown {
background-color: #eee;
}
</style>
</head>
<body>
<script lang="JavaScript">
cols = 19;
rows = 100;
function scr() {
var t = document.getElementById("tbody");
var s = document.getElementById("scroller");
t.scrollTop = s.scrollTop;
}
</script>
<div class="table">
<div id="scroller" onscroll="scr()"><div style="height: 5000px; width: 1px;"> </div></div>
<div class="horiz-scroller">
<TABLE border="0" cellspacing="0" style="width: 1000px;">
<THEAD>
<tr class="header"><script>for (var i=0; cols > i; i++) document.write("<td>Col " + (1+i) + "</td>");</script></th>
</THEAD>
<TBODY id="tbody">
<script>
document.write('<tr><td class="unknown" colspan="'+cols+'" height="1000"> </td></tr>');
for (var j=0; rows > j; j++) {
document.write("<tr>");
for (var i=0; cols > i; i++) document.write("<td>" + (1+i) + "," + (1+j) + "</td>");
document.write("</tr>");
}
document.write('<tr><td class="unknown" colspan="'+cols+'" height="2000"> </td></tr>');
</script>
</TBODY>
</TABLE>
</div>
</div>

</body>
</html>

+ 0
- 40
WebContent/themes/playground/table-prototypes/table-proto-ie.html View File

@@ -1,40 +0,0 @@
<html>
<head>
<title>Table concept prototype</title>
</head>
<body>
<script lang="JavaScript">
cols = 10;
rows = 50;
function scr() {
var t = document.getElementById("inner");
var h = document.getElementById("header");
var s = document.getElementById("scroller");
t.scrollTop = s.scrollTop;
h.style.top = "" + s.scrollTop + "px";
}
</script>
<div id="outer" style="border: 2px outset #8080A0; width: 522px;">
<div id="scroller" onscroll="scr()"
style="width: 15px; float: right; margin-top: 22px; height: 308px; overflow: -moz-scrollbars-vertical; overflow-y: auto; overflow-x: hidden;">
<div style="height: 5000px; width: 1px;"> </div>
</div>
<div style="width: 500px; height: 345px; overflow-x: auto; overflow-y: hidden; " id="inner">
<TABLE border="1" style="width: 1000px;">
<tr id="header" style="position: relative; background-color: white; z-index: 10;"><script>for (var i=0; cols > i; i++) document.write("<th>Col " + (1+i) + "</th>");</script></th>
<script>
document.write('<tr><td colspan="'+cols+'" height="1000"> </td></tr>');
for (var j=0; rows > j; j++) {
document.write("<tr>");
for (var i=0; cols > i; i++) document.write("<td>" + (1+i) + "," + (1+j) + "</td>");
document.write("</tr>");
}
document.write('<tr><td colspan="'+cols+'" height="1000"> </td></tr>');
</script>
</TABLE>
</div>
</div>

</body>
</html>

+ 0
- 69
WebContent/themes/playground/table-prototypes/table-proto-safari.html View File

@@ -1,69 +0,0 @@
<html>
<head>
<title>Table concept prototype</title>
<style>
.header {
color:white;
padding-left:2px;
padding-bottom:2px;
border:1px solid #458cee;
background: transparent url(aquaHeaderIcon.gif) 0 -5px repeat-x;
}

#header {
position: relative;
}
div.table {
border: 1px solid silver;
width: 515px;
height: 315px;
overflow: auto;
}

div.table td {
font: 11px "Lucida Grande",LucidaGrande,verdana,sans-serif;
}
div.table tbody td {
border-bottom: 1px solid #eee;
}

div.table tbody td.unknown {
background-color: #eee;
}
</style>
</head>
<body>
<script lang="JavaScript">
cols = 19;
rows = 100;
function scr() {
var t = document.getElementById("tbody");
var h = document.getElementById("header");
h.style.top = "" + t.scrollTop + "px";
}
</script>
<div id="tbody" class="table" onscroll="scr()">
<TABLE border="0" cellspacing="0" style="width: 1000px;" id="header">
<tr class="header" ><script>for (var i=0; cols > i; i++) document.write("<td>Col " + (1+i) + "</td>");</script></tr>
</TABLE>
<TABLE border="0" cellspacing="0" style="width: 1000px;">
<script>
document.write('<tr><td class="unknown" colspan="'+cols+'" height="1000"> </td></tr>');
for (var j=0; rows > j; j++) {
document.write("<tr>");
for (var i=0; cols > i; i++) document.write("<td>" + (1+i) + "," + (1+j) + "</td>");
document.write("</tr>");
}
document.write('<tr><td class="unknown" colspan="'+cols+'" height="2000"> </td></tr>');
</script>
</TABLE>
</div>
<!-- Add script to match header widths to table column widths !!!! -->
</body>
</html>

Write Preview
Loading…
Cancel
Save