Panel View for Keep 2.8.1

Just a CSS bug fix.

One nice thing about Keep is its corresponding app, so I can write notes on my phone and have them appear in the panel. You know, the Google app which I have absolutely nothing to do with. I also have nothing to do with the website. My extension is merely a wrapper for the website, enabling it to function inside an always-on-top panel and adding a little CSS and JavaScript here and there to improve the experience.

But I digress. I had added a checklist with no title in the Android app, and I found that it was missing from the collapsed list view (which I’d added in the 2.8 update) in the extension. I could see the space where it should have been, but was not. It was easy enough to fix; I was just missing a selector in my stylesheet.

I’ve written before on how Keep’s markup and stylesheet use obfuscated CSS class names, so I won’t go into details about that again. As of the 2.8 update, I had moved all class name definitions to Sass variables, which made writing the actual stylesheet much more readable.

So in rewriting the styles for the collapsed list view, I had this:

.#{$note-content},
.#{$note-content-list},
.#{$note-labels},
.#{$note-toolbar} {
    display: none;
}

This is the base style that hides all the extra stuff, leaving only the title. This would be fine, except there are cases where you might not want to hide the title, like… when there is no title. If there’s no title and there is content, then you’d want to show the content instead. So after that initial statement, we have this override:

.#{$new-note-container-inside-wrapper} .#{$note-content},
.#{$note-title}[style="display: none;"] + .#{$note-content},
.#{$note-title}[style="display: none;"] + .#{$note-title-placeholder}[style="display: none;"] + .#{$note-content} {
    display: block !important;
}

Instead of assigning a class to hide the title and title placeholder elements, Google seems to just slap an inline style on there. That’s okay, we can work with that. Instead of targeting a class, we can target the style and value with an attribute selector.

Unfortunately, I was missing one. The class .#{$note-content-list} was still being hidden, and I need to show it if there was no title. Easy enough to add its selector to the list, remembering to target the hidden note title:

.#{$new-note-container-inside-wrapper} .#{$note-content},
.#{$note-title}[style="display: none;"] + .#{$note-content},
.#{$note-title}[style="display: none;"] + .#{$note-title-placeholder}[style="display: none;"] + .#{$note-content},
.#{$note-title}[style="display: none;"] + .#{$note-content-list} {
    display: block !important;
}

All that was left was to compile my CSS, and now it works as intended.

Install the extension Browse the code