- Checkbox margins should match regular row content margins. - Multiselect checkbox label should only be visible for assistive devices.tags/8.12.4
@@ -1974,6 +1974,13 @@ public class Grid<T> extends ResizeComposite implements HasSelectionHandlers<T>, | |||
// editor overlay since the original one is hidden by | |||
// the overlay | |||
final CheckBox checkBox = GWT.create(CheckBox.class); | |||
checkBox.setStylePrimaryName(grid.getStylePrimaryName() | |||
+ "-selection-checkbox"); | |||
// label of checkbox should only be visible for | |||
// assistive devices | |||
checkBox.addStyleName("v-assistive-device-only-label"); | |||
checkBox.setValue( | |||
grid.isSelected(pinnedRowHandle.getRow())); | |||
checkBox.sinkEvents(Event.ONCLICK); |
@@ -474,7 +474,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co | |||
padding-right: $v-grid-cell-padding-horizontal / 2; | |||
} | |||
input[type="checkbox"] { | |||
:not(.v-assistive-device-only-label).v-widget > input[type="checkbox"] { | |||
margin-left: $v-grid-cell-padding-horizontal; | |||
} | |||
@@ -750,7 +750,7 @@ $v-grid-drag-indicator-color: $v-focus-color; | |||
padding-right: round($v-grid-cell-padding-horizontal / 2); | |||
} | |||
.v-checkbox { | |||
.v-checkbox.v-widget { | |||
margin: 0 round($v-grid-cell-padding-horizontal / 2) 0 $v-grid-cell-padding-horizontal; | |||
> input[type="checkbox"] { |
@@ -0,0 +1,89 @@ | |||
package com.vaadin.tests.components.grid; | |||
import java.util.ArrayList; | |||
import java.util.List; | |||
import com.vaadin.server.VaadinRequest; | |||
import com.vaadin.tests.components.AbstractTestUI; | |||
import com.vaadin.ui.CheckBox; | |||
import com.vaadin.ui.Grid; | |||
import com.vaadin.ui.renderers.HtmlRenderer; | |||
public class GridEditorCheckBox extends AbstractTestUI { | |||
@Override | |||
protected String getTestDescription() { | |||
return "Editor content alignments should match regular row content " | |||
+ "alignments.<br>(Double-click a row to open the editor.)"; | |||
} | |||
@Override | |||
protected void setup(VaadinRequest request) { | |||
List<Person> items = new ArrayList<>(); | |||
items.add(new Person(true, false, false)); | |||
items.add(new Person(false, true, true)); | |||
CheckBox adminEditor = new CheckBox(); | |||
CheckBox staffEditor = new CheckBox(); | |||
staffEditor.setPrimaryStyleName("my-custom-checkbox"); | |||
final Grid<Person> grid = new Grid<Person>(); | |||
grid.setSelectionMode(Grid.SelectionMode.MULTI); | |||
grid.addColumn(Person::isAdmin) | |||
.setEditorComponent(adminEditor, Person::setAdmin) | |||
.setCaption("Default"); | |||
grid.addColumn(Person::isStaff) | |||
.setEditorComponent(staffEditor, Person::setAdmin) | |||
.setCaption("Custom"); | |||
grid.addColumn(Person::isSpecialist).setRenderer( | |||
s -> "<input type=\"checkbox\" onclick=\"return false;\"" | |||
+ (s ? "checked " : "") + ">", | |||
new HtmlRenderer()).setCaption("HTML"); | |||
grid.addColumn(Person::isSpecialist).setRenderer( | |||
s -> "<span><input type=\"checkbox\" onclick=\"return false;\"" | |||
+ (s ? "" : "checked ") + "></span>", | |||
new HtmlRenderer()).setCaption("Spanned"); | |||
grid.getEditor().setBuffered(false); | |||
grid.getEditor().setEnabled(true); | |||
grid.setItems(items); | |||
addComponents(grid); | |||
} | |||
public class Person { | |||
private boolean admin; | |||
private boolean staff; | |||
private boolean specialist; | |||
public Person(boolean admin, boolean staff, boolean specialist) { | |||
this.admin = admin; | |||
this.staff = staff; | |||
this.specialist = specialist; | |||
} | |||
public boolean isAdmin() { | |||
return admin; | |||
} | |||
public void setAdmin(final boolean admin) { | |||
this.admin = admin; | |||
} | |||
public boolean isStaff() { | |||
return staff; | |||
} | |||
public void setStaff(final boolean staff) { | |||
this.staff = staff; | |||
} | |||
public boolean isSpecialist() { | |||
return specialist; | |||
} | |||
public void setSpecialist(final boolean specialist) { | |||
this.specialist = specialist; | |||
} | |||
} | |||
} |
@@ -0,0 +1,83 @@ | |||
package com.vaadin.tests.components.grid; | |||
import static org.hamcrest.MatcherAssert.assertThat; | |||
import static org.hamcrest.number.IsCloseTo.closeTo; | |||
import static org.junit.Assert.assertEquals; | |||
import java.util.List; | |||
import org.junit.Test; | |||
import org.openqa.selenium.By; | |||
import org.openqa.selenium.WebElement; | |||
import com.vaadin.testbench.elements.GridElement; | |||
import com.vaadin.tests.tb3.MultiBrowserTest; | |||
public class GridEditorCheckBoxTest extends MultiBrowserTest { | |||
@Test | |||
public void testPositions() { | |||
openTestURL(); | |||
GridElement grid = $(GridElement.class).first(); | |||
// open editor for second row | |||
grid.getCell(1, 1).doubleClick(); | |||
waitForElementPresent(By.className("v-grid-editor")); | |||
// regular row cells | |||
List<WebElement> rowCells = grid.getRow(0) | |||
.findElements(By.className("v-grid-cell")); | |||
// editor cells are divided in two groups, first one for frozen columns, | |||
// second one for the rest | |||
List<WebElement> editorCellGroups = grid | |||
.findElements(By.className("v-grid-editor-cells")); | |||
int column = 0; | |||
for (WebElement editorCellGroup : editorCellGroups) { | |||
// find the actual editor cells (no shared class name) | |||
List<WebElement> editorCells = editorCellGroup | |||
.findElements(By.xpath("./child::*")); | |||
for (WebElement editorCell : editorCells) { | |||
// find the margin within the editor row | |||
List<WebElement> checkBoxElements = editorCell | |||
.findElements(By.className("v-checkbox")); | |||
WebElement editorInput; | |||
if (checkBoxElements.isEmpty()) { | |||
// use the actual input element for position check | |||
editorInput = editorCell.findElement(By.tagName("input")); | |||
} else { | |||
// v-checkbox positions a fake input element | |||
editorInput = checkBoxElements.get(0); | |||
} | |||
int editorMargin = editorInput.getLocation().getX() | |||
- editorCell.getLocation().getX(); | |||
// find the margin within the regular row | |||
WebElement rowCell = rowCells.get(column); | |||
int comparisonMargin; | |||
if (column == 1 || column == 2) { | |||
// these columns have text content on regular rows, margin | |||
// is created with padding | |||
String padding = rowCell.getCssValue("padding-left"); | |||
comparisonMargin = Integer.valueOf( | |||
padding.substring(0, padding.indexOf("px"))); | |||
} else { | |||
WebElement rowContent = rowCell | |||
.findElement(By.tagName("input")); | |||
comparisonMargin = rowContent.getLocation().getX() | |||
- rowCell.getLocation().getX(); | |||
} | |||
// ensure that the editor input position matches the regular row | |||
// content position | |||
assertThat( | |||
"Unexpected input location for column " + column | |||
+ " editor", | |||
(double) editorMargin, closeTo(comparisonMargin, 1d)); | |||
++column; | |||
} | |||
} | |||
assertEquals("Unexpect amount of checked columns,", 5, column); | |||
} | |||
} |