talex5/cuekeeper

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

roryokane opened this issue · 0 comments

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.