[MGNLUI-2624] Show popup with hidden tabs, if there are too many tabs to fit in one row Created: 23/Jan/14 Updated: 10/Sep/15 Resolved: 18/Aug/15 |
|
| Status: | Closed |
| Project: | Magnolia UI |
| Component/s: | user interaction, widgets |
| Affects Version/s: | 5.2 |
| Fix Version/s: | 5.3.11, 5.4.2 |
| Type: | Improvement | Priority: | Neutral |
| Reporter: | Mikaël Geljić | Assignee: | Aleksandr Pchelintcev |
| Resolution: | Fixed | Votes: | 1 |
| Labels: | support, unizh, ux | ||
| Remaining Estimate: | 0d | ||
| Time Spent: | 17.75d | ||
| Original Estimate: | 0.25d | ||
| Attachments: |
|
||||||||||||||||||||||||||||
| Issue Links: |
|
||||||||||||||||||||||||||||
| Template: |
|
||||||||||||||||||||||||||||
| Acceptance criteria: |
Empty
|
||||||||||||||||||||||||||||
| Task DoD: |
[ ]*
Doc/release notes changes? Comment present?
[ ]*
Downstream builds green?
[ ]*
Solution information and context easily available?
[ ]*
Tests
[ ]*
FixVersion filled and not yet released
[ ] 
Architecture Decision Record (ADR)
|
||||||||||||||||||||||||||||
| Date of First Response: | |||||||||||||||||||||||||||||
| Sprint: | Sprint 2 (Basel), Sprint 6 (Basel) | ||||||||||||||||||||||||||||
| Story Points: | 1 | ||||||||||||||||||||||||||||
| Description |
|
When tabsheet holds more tabs than its width can afford, the extra tabs overflow to a second row, where they were never designed to go. We're going to implement the "Safari approach" to fix this problem:
To switch between tabs using the keyboard, you use the arrow keys to change the focus to a different tab, then switch to it by e.g. pressing SPACE. This is mentioned here to complete the concept, but should be treated in a separate follow-up issue ( |
| Comments |
| Comment by Andreas Weder [ 03/Mar/14 ] |
|
I've attached screenshots showing the visual design for this. Please note, though, that the popup shown does not only show the hidden tabs (marked in black), but all tabs. We only want to show the hidden tabs. |
| Comment by Sang Ngo Huu [ 01/Jun/15 ] |
|
I've chosen the approach: show both visible tabs and hidden tabs on popup. Like eclipse approach. I think it is easy for users to have a look all tabs The code has been checked into |
| Comment by Mikaël Geljić [ 02/Jun/15 ] |
|
Please stick to the specified approach in ticket description—we've reached consensus in UX quite some time ago on that one. |
| Comment by Sang Ngo Huu [ 04/Jun/15 ] |
|
I created |
| Comment by Mikaël Geljić [ 05/Jun/15 ] |
|
Reverted, text description to original; I see where the confusion came from, so I'll clarify if I may: Attached screenshots merely show the visual design, not the behavior, while text description was then different, with respect to displaying (or not displaying) non-hidden tabs in the popup. By the way, it's also not showing a "real" dialog (no "Show all" tab), but the "asset chooser", a feature which is yet to come, so again, these were attached mostly to highlight the look of the popup, not its content. —Sorry again about that confusion. |
| Comment by Aleksandr Pchelintcev [ 14/Jul/15 ] |
|
sang.ngo I took over this issue after reviewing, cause it looked like quite a lot of things had to be simplified/changed/removed. Here's what I've found:
|
| Comment by Mikaël Geljić [ 29/Jul/15 ] |
|
There's a bunch of minor issues with the MagnoliaTabSheet actually (regardless of this feature), which I'm currently trying to address while we're at it:
|
| Comment by Mikaël Geljić [ 12/Aug/15 ] |
|
I pushed to new branch feature/tabsheet-hidden-tabs-mge with the following fixes: General tabsheet consolidation/QA:
Hidden-tabs popup feature improvements:
Not done:
|
| Comment by Mikaël Geljić [ 12/Aug/15 ] |
|
Last but not least, UI test adjustments are required. This especially shows in fields' UI tests, with the "tab-heavy" dialog showroom. ComplexFieldUITest.testMultiFieldWithCustomPropertyBuilder:103 Cannot execute click on non existing WebElement: By.xpath: //*[contains(@class, 'v-shell-tabsheet')]//*[@class = 'tab-title' and text() = 'Multi Fields'] ComplexFieldUITest.testMultiFieldWithDefaultPropertyBuilderAddRemove:51 Cannot execute click on non existing WebElement: By.xpath: //*[contains(@class, 'v-shell-tabsheet')]//*[@class = 'tab-title' and text() = 'Multi Fields'] CompositeFieldUITest.testI18nCompositeField:74 Cannot execute click on non existing WebElement: By.xpath: //*[contains(@class, 'v-shell-tabsheet')]//*[@class = 'tab-title' and text() = 'Switch'] MultiFieldUITest.testI18nMultiField:77 Cannot execute click on non existing WebElement: By.xpath: //*[contains(@class, 'v-shell-tabsheet')]//*[@class = 'tab-title' and text() = 'Multi Fields'] |
| Comment by Aleksandr Pchelintcev [ 13/Aug/15 ] |
|
mgeljic Re: UI tests. Thanks to the fact that we use fancy methods to access the common UI parts and tabs in particular (e.g. AbstractMagnoliaUITest#getTabForCaption) I think we could relatively easily modify the tab resolution method, smth like this:
protected WebElement getTabForCaption(String tabCaption) {
WebElement tabElement = getElementByXpath("//*[contains(@class, 'v-shell-tabsheet')]//*[@class = 'tab-title' and text() = '%s']", tabCaption);
if (!isExisting(tabElement)) {
final WebElement popupControl = getElementByXpath("//*[contains(@class, 'v-shell-tabsheet')]//*[contains(@class, 'hidden-tabs-popup-button')]");
popupControl.click();
tabElement = getElementByXpath("//*[contains(@class, 'context-menu-wrapper')]//*[@class = 'menubar']//*[contains(@class, 'menu-item') and text() = '%s']", tabCaption);
}
return tabElement;
}
|
| Comment by Aleksandr Pchelintcev [ 18/Aug/15 ] |
|
Updated UI tests can be found at a branch tabsheet-changes-ui-tests-adaptation |
| Comment by Andreas Weder [ 10/Sep/15 ] |
|
Ok. We don't have gamification in Jira. I really think we should find a plug-in that allows us to like certain events and to give kudos to others. Because I just wanted to say a big THANK YOU to everyone involved in this issue. It's been quite some work to get this done. And it was worth it: this feature solves a long-standing issue, but also has a visual and behavioral quality to it, which makes me |