Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix opacity and padding inconsistency in breadcrumbs #5229

Closed
wants to merge 6 commits into from

Conversation

pixelipo
Copy link
Contributor

@pixelipo pixelipo commented Jun 2, 2017

Part 1 of my work on cleaning up icon inconsistencies ( #5157 ).

This tackles home.svg as well as some minor related fixes in .breadcrumb.

Please test this across different apps. I tested Files, Deck (some code can be removed there after this is merged) and Mail (this would deprecate .icon-inbox icon/style). I don't know if it is used elsewhere (couldn't find usage in Contacts, Calendar, News, Tasks and Gallery).

Signed-off-by: Marin Treselj marin@pixelipo.com

Signed-off-by: Marin Treselj <marin@pixelipo.com>
@pixelipo
Copy link
Contributor Author

pixelipo commented Jun 2, 2017

@jancborchardt could you please review or select some reviewers? Thanks.

P.S. I see some CI fails, but I don't think they are related to my changes.

@jancborchardt
Copy link
Member

Nice @pixelipo! Just a quick question: What did you use for compressing the icon? It looks like maybe SVGO, which unfortunately is lossy and leads to corrupted files: #4076

Better would be to use Scour, we have a script line you can simply copy for that at https://github.com/nextcloud/server/blob/master/core/img/image-optimization.sh#L10

(I meant to mention that in the original issue, sorry I forgot. :)

@pixelipo
Copy link
Contributor Author

pixelipo commented Jun 2, 2017

@jancborchardt I used no tool for compression - just cleanup by hand of unneeded Inkscape cruft. The only thing that might be causing problems is spaces I removed after M and L in <path>.

If you're worrying about missing decimals, that because there are none - I redraw the icon in Inkscape and made sure all the corners are at full pixels 😉

@jancborchardt
Copy link
Member

Yeah, I also drew the icons at full pixels always of course. :) Can you make sure you compress via Scour? Then it's not a manual process but repeatable for all icons.

Signed-off-by: Marin Treselj <marin@pixelipo.com>
@codecov
Copy link

codecov bot commented Jun 5, 2017

Codecov Report

Merging #5229 into master will decrease coverage by 0.08%.
The diff coverage is n/a.

@@             Coverage Diff              @@
##             master    #5229      +/-   ##
============================================
- Coverage     53.98%   53.89%   -0.09%     
+ Complexity    22466    22350     -116     
============================================
  Files          1390     1318      -72     
  Lines         85980    78032    -7948     
  Branches       1329        0    -1329     
============================================
- Hits          46418    42059    -4359     
+ Misses        39562    35973    -3589
Impacted Files Coverage Δ Complexity Δ
apps/comments/lib/EventHandler.php 79.16% <0%> (-8.34%) 7% <0%> (ø)
...s/federatedfilesharing/lib/AppInfo/Application.php 93.93% <0%> (-6.07%) 6% <0%> (+1%)
.../twofactor_backupcodes/lib/AppInfo/Application.php 16.66% <0%> (-5.56%) 5% <0%> (+1%)
lib/private/NavigationManager.php 53.03% <0%> (-3.43%) 39% <0%> (+1%)
lib/private/Settings/Manager.php 44.78% <0%> (-1.86%) 44% <0%> (-29%)
apps/encryption/lib/AppInfo/Application.php 68.88% <0%> (-1.57%) 10% <0%> (+1%)
lib/private/legacy/app.php 53.41% <0%> (-1.56%) 219% <0%> (ø)
lib/private/legacy/user.php 39.39% <0%> (-0.51%) 81% <0%> (ø)
core/Controller/LoginController.php 76.92% <0%> (-0.35%) 38% <0%> (ø)
lib/private/Server.php 93.31% <0%> (-0.19%) 120% <0%> (ø)
... and 106 more

@pixelipo
Copy link
Contributor Author

pixelipo commented Jun 5, 2017

@jancborchardt ok, I see the point in repeateable processes. I have ran home.svg through a scour command and pushed the changes here.

I would however, suggest changes to image-optimization.sh:
scour -i $svg.opttmp -o $svg --create-groups --enable-id-stripping --enable-comment-stripping --shorten-ids --remove-metadata --strip-xml-prolog --no-line-breaks;

@jancborchardt
Copy link
Member

@pixelipo nice, please add a commit with the suggested changes to image-optimization.sh :)

@jancborchardt
Copy link
Member

@pixelipo I invited you to the Nextcloud Github organization some time ago, you can accept at https://github.com/nextcloud :)
Then you can just create branches in this main repository and you don’t need your fork. :) This makes collaboration much easier.

@jancborchardt
Copy link
Member

Encountering two issues:

  • When scrolling a folder with a lot of files in the narrow (mobile) view, the breadcrumb bar jumps in and out of view. Doesn’t happen in master
  • There’s too much whitespace between the folder name and the related sharing icon:
    screenshot from 2017-06-09 16-35-32

Signed-off-by: Marin Treselj <marin@pixelipo.com>
@pixelipo
Copy link
Contributor Author

@jancborchardt this should fix both issues.

N.B. I've set line-height: 10px to match centered position of ellipsis when compared to breadcrumbs.svg - but I'm not sure it should be centered, because ellipsis is usually at the same vertical position as dot - so, lower than middle of the text. Ideally, div.crumb.ellipsized should have line-height: 16px, but perhaps it doesn't look as good 😉

pixelipo added a commit that referenced this pull request Jun 15, 2017
My suggestion for further SVG optimiztion - as mentioned in #5229

Signed-off-by: Marin Treselj <marin@pixelipo.com>
@juliushaertl
Copy link
Member

@pixelipo Is this ready for review? Please change the according label from 2. developing to 3. to review then. 😉

@pixelipo pixelipo added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Jun 17, 2017
@pixelipo
Copy link
Contributor Author

yes, @juliushaertl - ready for review. Please check whether issues mentioned by @jancborchardt were fixed

@juliushaertl
Copy link
Member

@pixelipo I think the text should be alligned in the middle of the arrow separators, not at the baseline. It looks a bit out of place at the moment. Also the whitespace between the sharing icon lstill ooks to big.
2017-06-22-214036_719x366_scrot

Signed-off-by: Marin Treselj <marin@pixelipo.com>
@pixelipo
Copy link
Contributor Author

I have fixed both issues now, @juliushaertl @jancborchardt - this is ready for review (and merge, I hope).

Text issue was fixed with line height and the icons issue was fixed by - what I think is the best solution for this use case - making icon relatively positioned and moving them over crumb title's padding.

@MorrisJobke
Copy link
Member

3 JSUnit tests fail:

PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.BreadCrumb tests Resizing Hides breadcrumbs to fit max allowed width FAILED
	Expected true to equal false.
	apps/files/tests/js/breadcrumbSpec.js:210:52
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.BreadCrumb tests Resizing Updates the breadcrumbs when reducing max allowed width FAILED
	Expected true to equal false.
	apps/files/tests/js/breadcrumbSpec.js:239:52
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Trashbin.FileList tests Breadcrumbs links the breadcrumb to the trashbin view FAILED
	Expected 3 to equal 2.
	apps/files_trashbin/tests/js/filelistSpec.js:135:34
	Expected '...' to equal 'subdir'.
	apps/files_trashbin/tests/js/filelistSpec.js:139:50
	Expected 'http://localhost/index.php/apps/files/?dir=/subdir' to equal 'http://localhost/index.php/apps/files?view=trashbin&dir=/subdir'.
	apps/files_trashbin/tests/js/filelistSpec.js:141:13

@jancborchardt
Copy link
Member

Yup, to confirm @juliushaertl's comment - the text was positioned too low on that screenshot. :)

@jancborchardt
Copy link
Member

@pixelipo can you check out the JS unit test failures?

@pixelipo
Copy link
Contributor Author

I didn't have a working dev setup until today :) I'll take a look tomorrow, OK?

@jancborchardt
Copy link
Member

Sure, at your leisure. :) Sorry this review process takes so long, please don't be discouraged as you do great work!

Marin Treselj added 2 commits June 30, 2017 13:33
Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>
@pixelipo
Copy link
Contributor Author

pixelipo commented Jun 30, 2017

I found&fixed a small issue with padding, however, I'm unable to figure out what is the issue with JS unit tests.

I did run them and got same errors as @MorrisJobke - but I get same errors when running unit tests on master, so they are not related to this PR.

Everything looks fine @320px:
image

but there is a problem @480px:
image

This happens when current folder has a very long filename. It seems that it's not ellipsized "soon enough", but IMO it should be fixed separately from this PR

P.S. I noticed a bigger issue with breadcrumbs on mobile:
image
popover requires at least 176px, and this is not how much breadcrumbs leave.

Please review.

@jancborchardt
Copy link
Member

Can you open two separate issues about the two breadcrumb problem and new file popover? :)

@jancborchardt
Copy link
Member

This pull request now seems good 👍

@MorrisJobke
Copy link
Member

The JSUnit tests still fail. @juliushaertl @danxuliu do you mind to help @pixelipo out to fix this?

@pixelipo
Copy link
Contributor Author

pixelipo commented Jul 4, 2017

@MorrisJobke as mentioned in #5229 (comment) , JSUnit tests fail on master as well, so they should be fixed in a separate PR.

@MorrisJobke
Copy link
Member

@MorrisJobke as mentioned in #5229 (comment) , JSUnit tests fail on master as well, so they should be fixed in a separate PR.

This could not be the case - they run fine on master: https://drone.nextcloud.com/nextcloud/server/9014/34 And the failing unit tests are even related to the width when the breadcrumbs get's visible or hidden. Please rebase on latest master and check again. On macOS the unit tests for the breadcrumbs somehow fail always :/

@pixelipo
Copy link
Contributor Author

pixelipo commented Jul 10, 2017

I can't fix JSUnit tests here since I'm unable to reproduce working tests on master. Here's my output when running ./autotest-js.sh on a clean master branch:

.........
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render load a topaction only FAILED
	Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="mailto:bar%40baz.wtf">        <img src="foo.svg">        <span>bar@baz.wtf</span>    </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="mailto:bar%40baz.wtf">        <img src="foo.svg">        <span>bar@baz.wtf</span>    </a></li></ul></div>'.
	core/js/tests/specs/jquery.contactsmenuSpec.js:123:36
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render load topaction and more actions FAILED
	Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="mailto:bar%40baz.wtf">        <img src="foo.svg">        <span>bar@baz.wtf</span>    </a></li><li>    <a href="http://localhost/index.php/apps/contacts">        <img src="details.svg">        <span>Details</span>    </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="mailto:bar%40baz.wtf">        <img src="foo.svg">        <span>bar@baz.wtf</span>    </a></li><li>    <a href="http://localhost/index.php/apps/contacts">        <img src="details.svg">        <span>Details</span>    </a></li></ul></div>'.
	core/js/tests/specs/jquery.contactsmenuSpec.js:150:36
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render load no actions FAILED
	Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>No action available</span>    </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>No action available</span>    </a></li></ul></div>'.
	core/js/tests/specs/jquery.contactsmenuSpec.js:170:36
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render should throw an error FAILED
	Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>Error fetching contact actions</span>    </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>Error fetching contact actions</span>    </a></li></ul></div>'.
	core/js/tests/specs/jquery.contactsmenuSpec.js:185:36
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render should handle 404 FAILED
	Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>No action available</span>    </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>No action available</span>    </a></li></ul></div>'.
	core/js/tests/specs/jquery.contactsmenuSpec.js:200:36
10 07 2017 12:32:52.087:WARN [web-server]: 404: /details.svg
................................................................................
................................................................................
................................................................
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.BreadCrumb tests Resizing Hides breadcrumbs to fit max allowed width FAILED
	Expected true to equal false.
	apps/files/tests/js/breadcrumbSpec.js:210:52
	Expected true to equal false.
	apps/files/tests/js/breadcrumbSpec.js:211:52
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.BreadCrumb tests Resizing Updates the breadcrumbs when reducing max allowed width FAILED
	Expected true to equal false.
	apps/files/tests/js/breadcrumbSpec.js:239:52
	Expected true to equal false.
	apps/files/tests/js/breadcrumbSpec.js:240:52
	Expected true to equal false.
	apps/files/tests/js/breadcrumbSpec.js:241:52
...................
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.FavoritesPlugin tests file actions redirects to files app when opening a directory FAILED
	Expected '/' to equal '/somewhere/inside/subdir/testdir'.
	apps/files/tests/js/favoritespluginspec.js:118:64
	Expected false to equal true.
	apps/files/tests/js/favoritespluginspec.js:120:48
	Expected false to equal true.
	apps/files/tests/js/favoritespluginspec.js:121:57
................................................................................
................................................................................
.............
WARN: 'Missing argument $row in OC.Notification.hide() call, caller needs to be adjusted to only dismiss its own notification'
................................................................................
.........................................
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Trashbin.FileList tests Breadcrumbs links the breadcrumb to the trashbin view FAILED
	Expected 3 to equal 2.
	apps/files_trashbin/tests/js/filelistSpec.js:135:34
	Expected '...' to equal 'subdir'.
	apps/files_trashbin/tests/js/filelistSpec.js:139:50
	Expected 'http://localhost/index.php/apps/files/?dir=/subdir' to equal 'http://localhost/index.php/apps/files?view=trashbin&dir=/subdir'.
	apps/files_trashbin/tests/js/filelistSpec.js:141:13
...............
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Sharing.App tests file actions redirects to files app when opening a directory FAILED
	Expected '/' to equal '/somewhere/inside/subdir/testdir'.
	apps/files_sharing/tests/js/appSpec.js:137:64
	Expected false to equal true.
	apps/files_sharing/tests/js/appSpec.js:139:48
	Expected false to equal true.
	apps/files_sharing/tests/js/appSpec.js:140:57

@jancborchardt
Copy link
Member

Cann you help @nextcloud/javascript?

@skjnldsv
Copy link
Member

I worked on this issue before, can't remember when and if I pushed it somewhere here.
Anyway, the jsunit failure is indeed related to the breadcrumbs modification, but iirc, the failure was incoherent. Sometimes it failed, sometimes not. My guess at the time was that the phantomjs engine was not outputting the page like other browsers. I tried with Firefox at the time and did not have any errors. :/

@MorrisJobke MorrisJobke added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Aug 9, 2017
@MorrisJobke
Copy link
Member

@danxuliu Could you have a look at this? Getting it in would be super nice :)

@danxuliu
Copy link
Member

danxuliu commented Sep 5, 2017

The JavaScript tests fail due to the breadcrumb items shown no longer matching those expected. However, the commit Fix opacity and padding inconsistency in breadcrumbs itself is fine; the problem comes from the JavaScript tests themselves.

The _resize method of Breadcrumb hides certain breadcrumb items when there is not enough space available to show all of them. In that case it always shows the first item (the Home icon), an ellipsis and then as many items from the end as possible.

As different browsers may show the items with slightly different sizes the tests for resizing use hard-coded widths for the breadcrumb items, but not for the ellipsis. For some strange reason, when using the new CSS the width returned for the ellipsis by PhantomJS is way larger than expected (242px instead of 51px); due to this there is less room for the breadcrumb items and the first one that was expected to be shown is not, thus causing the Hides breadcrumbs to fit max allowed width and Updates the breadcrumbs when reducing max allowed width tests to fail.

If instead of PhantomJS the tests are run using Firefox (52.3) then the ellipsis is now shorter than before (37px instead of 50px), which also causes the Updates the breadcrumbs when reducing max allowed width test to fail because now there is enough room to show another item that was expected to be hidden.

The solution? In the same way that the width of the breadcrumb items is hard-coded the width of the ellipsis has to be hardcoded too. To do that the easiest way is stub the width method from jQuery in the resizing tests so it returns the desired width for the ellipsis when the item it is being applied to has the ellipsized class.

That would solve two of the three failures. The other one, links the breadcrumb to the trashbin view, is related to that explained above, but it is not quite the same.

When resizing them, the available width for the breadcrumbs is got from the value set using setMaxWidth or, if no value was provided, from the width of the breadcrumb element. In the links the breadcrumb to the trashbin view test setMaxWidth is not called, so the width from the element is used; that test expects that the breadcrumbs have enough room to be fully shown, and that was the case before changing the CSS, as the width returned for the breadcrumb element was 400px and the total size needed for the breadcrumb items was 88px. However, after the changes, the width returned for the breadcrumb element is 68px, but the total size needed for the breadcrumb items is now 136px, so some of them are hidden. That happens when using PhantomJS, though; when using Firefox it seems that it stretches the breadcrumb element to fit all the breadcrumb items, as the returned width and the total size needed is 133px in both cases.

Again, the easiest way to solve this would be to hard-code the width of the breadcrumbs by calling fileList.breadcrumb.setMaxWidth in the links the breadcrumb to the trashbin view test with some value large enough for the breadcrumb items to fit in, like 400.

@pixelipo If you want I can add a new commit to your pull request with these fixes. Besides that, could you rebase your commits onto current master and check that they are all still valid (which I am sure they are, but just in case ;-) )? Thanks! :-)

@skjnldsv
Copy link
Member

skjnldsv commented Sep 6, 2017

Maybe we should rebuild the breadcrumb system & the tests?

@skjnldsv
Copy link
Member

skjnldsv commented Nov 5, 2017

I'm rebuilding the breadcrumbs in #7051. Will this pr will become obsolete? The tests will be fixed.

@pixelipo
Copy link
Contributor Author

pixelipo commented Nov 6, 2017

@skjnldsv probably. I've added myself as a reviewer to the other one to keep an eye on it ;) I'll check if it solves all the issues this PR was trying to solve.

@skjnldsv skjnldsv mentioned this pull request Nov 8, 2017
12 tasks
@MorrisJobke MorrisJobke removed this from the Nextcloud 13 milestone Nov 13, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2. developing Work in progress design Design, UI, UX, etc. enhancement technical debt
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants