mirror of
https://github.com/eclipse-sailing-analytics/sailing-analytics.git
synced 2026-10-02 10:23:51 +00:00
Bug 4104: Improved UI
This commit is contained in:
1 parent
dc174f500e
commit
623253561e
7 files changed
+84
-31
No files matched your search
+13
@@ -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();
|
||||
}
|
||||
+19
-6
@@ -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);
|
||||
|
||||
+2
-11
@@ -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();
|
||||
}
|
||||
+1
@@ -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
|
||||
|
||||
+37
@@ -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;
|
||||
}
|
||||
File renamed without changes.
+12
-14
@@ -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%;
|
||||
|
||||
Reference in new issue
Block a user