diff --git a/apps/verticalhome/test/marionette/group_collapse_context_menu_test.js b/apps/verticalhome/test/marionette/group_collapse_context_menu_test.js new file mode 100644 index 000000000000..466391c5af8c --- /dev/null +++ b/apps/verticalhome/test/marionette/group_collapse_context_menu_test.js @@ -0,0 +1,51 @@ +'use strict'; + +marionette('Vertical - Group', function() { + + var client = marionette.client(require(__dirname + '/client_options.js')); + var actions, home, system; + + setup(function() { + actions = client.loader.getActions(); + home = client.loader.getAppClass('verticalhome'); + system = client.loader.getAppClass('system'); + system.waitForStartup(); + + client.apps.launch(home.URL); + home.waitForLaunch(); + }); + + test('check dragging icon into collapsed group', function() { + function scrollIntoView(el) { + el.scrollIntoView(false); + } + + // Store a reference to the first icon + var firstIcon = client.helper.waitForElement(home.Selectors.firstIcon); + + // Enter edit mode + home.enterEditMode(); + var header = client.helper.waitForElement(home.Selectors.editHeaderText); + + // Drag icon to its own group + actions.press(firstIcon).wait(1).move(header).release().wait(1).perform(); + + // Leave edit mode + home.exitEditMode(); + + // Collapse new group + var toggle = client.findElements(home.Selectors.groupToggle).pop(); + toggle.scriptWith(scrollIntoView); + actions.tap(toggle).wait(1).perform(); + + // Long-press the home-screen in the middle of the collapsed group + var groupBg = client.findElements(home.Selectors.groupBackground).pop(); + var grid = client.findElement(home.Selectors.grid); + var x = groupBg.location().x + groupBg.size().width/2; + var y = groupBg.location().y + groupBg.size().height/2; + actions.press(grid, x, y).wait(1).perform(); + + // Wait for the context menu to appear + client.helper.waitForElement(home.contextMenu); + }); +}); diff --git a/apps/verticalhome/test/marionette/group_collapse_drag_into.js b/apps/verticalhome/test/marionette/group_collapse_drag_into_test.js similarity index 100% rename from apps/verticalhome/test/marionette/group_collapse_drag_into.js rename to apps/verticalhome/test/marionette/group_collapse_drag_into_test.js diff --git a/apps/verticalhome/test/marionette/lib/verticalhome.js b/apps/verticalhome/test/marionette/lib/verticalhome.js index db70b0722173..8767621ae626 100644 --- a/apps/verticalhome/test/marionette/lib/verticalhome.js +++ b/apps/verticalhome/test/marionette/lib/verticalhome.js @@ -17,6 +17,7 @@ function VerticalHome(client) { VerticalHome.URL = 'app://verticalhome.gaiamobile.org'; VerticalHome.Selectors = { + grid: '#icons', editHeaderText: '#edit-header h1', editHeaderDone: '#exit-edit-mode', editGroup: '#edit-group', diff --git a/shared/elements/gaia_grid/style.css b/shared/elements/gaia_grid/style.css index f66a8e8a9e0c..769783fc4549 100644 --- a/shared/elements/gaia_grid/style.css +++ b/shared/elements/gaia_grid/style.css @@ -229,11 +229,13 @@ background-image: url('images/move_gripper.png'); opacity: 0; transform: translate(0, -100%); + pointer-events: none; } .edit-mode .group:not(.collapsed) .header .gripper { opacity: 1; transform: translate(0, 0); + pointer-events: auto; } .group .header .toggle { @@ -241,6 +243,7 @@ right: 0; background-image: url('images/collapse_arrow.png'); transform-origin: 50% 1.6rem; + pointer-events: auto; } .group .header .toggle.toggling { @@ -316,6 +319,16 @@ opacity: 0; } +.group.collapsed .header, +.group.collapsed .background, +.group.collapsed .shadow { + pointer-events: none; +} + +.edit-mode .group.collapsed .background { + pointer-events: auto; +} + .dragging .group:not(.active) .separator { opacity: 1; }