Activity app design #1769

jancborchardt · 2014-04-23T08:45:45Z

🚧

@nickvergessen let’s use this for working on the Activity app design. Essentially we should move to an easier to read list view. Here’s a basic mockup of how it should look:
owncloud activity app mockup

have text be like a sentence: »shared test with Tom« (including share icon, filename in bold, and avatar left next to friend username)
use icons for actions on the left
- green + added
- red x deleted
- blue circular arrows changed
- black/grey shared icon
- black/grey renamed icon
- black/grey moved icon
- …
don’t show own username or avatars, only say »You« (missing in the mockup)
multiple files not in a list, but in text: »Photo, Document, 9 more …«
- hover over »9 more…« shows a tipsy tooltip with the other files
show only filename, full path only on hover in a tipsy tooltip
group by actions and dates (this is done already I believe?)

That’s basically it. What do you think?

Open bugs:

.txt previews are generated with a white background, which is now displayed on white background instead of gray background as before see
it's too hard to guess which date belongs to which activity when your screen is a bit bigger see
when you share something with someone (or receive a share), the avatar should be shown left next to the name of that person. (Do not show the avatar of the current user!) see
what is that »$2a$08$ebx4UI…«? see
big previews only for images for now, the others don’t work too well
layout is borked on long lines (I’ll fix that) see

Fixes #1676

jancborchardt · 2014-04-23T12:35:09Z

@nickvergessen can you take over?

The activitysubject needs to be modified according to the tasks above. Probably split into action (change, add, rename, share, delete …), person who did the action (mostly yourself), recipient (for shares), and filename.
I also added the icons, which can simply be used by assigning the class like »icon-change-color« or »icon-shared«.

MorrisJobke · 2014-05-05T11:54:13Z

Try to merge this until 12th May http://mailman.owncloud.org/pipermail/devel/2014-May/000188.html

jancborchardt · 2014-05-05T17:12:27Z

@nickvergessen you said you already had some of the improvements locally? Can you push them here?

nickvergessen · 2014-05-05T17:18:56Z

@jancborchardt the local work is based on #1685 will do, as soon as it got merged

jancborchardt · 2014-05-13T13:17:48Z

@nickvergessen #1685 is merged now, can we move on with the design?

…e UI The long one is displayed on hover

nickvergessen · 2014-05-14T09:19:53Z

Rebased and updated:
Grouped activities show the icon at the bottom of the list:

.txt previews are generated with a white background, which is now displayed on white background instead of gray background as before:

it's too hard to guess which date belongs to which activity when your screen is a bit bigger:

nickvergessen · 2014-05-14T09:22:55Z

Sharing a folder has no icon:

jancborchardt · 2014-05-14T09:46:51Z

Grouped activities show the icon at the bottom of the list:

Fixed that one.

.txt previews are generated with a white background, which is now displayed on white background instead of gray background as before:

I’d say that’s only a test-case issue for now as it only happens when you create »test« files with almost nothing in it. Normally I would add a slight border around it, but that would make filetype icons look silly. Let’s leave it.

it's too hard to guess which date belongs to which activity when your screen is a bit bigger

Yeah, true. Then again, the date isn’t that important so it shouldn’t be too prominent. Will look into that later.

jancborchardt · 2014-05-14T09:48:51Z

the file names / folder names should be bold for easier readability
grouped file actions should be displayed in a row, not in a list (and not repeat the action) so instead of the »You created x, you created y, you created z …«, it should say: »You created x, y, z and 3 more …« in one line
when you share something with someone (or receive a share), the avatar should be shown left next to the name of that person. (Do not show the avatar of the current user!)
if I scroll down further, there’s no text on the activities

…to activity-design # By Jan-Christoph Borchardt # Via Jan-Christoph Borchardt * 'activity-design' of https://github.com/owncloud/apps: align icons to top in activity groups change colored change icon to black/grey for less distraction

nickvergessen · 2014-05-14T10:09:20Z

grouped file actions should be displayed in a row, not in a list (and not repeat the action) so instead of the »You created x, you created y, you created z …«, it should say: »You created x, y, z and 3 more …« in one line

Moved to new issue owncloud/activity#2

nickvergessen · 2014-05-14T10:09:55Z

if I scroll down further, there’s no text on the activities

Works for me

jancborchardt · 2014-05-14T10:11:34Z

Some more issues:

oftentimes the first letter of the file/folder name is not shown
what is that »$2a$08$ebx4UI…«?
older events which were lazily loaded miss the »You added file« text entirely
layout is borked on long lines (I’ll fix that)

nickvergessen · 2014-05-14T10:15:56Z

activity/lib/data.php

-				$prepared_params[] = $param;
+
+				if ($highlight_params) {
+					$prepared_params[] = '{{beginparamhighlight}}' . $param . '{{endparamhighlight}}';


@LukasReschke Is this okay?
The problem is we want to print  but no other html
I see no otherway then combining it with https://github.com/owncloud/apps/pull/1769/files#diff-dffaf6a7a40b2f1ec0be834c5bf5574bR19

<?php print_unescaped(str_replace( array('{{beginparamhighlight}}', '{{endparamhighlight}}'), array('', ''), OC_Util::sanitizeHTML(\OCA\Activity\Data::translation($_['event']['app'], $_['event']['subject'], $_['event']['subjectparams'], true, true)) )) ?>

Or is there a way to tell sanitizeHTML() that  is okay?

or @DeepDiver1975

Can't you handle the string tag in the template?
Is  the right thing to do these days? I'd expect classes to be added to tags

whether  or something else does not really matter.
The problem is, we need a tag an only want to allow this one tag. but still sanitize the rest of the string. Is it okay to do it like this?

Can't you handle the string tag in the template?

What about this ⬆️

@DeepDiver1975 okay I think I fixed it better now:
404edc0

This however means that an translator could XSS by adding html to his/her translation

This however means that an translator could XSS by adding html to his/her translation

They still can do this a lot of other places in the code ;-)

indeed - we currently assume translators to be nice with us 😉

nickvergessen · 2014-05-14T10:26:27Z

oftentimes the first letter of the file/folder name is not shown

This was due to a bug-fix in owncloud activities that have been created between the bug-fix and the fix in activity apps are broken forever, but this is master-only.

what is that »$2a$08$ebx4UI…«?

Looks like a key, did you share it via link with password or something?

older events which were lazily loaded miss the »You added file« text entirely

is related to the same issue as 1.

jancborchardt · 2014-05-14T10:38:29Z

Folders (when shared) get a »blank page« filetype icon as preview instead of a folder

jancborchardt · 2014-05-14T10:40:22Z

@nickvergessen I would say we should fix the preview stuff (with the folders) and then merge this. Everything else is for follow-up pull requests.

cc @owncloud/designers for review.

DeepDiver1975 · 2014-05-14T13:04:56Z

activity/lib/data.php

@@ -131,16 +129,20 @@ public static function send($app, $subject, $subjectparams = array(), $message =
 		return true;
 	}

-	public static function prepare_files_params($app, $text, $params, $file_position = false)
-	{
+	public static function prepare_files_params($app, $text, $params, $file_position = false, $strip_path = false, $highlight_params) {


Bääh - we use camel case! Please follow your coding guide lines!

Sorry, will fix in a new PR

Created an issue: owncloud/activity#4

…a before usage

nickvergessen · 2014-05-14T14:45:03Z

👍 since the workaround has been approved by DeepDiver

Activity app design

jancborchardt added Design labels Apr 23, 2014

jancborchardt added this to the ownCloud 7 milestone Apr 23, 2014

jancborchardt mentioned this pull request May 6, 2014

Design of Activity feed owncloud/core#7068

Closed

jancborchardt and others added 14 commits May 14, 2014 10:17

move from block layout to list layout, first step

9532734

Activity: hide appname, move date to right

1e433ec

Activity app: margin and position fixes

90056fb

Activity: simplify icon

d8b6574

Activity: add colored icons for add, change, delete

e76d4bf

Activity: remove header with username and avatar

adb873d

Activity: more layout, align message, icon, header, preview

af45b89

Activity: more layout, align message, icon, header, preview

e6960ba

Fix icons for delete and add

e378060

Fix new lines

edf7669

Make a short and long version of subjects and use the short one in th…

13153b2

…e UI The long one is displayed on hover

Add icon for grouped activities

106e0eb

Remove duplicated css

8c336ce

Always add div.activity-icon so the messages are aligned

17c0b06

nickvergessen and others added 4 commits May 14, 2014 11:26

Use else instead of !condition for easier readability

08778d2

Add icon for share activities

5d27ef0

change colored change icon to black/grey for less distraction

f746da6

align icons to top in activity groups

15b908b

nickvergessen added 2 commits May 14, 2014 11:59

Highlight usernames, files and other params in subjects

714e57d

nickvergessen reviewed May 14, 2014
View reviewed changes

Vertical align activity subjects at the top

da274d6

jancborchardt added 3 commits May 14, 2014 12:34

put preview image on separate row

5337ae9

fix positioning of long lines

7a07421

grey the changed and shared icons so they are less intense

23c6726

nickvergessen added 2 commits May 14, 2014 12:45

Fix long lines in grouped activities

57e0e82

Display folder icon when a folder was shared/created

76242aa

DeepDiver1975 reviewed May 14, 2014
View reviewed changes

nickvergessen added 3 commits May 14, 2014 15:22

Add missing $highlight_params to the doc block

61f8d5f

Fix Undefined index: message_long

50b1ae0

Remove hack and correctly \OC_Util::sanitizeHTML() the dat…

404edc0

…a before usage

nickvergessen changed the title ~~[WIP] Activity app design~~ Activity app design May 14, 2014

This was referenced May 14, 2014

Revisit txt-previews owncloud/activity#11

Closed

Better link activity date to the related action owncloud/activity#12

Closed

jancborchardt added a commit that referenced this pull request May 14, 2014

Merge pull request #1769 from owncloud/activity-design

8a45820

Activity app design

jancborchardt merged commit 8a45820 into master May 14, 2014

jancborchardt deleted the activity-design branch May 14, 2014 14:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Activity app design #1769

Activity app design #1769

jancborchardt commented Apr 23, 2014

jancborchardt commented Apr 23, 2014

MorrisJobke commented May 5, 2014

jancborchardt commented May 5, 2014

nickvergessen commented May 5, 2014

jancborchardt commented May 13, 2014

nickvergessen commented May 14, 2014

nickvergessen commented May 14, 2014

jancborchardt commented May 14, 2014

jancborchardt commented May 14, 2014

nickvergessen commented May 14, 2014

nickvergessen commented May 14, 2014

jancborchardt commented May 14, 2014

nickvergessen May 14, 2014

nickvergessen May 14, 2014

DeepDiver1975 May 14, 2014

nickvergessen May 14, 2014

DeepDiver1975 May 14, 2014

nickvergessen May 14, 2014

LukasReschke May 14, 2014

DeepDiver1975 May 14, 2014

nickvergessen commented May 14, 2014

jancborchardt commented May 14, 2014

jancborchardt commented May 14, 2014

DeepDiver1975 May 14, 2014

nickvergessen May 14, 2014

DeepDiver1975 May 14, 2014

nickvergessen May 14, 2014

nickvergessen commented May 14, 2014

Activity app design #1769

Activity app design #1769

Conversation

jancborchardt commented Apr 23, 2014

Open bugs:

jancborchardt commented Apr 23, 2014

MorrisJobke commented May 5, 2014

jancborchardt commented May 5, 2014

nickvergessen commented May 5, 2014

jancborchardt commented May 13, 2014

nickvergessen commented May 14, 2014

nickvergessen commented May 14, 2014

jancborchardt commented May 14, 2014

jancborchardt commented May 14, 2014

nickvergessen commented May 14, 2014

nickvergessen commented May 14, 2014

jancborchardt commented May 14, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickvergessen commented May 14, 2014

jancborchardt commented May 14, 2014

jancborchardt commented May 14, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickvergessen commented May 14, 2014