Skip to content

Fix svg icons disapearing in app navigation when text overflows - #27936

Merged
szaimen merged 1 commit into
nextcloud:masterfrom
CarlSchwan:work/carl/fix-overflow-icon
Jul 13, 2021
Merged

Fix svg icons disapearing in app navigation when text overflows#27936
szaimen merged 1 commit into
nextcloud:masterfrom
CarlSchwan:work/carl/fix-overflow-icon

Conversation

@CarlSchwan

@CarlSchwanCarlSchwan commented Jul 13, 2021•
edited by szaimen
Loading

Copy link
Copy Markdown
Member

The issue is caused by the icon being positionned with negative margins
and the overflow: hidden rule when hide the icon when the text
overflows. Remove positioning with negative margins.

This fix#23849
Closes#24378

szaimen
szaimen requested changes Jul 13, 2021
View reviewed changes

@szaimenszaimen left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm... I couldn't reproduce the initial issue on NC22.0.0 also without this fix...
image

@CarlSchwan

CarlSchwan commented Jul 13, 2021

Copy link
Copy Markdown
MemberAuthor

This is with a local instance and using git master (with Firefox)

image

On Chromium without this patch it's also working fine.

szaimen
szaimen approved these changes Jul 13, 2021
View reviewed changes

@szaimenszaimen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right. I've overlooked that this only happens with Firefox.
Tested the PR successfully with Firefox and Chromium

@szaimenszaimen added this to the Nextcloud 23 milestone Jul 13, 2021
@szaimen

szaimen commented Jul 13, 2021•
edited
Loading

Copy link
Copy Markdown
Contributor

Failing drone is unrelated

julien-nc
julien-nc approved these changes Jul 13, 2021
View reviewed changes

@julien-ncjulien-nc left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, tested with Firefox 89.

I think this can be backported to stable20, stable21 and stable22 as the issue seems to be the same. I didn't try to apply this commit in those branches though.

@szaimen

szaimen commented Jul 13, 2021

Copy link
Copy Markdown
Contributor

@CarlSchwan do you mind signing off your commits to pass the DCO check?
See https://github.com/nextcloud/server/pull/27936/checks?check_run_id=3055830036 for instructions.
Thank you!

@CarlSchwan
CarlSchwanforce-pushed the work/carl/fix-overflow-icon branch from e44082a to 99e845dCompareJuly 13, 2021 14:34
@CarlSchwan
Fix svg icons disapearing in app navigation when text overflows
d0afc49
The issue is caused by the icon being positionned with negative margins
and the `overflow: hidden` rule when hide the icon when the text
overflows. Remove positioning with negative margins. This was only
happening in Firefox.
This fixnextcloud#23849
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
@CarlSchwan
CarlSchwanforce-pushed the work/carl/fix-overflow-icon branch from 99e845d to d0afc49CompareJuly 13, 2021 14:35
@CarlSchwan

CarlSchwan commented Jul 13, 2021

Copy link
Copy Markdown
MemberAuthor

@CarlSchwan do you mind signing off your commits to pass the DCO check?
See https://github.com/nextcloud/server/pull/27936/checks?check_run_id=3055830036 for instructions.
Thank you!

Done :) and added format.signoff to my git configs so that I don't have to think about it next time :)

@szaimen

szaimen commented Jul 13, 2021

Copy link
Copy Markdown
Contributor

Great! Thanks a lot! :)

@CarlSchwanCarlSchwan mentioned this pull request Jul 13, 2021
Closed
@szaimen
szaimen merged commit 2b623a4 into nextcloud:masterJul 13, 2021
@welcome

welcomeBot commented Jul 13, 2021

Copy link
Copy Markdown

Thanks for your first pull request and welcome to the community! Feel free to keep them coming! If you are looking for issues to tackle then have a look at this selection: https://github.com/nextcloud/server/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22

@szaimen

szaimen commented Jul 13, 2021

Copy link
Copy Markdown
Contributor

/backport to stable22

@szaimen

szaimen commented Jul 13, 2021

Copy link
Copy Markdown
Contributor

/backport to stable21

@szaimen

szaimen commented Jul 13, 2021

Copy link
Copy Markdown
Contributor

/backport to stable20

@backportbot-nextcloudbackportbot-nextcloudBot mentioned this pull request Jul 13, 2021
Merged
This was referenced Jul 13, 2021
Merged
Merged
@szaimen

szaimen commented Jul 14, 2021

Copy link
Copy Markdown
Contributor

I fear this PR has broken the files app:
Are you able to reproduce?
image

@julien-nc

julien-nc commented Jul 14, 2021

Copy link
Copy Markdown
Member

Damn, yes I can see it too. We couldn't see it because of the style caching...
@CarlSchwan ^^

@CarlSchwan

CarlSchwan commented Jul 14, 2021

Copy link
Copy Markdown
MemberAuthor

Hmm I can't reproduce with firefox but I can with chromium. On it

@julien-nc

julien-nc commented Jul 14, 2021

Copy link
Copy Markdown
Member

I can reproduce with both FF and Chromium. Did you try to reload without using the cache (just in case: CTRL+F5)?

CarlSchwan added a commit that referenced this pull request Jul 14, 2021
@CarlSchwan
Fix regression in file sidebar
5cca1ac
See #27936
@CarlSchwanCarlSchwan mentioned this pull request Jul 14, 2021
Merged
@CarlSchwan

CarlSchwan commented Jul 14, 2021

Copy link
Copy Markdown
MemberAuthor

I created a patch that hopefully fix the issue (it does for me): https://github.com/nextcloud/server/pull/27973/files

CarlSchwan added a commit that referenced this pull request Jul 14, 2021
@CarlSchwan
Fix regression in file sidebar
0b931b5
See #27936
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
backportbot-nextcloudBot pushed a commit that referenced this pull request Jul 14, 2021
@CarlSchwan@backportbot
Fix regression in file sidebar
295d599
See #27936
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
backportbot-nextcloudBot pushed a commit that referenced this pull request Jul 14, 2021
@CarlSchwan@backportbot
Fix regression in file sidebar
f223095
See #27936
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
backportbot-nextcloudBot pushed a commit that referenced this pull request Jul 14, 2021
@CarlSchwan@backportbot
Fix regression in file sidebar
a3ee7db
See #27936
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
@anoymouserveranoymouserver mentioned this pull request Jul 31, 2021
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@julien-ncjulien-ncjulien-nc approved these changes
@szaimenszaimenszaimen approved these changes
@jancborchardtjancborchardtAwaiting requested review from jancborchardt
@nimishavijaynimishavijayAwaiting requested review from nimishavijay
@artongeartongeAwaiting requested review from artonge

Assignees

No one assigned

Labels

3. to reviewWaiting for reviewsenhancementfeature: settings

Projects

None yet

Milestone

Nextcloud 23

Development

Successfully merging this pull request may close these issues.

Firefox - User Settings - Some svg icons not visible

3 participants

@CarlSchwan@szaimen@julien-nc