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

Restyle envelope view #9928

Merged
merged 1 commit into from
Aug 12, 2024
Merged

Restyle envelope view #9928

merged 1 commit into from
Aug 12, 2024

Conversation

GVodyanov
Copy link
Contributor

See nextcloud-libraries/nextcloud-vue#5871, this is just adjusting mail for the real party down at Nextcloud vue

@GVodyanov GVodyanov self-assigned this Jul 26, 2024
@GVodyanov GVodyanov requested a review from hamza221 July 30, 2024 17:13
@GVodyanov GVodyanov marked this pull request as ready for review July 30, 2024 17:13
@GVodyanov
Copy link
Contributor Author

GVodyanov commented Aug 9, 2024

Right so now I have moved all the new styling to the EnvelopeSkeleton.vue component, rendering the Nextcloud vue PR no longer needed. EnvelopeSkeleton is still basically NcListItem, but with some unnecessary stuff cut out and a class structure slightly more relevant for mail. I also shifted all the CSS around as there were lots of duplicate selectors in NcListItem, hopefully what is here will now be easier to understand.

Normal View Oneline
Screenshot from 2024-08-09 13-00-26 Screenshot from 2024-08-09 12-59-45

The only bad thing is in order for the avatar icon to be the same size as the first two lines (as per @marcoambrosini's request), I needed to use some deep selectors at the end, due to the size being set by server styling.

CC @ChristophWurst

EDIT just noticed some styling is messed up when selected, fixing now

EDIT 2: made all text become white when selected and actions behave properly when selected

Copy link
Member

@marcoambrosini marcoambrosini left a comment

Choose a reason for hiding this comment

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

Amazing @GVodyanov, I would just move the date to the top in line with the title, could you please post screenshots of action menu on hover and of selected item? Thanks :)

@GVodyanov
Copy link
Contributor Author

Amazing @GVodyanov, I would just move the date to the top in line with the title, could you please post screenshots of action menu on hover and of selected item? Thanks :)

There you go, here is the date aligned up top now:
Screenshot from 2024-08-10 19-44-46

I also just noticed that the top padding is a bit larger than the side padding, now I made it calc(var(--default-grid-baseline) * 2) everywhere. Here are some various screenshots:

On hover
Screenshot from 2024-08-10 19-55-51

Actions menu opened
Screenshot from 2024-08-10 19-55-56

Selected
Screenshot from 2024-08-10 19-56-06

Selected and on hover
Screenshot from 2024-08-10 19-56-09

Selected and actions menu opened
Screenshot from 2024-08-10 19-56-17

A few of them together, to see how the new padding looks
image

…ponent in Mail and use it in Envelope

Signed-off-by: Grigory V <[email protected]>

feat(EnvelopeSkeleton): create a new envelope structure component in Mail

Signed-off-by: Grigory Vodyanov <[email protected]>
@GVodyanov
Copy link
Contributor Author

@ChristophWurst I understand this is pretty urgent, and I'm going on vacation next week. If you approve, I reckon you should merge this without waiting for me, so I just rebased everything after implementing Marco's review to make it as easy as possible.

Copy link
Member

@ChristophWurst ChristophWurst left a comment

Choose a reason for hiding this comment

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

Works very well 👏

@GVodyanov GVodyanov merged commit 0b15b42 into main Aug 12, 2024
28 checks passed
@GVodyanov GVodyanov deleted the style/envelope branch August 12, 2024 17:26
@marcoambrosini
Copy link
Member

Very nice! there still is some misalignment though: both the date and the actions need to be aligned to the top of the component, with the first line of text

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants