Start with Vue

[nickvergessen]

Fix #179
Fix #217

General

• Make sure SCSS variables are used
• Center all content, width 670px like in Talk
• Requires add multiselect type to ActionInput nextcloud-libraries/nextcloud-vue#1250

New announcement composer

• Some more space on top, e.g. 80px
• Disable "Announce" button while subject is empty
• Inline validation for too long announcement title
• Remove "Add announcement" heading and instead change "Subject…" placeholder to "New announcement subject"
• Textarea placeholder to "Write announcement text, Markdown can be used …"
• Style the "Subject" field as h2, incl bolding
• Reduce default height of textarea to 3 rows and use autosize to automatically size the height (remove the drag handle too)
• "Advanced options" into 3 dot menu
• Make sure buttons are 44px min
• "Announce" button should go to the right
• "Announce" button could include targets, like "Announce to everyone" or "Announce to engineering group", "Announce to marketing and 3 more groups"
• Group selection can then also go into 3-dot-menu
• Think about if elements should be included like Text app parts for basic formatting like bold etc, or the emoji picker

Announcement list

• Fade/cut long announcement texts after 5 lines, just like in comments. Click toggles expand/collapse
• Subline: Alice Ada 19 minutes ago, visible to everyone (as text, not icon), 0 comments
  • Missing support for the group list (we only have the ids at the moment, not the display names)
• "Clear notifications" and "Delete announcement" should go to a 3-dot menu on the right
• Remove horizontal divider line
• position:sticky the header part of each announcement, use same white to transparent fade as in mail heading
• "5 comments" put below the text, on the left – only clicking that should open the sidebar
  • Actually open the sidebar
• Title subline and "5 comments" in var(--color-text-maxcontrast)
• Markdown rendering is missing

[nickvergessen]

Design-wise the announcements list is ready:

[nickvergessen]

Need some help on moving the group selection in place. Also I'm not too sure about this point:

"Announce" button could include targets, like "Announce to everyone" or "Announce to engineering group", "Announce to marketing and 3 more groups"

Would make the code rather complex, but yeah then the selection could be moved to the … menu I guess?

cc @jancborchardt @ma12-co

[jancborchardt]

Nice work! :)

Now that we collapse the content of announcements, I think we don’t need the sticky header anymore. It looks a bit off to have it sticky even though it’s collapsed.

"Announce" button could include targets, like "Announce to everyone" or "Announce to engineering group", "Announce to marketing and 3 more groups"

Would make the code rather complex, but yeah then the selection could be moved to the … menu I guess?

Yep – while it would make the code more complex, it would make the interface nice and clean. :) And yes then we can move the selection into the 3-dot-menu.

[nickvergessen]

Raised issues for the missing group selection and markdown support, so we can finally get this PR in.