Bug 4104: Improved UI

This commit is contained in:
Henri Kohlberg committed 2018-08-31 14:20:27 +02:00
1 parent dc174f500e
commit 623253561e
7 files changed
+84 -31

No files matched your search

@@ -0,0 +1,13 @@
package com.sap.sailing.gwt.ui.raceboard.tagging;
import com.google.gwt.core.shared.GWT;
import com.google.gwt.user.cellview.client.CellTable;
public interface TagButtonCellTableResources extends CellTable.Resources {
public static final TagButtonCellTableResources INSTANCE = GWT.create(TagCellListResources.class);
@Override
@Source("tag-button-celltable.gss")
public CellTable.Style cellTableStyle();
}
@@ -5,6 +5,7 @@ import java.util.List;
import com.google.gwt.cell.client.FieldUpdater;
import com.google.gwt.cell.client.ImageResourceCell;
import com.google.gwt.core.shared.GWT;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.Column;
@@ -13,6 +14,7 @@ import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.sap.sailing.gwt.ui.adminconsole.ImagesBarColumn;
import com.sap.sailing.gwt.ui.adminconsole.LeaderboardConfigImagesBarCell;
import com.sap.sailing.gwt.ui.client.StringMessages;
@@ -26,6 +28,7 @@ import com.sap.sse.gwt.client.Notification.NotificationType;
* Dialog for modifying tag buttons
*/
public class TagButtonDialog extends DialogBox {
private class EditTagButtonsImagesBarCell extends ImagesBarCell {
public static final String ACTION_REMOVE = "ACTION_REMOVE";
public static final String ACTION_EDIT = "ACTION_EDIT";
@@ -46,6 +49,7 @@ public class TagButtonDialog extends DialogBox {
private final TagPanelResources resources = TagPanelResources.INSTANCE;
private final TagPanelStyle style = resources.style();
private final TagButtonCellTableResources buttonTableResources = GWT.create(TagButtonCellTableResources.class);
private final TaggingPanel taggingPanel;
private final StringMessages stringMessages;
@@ -66,20 +70,26 @@ public class TagButtonDialog extends DialogBox {
CellTable<TagButton> tagButtonsTable = createTable(tagCreationPanel, inputPanel, tagPreviewPanel);
Panel controlButtonPanel = createButtonPanel(tagButtonsTable, inputPanel, tagPreviewPanel, tagCreationPanel);
// wrap tag buttons table to control max-height of table
Panel tagButtonsTableWrapper = new SimplePanel();
tagButtonsTableWrapper.setStyleName(style.tagButtonTableWrapper());
tagButtonsTableWrapper.add(tagButtonsTable);
Panel mainPanel = new FlowPanel();
mainPanel.setStyleName(style.tagButtonDialogPanel());
mainPanel.add(tagButtonsTable);
mainPanel.add(tagButtonsTableWrapper);
mainPanel.add(inputPanel);
mainPanel.add(controlButtonPanel);
mainPanel.add(tagPreviewPanel);
setWidget(mainPanel);
// TODO: content gets added delayed => center again when content changes.
center();
}
private CellTable<TagButton> createTable(TagCreationPanel tagCreationPanel, TagInputPanel inputPanel,
TagPreviewPanel tagPreviewPanel) {
CellTable<TagButton> tagButtonTable = new CellTable<TagButton>();
CellTable<TagButton> tagButtonTable = new CellTable<TagButton>(15, buttonTableResources);
tagButtonTable.setStyleName(style.tagButtonTable());
TextColumn<TagButton> tagColumn = new TextColumn<TagButton>() {
@Override
@@ -154,9 +164,9 @@ public class TagButtonDialog extends DialogBox {
tagButtonTable.addColumn(actionsColumn, stringMessages.tagLabelAction());
// set these width values manually as they are not accessable via CSS classes
tagButtonTable.setColumnWidth(tagColumn, "30%");
tagButtonTable.setColumnWidth(tagColumn, "20%");
tagButtonTable.setColumnWidth(imageURLColumn, "20%");
tagButtonTable.setColumnWidth(commentColumn, "30%");
tagButtonTable.setColumnWidth(commentColumn, "40%");
tagButtonTable.setColumnWidth(visibleForPublicColumn, "10%");
tagButtonTable.setColumnWidth(actionsColumn, "10%");
@@ -168,7 +178,7 @@ public class TagButtonDialog extends DialogBox {
private Panel createButtonPanel(CellTable<TagButton> tagButtonTable, TagInputPanel inputPanel,
TagPreviewPanel tagPreviewPanel, TagCreationPanel tagCreationPanel) {
addSaveButton(tagCreationPanel, tagButtonTable, inputPanel, tagPreviewPanel);
addCancelButton(inputPanel, tagPreviewPanel);
addCancelButton(inputPanel, tagPreviewPanel, tagButtonTable);
addCloseButton(tagCreationPanel, tagPreviewPanel);
addTagButtonButton(tagCreationPanel, tagButtonTable, inputPanel, tagPreviewPanel);
@@ -213,14 +223,17 @@ public class TagButtonDialog extends DialogBox {
});
}
private void addCancelButton(TagInputPanel inputPanel, TagPreviewPanel tagPreviewPanel) {
private void addCancelButton(TagInputPanel inputPanel, TagPreviewPanel tagPreviewPanel,
CellTable<TagButton> tagButtonTable) {
cancelButton = new Button(stringMessages.cancel());
cancelButton.setVisible(false);
cancelButton.setStyleName(style.tagDialogButton());
cancelButton.addStyleName("gwt-Button");
cancelButton.addClickHandler(event -> {
inputPanel.clearAllValues();
tagPreviewPanel.renderPreview(inputPanel);
tagButtonTable.setVisible(true);
saveButton.setVisible(false);
cancelButton.setVisible(false);
closeButton.setVisible(true);
@@ -7,15 +7,6 @@ public interface TagCellListResources extends CellList.Resources {
public static final TagCellListResources INSTANCE = GWT.create(TagCellListResources.class);
@Override
@Source("tagging-celllist.gss")
public TagCellListStyle cellListStyle();
public interface TagCellListStyle extends CellList.Style {
String cellListEventItem();
String cellListWidget();
String cellListEvenItem();
String cellListOddItem();
String cellListSelectedItem();
String cellListKeyboardSelectedItem();
}
@Source("tag-celllist.gss")
public CellList.Style cellListStyle();
}
@@ -61,6 +61,7 @@ public interface TagPanelResources extends ClientBundle {
String tagButtonDialogPanel();
String tagDialogButton(); // button in dialog
String tagButtonTable();
String tagButtonTableWrapper();
String tagPreviewPanel();
// tag input / creation
@@ -0,0 +1,37 @@
.cellTable,
.cellTableHeader,
.cellTableFirstColumnHeader,
.cellTableLastColumnHeader,
.cellTableEvenRow,
.cellTableOddRow,
.cellTableSelectedRow,
.cellTableSelectedRowCell,
.cellTableHoveredRow,
.cellTableHoveredRowCell,
.cellTableKeyboardSelectedRow,
.cellTableKeyboardSelectedRowCell,
.cellTableKeyboardSelectedCell,
.cellTableEvenRowCell,
.cellTableFirstColumn,
.cellTableFirstColumnFooter,
.cellTableFooter,
.cellTableLastColumn,
.cellTableLastColumnFooter,
.cellTableLoading,
.cellTableOddRowCell,
.cellTableSortableHeader,
.cellTableSortedHeaderAscending,
.cellTableSortedHeaderDescending,
.cellTableWidget {
}
.cellTableCell {
padding: 5px;
margin: 0;
vertical-align: top;
}
.cellTableCell > * {
max-height: 10vh;
}
@@ -72,7 +72,7 @@
/**************************** Tag-Cells ****************************/
.tagCell {
box-shadow: 2px 2px 3px lightgrey;
box-shadow: 1px 2px 3px lightgrey;
margin-bottom: 5px;
margin-right: 3px;
padding: 5px 5px 0;
@@ -135,17 +135,12 @@
.tagCellListPanel {
height: 100%;
margin-top: 10px;
overflow: scroll;
overflow: auto;
}
/**************************** Tag-Buttons ****************************/
.tagButtonDialog {
max-width: 75%;
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
background-color: white;
}
@@ -153,6 +148,10 @@
display: inline-block;
}
.tagButtonDialogPanel .tagInputPanel {
padding: 0;
}
.tagDialogButton {
padding: 4px 4px;
cursor: pointer;
@@ -164,7 +163,7 @@
.tagButtonTable {
width: 100%;
margin: 5px 0 -1px;
margin: 5px 0 0;
padding: 2px;
border-radius: 4px;
border: 1px solid #cecece;
@@ -172,17 +171,16 @@
table-layout: fixed;
}
.tagButtonTableWrapper {
max-height: 50vh;
overflow-y: auto;
}
.tagPreviewPanel {
margin: 5px;
max-width: 500px;
}
@media screen and (max-width: 500px) {
.tagPreviewPanel {
max-width: 90%;
}
}
/**************************** Tag input / creation ****************************/
.tagCreationPanel {
width: 100%;