├── .classpath ├── .gitignore ├── .project ├── .settings ├── org.eclipse.jdt.core.prefs ├── org.eclipse.m2e.core.prefs └── org.maven.ide.eclipse.prefs ├── README.md ├── assembly └── webapp.xml ├── pom.xml └── src └── main ├── java ├── applications2 │ ├── NavbarComposer.java │ ├── SidebarComposer.java │ └── TaskComposer.java └── test │ ├── SyntaxHelper.java │ ├── UnicodeReader.java │ ├── ZKLessComposer.java │ └── ZKResourceLoader.java └── webapp ├── META-INF └── MANIFEST.MF ├── WEB-INF ├── web.servlet-3.xml ├── web.xml └── zk.xml ├── applications ├── bootstrap │ ├── css │ │ ├── bootstrap-responsive.css │ │ ├── bootstrap-responsive.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ ├── img │ │ ├── glyphicons-halflings-white.png │ │ └── glyphicons-halflings.png │ └── js │ │ ├── bootstrap.js │ │ └── bootstrap.min.js ├── css │ ├── content-header.css.dsp │ ├── content-header.less │ ├── grey.css.dsp │ ├── grey.less │ ├── index.css.dsp │ ├── index.less │ ├── light-blue.css.dsp │ ├── light-blue.less │ ├── red.css.dsp │ ├── red.less │ ├── search.css.dsp │ ├── search.less │ ├── sidebar.css.dsp │ ├── sidebar.less │ ├── user-nav.css.dsp │ └── user-nav.less ├── img │ ├── av1.jpg │ ├── av2.jpg │ ├── av3.jpg │ └── top_zk_logo.png ├── index.zul ├── js │ ├── excanvas.min.js │ ├── jquery.flot.min.js │ └── jquery.peity.min.js └── zk │ └── content.zul ├── applications2 ├── assets │ └── avatars │ │ ├── avatar.png │ │ ├── avatar1.png │ │ ├── avatar2.png │ │ ├── avatar3.png │ │ ├── avatar4.png │ │ ├── avatar5.png │ │ └── user.jpg ├── bootstrap │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── js │ │ ├── bootstrap.js │ │ └── bootstrap.min.js │ └── less │ │ ├── alerts.less │ │ ├── badges.less │ │ ├── bootstrap.less │ │ ├── breadcrumbs.less │ │ ├── button-groups.less │ │ ├── buttons.less │ │ ├── carousel.less │ │ ├── close.less │ │ ├── code.less │ │ ├── component-animations.less │ │ ├── dropdowns.less │ │ ├── forms.less │ │ ├── glyphicons.less │ │ ├── grid.less │ │ ├── input-groups.less │ │ ├── jumbotron.less │ │ ├── labels.less │ │ ├── list-group.less │ │ ├── media.less │ │ ├── mixins.less │ │ ├── modals.less │ │ ├── navbar.less │ │ ├── navs.less │ │ ├── normalize.less │ │ ├── pager.less │ │ ├── pagination.less │ │ ├── panels.less │ │ ├── popovers.less │ │ ├── print.less │ │ ├── progress-bars.less │ │ ├── responsive-utilities.less │ │ ├── scaffolding.less │ │ ├── tables.less │ │ ├── theme.less │ │ ├── thumbnails.less │ │ ├── tooltip.less │ │ ├── type.less │ │ ├── utilities.less │ │ ├── variables.less │ │ └── wells.less ├── breadcrumbs.zul ├── content │ ├── alert.zul │ ├── conversation.zul │ ├── domain.zul │ ├── infobox.zul │ ├── piechart.zul │ ├── saleschart.zul │ └── tabbox.zul ├── css │ └── fonts.css ├── fonts │ ├── DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff │ └── cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff ├── index.zul ├── js │ ├── excanvas.min.js │ ├── jquery.easy-pie-chart.min.js │ ├── jquery.flot.min.js │ ├── jquery.flot.pie.js │ └── jquery.sparkline.min.js ├── less │ ├── import │ │ ├── 3rdparty.less │ │ ├── breadcrumbs.less │ │ ├── button.less │ │ ├── general.less │ │ ├── infobox.less │ │ ├── label-badge.less │ │ ├── layout.less │ │ ├── mesh.less │ │ ├── mixins.less │ │ ├── navbar.less │ │ ├── popup.less │ │ ├── progressmeter.less │ │ ├── sidebar.less │ │ ├── tooltip.less │ │ ├── utility.less │ │ ├── variables.less │ │ └── zk │ │ │ ├── _header.less │ │ │ ├── _zkmixins.less │ │ │ └── _zkvariables.less │ ├── index.css.dsp │ └── index.less ├── navbar.zul ├── page.zul └── sidebar.zul ├── bootstrap └── v3 │ ├── bootstrap │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ └── js │ │ ├── bootstrap.js │ │ └── bootstrap.min.js │ ├── index.zul │ └── zk │ ├── button-groups.zul │ ├── js │ ├── button-bs.js │ ├── navbar-bs.js │ └── panel-bs.js │ ├── navbar.zul │ └── panel.zul └── zkless └── index.zul /.classpath: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | target 2 | -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | ui-examples 4 | 5 | 6 | 7 | 8 | 9 | org.eclipse.wst.jsdt.core.javascriptValidator 10 | 11 | 12 | 13 | 14 | org.eclipse.wst.common.project.facet.core.builder 15 | 16 | 17 | 18 | 19 | org.eclipse.jdt.core.javabuilder 20 | 21 | 22 | 23 | 24 | org.maven.ide.eclipse.maven2Builder 25 | 26 | 27 | 28 | 29 | org.eclipse.wst.validation.validationbuilder 30 | 31 | 32 | 33 | 34 | org.eclipse.m2e.core.maven2Builder 35 | 36 | 37 | 38 | 39 | 40 | org.eclipse.jem.workbench.JavaEMFNature 41 | org.eclipse.wst.common.modulecore.ModuleCoreNature 42 | org.eclipse.jdt.core.javanature 43 | org.maven.ide.eclipse.maven2Nature 44 | org.eclipse.m2e.core.maven2Nature 45 | org.eclipse.wst.common.project.facet.core.nature 46 | org.eclipse.wst.jsdt.core.jsNature 47 | 48 | 49 | -------------------------------------------------------------------------------- /.settings/org.eclipse.jdt.core.prefs: -------------------------------------------------------------------------------- 1 | eclipse.preferences.version=1 2 | org.eclipse.jdt.core.compiler.codegen.inlineJsrBytecode=enabled 3 | org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.5 4 | org.eclipse.jdt.core.compiler.codegen.unusedLocal=preserve 5 | org.eclipse.jdt.core.compiler.compliance=1.5 6 | org.eclipse.jdt.core.compiler.debug.lineNumber=generate 7 | org.eclipse.jdt.core.compiler.debug.localVariable=generate 8 | org.eclipse.jdt.core.compiler.debug.sourceFile=generate 9 | org.eclipse.jdt.core.compiler.problem.assertIdentifier=error 10 | org.eclipse.jdt.core.compiler.problem.enumIdentifier=error 11 | org.eclipse.jdt.core.compiler.problem.forbiddenReference=warning 12 | org.eclipse.jdt.core.compiler.source=1.5 13 | -------------------------------------------------------------------------------- /.settings/org.eclipse.m2e.core.prefs: -------------------------------------------------------------------------------- 1 | activeProfiles= 2 | eclipse.preferences.version=1 3 | resolveWorkspaceProjects=false 4 | version=1 5 | -------------------------------------------------------------------------------- /.settings/org.maven.ide.eclipse.prefs: -------------------------------------------------------------------------------- 1 | #Wed Jul 13 15:02:00 CST 2011 2 | activeProfiles= 3 | eclipse.preferences.version=1 4 | fullBuildGoals=process-test-resources 5 | resolveWorkspaceProjects=true 6 | resourceFilterGoals=process-resources resources\:testResources 7 | skipCompilerPlugin=true 8 | version=1 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ZK UI-Examples Demo 2 | ============================== 3 | 4 | This project is a host of the demo code for demonstrating ZK 7.0.0 with Bootstrap & CSS 3, distributed under [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0) (ZK example only). 5 | 6 | About the layout design: 7 | 8 | * Applications1 is owned by [diablo9983](https://wrapbootstrap.com/theme/unicorn-admin-template-WB0F35928) 9 | 10 | * Applications2 is owned by [EasyMind](https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR) 11 | 12 | 13 | You can download these files for learning purposes and try out the code. To use these design layouts in your own project, please contact the respective designers directly and purchase the appropriate licenses. 14 | 15 | Here is the [application1 demo article](http://blog.zkoss.org/index.php/2013/08/13/zk-7-new-theme-system-with-bootstrap-css-3/) 16 | 17 | Here is the [application2 demo article](http://books.zkoss.org/wiki/Small_Talks/2013/November/Customizing_Bootstrap_Theme_Demonstration) 18 | 19 | 20 | ###License and Copyright 21 | 22 | * Demo Code - [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0) 23 | * Unicorn Admin Template – [diablo9983](https://wrapbootstrap.com/theme/unicorn-admin-template-WB0F35928) 24 | * Ace - Responsive Admin Template - [EasyMind](https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR) -------------------------------------------------------------------------------- /assembly/webapp.xml: -------------------------------------------------------------------------------- 1 | 5 | webapp 6 | 7 | zip 8 | 9 | 10 | 11 | ${project.basedir}/src/main/java 12 | /${project.artifactId}/src 13 | 14 | 15 | ${project.basedir}/src/main/webapp 16 | /${project.artifactId}/WebContent 17 | 18 | 19 | 20 | 21 | ${project.build.directory}/${project.artifactId}.war 22 | / 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/main/java/applications2/NavbarComposer.java: -------------------------------------------------------------------------------- 1 | package applications2; 2 | 3 | import org.zkoss.zk.ui.Component; 4 | import org.zkoss.zk.ui.HtmlBasedComponent; 5 | import org.zkoss.zk.ui.event.OpenEvent; 6 | import org.zkoss.zk.ui.select.SelectorComposer; 7 | import org.zkoss.zk.ui.select.annotation.Listen; 8 | import org.zkoss.zk.ui.select.annotation.Wire; 9 | import org.zkoss.zul.A; 10 | import org.zkoss.zul.Popup; 11 | 12 | public class NavbarComposer extends SelectorComposer { 13 | 14 | @Wire 15 | A atask, anoti, amsg; 16 | 17 | public void doAfterCompose(Component comp) throws Exception { 18 | super.doAfterCompose(comp); 19 | } 20 | 21 | @Listen("onOpen = #taskpp") 22 | public void toggleTaskPopup(OpenEvent event) { 23 | toggleOpenClass(event.isOpen(), atask); 24 | } 25 | 26 | @Listen("onOpen = #notipp") 27 | public void toggleNotiPopup(OpenEvent event) { 28 | toggleOpenClass(event.isOpen(), anoti); 29 | } 30 | 31 | @Listen("onOpen = #msgpp") 32 | public void toggleMsgPopup(OpenEvent event) { 33 | toggleOpenClass(event.isOpen(), amsg); 34 | } 35 | 36 | // Toggle open class to the component 37 | public void toggleOpenClass(Boolean open, Component component) { 38 | HtmlBasedComponent comp = (HtmlBasedComponent) component; 39 | String scls = comp.getSclass(); 40 | if (open) { 41 | comp.setSclass(scls + " open"); 42 | } else { 43 | comp.setSclass(scls.replace(" open", "")); 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/main/java/applications2/SidebarComposer.java: -------------------------------------------------------------------------------- 1 | package applications2; 2 | 3 | import org.zkoss.zk.ui.Component; 4 | import org.zkoss.zk.ui.select.SelectorComposer; 5 | import org.zkoss.zk.ui.select.annotation.Listen; 6 | import org.zkoss.zk.ui.select.annotation.Wire; 7 | import org.zkoss.zk.ui.util.Clients; 8 | import org.zkoss.zkmax.zul.Navbar; 9 | import org.zkoss.zkmax.zul.Navitem; 10 | import org.zkoss.zul.A; 11 | import org.zkoss.zul.Div; 12 | import org.zkoss.zul.Hlayout; 13 | 14 | public class SidebarComposer extends SelectorComposer { 15 | 16 | @Wire 17 | Hlayout main; 18 | @Wire 19 | Div sidebar; 20 | @Wire 21 | Navbar navbar; 22 | @Wire 23 | Navitem calitem; 24 | @Wire 25 | A toggler; 26 | 27 | 28 | public void doAfterCompose(Component comp) throws Exception { 29 | super.doAfterCompose(comp); 30 | } 31 | 32 | // Toggle sidebar to collapse or expand 33 | @Listen("onClick = #toggler") 34 | public void toggleSidebarCollapsed() { 35 | if (navbar.isCollapsed()) { 36 | sidebar.setSclass("sidebar"); 37 | navbar.setCollapsed(false); 38 | calitem.setTooltip("calpp, position=end_center, delay=0"); 39 | toggler.setIconSclass("z-icon-angle-double-left"); 40 | } else { 41 | sidebar.setSclass("sidebar sidebar-min"); 42 | navbar.setCollapsed(true); 43 | calitem.setTooltip(""); 44 | toggler.setIconSclass("z-icon-angle-double-right"); 45 | } 46 | // Force the hlayout contains sidebar to recalculate its size 47 | Clients.resize(sidebar.getRoot().query("#main")); 48 | } 49 | } -------------------------------------------------------------------------------- /src/main/java/applications2/TaskComposer.java: -------------------------------------------------------------------------------- 1 | package applications2; 2 | 3 | import java.util.List; 4 | 5 | import org.zkoss.zk.ui.Component; 6 | import org.zkoss.zk.ui.event.DropEvent; 7 | import org.zkoss.zk.ui.select.SelectorComposer; 8 | import org.zkoss.zk.ui.select.annotation.Listen; 9 | 10 | public class TaskComposer extends SelectorComposer { 11 | 12 | Component comp; 13 | List children; 14 | 15 | public void doAfterCompose(Component comp) throws Exception { 16 | super.doAfterCompose(comp); 17 | this.comp = comp; 18 | children = comp.getChildren(); 19 | } 20 | 21 | @Listen("onDrop = listitem") 22 | public void doDrop(DropEvent event) { 23 | Component droped = event.getTarget(); 24 | Component dragged = event.getDragged(); 25 | if (children.indexOf(dragged) > children.indexOf(droped)) { 26 | comp.insertBefore(dragged, droped); 27 | } else { 28 | comp.insertBefore(dragged, droped.getNextSibling()); 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/main/java/test/SyntaxHelper.java: -------------------------------------------------------------------------------- 1 | package test; 2 | 3 | 4 | import java.util.Scanner; 5 | import java.util.regex.Matcher; 6 | import java.util.regex.Pattern; 7 | 8 | import org.zkoss.maven.yuicompressor.util.Comments; 9 | 10 | /** SyntaxHelper.java. 11 | 12 | Purpose: 13 | 14 | Description: 15 | 16 | History: 17 | 3:10:24 PM May 17, 2013, Created by jumperchen 18 | 19 | Copyright (C) 2013 Potix Corporation. All Rights Reserved. 20 | */ 21 | 22 | /** 23 | * @author jumperchen 24 | * 25 | */ 26 | public class SyntaxHelper { 27 | private static String FAKE_PROPERTY = "__faker___:"; 28 | private static String fixSyntaxIssue(String source) { 29 | try { 30 | source = Comments.removeComment(source); 31 | } catch (IllegalStateException ex) { 32 | log("clear comment failed:" + ex.getMessage() 33 | + ":skip clear comment step"); 34 | } 35 | StringBuffer sb = new StringBuffer(1024); 36 | Scanner scan = new Scanner(source); 37 | boolean hasProp = false; 38 | while (scan.hasNext()) { 39 | String line = scan.nextLine().trim(); 40 | int start = line.indexOf(":"); 41 | int end = line.indexOf("${"); 42 | 43 | if (start > 0 && end >= 0 && start < end && line.endsWith(",")) 44 | hasProp = true; 45 | 46 | // syntax issue with less but works in zk EL function 47 | if (end >= 0 && start >= -1 && start >= end) { 48 | if (hasProp && (line.endsWith(",") || line.endsWith(";"))) { 49 | sb.append(line).append("\n"); 50 | continue; 51 | } 52 | if (!line.endsWith(";")) { 53 | if (!line.endsWith(",")) 54 | log(line + "\n\tmissing ',' or ';' signature at the end of line"); 55 | continue; 56 | } 57 | sb.append(FAKE_PROPERTY); 58 | } 59 | if (line.endsWith(";")) 60 | hasProp = false; // reset 61 | sb.append(line).append("\n"); 62 | } 63 | scan.close(); 64 | return sb.toString(); 65 | } 66 | 67 | public static String encodeDsp(String source) { 68 | source = fixSyntaxIssue(source); 69 | StringBuffer sb = new StringBuffer(); 70 | 71 | /* 1. Resolve import starts with ~./ */ 72 | Matcher m = Pattern.compile("@import[\\s]{1,}[\"']{1}~./").matcher( 73 | source); 74 | while (m.find()) { 75 | String s = m.group(); 76 | int quoteIndex = s.indexOf("~"); 77 | String quote = s.substring(quoteIndex - 1, quoteIndex); 78 | s = s.replaceAll("[\"']{1}~./", quote + "classpath:web/"); 79 | m.appendReplacement(sb, s); 80 | } 81 | m.appendTail(sb); 82 | source = sb.toString(); 83 | sb.delete(0, sb.length()); 84 | 85 | /* 2. Escape like @{XXX} */ 86 | m = Pattern.compile("@\\{([^\\}]+)\\}").matcher(source); 87 | while (m.find()) { 88 | String s = m.group(); 89 | s = s.replaceAll("@\\{", "__LESSOPEN__"); 90 | s = s.replaceAll("\\}", "__LESSEND__"); 91 | m.appendReplacement(sb, s); 92 | } 93 | m.appendTail(sb); 94 | source = sb.toString(); 95 | sb.delete(0, sb.length()); 96 | 97 | /* 3. Resolve EL function in url() like url(${c:encodeThemeURL}) */ 98 | m = Pattern.compile("url\\(\\$\\{([^\\}]+)\\}\\)").matcher(source); 99 | while (m.find()) { 100 | String s = m.group(); 101 | s = s.replaceAll("\\$\\{", "__EL__"); 102 | s = s.replaceAll(":", "__ELSP__"); 103 | s = s.replaceAll("\\}", "__ELEND__"); 104 | s = "~\"" + s + "\""; 105 | m.appendReplacement(sb, s); 106 | } 107 | m.appendTail(sb); 108 | source = sb.toString(); 109 | sb.delete(0, sb.length()); 110 | 111 | /* 4. Resolve EL function like ${t:applyCSS3} */ 112 | m = Pattern.compile("\\$\\{([^\\}]+)\\}").matcher(source); 113 | while (m.find()) { 114 | String s = m.group(); 115 | s = s.replaceAll("\\$\\{", "__EL__"); 116 | s = s.replaceAll(":", "__ELSP__"); 117 | s = s.replaceAll("\\}", "__ELEND__"); 118 | m.appendReplacement(sb, s); 119 | } 120 | m.appendTail(sb); 121 | source = sb.toString(); 122 | sb.delete(0, sb.length()); 123 | 124 | /* 5. Resolve DSP declaration like <@taglib @> */ 125 | m = Pattern.compile("<(.*)>").matcher(source); 126 | while (m.find()) { 127 | String s = m.group(); 128 | s = "/*__TAGLIB " + s + " TAGLIB__*/"; 129 | m.appendReplacement(sb, s); 130 | } 131 | m.appendTail(sb); 132 | 133 | return sb.toString().replaceAll("__LESSOPEN__", "@\\{") 134 | .replaceAll("__LESSEND__", "\\}"); 135 | } 136 | 137 | public static String decodeDsp(String source) { 138 | /* 1. Restore DSP declaration like <@taglib @> */ 139 | return source.replaceAll("\\/\\*__TAGLIB ", "") 140 | .replaceAll(" TAGLIB__\\*\\/", "") 141 | /* 2. Restore EL function like ${c:encodeThemeURL} */ 142 | .replaceAll("__EL__", "\\$\\{").replaceAll("__ELSP__", ":") 143 | .replaceAll("__ELEND__", "\\}") 144 | .replaceAll(FAKE_PROPERTY, ""); 145 | } 146 | 147 | private static void log(Object... os) { 148 | for (Object o : os) { 149 | System.out.print(o + (os[os.length - 1] != o ? "," : "")); 150 | } 151 | System.out.println(); 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /src/main/java/test/UnicodeReader.java: -------------------------------------------------------------------------------- 1 | package test; 2 | 3 | import java.io.IOException; 4 | import java.io.InputStream; 5 | import java.io.InputStreamReader; 6 | import java.io.PushbackInputStream; 7 | import java.nio.charset.Charset; 8 | 9 | /** 10 | * @author jumperchen 11 | * 12 | */ 13 | public class UnicodeReader extends InputStreamReader { 14 | PushbackInputStream internalIn; 15 | InputStreamReader internalIn2 = null; 16 | String defaultEnc; 17 | 18 | private static final int BOM_SIZE = 4; 19 | 20 | /** 21 | * 22 | * @param in 23 | * inputstream to be read 24 | * @param defaultEnc 25 | * default encoding if stream does not have BOM marker. Give NULL 26 | * to use system-level default. 27 | */ 28 | public UnicodeReader(InputStream in, String defaultEnc) { 29 | super(in); 30 | internalIn = new PushbackInputStream(in, BOM_SIZE); 31 | this.defaultEnc = defaultEnc; 32 | } 33 | 34 | public UnicodeReader(InputStream in) { 35 | this(in, Charset.defaultCharset().name()); 36 | } 37 | 38 | public String getDefaultEncoding() { 39 | return defaultEnc; 40 | } 41 | 42 | /** 43 | * Get stream encoding or NULL if stream is uninitialized. Call init() or 44 | * read() method to initialize it. 45 | */ 46 | public String getEncoding() { 47 | if (internalIn2 == null) 48 | return null; 49 | return internalIn2.getEncoding(); 50 | } 51 | 52 | /** 53 | * Read-ahead four bytes and check for BOM marks. Extra bytes are unread 54 | * back to the stream, only BOM bytes are skipped. 55 | */ 56 | protected void init() throws IOException { 57 | if (internalIn2 != null) 58 | return; 59 | 60 | String encoding; 61 | byte bom[] = new byte[BOM_SIZE]; 62 | int n, unread; 63 | n = internalIn.read(bom, 0, bom.length); 64 | 65 | if ((bom[0] == (byte) 0x00) && (bom[1] == (byte) 0x00) 66 | && (bom[2] == (byte) 0xFE) && (bom[3] == (byte) 0xFF)) { 67 | encoding = "UTF-32BE"; 68 | unread = n - 4; 69 | } else if ((bom[0] == (byte) 0xFF) && (bom[1] == (byte) 0xFE) 70 | && (bom[2] == (byte) 0x00) && (bom[3] == (byte) 0x00)) { 71 | encoding = "UTF-32LE"; 72 | unread = n - 4; 73 | } else if ((bom[0] == (byte) 0xEF) && (bom[1] == (byte) 0xBB) 74 | && (bom[2] == (byte) 0xBF)) { 75 | encoding = "UTF-8"; 76 | unread = n - 3; 77 | } else if ((bom[0] == (byte) 0xFE) && (bom[1] == (byte) 0xFF)) { 78 | encoding = "UTF-16BE"; 79 | unread = n - 2; 80 | } else if ((bom[0] == (byte) 0xFF) && (bom[1] == (byte) 0xFE)) { 81 | encoding = "UTF-16LE"; 82 | unread = n - 2; 83 | } else { 84 | // Unicode BOM mark not found, unread all bytes 85 | encoding = defaultEnc; 86 | unread = n; 87 | } 88 | // System.out.println("read=" + n + ", unread=" + unread); 89 | 90 | if (unread > 0) 91 | internalIn.unread(bom, (n - unread), unread); 92 | 93 | // Use given encoding 94 | if (encoding == null) { 95 | internalIn2 = new InputStreamReader(internalIn); 96 | } else { 97 | internalIn2 = new InputStreamReader(internalIn, encoding); 98 | } 99 | } 100 | 101 | public void close() throws IOException { 102 | init(); 103 | internalIn2.close(); 104 | } 105 | 106 | public int read(char[] cbuf, int off, int len) throws IOException { 107 | init(); 108 | return internalIn2.read(cbuf, off, len); 109 | } 110 | 111 | } 112 | -------------------------------------------------------------------------------- /src/main/java/test/ZKLessComposer.java: -------------------------------------------------------------------------------- 1 | /** ZKLessComposer.java. 2 | 3 | Purpose: 4 | 5 | Description: 6 | 7 | History: 8 | 2:53:30 PM Jul 23, 2013, Created by jumperchen 9 | 10 | Copyright (C) 2013 Potix Corporation. All Rights Reserved. 11 | */ 12 | package test; 13 | 14 | import java.io.ByteArrayInputStream; 15 | import java.io.ByteArrayOutputStream; 16 | import java.io.InputStreamReader; 17 | import java.io.OutputStreamWriter; 18 | import org.apache.commons.io.IOUtils; 19 | import org.zkoss.util.media.AMedia; 20 | import org.zkoss.zk.ui.event.UploadEvent; 21 | import org.zkoss.zk.ui.select.SelectorComposer; 22 | import org.zkoss.zk.ui.select.annotation.Listen; 23 | import org.zkoss.zk.ui.select.annotation.Wire; 24 | import org.zkoss.zul.Fileupload; 25 | import org.zkoss.zul.Window; 26 | 27 | import com.asual.lesscss.LessEngine; 28 | import com.asual.lesscss.LessException; 29 | import com.asual.lesscss.LessOptions; 30 | import com.asual.lesscss.loader.ChainedResourceLoader; 31 | import com.asual.lesscss.loader.ClasspathResourceLoader; 32 | import com.asual.lesscss.loader.FilesystemResourceLoader; 33 | import com.asual.lesscss.loader.HTTPResourceLoader; 34 | import com.asual.lesscss.loader.ResourceLoader; 35 | import com.yahoo.platform.yui.compressor.CssCompressor; 36 | 37 | /** 38 | * @author jumperchen 39 | * 40 | */ 41 | public class ZKLessComposer extends SelectorComposer { 42 | 43 | private final static LessEngine compiler = new LessEngine(new LessOptions(), defaultResourceLoader()); 44 | 45 | private static ResourceLoader defaultResourceLoader() { 46 | ResourceLoader resourceLoader = new ChainedResourceLoader( 47 | new FilesystemResourceLoader(), new ClasspathResourceLoader( 48 | LessEngine.class.getClassLoader()), 49 | new HTTPResourceLoader()); 50 | resourceLoader = new ZKResourceLoader(resourceLoader); 51 | return resourceLoader; 52 | } 53 | private static void log(Object... os) { 54 | for (Object o : os) { 55 | System.out.print(o + (os[os.length - 1] != o ? "," : "")); 56 | } 57 | System.out.println(); 58 | } 59 | 60 | @Wire 61 | Fileupload upload; 62 | 63 | @Override 64 | public void doAfterCompose(Window comp) throws Exception { 65 | super.doAfterCompose(comp); 66 | } 67 | 68 | @Listen("onUpload=#upload") 69 | public void onUpload(UploadEvent evt) throws Exception { 70 | AMedia media = (AMedia)evt.getMedia(); 71 | String source = IOUtils.toString(media.getStreamData(), "UTF-8"); 72 | source = SyntaxHelper.encodeDsp(source); 73 | 74 | /* Compile less */ 75 | String result = null; 76 | try { 77 | result = compiler.compile(source); 78 | } catch (LessException e) { 79 | log(e.getMessage()); 80 | } 81 | 82 | result = SyntaxHelper.decodeDsp(result); 83 | 84 | InputStreamReader in = null; 85 | OutputStreamWriter out = null; 86 | 87 | byte[] b = null; 88 | ByteArrayOutputStream bytes = null; 89 | try { 90 | in = new UnicodeReader( new ByteArrayInputStream(result.getBytes("UTF-8")), "UTF-8"); 91 | bytes = new ByteArrayOutputStream(); 92 | out = new OutputStreamWriter(bytes, "UTF-8"); 93 | CssCompressor compressor = new CssCompressor(in); 94 | compressor.compress(out, -1); 95 | } finally { 96 | if (in != null) 97 | in.close(); 98 | if (out != null) 99 | out.close(); 100 | } 101 | if (bytes != null) { 102 | b = bytes.toByteArray(); 103 | org.zkoss.zul.Filedownload.save(b, null, media.getName().replace(".less", ".css.dsp")); 104 | } 105 | } 106 | 107 | } 108 | -------------------------------------------------------------------------------- /src/main/java/test/ZKResourceLoader.java: -------------------------------------------------------------------------------- 1 | package test; 2 | 3 | import java.io.IOException; 4 | 5 | import com.asual.lesscss.loader.ResourceLoader; 6 | 7 | /** ZKResourceLoader.java. 8 | 9 | Purpose: 10 | 11 | Description: 12 | 13 | History: 14 | 3:05:59 PM May 17, 2013, Created by jumperchen 15 | 16 | Copyright (C) 2013 Potix Corporation. All Rights Reserved. 17 | */ 18 | 19 | /** 20 | * @author jumperchen 21 | * 22 | */ 23 | public class ZKResourceLoader implements ResourceLoader { 24 | private final ResourceLoader delegate; 25 | 26 | public ZKResourceLoader(ResourceLoader delegate) { 27 | this.delegate = delegate; 28 | } 29 | 30 | public boolean exists(String path) throws IOException { 31 | return delegate.exists(path); 32 | } 33 | 34 | public String load(String path, String charset) throws IOException { 35 | String source = delegate.load(path, charset).replaceAll("\r", ""); 36 | return SyntaxHelper.encodeDsp(source); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/main/webapp/META-INF/MANIFEST.MF: -------------------------------------------------------------------------------- 1 | Manifest-Version: 1.0 2 | Specification-Title: ZK Application 3 | Specification-Version: 1.0 4 | Specification-Vendor: 5 | Implementation-Title: 6 | Implementation-URL: http://your-website/ 7 | Implementation-Version: 1.0 8 | Implementation-Vendor: 9 | -------------------------------------------------------------------------------- /src/main/webapp/WEB-INF/web.servlet-3.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | example 10 | 11 | 31 | 32 | -------------------------------------------------------------------------------- /src/main/webapp/WEB-INF/zk.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12 | 13 | org.zkoss.zkmax.tablet.ui.disabled 14 | true 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/main/webapp/applications/bootstrap/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zkoss-demo/ui-examples/cdd598e723e532cebafdaf731e9955b7bee45506/src/main/webapp/applications/bootstrap/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /src/main/webapp/applications/bootstrap/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zkoss-demo/ui-examples/cdd598e723e532cebafdaf731e9955b7bee45506/src/main/webapp/applications/bootstrap/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /src/main/webapp/applications/css/content-header.css.dsp: -------------------------------------------------------------------------------- 1 | <%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %><%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %><%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>.btn-tip.z-popup{overflow:visible;background:#222;${t:borderRadius('5px') }}.btn-tip.z-popup .z-popup-content{color:#fff;white-space:nowrap}.btn-tip.z-popup:before{position:absolute;top:-6px;left:44%;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #222;border-left:7px solid transparent;border-bottom-color:#222;content:''}.z-panel-head,.z-panel-header{padding:0;line-height:normal;${t:gradient('ver','#fdfdfd 0%; #eaeaea 100%') };${t:borderRadius('0px') };border-color:#cdcdcd}.z-panel-header{padding:8px}.z-caption{height:auto}.z-caption-content{float:left;opacity:.7;line-height:17px;padding:3px}.z-caption-content:after{content:'';opacity:.7;border-right:1px solid #cdcdcd;height:100%;position:absolute;top:0;left:36px}.z-caption-content+.z-label{color:#666;text-shadow:0 1px 0 #fff;float:left;padding:3px 12px;font-size:12px;font-weight:bold;line-height:19px;margin:0}.z-caption-content ~ .z-button{float:right}.site-stats{background-color:#f5f5f5;border:1px solid #ddd;cursor:pointer;margin:0 0 10px;padding:13px 20px 10px;position:relative;display:inline-block;font-size:20px;font-weight:bold;color:#333}.site-stats i{margin:5px 12px 0 0}.site-stats .z-label{margin-left:12px;font-size:12px;color:#888;font-style:italic}.site-stats:hover{background-color:#ededed}.z-panelchildren{padding:12px 15px;border-color:#cdcdcd}.stat-boxes{margin:20px 0 10px;text-align:center}.stat-boxes .z-a{${t:gradient('ver','#f9f9f9 0%; #ededed 100%') };border:1px solid #d5d5d5;border-radius:4px 4px 4px 4px;${t:boxShadow('0 1px 0 0 #FFFFFF inset, 0 1px 0 rgba(255,255,255,0.4)') };display:inline-block;line-height:18px;margin:0 10px 10px;padding:0 10px}.stat-boxes .z-a:hover{${t:gradient('ver','#fcfcfc 0%; #f1f1f1 100%') }}.stat-boxes .peity_bar_good,.stat-boxes .peity_line_good{color:#459d1c}.stat-boxes peity_bar_bad,.stat-boxes .peity_line_bad{color:#ba1e20}.stat-boxes .left{border-right:1px solid #dcdcdc;box-shadow:1px 0 0 0 #fff;margin-right:12px;padding:10px 14px 6px 4px;font-size:10px;font-weight:bold}.stat-boxes .left,.stat-boxes .right{float:left;text-shadow:0 1px 0 #fff}.stat-boxes .left span,.stat-boxes .right span{display:block}.stat-boxes .right{font-size:12px;padding:12px 10px 7px 0;text-align:center;width:70px;color:#666}.stat-boxes .right strong{font-size:26px;margin-bottom:3px;margin-top:6px}.stat-boxes .z-label+.z-label span{display:block!important}.stat-boxes .z-label+.z-label canvas{display:none}.tip-right.z-label{float:right;margin-top:3px;padding:4px}.separator.z-vlayout>.z-vlayout-inner:after{content:'';position:absolute;border-bottom:1px dotted #aebdc8;width:200%;bottom:12px;margin-left:-20px}.separator.z-vlayout>.z-vlayout-inner:nth-child(3){padding:0!important}.separator.z-vlayout>.z-vlayout-inner:nth-child(3):after{bottom:-10px}.separator.z-vlayout>.z-vlayout-inner:last-child:after{display:none}.more.z-a{padding:5px;text-align:center;display:block;color:#888;margin-top:10px}.more.z-a:hover{background:#eee}.z-image{${t:applyCSS3('box-sizing','content-box') };padding:3px;border:1px solid #b6bcbf} -------------------------------------------------------------------------------- /src/main/webapp/applications/css/content-header.less: -------------------------------------------------------------------------------- 1 | @import "~./zul/less/_header.less"; 2 | 3 | // tooltip 4 | .btn-tip.z-popup { 5 | overflow: visible; 6 | background: #222; 7 | .borderRadius ('5px'); 8 | 9 | .z-popup-content { 10 | color: #ffffff; 11 | white-space: nowrap; 12 | } 13 | 14 | &:before { 15 | position: absolute; 16 | top: -6px; 17 | left: 44%; 18 | display: inline-block; 19 | border-right: 7px solid transparent; 20 | border-bottom: 7px solid #222; 21 | border-left: 7px solid transparent; 22 | border-bottom-color: #222; 23 | content: ''; 24 | } 25 | } 26 | 27 | // panel 28 | .z-panel-head , .z-panel-header { 29 | padding: 0; 30 | line-height: normal; 31 | .verGradient (#fdfdfd , #eaeaea); 32 | .borderRadius ('0px'); 33 | border-color: #CDCDCD; 34 | } 35 | 36 | .z-panel-header { 37 | padding: 8px; 38 | } 39 | 40 | .z-caption { 41 | height: auto; 42 | } 43 | 44 | .z-caption-content { 45 | float: left; 46 | opacity: .7; 47 | line-height: 17px; 48 | padding: 3px; 49 | } 50 | 51 | .z-caption-content:after { 52 | content: ''; 53 | opacity: .7; 54 | border-right: 1px solid #cdcdcd; 55 | height: 100%; 56 | position: absolute; 57 | top: 0px; 58 | left: 36px; 59 | } 60 | 61 | .z-caption-content + .z-label { 62 | color: #666666; 63 | text-shadow: 0 1px 0 #ffffff; 64 | float: left; 65 | padding: 3px 12px; 66 | font-size: 12px; 67 | font-weight: bold; 68 | line-height: 19px; 69 | margin: 0; 70 | } 71 | 72 | .z-caption-content ~ .z-button { 73 | float: right; 74 | } 75 | 76 | .site-stats { 77 | background-color: #F5F5F5; 78 | border: 1px solid #DDDDDD; 79 | cursor: pointer; 80 | margin: 0 0 10px; 81 | padding: 13px 20px 10px; 82 | position: relative; 83 | display: inline-block; 84 | font-size: 20px; 85 | font-weight: bold; 86 | color: #333; 87 | i { 88 | margin: 5px 12px 0 0; 89 | } 90 | 91 | .z-label { 92 | margin-left: 12px; 93 | font-size: 12px; 94 | color: #888888; 95 | font-style: italic; 96 | } 97 | } 98 | 99 | .site-stats:hover { 100 | background-color: #EDEDED; 101 | } 102 | 103 | .z-panelchildren { 104 | padding: 12px 15px; 105 | border-color: #CDCDCD; 106 | } 107 | 108 | .stat-boxes { 109 | margin: 20px 0 10px; 110 | text-align: center; 111 | .z-a { 112 | .verGradient (#F9F9F9 , #EDEDED); 113 | border: 1px solid #d5d5d5; 114 | border-radius: 4px 4px 4px 4px; 115 | .boxShadow ('0 1px 0 0 #FFFFFF inset, 0 1px 0 rgba(255,255,255,0.4)'); 116 | display: inline-block; 117 | line-height: 18px; 118 | margin: 0 10px 10px; 119 | padding: 0 10px; 120 | &:hover { 121 | .verGradient (#FCFCFC , #F1F1F1); 122 | } 123 | } 124 | 125 | .peity_bar_good , .peity_line_good { 126 | color: #459D1C; 127 | } 128 | 129 | peity_bar_bad , .peity_line_bad { 130 | color: #BA1E20; 131 | } 132 | 133 | .left { 134 | border-right: 1px solid #DCDCDC; 135 | box-shadow: 1px 0 0 0 #FFFFFF; 136 | margin-right: 12px; 137 | padding: 10px 14px 6px 4px; 138 | font-size: 10px; 139 | font-weight: bold; 140 | } 141 | 142 | .left , .right { 143 | float: left; 144 | text-shadow: 0 1px 0 #ffffff; 145 | span { 146 | display: block; 147 | } 148 | } 149 | 150 | .right { 151 | font-size: 12px; 152 | padding: 12px 10px 7px 0; 153 | text-align: center; 154 | width: 70px; 155 | color: #666666; 156 | strong { 157 | font-size: 26px; 158 | margin-bottom: 3px; 159 | margin-top: 6px; 160 | } 161 | } 162 | } 163 | 164 | .stat-boxes .z-label + .z-label { 165 | span { 166 | display: block ! important; 167 | } 168 | 169 | canvas { 170 | display: none; 171 | } 172 | } 173 | 174 | .tip-right.z-label { 175 | float: right; 176 | margin-top: 3px; 177 | padding: 4px; 178 | } 179 | 180 | .separator.z-vlayout > .z-vlayout-inner:after { 181 | content: ''; 182 | position: absolute; 183 | border-bottom: 1px dotted #AEBDC8; 184 | width: 200%; 185 | bottom: 12px; 186 | margin-left: -20px; 187 | } 188 | 189 | .separator.z-vlayout > .z-vlayout-inner:nth-child(3) { 190 | padding: 0px ! important; 191 | &:after { 192 | bottom: -10px; 193 | } 194 | } 195 | 196 | .separator.z-vlayout > .z-vlayout-inner:last-child:after { 197 | display: none; 198 | } 199 | 200 | .more.z-a { 201 | padding: 5px; 202 | text-align: center; 203 | display: block; 204 | color: #888888; 205 | margin-top: 10px; 206 | &:hover { 207 | background: #EEEEEE; 208 | } 209 | } 210 | 211 | .z-image { 212 | .applyCSS3 ('box-sizing' , 'content-box'); 213 | padding: 3px; 214 | border: 1px solid #B6BCBF; 215 | } 216 | 217 | -------------------------------------------------------------------------------- /src/main/webapp/applications/css/grey.css.dsp: -------------------------------------------------------------------------------- 1 | <%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %><%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %><%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>body{background:#444}.header{${t:boxShadow('0 1px 0 #333333') };${t:gradient('ver','#3f3f3f 0%; #222222 100%') };border-bottom:1px solid #555}.search .z-bandbox-input{background:#222;${t:boxShadow('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-input:focus{color:#777;${t:boxShadow('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-button,.search .z-bandbox-button:hover{background:#222;${t:boxShadow('-2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.sidebar>ul{border-top:1px solid #393939;border-bottom:1px solid #4e4e4e}.sidebar>ul .z-nav-content,.sidebar>ul .z-navitem-content{border-top:1px solid #4e4e4e;border-bottom:1px solid #393939}.sidebar>ul .z-nav-content:hover,.sidebar>ul .z-navitem-content:hover{background:#4a4a4a}.sidebar>ul .z-nav-content>.z-nav-info,.sidebar>ul .z-navitem-content>.z-nav-info{background:#333}.sidebar>ul .z-navitem-selected>.z-navitem-content{${t:gradient('ver','#333333 0%; #3f3f3f 100%') }}.sidebar>ul .z-navitem-selected>.z-navitem-content:hover{${t:gradient('ver','#333333 0%; #3f3f3f 100%') }}.sidebar>ul ul{border-top:1px solid #4e4e4e;background:#2a2a2a}.sidebar>ul ul .z-nav-content,.sidebar>ul ul .z-navitem-content{border-top:1px solid #333;border-bottom:1px solid #202020}.sidebar>ul ul .z-nav-content:hover,.sidebar>ul ul .z-navitem-content:hover{color:#ccc;background:#272727}.sidebar>ul ul .z-navitem-selected>.z-navitem-content{background:#2a2a2a}.sidebar>ul ul .z-navitem-selected>.z-navitem-content:hover{background:#2a2a2a}.user-nav .z-menu-content,.user-nav .z-menuitem-content{${t:gradient('ver','#444444 0%; #222222 100%') }}.user-nav .z-menu-content:hover,.user-nav .z-menuitem-content:hover{background:#222}.user-nav .z-menu-selected .z-menu-content{background:#222}.navpp .z-menu-content:hover,.navpp .z-menuitem-content:hover,.navpp .z-menu-content:active,.navpp .z-menuitem-content:active{${t:gradient('ver','#555555 0%; #222222 100%') }}.search .z-bandbox-input{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#222;${t:boxShadow('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-input:focus{color:#777;${t:boxShadow('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-button,.search .z-bandbox-button:hover{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#222;${t:boxShadow('-2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.btn-tip.z-popup{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#222}.z-menubar{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.z-menubar>ul{top:-5px}.z-menubar .z-menu-content,.z-menubar .z-menuitem-content,.z-menubar .z-menu-selected .z-menu-content{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#3f3f3f;border-color:#222;border-bottom-color:#000}.z-menubar .z-menu-content:hover,.z-menubar .z-menuitem-content:hover,.z-menubar .z-menu-selected .z-menu-content:hover{border-color:black;background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#3f3f3f} -------------------------------------------------------------------------------- /src/main/webapp/applications/css/grey.less: -------------------------------------------------------------------------------- 1 | @import "~./zul/less/_header.less"; 2 | body { 3 | background: #444444; 4 | } 5 | 6 | .header { 7 | .boxShadow ('0 1px 0 #333333'); 8 | .verGradient (#3F3F3F , #222222); 9 | border-bottom: 1px solid #555555; 10 | } 11 | 12 | .search { 13 | .z-bandbox-input { 14 | background: #222222; 15 | .boxShadow ('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 16 | &:focus { 17 | color: #777777; 18 | .boxShadow ('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 19 | } 20 | } 21 | 22 | .z-bandbox-button , .z-bandbox-button:hover { 23 | background: #222222; 24 | .boxShadow ('-2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 25 | } 26 | } 27 | 28 | .sidebar { 29 | > ul { 30 | border-top: 1px solid #393939; 31 | border-bottom: 1px solid #4E4E4E; 32 | 33 | .z-nav-content, 34 | .z-navitem-content { 35 | border-top: 1px solid #4E4E4E; 36 | border-bottom: 1px solid #393939; 37 | 38 | &:hover { 39 | background: #4A4A4A; 40 | } 41 | > .z-nav-info { 42 | background: #333333; 43 | } 44 | } 45 | 46 | 47 | .z-navitem-selected { 48 | > .z-navitem-content { 49 | .verGradient (#333333 , #3F3F3F); 50 | &:hover { 51 | .verGradient (#333333 , #3F3F3F); 52 | } 53 | } 54 | } 55 | 56 | ul { 57 | border-top: 1px solid #4E4E4E; 58 | background: #2A2A2A; 59 | 60 | .z-nav-content, 61 | .z-navitem-content { 62 | border-top: 1px solid #333333; 63 | border-bottom: 1px solid #202020; 64 | 65 | &:hover { 66 | color: #CCCCCC; 67 | background: #272727; 68 | } 69 | } 70 | .z-navitem-selected { 71 | > .z-navitem-content { 72 | background: #2A2A2A; 73 | 74 | &:hover { 75 | background: #2A2A2A; 76 | } 77 | } 78 | } 79 | } 80 | } 81 | } 82 | 83 | .user-nav { 84 | .z-menu-content, .z-menuitem-content { 85 | .verGradient (#444 , #222); 86 | &:hover { 87 | background: #222; 88 | } 89 | } 90 | .z-menu-selected .z-menu-content { 91 | background: #222; 92 | } 93 | } 94 | 95 | .navpp .z-menu-content:hover , .navpp .z-menuitem-content:hover , .navpp .z-menu-content:active , .navpp .z-menuitem-content:active { 96 | .verGradient (#555 , #222); 97 | } 98 | 99 | 100 | .search { 101 | .z-bandbox-input { 102 | .resetGradient(); 103 | background: #222222; 104 | .boxShadow ('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 105 | &:focus { 106 | color: #777777; 107 | .boxShadow ('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 108 | } 109 | } 110 | 111 | .z-bandbox-button , .z-bandbox-button:hover { 112 | .resetGradient(); 113 | background: #222222; 114 | .boxShadow ('-2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 115 | } 116 | } 117 | 118 | .btn-tip.z-popup { 119 | .resetGradient(); 120 | background: #222; 121 | } 122 | .z-menubar { 123 | > ul { 124 | top: -5px; 125 | } 126 | .resetGradient(); 127 | .z-menu-content, 128 | .z-menuitem-content, 129 | .z-menu-selected .z-menu-content { 130 | .resetGradient(); 131 | background: #3F3F3F; 132 | border-color: #222; 133 | border-bottom-color: #000; 134 | 135 | &:hover { 136 | border-color: black; 137 | .resetGradient(); 138 | background: #3F3F3F; 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/main/webapp/applications/css/index.css.dsp: -------------------------------------------------------------------------------- 1 | <%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %><%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %><%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>body{overflow-x:hidden;margin-top:-9px;padding:0!important}#tooltip{position:absolute;display:none;border:0;padding:3px 8px;border-radius:3px;font-size:10px;background-color:#222;color:#fff;z-index:25}a:hover,a:active,a:visited,a:focus{text-decoration:none;cursor:pointer;color:#333}.header{height:80px;position:relative}.header h1{padding-left:70px;left:15px;overflow:hidden;position:relative;top:20px;width:191px;background:url(${c:encodeURL('../img/top_zk_logo.png')}) no-repeat transparent;opacity:.7}.header h1 a{color:#adadad;text-shadow:0 1px #fff;font-size:40px;display:block;font-weight:normal;line-height:54px}.search{position:absolute;z-index:20;top:6px;left:230px}.user-nav{position:absolute;right:30px;top:5px;z-index:20;margin:0}.sidebar{display:block;float:left;position:relative;width:220px;z-index:16}.content{background:#eee;margin-left:220px;margin-right:0;padding-bottom:25px;position:relative;min-height:500px;width:auto;-webkit-background-clip:padding-box;border-top-left-radius:8px;z-index:20}.content-header{${t:gradient('ver','#ffffff 0%; #eeeeee 100%') };border-top-left-radius:8px;min-height:80px;padding-top:5px;width:100%;margin-top:-38px;z-index:20}.content-header h1{color:#555;font-size:28px;font-weight:normal;text-shadow:0 1px 0 #fff;margin-left:20px;margin-top:20px}.content-header .btn-group{float:right;right:20px;position:absolute;margin-top:-50px}.breadcrumb{background-color:#e5e5e5;box-shadow:0 0 1px #fff;border-top:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6;padding-left:10px;padding:0}.breadcrumb a{padding:8px 20px 8px 10px;display:inline-block;font-size:11px;color:#666}.breadcrumb a i{opacity:.6;margin-right:6px;vertical-align:text-bottom}.breadcrumb a:hover i{opacity:1}.breadcrumb a:after{content:"\f054";display:inline-block;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;margin:0 -20px 0 13px}.breadcrumb a:last-child:after{display:none}.style-switcher{position:absolute;width:250px;height:30px;background-color:#000;z-index:30;right:0;top:129px;border-radius:5px 0 0 5px;margin-right:-220px}.style-switcher i{display:inline-block;margin:-4px 10px 0 10px;cursor:pointer}.style-switcher span{font-weight:bold;color:#fff;display:inline-block;margin:-15px 20px 0 0;vertical-align:middle}.style-switcher a{display:inline-block;width:20px;height:20px;margin-top:4px;border-style:solid;border-width:1px;border-color:transparent} -------------------------------------------------------------------------------- /src/main/webapp/applications/css/index.less: -------------------------------------------------------------------------------- 1 | @import "~./zul/less/_header.less"; 2 | 3 | body { 4 | overflow-x: hidden; 5 | margin-top: -9px; 6 | padding: 0!important; 7 | } 8 | 9 | #tooltip { 10 | position: absolute; 11 | display: none; 12 | border: none; 13 | padding: 3px 8px; 14 | border-radius: 3px; 15 | font-size: 10px; 16 | background-color: #222222; 17 | color: #ffffff; 18 | z-index: 25; 19 | } 20 | 21 | a:hover, 22 | a:active, 23 | a:visited, 24 | a:focus { 25 | text-decoration: none; 26 | cursor: pointer; 27 | color: #333; 28 | } 29 | .header { 30 | height: 80px; 31 | position: relative; 32 | 33 | h1 { 34 | padding-left: 70px; 35 | left: 15px; 36 | overflow: hidden; 37 | position: relative; 38 | top: 20px; 39 | width: 191px; 40 | .encodeURL(background, '../img/top_zk_logo.png', no-repeat transparent); 41 | 42 | opacity: 0.7; 43 | a { 44 | color: rgb(173,173,173); 45 | text-shadow: 0 1px #FFFFFF; 46 | font-size: 40px; 47 | display: block; 48 | font-weight: normal; 49 | line-height: 54px; 50 | } 51 | } 52 | } 53 | 54 | .search { 55 | position: absolute; 56 | z-index: 20; 57 | top: 6px; 58 | left: 230px; 59 | } 60 | 61 | .user-nav { 62 | position: absolute; 63 | right: 30px; 64 | top: 5px; 65 | z-index: 20; 66 | margin: 0; 67 | } 68 | .sidebar { 69 | display: block; 70 | float: left; 71 | position: relative; 72 | width: 220px; 73 | z-index: 16; 74 | } 75 | 76 | .content { 77 | background: #eeeeee; 78 | margin-left: 220px; 79 | margin-right: 0; 80 | padding-bottom: 25px; 81 | position: relative; 82 | min-height: 500px; 83 | width: auto; 84 | -webkit-background-clip: padding-box; 85 | border-top-left-radius: 8px; 86 | z-index: 20; 87 | } 88 | .content-header { 89 | .verGradient(#FFFFFF, #EEEEEE); 90 | 91 | border-top-left-radius: 8px; 92 | min-height: 80px; 93 | padding-top: 5px; 94 | width: 100%; 95 | margin-top: -38px; 96 | z-index: 20; 97 | h1 { 98 | color: #555555; 99 | font-size: 28px; 100 | font-weight: normal; 101 | text-shadow: 0 1px 0 #ffffff; 102 | margin-left: 20px; 103 | margin-top: 20px; 104 | } 105 | .btn-group { 106 | float: right; 107 | right: 20px; 108 | position: absolute; 109 | margin-top: -50px; 110 | } 111 | } 112 | .breadcrumb { 113 | background-color: #e5e5e5; 114 | box-shadow: 0 0 1px #ffffff; 115 | border-top: 1px solid #d6d6d6; 116 | border-bottom: 1px solid #d6d6d6; 117 | padding-left: 10px; 118 | padding: 0; 119 | a { 120 | i { 121 | opacity: .6; 122 | margin-right: 6px; 123 | vertical-align: text-bottom; 124 | } 125 | &:hover { 126 | i { 127 | opacity: 1; 128 | } 129 | } 130 | padding: 8px 20px 8px 10px; 131 | display: inline-block; 132 | font-size: 11px; 133 | color: #666666; 134 | &:after { 135 | content: "\f054"; 136 | display: inline-block; 137 | font-family: FontAwesome; 138 | font-weight: normal; 139 | font-style: normal; 140 | text-decoration: inherit; 141 | -webkit-font-smoothing: antialiased; 142 | margin: 0 -20px 0 13px; 143 | } 144 | &:last-child:after { 145 | display: none; 146 | } 147 | } 148 | } 149 | 150 | .style-switcher { 151 | position: absolute; 152 | width: 250px; 153 | height: 30px; 154 | background-color: #000000; 155 | z-index: 30; 156 | right: 0; 157 | top: 129px; 158 | border-radius: 5px 0 0 5px; 159 | margin-right: -220px; 160 | i { 161 | display: inline-block; 162 | margin: -4px 10px 0 10px; 163 | cursor: pointer; 164 | } 165 | span { 166 | font-weight: bold; 167 | color: #ffffff; 168 | display: inline-block; 169 | margin: -15px 20px 0 0; 170 | vertical-align: middle; 171 | } 172 | a { 173 | display: inline-block; 174 | width: 20px; 175 | height: 20px; 176 | margin-top: 4px; 177 | border-style: solid; 178 | border-width: 1px; 179 | border-color: transparent; 180 | } 181 | 182 | } -------------------------------------------------------------------------------- /src/main/webapp/applications/css/light-blue.css.dsp: -------------------------------------------------------------------------------- 1 | <%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %><%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %><%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>body{background-color:#8399b0}.z-button,.btn-group>.btn{${t:gradient('ver','#4b6176 0%; #243a4f 100%') };border-color:#415466;color:white;text-shadow:none}.z-button *,.btn-group>.btn *,.z-button *:before,.btn-group>.btn *:before,.z-button *:after,.btn-group>.btn *:after{color:white}.z-button [class^="icon-"],.btn-group>.btn [class^="icon-"],.z-button [class*=" icon-"],.btn-group>.btn [class*=" icon-"]{background-image:url("../bootstrap/img/glyphicons-halflings-white.png")}.z-button:hover,.btn-group>.btn:hover,.z-button:active,.btn-group>.btn:active,.z-button:focus,.btn-group>.btn:focus{background:#415466;border-color:#415466;color:white}.z-button:active,.btn-group>.btn:active{${t:boxShadow('inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)') }}.header{${t:boxShadow('0 1px 0 #2d4358') };${t:gradient('ver','#4b6176 0%; #243a4f 100%') };border-bottom:1px solid #8da4bb}.search .z-bandbox-input{color:#8699ad;background:#415466;${t:boxShadow('3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-input:focus{color:#c1ccd8;${t:boxShadow('3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-button,.search .z-bandbox-button:hover{color:#8699ad;background:#415466;${t:boxShadow('-3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.sidebar>ul{border-top:1px solid #657c93;border-bottom:1px solid #9daab8}.sidebar>ul .z-nav-content,.sidebar>ul .z-navitem-content{border-top:1px solid #9daab8;border-bottom:1px solid #657c93;color:#c1ccd8}.sidebar>ul .z-nav-content:hover,.sidebar>ul .z-navitem-content:hover{background:#8da4bb}.sidebar>ul .z-nav-content>.z-nav-info,.sidebar>ul .z-navitem-content>.z-nav-info{background:#485e73}.sidebar>ul .z-navitem-selected>.z-navitem-content{${t:gradient('ver','#243a4f 0%; #4b6176 100%') }}.sidebar>ul .z-navitem-selected>.z-navitem-content:hover{${t:gradient('ver','#243a4f 0%; #4b6176 100%') }}.sidebar>ul ul{border-top:1px solid #8399b0;background:#788ca0;${t:boxShadow('0 0 3px rgba(0,0,0,0.3) inset') }}.sidebar>ul ul .z-nav-content,.sidebar>ul ul .z-navitem-content{border-top:1px solid #8ca1b6;border-bottom:1px solid #677a8d;color:#a8bacd}.sidebar>ul ul .z-nav-content:hover,.sidebar>ul ul .z-navitem-content:hover{background:#7f94a9}.sidebar>ul ul .z-navitem-selected>.z-navitem-content{background:#788ca0}.sidebar>ul ul .z-navitem-selected>.z-navitem-content:hover{background:#788ca0}.user-nav .z-menu-content,.user-nav .z-menuitem-content{${t:gradient('ver','#4b6176 0%; #243a4f 100%') }}.user-nav .z-menu-content:hover,.user-nav .z-menuitem-content:hover{background:#243a4f}.user-nav .z-menu-selected .z-menu-content{background:#243a4f}.navpp .z-menu-content:hover,.navpp .z-menuitem-content:hover,.navpp .z-menu-content:active,.navpp .z-menuitem-content:active{${t:gradient('ver','#4b6176 0%; #243a4f 100%') }}.search .z-bandbox-input{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#8699ad;background:#415466;${t:boxShadow('3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-input:focus{color:#c1ccd8;${t:boxShadow('3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-button,.search .z-bandbox-button:hover{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#8699ad;background:#415466;${t:boxShadow('-3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.z-button:active,.z-button:hover,.z-button:focus{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#243a4f}.btn-tip.z-popup{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#222}.z-menubar{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.z-menubar>ul{top:-5px}.z-menubar .z-menu-content,.z-menubar .z-menuitem-content,.z-menubar .z-menu-selected .z-menu-content{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#243a4f;border-color:#222;border-bottom-color:#000}.z-menubar .z-menu-content:hover,.z-menubar .z-menuitem-content:hover,.z-menubar .z-menu-selected .z-menu-content:hover{border-color:black;background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#243a4f} -------------------------------------------------------------------------------- /src/main/webapp/applications/css/light-blue.less: -------------------------------------------------------------------------------- 1 | @import "~./zul/less/_header.less"; 2 | body { 3 | background-color: #8399b0; 4 | } 5 | 6 | .z-button, 7 | .btn-group > .btn { 8 | .verGradient (#4b6176 , #243a4f); 9 | border-color: #415466; 10 | color: white; 11 | text-shadow: none; 12 | * , *:before , *:after { 13 | color: white; 14 | } 15 | 16 | [class ^= "icon-"] , [class *= " icon-"] { 17 | background-image: url("../bootstrap/img/glyphicons-halflings-white.png"); 18 | } 19 | 20 | &:hover , &:active, &:focus { 21 | background: #415466; 22 | border-color: #415466; 23 | color: white; 24 | } 25 | 26 | &:active { 27 | .boxShadow ('inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)'); 28 | } 29 | } 30 | 31 | .header { 32 | .boxShadow ('0 1px 0 #2d4358'); 33 | .verGradient (#4b6176 , #243a4f); 34 | border-bottom: 1px solid #8da4bb; 35 | } 36 | 37 | .search { 38 | .z-bandbox-input { 39 | color: #8699ad; 40 | background: #415466; 41 | .boxShadow ('3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)'); 42 | &:focus { 43 | color: #c1ccd8; 44 | .boxShadow ('3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)'); 45 | } 46 | } 47 | 48 | .z-bandbox-button , .z-bandbox-button:hover { 49 | color: #8699ad; 50 | background: #415466; 51 | .boxShadow ('-3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)'); 52 | } 53 | } 54 | .sidebar { 55 | > ul { 56 | border-top: 1px solid #657c93; 57 | border-bottom: 1px solid #9daab8; 58 | 59 | 60 | .z-nav-content, 61 | .z-navitem-content { 62 | border-top: 1px solid #9daab8; 63 | border-bottom: 1px solid #657c93; 64 | color: #c1ccd8; 65 | 66 | &:hover { 67 | background: #8da4bb; 68 | } 69 | > .z-nav-info { 70 | background: #485e73; 71 | } 72 | } 73 | 74 | 75 | .z-navitem-selected { 76 | > .z-navitem-content { 77 | .verGradient (#243a4f , #4b6176); 78 | &:hover { 79 | .verGradient (#243a4f , #4b6176); 80 | } 81 | } 82 | } 83 | 84 | ul { 85 | border-top: 1px solid #8399b0; 86 | background: #788ca0; 87 | .boxShadow ('0 0 3px rgba(0,0,0,0.3) inset'); 88 | 89 | .z-nav-content, 90 | .z-navitem-content { 91 | border-top: 1px solid #8ca1b6; 92 | border-bottom: 1px solid #677a8d; 93 | color: #a8bacd; 94 | 95 | &:hover { 96 | background: #7f94a9; 97 | } 98 | } 99 | .z-navitem-selected { 100 | > .z-navitem-content { 101 | background: #788ca0; 102 | 103 | &:hover { 104 | background: #788ca0; 105 | } 106 | } 107 | } 108 | } 109 | } 110 | } 111 | .user-nav { 112 | .z-menu-content, .z-menuitem-content { 113 | .verGradient (#4b6176 , #243a4f); 114 | &:hover { 115 | background: #243a4f; 116 | } 117 | } 118 | .z-menu-selected .z-menu-content { 119 | background: #243a4f; 120 | } 121 | } 122 | 123 | 124 | .navpp .z-menu-content:hover , .navpp .z-menuitem-content:hover , .navpp .z-menu-content:active , .navpp .z-menuitem-content:active { 125 | .verGradient(#4b6176 , #243a4f); 126 | } 127 | 128 | 129 | .search { 130 | .z-bandbox-input { 131 | .resetGradient(); 132 | color: #8699ad; 133 | background: #415466; 134 | .boxShadow ('3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)'); 135 | &:focus { 136 | color: #c1ccd8; 137 | .boxShadow ('3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)'); 138 | } 139 | } 140 | 141 | .z-bandbox-button , .z-bandbox-button:hover { 142 | .resetGradient(); 143 | color: #8699ad; 144 | background: #415466; 145 | .boxShadow ('-3px 3px 3px rgba(0,0,0,0.16) inset, 0 1px 0 rgba(255,255,255,0.2)'); 146 | } 147 | } 148 | .z-button:active, 149 | .z-button:hover, 150 | .z-button:focus { 151 | .resetGradient(); 152 | background: #243a4f; 153 | } 154 | .btn-tip.z-popup { 155 | .resetGradient(); 156 | background: #222; 157 | } 158 | .z-menubar { 159 | > ul { 160 | top: -5px; 161 | } 162 | .resetGradient(); 163 | .z-menu-content, 164 | .z-menuitem-content, 165 | .z-menu-selected .z-menu-content { 166 | .resetGradient(); 167 | background: #243a4f; 168 | border-color: #222; 169 | border-bottom-color: #000; 170 | 171 | &:hover { 172 | border-color: black; 173 | .resetGradient(); 174 | background: #243a4f; 175 | } 176 | } 177 | } 178 | 179 | -------------------------------------------------------------------------------- /src/main/webapp/applications/css/red.css.dsp: -------------------------------------------------------------------------------- 1 | <%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %><%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %><%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>body{background-color:#6f2d2d}a:hover,a:active,a:visited,a:focus{color:#333}.z-button,.btn-group>.btn{${t:gradient('ver','#830000 0%; #6f2d2d 100%') };border-color:#6f1414;color:white;text-shadow:none}.z-button *,.btn-group>.btn *,.z-button *:before,.btn-group>.btn *:before,.z-button *:after,.btn-group>.btn *:after{color:white}.z-button [class^="icon-"],.btn-group>.btn [class^="icon-"],.z-button [class*=" icon-"],.btn-group>.btn [class*=" icon-"]{background-image:url("../bootstrap/img/glyphicons-halflings-white.png")}.z-button:hover,.btn-group>.btn:hover,.z-button:active,.btn-group>.btn:active,.z-button:focus,.btn-group>.btn:focus{background:#7d3434;border-color:#7b3e3e;color:white}.z-button:active,.btn-group>.btn:active{${t:boxShadow('inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)') }}.header{${t:boxShadow('0 1px 0 #350C0C') };${t:gradient('ver','#532424 0%; #431b1b 100%') };border-bottom:1px solid #5f2828}.search .z-bandbox-input{color:#8699ad;background:#431b1b;${t:boxShadow('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-input:focus{color:#431b1b;${t:boxShadow('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-button,.search .z-bandbox-button:hover{color:#8699ad;background:#431b1b;${t:boxShadow('-2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.sidebar>ul{border-top:1px solid #661d1d;border-bottom:1px solid #7b3e3e}.sidebar>ul .z-nav-content,.sidebar>ul .z-navitem-content{border-top:1px solid #7b3e3e;border-bottom:1px solid #661d1d}.sidebar>ul .z-nav-content:hover,.sidebar>ul .z-navitem-content:hover{background:#7d3434}.sidebar>ul .z-nav-content>.z-nav-info,.sidebar>ul .z-navitem-content>.z-nav-info{background:#431b1b}.sidebar>ul .z-navitem-selected>.z-navitem-content{${t:gradient('ver','#431b1b 0%; #532424 100%') }}.sidebar>ul .z-navitem-selected>.z-navitem-content:hover{${t:gradient('ver','#431b1b 0%; #532424 100%') }}.sidebar>ul ul{border-top:1px solid #7b3e3e;background:#532424}.sidebar>ul ul .z-nav-content,.sidebar>ul ul .z-navitem-content{border-top:1px solid #5d2b2b;border-bottom:1px solid #431f1f}.sidebar>ul ul .z-nav-content:hover,.sidebar>ul ul .z-navitem-content:hover{color:#ccc;background:#5d2b2b}.sidebar>ul ul .z-navitem-selected>.z-navitem-content{background:#532424}.sidebar>ul ul .z-navitem-selected>.z-navitem-content:hover{background:#532424}.user-nav .z-menu-content,.user-nav .z-menuitem-content{${t:gradient('ver','#532424 0%; #431b1b 100%') }}.user-nav .z-menu-content:hover,.user-nav .z-menuitem-content:hover{background:#431b1b}.user-nav .z-menu-selected .z-menu-content{background:#431b1b}.navpp .z-menu-content:hover,.navpp .z-menuitem-content:hover,.navpp .z-menu-content:active,.navpp .z-menuitem-content:active{${t:gradient('ver','#532424 0%; #431b1b 100%') }}.search .z-bandbox-input{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#8699ad;background:#431b1b;${t:boxShadow('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-input:focus{color:#431b1b;${t:boxShadow('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.search .z-bandbox-button,.search .z-bandbox-button:hover{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#8699ad;background:#431b1b;${t:boxShadow('-2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)') }}.z-button:active,.z-button:hover,.z-button:focus{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#6f2d2d}.btn-tip.z-popup{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#222}.z-menubar{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.z-menubar>ul{top:-5px}.z-menubar .z-menu-content,.z-menubar .z-menuitem-content,.z-menubar .z-menu-selected .z-menu-content{background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#431b1b;border-color:#222;border-bottom-color:#000}.z-menubar .z-menu-content:hover,.z-menubar .z-menuitem-content:hover,.z-menubar .z-menu-selected .z-menu-content:hover{border-color:black;background:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background:#431b1b} -------------------------------------------------------------------------------- /src/main/webapp/applications/css/red.less: -------------------------------------------------------------------------------- 1 | @import "~./zul/less/_header.less"; 2 | body { 3 | background-color: #6F2D2D; 4 | } 5 | 6 | a:hover , a:active , a:visited , a:focus { 7 | color: #333; 8 | } 9 | 10 | .z-button, 11 | .btn-group > .btn { 12 | .verGradient (#830000 , #6f2d2d); 13 | border-color: #6F1414; 14 | color: white; 15 | text-shadow: none; 16 | * , *:before , *:after { 17 | color: white; 18 | } 19 | 20 | [class ^= "icon-"] , [class *= " icon-"] { 21 | background-image: url("../bootstrap/img/glyphicons-halflings-white.png"); 22 | } 23 | 24 | &:hover , &:active, &:focus { 25 | background: #7d3434; 26 | border-color: #7b3e3e; 27 | color: white; 28 | } 29 | 30 | &:active { 31 | .boxShadow ('inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)'); 32 | } 33 | } 34 | 35 | .header { 36 | .boxShadow ('0 1px 0 #350C0C'); 37 | .verGradient (#532424 , #431B1B); 38 | border-bottom: 1px solid #5F2828; 39 | } 40 | 41 | .search { 42 | .z-bandbox-input { 43 | color: #8699ad; 44 | background: #431B1B; 45 | .boxShadow ('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 46 | &:focus { 47 | color: #431B1B; 48 | .boxShadow ('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 49 | } 50 | } 51 | 52 | .z-bandbox-button , .z-bandbox-button:hover { 53 | color: #8699ad; 54 | background: #431B1B; 55 | .boxShadow ('-2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 56 | } 57 | } 58 | 59 | 60 | .sidebar { 61 | > ul { 62 | border-top: 1px solid #661D1D; 63 | border-bottom: 1px solid #7B3E3E; 64 | 65 | 66 | .z-nav-content, 67 | .z-navitem-content { 68 | border-top: 1px solid #7B3E3E; 69 | border-bottom: 1px solid #661D1D; 70 | 71 | &:hover { 72 | background: #7D3434; 73 | } 74 | > .z-nav-info { 75 | background: #431B1B; 76 | } 77 | } 78 | 79 | 80 | .z-navitem-selected { 81 | > .z-navitem-content { 82 | .verGradient (#431B1B , #532424); 83 | &:hover { 84 | .verGradient (#431B1B , #532424); 85 | } 86 | } 87 | } 88 | 89 | ul { 90 | border-top: 1px solid #7B3E3E; 91 | background: #532424; 92 | 93 | .z-nav-content, 94 | .z-navitem-content { 95 | border-top: 1px solid #5D2B2B; 96 | border-bottom: 1px solid #431F1F; 97 | 98 | &:hover { 99 | color: #CCCCCC; 100 | background: #5D2B2B; 101 | } 102 | } 103 | .z-navitem-selected { 104 | > .z-navitem-content { 105 | background: #532424; 106 | 107 | &:hover { 108 | background: #532424; 109 | } 110 | } 111 | } 112 | } 113 | } 114 | } 115 | 116 | .user-nav { 117 | .z-menu-content, .z-menuitem-content { 118 | .verGradient (#532424 , #431B1B); 119 | &:hover { 120 | background: #431B1B; 121 | } 122 | } 123 | .z-menu-selected .z-menu-content { 124 | background: #431B1B; 125 | } 126 | } 127 | 128 | .navpp .z-menu-content:hover , .navpp .z-menuitem-content:hover , .navpp .z-menu-content:active , .navpp .z-menuitem-content:active { 129 | .verGradient (#532424 , #431B1B); 130 | } 131 | 132 | 133 | .search { 134 | .z-bandbox-input { 135 | .resetGradient(); 136 | color: #8699ad; 137 | background: #431B1B; 138 | .boxShadow ('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 139 | &:focus { 140 | color: #431B1B; 141 | .boxShadow ('2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 142 | } 143 | } 144 | 145 | .z-bandbox-button , .z-bandbox-button:hover { 146 | .resetGradient(); 147 | color: #8699ad; 148 | background: #431B1B; 149 | .boxShadow ('-2px 2px 3px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.2)'); 150 | } 151 | } 152 | .z-button:active, 153 | .z-button:hover, 154 | .z-button:focus { 155 | .resetGradient(); 156 | background: #6f2d2d; 157 | } 158 | .btn-tip.z-popup { 159 | .resetGradient(); 160 | background: #222; 161 | } 162 | .z-menubar { 163 | > ul { 164 | top: -5px; 165 | } 166 | .resetGradient(); 167 | .z-menu-content, 168 | .z-menuitem-content, 169 | .z-menu-selected .z-menu-content { 170 | .resetGradient(); 171 | background: #431B1B; 172 | border-color: #222; 173 | border-bottom-color: #000; 174 | 175 | &:hover { 176 | border-color: black; 177 | .resetGradient(); 178 | background: #431B1B; 179 | } 180 | } 181 | } 182 | -------------------------------------------------------------------------------- /src/main/webapp/applications/css/search.css.dsp: -------------------------------------------------------------------------------- 1 | <%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %><%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %><%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>.search .z-bandbox-input{font-size:12px;line-height:18px;${t:borderRadius('4px 0 0 4px') };padding:5px 10px 4px;border:0;width:120px;height:32px;margin:0}.search .z-bandbox-input:focus{border:0;color:#777;outline:0}.search .z-bandbox-button{border:0;height:32px;padding:9px}.search .z-bandbox-button:hover .z-bandbox-icon{opacity:1}.search .z-bandbox-icon{color:#FFF;opacity:.5} -------------------------------------------------------------------------------- /src/main/webapp/applications/css/search.less: -------------------------------------------------------------------------------- 1 | @import "~./zul/less/_header.less"; 2 | .search { 3 | .z-bandbox { 4 | &-input { 5 | font-size: 12px; 6 | line-height: 18px; 7 | .borderRadius(4px 0 0 4px); 8 | padding: 5px 10px 4px; 9 | border: 0; 10 | width: 120px; 11 | height: 32px; 12 | margin: 0px; 13 | &:focus { 14 | border: 0; 15 | color: #777777; 16 | outline: none; 17 | } 18 | } 19 | 20 | &-button { 21 | border: 0px; 22 | height: 32px; 23 | padding: 9px; 24 | &:hover { 25 | .z-bandbox-icon { 26 | opacity: 1; 27 | } 28 | } 29 | } 30 | 31 | &-icon { 32 | color: #FFF; 33 | opacity: 0.5; 34 | } 35 | } 36 | } 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/main/webapp/applications/css/sidebar.css.dsp: -------------------------------------------------------------------------------- 1 | <%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %><%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %><%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>.sidebar>ul{margin:10px 0 0;width:220px}.sidebar>ul .z-navitem-selected{position:relative}.sidebar>ul .z-navitem-selected>.z-navitem-content{${t:boxShadow('0 2px 4px rgba(0, 0, 0, 0.2) inset') }}.sidebar>ul .z-navitem-selected:after{font-family:FontAwesome;font-weight:normal;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f0d9";font-size:28px;color:#eee;display:inline-block;position:absolute;right:-1px;top:12px;z-index:35px}.sidebar>ul .z-nav-selected>.z-nav-content:before{display:none}.sidebar>ul ul{${t:boxShadow('0 0 3px rgba(0, 0, 0, 0.5) inset') }}.sidebar>ul ul .z-nav-content,.sidebar>ul ul .z-navitem-content{background:transparent;padding-left:25px}.sidebar>ul .z-nav-content,.sidebar>ul .z-navitem-content{padding:5px 0 10px 15px;display:block;background:transparent;height:42px;color:#aaa;border:0}.sidebar>ul .z-nav-content i,.sidebar>ul .z-navitem-content i{margin-right:10px;opacity:.5}.sidebar .z-nav-info{background:#333;margin:5px 20px 0 0;float:right;height:auto;width:auto;line-height:normal;padding:3px 5px 2px;box-shadow:0 1px 2px rgba(0,0,0,0.5) inset,0 1px 0 rgba(255,255,255,0.2)}.sidebar .z-navitem-image{display:none}.z-navitem-selected{z-index:30}.z-navitem-selected>a{z-index:-9}.z-navitem-selected>a .z-navitem-text{position:relative} -------------------------------------------------------------------------------- /src/main/webapp/applications/css/sidebar.less: -------------------------------------------------------------------------------- 1 | @import "~./zul/less/_header.less"; 2 | .sidebar { 3 | > ul { 4 | margin: 10px 0 0; 5 | width: 220px; 6 | .z-navitem-selected { 7 | position: relative; 8 | 9 | > .z-navitem-content { 10 | .boxShadow('0 2px 4px rgba(0, 0, 0, 0.2) inset'); 11 | } 12 | 13 | &:after { 14 | .baseIconFont(); 15 | 16 | content: "\f0d9"; 17 | font-size: 28px; 18 | color: #eeeeee; 19 | display: inline-block; 20 | position: absolute; 21 | right: -1px; 22 | top: 12px; 23 | z-index: 35px; 24 | } 25 | } 26 | 27 | .z-nav-selected > .z-nav-content:before { 28 | display: none; 29 | } 30 | 31 | ul { 32 | .boxShadow('0 0 3px rgba(0, 0, 0, 0.5) inset'); 33 | 34 | .z-nav-content, 35 | .z-navitem-content { 36 | background: transparent; 37 | padding-left: 25px; 38 | } 39 | } 40 | .z-nav-content, 41 | .z-navitem-content { 42 | padding: 5px 0 10px 15px; 43 | display: block; 44 | background: transparent; 45 | height: 42px; 46 | color: #AAAAAA; 47 | border: 0px; 48 | i { 49 | margin-right: 10px; 50 | opacity: 0.5; 51 | } 52 | } 53 | } 54 | .z-nav-info { 55 | background: #333333; 56 | margin: 5px 20px 0 0; 57 | float: right; 58 | height: auto; 59 | width: auto; 60 | line-height: normal; 61 | padding: 3px 5px 2px; 62 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.2); 63 | } 64 | 65 | .z-navitem-image { 66 | display: none; 67 | } 68 | } 69 | 70 | 71 | .z-navitem-selected { 72 | z-index: 30; 73 | > a { 74 | z-index: -9; 75 | .z-navitem-text { 76 | position: relative; 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/main/webapp/applications/css/user-nav.css.dsp: -------------------------------------------------------------------------------- 1 | <%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %><%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %><%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>.user-nav .z-menubar{border:0;background:transparent}.user-nav li{margin:0}.user-nav li:first-child a,.user-nav li:first-child:hover a{${t:applyCSS3('border-top-left-radius','4px') };${t:applyCSS3('border-bottom-left-radius','4px') }}.user-nav li:last-child a,.user-nav li:last-child:hover a{${t:applyCSS3('border-top-right-radius','4px') };${t:applyCSS3('border-bottom-right-radius','4px') }}.user-nav li a,.user-nav li.z-menu-selected>a{border:1px solid #ccc;${t:boxShadow('inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);') };border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);${t:borderRadius('0') };min-height:32px;line-height:23px}.user-nav li a:hover{${t:boxShadow('inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);') };border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);${t:borderRadius('0') }}.user-nav li a:hover span,.user-nav li a:hover i{color:#fff;opacity:1}.user-nav li a .icon{opacity:.5}.user-nav li a span{color:#999;text-shadow:none}.user-nav li.z-menu-selected>a span,.user-nav li.z-menu-selected>a i{color:#fff;opacity:1}.navpp.z-menupopup{background:#FFF;${t:borderRadius('5px') };${t:boxShadow('0 5px 10px rgba(0,0,0,0.2)') };padding:0}.navpp.z-menupopup .z-menupopup-content{padding:6px 0}.navpp.z-menupopup .z-menupopup-separator,.navpp.z-menupopup .z-menu-image,.navpp.z-menupopup .z-menuitem-image{display:none}.navpp.z-menupopup .z-menu-content,.navpp.z-menupopup .z-menuitem-content{padding:3px 20px;line-height:14px}.navpp.z-menupopup .z-menu-content *,.navpp.z-menupopup .z-menuitem-content *{text-shadow:none}.navpp.z-menupopup .z-menu-content:hover,.navpp.z-menupopup .z-menuitem-content:hover,.navpp.z-menupopup .z-menu-content:active,.navpp.z-menupopup .z-menuitem-content:active{color:#FFF;border-color:transparent;${t:borderRadius('0') };${t:boxShadow('none') }}.navpp.z-menupopup:before{position:absolute;top:-7px;left:9px;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #FFF;border-left:7px solid transparent;border-bottom-color:#FFF;content:''} -------------------------------------------------------------------------------- /src/main/webapp/applications/css/user-nav.less: -------------------------------------------------------------------------------- 1 | @import "~./zul/less/_header.less"; 2 | 3 | .user-nav { 4 | .z-menubar { 5 | border: 0; 6 | background: transparent; 7 | } 8 | li { 9 | margin: 0; 10 | 11 | &:first-child a, 12 | &:first-child:hover a { 13 | .applyCSS3('border-top-left-radius', '4px'); 14 | .applyCSS3('border-bottom-left-radius', '4px'); 15 | } 16 | 17 | &:last-child a, 18 | &:last-child:hover a { 19 | .applyCSS3('border-top-right-radius', '4px'); 20 | .applyCSS3('border-bottom-right-radius', '4px'); 21 | } 22 | 23 | a, &.z-menu-selected > a { 24 | border: 1px solid #ccc; 25 | .boxShadow('inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);'); 26 | border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 27 | .borderRadius('0'); 28 | min-height: 32px; 29 | line-height: 23px; 30 | } 31 | 32 | a { 33 | &:hover{ 34 | .boxShadow('inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);'); 35 | border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 36 | .borderRadius('0'); 37 | 38 | span, 39 | i { 40 | color: #FFFFFF; 41 | opacity: 1; 42 | } 43 | } 44 | .icon { 45 | opacity: 0.5; 46 | } 47 | span { 48 | color: #999; 49 | text-shadow: none; 50 | } 51 | } 52 | 53 | &.z-menu-selected > a span, 54 | &.z-menu-selected > a i { 55 | color: #FFFFFF; 56 | opacity: 1; 57 | } 58 | } 59 | } 60 | 61 | .navpp.z-menupopup { 62 | background: #FFF; 63 | .borderRadius('5px'); 64 | .boxShadow('0 5px 10px rgba(0,0,0,0.2)'); 65 | padding: 0; 66 | 67 | .z-menupopup-content { 68 | padding: 6px 0; 69 | } 70 | .z-menupopup-separator, 71 | .z-menu-image, 72 | .z-menuitem-image { 73 | display: none; 74 | } 75 | .z-menu-content, 76 | .z-menuitem-content { 77 | padding: 3px 20px; 78 | line-height: 14px; 79 | * { 80 | text-shadow: none; 81 | } 82 | &:hover, 83 | &:active { 84 | color: #FFF; 85 | border-color: transparent; 86 | .borderRadius('0'); 87 | .boxShadow('none'); 88 | } 89 | } 90 | &:before { 91 | position: absolute; 92 | top: -7px; 93 | left: 9px; 94 | display: inline-block; 95 | border-right: 7px solid transparent; 96 | border-bottom: 7px solid #FFF; 97 | border-left: 7px solid transparent; 98 | border-bottom-color: #FFF; 99 | content: ''; 100 | } 101 | } -------------------------------------------------------------------------------- /src/main/webapp/applications/img/av1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zkoss-demo/ui-examples/cdd598e723e532cebafdaf731e9955b7bee45506/src/main/webapp/applications/img/av1.jpg -------------------------------------------------------------------------------- /src/main/webapp/applications/img/av2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zkoss-demo/ui-examples/cdd598e723e532cebafdaf731e9955b7bee45506/src/main/webapp/applications/img/av2.jpg -------------------------------------------------------------------------------- /src/main/webapp/applications/img/av3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zkoss-demo/ui-examples/cdd598e723e532cebafdaf731e9955b7bee45506/src/main/webapp/applications/img/av3.jpg -------------------------------------------------------------------------------- /src/main/webapp/applications/img/top_zk_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zkoss-demo/ui-examples/cdd598e723e532cebafdaf731e9955b7bee45506/src/main/webapp/applications/img/top_zk_logo.png -------------------------------------------------------------------------------- /src/main/webapp/applications/js/jquery.peity.min.js: -------------------------------------------------------------------------------- 1 | // Peity jQuery plugin version 0.6.0 2 | // (c) 2011 Ben Pickles 3 | // 4 | // http://benpickles.github.com/peity/ 5 | // 6 | // Released under MIT license. 7 | (function(i,k){function o(a,h){var b=k.createElement("canvas");b.setAttribute("width",a*m);b.setAttribute("height",h*m);m!=1&&b.setAttribute("style","width:"+a+"px;height:"+h+"px");return b}var g=i.fn.peity=function(a,h){k.createElement("canvas").getContext&&this.each(function(){i(this).change(function(){var b=i.extend({},h),d=this;i.each(b,function(a,c){i.isFunction(c)&&(b[a]=c.call(d))});var f=i(this).html();g.graphers[a].call(this,i.extend({},g.defaults[a],b));i(this).trigger("chart:changed",f)}).trigger("change")}); 8 | return this};g.graphers={};g.defaults={};g.add=function(a,h,b){g.graphers[a]=b;g.defaults[a]=h};var m=window.devicePixelRatio||1;g.add("pie",{colours:["#FFF4DD","#FF9900"],delimeter:"/",diameter:16},function(a){var h=i(this),b=h.text().split(a.delimeter),d=parseFloat(b[0]),f=parseFloat(b[1]),b=-Math.PI/2,d=d/f*Math.PI*2,f=o(a.diameter,a.diameter),e=f.getContext("2d"),c=f.width/2;e.beginPath();e.moveTo(c,c);e.arc(c,c,c,d+b,d==0?Math.PI*2:b,!1);e.fillStyle=a.colours[0];e.fill();e.beginPath();e.moveTo(c, 9 | c);e.arc(c,c,c,b,d+b,!1);e.fillStyle=a.colours[1];e.fill();h.wrapInner(i("").hide()).append(f)});g.add("line",{colour:"#c6d9fd",strokeColour:"#4d89f9",strokeWidth:1,delimeter:",",height:16,max:null,min:0,width:32},function(a){var h=i(this),b=o(a.width,a.height),d=h.text().split(a.delimeter);d.length==1&&d.push(d[0]);var f=Math.max.apply(Math,d.concat([a.max])),e=Math.min.apply(Math,d.concat([a.min])),c=b.getContext("2d"),g=b.width,l=b.height,q=g/(d.length-1),f=l/(f-e),n=[],j;c.beginPath();c.moveTo(0, 10 | l+e*f);for(j=0;j").hide()).append(b)});g.add("bar",{colour:"#4D89F9",delimeter:",",height:16,max:null,min:0,width:32},function(a){var h=i(this),b=h.text().split(a.delimeter),d=Math.max.apply(Math, 11 | b.concat([a.max])),f=Math.min.apply(Math,b.concat([a.min])),e=o(a.width,a.height),c=e.getContext("2d"),g=e.height,d=g/(d-f),l=m/2,k=(e.width+l)/b.length;c.fillStyle=a.colour;for(a=0;a").hide()).append(e)})})(jQuery,document); 12 | 13 | -------------------------------------------------------------------------------- /src/main/webapp/applications/zk/content.zul: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 | 6 |
7 | 8 | +20% 9 |
10 |
11 | 36094 12 | Visits 13 |
14 | 15 | 16 |
17 | 18 | 0% 19 |
20 |
21 | 1433 22 | Users 23 |
24 | 25 | 26 |
27 | 28 | -50% 29 |
30 |
31 | 8650 32 | Orders 33 |
34 | 35 | 36 |
37 | 38 | +70% 39 |
40 |
41 | 8650 42 | Orders 43 |
44 | 45 | 46 |
47 |
48 | 49 | 50 | Site Statistics 51 |