Feature Idea: Improve cardDetails buttons and add icons

[oliverbutler]

Summary: Currently, the property names/buttons are different sizes, hard to click, and the same issue of "+ Add" been utilized throughout rather than utilizing an SVG icon, further leading to design discrepancies.

I propose the addition of an which could be used in all situations in which you need an Icon next to a Button to reduce code duplication and mismatching of styles. Also (if wanted by the community) I have modified the appearance of the , this can be reverted but personally, I believe It looks less stark.

Current CardDetails

Proposed CardDetails

https://user-images.githubusercontent.com/47489826/117651978-83d04600-b18a-11eb-92a3-4f2dad0bab1d.mov

• Change hover function of the names and values
  • no hover effect if read-only
• Editing fields pops out the input slightly to match global aesthetic
• Space for icons (once integrated better)

How important this is to me and why:

Importance: Medium

• Improves the app aesthetics and useability

Additional context / similar features:

Notion.so

[chenilim]

Thank you so much @oliverbutler! The video in particular is very helpful. Yes, we definitely expect to improve the overall aesthetic and UX. There are some glaring issues, such as the input box length, etc.

Looping in @michaelgamble. What do you think Mike? I know we will be doing a UX pass eventually, but maybe some of these fixes would be good short-term improvements? I'd be open to taking a PR if you don't see any issues.

[oliverbutler]

@chenilim That's great to hear!

Im more than happy to heavily contribute to this project to be honest I just wish we utilised TailwindCSS, not sure if you guys have used it before, but it's genuinely a game-changer personally.

With a UI overhaul in the works I'm more than happy to dedicate some time that way as opposed to my current notion-esque project which focussed on the note writing side of the project, rather than the "database"/Kanban development found with you all, I'd love to focus on developing the note taking and "content blocks" aspects.

From what read it seems the API is (mostly) ready for single page modes, much like notion.

Side note: I understand you've had issues with Prettier + Eslint but I hope something can be worked out soon 🙏, the lack of opinionated style consistency is killing me.

[michaelgamble]

@oliverbutler So i have a few questions and some feedback that we can jump off with:

1. Change hover function of the names and values (no hover effect if read-only)
   • This one is a little unclear to me, partly because I'm new to the team and am not currently aware of a read-only state for these property dropdowns, whats the use case / when does that happen?
2. Editing fields pops out the input slightly to match global aesthetic
   • I'm not sure what global aesthetic we have established, but i do know we will be working towards bringing in our Compass Design System, likely iterating the design system to incorporate use cases needed to be covered in this project, you can check out an early draft here
   • Although not currently documented in the design system, my recommendation on this is that we have the dropdown select menu align with the left (or right if available screen real-estate dictates) edge of the item to trigger the dropdown. It's vertical alignment should be flush with 0px of vertical space between the bottom of the item and the menu.
3. Space for icons (once integrated better)
   • Agreed lets do this, I'm thinking it should align similarily to something like our existing menu item guide - The TLDR of it is use our 16x16 icon with 8px of space between the icon and the text.
   • As far as implementation goes we would want to use our Compass Design Icon font, @harshilsharma63 is currently bringing that library into focalboard as we speak and would be able to walk you through the process on implementing icons
   • Regarding which icons to use for each property type, thats something you and I can work together on, if you're willing to take the first pass at picking out which icons you think should be used for each property type out of this material design icons open source icon library (this is what we use as a base for icons so we dont have to customize every icon), pick the ones you think fit best, we can review them together and then i can follow through on the process to getting them included in the compass design icon font for use in the project.

Regarding any thoughts around technical implementation, this will likely be an iterative approach / ongoing discussion which I think it will be awesome to have you share your thoughts with the team in our community mattermost server, this will likely be a collaboration between the focal boardteam and the compass design team, you should jump into the focal board channel.

Let me know if you have any questions :)