.i-app-SamplerApplication {
background-color: white;
}
+
.i-app-SamplerApplication .i-horizontallayout-topbar {
- border-bottom: 3px solid #ccc;
+ border-bottom: 1px solid #fff;
+ background: #5c5d60 url(top-bg.png) repeat-x;
}
-.i-app-SamplerApplication .i-horizontallayout-togglebar {
- border-bottom: 1px solid #eee;
- background: transparent url(grayfade.png) repeat-x;
+
+.i-app-SamplerApplication .main-split {
+ background: transparent url(main-bg.png) repeat-x;
+}
+
+.i-app-SamplerApplication .topbar .logo {
+ width: 147px;
+ height: 44px;
+ margin: 0;
+ padding: 0;
+ background: transparent url(sampler.png) no-repeat;
+ overflow: hidden;
+}
+
+.i-app-SamplerApplication .topbar .logo img {
+ display: none;
}
.i-app-SamplerApplication .i-popupview-quickjump {
background: transparent url(quickjump.png) no-repeat 0px 1px;
}
-.i-customcomponent-breadcrumbs .i-link a {
+.i-customcomponent-breadcrumbs {
+ font-family: helvetica, arial, verdana, sans-serif;
+}
+.i-customcomponent-breadcrumbs .i-horizontallayout-spacing-on {
+ padding-left: 5px;
+}
+
+.i-customcomponent-breadcrumbs .i-link a,
+.i-customcomponent-breadcrumbs .i-label {
+ text-decoration: none;
+ color: #1b252b;
+ text-shadow: 0 1px 0 #8f9193;
+ font-size: 11px;
+ line-height: 13px;
+ padding-top: 3px;
+ display: block;
+}
+.i-customcomponent-breadcrumbs .i-label {
+ font-size: 13px;
+ line-height: 12px;
+ padding: 4px 0 0 0;
+}
+.i-sa .i-customcomponent-breadcrumbs .i-label {
+ padding-top: 3px;
+}
+.i-customcomponent-breadcrumbs .i-link span {
text-decoration: none;
}
.i-customcomponent-breadcrumbs .i-link a:hover {
- text-decoration: underline;
+ text-decoration: none;
+ color: #000;
+}
+.i-customcomponent-breadcrumbs .i-link-bold {
+ height: 20px;
+ padding: 0 0 0 9px;
+ background: transparent url(breadcrumb-current-left.png);
}
.i-customcomponent-breadcrumbs .i-link-bold a {
- font-weight: bold;
+ display: block;
+ height: 16px;
+ background: transparent url(breadcrumb-current-right.png) no-repeat right top;
+ font-size: 10px;
+ font-weight: bold;
+ color: #c2c4c6;
+ text-shadow: 0 1px 0 #3a3d43;
+ padding: 4px 9px 0 0;
+ cursor: default;
+}
+.i-sa .i-customcomponent-breadcrumbs .i-link-bold a {
+ height: 17px;
+ padding-top: 3px;
+}
+.i-customcomponent-breadcrumbs .i-link-bold a:hover {
+ color: #c2c4c6;
}
.i-app-SamplerApplication .i-horizontallayout-topbar .i-button-link span {
.i-app-SamplerApplication .i-horizontallayout-topbar .i-button-link:hover span {
text-decoration: underline;
}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button,
+.i-app-SamplerApplication .i-horizontallayout-segment .i-popupview {
+ width: 30px;
+ height: 24px;
+ overflow: hidden;
+ padding: 0;
+ border: none;
+ background: transparent url(segment.png) no-repeat;
+ cursor: default;
+}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button:active,
+.i-app-SamplerApplication .i-horizontallayout-segment .i-popupview:active {
+ background-position: left bottom;
+}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button-next,
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button-tree-switch {
+ background-position: right top;
+}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button-next:active,
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button-tree-switch:active {
+ background-position: right bottom;
+}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button-down {
+ background-position: right bottom;
+}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button span,
+.i-app-SamplerApplication .i-horizontallayout-segment .i-popupview span {
+ display: block;
+ height: 24px;
+ background-repeat: no-repeat;
+ background-position: 50% 40%;
+}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button-tree-switch span {
+ background-image: url(tree.png);
+}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-popupview span {
+ background-image: url(magnifier.png);
+}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button-previous span {
+ background-image: url(prev.png);
+}
+.i-app-SamplerApplication .i-horizontallayout-segment .i-button-next span {
+ background-image: url(next.png);
+}
+.i-popupview-popup-quickjump {
+ background: transparent;
+ border: none;
+}
+
+.i-app-SamplerApplication .i-tree-menu {
+ font-family: helvetica, arial, verdana, sans-serif;
+ font-size: 12px;
+ line-height: 17px;
+ padding: 13px 0;
+}
.i-app-SamplerApplication .i-label-section {
- font-size: 18px;
+ font-family: "Helvetica Neue", helvetica, arial, verdana, sans-serif;
+ font-size: 24px;
font-weight: bold;
- border-bottom: 3px solid #eee;
+ border-bottom: 1px solid #eee;
line-height: 35px;
text-indent: 15px;
+ text-shadow: 0 2px 1px #c0c1c2;
+ color: #1e2229;
+
}
.i-app-SamplerApplication .i-label-subsection {
+ font-family: helvetica, arial, verdana, sans-serif;
font-size: 16px;
- font-weight: bold;
+ font-weight: normal;
color: #666666;
text-indent: 15px;
+ padding-right: 20px;
}
.i-app-SamplerApplication .i-button-screenshot {
border: 3px solid #ccc;
border-top: 0px;
}
-.i-app-SamplerApplication .i-panel-feature-main {
- background: transparent url(grayfade.png) repeat-x;
+.i-app-SamplerApplication .i-horizontallayout-sample-view .i-horizontallayout-margin-top {
+ padding-top: 27px;
+}
+.i-app-SamplerApplication .i-horizontallayout-sample-view .i-horizontallayout-margin-bottom {
+ padding-bottom: 24px;
}
.i-app-SamplerApplication .i-caption-feature-controls {
+ font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: bold;
- font-size: 18px;
- text-indent: 10px;
+ font-size: 24px;
+ line-height: 28px;
+ color: #1e2229;
+ letter-spacing: -0.015em;
+ text-shadow: 0 2px 1px #c0c1c2;
}
.i-app-SamplerApplication .feature-info {
- background-color: #999;
- color: white;
- line-height: 20px;
+ background: #1e2123 url(info-bubble-bg.png) repeat-y;
+ color: #9d9ea0;
+ font-family: helvetica, arial, verdana, sans-serif;
+ font-size: 12px;
+ line-height: 19px;
}
.i-app-SamplerApplication .feature-info div.i-link a {
- color: white;
- line-height: 20px;
+ color: #b7c0c7;
+ font-size: 11px;
+ line-height: 18px;
+ background: transparent url(bullet.png) no-repeat 2px 60%;
+ padding-left: 8px;
+}
+.i-app-SamplerApplication .feature-info div.i-link a span {
+ text-decoration: none;
}
.i-app-SamplerApplication .feature-info .i-panel-caption {
color: #fff;
- font-size: 16px;
+ font-family: "Helvetica Neue", helvetica, arial, verdana, sans-serif;
+ font-size: 14px;
font-weight: bold;
- line-height: 25px;
+ line-height: normal;
+ text-shadow: 0 1px 0 #272a2b;
+ background: transparent url(info-bubble-top.png);
+ margin: 0;
+ padding-bottom: 10px;
+ padding-left: 28px;
}
-/*
.i-app-SamplerApplication .feature-info .i-panel-content {
- background: transparent url(finfofade.png) no-repeat 0px 5px;
+ background: transparent url(info-bubble-top.png) no-repeat 0 -44px;
+}
+.i-app-SamplerApplication .i-panel-deco-feature-info {
+ height: 28px;
+ background: transparent url(info-bubble-bottom.png);
+ margin: 0;
+}
+
+.i-app-SamplerApplication .feature-info .i-verticallayout .i-verticallayout-margin-left {
+ padding-left: 28px;
+}
+.i-app-SamplerApplication .feature-info .i-verticallayout .i-verticallayout-margin-right {
+ padding-right: 20px;
}
-*/
+
.i-app-SamplerApplication .feature-info .i-caption {
font-weight: bold;
- font-size: 16px;
+ font-size: 12px;
line-height: 30px;
+ color: #fff;
+ background: transparent url(info-bubble-separator.png) repeat-x 0 10px;
+}
+.i-app-SamplerApplication .feature-info .i-captiontext {
+ padding-top: 15px;
+}
+.i-app-SamplerApplication .feature-info .i-label {
+ padding-bottom: 9px;
}
.i-app-SamplerApplication .i-button-showcode {
- border-bottom: 1px dotted #eee;
- padding: 1px 0 1px 7px;
+ font-family: helvetica, arial, verdana, sans-serif;
+ display: inline;
+ font-size: 12px;
+ line-height: 20px;
+ height: 20px;
}
.i-app-SamplerApplication .i-button-showcode span {
- color: #999;
+ color: #8b8e91;
text-decoration: none;
- font-style: italic;;
}
.i-app-SamplerApplication .i-button-showcode:hover span {
- text-decoration: underline;
+ color: #62696f;
}
.i-app-SamplerApplication .i-panel-content-source {
border: 1px solid #eee;
- border-top: none;
+ background: #fff;
}
.i-customcomponent-ModeSwitch .i-button {
public FeatureView() {
- setSizeFull();
+ setWidth("100%");
+ setMargin(true);
+ setSpacing(true);
+ setStyleName("sample-view");
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);
setExpandRatio(left, 1);
right = new Panel();
right.setStyleName(Panel.STYLE_LIGHT);
right.addStyleName("feature-info");
- right.setWidth("350px");
- right.setHeight("100%");
+ right.setWidth("369px");
addComponent(right);
- right.getLayout().setMargin(false, true, true, true);
controls = new VerticalLayout();
controls.setStyleName("feature-controls");
});
showCode.setStyleName(Button.STYLE_LINK);
showCode.addStyleName("showcode");
- showCode.setWidth("100%");
controls.addComponent(showCode);
sourceCode = new CodeLabel();
left.addComponent(getExampleFor(feature));
- right.setCaption("Description");
+ right.setCaption("Description and Resources");
Label l = new Label(feature.getDescription());
l.setContentMode(Label.CONTENT_XHTML);
"UA-658457-6", "none");
// "backbutton"
UriFragmentUtility uriFragmentUtility = new UriFragmentUtility();
+
// breadcrumbs
BreadCrumbs breadcrumbs = new BreadCrumbs();
// topbar (navigation)
HorizontalLayout nav = new HorizontalLayout();
mainExpand.addComponent(nav);
- nav.setHeight("50px");
+ nav.setHeight("44px");
nav.setWidth("100%");
nav.setStyleName("topbar");
nav.setSpacing(true);
- nav.setMargin(false, true, false, true);
+ nav.setMargin(false, true, false, false);
// Upper left logo
Component logo = createLogo();
}
});
+ // Layouts for top area buttons
+ HorizontalLayout quicknav = new HorizontalLayout();
+ HorizontalLayout arrows = new HorizontalLayout();
+ nav.addComponent(quicknav);
+ nav.addComponent(arrows);
+ quicknav.setStyleName("segment");
+ arrows.setStyleName("segment");
+ nav.setComponentAlignment(quicknav, "middle");
+ nav.setComponentAlignment(arrows, "middle");
+
// Previous sample
previousSample = createPrevButton();
- nav.addComponent(previousSample);
- nav.setComponentAlignment(previousSample, Alignment.MIDDLE_RIGHT);
+ arrows.addComponent(previousSample);
// Next sample
nextSample = createNextButton();
- nav.addComponent(nextSample);
- nav.setComponentAlignment(nextSample, Alignment.MIDDLE_LEFT);
+ arrows.addComponent(nextSample);
// "Search" combobox
// TODO add input prompt
Component search = createSearch();
- nav.addComponent(search);
- nav.setComponentAlignment(search, Alignment.MIDDLE_LEFT);
+ quicknav.addComponent(search);
// togglebar
// mainExpand.addComponent(toggleBar);
// Main left/right split; hidden menu tree
mainSplit = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);
mainSplit.setSizeFull();
+ mainSplit.setStyleName("main-split");
mainExpand.addComponent(mainSplit);
mainExpand.setExpandRatio(mainSplit, 1);
// Show / hide tree
Component treeSwitch = createTreeSwitch();
- nav.addComponent(treeSwitch);
- // toggleBar.setExpandRatio(treeSwitch, 1);
- nav.setComponentAlignment(treeSwitch, Alignment.MIDDLE_RIGHT);
+ quicknav.addComponent(treeSwitch);
addListener(new CloseListener() {
public void windowClose(CloseEvent e) {
* super.changeVariables(source, variables); if (isPopupVisible()) {
* search.focus(); } } };
*/
- PopupView pv = new PopupView("", search);
+ PopupView pv = new PopupView("<span></span>", search);
pv.addListener(new PopupView.PopupVisibilityListener() {
public void popupVisibilityChange(PopupVisibilityEvent event) {
if (event.isPopupVisible()) {
}
}
});
- pv.setWidth("22px");
- pv.setHeight("22px");
pv.setStyleName("quickjump");
pv.setDescription("Quick jump");
});
logo.setDescription("↶ Home");
logo.setStyleName(Button.STYLE_LINK);
+ logo.addStyleName("logo");
logo.setIcon(new ThemeResource("sampler/sampler.png"));
- logo.setWidth("160px");
return logo;
}
}
}
});
- b.setWidth("22px");
- b.setHeight("22px");
- b.setIcon(new ThemeResource("sampler/next.png"));
+ b.setStyleName("next");
b.setDescription("Jump to the next sample");
- b.setStyleName(Button.STYLE_LINK);
return b;
}
}
});
b.setEnabled(false);
- b.setWidth("22px");
- b.setHeight("22px");
- b.setIcon(new ThemeResource("sampler/prev.png"));
+ b.setStyleName("previous");
b.setDescription("Jump to the previous sample");
- b.setStyleName(Button.STYLE_LINK);
return b;
}
private Component createTreeSwitch() {
- ModeSwitch m = new ModeSwitch();
- m.addMode(1, "", "Hide navigation", new ThemeResource(
- "sampler/hidetree.gif"));
- m.addMode(2, "", "Show navigation", new ThemeResource(
- "sampler/showtree.gif"));
- m.addListener(new ModeSwitch.ModeSwitchListener() {
- public void componentEvent(Event event) {
- if (event instanceof ModeSwitchEvent) {
- if (((ModeSwitchEvent) event).getMode().equals(1)) {
- mainSplit.setSplitPosition(0);
- navigationTree.setVisible(false);
- mainSplit.setLocked(true);
- } else {
- mainSplit.setSplitPosition(20);
- mainSplit.setLocked(false);
- navigationTree.setVisible(true);
- }
+ final Button b = new Button();
+ b.setStyleName("tree-switch");
+ b.addListener(new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ if (b.getStyleName().contains("down")) {
+ b.removeStyleName("down");
+ mainSplit.setSplitPosition(0);
+ navigationTree.setVisible(false);
+ mainSplit.setLocked(true);
+ } else {
+ b.addStyleName("down");
+ mainSplit.setSplitPosition(20);
+ mainSplit.setLocked(false);
+ navigationTree.setVisible(true);
}
}
});
- m.setMode(1);
- return m;
+ mainSplit.setSplitPosition(0);
+ navigationTree.setVisible(false);
+ mainSplit.setLocked(true);
+ return b;
}
private Component createModeSwitch() {
private Tree createMenuTree() {
final Tree tree = new Tree();
tree.setImmediate(true);
+ tree.setStyleName("menu");
tree.setContainerDataSource(allFeatures);
currentFeature.addListener(new Property.ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
layout.removeAllComponents();
{ // home
- ActiveLink link = new ActiveLink("⌂ Home",
- new ExternalResource("#"));
+ ActiveLink link = new ActiveLink("Home", new ExternalResource(
+ "#"));
link.addListener(this);
layout.addComponent(link);
}
projects / vaadin-framework.git / commitdiff
