From eb4e2314fbd016b4ef4bd1640c5fc48876f9a46d Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 14 Nov 2014 12:21:26 +0200 Subject: [PATCH] Drop indicators in Valo are now working as in Reindeer theme (#14836) Change-Id: I12014c4329ca629dbfc9226b3b70538d33442690 --- .../VAADIN/themes/valo/components/_table.scss | 61 ++++++-------- .../table/TableDropIndicatorValo.java | 53 ++++++++++++ .../table/TableDropIndicatorValoTest.java | 81 +++++++++++++++++++ 3 files changed, 159 insertions(+), 36 deletions(-) create mode 100644 uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValo.java create mode 100644 uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValoTest.java diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index a70532ccfd..019d8673ce 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -238,6 +238,7 @@ $v-table-background-color: null !default; border-left: $v-table-border-width solid $border-color; overflow: hidden; height: $v-table-row-height; + vertical-align: middle; &:first-child { border-left: none; @@ -520,46 +521,28 @@ $v-table-background-color: null !default; } } - .#{$primary-stylename}-row-drag-middle td:first-child:before { - content: ""; - display: block; - position: absolute; - z-index: 1; - height: $v-table-row-height + $v-table-border-width; - left: 0; - right: 0; - background: $v-focus-color; - @include opacity(.2); + .#{$primary-stylename}-row-drag-middle .#{$primary-stylename}-cell-content { + $bg: mix($v-focus-color, $background-color, 20%); + background-color: $bg; + color: valo-font-color($bg); } - .#{$primary-stylename}-row-drag-top td:first-child:before, - .#{$primary-stylename}-row-drag-bottom td:first-child:after { - content: "\2022"; - display: block; - position: absolute; - height: 2px; - left: 0; - right: 0; - background: $v-focus-color; - font-size: $v-font-size * 2; - line-height: 2px; - color: $v-focus-color; - text-indent: round($v-font-size/-4); - text-shadow: 0 0 1px $background-color, 0 0 1px $background-color; + .#{$primary-stylename}-row-drag-bottom td.#{$primary-stylename}-cell-content { + border-bottom: 2px solid $v-focus-color; + height: $v-table-row-height - 2px; } - .#{$primary-stylename}-row-drag-top td:first-child:before { - margin-top: -$v-table-border-width; + .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-wrapper { + margin-bottom: -2px; } - .v-ff & .#{$primary-stylename}-row-drag-top td:first-child:before, - .v-ff & .#{$primary-stylename}-row-drag-bottom td:first-child:after { - line-height: 1px; + .#{$primary-stylename}-row-drag-top td.#{$primary-stylename}-cell-content { + border-top: 2px solid $v-focus-color; + height: $v-table-row-height - 2px + $v-table-border-width; } - .v-ie & .#{$primary-stylename}-row-drag-top td:first-child:before, - .v-ie & .#{$primary-stylename}-row-drag-bottom td:first-child:after { - line-height: 0; + .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-wrapper { + margin-top: -1px; } @@ -700,6 +683,11 @@ $v-table-background-color: null !default; border-top: none; border-bottom: none; } + + .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content, + .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content { + height: $v-table-row-height - 1px; + } } @@ -814,10 +802,6 @@ $v-table-background-color: null !default; margin-top: round($row-height/-2); } - .#{$primary-stylename}-row-drag-middle td:first-child:before { - height: $row-height + $v-table-border-width; - } - &.v-treetable { .#{$primary-stylename}-cell-wrapper { padding-left: 0; @@ -839,4 +823,9 @@ $v-table-background-color: null !default; padding-right: $cell-padding-horizontal; } } + + .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content, + .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content { + height: $row-height - 1px; + } } diff --git a/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValo.java b/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValo.java new file mode 100644 index 0000000000..e3848bb152 --- /dev/null +++ b/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValo.java @@ -0,0 +1,53 @@ +package com.vaadin.tests.components.table; + +import com.vaadin.annotations.Theme; +import com.vaadin.event.dd.DragAndDropEvent; +import com.vaadin.event.dd.DropHandler; +import com.vaadin.event.dd.acceptcriteria.AcceptAll; +import com.vaadin.event.dd.acceptcriteria.AcceptCriterion; +import com.vaadin.server.VaadinRequest; +import com.vaadin.tests.components.AbstractTestUI; +import com.vaadin.ui.Table; + +@Theme("valo") +@SuppressWarnings("serial") +public class TableDropIndicatorValo extends AbstractTestUI { + + @Override + protected void setup(VaadinRequest request) { + + Table table = new Table(); + + table.addContainerProperty("foo", Integer.class, 0); + table.addContainerProperty("bar", Integer.class, 0); + // table.addContainerProperty("button", Button.class, null); + + for (int i = 0; i < 40; i++) { + // Button b = new Button("testbutton"); + // b.setHeight("50px"); + table.addItem(new Object[] { i, i }, i); + } + + table.setDragMode(Table.TableDragMode.ROW); + table.setSelectable(true); + + table.setDropHandler(new DropHandler() { + @Override + public void drop(DragAndDropEvent dragAndDropEvent) { + + } + + @Override + public AcceptCriterion getAcceptCriterion() { + return AcceptAll.get(); + } + }); + + addComponent(table); + } + + @Override + protected String getTestDescription() { + return "Tests if the drop indicator appears between two rows as it should"; + } +} \ No newline at end of file diff --git a/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValoTest.java b/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValoTest.java new file mode 100644 index 0000000000..82a66eba07 --- /dev/null +++ b/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValoTest.java @@ -0,0 +1,81 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ + +package com.vaadin.tests.components.table; + +import java.util.List; + +import org.junit.Test; +import org.openqa.selenium.By; +import org.openqa.selenium.WebElement; +import org.openqa.selenium.interactions.Actions; + +import com.vaadin.testbench.elements.TableElement; +import com.vaadin.tests.tb3.MultiBrowserTest; + +/** + * Tests that clicking on active fields doesn't change Table selection, nor does + * dragging rows. + * + * @author Vaadin Ltd + */ + +public class TableDropIndicatorValoTest extends MultiBrowserTest { + + @Override + public void setup() throws Exception { + + super.setup(); + openTestURL(); + } + + @Test + public void indicator() throws Exception { + + dragRowWithoutDropping(1); + compareScreen("indicator"); + } + + private List getCellContents(WebElement row) { + + return row.findElements(By.className("v-table-cell-content")); + } + + private List getRows() { + + return getTable().findElement(By.className("v-table-body")) + .findElements(By.tagName("tr")); + } + + private TableElement getTable() { + + return $(TableElement.class).first(); + } + + private void dragRowWithoutDropping(int from) { + + List rows = getRows(); + WebElement row = rows.get(from); + List cellContents = getCellContents(row); + + int rowHeight = row.getSize().getHeight(); + int halfRowHeight = (int) (rowHeight + 0.5) / 2; // rounded off + int oneAndAHalfRow = rowHeight + halfRowHeight; + + new Actions(getDriver()).moveToElement(cellContents.get(1)) + .clickAndHold().moveByOffset(0, oneAndAHalfRow).perform(); + } +} \ No newline at end of file -- 2.39.5