http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/LICENSE ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/LICENSE b/platform.style.classic.webguiexamples/LICENSE new file mode 100644 index 0000000..261eeb9 --- /dev/null +++ b/platform.style.classic.webguiexamples/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License.
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/pom.xml ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/pom.xml b/platform.style.classic.webguiexamples/pom.xml new file mode 100644 index 0000000..7e2f0e8 --- /dev/null +++ b/platform.style.classic.webguiexamples/pom.xml @@ -0,0 +1,79 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?><project xmlns="http://maven.apache.org/POM/4.0.0"; xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"; xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd";> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + +--> + + <modelVersion>4.0.0</modelVersion> + <parent> + <groupId>org.apache.clerezza</groupId> + <artifactId>clerezza</artifactId> + <version>0.5-SNAPSHOT</version> + <relativePath>../parent</relativePath> + </parent> + <groupId>org.apache.clerezza</groupId> + <artifactId>platform.style.classic.webguiexamples</artifactId> + <packaging>bundle</packaging> + <version>0.3-SNAPSHOT</version> + <name>Clerezza - Web GUI Examples</name> + <description>GUI Examples for building wep apps on clerezza platform</description> + <dependencies> + <dependency> + <groupId>junit</groupId> + <artifactId>junit</artifactId> + <scope>test</scope> + </dependency> + <dependency> + <groupId>org.apache.clerezza</groupId> + <artifactId>platform.typerendering.scalaserverpages</artifactId> + <version>0.4-SNAPSHOT</version> + </dependency> + <dependency> + <groupId>javax.ws.rs</groupId> + <artifactId>jsr311-api</artifactId> + </dependency> + <dependency> + <groupId>org.apache.clerezza</groupId> + <artifactId>web.fileserver</artifactId> + <version>0.10-SNAPSHOT</version> + </dependency> + <dependency> + <groupId>org.apache.felix</groupId> + <artifactId>org.apache.felix.scr.annotations</artifactId> + </dependency> + <dependency> + <groupId>org.osgi</groupId> + <artifactId>org.osgi.compendium</artifactId> + </dependency> + </dependencies> + <build> + <plugins> + <plugin> + <groupId>org.apache.felix</groupId> + <artifactId>maven-bundle-plugin</artifactId> + <extensions>true</extensions> + <configuration> + <instructions> + <Require-Bundle>org.apache.clerezza.platform.style.classic, org.apache.clerezza.web.resources.jquery</Require-Bundle> + </instructions> + </configuration> + </plugin> + </plugins> + </build> +</project> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml new file mode 100644 index 0000000..a740c5d --- /dev/null +++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml @@ -0,0 +1,99 @@ +<?xml version='1.0'?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> + +<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> +<head> +<title>alert message - example</title> + + <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> + <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" /> + <link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/> + <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript" /> + <script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/> + <script src="/yui/element/element-min.js" type="text/javascript"/> + <script src="/yui/container/container-min.js" type="text/javascript"/> + <script src="/scripts/alert-message.js" type="text/javascript"/> + <script type="text/javascript"> + function showAlert() { + + } + </script> +</head> + +<body> + + +<!-- content --> +<div id="tx-content" class="demo"> + + <div id="demo"> + <h3>Description</h3> + + + <h3>Alert</h3> + + <div> + <br/> + <br/> + <div style="display: none"> + <div id="myOverlayBody">body</div> + </div> + <div> + <a href="#" onclick="AlertMessage.show(function(){alert('done');}, + 'This is a test alert', 'Test Alert', 'Yes', 'No')">click here to show alert.</a> <br/> + </div> + <br/> + <br/> + + + The following css and scripts have to be included: + <pre> +<link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/> +<script src="/jquery/jquery-1.3.2.min.js" type="text/javascript" /> +<script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/> +<script src="/yui/element/element-min.js" type="text/javascript"/> +<script src="/yui/container/container-min.js" type="text/javascript"/> +<script src="/scripts/alert-message.js" type="text/javascript"/> + </pre> + <br/> + <br/> + e.g. + <pre> +... + <div> + <a href="#" onclick="AlertMessage.show(function(){alert('done');}, + 'This is a test alert', 'Test Alert', 'Yes', 'No')">click here to add sho alert </a> <br/> + </div> +... + </pre> + </div> + + </div> +</div> +<!-- // content --> + +</body> +</html> + http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml new file mode 100644 index 0000000..ae9e87a --- /dev/null +++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml @@ -0,0 +1,201 @@ +<?xml version='1.0'?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> + +<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> +<head> +<title>buttons - example</title> + + <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> + <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" /> + +</head> + +<body> + + +<!-- content --> +<div id="tx-content" class="demo"> + + <div id="demo"> + <h3>Description</h3> + + + <h3>Available Buttons</h3> + + <div> + <strong>Buttons</strong> are <a> with the class <strong>tx-button</strong>. Furthermore there are 4 different types of buttons : + <br/> + <br/> + remove actions have the additional class: <strong>tx-button-remove</strong><br/> + modifying or editing buttons have the additional class: <strong>tx-button-modify</strong><br/> + create actions have the additional class: <strong>tx-button-create</strong><br/> + create actions have the additional class: <strong>tx-button-generic</strong><br/> + <br/> + + <ol> + <li><a href="#" title="tx-button-remove" class="tx-button tx-button-remove">Remove</a></li> + <li><a href="#" title="tx-button-create" class="tx-button tx-button-create">Create</a></li> + <li><a href="#" title="tx-button-modify" class="tx-button tx-button-modify">Modify</a></li> + <li><a href="#" title="tx-button-generic" class="tx-button tx-button-generic">Generic</a></li> + </ol> + <br/> + <br/> + <br/> + e.g. + <pre><a class="tx-button tx-button-remove" href="#" >remove</a></pre> + <br/>Buttons have 2 visual states: inactive and active. Add the class <strong>tx-inactive</strong> to make a button visually inactive. + <br/> + <br/> + + <ol> + <li><a href="#" title="tx-button-remove" class="tx-button tx-button-remove tx-inactive">Remove</a></li> + <li><a href="#" title="tx-button-create" class="tx-button tx-button-create tx-inactive">Create</a></li> + <li><a href="#" title="tx-button-modify" class="tx-button tx-button-modify tx-inactive">Modify</a></li> + <li><a href="#" title="tx-button-generic" class="tx-button tx-button-generic tx-inactive">Generic</a></li> + </ol> + <br/> + <br/> + <br/> + e.g. + <pre><a class="tx-button tx-button-remove tx-inactive" href="#" >remove</a></pre> + </div> + + <h3>Icons</h3> + + <strong>Icons</strong> are <a> with the class <strong>tx-icon</strong>. e.g.There are 4 different type of icons. These icons have an active and inactive state (in case of toggles on/off) + <br/> + <br/> + <strong>active</strong> + <ol> + <li><a href="#" title="tx-icon-delete" class="tx-icon tx-icon-delete">Delete</a></li> + <li><a href="#" title="tx-icon-ok" class="tx-icon tx-icon-ok">Ok</a></li> + <li><a href="#" title="tx-icon-search" class="tx-icon tx-icon-search">Search</a></li> + <li><a href="#" title="tx-icon-edit" class="tx-icon tx-icon-edit">Edit</a></li> + <li><a href="#" title="tx-toggle-list-on" class="tx-icon tx-toggle-list-on">Table</a></li> + </ol> + <br/> + <br/> + <br/> + e.g.<pre><a class="tx-icon tx-icon-delete" href="#">Delete</a></pre> + <strong>inactive</strong> + <ol> + <li><a href="#" title="tx-icon-delete" class="tx-icon tx-icon-delete tx-inactive">Delete</a></li> + <li><a href="#" title="tx-icon-ok" class="tx-icon tx-icon-ok tx-inactive">Ok</a></li> + <li><a href="#" title="tx-icon-search" class="tx-icon tx-icon-search tx-inactive">Search</a></li> + <li><a href="#" title="tx-icon-edit" class="tx-icon tx-icon-edit tx-inactive">Edit</a></li> + <li><a href="#" title="tx-icon-toggle-list-off" class="tx-icon tx-toggle-list-off">Table</a></li> + </ol> + <br/> + <br/> + <br/> + e.g.<pre><a class="tx-icon tx-icon-delete tx-inactive" href="#">Delete</a></pre> + <br/> + <br/> + The following paragraphs describes the available icons: + <br/> + <br/> + <h4>Remove</h4> + <ol> + <li><a href="#" class="tx-icon tx-icon-delete" title="tx-icon-delete">Delete</a> <pre><a class="tx-icon tx-icon-delete tx-inactive" href="#">delete</a></pre></li> + </ol> + + <h4>Create</h4> + <ol> + <li><a href="#" class="tx-icon tx-icon-ok" title="tx-icon-ok">Ok</a> <pre><a class="tx-icon tx-icon-ok" href="#">ok</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-plus" title="tx-icon-plus">Plus</a> <pre><a class="tx-icon tx-icon-plus" href="#">plus</a></pre></li> + </ol> + + <h4>Modify</h4> + <ol> + <li><a href="#" class="tx-icon tx-icon-modify" title="tx-icon-modify">Edit</a> <pre><a class="tx-icon tx-icon-modify" href="#">modify</a></pre></li> + </ol> + + <h4>Generic</h4> + <ol> + <li><a href="#" class="tx-icon tx-icon-search" title="tx-icon-search">Search</a> <pre><a class="tx-icon tx-icon-search" href="#">search</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-sitechooser" title="tx-icon-sitechooser">Site chooser</a> <pre><a class="tx-icon tx-icon-sitechooser" href="#">sitechooser</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-user" title="tx-icon-user">User</a> <pre><a class="tx-icon tx-icon-user" href="#">user</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-close" title="tx-icon-close">Close</a> <pre><a class="tx-icon tx-icon-close" href="#">close</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-forward" title="tx-icon-forward">Forward</a> <pre><a class="tx-icon tx-icon-forward" href="#">forward</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-back" title="tx-icon-back">Back</a> <pre><a class="tx-icon tx-icon-back" href="#">back</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-zoomin" title="tx-icon-zoomin">Zoom in</a> <pre><a class="tx-icon tx-icon-zoomin" href="#">zoomin</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-zoomout" title="tx-icon-zoomout">Zoom out</a> <pre><a class="tx-icon tx-icon-zoomout" href="#">zoomout</a></pre></li> + </ol> + + <h3>Available Toggle buttons</h3> + + There are also <strong>toggles</strong> available, which are <a>. These buttons are defined by using the class <strong>tx-icon</strong>. Toggle buttons are switches between to states (on/off state). There are toggle buttons available for representing resources as lists, trees and thumbnails. Futhermore there are toggle buttons for choosing a size of a thumbnail. + + <br/> + <br/> + + <h4>On (clickable)</h4> + <ol> + <li><a href="#" title="tx-toggle-list-on" class="tx-icon tx-toggle-list-on">Table</a> <pre><a class="tx-icon tx-icon-list-on" href="#">list-on</a></pre></li> + <li><a href="#" title="tx-toggle-thumbnail-on" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a> <pre><a class="tx-icon tx-icon-thumbnail-on" href="#">thumbnail-on</a></pre></li> + <li><a href="#" title="tx-toggle-tree-on" class="tx-icon tx-toggle-tree-on">Tree</a> <pre><a class="tx-icon tx-icon-tree-on" href="#">tree-on</a></pre></li> + <li><a href="#" title="tx-toggle-size1-on" class="tx-icon tx-toggle-size1-on">Size 1</a> <pre><a class="tx-icon tx-icon-size1-on" href="#">size1-on</a></pre></li> + <li><a href="#" title="tx-toggle-size2-on" class="tx-icon tx-toggle-size2-on">Size 2</a> <pre><a class="tx-icon tx-icon-size2-on" href="#">size2-on</a></pre></li> + <li><a href="#" title="tx-toggle-size3-on" class="tx-icon tx-toggle-size3-on">Size 3</a> <pre><a class="tx-icon tx-icon-size3-on" href="#">size3-on</a></pre></li> + </ol> + <br/> + <br/> + <br/> + <h4>Off (select)</h4> + <ol> + <li><a href="#" title="tx-toggle-list-off" class="tx-icon tx-toggle-list-off">Table</a> <pre><a class="tx-icon tx-toggle-list-off" href="#">list</a></pre></li> + <li><a href="#" title="tx-toggle-thumbnail-off" class="tx-icon tx-toggle-thumbnail-off">Thumbnail</a> <pre><a class="tx-icon tx-toggle-thumbnail-off" href="#">thumbnail</a></pre></li> + <li><a href="#" title="tx-toggle-tree-off" class="tx-icon tx-toggle-tree-off">Tree</a> <pre><a class="tx-icon tx-toggle-tree-off" href="#">tree</a></pre></li> + <li><a href="#" title="tx-toggle-size1-off" class="tx-icon tx-toggle-size1-off">Size 1</a> <pre><a class="tx-icon tx-toggle-size1-off" href="#">size1</a></pre></li> + <li><a href="#" title="tx-toggle-size2-off" class="tx-icon tx-toggle-size2-off">Size 2</a> <pre><a class="tx-icon tx-toggle-size2-off" href="#">size2</a></pre></li> + <li><a href="#" title="tx-toggle-size3-off" class="tx-icon tx-toggle-size3-off">Size 3</a> <pre><a class="tx-icon tx-toggle-size3-off" href="#">size3</a></pre></li> + </ol> + <br/> + <br/> + <br/> + <h3>Various icons / buttons</h3> + + <ol> + <li><a href="#" class="tx-icon tx-icon-alert">Alert</a> <pre><a class="tx-icon tx-icon-alert" href="#">alert</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-drag">Drag Icon</a> <pre><a class="tx-icon tx-icon-drag" href="#">drag</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-down">Down</a> <pre><a class="tx-icon tx-icon-down" href="#">down</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-up">Up</a> <pre><a class="tx-icon tx-icon-up" href="#">up</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-right">Right</a> <pre><a class="tx-icon tx-icon-right" href="#">right</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-left">Left</a> <pre><a class="tx-icon tx-icon-left" href="#">left</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-down-inverse demo-bg">Down</a> <pre><a class="tx-icon tx-icon-down-inverse" href="#">downinverse</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-up-inverse demo-bg">Up</a> <pre><a class="tx-icon tx-icon-up-inverse" href="#">upinverse</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-right-inverse demo-bg">Right</a> <pre><a class="tx-icon tx-icon-right-inverse" href="#">rightinverse</a></pre></li> + <li><a href="#" class="tx-icon tx-icon-left-inverse demo-bg">Left</a> <pre><a class="tx-icon tx-icon-left-inverse" href="#">leftinverse</a></pre></li> + </ol> + + </div> + + +</div> +<!-- // content --> + +</body> +</html> + http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml new file mode 100644 index 0000000..8a25c79 --- /dev/null +++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml @@ -0,0 +1,164 @@ +<?xml version='1.0'?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> + +<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> +<head> +<title>edit - example</title> + + <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> + <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" /> + +</head> + +<body> + +<!-- content --> +<div id="tx-content" class="demo"> + + <!-- edit view --> + <div class="tx-edit"> + <div class="tx-edit-content"> + <form action="" method="post"> + <fieldset> + <ol> + <li class="tx-line"><label>Original format</label> + <div>jpg</div></li> + + <li class="tx-line"><label>Size</label> + <div>645 x 345 px (original size) <a href="">[view]</a><br /> + 512 x 257 px <a href="">[view]</a></div> + </li> + + <li class="tx-line"><label>Replace Image</label> + <input type="file" size="30" /></li> + + <li><label>Credit</label> + <input size="30" type="text" value="" /></li> + + <li><label>Licence type</label> + <select> + <option value="0">please select</option> + <option value="1" selected="selected">Royality Fee</option> + <option value="2">Open Photo</option> + <option value="3">Self made with natel</option> + </select></li> + + <li class="tx-line"><label>Caption</label> + <input size="30" type="text" value="" /></li> + + <li class="tx-line"><label>Alternative description</label> + <textarea cols="40" rows="3"></textarea></li> + + <li><label>Radio</label> + <input type="radio" name="radio1" value="" /> Yes <input type="radio" name="radio1" value="" /> No <input type="radio" name="radio1" value="" /> Maybe</li> + + <li><label>Checkbox</label> + <input type="checkbox" value="" /> Yes <input type="checkbox" value="" /> No <input type="checkbox" value="" /> Maybe</li> + </ol> + </fieldset> + </form> + </div> + + + + <div id="demo"> + <h3>Description</h3> + + In the tx-content a <div> with class<b>tx-edit</b> is created. Within <strong>div.tx-edit</strong> a <strong>div.tx-edit-content</strong> is added. + <br/> + <br/> + <strong>li.tx-line</strong> draws a line under the <li> element. + + <br/> + <br/> + The current example has no ids or names defined, if necessary they have to be defined contextually. + <br/> + + <strong>div.tx-edit</strong> is the main container for the edit view. If no class is defined on the <strong>div.tx-edit</strong> element the edit view has 100% width. + <br/> + The classes <strong>.tx-show-panel</strong>, <strong>.tx-hide-panel</strong> and <strong>.tx-halfwidth-right</strong> define the position of the edit view. + <br/> + <br/> + + <strong>.tx-show-panel</strong>: position with a panel on the left side.<br/> + <strong>.tx-hide-panel</strong>: position with a panel on the left side, hidden.<br/> + <strong>.tx-halfwidth-right</strong>: position on the right, 50% width.<br/> + <br/> + <br/> + + <h3>Example code</h3> + + <pre> +<div class="tx-edit-content"> + <form action="" method="post"> + <fieldset> + <ol> + <li class="tx-line"><label>Original format</label> + <div>jpg</div></li> + + <li class="tx-line"><label>Size</label> + <div>645 x 345 px (original size) <a href="">[view]</a><br /> + 512 x 257 px <a href="">[view]</a></div> + </li> + + <li class="tx-line"><label>Replace Image</label> + <input type="file" size="30" /></li> + + <li><label>Credit</label> + <input size="30" type="text" value="" /></li> + + <li><label>Licence type</label> + <select> + <option value="0">please select</option> + <option value="1" selected="selected">Royality Fee</option> + <option value="2">Open Photo</option> + <option value="3">Self made with natel</option> + </select></li> + + <li class="tx-line"><label>Caption</label> + <input size="30" type="text" value="" /></li> + + <li class="tx-line"><label>Alternative description</label> + <textarea cols="40" rows="3"></textarea></li> + + <li><label>Radio</label> + <input type="radio" name="radio1" value="" /> Yes <input type="radio" name="radio1" value="" /> No <input type="radio" name="radio1" value="" /> Maybe</li> + + <li><label>Checkbox</label> + <input type="checkbox" value="" /> Yes <input type="checkbox" value="" /> No <input type="checkbox" value="" /> Maybe</li> + </ol> + </fieldset> + </form> +</div> + </pre> + </div> + </div> +</div> +<!-- // content --> + + +</body> +</html> + http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml new file mode 100644 index 0000000..86f406a --- /dev/null +++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml @@ -0,0 +1,299 @@ +<?xml version='1.0'?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> + +<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> +<head> +<title>header - example</title> + + <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> + <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" /> + + <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> + <script src="/jquery/jquery.menu.js" type="text/javascript"></script> + +</head> + +<body> + +<!-- header --> +<div id="tx-header"> + <!-- system --> + <div id="tx-system"> + + <!-- global search --> + <div id="tx-globalsearch"> + <form action="/globalsearch/"> + <fieldset> + <input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/> + </fieldset> + </form> + </div> + + <!-- user information --> + <div id="tx-login"> + <a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span> + </div> + + <div id="tx-logo"><a href=""></a></div> + + <!-- main menu --> + <div id="tx-menu"> + <ol> + <li><a href="">Dashboard</a></li> + <li><a href="">Modulgruppe 1</a> + <ol> + <li><a href="">Submenu 1</a></li> + <li><a href="">Submenu 2</a></li> + <li><a href="">Submenu 3</a></li> + <li><a href="">Submenu 4</a></li> + </ol> + </li> + <li><a href="">Modulgruppe 2</a> + <ol> + <li><a href="">Submenu 1</a></li> + <li><a href="">Submenu 2</a></li> + </ol> + </li> + <li><a href="">Help</a> + <ol> + <li><a href="">About</a></li> + <li><a href="">What</a></li> + <li><a href="">Where</a></li> + </ol> + </li> + </ol> + </div> + </div> + <!-- //system --> + + <!-- module --> + <div id="tx-module"> + <!-- module title --> + <h1>header example</h1> + + <!-- page editing actions --> + <div id="tx-page-actions"> + <ol> + <li><a href="" class="tx-button tx-button-generic">Page Editing</a></li> + <li><a href="" class="tx-button tx-button-generic-on">Preview</a></li> + <li><a href="" class="tx-button tx-button-generic">Page Data</a></li> + <li><a href="" class="tx-button tx-button-generic">Something</a></li> + </ol> + </div> + + </div> + <!-- // module --> + + <!-- moduletabs --> + <div id="tx-module-tabs"> + <!-- moduletabs --> + <ol> + <li class="tx-active"><a href="#">Assets</a></li> + <li><a href="#">Image Sets</a></li> + <li><a href="#">My Lightboxes</a></li> + <li class="tx-active"><a href="#">My Something</a></li> + <li><a href="#">My Everything</a></li> + </ol> + + <!-- --> + <div id="tx-contextual-buttons"> + <ol> + <li><a href="#" class="tx-button tx-button-remove">Remove</a></li> + <li><a href="#" class="tx-button tx-button-create">Create</a></li> + <li><a href="#" class="tx-button tx-button-modify">Modify</a></li> + <li><a href="#" class="tx-button tx-button-generic">Generic</a></li> + </ol> + </div> + </div> + <!-- // moduletabs --> + + <!-- moduleoptions --> + <div id="tx-module-options"> + <ol> + <li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li> + <li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li> + <li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li> + + <li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li> + <li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li> + <li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li> + </ol> + + </div> + <!-- // moduleoptions --> +</div> +<!-- // header --> + +<!-- content --> +<div id="tx-content"> + <div id="demo"> + <h3>Description</h3> + <div>The header is a <div> with id <strong>tx-header</strong> and is the first child of the <body>.</div> + <br/> + + The <strong>div#tx-system</strong> contains the globalsearch, menu, logo and login.<br/> + The global search is a <div> with id <strong>tx-globalsearch</strong> and contains HTML.<br/> + The logo could be placed on the left top corner and is a <div> containing a <a> e.g. <div id="tx-logo"><a href="" /></div><br/> + The menu is a <div> with id <strong>tx-menu</strong>, which contains an ordered list.<br/> + <br/> + <br/> + + The <strong>div#tx-module</strong> contains the title and the page actions.<br/> + The title of the module is a <h1>. + The page action buttons area is a <div> with id <strong>tx-page-actions</strong>, which contains an ordered list.<br/> + <br/> + <br/> + + + The tabs and contextual buttons are in a <div> with id <strong>tx-module-tabs</strong> which contains:<br/> + An ordered list <ol> for the module tabs.<br/> + A <div> with id <strong>tx-contextual-buttons</strong>, which contains an ordered list of contextual action buttons<br/> + <br/> + <br/> + + The <strong>div#tx-module-options</strong> contains the toggle icons and paginator/select elements.<br/> + An ordered list <ol> for the module options, which contains the toggles and status icons.<br/> + <br/> + <br/> + + + <h3>Example code</h3> + <pre> +<!-- header --> +<div id="tx-header"> + <!-- system --> + <div id="tx-system"> + + <!-- global search --> + <div id="tx-globalsearch"> + <form action="/globalsearch/"> + <fieldset> + <input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/> + </fieldset> + </form> + </div> + + <!-- user information --> + <div id="tx-login"> + <a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span> + </div> + + <div id="tx-logo"><a href=""></a></div> + + <!-- main menu --> + <div id="tx-menu"> + <ol> + <li><a href="">Dashboard</a></li> + <li><a href="">Modulgruppe 1</a> + <ol> + <li><a href="">Submenu 1</a></li> + <li><a href="">Submenu 2</a></li> + <li><a href="">Submenu 3</a></li> + <li><a href="">Submenu 4</a></li> + </ol> + </li> + <li><a href="">Modulgruppe 2</a> + <ol> + <li><a href="">Submenu 1</a></li> + <li><a href="">Submenu 2</a></li> + </ol> + </li> + <li><a href="">Help</a> + <ol> + <li><a href="">About</a></li> + <li><a href="">What</a></li> + <li><a href="">Where</a></li> + </ol> + </li> + </ol> + </div> + </div> + <!-- //system --> + + <!-- module --> + <div id="tx-module"> + <!-- module title --> + <h1>Example</h1> + + <!-- page editing actions --> + <div id="tx-page-actions"> + <ol> + <li><a href="" class="tx-button tx-button-generic">Page Editing</a></li> + <li><a href="" class="tx-button tx-button-generic-on">Preview</a></li> + <li><a href="" class="tx-button tx-button-generic">Page Data</a></li> + <li><a href="" class="tx-button tx-button-generic">Something</a></li> + </ol> + </div> + + </div> + <!-- // module --> + + <!-- moduletabs --> + <div id="tx-module-tabs"> + <!-- moduletabs --> + <ol> + <li class="tx-active"><a href="#">Assets</a></li> + <li><a href="#">Image Sets</a></li> + <li><a href="#">My Lightboxes</a></li> + <li class="tx-active"><a href="#">My Something</a></li> + <li><a href="#">My Everything</a></li> + </ol> + + <!-- --> + <div id="tx-contextual-buttons"> + <ol> + <li><a href="#" class="tx-button tx-button-remove">Remove</a></li> + <li><a href="#" class="tx-button tx-button-create">Create</a></li> + <li><a href="#" class="tx-button tx-button-modify">Modify</a></li> + <li><a href="#" class="tx-button tx-button-generic">Generic</a></li> + </ol> + </div> + </div> + <!-- // moduletabs --> + + <!-- moduleoptions --> + <div id="tx-module-options"> + <ol> + <li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li> + <li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li> + <li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li> + + <li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li> + <li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li> + <li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li> + </ol> + + </div> + <!-- // moduleoptions --> +</div> +<!-- // header --> + </pre> + + </div> +</div> + +</body> +</html> + http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml new file mode 100644 index 0000000..3149ba6 --- /dev/null +++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml @@ -0,0 +1,108 @@ +<?xml version='1.0'?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> + +<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> +<head> +<title>overlay - example</title> + + <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> + <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" /> + <link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/> + <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"/> + <script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/> + <script src="/yui/element/element-min.js" type="text/javascript"/> + <script src="/yui/container/container-min.js" type="text/javascript"/> + <script src="/yui/resize/resize-min.js" type="text/javascript"/> + <script src="/yui/utilities/utilities.js" type="text/javascript"/> + <script src="/scripts/overlay.js" type="text/javascript"/> +</head> + +<body> + + +<!-- content --> +<div id="tx-content" class="demo"> + + <div id="demo"> + <h3>Description</h3> + + + <h3>Overlay</h3> + + <div> + The Overlay behave similarly to an OS window. Unlike true browser popup windows, + the overlay is floating DHTML elements embedded directly within the page context. + The Overlay is positioned above the flow of a page and is draggable, resizable and has a close button. + The Overlay has a method show with arguments body, header, width and height, which renders the overlay. + The body and the header can be html elements or text. + The width (default value: 46em) and height (default value: 37em) can be defined absolutely or relatively. + Furthermore the Overlay has a method close to destroy the overlay. + <br/> + <br/> + <div style="display: none"> + <div id="myOverlayBody">body</div> + </div> + <div> + <a href="#" onclick="Overlay.show($('#myOverlayBody'), 'header', '20em', '10em');">click here to add the overlay.</a> <br/> + </div> + <br/> + <br/> + + + The following css and scripts have to be included: + <pre> +<link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/> +<script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/> +<script src="/yui/element/element-min.js" type="text/javascript"/> +<script src="/yui/container/container-min.js" type="text/javascript"/> +<script src="/yui/dragdrop/dragdrop-min.js" type="text/javascript"/> +<script src="/yui/resize/resize-min.js" type="text/javascript"/> +<script src="/yui/utilities/utilities.js" type="text/javascript"/> +<script src="/scripts/overlay.js" type="text/javascript"/> + </pre> + <br/> + <br/> + e.g. + <pre> +... + <body> + <div style="display: none"> + <div id="myOverlayBody">body</div> + </div> + <div> + <a href="#" onclick="Overlay.show($('#myOverlayBody'), 'header', '20em', '10em');">click here to add the overlay </a> <br/> + </div> + </body> +... + </pre> + </div> + + </div> +</div> +<!-- // content --> + +</body> +</html> + http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml new file mode 100644 index 0000000..05f2752 --- /dev/null +++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml @@ -0,0 +1,351 @@ +<?xml version='1.0'?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> + +<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> +<head> +<title>panel-thumbnail - example</title> + + <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> + + <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> + <script src="/jquery/jquery.menu.js" type="text/javascript"></script> + <script src="/jquery/jquery.panel.js" type="text/javascript"></script> + +</head> + +<body> + +<!-- header --> +<div id="tx-header"> + <!-- system --> + <div id="tx-system"> + + <!-- global search --> + <div id="tx-globalsearch"> + <form action="/globalsearch/"> + <fieldset> + <input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/> + </fieldset> + </form> + </div> + + <!-- user information --> + <div id="tx-login"> + <a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span> + </div> + + <div id="tx-logo"><a href=""></a></div> + + <!-- main menu --> + <div id="tx-menu"> + <ol> + <li><a href="">Dashboard</a></li> + <li><a href="">Modulgruppe 1</a> + <ol> + <li><a href="">Submenu 1</a></li> + <li><a href="">Submenu 2</a></li> + <li><a href="">Submenu 3</a></li> + <li><a href="">Submenu 4</a></li> + </ol> + </li> + <li><a href="">Modulgruppe 2</a> + <ol> + <li><a href="">Submenu 1</a></li> + <li><a href="">Submenu 2</a></li> + </ol> + </li> + <li><a href="">Help</a> + <ol> + <li><a href="">About</a></li> + <li><a href="">What</a></li> + <li><a href="">Where</a></li> + </ol> + </li> + </ol> + </div> + </div> + <!-- //system --> + + <!-- module --> + <div id="tx-module"> + <!-- module title --> + <h1>panel-thumbnail example</h1> + + <!-- page editing actions --> + <div id="tx-page-actions"> + <ol> + <li><a href="" class="tx-button tx-button-generic">Page Editing</a></li> + <li><a href="" class="tx-button tx-button-generic-on">Preview</a></li> + <li><a href="" class="tx-button tx-button-generic">Page Data</a></li> + <li><a href="" class="tx-button tx-button-generic">Something</a></li> + </ol> + </div> + + </div> + <!-- // module --> + + <!-- moduletabs --> + <div id="tx-module-tabs"> + <!-- moduletabs --> + <ol> + <li class="tx-active"><a href="#">Assets</a></li> + <li><a href="#">Image Sets</a></li> + <li><a href="#">My Lightboxes</a></li> + <li class="tx-active"><a href="#">My Something</a></li> + <li><a href="#">My Everything</a></li> + </ol> + + <!-- --> + <div id="tx-contextual-buttons"> + <ol> + <li><a href="#" class="tx-button tx-button-remove">Remove</a></li> + <li><a href="#" class="tx-button tx-button-create">Create</a></li> + <li><a href="#" class="tx-button tx-button-modify">Modify</a></li> + <li><a href="#" class="tx-button tx-button-generic">Generic</a></li> + </ol> + </div> + </div> + <!-- // moduletabs --> + + <!-- moduleoptions --> + <div id="tx-module-options"> + <ol> + <li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li> + <li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li> + <li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li> + + <li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li> + <li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li> + <li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li> + </ol> + + </div> + <!-- // moduleoptions --> +</div> +<!-- // header --> + + +<!-- panel --> +<div class="tx-panel"> +<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes --> + <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3> + + <div class="tx-panel-window"> + <!-- panel icons --> + <div class="tx-tab-buttons"> + + </div> + + <div class="tx-panel-tabs"> + <div> + <form action="" method="post"> + <fieldset> + <label> + <input type="submit" value="" class="tx-icon tx-icon-search"/> + <input type="text" value="search assets" /> + + </label> + </fieldset> + </form> + <!-- selected filter elements --> + <div class="tx-filter"> + + <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4> + <ol> + <!-- filter elements, tx-icon is floating right, must be at the first place --> + <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li> + <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li> + </ol> + </div> + + <!-- results from filter --> + <div class="tx-result"> + <!-- ul li contruct, only 2 levels supported --> + <ol> + <!-- main category--> + <li><a href="#">Type</a> + <ol> + <!-- sub category --> + <li><a href="#">Images (234)</a></li> + <li><a href="#">Videos (20)</a></li> + <li><a href="#">Flash (45)</a></li> + <li><a href="#">Documents (234)</a></li> + <li><a href="#">Images (234)</a></li> + </ol> + </li> + <!-- tx-open, open element icon, arrow down--> + <li class="tx-open"><a href="#">Taxonomy</a> + <ol> + <li><a href="#">Images (234)</a></li> + <li><a href="#">Videos (20)</a></li> + </ol> + </li> + <!-- li default shows an right arrow as background --> + <li><a href="#">Tags</a> + <ol> + <li><a href="#">Tiger (48)</a></li> + <li><a href="#">Animal (80)</a></li> + <li><a href="#">Africa (784)</a></li> + </ol> + </li> + <li><a href="#">Usage</a> + <ol> + <li><a href="#">Website (20)</a></li> + <li><a href="#">News (14)</a></li> + </ol> + </li> + <li><a href="#">Time</a> + <ol> + <li><a href="#">Yesterday (20)</a></li> + <li><a href="#">Last Week (14)</a></li> + <li><a href="#">Last Month (23)</a></li> + </ol> + </li> + <li><a href="#">Source</a> + <ol> + <li><a href="#">Flickr (14)</a></li> + <li><a href="#">Youtube (8)</a></li> + </ol> + </li> + </ol> + </div> + <!-- // tx-result --> + </div> + </div> + <!-- // tx-panel-detail --> + </div> + <!-- // tx-panel-window --> +</div> +<!-- // panel --> +<!-- content --> +<div id="tx-content"> + + <!-- list / thumbnail --> + <!-- tx-show-panel, left padding with a panel (if panel is available) --> + <div class="tx-list tx-show-panel"> + + <form action="" method="post"> + <fieldset> + <!-- tx-size1, tx-size2, tx-size3, different thumbnail sizes --> + <ol class="tx-size3"> + <li> + <!-- img.tx-height, portrait thumbnail format --> + <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> + <div> + <input type="checkbox" value="" /> + </div> + </li> + <li> + <!-- img.tx-width, landscape thumbnail format --> + <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> + <div> + <input type="checkbox" value="" /> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div> + <div> + <input type="checkbox" value="" /> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> + <div> + <input type="checkbox" value="" /> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> + <div> + <input type="checkbox" value="" /> + <!-- custom defined icons, tx-right, global for "float: right" --> + <span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 19.08.2009"></span> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div> + <div> + <input type="checkbox" value="" /> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div> + <div> + <input type="checkbox" value="" /> + <span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 17.07.2009"></span> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> + <div> + <input type="checkbox" value="" /> + <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 24.06.2009"></span> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> + <div> + <input type="checkbox" value="" /> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> + <div> + <input type="checkbox" value="" /> + <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 08.07.2009"></span> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> + <div> + <input type="checkbox" value="" /> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> + <div> + <input type="checkbox" value="" /> + <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 12.08.2009"></span> + </div> + </li> + <li> + <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div> + <div> + <input type="checkbox" value="" /> + </div> + </li> + </ol> + </fieldset> + </form> + + </div> + <!-- // list / thumbnail --> + +</div> +<!-- // content --> + +</body> +</html> + http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml new file mode 100644 index 0000000..ce4809d --- /dev/null +++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml @@ -0,0 +1,324 @@ +<?xml version='1.0'?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> + +<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> +<head> +<title>panel-tree - example</title> + + <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> + + <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> + <script src="/jquery/jquery.menu.js" type="text/javascript"></script> + <script src="/jquery/jquery.panel.js" type="text/javascript"></script> + + <style type="text/css"> + .col1 { + width: 7em; + } + + .col2 { + width: 6em; + } + </style> + +</head> + +<body> + +<!-- header --> +<div id="tx-header"> + <!-- system --> + <div id="tx-system"> + + <!-- global search --> + <div id="tx-globalsearch"> + <form action="/globalsearch/"> + <fieldset> + <input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/> + </fieldset> + </form> + </div> + + <!-- user information --> + <div id="tx-login"> + <a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span> + </div> + + <div id="tx-logo"><a href=""></a></div> + + <!-- main menu --> + <div id="tx-menu"> + <ol> + <li><a href="">Dashboard</a></li> + <li><a href="">Modulgruppe 1</a> + <ol> + <li><a href="">Submenu 1</a></li> + <li><a href="">Submenu 2</a></li> + <li><a href="">Submenu 3</a></li> + <li><a href="">Submenu 4</a></li> + </ol> + </li> + <li><a href="">Modulgruppe 2</a> + <ol> + <li><a href="">Submenu 1</a></li> + <li><a href="">Submenu 2</a></li> + </ol> + </li> + <li><a href="">Help</a> + <ol> + <li><a href="">About</a></li> + <li><a href="">What</a></li> + <li><a href="">Where</a></li> + </ol> + </li> + </ol> + </div> + </div> + <!-- //system --> + + <!-- module --> + <div id="tx-module"> + <!-- module title --> + <h1>panel-tree example</h1> + + <!-- page editing actions --> + <div id="tx-page-actions"> + <ol> + <li><a href="" class="tx-button tx-button-generic">Page Editing</a></li> + <li><a href="" class="tx-button tx-button-generic-on">Preview</a></li> + <li><a href="" class="tx-button tx-button-generic">Page Data</a></li> + <li><a href="" class="tx-button tx-button-generic">Something</a></li> + </ol> + </div> + + </div> + <!-- // module --> + + <!-- moduletabs --> + <div id="tx-module-tabs"> + <!-- moduletabs --> + <ol> + <li class="tx-active"><a href="#">Assets</a></li> + <li><a href="#">Image Sets</a></li> + <li><a href="#">My Lightboxes</a></li> + <li class="tx-active"><a href="#">My Something</a></li> + <li><a href="#">My Everything</a></li> + </ol> + + <!-- --> + <div id="tx-contextual-buttons"> + <ol> + <li><a href="#" class="tx-button tx-button-remove">Remove</a></li> + <li><a href="#" class="tx-button tx-button-create">Create</a></li> + <li><a href="#" class="tx-button tx-button-modify">Modify</a></li> + <li><a href="#" class="tx-button tx-button-generic">Generic</a></li> + </ol> + </div> + </div> + <!-- // moduletabs --> + + <!-- moduleoptions --> + <div id="tx-module-options"> + <ol> + <li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li> + <li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li> + <li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li> + + <li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li> + <li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li> + <li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li> + </ol> + + </div> + <!-- // moduleoptions --> +</div> +<!-- // header --> + +<!-- panel --> +<div class="tx-panel"> +<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes --> + <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3> + + <div class="tx-panel-window"> + <!-- panel icons --> + <div class="tx-tab-buttons"> + + </div> + + <div class="tx-panel-tabs"> + <div> + <form action="" method="post"> + <fieldset> + <label> + <input type="submit" value="" class="tx-icon tx-icon-search"/> + <input type="text" value="search assets" /> + + </label> + </fieldset> + </form> + <!-- selected filter elements --> + <div class="tx-filter"> + + <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4> + <ol> + <!-- filter elements, tx-icon is floating right, must be at the first place --> + <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li> + <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li> + </ol> + </div> + + <!-- results from filter --> + <div class="tx-result"> + <!-- ul li contruct, only 2 levels supported --> + <ol> + <!-- main category--> + <li><a href="#">Type</a> + <ol> + <!-- sub category --> + <li><a href="#">Images (234)</a></li> + <li><a href="#">Videos (20)</a></li> + <li><a href="#">Flash (45)</a></li> + <li><a href="#">Documents (234)</a></li> + <li><a href="#">Images (234)</a></li> + </ol> + </li> + <!-- tx-open, open element icon, arrow down--> + <li class="tx-open"><a href="#">Taxonomy</a> + <ol> + <li><a href="#">Images (234)</a></li> + <li><a href="#">Videos (20)</a></li> + </ol> + </li> + <!-- li default shows an right arrow as background --> + <li><a href="#">Tags</a> + <ol> + <li><a href="#">Tiger (48)</a></li> + <li><a href="#">Animal (80)</a></li> + <li><a href="#">Africa (784)</a></li> + </ol> + </li> + <li><a href="#">Usage</a> + <ol> + <li><a href="#">Website (20)</a></li> + <li><a href="#">News (14)</a></li> + </ol> + </li> + <li><a href="#">Time</a> + <ol> + <li><a href="#">Yesterday (20)</a></li> + <li><a href="#">Last Week (14)</a></li> + <li><a href="#">Last Month (23)</a></li> + </ol> + </li> + <li><a href="#">Source</a> + <ol> + <li><a href="#">Flickr (14)</a></li> + <li><a href="#">Youtube (8)</a></li> + </ol> + </li> + </ol> + </div> + <!-- // tx-result --> + </div> + </div> + <!-- // tx-panel-detail --> + </div> + <!-- // tx-panel-window --> +</div> +<!-- // panel --> + +<!-- content --> +<div id="tx-content"> + + <!-- tree view --> + <!-- aligned right --> + <div class="tx-tree tx-show-panel"> + + <!-- contains the tree --> + <div class="tx-tree-view"> + <table class="tx-table"> + <tr> + <th></th> + <th>Concepts</th> + <th class="col1">Tagged pages</th> + <th class="col2">In concepts</th> + </tr> + </table> + <!-- example folder structure --> + <ol> + <!-- tx-open, shows the arrow down on a "open" element --> + <li class="tx-open"> + <!-- li content is wrapped inside a div to avoid some javascript event problems, eg. drag drop events can be assigned to the div instead --> + <div> + <!-- span class tx-info should be correspond with the table th widths --> + <span class="tx-info"><span class="col1">9</span><span class="col2">3</span></span> + <!-- drag icon --> + <div title=" Themes..." class="tx-icon tx-icon-drag">drag me</div> + <!-- checkbox --> + <input type="checkbox" /><!-- name --><a href=""></a><a href="">Themes...</a> + </div> + <!-- subelements of an li --> + <ol> + <li class="tx-open"><div> + <span class="tx-info"><span class="col1">29</span><span class="col2">2</span></span> + <div title=" Where" class="tx-icon tx-icon-drag">drag me</div> + <input type="checkbox" /><a href=""></a><a href=""> Where</a> + </div> + <ol> + <!-- li default shows an right arrow as background --> + <li><div> + <span class="tx-info"><span class="col1">51</span><span class="col2">5</span></span> + <div title="Africa" class="tx-icon tx-icon-drag">drag me</div> + <input type="checkbox" /><a href=""></a><a href="">Africa</a> + </div></li> + <li><div> + <span class="tx-info"><span class="col1">8</span><span class="col2">6</span></span> + <div title="Asia" class="tx-icon tx-icon-drag">drag me</div> + <input type="checkbox" /><a href=""></a><a href="">Asia</a> + </div></li> + <!-- tx-nobg, shows no arrow on a element, e.g. element has no subelements --> + <li class="tx-nobg"><div> + <span class="tx-info"><span class="col1">70</span><span class="col2">2</span></span> + <div title="Ecoregions" class="tx-icon tx-icon-drag">drag me</div> + <input type="checkbox" /><a href=""></a><a href="">Ecoregions</a> + </div></li> + </ol> + </li> + </ol> + </li> + </ol> + <!-- // example folder structure--> + </div> + <!-- // tree view --> + + </div> + <!-- // tree --> + +</div> +<!-- // content --> + +</body> +</html> + http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml new file mode 100644 index 0000000..2c762d3 --- /dev/null +++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml @@ -0,0 +1,235 @@ +<?xml version='1.0'?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> + +<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> +<head> +<title>panel - example</title> + + <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> + <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" /> + + <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> + <script src="/jquery/jquery.panel.js" type="text/javascript"></script> + +</head> + +<body> + +<!-- panel --> +<div class="tx-panel demo" id="tx-panel"> +<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes --> + <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3> + + <div class="tx-panel-window"> + <!-- panel icons --> + <div class="tx-tab-buttons"> + + </div> + + <div class="tx-panel-tabs"> + <div> + <form action="" method="post"> + <fieldset> + <label> + <input type="submit" value="" class="tx-icon tx-icon-search"/> + <input type="text" value="search assets" /> + + </label> + </fieldset> + </form> + <!-- selected filter elements --> + <div class="tx-filter"> + + <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4> + <ol> + <!-- filter elements, tx-icon is floating right, must be at the first place --> + <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li> + <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li> + </ol> + </div> + + <!-- results from filter --> + <div class="tx-result"> + <!-- ul li contruct, only 2 levels supported --> + <ol> + <!-- main category--> + <li><a href="#">Type</a> + <ol> + <!-- sub category --> + <li><a href="#">Images (234)</a></li> + <li><a href="#">Videos (20)</a></li> + <li><a href="#">Flash (45)</a></li> + <li><a href="#">Documents (234)</a></li> + <li><a href="#">Images (234)</a></li> + </ol> + </li> + <!-- tx-open, open element icon, arrow down--> + <li class="tx-open"><a href="#">Taxonomy</a> + <ol> + <li><a href="#">Images (234)</a></li> + <li><a href="#">Videos (20)</a></li> + </ol> + </li> + <!-- li default shows an right arrow as background --> + <li><a href="#">Tags</a> + <ol> + <li><a href="#">Tiger (48)</a></li> + <li><a href="#">Animal (80)</a></li> + <li><a href="#">Africa (784)</a></li> + </ol> + </li> + <li><a href="#">Usage</a> + <ol> + <li><a href="#">Website (20)</a></li> + <li><a href="#">News (14)</a></li> + </ol> + </li> + <li><a href="#">Time</a> + <ol> + <li><a href="#">Yesterday (20)</a></li> + <li><a href="#">Last Week (14)</a></li> + <li><a href="#">Last Month (23)</a></li> + </ol> + </li> + <li><a href="#">Source</a> + <ol> + <li><a href="#">Flickr (14)</a></li> + <li><a href="#">Youtube (8)</a></li> + </ol> + </li> + </ol> + </div> + <!-- // tx-result --> + </div> + </div> + <!-- // tx-panel-detail --> + </div> + <!-- // tx-panel-window --> +</div> +<!-- // panel --> + +<!-- content --> +<div id="tx-content" class="demo"> + + <div class="tx-edit tx-show-panel"> + + + <h3>Description</h3> + The panel on the left side is a <div> with the class <strong>tx-panel</strong>. + <br/> + <br/> + The panel needs the jquery.panel.js, which defines the accordion effects. + <br/> + The show and hide functionality of the panel is currently only working on the <strong>div.tx-tree</strong>, <strong>div.tx-list</strong> and <strong>div.tx-edit</strong>. + <br/> + <br/> + <br/> + + <h3>Example code</h3> + + <pre> +<!-- panel --> +<div class="tx-panel"> +<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes --> + <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3> + + <div class="tx-panel-window"> + <!-- panel icons --> + <div class="tx-tab-buttons"> + + </div> + + <div class="tx-panel-tabs"> + <div> + <form action="" method="post"> + <fieldset> + <label> + <input type="submit" value="" class="tx-icon tx-icon-search"/> + <input type="text" value="search assets" /> + + </label> + </fieldset> + </form> + <!-- selected filter elements --> + <div class="tx-filter"> + + <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4> + <ol> + <!-- filter elements, tx-icon is floating right, must be at the first place --> + <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li> + <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li> + </ol> + </div> + + <!-- results from filter --> + <div class="tx-result"> + <!-- ul li contruct, only 2 levels supported --> + <ol> + <!-- main category--> + <li><a href="#">Type</a> + <ol> + <!-- sub category --> + <li><a href="#">Images (234)</a></li> + <li><a href="#">Videos (20)</a></li> + <li><a href="#">Flash (45)</a></li> + <li><a href="#">Documents (234)</a></li> + <li><a href="#">Images (234)</a></li> + </ol> + </li> + <!-- tx-open, open element icon, arrow down--> + <li class="tx-open"><a href="#">Taxonomy</a> + <ol> + <li><a href="#">Images (234)</a></li> + <li><a href="#">Videos (20)</a></li> + </ol> + </li> + <!-- li default shows an right arrow as background --> + <li><a href="#">Tags</a> + <ol> + <li><a href="#">Tiger (48)</a></li> + <li><a href="#">Animal (80)</a></li> + <li><a href="#">Africa (784)</a></li> + </ol> + </li> + </ol> + </div> + <!-- // tx-result --> + </div> + </div> + <!-- // tx-panel-detail --> + </div> + <!-- // tx-panel-window --> +</div> +<!-- // panel --> + </pre> + + </div> + +</div> +<!-- // content --> + +</body> +</html> + http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css ---------------------------------------------------------------------- diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css new file mode 100644 index 0000000..22c8bb7 --- /dev/null +++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css @@ -0,0 +1,64 @@ +/* + * + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + * +*/ + +#demo { + padding-left: 1.5em; + padding-top: 1.5em; +} + +#demo ol { + margin: 0; + padding: 0; + list-style: none; + clear: both; +} + +#demo ol li { + float: left; + clear: right; + margin: 1em; +} + +#demo h3 { + clear: both; + margin: 0; + padding: 1em 0em; + +} + +#demo h4 { + font-weight: normal; + clear: both; + margin: 0; + padding-left: 1em; +} + +#demo .demo-bg { + background-color: #34C0DA; +} + +#tx-content.demo { + top: 1em; +} + +#tx-panel.demo { + top: 1em; +}
