GNOME Bugzilla – Bug 611995
Add CSS for selected notes
Last modified: 2010-03-07 21:12:48 UTC
Created attachment 155413 [details] Screenshot with the new CSS A patch follows that makes the sidebar look a bit more like in the initial mockup, by giving the selected note a different background and an arrow. It has been tested in Chrome 5.0 and Firefox 3.6. Internet Explorer probably doesn't support the ::after { content: '' } trick, but it's better than nothing.
Created attachment 155414 [details] [review] Make the selected note more distinct in the sidebar By using a different background color and adding an arrow like in the initial mockup, it is now easier to see what note is currently shown.
Created attachment 155461 [details] Multiline bug There's a bug if the note title is more than one line. Otherwise, this seems to work really well. Nice work! It makes me wish that Snowy would always show the currently-viewed note (and maybe a few recently-viewed ones, too?) in the sidebar. For example, search for an older note, view it, and there is no pretty selection CSS because the note doesn't show up in the sidebar. I'll file a new bug for this.
Created attachment 155467 [details] [review] Improved patch In this patch, the problem you see above the arrow is fixed, and the arrow is placed at the top of the item instead of the bottom. In this design it might be nicer to resize the arrow to take the full item height, but that doesn't seem doable using CSS only. The list still has list-style-position:inside instead of outside, but this is easier to implement and might even be more effective since there fits more text. This could be changed later on by using background-image instead of list-style-image.
Okay, the behavior looks great now. I want to give Brad a chance to review the patch since he wrote the original CSS, but I'm very happy with the functionality of this patch.
Review of attachment 155467 [details] [review]: Looks good dude. Thanks for finally fixing this. What browsers have you tested with this? For right now, go ahead and commit, but I would suspect that with your use of CSS3 that on IE, this will look pretty broken. Ostensibly we support Opera, WebKit (Android/iPhone/Chrome/Safari), Firefox 3 and IE 7/8. I suspect we'll have to do some hacks to get IE to look decent, but that's lower priority, IMO. ::: site_media/css/screen.css @@ +154,3 @@ + color: #545247; + background-color: #d6e1c7; +#sidebar-note-list .selected { You need a newline after this line.
Thanks for the comments! I have committed the patch. This patch has been tested in Chrome 5.0 and Firefox 3.6, and I suppose it works in slightly older versions too. I agree that IE support (and maybe even Firefox < 3.5 and Opera support) should be lower priority for now, as long as the design is not complete and implemented yet.