Design fixes #89

jancborchardt · 2017-08-13T12:12:15Z

Remove line-height overwrite to make messages more readable
Remove border, fix scrollbar position
Show notification message and action elements only when there, fix layout

Before & after:

Please review @nickvergessen @nextcloud/designers

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

…yout Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

skjnldsv

Nice change!

MariusBluem · 2017-08-13T19:17:51Z

Can we add a space between the text and the buttons? @jancborchardt

raimund-schluessler · 2017-08-13T19:38:29Z

I also find the before lineheight to narrow, but afterwards it looks like four separate sections. Could there be something in between?

skjnldsv

I want to change my mind a bit, I find the space between paragraph a little bit too big! :)

nickvergessen · 2017-08-14T10:49:31Z

I'd vote for a bit more space between subject and message:

I will also fix the notification of the survey app, that long subject should be the message and have a short subject instead.

jancborchardt · 2017-08-14T13:37:27Z

@nickvergessen actually the space is good and should stay that way for vertical rhythm. However the title should probably be semibold.

Will fix the details.

nickvergessen · 2017-08-14T14:26:21Z

The space between the rows of the headline is more than between headline and message... I think thats awkward

pixelipo · 2017-08-16T13:09:19Z

I agree with @nickvergessen 's las comment - line height shouldn't be larger than paragraph margin/padding:

nickvergessen · 2017-11-01T13:03:58Z

@jancborchardt are you going to do something here until Nextcloud 13?

jancborchardt · 2017-11-01T15:12:43Z

I would say we should merge as it is better than currently. Additional fixes can always be done afterwards, but should nt block this PR.

MariusBluem · 2017-12-13T21:03:15Z

What’s the current state? Anything for 13?

pixelipo · 2017-12-14T11:04:51Z

how do I test this? any smart way to push a notification on test?

MorrisJobke · 2017-12-14T11:14:30Z

how do I test this? any smart way to push a notification on test?

There is an occ command provided by the admin_notifications app:

occ notification:generate [-l|--long-message LONG-MESSAGE] [--] <user-id> <short-message>

pixelipo · 2017-12-14T11:21:12Z

@MorrisJobke [Symfony\Component\Console\Exception\CommandNotFoundException] There are no commands defined in the "notification" namespace.

MorrisJobke · 2017-12-14T11:22:11Z

There is an occ command provided by the admin_notifications app:

As I wrote: this is provided by the admin_notifications app 😉 https://github.com/nextcloud/admin_notifications

pixelipo · 2017-12-14T12:37:29Z

OK, I'll push a commit to this if no one objects

pixelipo · 2017-12-15T10:04:14Z

Found (and fixed) one more bug in this PR - missing bottom margin for notifications that don't have long-message text

MorrisJobke

Looks a lot better 👍

MorrisJobke · 2017-12-15T10:57:51Z

I just noticed one bug:

~~order of items is wrong (reversed) - actual: top most is the oldest, expected (and is also the case on master): top most is newest~~

Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>

pixelipo · 2017-12-15T14:22:09Z

Good catch, @MorrisJobke - because of the old CSS solution, notifications are generated upside-down in DOM. I didn't want to mess with JS for now, so I just applied a neat css fix to reorder them (flex-direction: column-reverse) :)

pixelipo · 2017-12-15T14:23:06Z

@skjnldsv you requested changes on this PR - is it good now? 😉

jancborchardt · 2017-12-15T15:57:38Z

The issue @MorrisJobke noted was already fixed in master (via JS I assume), so no need for the CSS fix @pixelipo :)

Also this is how it looks like rebased on master:

I’d say every entry could use a bit more whitespace to the bottom? Cause now it looks a bit like the content is hanging down.

MorrisJobke · 2017-12-18T13:16:25Z

The issue @MorrisJobke noted was already fixed in master (via JS I assume), so no need for the CSS fix @pixelipo :)

Ah - I thought that this was rebased since then. Sorry - then it's my fault and the CSS fix can be dropped again.

skjnldsv · 2017-12-18T13:43:42Z

Agree with Jan, and the icon have too much top whitespace! :)

pixelipo · 2017-12-18T14:27:45Z

which icon, @skjnldsv ?

@MorrisJobke I'll revert the order fix

skjnldsv · 2017-12-18T14:29:33Z

@pixelipo the gear icon on jan's example :)

pixelipo · 2017-12-18T14:43:49Z

@skjnldsv gear icon has no whitespace above - space above is (and should be) reserved for notification-heading (close button and timestamp). We could move notification icon there, but it would look weird and we can't move both that and the title, because there's not enough space.
On the other hand, notification-heading must have exactly as much vertical space as I gave it because it contains a button - buttons are 44px high, so that's that.

Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>

jancborchardt · 2017-12-18T17:53:57Z

The icon doesn't have too much top whitespace, it's aligned with the text. :) as said above:

I’d say every entry could use a bit more whitespace to the bottom?

Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>

pixelipo · 2017-12-19T10:08:40Z

Ok, done - let's merge this bad boy, @jancborchardt @skjnldsv @MorrisJobke

If there are any additional small fixes needed, I think we should make them later, because this should go into NC13 as soon as possible.

Fixed

MorrisJobke · 2017-12-19T10:58:37Z

css/styles.css

-
-.notification-subject a {
-	display: inline-block;
+    display: flex;


Indentation is off.

MorrisJobke

Tested and works 👍 Looks good

Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>

MorrisJobke · 2017-12-19T11:15:13Z

I fixed some minor issues in nextcloud/server#7572

jancborchardt · 2017-12-19T13:57:00Z

🎉

MorrisJobke · 2017-12-20T10:39:42Z

css/styles.css

@@ -18,7 +9,8 @@
 	min-height: 100px;
 	max-height: 260px;
 	border-radius: 0 0 3px 3px;
-	border: 1px solid rgb(238, 238, 238);
+	overflow: hidden;
+	overflow-y: auto;


Moving this here from the .notification-wrapper hides the drop shadow as well as the little caret in Safari. Let me fix that.

Fix is in #106

jancborchardt added 3 commits August 13, 2017 13:59

Remove line-height overwrite to make messages more readable

9f0fe0d

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Remove border, fix scrollbar position

cc530e0

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Show notification message and action elements only when there, fix la…

f059b32

…yout Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt added 3. to review design enhancement papercut labels Aug 13, 2017

jancborchardt added this to the Nextcloud 13 milestone Aug 13, 2017

jancborchardt requested review from nickvergessen, pixelipo and skjnldsv August 13, 2017 12:12

skjnldsv approved these changes Aug 13, 2017

View reviewed changes

skjnldsv previously requested changes Aug 13, 2017

View reviewed changes

MorrisJobke added 2. developing and removed 3. to review labels Aug 14, 2017

jancborchardt self-assigned this Sep 17, 2017

MorrisJobke added 3. to review and removed 2. developing labels Dec 15, 2017

MorrisJobke approved these changes Dec 15, 2017

View reviewed changes

Fix notifications order

2c6485c

Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>

Marin Treselj added 2 commits December 18, 2017 15:50

Revert CSS fix for notification sorting

a73e25f

Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>

Fix bottom border

546ad03

Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>

Add padding-bottom to notifications

c8174f1

Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>

MorrisJobke reviewed Dec 19, 2017

View reviewed changes

MorrisJobke approved these changes Dec 19, 2017

View reviewed changes

Fix indentation

b541bf4

Signed-off-by: Marin Treselj <marin.treselj@forlagshuset.no>

MorrisJobke mentioned this pull request Dec 19, 2017

Fix box shadow of header elements nextcloud/server#7572

Merged

jancborchardt merged commit d63d050 into master Dec 19, 2017

jancborchardt deleted the design-fixes branch December 19, 2017 13:56

MorrisJobke reviewed Dec 20, 2017

View reviewed changes

MorrisJobke mentioned this pull request Dec 20, 2017

Fix box shadow on notifications drop down #106

Merged

Design fixes #89

Design fixes #89

Conversation

jancborchardt commented Aug 13, 2017

skjnldsv left a comment

Choose a reason for hiding this comment

MariusBluem commented Aug 13, 2017

raimund-schluessler commented Aug 13, 2017

skjnldsv left a comment

Choose a reason for hiding this comment

nickvergessen commented Aug 14, 2017

jancborchardt commented Aug 14, 2017

nickvergessen commented Aug 14, 2017 • edited

pixelipo commented Aug 16, 2017

nickvergessen commented Nov 1, 2017

jancborchardt commented Nov 1, 2017

MariusBluem commented Dec 13, 2017

pixelipo commented Dec 14, 2017

MorrisJobke commented Dec 14, 2017

pixelipo commented Dec 14, 2017

MorrisJobke commented Dec 14, 2017

pixelipo commented Dec 14, 2017

pixelipo commented Dec 15, 2017

MorrisJobke left a comment

Choose a reason for hiding this comment

MorrisJobke commented Dec 15, 2017 • edited

pixelipo commented Dec 15, 2017

pixelipo commented Dec 15, 2017

jancborchardt commented Dec 15, 2017

MorrisJobke commented Dec 18, 2017

skjnldsv commented Dec 18, 2017

pixelipo commented Dec 18, 2017

skjnldsv commented Dec 18, 2017

pixelipo commented Dec 18, 2017

jancborchardt commented Dec 18, 2017

pixelipo commented Dec 19, 2017

MorrisJobke Dec 19, 2017

Choose a reason for hiding this comment

pixelipo Dec 19, 2017

Choose a reason for hiding this comment

MorrisJobke left a comment

Choose a reason for hiding this comment

MorrisJobke commented Dec 19, 2017

jancborchardt commented Dec 19, 2017

MorrisJobke Dec 20, 2017

Choose a reason for hiding this comment

MorrisJobke Dec 20, 2017

Choose a reason for hiding this comment

nickvergessen commented Aug 14, 2017 •

edited

MorrisJobke commented Dec 15, 2017 •

edited