Customizing Bootstrap Theme Demonstration"

From Documentation
Line 1: Line 1:
−
{{Template:UnderConstruction}}
+
<zk xmlns:n="native">
−
 
+
  <a label="RECENT" iconSclass="z-icon-rss orange" sclass="rcaption lighter"/>
−
 
+
  <tabbox sclass="rtab">
−
== Introduction ==
+
    <tabs>
−
ZK 7 is an upcoming big release focusing on HTML5 and CSS3. In our previous [http://blog.zkoss.org/index.php/2013/08/13/zk-7-new-theme-system-with-bootstrap-css-3/ blog], we demonstrated how to use ZK 7′s new theme system with Bootstrap & CSS3. And we also provided another [http://blog.zkoss.org/index.php/2013/09/03/zk-7-zk-components-x-bootstrap-3/ guide] with more details on how to integrate ZK components and Bootstrap 3. In this smalltalk, we will customize another theme to look like one coming from [https://wrapbootstrap.com/ {'''wrap'''}bootstrap].
+
      <tab label="Comments"/>
−
 
+
      <tab label="Members"/>
−
== Prerequisites ==
+
      <tab label="Tasks" selected="true"/>
−
* ZK 7.0.0-RC version or later
+
    </tabs>
−
* Bootstrap 3 knowledge, read [http://getbootstrap.com/getting-started/ here]
+
    <tabpanels>
−
* LESS language, read [http://lesscss.org/ here]
+
      <tabpanel>
−
 
+
        <vlayout>
−
== Design Template ==
+
          <grid height="300px" sclass="comments">
−
We picked [https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR Ace Template] from {'''wrap'''}bootstrap as our design template. In this demonstration, we will customize the Dashboard page with Pure ZK and CSS3.
+
            <columns>
−
 
+
              <column width="50px" height="50px"/>
−
[[File:AcePreview.png|659x387px]]
+
              <column height="50px"/>
−
 
+
            </columns>
−
 
+
            <rows>
−
 
+
              <row>
−
== Analyze Layout ==
+
                <div sclass="user">
−
The layout can be separated into 4 parts.
+
                  <image tooltiptext="Bob's Avatar" src="assets/avatars/avatar.png"/>
−
 
+
                </div>
−
[[File:CBTDLayout.png|640x480px]]
+
                <div sclass="body">
−
 
+
                  <a label="Bob Doe" href="#" sclass="name"/>
−
* Navbar
+
                  <a label="6 min" iconSclass="z-icon-time" sclass="time green" disabled="true"/>
−
** A brand int the left
+
                  <div sclass="text">
−
** A set of menu navigation in the right
+
                    <span class="z-icon-quote-left"/>
−
* Sidebar
+
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis &#8230;
−
** 4 shourtcut buttons
+
                  </div>
−
** Navigation bar
+
                  <div sclass="tools action">
−
** Collapsed button
+
                    <a iconSclass="z-icon-pencil blue bigger-125" href="#"/>
−
* Breadcrumbs
+
                    <a iconSclass="z-icon-trash red bigger-125" href="#"/>
−
** Breadcrumb
+
                  </div>
−
** Search input
+
                </div>
−
* Content
+
              </row>
−
** Header
+
              <row>
−
** Notification
+
                <div sclass="user">
−
** Infobox
+
                  <image tooltiptext="Jennifer's Avatar" src="assets/avatars/avatar1.png"/>
−
** Panel
+
                </div>
−
** Tab
+
                <div sclass="body">
−
 
+
                  <a label="Jennifer" href="#" sclass="name"/>
−
 
+
                  <a label="15 min" iconSclass="z-icon-time" sclass="time blue" disabled="true"/>
−
According to the analysis, we combined ZK components <tt>hlayout</tt> and <tt>vlayout</tt> to layout the the structure of the page, then assigned <tt>hflx="1"</tt> to auto adjust its width when resizing. Component <tt>include</tt> is used to include each part's content.
+
                  <div sclass="text">
−
<source lang="xml">
+
                    <span class="z-icon-quote-left"/>
−
<include src="navbar.zul"/>
+
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis &#8230;
−
<hlayout id="main" spacing="0">
+
                  </div>
−
<include src="sidebar.zul"/>
+
                  <div sclass="tools action">
−
<vlayout spacing="0" hflex="1">
+
                    <a iconSclass="z-icon-pencil blue bigger-125" href="#"/>
−
<include src="breadcrumbs.zul"/>
+
                    <a iconSclass="z-icon-trash red bigger-125" href="#"/>
−
<include src="content.zul"/>
+
                  </div>
−
</vlayout>
+
                </div>
−
</hlayout>
+
              </row>
−
</source>
+
              <row>
−
 
+
                <div sclass="user">
−
== Implement with ZK Component ==
+
                  <image tooltiptext="Joe's Avatar" src="assets/avatars/avatar2.png"/>
−
After constructed the basic layout, we can add ZK components to implement the content in each part.  
+
                </div>
−
 
+
                <div sclass="body">
−
[[File:CBTDImpl.png|640x480px]]
+
                  <a label="22 min" iconSclass="z-icon-time" sclass="time orange" disabled="true"/>
−
 
+
                  <a label="Bob " href="#" sclass="name"/>
−
And it will look like this:
+
                  <div sclass="text">
−
 
+
                    <span class="z-icon-quote-left"/>
−
[[File:CBTDBefore.png|489x296px]]
+
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis &#8230;
−
 
+
                  </div>
−
== Customize Look And Feel ==
+
                  <div sclass="tools action">
−
In this section, we will mention the necessary preparations and some  customized components as examples. In the end of the section are some tips for customization which contains the problem user may encounter when in customization.
+
                    <a iconSclass="z-icon-pencil blue bigger-125" href="#"/>
−
 
+
                    <a iconSclass="z-icon-trash red bigger-125" href="#"/>
−
[[File:CBTDAfter.png|489x296px]]
+
                  </div>
−
 
+
                </div>
−
=== Fonts ===
+
              </row>
−
Before we customize the look and feel, we need to import the Open Sans font from google server or download them to your folder directly and import it.
+
              <row>
−
 
+
                <div sclass="user">
−
<source lang="xml">
+
                  <image tooltiptext="Rita's Avatar" src="assets/avatars/avatar3.png"/>
−
<?link href="css/fonts.css" rel="stylesheet" type="text/css"?>
+
                </div>
−
</source>
+
                <div sclass="body">
−
 
+
                  <a label="Rita" href="#" sclass="name"/>
−
=== Button ===
+
                  <a label="55 min" iconSclass="z-icon-time" sclass="time red" disabled="true"/>
−
We mimic the one from bootstrap and ace template.
+
                  <div sclass="text">
−
<source lang="css">
+
                    <span class="z-icon-quote-left"/>
−
.z-button {
+
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis &#8230;
−
position: relative;
+
                  </div>
−
padding: 3px 12px;
+
                  <div sclass="tools action">
−
border-radius: 0;
+
                    <a iconSclass="z-icon-pencil blue bigger-125" href="#"/>
−
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+
                    <a iconSclass="z-icon-trash red bigger-125" href="#"/>
−
min-height: 0;
+
                  </div>
−
color: #FFF !important;
+
                </div>
−
.transition(~"all ease .15s");
+
              </row>
−
+
            </rows>
−
&:active {
+
          </grid>
−
top: 1px;
+
          <div align="center">
−
left: 1px;
+
            <span sclass="z-icon-comments icon-2x green"/>
−
}
+
            <a href="#" label="&#032;See all comments&#032;" sclass="link">
−
+
              <span sclass="z-icon-arrow-right"/>
−
&, &:hover, &:focus, &:active {
+
            </a>
−
background-image: none;
+
          </div>
−
}
+
        </vlayout>
−
 
+
      </tabpanel>
−
/* Icon in the button */
+
      <tabpanel>
−
> [class*="z-icon-"] {
+
        <vlayout>
−
display: inline;
+
          <hlayout style="white-space: normal;" spacing="0" >
−
margin-right: 4px;
+
            <div sclass="member">
−
}
+
              <div sclass="user">
−
}
+
                <image tooltiptext="Bob Doe's avatar" src="assets/avatars/user.jpg" />
−
</source>
+
              </div>
−
 
+
              <div sclass="body">
−
=== Progressmeter ===
+
                <a label="Bob Doe" href="#" sclass="name"/>
−
To customizing <tt>progressmeter</tt>, we change its height and background color, remove the border line.
+
                <a label="20 min" iconSclass="z-icon-time" sclass="time green" disabled="true"/>
−
 
+
                <div sclass="relin">
−
[[File:CBTDProgressMeter.png]]
+
                  <span sclass="label label-warning label-sm">pending</span>
−
 
+
                  <div sclass="relin">
−
<source lang="xml">
+
                    <button sclass="btn btn-minier bigger btn-yellow btn-no-border" iconSclass="z-icon-angle-down icon-only bigger-120"
−
<progressmeter value="65" width="100%"/>
+
                    popup="statustt, position=after_end"/>
−
</source>
+
                  </div>
−
 
+
                </div>
−
<source lang="css">
+
              </div>
−
.z-progressmeter {
+
            </div>
−
  height: 9px;
+
            <div sclass="member">
−
  border: 0;
+
              <div class="user">
−
  background-image: none;
+
                <image tooltiptext="Joe Doe's avatar" src="assets/avatars/avatar2.png" />
−
  background-color: #DADADA;
+
              </div>
−
 
+
              <div sclass="body">
−
  &-image {
+
                <a label="Joe Doe" href="#" sclass="name"/>
−
    display: inline-block;
+
                <a label="1 hour" iconSclass="z-icon-time" sclass="time green" disabled="true"/>
−
    background-color: #2A91D8;
+
                <div sclass="relin">
−
    background-image: none;
+
                  <span sclass="label label-warning label-sm">pending</span>
−
  }
+
                  <div sclass="relin">
−
}
+
                    <button sclass="btn btn-minier bigger btn-yellow btn-no-border" iconSclass="z-icon-angle-down icon-only bigger-120"
−
</source>
+
                    popup="statustt, position=after_end"/>
−
 
+
                  </div>
−
 
+
                </div>
−
=== Tooltip ===
+
              </div>
−
The ZK tooltip's look is totally different from the demo. The easiest way to customize tooltip's look is assigneing [http://books.zkoss.org/wiki/ZK_Style_Guide/ZK_Class_Concept zclass] <tt>tooltip</tt> to it.
+
            </div>
−
 
+
            <div sclass="member">
−
[[File:CBTDTooltip.png]]
+
              <div sclass="user">
−
 
+
                <image tooltiptext="Jim Doe's avatar" src="assets/avatars/avatar.png" />
−
<source lang="xml">
+
              </div>
−
<popup zclass="tooltip" sclass="left tooltip-success">
+
              <div sclass="body">
−
<span zclass="tooltip-arrow"/>
+
                <a label="Jim Doe" href="#" sclass="name"/>
−
<label zclass="tooltip-inner" value="Mark as done"/>
+
                <a label="2 hour" iconSclass="z-icon-time" sclass="time green" disabled="true"/>
−
</popup>
+
                <div sclass="relin">
−
</source>
+
                  <span class="label label-warning label-sm">pending</span>
−
 
+
                  <div sclass="relin">
−
The <tt>span</tt> componet with sclass "tooltip-arrow" inside the popup is to display as an arrow of the tooltip.
+
                    <button sclass="btn btn-minier bigger btn-yellow btn-no-border" iconSclass="z-icon-angle-down icon-only bigger-120"  
−
 
+
                    popup="statustt, position=after_end"/>
−
[[File:CBTDTooltipCss.png]]
+
                  </div>
−
 
+
                </div>
−
The bootstrap tooltip's opacity level is zero. We style the opacity to 1 to make it visible when the tooltip show up.
+
              </div>
−
 
+
            </div>
−
<source lang="css">
+
            <div sclass="member">
−
.tooltip {
+
              <div sclass="user">
−
  .opacity(1) !important;
+
                <image tooltiptext="Alex Doe's avatar" src="assets/avatars/avatar5.png" />
−
}
+
              </div>
−
.tooltip-success.tooltip {
+
              <div sclass="body">
−
  > .tooltip-content >.tooltip-inner {
+
                <a label="Alex Doe" href="#" sclass="name"/>
−
  background-color: @tooltip-success-color;
+
                <a label="3 hour" iconSclass="z-icon-time" sclass="time green" disabled="true"/>
−
  color:#FFF;
+
                <div sclass="relin">
−
  text-shadow:1px 1px 0 rgba(60,100,20,0.3);
+
                  <span sclass="label label-danger label-sm">blocked</span>
−
  border-radius: 0;
+
                </div>
−
  }
+
              </div>
−
  &.left .tooltip-arrow {
+
            </div>
−
    border-left-color: @tooltip-success-color;
+
            <div sclass="member">
−
  }
+
              <div sclass="user">
−
}
+
                <image tooltiptext="Bob Doe's avatar" src="assets/avatars/avatar2.png" />
−
</source>
+
              </div>
−
 
+
              <div sclass="body">
−
=== Tabbox ===
+
                <a label="Bob Doe" href="#" sclass="name"/>
−
When Tabbox is in the default orientation, the row of  tabs displayed on top left side.
+
                <a label="6 hour" iconSclass="z-icon-time" sclass="time green" disabled="true"/>
−
 
+
                <div sclass="relin">
−
[[File:CBTDTabboxBefore.png]]
+
                  <span sclass="label label-success label-sm arrowed-in">approved</span>
−
 
+
                </div>
−
<source lang="xml">
+
              </div>
−
<a label="RECENT" iconSclass="z-icon-rss orange icon-mr8" disabled="true"
+
            </div>
−
    style="font-size: 17px; font-weight: lighter;"/>
+
            <div sclass="member">
−
<tabbox sclass="rtab">
+
              <div sclass="user">
−
<tabs>
+
                <image tooltiptext="Susan's avatar" src="assets/avatars/avatar3.png" />
−
<tab label="Tasks"/>
+
              </div>
−
<tab label="Members"/>
+
              <div sclass="body">
−
<tab label="Comments"/>
+
                <a label="Susan" href="#" sclass="name"/>
−
</tabs>
+
                <a label="yesterday" iconSclass="z-icon-time" sclass="time green" disabled="true"/>
−
<tabpanels>
+
                <div sclass="relin">
−
<tabpanel><!-- Tasks content --></tabpanel>
+
                  <span sclass="label label-success label-sm arrowed-in">approved</span>
−
<tabpanel><!-- Menbers content --></tabpanel>
+
                </div>
−
<tabpanel><!-- Comments content --></tabpanel>
+
              </div>
−
</tabpanels>
+
            </div>
−
</tabbox>
+
            <div sclass="member">
−
</source>
+
              <div sclass="user">
−
 
+
                <image tooltiptext="Phil Doe's avatar" src="assets/avatars/avatar4.png" />
−
If we want to move the tabs to the top right side, we can float each tab to the right.
+
              </div>
−
 
+
              <div sclass="body">
−
[[File:CBTDTabboxFloat.png]]
+
                <a label="Phil Doe" href="#" sclass="name"/>
−
 
+
                <a label="2 days ago" iconSclass="z-icon-time" sclass="time green" disabled="true"/>
−
<source lang="css" high=3>
+
                <div sclass="relin">
−
.rtab.z-tabbox {
+
                  <span sclass="label label-info label-sm arrowed-in arrowed-in-right">online</span>
−
    .z-tab {
+
                </div>
−
      float: right;
+
              </div>
−
    }
+
            </div>
−
}
+
            <div sclass="member">
−
</source>
+
              <div sclass="user">
−
 
+
                <image tooltiptext="Alexa Doe's avatar" src="assets/avatars/avatar1.png" />
−
After floated each tab to the right, the first tab will be pulled to the rightmost side. So the order of tabs should be inversed, and the last tab should be selected as default.
+
              </div>
−
 
+
              <div sclass="body">
−
[[File:CBTDTabboxInverse.png]]
+
                <a label="Alexa Doe" href="#" sclass="name"/>
−
 
+
                <a label="3 days ago" iconSclass="z-icon-time" sclass="time green" disabled="true"/>
−
<source lang="xml">
+
                <div sclass="relin">
−
<a label="RECENT" iconSclass="z-icon-rss orange icon-mr8" disabled="true"
+
                  <span sclass="label label-success label-sm arrowed-in">approved</span>
−
    style="font-size: 17px; font-weight: lighter;"/>
+
                </div>
−
<tabbox sclass="rtab">
+
              </div>
−
<tabs>
+
            </div>
−
<tab label="Comments"/>
+
          </hlayout>
−
<tab label="Members"/>
+
        <div align="center">
−
<tab label="Tasks" selected="true"/>
+
          <span sclass="z-icon-group icon-2x green"/>
−
</tabs>
+
          <a href="#" label="&#032;See all members&#032;" sclass="link">
−
<tabpanels>
+
            <span sclass="z-icon-arrow-right"/>
−
<tabpanel><!-- Comments content --></tabpanel>
+
          </a>
−
<tabpanel><!-- Menbers content --></tabpanel>
+
        </div>
−
<tabpanel><!-- Tasks content --></tabpanel>
+
        <popup id="statustt" sclass="cog" style="margin-left:8px">
−
</tabpanels>
+
          <a iconSclass="z-icon-ok green bigger-110" tooltip="aprpp, position=end_center, delay=0"/>
−
</tabbox>
+
          <a iconSclass="z-icon-remove orange bigger-110" tooltip="rejpp, position=end_center, delay=0"/>
−
</source>
+
          <a iconSclass="z-icon-trash red bigger-110" tooltip="trapp, position=end_center, delay=0"/>
−
 
+
        </popup>
−
The header and tabbox need be displayed horizontally side by side, so tabbox's position should be absolute and set top to zero.
+
        <popup id="aprpp" zclass="tooltip" sclass="right tooltip-success">
−
 
+
          <span zclass="tooltip-arrow"/>
−
<source lang="css">
+
          <label zclass="tooltip-inner" value="Approve"/>
−
.rtab.z-tabbox {
+
        </popup>
−
    position: absolute;
+
        <popup id="rejpp" zclass="tooltip" sclass="right tooltip-warning">
−
    top: 0;
+
          <span zclass="tooltip-arrow"/>
−
    ...
+
          <label zclass="tooltip-inner" value="Reject"/>
−
</source>
+
        </popup>
−
 
+
        <popup id="trapp" zclass="tooltip" sclass="right tooltip-error">
−
[[File:CBTDTabboxAbs.png]]
+
          <span zclass="tooltip-arrow"/>
−
 
+
          <label zclass="tooltip-inner" value="Delete"/>
−
Finally, customize the look and feel.
+
        </popup>
−
 
+
        </vlayout>
−
[[File:CBTDTabboxAfter.png]]
+
      </tabpanel>
−
 
+
      <tabpanel>
−
== Functionality Code ==
+
        <a label="Sortable Lists" iconSclass="z-icon-list" disabled="true" sclass="green lighter rcaption"/>
−
 
+
        <listbox id="lb" sclass="task" checkmark="true" multiple="true">
−
=== Add open class to navbar menu ===
+
          <listhead>
−
We declare an event handler in popup which will be notified when onOpen event occurs, it will toggle the open sclass to the anchor component.
+
              <listheader/>
−
So the anchor's background will be darken when its popup is opened.
+
              <listheader width="100px"/>
−
 
+
          </listhead>
−
<source lang="xml">
+
          <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-orange">
−
<a id="atask" iconSclass="z-icon-tasks" popup="taskpp, position=after_end" sclass="grey">
+
            <listcell label="Answering customer questions" sclass="text"/>
−
    ...
+
            <listcell>
−
</a>
+
              <n:div class="pull-right easy-pie-chart percentage" data-size="30" data-color="#ECCB71" data-percent="42"
−
<popup id="taskpp" sclass="tasktodo" width="240px" onOpen="toggleOpenSclass(event, atask);">
+
              style="width:30px;height:30px;line-height:30px;">
−
    ...
+
                <n:span class="percent">42</n:span>%
−
</popup>
+
              </n:div>
−
<zscript><![CDATA[
+
            </listcell>
−
import org.zkoss.zk.ui.Component;
+
          </listitem>
−
import org.zkoss.zk.ui.event.OpenEvent;
+
          <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-red">
−
 
+
            <listcell label="Fixing bugs" sclass="text"/>
−
// Toggle open sclass to the component
+
            <listcell>
−
void toggleOpenSclass(OpenEvent event, Component comp) {
+
              <div sclass="pull-right action">
−
String scls = comp.getSclass();
+
                <a iconSclass="z-icon-pencil blue" href="#"/>
−
if (event.isOpen()) {
+
                <a iconSclass="z-icon-trash red" href="#"/>
−
comp.setSclass(scls + " open");
+
                <a iconSclass="z-icon-flag green" href="#"/>
−
} else {
+
              </div>
−
comp.setSclass(scls.replace(" open", ""));
+
            </listcell>
−
}
+
          </listitem>
−
}
+
          <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-default">
−
]]></zscript>
+
            <listcell label="Adding new features" sclass="text"/>
−
</source>
+
            <listcell/>
−
 
+
          </listitem>
−
=== Implement Collapse Mechanism ===
+
          <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-blue">
−
The sidebar is collapsible, user can click the button in the bottom of navbar to collapse or expand sidebar. Like the below picture shows.
+
            <listcell label="Upgrading scripts used in template" sclass="text"/>
−
 
+
            <listcell>
−
[[File:Collapsible.png|640x480px]]
+
              <button sclass="btn btn-minier bigger btn-primary pull-right" iconSclass="z-icon-cog"
−
 
+
                popup="cogtt, position=after_end"/>
−
So we need to declare <tt>toggleSidebarCollapsed()</tt> to proceed the actions. As the below code shows:
+
            </listcell>
−
 
+
          </listitem>
−
<source lang="java">
+
          <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-grey">
−
void toggleSidebarCollapsed() {
+
            <listcell label="Add new skins" sclass="text"/>
−
if (!navbar.isCollapsed()) {
+
            <listcell/>
−
    navbar.setCollapsed(true);
+
          </listitem>
−
    calitem.setTooltip("");
+
          <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-green">
−
sidebar.setSclass("sidebar sidebar-min");
+
            <listcell label="Updating server software up" sclass="text"/>
−
toggler.setIconSclass("z-icon-double-angle-right");
+
            <listcell/>
−
} else {
+
          </listitem>
−
    navbar.setCollapsed(false);
+
          <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-pink">
−
    calitem.setTooltip("calpp, position=end_center, delay=0");
+
            <listcell label="Cleaning up" sclass="text"/>
−
        sidebar.setSclass("sidebar");
+
            <listcell/>
−
        toggler.setIconSclass("z-icon-double-angle-left");
+
          </listitem>
−
}
+
        </listbox>
−
Clients.resize(main);
+
        <popup id="cogtt" sclass="cog">
−
}
+
          <a iconSclass="z-icon-ok green bigger-110" tooltip="markpp, position=start_center, delay=0"/>
−
</source>
+
          <a iconSclass="z-icon-trash red bigger-110" tooltip="delepp, position=start_center, delay=0"/>
−
 
+
        </popup>
−
Because <tt>Navbar</tt> is collapsible, <tt>isCollapsed()</tt> can determine whether <tt>navbar</tt> is collapsed or not. If not, we can easily call <tt>setCollapsed(true)</tt> to collapse it. When <tt>navbar</tt> is collapsed, its children only appear with icon and badge. The text part will popup when mouse hover the icon. Next, we need remove the tooltip of <tt>Navitem</tt> to prevent it show up with text when hovering. Then add <tt>sidebar-min</tt> class to <tt>sidebar</tt> and change the toggler's icon. In the end, <tt>Clients.resize(main)</tt> will force the client to recalculate the size of the main content.
+
        <popup id="markpp" zclass="tooltip" sclass="tooltip-success left">
−
 
+
          <span zclass="tooltip-arrow"/>
−
The shortcuts also need to be collapsed, so it needs an additional set of collapsed shortcuts to display when the sidebar collapsed. If user's mouse hovers the collapsed shortcuts, the expand shortcuts will appear.
+
          <label zclass="tooltip-inner" value="Mark as done"/>
−
 
+
        </popup>
−
[[File:CBTDShortcutsFun.png]]
+
        <popup id="delepp" zclass="tooltip" sclass="tooltip-error left">
−
 
+
          <span zclass="tooltip-arrow"/>
−
<source lang="xml">
+
          <label zclass="tooltip-inner" value="Delete"/>
−
<div class="shortcuts">
+
        </popup>
−
<div class="shortcuts-expanded">
+
        <zscript><![CDATA[
−
<button type="button" class="btn-success" iconSclass="z-icon-signal"/>
+
          import java.util.*;
−
<button type="button" class="btn-info" iconSclass="z-icon-pencil"/>
+
          import org.zkoss.zul.*;
−
<button type="button" class="btn-warning" iconSclass="z-icon-group"/>
+
         
−
<button type="button" class="btn-danger" iconSclass="z-icon-cogs"/>
+
          List children = lb.getChildren();
−
</div>
+
          void doDrop(DropEvent event, Component droped) {
−
<div class="shortcuts-collapsed">
+
            Component dragged = event.getDragged();
−
<button type="button" class="btn-success"/>
+
            int from = children.indexOf(dragged);
−
<button type="button" class="btn-info"/>
+
            int to = children.indexOf(droped);
−
<button type="button" class="btn-warning"/>
+
            droped.getParent().insertBefore(dragged, droped);
−
<button type="button" class="btn-danger"/>
+
          }
−
</div>
+
        ]]></zscript>
−
</div>
+
      </tabpanel>
−
</source>
+
    </tabpanels>
 +
  </tabbox>
 +
</zk>

Revision as of 14:45, 13 November 2013

<zk xmlns:n="native"> 

 <a label="RECENT" iconSclass="z-icon-rss orange" sclass="rcaption lighter"/>
 <tabbox sclass="rtab">
   <tabs>
     <tab label="Comments"/>
     <tab label="Members"/>
     <tab label="Tasks" selected="true"/>
   </tabs>
   <tabpanels>
     <tabpanel>
       <vlayout>
         <grid height="300px" sclass="comments">
           <columns>
             <column width="50px" height="50px"/>
             <column height="50px"/>
           </columns>
           <rows>
             <row>

                 <image tooltiptext="Bob's Avatar" src="assets/avatars/avatar.png"/>

                 <a label="Bob Doe" href="#" sclass="name"/>
                 <a label="6 min" iconSclass="z-icon-time" sclass="time green" disabled="true"/>

                   
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis …

                   <a iconSclass="z-icon-pencil blue bigger-125" href="#"/>
                   <a iconSclass="z-icon-trash red bigger-125" href="#"/>

             </row>
             <row>

                 <image tooltiptext="Jennifer's Avatar" src="assets/avatars/avatar1.png"/>

                 <a label="Jennifer" href="#" sclass="name"/>
                 <a label="15 min" iconSclass="z-icon-time" sclass="time blue" disabled="true"/>

                   
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis …

                   <a iconSclass="z-icon-pencil blue bigger-125" href="#"/>
                   <a iconSclass="z-icon-trash red bigger-125" href="#"/>

             </row>
             <row>

                 <image tooltiptext="Joe's Avatar" src="assets/avatars/avatar2.png"/>

                 <a label="22 min" iconSclass="z-icon-time" sclass="time orange" disabled="true"/>
                 <a label="Bob " href="#" sclass="name"/>

                   
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis …

                   <a iconSclass="z-icon-pencil blue bigger-125" href="#"/>
                   <a iconSclass="z-icon-trash red bigger-125" href="#"/>

             </row>
             <row>

                 <image tooltiptext="Rita's Avatar" src="assets/avatars/avatar3.png"/>

                 <a label="Rita" href="#" sclass="name"/>
                 <a label="55 min" iconSclass="z-icon-time" sclass="time red" disabled="true"/>

                   
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis …

                   <a iconSclass="z-icon-pencil blue bigger-125" href="#"/>
                   <a iconSclass="z-icon-trash red bigger-125" href="#"/>

             </row>
           </rows>
         </grid>

           
           <a href="#" label=" See all comments " sclass="link">
             
           </a>

       </vlayout>
     </tabpanel>
     <tabpanel>
       <vlayout>
         <hlayout style="white-space: normal;" spacing="0" >

               <image tooltiptext="Bob Doe's avatar" src="assets/avatars/user.jpg" />

               <a label="Bob Doe" href="#" sclass="name"/>
               <a label="20 min" iconSclass="z-icon-time" sclass="time green" disabled="true"/>

                 pending

                   <button sclass="btn btn-minier bigger btn-yellow btn-no-border" iconSclass="z-icon-angle-down icon-only bigger-120" 
                   popup="statustt, position=after_end"/>

               <image tooltiptext="Joe Doe's avatar" src="assets/avatars/avatar2.png" />

               <a label="Joe Doe" href="#" sclass="name"/>
               <a label="1 hour" iconSclass="z-icon-time" sclass="time green" disabled="true"/>

                 pending

                   <button sclass="btn btn-minier bigger btn-yellow btn-no-border" iconSclass="z-icon-angle-down icon-only bigger-120" 
                   popup="statustt, position=after_end"/>

               <image tooltiptext="Jim Doe's avatar" src="assets/avatars/avatar.png" />

               <a label="Jim Doe" href="#" sclass="name"/>
               <a label="2 hour" iconSclass="z-icon-time" sclass="time green" disabled="true"/>

                 pending

                   <button sclass="btn btn-minier bigger btn-yellow btn-no-border" iconSclass="z-icon-angle-down icon-only bigger-120" 
                   popup="statustt, position=after_end"/>

               <image tooltiptext="Alex Doe's avatar" src="assets/avatars/avatar5.png" />

               <a label="Alex Doe" href="#" sclass="name"/>
               <a label="3 hour" iconSclass="z-icon-time" sclass="time green" disabled="true"/>

                 blocked

               <image tooltiptext="Bob Doe's avatar" src="assets/avatars/avatar2.png" />

               <a label="Bob Doe" href="#" sclass="name"/>
               <a label="6 hour" iconSclass="z-icon-time" sclass="time green" disabled="true"/>

                 approved

               <image tooltiptext="Susan's avatar" src="assets/avatars/avatar3.png" />

               <a label="Susan" href="#" sclass="name"/>
               <a label="yesterday" iconSclass="z-icon-time" sclass="time green" disabled="true"/>

                 approved

               <image tooltiptext="Phil Doe's avatar" src="assets/avatars/avatar4.png" />

               <a label="Phil Doe" href="#" sclass="name"/>
               <a label="2 days ago" iconSclass="z-icon-time" sclass="time green" disabled="true"/>

                 online

               <image tooltiptext="Alexa Doe's avatar" src="assets/avatars/avatar1.png" />

               <a label="Alexa Doe" href="#" sclass="name"/>
               <a label="3 days ago" iconSclass="z-icon-time" sclass="time green" disabled="true"/>

                 approved

         </hlayout>

         
         <a href="#" label=" See all members " sclass="link">
           
         </a>

       <popup id="statustt" sclass="cog" style="margin-left:8px">
         <a iconSclass="z-icon-ok green bigger-110" tooltip="aprpp, position=end_center, delay=0"/>
         <a iconSclass="z-icon-remove orange bigger-110" tooltip="rejpp, position=end_center, delay=0"/>
         <a iconSclass="z-icon-trash red bigger-110" tooltip="trapp, position=end_center, delay=0"/>
       </popup>
       <popup id="aprpp" zclass="tooltip" sclass="right tooltip-success">
         
         <label zclass="tooltip-inner" value="Approve"/>
       </popup>
       <popup id="rejpp" zclass="tooltip" sclass="right tooltip-warning">
         
         <label zclass="tooltip-inner" value="Reject"/>
       </popup>
       <popup id="trapp" zclass="tooltip" sclass="right tooltip-error">
         
         <label zclass="tooltip-inner" value="Delete"/>
       </popup>
       </vlayout>
     </tabpanel>
     <tabpanel>
       <a label="Sortable Lists" iconSclass="z-icon-list" disabled="true" sclass="green lighter rcaption"/>
       <listbox id="lb" sclass="task" checkmark="true" multiple="true">
         <listhead>
             <listheader/>
             <listheader width="100px"/>
         </listhead>
         <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-orange">
           <listcell label="Answering customer questions" sclass="text"/>
           <listcell>
             <n:div class="pull-right easy-pie-chart percentage" data-size="30" data-color="#ECCB71" data-percent="42" 
             style="width:30px;height:30px;line-height:30px;">
               <n:span class="percent">42</n:span>%
             </n:div>
           </listcell>
         </listitem>
         <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-red">
           <listcell label="Fixing bugs" sclass="text"/>
           <listcell>

               <a iconSclass="z-icon-pencil blue" href="#"/>
               <a iconSclass="z-icon-trash red" href="#"/>
               <a iconSclass="z-icon-flag green" href="#"/>

           </listcell>
         </listitem>
         <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-default">
           <listcell label="Adding new features" sclass="text"/>
           <listcell/>
         </listitem>
         <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-blue">
           <listcell label="Upgrading scripts used in template" sclass="text"/>
           <listcell>
             <button sclass="btn btn-minier bigger btn-primary pull-right" iconSclass="z-icon-cog"
               popup="cogtt, position=after_end"/>
           </listcell>
         </listitem>
         <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-grey">
           <listcell label="Add new skins" sclass="text"/>
           <listcell/>
         </listitem>
         <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-green">
           <listcell label="Updating server software up" sclass="text"/>
           <listcell/>
         </listitem>
         <listitem draggable="true" droppable="true" onDrop="doDrop(event,self);" sclass="task-pink">
           <listcell label="Cleaning up" sclass="text"/>
           <listcell/>
         </listitem>
       </listbox>
       <popup id="cogtt" sclass="cog">
         <a iconSclass="z-icon-ok green bigger-110" tooltip="markpp, position=start_center, delay=0"/>
         <a iconSclass="z-icon-trash red bigger-110" tooltip="delepp, position=start_center, delay=0"/>
       </popup>
       <popup id="markpp" zclass="tooltip" sclass="tooltip-success left">
         
         <label zclass="tooltip-inner" value="Mark as done"/>
       </popup>
       <popup id="delepp" zclass="tooltip" sclass="tooltip-error left">
         
         <label zclass="tooltip-inner" value="Delete"/>
       </popup>
       <zscript><![CDATA[
         import java.util.*;
         import org.zkoss.zul.*;
         
         List children = lb.getChildren();
         void doDrop(DropEvent event, Component droped) {
           Component dragged = event.getDragged();
           int from = children.indexOf(dragged);
           int to = children.indexOf(droped);
           droped.getParent().insertBefore(dragged, droped);
         }
       ]]></zscript>
     </tabpanel>
   </tabpanels>
 </tabbox>

</zk>

Retrieved from "https://www.zkoss.org/_w/index.php?title=Small_Talks/2013/November/Customizing_Bootstrap_Theme_Demonstration&oldid=40510"