forked from GitHub/gf-core
Somewhat nicer gwt client ui style.
This commit is contained in:
@@ -32,17 +32,21 @@ public class Translate implements EntryPoint {
|
|||||||
private SuggestBox suggest;
|
private SuggestBox suggest;
|
||||||
private List<String> fromLangs;
|
private List<String> fromLangs;
|
||||||
private List<String> toLangs;
|
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() {
|
private void translate() {
|
||||||
gf.translate(suggest.getText(), fromLangs, null, toLangs, new GF.TranslateCallback() {
|
gf.translate(suggest.getText(), fromLangs, null, toLangs, new GF.TranslateCallback() {
|
||||||
public void onTranslateDone (GF.Translations translations) {
|
public void onTranslateDone (GF.Translations translations) {
|
||||||
outputTable.resizeRows(translations.length());
|
outputPanel.clear();
|
||||||
for (int i = 0; i < translations.length(); i++) {
|
for (int i = 0; i < translations.length(); i++) {
|
||||||
GF.Translation t = translations.get(i);
|
GF.Translation t = translations.get(i);
|
||||||
outputTable.setText(i, 0, t.getFrom());
|
addTranslation(t.getText());
|
||||||
outputTable.setText(i, 1, t.getTo());
|
|
||||||
outputTable.setText(i, 2, t.getText());
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -66,7 +70,6 @@ public class Translate implements EntryPoint {
|
|||||||
oracle = new CompletionOracle(gf);
|
oracle = new CompletionOracle(gf);
|
||||||
|
|
||||||
suggest = new SuggestBox(oracle);
|
suggest = new SuggestBox(oracle);
|
||||||
suggest.setWidth("50em");
|
|
||||||
suggest.setText("this cheese is warm");
|
suggest.setText("this cheese is warm");
|
||||||
suggest.addKeyboardListener(new KeyboardListenerAdapter() {
|
suggest.addKeyboardListener(new KeyboardListenerAdapter() {
|
||||||
public void onKeyUp (Widget sender, char keyCode, int modifiers) {
|
public void onKeyUp (Widget sender, char keyCode, int modifiers) {
|
||||||
@@ -102,21 +105,28 @@ public class Translate implements EntryPoint {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
HorizontalPanel hPanel = new HorizontalPanel();
|
HorizontalPanel settingsPanel = new HorizontalPanel();
|
||||||
hPanel.add(new Label("From:"));
|
settingsPanel.addStyleName("my-settingsPanel");
|
||||||
hPanel.add(fromLangBox);
|
settingsPanel.setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE);
|
||||||
hPanel.add(new Label("To:"));
|
settingsPanel.add(new Label("From:"));
|
||||||
hPanel.add(toLangBox);
|
settingsPanel.add(fromLangBox);
|
||||||
hPanel.add(translateButton);
|
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();
|
VerticalPanel vPanel = new VerticalPanel();
|
||||||
vPanel.setWidth("100%");
|
vPanel.setWidth("100%");
|
||||||
vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);
|
vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);
|
||||||
vPanel.add(suggest);
|
vPanel.add(suggest);
|
||||||
vPanel.add(hPanel);
|
vPanel.add(settingsPanel);
|
||||||
vPanel.add(outputTable);
|
vPanel.add(outputPanel);
|
||||||
|
|
||||||
RootPanel.get().add(vPanel);
|
RootPanel.get().add(vPanel);
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,23 @@
|
|||||||
/** Add css rules here for your application. */
|
/** Add css rules here for your application. */
|
||||||
|
|
||||||
|
.gwt-SuggestBox {
|
||||||
/** Example rules used by the template application (remove for your app) */
|
width: 70%;
|
||||||
.pc-template-btn {
|
font-size: 150%;
|
||||||
display: block;
|
margin: 1em 0 0.5em 0;
|
||||||
font-size: 16pt
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#pc-template-img {
|
.my-settingsPanel * {
|
||||||
margin-top: 20px;
|
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%;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user