From: Jouni Koivuviita Date: Wed, 4 Feb 2009 10:40:11 +0000 (+0000) Subject: Sampler: changed mode-switch position to top bar, removed unnecessary layout. X-Git-Tag: 6.7.0.beta1~3224 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c89cae2664656adcd9c1a94e35d46cb8884e8b50;p=vaadin-framework.git Sampler: changed mode-switch position to top bar, removed unnecessary layout. svn changeset:6724/svn branch:trunk --- diff --git a/WebContent/ITMILL/themes/sampler/sampler/flow.gif b/WebContent/ITMILL/themes/sampler/sampler/flow.gif index f6dcc1ed05..d6a90f7087 100644 Binary files a/WebContent/ITMILL/themes/sampler/sampler/flow.gif and b/WebContent/ITMILL/themes/sampler/sampler/flow.gif differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/grid.gif b/WebContent/ITMILL/themes/sampler/sampler/grid.gif index 2500d8d15b..bbc0565fce 100644 Binary files a/WebContent/ITMILL/themes/sampler/sampler/grid.gif and b/WebContent/ITMILL/themes/sampler/sampler/grid.gif differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bottom.png b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bottom.png index e168b8be23..f15888ec0e 100644 Binary files a/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bottom.png and b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bottom.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/list.gif b/WebContent/ITMILL/themes/sampler/sampler/list.gif index 9f4641bc9a..f0b610f700 100644 Binary files a/WebContent/ITMILL/themes/sampler/sampler/list.gif and b/WebContent/ITMILL/themes/sampler/sampler/list.gif differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/styles.css b/WebContent/ITMILL/themes/sampler/sampler/styles.css index e97058fb49..9dbfc76917 100644 --- a/WebContent/ITMILL/themes/sampler/sampler/styles.css +++ b/WebContent/ITMILL/themes/sampler/sampler/styles.css @@ -221,7 +221,7 @@ } .i-app-SamplerApplication .feature-info { background: #1e2123 url(info-bubble-bg.png) repeat-y; - color: #9d9ea0; + color: #b8bbbe; font-family: helvetica, arial, verdana, sans-serif; font-size: 12px; line-height: 19px; @@ -233,8 +233,15 @@ background: transparent url(bullet.png) no-repeat 2px 60%; padding-left: 8px; } +.i-app-SamplerApplication .feature-info div.i-link a:hover { + color: #dcebf6; +} .i-app-SamplerApplication .feature-info div.i-link a span { text-decoration: none; + border-bottom: 1px dotted #495964; +} +.i-app-SamplerApplication .feature-info div.i-link a:hover span { + border-bottom: 1px solid #dcebf6; } .i-app-SamplerApplication .feature-info .i-panel-caption { color: #fff; @@ -298,27 +305,31 @@ } .i-customcomponent-ModeSwitch .i-button { - height: 28px; + height: 24px; + width: 30px; border: none; - font-size: 6px; + background: transparent url(segment.png) no-repeat; + cursor: default; + padding: 0; } -.i-customcomponent-ModeSwitch .i-button-first-on { - background: transparent url(left-on.gif) no-repeat; +.i-customcomponent-ModeSwitch .i-button-first-on, +.i-customcomponent-ModeSwitch .i-button-first:active { + background-position: left bottom; } .i-customcomponent-ModeSwitch .i-button-first { - background: transparent url(left.gif) no-repeat; + background-position: left top; } +/* .i-customcomponent-ModeSwitch .i-button-mid-on { background: transparent url(mid-on.gif) no-repeat; } .i-customcomponent-ModeSwitch .i-button-mid { background: transparent url(mid.gif) no-repeat; -} -.i-customcomponent-ModeSwitch .i-button-last-on { - border: none; - background: transparent url(right-on.gif) no-repeat right top; +}*/ +.i-customcomponent-ModeSwitch .i-button-last-on, +.i-customcomponent-ModeSwitch .i-button-last:active { + background-position: right bottom; } .i-customcomponent-ModeSwitch .i-button-last { - border: none; - background: transparent url(right.gif) no-repeat right top; + background-position: right top; } diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureView.java b/src/com/itmill/toolkit/demo/sampler/FeatureView.java index 2c37b39894..caae305e86 100644 --- a/src/com/itmill/toolkit/demo/sampler/FeatureView.java +++ b/src/com/itmill/toolkit/demo/sampler/FeatureView.java @@ -43,7 +43,7 @@ public class FeatureView extends HorizontalLayout { left = new Panel(); left.setStyleName(Panel.STYLE_LIGHT); left.addStyleName("feature-main"); - left.setSizeFull(); + ((VerticalLayout) left.getLayout()).setSpacing(true); ((VerticalLayout) left.getLayout()).setMargin(false); addComponent(left); diff --git a/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java b/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java index 0bd2e372e9..7bc9ff3d53 100644 --- a/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java +++ b/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java @@ -136,10 +136,10 @@ public class SamplerApplication extends Application { private ObjectProperty currentFeature = new ObjectProperty(null, Feature.class); - private HorizontalLayout toggleBar = new HorizontalLayout(); - private MainArea mainArea = new MainArea(); + private ModeSwitch mode; + private SplitPanel mainSplit; private Tree navigationTree; // itmill: UA-658457-6 @@ -192,15 +192,21 @@ public class SamplerApplication extends Application { } }); + // List/grid/coverflow + mode = createModeSwitch(); + mode.setMode(currentList); + nav.addComponent(mode); + nav.setComponentAlignment(mode, Alignment.MIDDLE_LEFT); + // Layouts for top area buttons HorizontalLayout quicknav = new HorizontalLayout(); HorizontalLayout arrows = new HorizontalLayout(); nav.addComponent(quicknav); nav.addComponent(arrows); + nav.setComponentAlignment(quicknav, Alignment.MIDDLE_LEFT); + nav.setComponentAlignment(arrows, Alignment.MIDDLE_LEFT); quicknav.setStyleName("segment"); arrows.setStyleName("segment"); - nav.setComponentAlignment(quicknav, "middle"); - nav.setComponentAlignment(arrows, "middle"); // Previous sample previousSample = createPrevButton(); @@ -213,14 +219,6 @@ public class SamplerApplication extends Application { Component search = createSearch(); quicknav.addComponent(search); - // togglebar - // mainExpand.addComponent(toggleBar); - toggleBar.setHeight("40px"); - toggleBar.setWidth("100%"); - toggleBar.setStyleName("togglebar"); - toggleBar.setSpacing(true); - toggleBar.setMargin(false, true, false, true); - // Main left/right split; hidden menu tree mainSplit = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL); mainSplit.setSizeFull(); @@ -228,24 +226,12 @@ public class SamplerApplication extends Application { mainExpand.addComponent(mainSplit); mainExpand.setExpandRatio(mainSplit, 1); - VerticalLayout rightLayout = new VerticalLayout(); - rightLayout.setSizeFull(); - rightLayout.addComponent(toggleBar); - // Menu tree, initially hidden navigationTree = createMenuTree(); - mainSplit.addComponent(navigationTree); + mainSplit.setFirstComponent(navigationTree); // Main Area - mainSplit.addComponent(rightLayout); - - rightLayout.addComponent(mainArea); - rightLayout.setExpandRatio(mainArea, 1); - - // List/grid/coverflow - Component mode = createModeSwitch(); - toggleBar.addComponent(mode); - toggleBar.setComponentAlignment(mode, Alignment.MIDDLE_RIGHT); + mainSplit.setSecondComponent(mainArea); // Show / hide tree Component treeSwitch = createTreeSwitch(); @@ -397,6 +383,7 @@ public class SamplerApplication extends Application { private Component createTreeSwitch() { final Button b = new Button(); b.setStyleName("tree-switch"); + b.setDescription("Toggle sample tree visibility"); b.addListener(new Button.ClickListener() { public void buttonClick(ClickEvent event) { if (b.getStyleName().contains("down")) { @@ -418,7 +405,7 @@ public class SamplerApplication extends Application { return b; } - private Component createModeSwitch() { + private ModeSwitch createModeSwitch() { ModeSwitch m = new ModeSwitch(); m.addMode(currentList, "", "View as Icons", new ThemeResource( "sampler/grid.gif")); @@ -436,7 +423,6 @@ public class SamplerApplication extends Application { } } }); - m.setMode(currentList); return m; } @@ -475,16 +461,16 @@ public class SamplerApplication extends Application { if (val == null) { currentList.setFeatureContainer(allFeatures); mainArea.show(currentList); - toggleBar.setVisible(true); + mode.setVisible(true); } else if (val instanceof FeatureSet) { currentList.setFeatureContainer(((FeatureSet) val) .getContainer(true)); mainArea.show(currentList); - toggleBar.setVisible(true); + mode.setVisible(true); } else { mainArea.show(featureView); featureView.setFeature(val); - toggleBar.setVisible(false); + mode.setVisible(false); } }