Initial commit for new Sampler home screen layout.

svn changeset:9061/svn branch:6.2

diff --git a/WebContent/VAADIN/themes/sampler/sampler/grid-bg.png b/WebContent/VAADIN/themes/sampler/sampler/grid-bg.png
new file mode 100644 (file)
index 0000000..85a35df
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/grid-bg.png differ

diff --git a/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-hover.png b/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-hover.png
new file mode 100644 (file)
index 0000000..4854618
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-hover.png differ

diff --git a/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame.png b/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame.png
new file mode 100644 (file)
index 0000000..99213b3
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame.png differ

diff --git a/WebContent/VAADIN/themes/sampler/sampler/styles.css b/WebContent/VAADIN/themes/sampler/sampler/styles.css
index 6898284749e8f38825bd9537ad5a3d757af4baad..82f9a237e23d5b17b905e55e74724feb26231c53 100644 (file)
--- a/WebContent/VAADIN/themes/sampler/sampler/styles.css
+++ b/WebContent/VAADIN/themes/sampler/sampler/styles.css
@@ -274,17 +274,83 @@
 }
 
 
+
+/* Sample grid styles */
+.v-app-SamplerApplication .v-csslayout-grid {
+       background: transparent url(grid-bg.png) 0 80px;
+       margin: 0 20px 50px;
+}
+
 .v-app-SamplerApplication .v-label-section {
        font-family: "Helvetica Neue", helvetica, arial, verdana, sans-serif;
        font-size: 24px;
-       font-weight: bold;
-       border-bottom: 1px solid #eee;
-       line-height: 35px;
-       text-indent: 15px;
+       font-weight: normal;
+       line-height: normal;
        text-shadow: 0 2px 1px #c0c1c2;
        color: #1e2229;
-       
+       padding: 30px 0 20px 0;
+       height: 30px;
+}
+
+.v-csslayout-grid .v-label-subsection {
+       font-size: 11px;
+       line-height: 16px;
+       color: #787b7e;
+       float: left;
+       width: 155px;
+       height: 131px;
+       padding: 15px 175px 0 15px;
+       margin-right: -175px;
+       background: transparent url(subsection-bg.png) no-repeat;
+       white-space: normal;
+}
+
+.v-csslayout-grid .v-label-subsection h3 {
+       font-size: 18px;
+       font-weight: bold;
+       text-shadow: 0 2px 1px #c0c1c2;
+       color: #292d30;
+       margin: 0 0 .5em;
+}
+
+.v-csslayout-grid .screenshot,
+.v-csslayout-grid .screenshot:focus,
+.v-csslayout-grid .screenshot:active {
+       float: left;
+       height: 132px;
+       width: 87px;
+       margin: 14px 15px 0;
+       position: relative;
+}
+
+.v-csslayout-grid .screenshot .v-icon {
+       display: block;
+       width: 75px;
+       margin: 3px 6px;
+       position: absolute;
+}
+
+.v-csslayout-grid .screenshot .v-button-caption {
+       display: block;
+       width: 87px;
+       text-align: center;
+       white-space: normal;
+       text-decoration: none;
+       font-size: 12px;
+       color: #212325;
+       font-family: arial, helvetica, sans-serif;
+       font-weight: bold;
+       line-height: normal;
+       position: absolute;
+       background: transparent url(screenshot-frame.png) no-repeat 4px 2px;
+       padding-top: 84px;
+       height: 30px;
 }
+.v-csslayout-grid .screenshot:hover .v-button-caption {
+       background: transparent url(screenshot-frame-hover.png) no-repeat 1px 0px;
+}
+
+/*
 .v-app-SamplerApplication .v-label-subsection {
        font-family: helvetica, arial, verdana, sans-serif;
        font-size: 16px;
@@ -292,27 +358,8 @@
        color: #666666;
        text-indent: 15px;
        padding-right: 20px;
-}
-.v-app-SamplerApplication .v-nativebutton-screenshot {
-       border: 3px solid #ccc;
-       -moz-border-radius: 5px;
-       -webkit-border-radius: 5px;
-       overflow: hidden;
-}
-.v-app-SamplerApplication .v-nativebutton-screenshot:hover {
-       border-color: #abc;
-}
-.v-app-SamplerApplication .v-nativebutton-screenshot img.v-icon {
-       margin: 0;
-       margin-top: -2px;
-       margin-left: -3px;
-       width: auto;
-       height: auto;
-       -moz-border-radius: 5px;
-       -webkit-border-radius: 5px;
-       overflow: hidden;
-       position: static;
-}
+}*/
+
 
 .v-app-SamplerApplication .v-table-featuretable tr.v-table-row,
 .v-app-SamplerApplication .v-table-featuretable tr.v-table-row-odd {

diff --git a/WebContent/VAADIN/themes/sampler/sampler/subsection-bg.png b/WebContent/VAADIN/themes/sampler/sampler/subsection-bg.png
new file mode 100644 (file)
index 0000000..a98b0ef
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/subsection-bg.png differ

diff --git a/src/com/vaadin/demo/sampler/FeatureSet.java b/src/com/vaadin/demo/sampler/FeatureSet.java
index 8936d450dc320343e743f132a22b21322cd856de..2766b63d8d044c9e316547f3e61f434609374077 100644 (file)
--- a/src/com/vaadin/demo/sampler/FeatureSet.java
+++ b/src/com/vaadin/demo/sampler/FeatureSet.java
@@ -124,7 +124,7 @@ public class FeatureSet extends Feature {
 
     public static class Components extends FeatureSet {
         public Components() {
-            super("Components", new Feature[] {
+            super("Vaadin Core Components", new Feature[] {
             //
                     new Common(), //
                     new Accordions(), //
@@ -435,19 +435,19 @@ public class FeatureSet extends Feature {
      * FeatureSet implementation follows.
      */
 
-    private String pathname;
+    private final String pathname;
 
-    private String name;
+    private final String name;
 
-    private String desc;
+    private final String desc;
 
-    private String icon = "folder.gif";
+    private final String icon = "folder.gif";
 
-    private Feature[] content;
+    private final Feature[] content;
 
     private HierarchicalContainer container = null;
 
-    private boolean containerRecursive = false;
+    private final boolean containerRecursive = false;
 
     FeatureSet(String pathname, Feature[] content) {
         this(pathname, pathname, "", content);

diff --git a/src/com/vaadin/demo/sampler/SamplerApplication.java b/src/com/vaadin/demo/sampler/SamplerApplication.java
index 91ae0b4c84c2027fafc616dd58dbcca48cf08623..7c0f5b34e2566a99662b792c434a1667fd9c234c 100644 (file)
--- a/src/com/vaadin/demo/sampler/SamplerApplication.java
+++ b/src/com/vaadin/demo/sampler/SamplerApplication.java
@@ -25,9 +25,9 @@ import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.ComboBox;
 import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
 import com.vaadin.ui.CustomComponent;
 import com.vaadin.ui.Embedded;
-import com.vaadin.ui.GridLayout;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.NativeButton;
@@ -737,15 +737,14 @@ public class SamplerApplication extends Application {
 
     private class FeatureGrid extends Panel implements FeatureList {
 
-        GridLayout grid = new GridLayout(11, 1);
+        CssLayout grid = new CssLayout();
         private final HashMap<Object, Resource> iconCache = new HashMap<Object, Resource>();
 
         FeatureGrid() {
             setSizeFull();
             setContent(grid);
-            grid.setSizeUndefined();
-            grid.setSpacing(true);
             setStyleName(Panel.STYLE_LIGHT);
+            grid.setStyleName("grid");
         }
 
         @SuppressWarnings("unchecked")
@@ -755,30 +754,25 @@ public class SamplerApplication extends Application {
             for (Iterator<Feature> it = features.iterator(); it.hasNext();) {
                 final Feature f = it.next();
                 if (f instanceof FeatureSet) {
-                    grid.newLine();
                     Label title = new Label(f.getName());
                     if (c.isRoot(f)) {
-                        title.setWidth("100%");
                         title.setStyleName("section");
-                        grid.setRows(grid.getCursorY() + 1);
-                        grid.addComponent(title, 0, grid.getCursorY(), grid
-                                .getColumns() - 1, grid.getCursorY());
-                        grid
-                                .setComponentAlignment(title,
-                                        Alignment.MIDDLE_LEFT);
+                        grid.addComponent(title);
                     } else {
+                        String text = "<h3>" + f.getName() + "</h3>";
+                        if (f.getDescription() != null
+                                && f.getDescription() != "") {
+                            text += f.getDescription().substring(0,
+                                    f.getDescription().indexOf(".") + 1);
+                        }
+                        title = new Label(text, Label.CONTENT_XHTML);
                         title.setStyleName("subsection");
+                        title.setSizeUndefined();
                         grid.addComponent(title);
-                        grid
-                                .setComponentAlignment(title,
-                                        Alignment.MIDDLE_LEFT);
                     }
 
                 } else {
-                    if (grid.getCursorX() == 0) {
-                        grid.space();
-                    }
-                    Button b = new NativeButton();
+                    Button b = new Button(f.getName());
                     b.setStyleName(Button.STYLE_LINK);
                     b.addStyleName("screenshot");
                     String resId = "75-" + f.getIconName();
@@ -787,12 +781,8 @@ public class SamplerApplication extends Application {
                         res = new ClassResource(f.getClass(), resId,
                                 SamplerApplication.this);
                         iconCache.put(resId, res);
-
                     }
                     b.setIcon(res);
-                    b.setWidth("75px");
-                    b.setHeight("75px");
-                    b.setDescription("<h3>" + f.getName() + "</h3>");
                     b.addListener(new Button.ClickListener() {
                         public void buttonClick(ClickEvent event) {
                             ((SamplerWindow) getWindow()).setFeature(f);