✨ Text app design review

[jancborchardt]

Thanks everyone for attending! @nickvergessen @ma12-co @juliushaertl @PVince81 @rullzer @skjnldsv @jancborchardt

Also cc @azul @mejo-

Overall

• Saving feedback: Text saying "Saved" or "Saving …"
  • Offline state: "Offline, changes will be saved when online" update offline state message when saving #2027
  • We shouldn’t expose the difference between "unsaved" and "unpushed"
• When zooming with sidebar open, the Files app / background shows (on zooming in), or the Text app overlaps the sidebar (on zooming out)
• Header white and title/action icons not fade out → Pull request in progress in the Viewer component

Errors

Moved to #2240

Formatting bar

• Slight whitespace between "sections", 22px (half clickable space):
  • Undo/redo
  • Bold/Italic/Strikethrough/Headings
  • the 3 list types
  • quote, code, image
• Increase height of formatting bar to 50px, size of avatars to 44 (might fix the status bubble display issue too) fix issues on formatting bar #1960
• A little transparency and blur for more open feel fix issues on formatting bar #1960
• Undo and redo buttons should be shown at full opacity when there is something to undo/redo respectively
• Better feedback on what is the currently active formatting, except just full opacity cause it’s not so easy to see (possibly little circle below, or border around)

Floating marking bar

To be clarified in #2211 (comment)

• Only show on mouseup Only show link/file popover menu on mouseup #1059
• When clicking a linked file, going back via browser history (or viewer) does not work
• Icons don’t need tooltip
• action backgrounds white, divider grey
• "Remove link" action in the bar when a link is set Add remove link button #1962

Content

• Think about what to do with "Insert an image" cause it can be used to insert links to files too → possibly just wording
  • If a file is inserted just add a regular link Add a regular link if a file was inserted instead of an image #1966
• Numbers of numbered lists don’t show
• If you mark a whole list and switch it to a task list, only the first item gets tasklist-ified Fix only the first item gets tasklist-ified issue #1973
• Feedback about how to delete an image by mouse, e.g. with an "x" icon in the top right of the image add image removing on hover #1872
• Not possible to start task list by writing markdown - [ ]
• Possibly remove max-height for landscape pictures (ref Jos’ screenshot issue when zooming) Fix landscape image issue #2002

Sharing

• Status icon is too small
• Other menu icons are too big
• Can’t go into the user menu of people in the 3-dot menu
• If you open one person’s menu, the 3-dot-menu also opens

Link share

• Top whitespace unit to vh so it’s less on mobile
• When editable: Alignment issues of formatting bar, and other users overlapped by sidebar Controls bar alignment is off when sidebar is open #1061

Sidebar

• Would make sense to remove the thumbnail here cause it doesn’t show any supporting info Hide preview if it is in full screen mode (viewer is open) server#31408
• Chat tab: think about how to make it look more inviting, like the Comments tab?
  • Bunch of technical difficulties, out of scope of the text app

Author colors

• Always show all participants in dropdown (including yourself so you know your own color)
• Change tooltip to just say "Participants"
• Change name from "color annotations" to "author colors" (also in description text)
• Settings icon / 3-dot icon could always be icon-group for participants
• Color circles around person are darker than actual color – should also use the 10% opacity value
• Padding-top and -bottom for the highlight background color so there’s no white lines inbetween rows of text

[leobard]

@jancborchardt if you do another one of these design ux reviews, can you invite me?

[jancborchardt]

@jancborchardt if you do another one of these design ux reviews, can you invite me?

Absolutely, and sorry for the late reply! :) You can find more info on the Nextcloud design team at https://nextcloud.com/design/, there is also info on our weekly design review calls there.

[luka-nextcloud]

@juliushaertl

If you mark a whole list and switch it to a task list, only the first item gets tasklist-ified

I think it's a tiptap editor issue. Because to add a task list, we call a function called todo_item() which is a function from tiptap.

[juliushaertl]

I think it's a tiptap editor issue. Because to add a task list, we call a function called todo_item() which is a function from tiptap.

We have a custom implementation for the todo_item handling

text/src/nodes/ListItem.js

Lines 111 to 136 in 6889f73

	const schema = state.schema
	const selection = state.selection
	const $from = selection.$from
	const $to = selection.$to
	const range = $from.blockRange($to)
	let tr = state.tr
	let parentList = getParentList(schema, selection)
	if (typeof parentList === 'undefined') {
	toggleList(schema.nodes.bullet_list, type)(state, (_transaction) => {
	tr = _transaction
	}, view)
	parentList = getParentList(schema, tr.selection)
	}
	if (!range || typeof parentList === 'undefined') {
	return false
	}
	tr.setNodeMarkup(parentList.pos, schema.nodes.list_item, { type: parentList.node.attrs.type === TYPES.CHECKBOX ? TYPES.BULLET : TYPES.CHECKBOX })
	tr.scrollIntoView()
	if (dispatch) {
	dispatch(tr)
	}

The problem might be especially this line where we only update the type at the cursor position:

text/src/nodes/ListItem.js

Line 131 in 6889f73

tr.setNodeMarkup(parentList.pos, schema.nodes.list_item, { type: parentList.node.attrs.type === TYPES.CHECKBOX ? TYPES.BULLET : TYPES.CHECKBOX })

[juliushaertl]

Closing as open points have been moved to separate tickets or are part of #2211