Idea to fix the color field from always showing black

#21

And the very dropdown with the prenamed colors also features this!

#22

The dropdown list also has the same contrast issue, but the interaction is just “click to select” so it’s not as critical as when you are typing into an edit field where there is much more complex interaction.

Even though some people are “touch typists” that don’t need to look at the text as they type, most people do look at the text to provide feedback and help them notice if they’ve made a “typo”. They may also use arrow keys to move the input cursor or highlight parts of the input for cut/copy/paste.

-e

#23

A bit “off-topic”, but I think this type of user interface improvement is something that should be part of the 5.4.0 (or subsequent 5.4.1) update.

#24

Here’s a css hack that produces this:

image

pros:

  • Solves the OP i.e it does not show “black”
  • Presents the value

cons

  • You can’t type a new value directly there (same prob in TW’s current solution)
  • Filters in stylesheets, viewtemplates etc run persistently in the background (so it costs memory… right?)

title: $:/.stylesheet/colorfield
tags: $:/tags/Stylesheet
type: text/vnd.tiddlywiki
text:
\procedure esc() {{{ [<currentTiddler>escapecss[]] }}}
<pre>
.tc-edit-field-value [type="color"] {
	position:relative;
}
.tc-edit-field-value [type="color"]:before {
	content:"&nbsp;";
	position:absolute;
	width:calc(100% - 10px);
	height:calc(100% - 10px);
	margin:3px 2px;
}
.tc-edit-field-value [type="color"]:after {
	position:absolute;
	margin-top:-1.5em;
	padding:0 3px;
	background:white; color:black;
}
<$list filter="""[all[tiddlers+shadows]has[color]]""">
[data-tiddler-title="<<esc>>"] .tc-edit-field-value [type="color"]:before {
	background:{{!!color}};
}
[data-tiddler-title="<<esc>>"] .tc-edit-field-value [type="color"]:after {
	content:"{{!!color}}";
}
</$list>
</pre>
2 Likes