Towards better layout of Fridge app.

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

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);
 		}
 	}

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) {

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) {

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;
 }