diff --git a/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeApp.java b/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeApp.java index 4e24a8416..0d511e921 100644 --- a/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeApp.java +++ b/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeApp.java @@ -7,11 +7,13 @@ import com.allen_sauer.gwt.dnd.client.drop.DropController; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.History; import com.google.gwt.user.client.HistoryListener; -import com.google.gwt.user.client.ui.Button; +import com.google.gwt.user.client.Window; +import com.google.gwt.user.client.WindowResizeListener; import com.google.gwt.user.client.ui.ChangeListener; import com.google.gwt.user.client.ui.ClickListener; -import com.google.gwt.user.client.ui.HorizontalPanel; -import com.google.gwt.user.client.ui.Panel; +import com.google.gwt.user.client.ui.DockPanel; +import com.google.gwt.user.client.ui.HasHorizontalAlignment; +import com.google.gwt.user.client.ui.HasVerticalAlignment; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Widget; @@ -142,61 +144,64 @@ public class FridgeApp implements EntryPoint { }; magnetFactory = new MagnetFactory(dragController, magnetClickListener); - VerticalPanel vPanel = new VerticalPanel(); - vPanel.setStyleName("my-FridgeApp"); - vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER); - vPanel.add(createTextPanel()); - vPanel.add(createButtonPanel()); - vPanel.add(createBagPanel()); - vPanel.add(createSettingsPanel()); - vPanel.add(createTranslationsPanel()); - - DropController dropController = new FridgeTextPanelDropController(textPanel); - dragController.registerDropController(dropController); - - return vPanel; - } - - protected Widget createTextPanel () { - textPanel = new FridgeTextPanel(magnetFactory); + textPanel = new FridgeTextPanel(magnetFactory); textPanel.addChangeListener(new ChangeListener() { public void onChange(Widget widget) { update(); } }); - - return textPanel; - } - - protected Widget createButtonPanel () { - Panel buttons = new HorizontalPanel(); - buttons.add(new Button("Delete last", new ClickListener () { - public void onClick(Widget sender) { - textPanel.deleteLast(); - } - })); - buttons.add(new Button("Clear", new ClickListener () { - public void onClick(Widget sender) { - clear(); - } - })); - return buttons; - } - - protected Widget createBagPanel () { bagPanel = new FridgeBagPanel(pgf, magnetFactory); - return bagPanel; + outputPanel = new TranslationsPanel(); + SettingsPanel settingsPanel = new SettingsPanel(pgf, true, false); + + final DockPanel mainPanel = new DockPanel(); + mainPanel.setStyleName("my-FridgeApp"); + mainPanel.add(textPanel, DockPanel.NORTH); + mainPanel.add(settingsPanel, DockPanel.SOUTH); + mainPanel.add(bagPanel, DockPanel.CENTER); + mainPanel.add(outputPanel, DockPanel.EAST); + + mainPanel.setCellHeight(bagPanel, "100%"); + mainPanel.setCellWidth(bagPanel, "80%"); + mainPanel.setCellHeight(outputPanel, "100%"); + mainPanel.setCellWidth(outputPanel, "20%"); + mainPanel.setCellVerticalAlignment(bagPanel, HasVerticalAlignment.ALIGN_TOP); + mainPanel.setCellHorizontalAlignment(outputPanel, HasHorizontalAlignment.ALIGN_RIGHT); + mainPanel.setCellWidth(settingsPanel, "100%"); + + DropController dropController = new FridgeTextPanelDropController(textPanel); + dragController.registerDropController(dropController); + + Window.addWindowResizeListener(new WindowResizeListener() { + public void onWindowResized(int w, int h) { + mainPanel.setPixelSize(w, h); + } + }); + int w = Window.getClientWidth(); + int h = Window.getClientHeight(); + mainPanel.setPixelSize(w, h); + + return mainPanel; + } + + private static class TranslationsPanel extends VerticalPanel { + public TranslationsPanel () { + setStylePrimaryName("my-TranslationsPanel"); + addStyleDependentName("empty"); + } + + public void clear () { + super.clear(); + addStyleDependentName("empty"); + } + + public void add(Widget w) { + removeStyleDependentName("empty"); + super.add(w); + } + } - protected Widget createSettingsPanel () { - return new SettingsPanel(pgf, true, false); - } - - protected Widget createTranslationsPanel () { - outputPanel = new VerticalPanel(); - outputPanel.addStyleName("my-translations"); - return outputPanel; - } // // History stuff diff --git a/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeBagPanel.java b/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeBagPanel.java index 0457e255e..b123d2334 100644 --- a/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeBagPanel.java +++ b/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeBagPanel.java @@ -7,6 +7,7 @@ import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.ClickListener; import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.ScrollPanel; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Widget; @@ -37,8 +38,9 @@ public class FridgeBagPanel extends Composite { vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER); vPanel.add(prefixPanel); vPanel.add(mainPanel); - initWidget(vPanel); + initWidget(new ScrollPanel(vPanel)); setStylePrimaryName("my-FridgeBagPanel"); + addStyleDependentName("empty"); } public void updateBag (String text) { @@ -51,6 +53,7 @@ public class FridgeBagPanel extends Composite { } final boolean updatePrefixes = prefix.equals(""); mainPanel.clear(); + addStyleDependentName("empty"); if (updatePrefixes) { clearPrefixes(); } int limit = updatePrefixes ? 0 : maxMagnets; completeRequest = pgf.complete(text + " " + prefix, @@ -69,6 +72,7 @@ public class FridgeBagPanel extends Composite { if (mainPanel.getWidgetCount() < maxMagnets) { Magnet magnet = magnetFactory.createMagnet(word, completion.getFrom()); mainPanel.add(magnet); + removeStyleDependentName("empty"); } else { prefixPanel.setVisible(true); } @@ -97,6 +101,7 @@ public class FridgeBagPanel extends Composite { updateBag(text, prefix); } }); + prefixButton.setTitle("Show only magnets stating with '" + prefix + "'"); prefixPanel.add(prefixButton); } } diff --git a/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeTextPanel.java b/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeTextPanel.java index aad0773a6..1ae85622c 100644 --- a/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeTextPanel.java +++ b/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/FridgeTextPanel.java @@ -2,8 +2,14 @@ package se.chalmers.cs.gf.gwt.client; import com.google.gwt.user.client.ui.ChangeListener; import com.google.gwt.user.client.ui.ChangeListenerCollection; +import com.google.gwt.user.client.ui.ClickListener; import com.google.gwt.user.client.ui.Composite; +import com.google.gwt.user.client.ui.DockPanel; import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.Panel; +import com.google.gwt.user.client.ui.PushButton; +import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Widget; public class FridgeTextPanel extends Composite { @@ -17,24 +23,39 @@ public class FridgeTextPanel extends Composite { public FridgeTextPanel (MagnetFactory magnetFactory) { this.magnetFactory = magnetFactory; mainPanel = new FlowPanel(); - FlowPanel wrapper = new FlowPanel(); - wrapper.add(createMinHeightProp()); - wrapper.add(mainPanel); - wrapper.add(createFloatClearer()); + mainPanel.setStylePrimaryName("magnets"); + DockPanel wrapper = new DockPanel(); + wrapper.add(mainPanel, DockPanel.CENTER); + Widget buttons = createButtonPanel(); + wrapper.add(buttons, DockPanel.EAST); + wrapper.setCellWidth(mainPanel, "100%"); + wrapper.setCellWidth(buttons, "6em"); + wrapper.setHorizontalAlignment(DockPanel.ALIGN_RIGHT); initWidget(wrapper); setStylePrimaryName("my-FridgeTextPanel"); } - private Widget createMinHeightProp() { - Widget prop = new FlowPanel(); - prop.setStylePrimaryName("prop"); - return prop; - } - - private Widget createFloatClearer() { - Widget clear = new FlowPanel(); - clear.setStylePrimaryName("clear"); - return clear; + + protected Widget createButtonPanel () { + Panel buttons = new VerticalPanel(); + buttons.setStylePrimaryName("buttons"); + PushButton deleteLastButton = new PushButton(new Image("delete-last.png")); + deleteLastButton.setTitle("Removes the last magnet."); + deleteLastButton.addClickListener(new ClickListener () { + public void onClick(Widget sender) { + deleteLast(); + } + }); + buttons.add(deleteLastButton); + PushButton clearButton = new PushButton("Clear"); + clearButton.addClickListener(new ClickListener () { + public void onClick(Widget sender) { + clear(); + } + }); + clearButton.setTitle("Removes all magnets."); + buttons.add(clearButton); + return buttons; } public void setEngaged(boolean engaged) { diff --git a/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/SettingsPanel.java b/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/SettingsPanel.java index 40233b004..43a9b915e 100644 --- a/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/SettingsPanel.java +++ b/src/server/gwt/src/se/chalmers/cs/gf/gwt/client/SettingsPanel.java @@ -22,6 +22,7 @@ public class SettingsPanel extends Composite { this.pgf = pgf; HorizontalPanel settingsPanel = new HorizontalPanel(); + settingsPanel.setHorizontalAlignment(HorizontalPanel.ALIGN_CENTER); settingsPanel.setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE); if (showPGFName) { @@ -30,9 +31,8 @@ public class SettingsPanel extends Composite { public void onChange(Widget sender) { SettingsPanel.this.pgf.setPGFName(grammarBox.getSelectedValue()); } - }); - settingsPanel.add(new Label("Grammar:")); - settingsPanel.add(grammarBox); + }); + settingsPanel.add(new FormWidget("Grammar:", grammarBox)); } fromLangBox = new MyListBox(); @@ -41,8 +41,7 @@ public class SettingsPanel extends Composite { SettingsPanel.this.pgf.setInputLanguage(fromLangBox.getSelectedValue()); } }); - settingsPanel.add(new Label("From:")); - settingsPanel.add(fromLangBox); + settingsPanel.add(new FormWidget("From:", fromLangBox)); if (showOutputLanguage) { toLangBox = new MyListBox(); @@ -51,8 +50,7 @@ public class SettingsPanel extends Composite { SettingsPanel.this.pgf.setOutputLanguage(toLangBox.getSelectedValue()); } }); - settingsPanel.add(new Label("To:")); - settingsPanel.add(toLangBox); + settingsPanel.add(new FormWidget("To:", toLangBox)); } initWidget(settingsPanel); @@ -61,6 +59,15 @@ public class SettingsPanel extends Composite { pgf.addSettingsListener(new MySettingsListener()); } + private static class FormWidget extends HorizontalPanel { + public FormWidget(String label, Widget w) { + setStylePrimaryName(".my-FormWidget"); + setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE); + add(new Label(label)); + add(w); + } + } + private class MySettingsListener implements PGFWrapper.SettingsListener { public void onAvailableGrammarsChanged() { if (grammarBox != null) { diff --git a/src/server/gwt/src/se/chalmers/cs/gf/gwt/public/Fridge.css b/src/server/gwt/src/se/chalmers/cs/gf/gwt/public/Fridge.css index 8968c3aea..43b0d3efb 100644 --- a/src/server/gwt/src/se/chalmers/cs/gf/gwt/public/Fridge.css +++ b/src/server/gwt/src/se/chalmers/cs/gf/gwt/public/Fridge.css @@ -6,40 +6,31 @@ body { } -.my-FridgeTextPanel, .my-FridgeBagPanel, .my-translations, .my-SettingsPanel { - margin: 1em; -} - -.my-FridgeTextPanel, .my-FridgeBagPanel { - min-height: 2.4em; - padding: 0.2em; -} - .my-FridgeTextPanel { - font-size: 150%; + padding: 0.2em; + width: 100%; border: 3px dashed #dddddd; } +.my-FridgeTextPanel .magnets { + width: 100%; +} + +.my-FridgeTextPanel .buttons { + width: 100%; +} + +.my-FridgeTextPanel .buttons button { + width: 100%; +} + .my-FridgeTextPanel-engage { border-color: #666666; background-color: #dddddd; } -/* IE min-height hack */ -.my-FridgeTextPanel .prop { - height: 2.4em; - float: right; - width: 1px; -} - -/* Used for clearing floats to ensure that float container is tall enough */ -.my-FridgeTextPanel .clear { - clear: both; - height: 1px; - overflow: hidden; -} - .my-FridgeBagPanel { + padding: 0.2em; border: 3px solid #dddddd; } @@ -47,6 +38,10 @@ body { margin-bottom: 1em; } +.my-FridgeTextPanel .my-Magnet { + font-size: 150%; +} + .my-Magnet { float: left; margin: 0.3em; @@ -58,16 +53,26 @@ body { background-color: white; } -.my-translations { - min-height: 2.4em; +.my-TranslationsPanel { padding: 0.2em; - border: 3px solid silver; + border: 3px solid #dddddd; + width: 100%; +} + +.my-TranslationsPanel-empty { + visibility: hidden; } .my-translation { margin: 0.2em; } -.my-SettingsPanel * { +.my-SettingsPanel { + width: 100%; + padding: 0.5em 0; + border-top: 1px solid #dddddd; +} + +.my-SettingsPanel .my-FormWidget { margin: 0.2em; } \ No newline at end of file diff --git a/src/server/gwt/src/se/chalmers/cs/gf/gwt/public/delete-last.png b/src/server/gwt/src/se/chalmers/cs/gf/gwt/public/delete-last.png new file mode 100644 index 000000000..f984b976e Binary files /dev/null and b/src/server/gwt/src/se/chalmers/cs/gf/gwt/public/delete-last.png differ