Add storage labels to 'All Notes' and figure a better solution to the dull storage notes list view

[pfftdammitchris]

Edit 02/20/2018 : Will progress this pull request fully this coming weekend (Fri/sat/sun) for sure

Edit 02/19/2018: I think I am going to also proceed to the storage view and implement some color labeling to storage view. So this pull request isn't finished yet

Added storage labelings to 'All Notes' (this serves as a starting point for building the rest of #1545)

Works for:

• Default view
• Compressed view

Previously when we were viewing notes in the All Notes view, we could not tell which storage the notes came from. This was confusing to the user. So we need a way to show to the user which storage the notes are in. This pull request provides storage labels to solve that as shown in the screenshot below

This is a re-make in reference to #1551 and originated from #1545 without any color integration implemented, with the purpose of serving as a starting point

I re-made the pull request to make this more simple because the previous pull request had unrelated changes (it barged into the folder labelings when this was originated for storage labelings)

I tried to keep it as simple as possible, without breaking any code.

Screenshot:

TODOS:

• Handle long folder titles in the storage view

[pfftdammitchris]

Updated:

When in "All notes" view, note items will display their storage names
When viewing a storage (Clicking on a storage header in the side nav), note items will display their folders

Note items do not display any folder/storage when clicking on any individual notes in the side nav (because it is redundant)

@nlopin How about this?

[Rokt33r]

@pfftdammitchris I'm not the one who is asked, but I like this. 👍

[nlopin]

Looks great! How does it look if the title of a note is long?

[pfftdammitchris]

@Rokt33r thanks :) hearing that definitely motivates me to provide more help to the project since I feel assured that I am going in the right directions!
@nlopin I haven't tested that yet but that will most likely have to be a concern. I was thinking, maybe, to truncate at a certain length (maybe 12-15?) while concat-ing with three dots (...) when over the length, allowing the user to hover over it to display a small popup of the full length on top of it? Something simple like that

Also, I'm thinking to probably provide the user the option in the preferences to show the colors of the folders when viewing the storage only. I think that is better than the gray dull coloring (whereas it is ok for viewing "all notes")

What do you guys think?
If all goes well, that might be completing this pull request finally unless there are other things I should do

[Rokt33r]

I was thinking, maybe, to truncate at a certain length (maybe 12-15?) while concat-ing with three dots (...) when over the length

It can be done with text-overflow: ellipsis;. https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

allowing the user to hover over it to display a small popup of the full length on top of it

You can use title attribute for quick solution although it looks a little ugly.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title

I think that is better than the gray dull coloring

I don't mind if there are options to choose, but I like the gray dull coloring. It looks clean and calm. 😌 😌

[pfftdammitchris]

Got that in.
We're probably going to have to use the title attribute for now until there is a better solution. Tried using the stylus tooltip approach used elsewhere in the boostnote app but its very hard to make a smooth implementation inbetween because it conflicts with the note item UI. (Will probably come back to this using portals in the future)

Ok, I think the pull request should be complete now. I was deciding whether to continue progressing the color ideas but I can make a separate pull request for that. This pull request is pretty important IMO so we should get this into the next version first