From becdc147d21a766befdd8abc2209a0a3bd5cb053 Mon Sep 17 00:00:00 2001
From: bjorn <bjorn@bringert.net>
Date: Fri, 12 Sep 2008 21:07:14 +0000
Subject: [PATCH] Somewhat nicer gwt client ui style.

---
 .../cs/gf/gwt_translate/client/Translate.java | 40 ++++++++++++-------
 .../cs/gf/gwt_translate/public/Translate.css  | 25 ++++++++----
 2 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/server/gwt-client/src/se/chalmers/cs/gf/gwt_translate/client/Translate.java b/src/server/gwt-client/src/se/chalmers/cs/gf/gwt_translate/client/Translate.java
index f2ada71e5..e3aad0ad0 100644
--- a/src/server/gwt-client/src/se/chalmers/cs/gf/gwt_translate/client/Translate.java
+++ b/src/server/gwt-client/src/se/chalmers/cs/gf/gwt_translate/client/Translate.java
@@ -32,17 +32,21 @@ public class Translate implements EntryPoint {
     private SuggestBox suggest;
     private List<String> fromLangs;
     private List<String> toLangs;
-    private Grid outputTable;
+    private VerticalPanel outputPanel;
+
+    private void addTranslation(String text) {
+	Label l = new Label(text);
+	l.addStyleName("my-translation");
+	outputPanel.add(l);
+    }
 
     private void translate() {
 	gf.translate(suggest.getText(), fromLangs, null, toLangs, new GF.TranslateCallback() {
 		public void onTranslateDone (GF.Translations translations) {
-		    outputTable.resizeRows(translations.length());
+		    outputPanel.clear();
 		    for (int i = 0; i < translations.length(); i++) {
 			GF.Translation t = translations.get(i);
-			outputTable.setText(i, 0, t.getFrom());
-			outputTable.setText(i, 1, t.getTo());
-			outputTable.setText(i, 2, t.getText());
+			addTranslation(t.getText());
 		    }
 		}
 	    });
@@ -66,7 +70,6 @@ public class Translate implements EntryPoint {
 	oracle = new CompletionOracle(gf);
 
 	suggest = new SuggestBox(oracle);
-	suggest.setWidth("50em");
 	suggest.setText("this cheese is warm");
 	suggest.addKeyboardListener(new KeyboardListenerAdapter() {
 		public void onKeyUp (Widget sender, char keyCode, int modifiers) {
@@ -102,21 +105,28 @@ public class Translate implements EntryPoint {
 		}
 	    });
 
-	HorizontalPanel hPanel = new HorizontalPanel();
-	hPanel.add(new Label("From:"));
-	hPanel.add(fromLangBox);
-	hPanel.add(new Label("To:"));
-	hPanel.add(toLangBox);
-	hPanel.add(translateButton);
+	HorizontalPanel settingsPanel = new HorizontalPanel();
+	settingsPanel.addStyleName("my-settingsPanel");
+	settingsPanel.setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE);
+	settingsPanel.add(new Label("From:"));
+	settingsPanel.add(fromLangBox);
+	settingsPanel.add(new Label("To:"));
+	settingsPanel.add(toLangBox);
+	settingsPanel.add(translateButton);
 
-	outputTable = new Grid(0, 3);
+	outputPanel = new VerticalPanel();
+	outputPanel.addStyleName("my-translations");
+
+	// CSS debug
+	//	addTranslation("hello");
+	//	addTranslation("world");
 
 	VerticalPanel vPanel = new VerticalPanel();
 	vPanel.setWidth("100%");
 	vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);
 	vPanel.add(suggest);
-	vPanel.add(hPanel);
-	vPanel.add(outputTable);
+	vPanel.add(settingsPanel);
+	vPanel.add(outputPanel);
 
 	RootPanel.get().add(vPanel);
 
diff --git a/src/server/gwt-client/src/se/chalmers/cs/gf/gwt_translate/public/Translate.css b/src/server/gwt-client/src/se/chalmers/cs/gf/gwt_translate/public/Translate.css
index 3cf302fd6..cc53e1313 100644
--- a/src/server/gwt-client/src/se/chalmers/cs/gf/gwt_translate/public/Translate.css
+++ b/src/server/gwt-client/src/se/chalmers/cs/gf/gwt_translate/public/Translate.css
@@ -1,12 +1,23 @@
 /** Add css rules here for your application. */
 
-
-/** Example rules used by the template application (remove for your app) */
-.pc-template-btn {
-  display: block;
-  font-size: 16pt
+.gwt-SuggestBox {
+    width: 70%;
+    font-size: 150%;
+    margin: 1em 0 0.5em 0;
 }
 
-#pc-template-img {
-  margin-top: 20px;
+.my-settingsPanel * {
+    margin: 0 0.4em;
+}
+
+.my-translations {
+    margin-top: 1em;
+}
+    
+.my-translation {
+    border-width: 0 0 0 0;
+    border-style: solid;
+    border-color: silver;
+    padding: 0.2em;
+    font-size: 150%;
 }