diff options
8 files changed, 184 insertions, 49 deletions
diff --git a/WebContent/ITMILL/themes/sampler/sampler/styles.css b/WebContent/ITMILL/themes/sampler/sampler/styles.css index 899ee9ceda..70e1ed7eb5 100644 --- a/WebContent/ITMILL/themes/sampler/sampler/styles.css +++ b/WebContent/ITMILL/themes/sampler/sampler/styles.css @@ -4,7 +4,7 @@ #sampler { background-color: white; } -#sampler .i-expandlayout-topbar { +#sampler .i-orderedlayout-topbar { border-bottom: 1px solid #999; } @@ -23,6 +23,11 @@ #sampler .i-button-screenshot { border: 3px solid #eeeeee; + overflow: hidden; +} +#sampler .i-button-screenshot img { + margin-top: -2px; + margin-left: -3px; } #sampler tr.i-table-row-section { @@ -35,6 +40,10 @@ font-weight: bold; } +#sampler .i-panel-content-light { + border-top: 0px; +} + #sampler .feature-main { padding: 20px; } @@ -51,6 +60,10 @@ padding: 20px; line-height: 20px; } +#sampler .feature-info div.i-link a { + color: white; + line-height: 20px; +} #sampler .feature-name { font-size: 22px; font-weight: bold; diff --git a/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java b/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java index f8b0014ffa..d96a57f7e1 100644 --- a/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java +++ b/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java @@ -20,6 +20,7 @@ import com.itmill.toolkit.demo.sampler.features.blueprints.ProminentPrimaryActio import com.itmill.toolkit.demo.sampler.features.buttons.ButtonLink; import com.itmill.toolkit.demo.sampler.features.buttons.ButtonPush; import com.itmill.toolkit.demo.sampler.features.buttons.ButtonSwitch; +import com.itmill.toolkit.demo.sampler.features.commons.Tooltips; import com.itmill.toolkit.demo.sampler.features.link.LinkCurrentWindow; import com.itmill.toolkit.demo.sampler.features.link.LinkNoDecorations; import com.itmill.toolkit.demo.sampler.features.link.LinkSizedWindow; @@ -41,6 +42,7 @@ import com.itmill.toolkit.ui.Embedded; import com.itmill.toolkit.ui.ExpandLayout; import com.itmill.toolkit.ui.GridLayout; import com.itmill.toolkit.ui.Label; +import com.itmill.toolkit.ui.Panel; import com.itmill.toolkit.ui.SplitPanel; import com.itmill.toolkit.ui.Table; import com.itmill.toolkit.ui.Tree; @@ -62,6 +64,12 @@ public class SamplerApplication extends Application { new FeatureSet("Components", new Feature[] { // Components + + new FeatureSet("Commons", + new Feature[] { new Tooltips(), // tooltips + + }), + new FeatureSet("Buttons", new Feature[] { new ButtonPush(), // basic new ButtonLink(), // link @@ -288,6 +296,7 @@ public class SamplerApplication extends Application { // Handle REST -style urls public DownloadStream handleURI(URL context, String relativeUri) { + Feature f = features.getFeatureByPath(relativeUri); if (f != null) { setFeature(f); @@ -457,6 +466,7 @@ public class SamplerApplication extends Application { public void show(Component c) { if (getCompositionRoot() != c) { + c.setSizeFull(); setCompositionRoot(c); } } @@ -545,24 +555,28 @@ public class SamplerApplication extends Application { } - private class FeatureGrid extends GridLayout implements FeatureList { + private class FeatureGrid extends Panel implements FeatureList { + + GridLayout grid = new GridLayout(5, 1); FeatureGrid() { - super(5, 1); - setWidth("100%"); - setMargin(true); - setSpacing(true); + setSizeFull(); + getLayout().setWidth("100%"); + grid.setWidth("100%"); + grid.setSpacing(true); + addComponent(grid); + setStyleName(Panel.STYLE_LIGHT); } private void newRow() { - while (getCursorX() > 0) { - space(); + while (grid.getCursorX() > 0) { + grid.space(); } - setRows(getRows() + 1); + grid.setRows(grid.getRows() + 1); } public void setFeatureContainer(HierarchicalContainer c) { - removeAllComponents(); + grid.removeAllComponents(); Collection features = c.getItemIds(); for (Iterator it = features.iterator(); it.hasNext();) { final Feature f = (Feature) it.next(); @@ -572,17 +586,18 @@ public class SamplerApplication extends Application { if (c.isRoot(f)) { title.setWidth("100%"); title.setStyleName("section"); - addComponent(title, 0, getCursorY(), getColumns() - 1, - getCursorY()); + grid.addComponent(title, 0, grid.getCursorY(), grid + .getColumns() - 1, grid.getCursorY()); } else { title.setStyleName("subsection"); - addComponent(title); + grid.addComponent(title); } - setComponentAlignment(title, ALIGNMENT_LEFT, - ALIGNMENT_VERTICAL_CENTER); + grid.setComponentAlignment(title, + GridLayout.ALIGNMENT_LEFT, + GridLayout.ALIGNMENT_VERTICAL_CENTER); } else { - if (getCursorX() == 0) { - space(); + if (grid.getCursorX() == 0) { + grid.space(); } Button b = new Button(); b.setStyleName(Button.STYLE_LINK); @@ -598,7 +613,7 @@ public class SamplerApplication extends Application { ((SamplerWindow) getWindow()).setFeature(f); } }); - addComponent(b); + grid.addComponent(b); } } } @@ -651,7 +666,7 @@ public class SamplerApplication extends Application { f = null; // break while if no new found String part = parts.remove(0); for (int i = 0; i < fs.length; i++) { - if (fs[i].getPathName().equals(part)) { + if (fs[i].getPathName().equalsIgnoreCase(part)) { if (parts.isEmpty()) { return fs[i]; } else if (fs[i] instanceof FeatureSet) { diff --git a/src/com/itmill/toolkit/demo/sampler/features/blueprints/ProminentPrimaryAction.java b/src/com/itmill/toolkit/demo/sampler/features/blueprints/ProminentPrimaryAction.java index 6602429981..f4f0bdca51 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/blueprints/ProminentPrimaryAction.java +++ b/src/com/itmill/toolkit/demo/sampler/features/blueprints/ProminentPrimaryAction.java @@ -35,12 +35,15 @@ public class ProminentPrimaryAction extends Feature { @Override public NamedExternalResource[] getRelatedResources() { return new NamedExternalResource[] { + + new NamedExternalResource("CSS used", getThemeBase() + + "prominentprimaryaction/styles.css"), + new NamedExternalResource( - "LukeW: Primary & Secondary Actions in Web Forms", + "Article: Primary & Secondary Actions in Web Forms (LukeW)", "http://www.lukew.com/resources/articles/psactions.asp"), new NamedExternalResource( - "UI Pattern Factory: Primary & Secondary Actions", + "Article: Primary & Secondary Actions (UI Pattern Factory)", "http://uipatternfactory.com/p=primary-and-secondary-actions/") }; } - } diff --git a/src/com/itmill/toolkit/demo/sampler/features/blueprints/ProminentPrimaryActionExample.java b/src/com/itmill/toolkit/demo/sampler/features/blueprints/ProminentPrimaryActionExample.java index cd8b5ea7c9..fb03daaa4d 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/blueprints/ProminentPrimaryActionExample.java +++ b/src/com/itmill/toolkit/demo/sampler/features/blueprints/ProminentPrimaryActionExample.java @@ -10,32 +10,46 @@ public class ProminentPrimaryActionExample extends OrderedLayout implements public ProminentPrimaryActionExample() { setSpacing(true); - OrderedLayout horiz = new OrderedLayout(ORIENTATION_HORIZONTAL); - horiz.setSpacing(true); - addComponent(horiz); - Button primary = new Button("Save", this); - horiz.addComponent(primary); - Button secondary = new Button("Cancel", this); - secondary.setStyleName(Button.STYLE_LINK); - horiz.addComponent(secondary); - - horiz = new OrderedLayout(ORIENTATION_HORIZONTAL); - horiz.setSpacing(true); - addComponent(horiz); - primary = new Button("Sign up", this); - horiz.addComponent(primary); - secondary = new Button("or Sign in", this); - secondary.setStyleName(Button.STYLE_LINK); - horiz.addComponent(secondary); - - horiz = new OrderedLayout(ORIENTATION_HORIZONTAL); - horiz.setSpacing(true); - addComponent(horiz); - primary = new Button("Login", this); - horiz.addComponent(primary); - secondary = new Button("Forgot your password?", this); - secondary.setStyleName(Button.STYLE_LINK); - horiz.addComponent(secondary); + { // Cancel / Save + OrderedLayout horiz = new OrderedLayout(ORIENTATION_HORIZONTAL); + horiz.setSpacing(true); + horiz.setMargin(true); + addComponent(horiz); + Button secondary = new Button("Cancel", this); + secondary.setStyleName(Button.STYLE_LINK); + horiz.addComponent(secondary); + Button primary = new Button("Save", this); + horiz.addComponent(primary); + } + + { // Sign up / Sign in + OrderedLayout horiz = new OrderedLayout(ORIENTATION_HORIZONTAL); + horiz.setSpacing(true); + horiz.setMargin(true); + addComponent(horiz); + Button primary = new Button("Sign up", this); + primary.addStyleName("primary"); + horiz.addComponent(primary); + Button secondary = new Button("or Sign in", this); + secondary.setStyleName(Button.STYLE_LINK); + horiz.setComponentAlignment(secondary, ALIGNMENT_LEFT, + ALIGNMENT_VERTICAL_CENTER); + horiz.addComponent(secondary); + } + + { // Login / Forgot password? + OrderedLayout vert = new OrderedLayout(); + vert.setSpacing(true); + vert.setMargin(true); + addComponent(vert); + Button primary = new Button("Login", this); + vert.addComponent(primary); + vert.setComponentAlignment(primary, OrderedLayout.ALIGNMENT_RIGHT, + OrderedLayout.ALIGNMENT_BOTTOM); + Button secondary = new Button("Forgot your password?", this); + secondary.setStyleName(Button.STYLE_LINK); + vert.addComponent(secondary); + } } diff --git a/src/com/itmill/toolkit/demo/sampler/features/commons/Tooltips.java b/src/com/itmill/toolkit/demo/sampler/features/commons/Tooltips.java new file mode 100644 index 0000000000..3644424ebc --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/commons/Tooltips.java @@ -0,0 +1,38 @@ +package com.itmill.toolkit.demo.sampler.features.commons; + +import com.itmill.toolkit.demo.sampler.APIResource; +import com.itmill.toolkit.demo.sampler.Feature; +import com.itmill.toolkit.demo.sampler.NamedExternalResource; +import com.itmill.toolkit.ui.AbstractComponent; + +public class Tooltips extends Feature { + + @Override + public String getDescription() { + return "Most components can have a <i>description</i>," + + " which is shown as a <i>\"tooltip\"</i>.<br/>" + + "Descriptions may have rich content.<br/>" + + "Note that <i>description</i> is more generic term than" + + " <i>tooltip</i> - a component might choose to show" + + " the description in another way, if that's more appropriate" + + " for that compoenent.)"; + } + + @Override + public APIResource[] getRelatedAPI() { + return new APIResource[] { new APIResource(AbstractComponent.class) }; + } + + @Override + public Class[] getRelatedFeatures() { + // TODO Auto-generated method stub + return null; + } + + @Override + public NamedExternalResource[] getRelatedResources() { + // TODO Auto-generated method stub + return null; + } + +} diff --git a/src/com/itmill/toolkit/demo/sampler/features/commons/Tooltips.png b/src/com/itmill/toolkit/demo/sampler/features/commons/Tooltips.png Binary files differnew file mode 100644 index 0000000000..556e74f4de --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/commons/Tooltips.png diff --git a/src/com/itmill/toolkit/demo/sampler/features/commons/TooltipsExample.java b/src/com/itmill/toolkit/demo/sampler/features/commons/TooltipsExample.java new file mode 100644 index 0000000000..8c926d8dad --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/commons/TooltipsExample.java @@ -0,0 +1,52 @@ +package com.itmill.toolkit.demo.sampler.features.commons; + +import com.itmill.toolkit.ui.Button; +import com.itmill.toolkit.ui.OrderedLayout; +import com.itmill.toolkit.ui.RichTextArea; +import com.itmill.toolkit.ui.Button.ClickEvent; + +public class TooltipsExample extends OrderedLayout { + + public TooltipsExample() { + setSpacing(true); + + /* Plain tooltip (description) */ + Button plain = new Button("Mouse over for plain tooltip"); + // add the tooltip: + plain.setDescription("A simple plaintext tooltip"); + addComponent(plain); + + /* Richtext tooltip (description) */ + Button rich = new Button("Mouse over for richtext tooltip"); + rich.setStyleName(Button.STYLE_LINK); + // add the tooltip: + rich + .setDescription("<h2><img src=\"../ITMILL/themes/sampler/icons/comment_yellow.gif\"/>A richtext tooltip</h2>" + + "<ul>" + + "<li>HTML formatting</li><li>Images<br/>" + + "</li><li>etc...</li></ul>"); + addComponent(rich); + + /* Edit */ + final RichTextArea rte = new RichTextArea(); + rte + .setValue("Click <b>Edit Tooltip</b> to edit this tooltip, then <b>Apply</b>"); + rte.setVisible(false); // hide editor initially + addComponent(rte); + Button apply = new Button("Edit Tooltip", new Button.ClickListener() { + public void buttonClick(ClickEvent event) { + if (rte.isVisible()) { + rte.setVisible(false); + event.getButton().setDescription((String) rte.getValue()); + event.getButton().setCaption("Edit Tooltip"); + } else { + rte.setVisible(true); + event.getButton().setCaption("Apply"); + } + } + }); + apply.setDescription((String) rte.getValue()); + addComponent(apply); + + } +} diff --git a/src/com/itmill/toolkit/demo/sampler/features/notifications/NotificationCustomExample.java b/src/com/itmill/toolkit/demo/sampler/features/notifications/NotificationCustomExample.java index 78defa1f3d..4863156106 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/notifications/NotificationCustomExample.java +++ b/src/com/itmill/toolkit/demo/sampler/features/notifications/NotificationCustomExample.java @@ -42,7 +42,7 @@ public class NotificationCustomExample extends OrderedLayout { initPositionItems(position); final NativeSelect style = new NativeSelect("Style"); - position.setNullSelectionAllowed(false); + style.setNullSelectionAllowed(false); horiz.addComponent(style); initTypeItems(style); |
