Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Display focused board card in the title bar instead of board #336

Open
Gozala opened this issue Nov 13, 2019 · 13 comments
Open

Display focused board card in the title bar instead of board #336

Gozala opened this issue Nov 13, 2019 · 13 comments

Comments

@Gozala
Copy link
Contributor

Gozala commented Nov 13, 2019

As it was describe in https://github.com/inkandswitch/pushpin/pull/310#issuecomment-551936885 it would be very useful to let content handlers have additional controls without overloading UI. Here is an example of text / code content handler that instead of providing subtitle allows you to switch syntax mode.

mode-switch

However unless card is entered there is no way to provide additional controls while keeping content handler nice and clean. Here is an attempt to do that as well.

inline-mode-switch

I would like to propose to display active / focused card in the title bar, that way it will provide consistent user experience to the user and all the common settings or actions can be surfaced in the title bar. It pretty much creates "menu bar" metaphor from macOS where application provides common actions.

It also might be worth considering surfacing things like enter / exit controls kind of like how green traffic light button provides enter / exit full screen mode in macOS.
@Gozala
Copy link
Contributor Author

Gozala commented Nov 13, 2019

On the side note I would also prefer to replace <select> element in the demos above with "omniselect" which would provide more consistent experience + filtering & maybe even more powerful features over time.

@pvh
Copy link
Member

pvh commented Nov 13, 2019

I liked your sketch of this in a past issue where the selected card layered over the current location and I think this concept is pretty compelling.

We have a bunch of problems with focus vs. selection right now that I've been trying to figure out anyway, so I think this will help. Will it be confusing if you go from 1-2 cards selected and don't get that focus? Thoughts on how that would work?

@pvh
Copy link
Member

pvh commented Nov 13, 2019

Take a look at the branch cleaner-drag for a bit of that work in progress.

@Gozala
Copy link
Contributor Author

Gozala commented Nov 13, 2019

Will it be confusing if you go from 1-2 cards selected and don't get that focus? Thoughts on how that would work?

I assume you mean multiple cards being selected at the same time ?

I think in such case titlebar should probably display something l similar to what it does now but instead of saying “n items” in subtitle say “m selected items out of n”.

@Gozala
Copy link
Contributor Author

Gozala commented Nov 13, 2019

Maybe also surface relevant actions if there are some for multicard case e.g delete, share

@Gozala
Copy link
Contributor Author

Gozala commented Nov 13, 2019

I liked your sketch of this in a past issue where the selected card layered over the current location and I think this concept is pretty compelling.

You mean this ?

I’m having second thoughts about nesting, because it can be deep and will take up a space that might be better used for surfacing relevant content controls.

Not to say it can’t be done, just getting it right is likely going to be challenging. On the flip side having sense of where you are and a quick way to jump multiple levels seems compelling.

@pvh
Copy link
Member

pvh commented Nov 13, 2019 via email

@Gozala
Copy link
Contributor Author

Gozala commented Nov 16, 2019

I've made a first draft which looks pretty confusing right now:

No selection

image

Selected text note

image

Interesting side effect, if you have a nested board that has an item selected with-in it shows up as well. We could probably address that by using different context instead of just reusing "list" context .

image

Overall I'm not happy with the visuals. I think we need to figure out a better way to present this or don't show the board icon at all. It also could be that having non circular icons might work better. I'll play around and see if I can come up with something more pleasing.

@Gozala
Copy link
Contributor Author

Gozala commented Nov 16, 2019

Tried one more version where icons have visual feedback for what's selected. Below "dashed border" signifies not being the active selection. While solid border indicates active selection. If nothing was selected board icon would have selection. Not really happy with a result but I thought I'd post anyway.

image

@Gozala
Copy link
Contributor Author

Gozala commented Nov 18, 2019

Screen Shot 2019-11-18 at 1 01 14 PM

BTW I also found that have multiple cards selected and have their titles editable in titlebar is quite handy.

@pvh
Copy link
Member

pvh commented Nov 19, 2019 via email

@Gozala
Copy link
Contributor Author

Gozala commented Nov 23, 2019

Made few attempts to make it look more appealing (would love feedback)

No selection

Screen Shot 2019-11-22 at 4 54 37 PM

Text card selection

Just overlays board card
Screen Shot 2019-11-22 at 4 54 51 PM
Screen Shot 2019-11-22 at 4 54 55 PM

Folding navigation buttons under

No selection

Screen Shot 2019-11-22 at 4 59 24 PM

Code selection

Screen Shot 2019-11-22 at 4 59 34 PM

@pvh
Copy link
Member

pvh commented Nov 23, 2019 via email

@Gozala Gozala mentioned this issue Dec 5, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pvh @Gozala