talex5 / cuekeeper

Browser-based GTD (TODO list) system. No server needed.
http://roscidus.com/blog/blog/2015/04/28/cuekeeper-gitting-things-done-in-the-browser/
GNU Lesser General Public License v2.1
289 stars 23 forks source link

Style fields that open menus to look more like drop-downs #8

Open roryokane opened 9 years ago

roryokane commented 9 years ago

As you wrote in CueKeeper: Gitting Things Done in the Browser:

  • The UI needs some work. In particular, could someone find a tasteful way to style the fields in the panels so they look like drop-downs? I keep clicking on the item’s name instead of the (show) button by mistake (although this might be because I used to have it the other way around, with a (change) button, but that was worse).

I want to contribute a starting point for the style:

starting point for field drop-down styling

.ck-item.ck-project::after, .ck-item.ck-context::after {
  content: '▾';
  color: #aaa;
  padding-left: 0.15em;
}

This is just a starting point. You can probably improve this styling to better communicate that clicking the field opens a drop-down of replacement values, as opposed to opening a drop-down of actions like “delete”.

The CSS selector in my example code is incomplete. You will probably need to create a new class to mark all drop-down fields with, rather than trying to write a selector with existing classes.