Modified look of showcase and corrected multiple style problems. This patch is TBR.
Patch by: jlabanca
git-svn-id: https://google-web-toolkit.googlecode.com/svn/trunk@2358 8db76d5a-ed1c-0410-87a9-c151d255dfc7
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/client/Application.java b/samples/showcase/src/com/google/gwt/sample/showcase/client/Application.java
index 024c7a7..4220543 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/client/Application.java
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/client/Application.java
@@ -16,24 +16,24 @@
package com.google.gwt.sample.showcase.client;
import com.google.gwt.core.client.GWT;
-import com.google.gwt.user.client.DOM;
+import com.google.gwt.i18n.client.LocaleInfo;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.WindowResizeListener;
import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.FlexTable;
+import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
-import com.google.gwt.user.client.ui.ScrollPanel;
+import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeImages;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.TreeListener;
-import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.FlexTable.FlexCellFormatter;
import com.google.gwt.user.client.ui.HTMLTable.CellFormatter;
@@ -49,9 +49,8 @@
* <li>.Application-top { The top portion of the Application }</li>
* <li>.Application-title { The title widget }</li>
* <li>.Application-links { The main external links }</li>
+ * <li>.Application-options { The options widget }</li>
* <li>.Application-menu { The main menu }</li>
- * <li>.Application-menu-title { The title above the main menu }</li>
- * <li>.Application-menu-wrapper { The scrollable element around the main menu }</li>
* <li>.Application-content-wrapper { The scrollable element around the content }</li>
* </ul>
*/
@@ -87,14 +86,24 @@
public static final String DEFAULT_STYLE_NAME = "Application";
/**
- * The wrapper around the content.
+ * The panel that contains the menu and content.
*/
- private ScrollPanel contentWrapper;
+ private HorizontalPanel bottomPanel;
/**
- * The main wrapper around the menu and content.
+ * The decorator around the content.
*/
- private FlexTable contentLayout;
+ private DecoratorPanel contentDecorator;
+
+ /**
+ * The main wrapper around the content and content title.
+ */
+ private Grid contentLayout;
+
+ /**
+ * The wrapper around the content.
+ */
+ private SimplePanel contentWrapper;
/**
* The panel that holds the main links.
@@ -112,59 +121,56 @@
private Tree mainMenu;
/**
- * The wrapper around the main menu.
+ * The last known width of the window.
*/
- private ScrollPanel mainMenuWrapper;
+ private int windowWidth = -1;
/**
* The panel that contains the title widget and links.
*/
- private Grid topPanel;
+ private FlexTable topPanel;
/**
* Constructor.
*/
public Application() {
- // Setup the main layout
- VerticalPanel layout = new VerticalPanel();
+ // Setup the main layout widget
+ FlowPanel layout = new FlowPanel();
initWidget(layout);
- layout.setSize("100%", "100%");
// Setup the top panel with the title and links
- topPanel = createTopPanel();
+ createTopPanel();
layout.add(topPanel);
- // Create a DecoratorPanel to hold the menu and content
- DecoratorPanel mainDecorator = new DecoratorPanel();
- layout.add(mainDecorator);
- layout.setCellHorizontalAlignment(mainDecorator,
- HasHorizontalAlignment.ALIGN_CENTER);
- layout.setCellVerticalAlignment(mainDecorator,
- HasVerticalAlignment.ALIGN_MIDDLE);
+ // Add the main menu
+ bottomPanel = new HorizontalPanel();
+ bottomPanel.setWidth("100%");
+ bottomPanel.setSpacing(0);
+ bottomPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_TOP);
+ layout.add(bottomPanel);
+ createMainMenu();
+ bottomPanel.add(mainMenu);
// Setup the content layout
- contentLayout = new FlexTable();
+ contentLayout = new Grid(2, 1);
contentLayout.setCellPadding(0);
contentLayout.setCellSpacing(0);
- mainDecorator.setWidget(contentLayout);
- FlexCellFormatter formatter = contentLayout.getFlexCellFormatter();
-
- // Add the main menu title
- setMainMenuTitle("Main Menu");
- formatter.setStyleName(0, 0, DEFAULT_STYLE_NAME + "-menu-title");
-
- // Add the main menu
- contentLayout.setWidget(1, 0, createMainMenu());
- formatter.setStyleName(1, 0, DEFAULT_STYLE_NAME + "-menu-wrapper");
+ contentDecorator = new DecoratorPanel();
+ contentDecorator.setWidget(contentLayout);
+ contentDecorator.addStyleName(DEFAULT_STYLE_NAME + "-content-decorator");
+ bottomPanel.add(contentDecorator);
+ bottomPanel.setCellHorizontalAlignment(contentDecorator,
+ HasHorizontalAlignment.ALIGN_RIGHT);
+ CellFormatter formatter = contentLayout.getCellFormatter();
// Add the content title
setContentTitle(new HTML("Content"));
- formatter.setStyleName(0, 1, DEFAULT_STYLE_NAME + "-content-title");
+ formatter.setStyleName(0, 0, DEFAULT_STYLE_NAME + "-content-title");
// Add the content wrapper
- contentWrapper = new ScrollPanel();
- contentLayout.setWidget(1, 1, contentWrapper);
- formatter.setStyleName(1, 1, DEFAULT_STYLE_NAME + "-content-wrapper");
+ contentWrapper = new SimplePanel();
+ contentLayout.setWidget(1, 0, contentWrapper);
+ formatter.setStyleName(1, 0, DEFAULT_STYLE_NAME + "-content-wrapper");
setContent(null);
}
@@ -191,7 +197,7 @@
* @return the content title widget
*/
public Widget getContentTitle() {
- return contentLayout.getWidget(0, 1);
+ return contentLayout.getWidget(0, 0);
}
/**
@@ -202,13 +208,6 @@
}
/**
- * @return the title above the main menu
- */
- public String getMainMenuTitle() {
- return contentLayout.getHTML(0, 0);
- }
-
- /**
* @return the {@link Widget} used as the title
*/
public Widget getTitleWidget() {
@@ -216,17 +215,16 @@
}
public void onWindowResized(int width, int height) {
- // Set the height of the main layout
- getWidget().setHeight(height + "px");
-
- // Set the size of the main wrappers
- int contentTitleHeight = DOM.getElementPropertyInt(
- contentLayout.getCellFormatter().getElement(0, 1), "offsetHeight");
- int bottomHeight = height - topPanel.getOffsetHeight() - 50
- - contentTitleHeight;
- int bottomWidth = width - 50;
- mainMenuWrapper.setSize("200px", bottomHeight + "px");
- contentWrapper.setSize((bottomWidth - 200) + "px", bottomHeight + "px");
+ if (width == windowWidth) {
+ return;
+ }
+ windowWidth = width;
+ int menuWidth = mainMenu.getOffsetWidth();
+ int contentWidth = width - menuWidth - 30;
+ bottomPanel.setCellWidth(mainMenu, menuWidth + "px");
+ contentLayout.setWidth(contentWidth + "px");
+ contentLayout.getCellFormatter().setWidth(0, 0, contentWidth + "px");
+ contentLayout.getCellFormatter().setWidth(1, 0, contentWidth + "px");
}
/**
@@ -248,7 +246,7 @@
* @param title the content area title
*/
public void setContentTitle(Widget title) {
- contentLayout.setWidget(0, 1, title);
+ contentLayout.setWidget(0, 0, title);
}
/**
@@ -261,12 +259,13 @@
}
/**
- * Set the title of the main menu.
+ * Set the {@link Widget} to use as options, which appear to the right of the
+ * title bar.
*
- * @param title the main menu title
+ * @param options the options widget
*/
- public void setMainMenuTitle(String title) {
- contentLayout.setHTML(0, 0, title);
+ public void setOptionsWidget(Widget options) {
+ topPanel.setWidget(1, 1, options);
}
/**
@@ -275,26 +274,27 @@
* @param title the title widget
*/
public void setTitleWidget(Widget title) {
- topPanel.setWidget(0, 0, title);
+ topPanel.setWidget(1, 0, title);
}
@Override
protected void onLoad() {
+ super.onLoad();
Window.addWindowResizeListener(this);
onWindowResized(Window.getClientWidth(), Window.getClientHeight());
}
@Override
protected void onUnload() {
+ super.onUnload();
Window.removeWindowResizeListener(this);
+ windowWidth = -1;
}
/**
* Create the main menu.
- *
- * @return the main menu
*/
- private Widget createMainMenu() {
+ private void createMainMenu() {
// Setup the main menu
ApplicationImages treeImages = GWT.create(ApplicationImages.class);
mainMenu = new Tree(treeImages);
@@ -309,33 +309,47 @@
public void onTreeItemStateChanged(TreeItem item) {
}
});
-
- // Add a wrapper around the menu
- mainMenuWrapper = new ScrollPanel(mainMenu);
- return mainMenuWrapper;
}
/**
* Create the panel at the top of the page that contains the title and links.
- *
- * @return the top panel
*/
- private Grid createTopPanel() {
- Grid grid = new Grid(1, 2);
- grid.setStyleName(DEFAULT_STYLE_NAME + "-top");
- grid.getRowFormatter().setVerticalAlign(0, HasVerticalAlignment.ALIGN_TOP);
-
- // Setup the title cell
- CellFormatter formatter = grid.getCellFormatter();
- formatter.setStyleName(0, 0, DEFAULT_STYLE_NAME + "-title");
+ private void createTopPanel() {
+ boolean isRTL = LocaleInfo.getCurrentLocale().isRTL();
+ topPanel = new FlexTable();
+ topPanel.setCellPadding(0);
+ topPanel.setCellSpacing(0);
+ topPanel.setStyleName(DEFAULT_STYLE_NAME + "-top");
+ FlexCellFormatter formatter = topPanel.getFlexCellFormatter();
// Setup the links cell
linksPanel = new HorizontalPanel();
- grid.setWidget(0, 1, linksPanel);
- formatter.setStyleName(0, 1, DEFAULT_STYLE_NAME + "-links");
- formatter.setHorizontalAlignment(0, 1, HasHorizontalAlignment.ALIGN_RIGHT);
+ topPanel.setWidget(0, 0, linksPanel);
+ formatter.setStyleName(0, 0, DEFAULT_STYLE_NAME + "-links");
+ if (isRTL) {
+ formatter.setHorizontalAlignment(0, 0, HasHorizontalAlignment.ALIGN_LEFT);
+ } else {
+ formatter.setHorizontalAlignment(0, 0, HasHorizontalAlignment.ALIGN_RIGHT);
+ }
+ formatter.setColSpan(0, 0, 2);
- // Return the panel
- return grid;
+ // Setup the title cell
+ setTitleWidget(null);
+ formatter.setStyleName(1, 0, DEFAULT_STYLE_NAME + "-title");
+
+ // Setup the options cell
+ setOptionsWidget(null);
+ formatter.setStyleName(1, 1, DEFAULT_STYLE_NAME + "-options");
+ if (isRTL) {
+ formatter.setHorizontalAlignment(1, 1, HasHorizontalAlignment.ALIGN_LEFT);
+ } else {
+ formatter.setHorizontalAlignment(1, 1, HasHorizontalAlignment.ALIGN_RIGHT);
+ }
+
+ // Align the content to the top
+ topPanel.getRowFormatter().setVerticalAlign(0,
+ HasVerticalAlignment.ALIGN_TOP);
+ topPanel.getRowFormatter().setVerticalAlign(1,
+ HasVerticalAlignment.ALIGN_TOP);
}
}
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/client/Showcase.java b/samples/showcase/src/com/google/gwt/sample/showcase/client/Showcase.java
index 1428c17..d432827 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/client/Showcase.java
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/client/Showcase.java
@@ -62,14 +62,18 @@
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.ChangeListener;
+import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.HTML;
+import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.ListBox;
+import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
+import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import java.util.HashMap;
@@ -107,6 +111,11 @@
private static final String GWT_EXAMPLES = GWT_HOMEPAGE + "examples/";
/**
+ * The available style themes that the user can select.
+ */
+ private static final String[] STYLE_THEMES = {"default", "chrome", "black"};
+
+ /**
* Convenience method for getting the document's head element.
*
* @return the document's head element
@@ -163,11 +172,10 @@
ShowcaseConstants constants = (ShowcaseConstants) GWT.create(ShowcaseConstants.class);
// Create the application
- Window.enableScrolling(false);
app = new Application();
- app.setMainMenuTitle(constants.mainMenuTitle());
setupTitlePanel(constants);
setupMainLinks(constants);
+ setupOptionsPanel(constants);
setupMainMenu(constants);
RootPanel.get().add(app);
@@ -285,31 +293,6 @@
* @param constants the constants with text
*/
private void setupMainLinks(ShowcaseConstants constants) {
- // Change the locale
- final ListBox localeBox = new ListBox();
- String currentLocale = LocaleInfo.getCurrentLocale().getLocaleName();
- if (currentLocale.equals("default")) {
- currentLocale = "en";
- }
- String[] localeNames = LocaleInfo.getAvailableLocaleNames();
- for (String localeName : localeNames) {
- if (!localeName.equals("default")) {
- String nativeName = LocaleInfo.getLocaleNativeDisplayName(localeName);
- localeBox.addItem(nativeName, localeName);
- if (localeName.equals(currentLocale)) {
- localeBox.setSelectedIndex(localeBox.getItemCount() - 1);
- }
- }
- }
- localeBox.addChangeListener(new ChangeListener() {
- public void onChange(Widget sender) {
- String localeName = localeBox.getValue(localeBox.getSelectedIndex());
- Window.open(getHostPageLocation() + "?locale=" + localeName, "_self",
- "");
- }
- });
- app.addLink(localeBox);
-
// Link to GWT Homepage
app.addLink(new HTML("<a href=\"" + GWT_HOMEPAGE + "\">"
+ constants.mainLinkHomepage() + "</a>"));
@@ -435,6 +418,60 @@
}
/**
+ * Create the options that appear next to the title.
+ *
+ * @param constants the constant values to use
+ */
+ private void setupOptionsPanel(ShowcaseConstants constants) {
+ VerticalPanel vPanel = new VerticalPanel();
+ vPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
+ app.setOptionsWidget(vPanel);
+
+ // Add the option to change the locale
+ final ListBox localeBox = new ListBox();
+ String currentLocale = LocaleInfo.getCurrentLocale().getLocaleName();
+ if (currentLocale.equals("default")) {
+ currentLocale = "en";
+ }
+ String[] localeNames = LocaleInfo.getAvailableLocaleNames();
+ for (String localeName : localeNames) {
+ if (!localeName.equals("default")) {
+ String nativeName = LocaleInfo.getLocaleNativeDisplayName(localeName);
+ localeBox.addItem(nativeName, localeName);
+ if (localeName.equals(currentLocale)) {
+ localeBox.setSelectedIndex(localeBox.getItemCount() - 1);
+ }
+ }
+ }
+ localeBox.addChangeListener(new ChangeListener() {
+ public void onChange(Widget sender) {
+ String localeName = localeBox.getValue(localeBox.getSelectedIndex());
+ Window.open(getHostPageLocation() + "?locale=" + localeName, "_self",
+ "");
+ }
+ });
+ HorizontalPanel localeWrapper = new HorizontalPanel();
+ localeWrapper.add(images.locale().createImage());
+ localeWrapper.add(localeBox);
+ vPanel.add(localeWrapper);
+
+ // Add the option to change the style
+ HorizontalPanel styleWrapper = new HorizontalPanel();
+ vPanel.add(styleWrapper);
+ for (int i = 0; i < STYLE_THEMES.length; i++) {
+ String theme = STYLE_THEMES[i];
+ PushButton button = new PushButton();
+ button.addStyleName("sc-ThemeButton-" + theme);
+ styleWrapper.add(button);
+ button.addClickListener(new ClickListener() {
+ public void onClick(Widget sender) {
+ Window.alert("Additional styles coming soon...");
+ }
+ });
+ }
+ }
+
+ /**
* Create the title bar at the top of the application.
*
* @param constants the constant values to use
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/client/ShowcaseConstants.properties b/samples/showcase/src/com/google/gwt/sample/showcase/client/ShowcaseConstants.properties
index 8abc5c2..b1f0b62 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/client/ShowcaseConstants.properties
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/client/ShowcaseConstants.properties
@@ -84,7 +84,7 @@
cwDecoratorPanelDescription = Add rounded corners to any Widget using the Decorator Panel.
cwDialogBoxName = Dialog Box
cwDialogBoxDescription = The draggable DialogBox resembles a window and includes a title bar. You can adjust to opacity to allow some of the background to show through the popup.
-cwDialogBoxMakeTransparent = Make Transparent
+cwDialogBoxMakeTransparent = Make Translucent
cwDialogBoxCaption = Sample DialogBox
cwDialogBoxClose = Close
cwDialogBoxDetails = This is an example of a standard dialog box component.
@@ -196,7 +196,7 @@
cwSuggestBoxWords = 1337, apple, about, ant, bruce, banana, bobv, canada, coconut, compiler, donut, deferred binding, dessert topping, eclair, ecc, frog attack, floor wax, fitz, google, gosh, gwt, hollis, haskell, hammer, in the flinks, internets, ipso facto, jat, jgw, java, jens, knorton, kaitlyn, kangaroo, la grange, lars, love, morrildl, max, maddie, mloofle, mmendez, nail, narnia, null, optimizations, obfuscation, original, ping pong, polymorphic, pleather, quotidian, quality, qu'est-ce que c'est, ready state, ruby, rdayal, subversion, superclass, scottb, tobyr, the dans, ~ tilde, undefined, unit tests, under 100ms, vtbl, vidalia, vector graphics, w3c, web experience, work around, w00t!, xml, xargs, xeno, yacc, yank (the vi command), zealot, zoe, zebra
cwTabPanelName = Tab Panel
cwTabPanelDescription = Divide content over multiple tabs.
-cwTabPanelTab0 = Click one the tabs to see more content.
+cwTabPanelTab0 = Click one of the tabs to see more content.
cwTabPanelTab2 = Tabs are highly customizable using CSS.
cwTabPanelTabs = Home, GWT Logo, More Info
cwTreeName = Tree
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/client/ShowcaseImages.java b/samples/showcase/src/com/google/gwt/sample/showcase/client/ShowcaseImages.java
index 9c85b28..b141f0c 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/client/ShowcaseImages.java
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/client/ShowcaseImages.java
@@ -45,4 +45,9 @@
AbstractImagePrototype jimmy();
AbstractImagePrototype jimmyThumb();
+
+ /**
+ * Indicates the locale selection box.
+ */
+ AbstractImagePrototype locale();
}
\ No newline at end of file
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/client/content/other/CwFrame.java b/samples/showcase/src/com/google/gwt/sample/showcase/client/content/other/CwFrame.java
index 79b3574..080f8a5 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/client/content/other/CwFrame.java
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/client/content/other/CwFrame.java
@@ -84,7 +84,7 @@
@Override
public Widget onInitialize() {
// Create a new frame
- final Frame frame = new Frame("http://www.google.com");
+ final Frame frame = new Frame("GWT-default.css");
frame.setSize("700px", "300px");
frame.ensureDebugId("cwFrame");
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/client/content/panels/CwDecoratorPanel.java b/samples/showcase/src/com/google/gwt/sample/showcase/client/content/panels/CwDecoratorPanel.java
index 992c84a..59f9f6d 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/client/content/panels/CwDecoratorPanel.java
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/client/content/panels/CwDecoratorPanel.java
@@ -84,7 +84,7 @@
FlexCellFormatter cellFormatter = layout.getFlexCellFormatter();
// Add a title to the form
- layout.setHTML(0, 0, "Enter Serch Criteria");
+ layout.setHTML(0, 0, "Enter Search Criteria");
cellFormatter.setColSpan(0, 0, 2);
cellFormatter.setHorizontalAlignment(0, 0,
HasHorizontalAlignment.ALIGN_CENTER);
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/client/content/widgets/CwCustomButton.java b/samples/showcase/src/com/google/gwt/sample/showcase/client/content/widgets/CwCustomButton.java
index 166f6c3..b53219c 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/client/content/widgets/CwCustomButton.java
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/client/content/widgets/CwCustomButton.java
@@ -20,6 +20,7 @@
import com.google.gwt.sample.showcase.client.Showcase;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
+import com.google.gwt.user.client.ui.KeyboardListenerAdapter;
import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.ToggleButton;
import com.google.gwt.user.client.ui.VerticalPanel;
@@ -99,6 +100,7 @@
PushButton normalPushButton = new PushButton(
Showcase.images.gwtLogo().createImage());
normalPushButton.ensureDebugId("cwCustomButton-push-normal");
+ normalPushButton.addKeyboardListener(new KeyboardListenerAdapter());
pushPanel.add(normalPushButton);
// Add a disabled PushButton
@@ -112,6 +114,7 @@
ToggleButton normalToggleButton = new ToggleButton(
Showcase.images.gwtLogo().createImage());
normalToggleButton.ensureDebugId("cwCustomButton-toggle-normal");
+ normalToggleButton.addKeyboardListener(new KeyboardListenerAdapter());
togglePanel.add(normalToggleButton);
// Add a disabled ToggleButton
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/client/locale.png b/samples/showcase/src/com/google/gwt/sample/showcase/client/locale.png
new file mode 100644
index 0000000..cc16676
--- /dev/null
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/client/locale.png
Binary files differ
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/public/GWT-default.css b/samples/showcase/src/com/google/gwt/sample/showcase/public/GWT-default.css
index 30645b9..0ca8055 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/public/GWT-default.css
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/public/GWT-default.css
@@ -53,10 +53,10 @@
.gwt-DecoratorPanel .middleRight {
background: url(images/vborder.png) repeat-y;
}
-.gwt-DecoratorPanel .topLeft,
-.gwt-DecoratorPanel .topRight,
-.gwt-DecoratorPanel .bottomLeft,
-.gwt-DecoratorPanel .bottomRight {
+.gwt-DecoratorPanel .topLeftInner,
+.gwt-DecoratorPanel .topRightInner,
+.gwt-DecoratorPanel .bottomLeftInner,
+.gwt-DecoratorPanel .bottomRightInner {
width: 5px;
height: 5px;
zoom: 1;
@@ -540,10 +540,8 @@
border-bottom: 2px solid #625b54;
cursor: default;
opacity: 0.5;
-}
-
-.gwt-PushButton-up-disabled .gwt-Image {
filter: alpha(opacity=30);
+ zoom: 1;
}
.gwt-PushButton-down {
@@ -574,6 +572,8 @@
border-bottom: 2px solid #625b54;
cursor: default;
opacity: 0.5;
+ filter: alpha(opacity=30);
+ zoom: 1;
}
.gwt-PushButton-down-disabled .gwt-Image {
@@ -1072,10 +1072,8 @@
border-bottom: 2px solid #625b54;
cursor: default;
opacity: 0.5;
-}
-
-.gwt-ToggleButton-up-disabled .gwt-Image {
- filter: alpha(opacity=30);
+ filter: alpha(opacity=40);
+ zoom: 1;
}
.gwt-ToggleButton-down {
@@ -1106,10 +1104,8 @@
border-bottom: 2px solid #625b54;
cursor: default;
opacity: 0.5;
-}
-
-.gwt-ToggleButton-down-disabled .gwt-Image {
- filter: alpha(opacity=30);
+ filter: alpha(opacity=40);
+ zoom: 1;
}
/**
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/public/GWT-default.rtl.css b/samples/showcase/src/com/google/gwt/sample/showcase/public/GWT-default.rtl.css
index ed0b3a2..83f1a7f 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/public/GWT-default.rtl.css
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/public/GWT-default.rtl.css
@@ -8,7 +8,6 @@
margin: 0px;
border: 0px;
padding: 0px;
- background: #e2e8f2 url(images/bg_gradient.png) repeat-x;
direction: rtl;
}
@@ -46,29 +45,20 @@
/**
* Applied to the decorator panel.
*/
-.gwt-DecoratorPanel {
- border-collapse: collapse;
-}
-.gwt-DecoratorPanel .middleCenter {
- padding: 0px;
-}
.gwt-DecoratorPanel .topCenter,
.gwt-DecoratorPanel .bottomCenter {
- padding: 0px;
background: url(images/hborder.png) repeat-x;
}
.gwt-DecoratorPanel .middleLeft,
.gwt-DecoratorPanel .middleRight {
- padding: 0px;
background: url(images/vborder.png) repeat-y;
}
-.gwt-DecoratorPanel .topLeft,
-.gwt-DecoratorPanel .topRight,
-.gwt-DecoratorPanel .bottomLeft,
-.gwt-DecoratorPanel .bottomRight {
- width: 5px;
- height: 5px;
- padding: 0px;
+.gwt-DecoratorPanel .topLeftInner,
+.gwt-DecoratorPanel .topRightInner,
+.gwt-DecoratorPanel .bottomLeftInner,
+.gwt-DecoratorPanel .bottomRightInner {
+ width: 5px;
+ height: 5px;
zoom: 1;
}
html>body .gwt-DecoratorPanel .topLeft {
@@ -122,43 +112,31 @@
cursor: default;
border-bottom: 1px solid #bbbbbb;
}
-.gwt-DialogBox {
- border-collapse: collapse;
-}
-.gwt-DialogBox .Content {
+.gwt-DialogBox .content {
}
.gwt-DialogBox .middleCenter {
padding: 3px;
background: white;
}
-.gwt-DialogBox .topCenter {
- padding: 0px;
-}
html>body .gwt-DialogBox .bottomCenter {
- padding: 0px;
background: url(images/hborder.png) repeat-x;
}
* html .gwt-DialogBox .bottomCenter {
- padding: 0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ie6/hborder_blue_shadow.png',sizingMethod='scale');
}
.gwt-DialogBox .middleLeft {
- padding: 0px;
background: url(images/vborder.png) repeat-y;
}
html>body .gwt-DialogBox .middleRight {
- padding: 0px;
background: url(images/vborder.png) repeat-y;
}
* html .gwt-DialogBox .middleRight {
- padding: 0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ie6/vborder_blue_shadow.png',sizingMethod='scale');
}
.gwt-DialogBox .topLeft,
.gwt-DialogBox .topRight,
.gwt-DialogBox .bottomLeft,
.gwt-DialogBox .bottomRight {
- padding: 0px;
zoom: 1;
}
html>body .gwt-DialogBox .topLeft {
@@ -362,25 +340,18 @@
padding-left: 4px;
}
.gwt-MenuBar-vertical .subMenuIcon-selected {
- background: #E0EDFE;
+ background: #E0EDFE;
}
.gwt-MenuBarPopup {
- border-collapse: collapse;
margin: 0px 3px 0px 0px;
}
-.gwt-MenuBarPopup .middleCenter {
- padding: 0px;
-}
.gwt-MenuBarPopup .topCenter {
background: url(images/hborder.png) 0px -17px repeat-x;
- padding: 0px;
}
html>body .gwt-MenuBarPopup .bottomCenter {
background: url(images/hborder.png) 0px -18px repeat-x;
- padding: 0px;
}
* html .gwt-MenuBarPopup .bottomCenter {
- padding: 0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ie6/hborder_gray_shadow.png',sizingMethod='scale');
}
.gwt-MenuBarPopup .middleLeft {
@@ -388,18 +359,10 @@
}
html>body .gwt-MenuBarPopup .middleRight {
background: url(images/vborder.png) -18px 0px repeat-y;
- padding: 0px;
}
* html .gwt-MenuBarPopup .middleRight {
- padding: 0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ie6/vborder_gray_shadow.png',sizingMethod='scale');
}
-.gwt-MenuBarPopup .topLeft,
-.gwt-MenuBarPopup .topRight,
-.gwt-MenuBarPopup .bottomLeft,
-.gwt-MenuBarPopup .bottomRight {
- padding: 0px;
-}
html>body .gwt-MenuBarPopup .topLeft {
width: 5px;
height: 5px;
@@ -464,44 +427,34 @@
/**
* Applied to the decorator panel.
*/
-.gwt-PopupPanel {
- border-collapse: collapse;
-}
-.gwt-PopupPanel .Content {
+.gwt-PopupPanel .content {
}
.gwt-PopupPanel .middleCenter {
padding: 3px;
background: white;
}
.gwt-PopupPanel .topCenter {
- padding: 0px;
background: url(images/hborder.png) repeat-x;
}
html>body .gwt-PopupPanel .bottomCenter {
- padding: 0px;
background: url(images/hborder.png) repeat-x;
}
* html .gwt-PopupPanel .bottomCenter {
- padding: 0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ie6/hborder_blue_shadow.png',sizingMethod='scale');
}
.gwt-PopupPanel .middleLeft {
- padding: 0px;
background: url(images/vborder.png) repeat-y;
}
html>body .gwt-PopupPanel .middleRight {
- padding: 0px;
background: url(images/vborder.png) repeat-y;
}
* html .gwt-PopupPanel .middleRight {
- padding: 0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ie6/vborder_blue_shadow.png',sizingMethod='scale');
}
.gwt-PopupPanel .topLeft,
.gwt-PopupPanel .topRight,
.gwt-PopupPanel .bottomLeft,
.gwt-PopupPanel .bottomRight {
- padding: 0px;
zoom: 1;
}
html>body .gwt-PopupPanel .topLeft {
@@ -587,10 +540,8 @@
border-bottom: 2px solid #625b54;
cursor: default;
opacity: 0.5;
-}
-
-.gwt-PushButton-up-disabled .gwt-Image {
filter: alpha(opacity=30);
+ zoom: 1;
}
.gwt-PushButton-down {
@@ -621,6 +572,8 @@
border-bottom: 2px solid #625b54;
cursor: default;
opacity: 0.5;
+ filter: alpha(opacity=30);
+ zoom: 1;
}
.gwt-PushButton-down-disabled .gwt-Image {
@@ -722,7 +675,7 @@
border: 1px solid #bbbbbb;
border-bottom: 0px;
background: white;
- padding: 2px 5px 10px 2px;
+ padding: 2px 5px 10px 2px;
}
.gwt-StackPanelItem {
cursor: pointer;
@@ -730,7 +683,7 @@
}
.gwt-StackPanelItem .topLeft,
.gwt-StackPanelItem .topRight {
- height: 6px;
+ height: 6px;
width: 6px;
zoom: 1;
}
@@ -767,7 +720,7 @@
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/corner.png',sizingMethod='crop');
}
.gwt-StackPanelItem .topCenter {
- background: url(images/hborder.png) 0px -26px repeat-x;
+ background: url(images/hborder.png) 0px -26px repeat-x;
}
.gwt-StackPanelItem .middleLeft {
background: #d3def6 url(images/bg_stackpanel.png) repeat-x;
@@ -775,8 +728,8 @@
}
.gwt-StackPanelItem .middleLeftInner,
.gwt-StackPanelItem .middleRightInner {
- width: 1px;
- height: 1px;
+ width: 1px;
+ height: 1px;
}
.gwt-StackPanelItem .middleRight {
background: #d3def6 url(images/bg_stackpanel.png) repeat-x;
@@ -789,8 +742,8 @@
}
html>body .gwt-StackPanelItem-first .topRight,
html>body .gwt-StackPanelItem-first .topLeft {
- border: 0px;
- background-color: white;
+ border: 0px;
+ background-color: white;
}
html>body .gwt-StackPanelItem-below-selected .topLeft,
html>body .gwt-StackPanelItem-below-selected .topRight {
@@ -798,11 +751,11 @@
}
* html .gwt-StackPanelItem-first .topLeftInner,
* html .gwt-StackPanelItem-first .topRightInner {
- border: 0px;
+ border: 0px;
background-color: white;
}
* html .gwt-StackPanelItem-first .topLeftInner {
- padding-right: 1px;
+ padding-right: 1px;
}
* html .gwt-StackPanelItem-below-selected .topLeftInner,
* html .gwt-StackPanelItem-below-selected .topRightInner {
@@ -826,44 +779,27 @@
.gwt-SuggestBoxPopup .item-selected {
background: #b7d6f6;
}
-.gwt-SuggestBoxPopup {
- border-collapse: collapse;
- border-spacing: 0px;
-}
.gwt-SuggestBoxPopup .middleCenter {
- padding: 0px;
background: white;
}
.gwt-SuggestBoxPopup .topCenter {
background: url(images/hborder.png) repeat-x;
- padding: 0px;
}
html>body .gwt-SuggestBoxPopup .bottomCenter {
background: url(images/hborder.png) repeat-x;
- padding: 0px;
}
* html .gwt-SuggestBoxPopup .bottomCenter {
- padding: 0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ie6/hborder_blue_shadow.png',sizingMethod='scale');
}
.gwt-SuggestBoxPopup .middleLeft {
- padding: 0px;
background: url(images/vborder.png) repeat-y;
}
html>body .gwt-SuggestBoxPopup .middleRight {
- padding: 0px;
background: url(images/vborder.png) repeat-y;
}
* html .gwt-SuggestBoxPopup .middleRight {
- padding: 0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ie6/vborder_blue_shadow.png',sizingMethod='scale');
}
-.gwt-SuggestBoxPopup .topLeft,
-.gwt-SuggestBoxPopup .topRight,
-.gwt-SuggestBoxPopup .bottomLeft,
-.gwt-SuggestBoxPopup .bottomRight {
- padding: 0px;
-}
html>body .gwt-SuggestBoxPopup .topLeft {
width: 5px;
height: 5px;
@@ -904,7 +840,7 @@
height: 36px;
margin-top: -28px;
overflow: hidden;
- filter: progid:DXImageTransform.Microsoft.AlphaImageLsvn statuoader(src='images/corner.png',sizingMethod='crop');
+ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/corner.png',sizingMethod='crop');
}
* html .gwt-SuggestBoxPopup .bottomRightInner {
width: 13px;
@@ -968,7 +904,7 @@
}
.gwt-TabBar .gwt-TabBarItem .middleLeft,
.gwt-TabBar .gwt-TabBarItem .middleRight {
- width: 6px;
+ width: 6px;
padding: 0px;
background: #e4e9f3 url(images/bg_tab.png) repeat-x;
}
@@ -1136,10 +1072,8 @@
border-bottom: 2px solid #625b54;
cursor: default;
opacity: 0.5;
-}
-
-.gwt-ToggleButton-up-disabled .gwt-Image {
- filter: alpha(opacity=30);
+ filter: alpha(opacity=40);
+ zoom: 1;
}
.gwt-ToggleButton-down {
@@ -1170,32 +1104,22 @@
border-bottom: 2px solid #625b54;
cursor: default;
opacity: 0.5;
-}
-
-.gwt-ToggleButton-down-disabled .gwt-Image {
- filter: alpha(opacity=30);
+ filter: alpha(opacity=40);
+ zoom: 1;
}
/**
* Applied to the Tree.
*/
-.gwt-Tree {
- background: white;
-}
-
.gwt-Tree .gwt-TreeItem {
- padding: 0px;
+ padding: 1px;
margin: 0px;
- border: 1px solid white;
white-space: nowrap;
cursor: hand;
cursor: pointer;
}
-
-.gwt-Tree .gwt-TreeItem-hovering {
-}
-
.gwt-Tree .gwt-TreeItem-selected {
- background: #93c2f1 url(images/bg_listgradient.png) repeat-x;
+ padding: 0px;
border: 1px dotted #888;
+ background: #93c2f1 url(images/bg_listgradient.png) repeat-x;
}
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/public/Showcase.css b/samples/showcase/src/com/google/gwt/sample/showcase/public/Showcase.css
index 166c808..cfea6dd 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/public/Showcase.css
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/public/Showcase.css
@@ -3,9 +3,7 @@
*/
.Application-top {
width: 100%;
- background-color: #EBEBEB;
- background: url(images/bg_headergradient.png) repeat-x #e3e8f3;
- border-bottom: 2px solid #bbcdf3;
+ margin-bottom: 10px;
}
.Application-title {
padding: 0px 0px 0px 10px;
@@ -14,34 +12,65 @@
color: #67A7E3;
margin: 0px;
padding: 0px 0px 0px 4px;
- font-size: 1.7em;
+ font-size: 22px;
}
.Application-title h2 {
color: #888;
margin: 0px;
padding: 0px 0px 0px 4px;
- font-size: 1.1em;
+ font-size: 16px;
}
.Application-links {
- padding: 6px 10px;
+ padding: 2px 13px 2px 0px;
+ background: #C3D9FF;
}
-.Application-menu-title {
- padding: 4px 0px 3px 6px;
- font-weight: bold;
- white-space: nowrap;
- text-align: left;
+.Application-links .gwt-HTML{
+ font-size: 12px;
+}
+.Application-options {
+ padding: 6px 10px 0px 0px;
+}
+.Application-options .gwt-ListBox {
+ width: 150px;
+ font-size: 11px;
+ color: blue;
+ margin-left: 4px;
+}
+.Application-options td {
+ font-size: 12px;
+}
+.Application-options .gwt-PushButton {
+ width: 36px;
+ height: 16px;
+ margin: 3px 0px 0px 10px;
+}
+.Application-options .sc-ThemeButton-default {
+ background: url(images/bg_listgradient.png) repeat-x;
+}
+.Application-options .sc-ThemeButton-chrome {
background: url(images/bg_headergradient.png) repeat-x;
- border-right: 2px solid #bbcdf3;
- border-bottom: 2px solid #bbcdf3;
}
-.Application-menu-wrapper {
- border-right: 2px solid #bbcdf3;
- text-align: left;
+.Application-options .sc-ThemeButton-black {
+ background: #222222;
+}
+.Application-menu {
+ width: 180px;
+ text-align: left;
}
/**
* Applied to widgets in the content area.
*/
+.Application-content-decorator .topRightInner,
+.Application-content-decorator .middleRightInner,
+.Application-content-decorator .bottomRightInner {
+ display: none;
+}
+.Application-content-decorator .middleCenter .topRightInner,
+.Application-content-decorator .middleCenter .middleRightInner,
+.Application-content-decorator .middleCenter .bottomRightInner {
+ display: block;
+}
.Application-content-title {
padding: 4px 0px 3px 6px;
text-align: left;
@@ -71,7 +100,6 @@
}
.sc-ContentWidget {
padding: 10px 20px;
- position: relative;
}
.sc-ContentWidget-name {
font-size: 1.5em;
diff --git a/samples/showcase/src/com/google/gwt/sample/showcase/public/Showcase.rtl.css b/samples/showcase/src/com/google/gwt/sample/showcase/public/Showcase.rtl.css
index b1aa0c2..07276cf 100644
--- a/samples/showcase/src/com/google/gwt/sample/showcase/public/Showcase.rtl.css
+++ b/samples/showcase/src/com/google/gwt/sample/showcase/public/Showcase.rtl.css
@@ -1,93 +1,112 @@
/**
* Applied to the main layout of the page.
*/
-.Application-title {
- top: 6px;
- right: 10px;
+.Application-top {
+ width: 100%;
+ margin-bottom: 10px;
}
-.Application-title td {
+.Application-title {
padding: 0px 10px 0px 0px;
}
.Application-title h1 {
color: #67A7E3;
margin: 0px;
- padding: 0px;
- line-height: 1.3em;
+ padding: 0px 4px 0px 0px;
+ font-size: 22px;
}
.Application-title h2 {
color: #888;
margin: 0px;
- padding: 0px;
+ padding: 0px 4px 0px 0px;
+ font-size: 16px;
}
.Application-links {
- top: 6px;
- left: 10px;
+ padding: 2px 0px 2px 13px;
+ background: #C3D9FF;
}
-.Application-menu-title {
- padding: 3px 4px 3px 0px;
- background: #e3e8f3 url(images/bg_headergradient.png) repeat-x;
- font-weight: bold;
- border: 1px solid #BBBBBB;
- white-space: nowrap;
- overflow: hidden;
- right: 14px;
- width: 250px;
+.Application-links .gwt-HTML{
+ font-size: 12px;
}
-.Application-menu-wrapper {
- padding: 2px 4px 0px 0px;
- background: white;
- border-right: 1px solid #BBBBBB;
- border-left: 1px solid #BBBBBB;
- right: 14px;
- width: 250px;
+.Application-options {
+ padding: 6px 0px 0px 10px;
}
-.Application-content-title {
- background: #e3e8f3 url(images/bg_headergradient.png) repeat-x;
- font-weight: bold;
- border: 1px solid #BBBBBB;
- border-left: 0px;
- right: 284px;
- left: 1px;
+.Application-options .gwt-ListBox {
+ width: 150px;
+ font-size: 11px;
+ color: blue;
+ margin-right: 4px;
}
-.Application-content-wrapper {
- padding: 2px 0px 0px 0px;
- background: white;
- border-right: 1px solid #BBBBBB;
- right: 284px;
- left: 1px;
+.Application-options td {
+ font-size: 12px;
+}
+.Application-options .gwt-PushButton {
+ width: 36px;
+ height: 16px;
+ margin: 3px 10px 0px 0px;
+}
+.Application-options .sc-ThemeButton-default {
+ background: url(images/bg_listgradient.png) repeat-x;
+}
+.Application-options .sc-ThemeButton-chrome {
+ background: url(images/bg_headergradient.png) repeat-x;
+}
+.Application-options .sc-ThemeButton-black {
+ background: #222222;
+}
+.Application-menu {
+ width: 180px;
+ text-align: right;
}
/**
* Applied to widgets in the content area.
*/
-.sc-ContentWidgetTabBar .gwt-TabBarItem {
- cursor: pointer;
- cursor: hand;
- margin-right: 10px;
- border-collapse: collapse;
+.Application-content-decorator .topRightInner,
+.Application-content-decorator .middleRightInner,
+.Application-content-decorator .bottomRightInner {
+ display: none;
}
-.sc-ContentWidgetTabBar .gwt-TabBarItem .gwt-Label {
- padding: 1px 0px;
- color: #888888;
+.Application-content-decorator .middleCenter .topRightInner,
+.Application-content-decorator .middleCenter .middleRightInner,
+.Application-content-decorator .middleCenter .bottomRightInner {
+ display: block;
}
-.sc-ContentWidgetTabBar .gwt-TabBarItem-selected .gwt-Label {
- color: black;
+.Application-content-title {
+ padding: 4px 6px 3px 0px;
+ text-align: right;
+ background: url(images/bg_headergradient.png) repeat-x;
+ border-bottom: 2px solid #bbcdf3;
}
-.sc-ContentWidgetTabPanelBottom {
- border: 0px;
- border-top: 20px solid white;
- border-bottom: 5px solid white;
+.Application-content-title .gwt-TabBarItem .top,
+.Application-content-title .gwt-TabBarItem .topLeft,
+.Application-content-title .gwt-TabBarItem .topRight,
+.Application-content-title .gwt-TabBarItem .middleLeft,
+.Application-content-title .gwt-TabBarItem .middleRight {
+ display: none;
+}
+.Application-content-title .gwt-TabBarItem .middleCenter {
+ background: none;
padding: 0px;
}
-.sc-ContentWidget .sc-ContentWidgetContents {
- padding: 0px 20px;
+.Application-content-title .gwt-TabBarItem .gwt-Label {
+ padding-left: 20px;
+ color: #888888;
}
-.sc-ContentWidgetName {
+.Application-content-title .gwt-TabBarItem-selected .gwt-Label {
+ color: black;
+}
+.Application-content-wrapper {
+ text-align: right;
+}
+.sc-ContentWidget {
+ padding: 10px 20px;
+}
+.sc-ContentWidget-name {
font-size: 1.5em;
font-weight: bold;
padding-bottom: 15px;
}
-.sc-ContentWidgetDescription {
+.sc-ContentWidget-description {
padding-bottom: 15px;
border-bottom: 1px solid #7aa5d6;
margin-bottom: 15px;
@@ -95,8 +114,8 @@
.sc-ContentWidget pre {
border: 1px solid #888;
background: #eeeeee;
- margin: 0px 20px;
- padding: 10px;
+ padding: 10px 2px;
+ margin: 10px 0px;
font-size: medium;
}
