Fossil

Timeline
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

About branch tooltip-copyhash

TODO:

  • ☑️ Trim the length of the copied hashes to the limit defined by the hash-digits setting.
  • ☑️ Also apply the same limit to the link text for hashes?
  • ☑️ Reevaluate the position of the "Copy Hash" icon on the tooltip.
  • Refresh my trigonometry skills, and calculate the outline of the icon more accurately. See comment below.

Copy text to clipboard using Javascript:

Uncompressed source code for the "Copy Hash" icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="64" height="64"> <path style="fill: black; opacity:0" d="M 14 14 H 0 V 0 h 14 v 14 z" /> <path style="fill:rgb(240,240,240)" d="M 1 0 h 6.6 l 2 2 h 1 l 3.4 3.4 v 8.6 h -10 v -2 h -3 z" /> <path style="fill:rgb(64,64,64)" d="M 2 1 h 5 l 3 3 v 7 h -8 z" /> <path style="fill:rgb(248,248,248)" d="M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z" /> <path style="fill:rgb(80,128,208)" d="M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" /> <path style="fill:rgb(64,64,64)" d="M 5 3 h 5 l 3 3 v 7 h -8 z" /> <path style="fill:rgb(248,248,248)" d="M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z" /> <path style="fill:rgb(80,128,208)" d="M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" /> </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path
  style="fill: black; opacity:0"
  d="M 14 14 H 0 V 0 h 14 v 14 z" />
<path
  style="fill:rgb(240,240,240)"
  d="M 1 0 h 6.6 l 2 2 h 1 l 3.4 3.4 v 8.6 h -10 v -2 h -3 z" />
<path
  style="fill:rgb(64,64,64)"
  d="M 2 1 h 5 l 3 3 v 7 h -8 z" />
<path
  style="fill:rgb(248,248,248)"
  d="M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z" />
<path
  style="fill:rgb(80,128,208)"
  d="M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" />
<path
  style="fill:rgb(64,64,64)"
  d="M 5 3 h 5 l 3 3 v 7 h -8 z" />
<path
  style="fill:rgb(248,248,248)"
  d="M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z" />
<path
  style="fill:rgb(80,128,208)"
  d="M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" />
</svg>

Following are example and source code for the icon with the outline calculated more accurately, i.e. narrower on the sloping side. Yet it turns out the original variant (drawn by eye) looks better at small sizes of 14 to ≈28 (device) pixels on dark backgrounds, due to the resulting softer anti-aliasing on the sloping side.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="64" height="64"> <path style="fill: black; opacity:0" d="M 14 14 H 0 V 0 h 14 v 14 z" /> <path style="fill:rgb(240,240,240)" d="M 1 0 h 6.42 l 2 2 h 1 l 3.58 3.58 v 8.42 h -10 v -2 h -3 z" /> <path style="fill:rgb(64,64,64)" d="M 2 1 h 5 l 3 3 v 7 h -8 z" /> <path style="fill:rgb(248,248,248)" d="M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z" /> <path style="fill:rgb(80,128,208)" d="M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" /> <path style="fill:rgb(64,64,64)" d="M 5 3 h 5 l 3 3 v 7 h -8 z" /> <path style="fill:rgb(248,248,248)" d="M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z" /> <path style="fill:rgb(80,128,208)" d="M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" /> </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path
  style="fill: black; opacity:0"
  d="M 14 14 H 0 V 0 h 14 v 14 z" />
<path
  style="fill:rgb(240,240,240)"
  d="M 1 0 h 6.42 l 2 2 h 1 l 3.58 3.58 v 8.42 h -10 v -2 h -3 z" />
<path
  style="fill:rgb(64,64,64)"
  d="M 2 1 h 5 l 3 3 v 7 h -8 z" />
<path
  style="fill:rgb(248,248,248)"
  d="M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z" />
<path
  style="fill:rgb(80,128,208)"
  d="M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" />
<path
  style="fill:rgb(64,64,64)"
  d="M 5 3 h 5 l 3 3 v 7 h -8 z" />
<path
  style="fill:rgb(248,248,248)"
  d="M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z" />
<path
  style="fill:rgb(80,128,208)"
  d="M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" />
</svg>
23 check-ins related to "tooltip-copyhash"
2019-06-03
09:10
Cherry-pick [787650c36a]: Minimize impact of the SVG icon on line height. (closed check-in: 0a9f12ce66 ... user: florian tags: copybtn.js-demonstration)
08:51
Cherry-pick [2196555351]: Use the longer hash prefix for the click-to-copy. (closed check-in: 21f38e85b3 ... user: florian tags: tooltip-copyhash)
08:48
Minimize impact of the SVG icon on line height. (check-in: 787650c36a ... user: florian tags: tooltip-copyhash)
2019-06-02
12:36
Cherry-pick [6a54cf2939]: Trim leading and trailing white space from the text to be copied to clipboard (do this in Javascript, so no need to care about the extra white space when generating HTML elements). (check-in: 698245db8d ... user: florian tags: copybtn.js-demonstration)
12:32
Trim leading and trailing white space from the text to be copied to clipboard (do this in Javascript, so no need to care about the extra white space when generating HTML elements). (check-in: 6a54cf2939 ... user: florian tags: tooltip-copyhash)
2019-06-01
00:52
Use the longer hash prefix for the click-to-copy. (check-in: 2196555351 ... user: drh tags: copybtn.js-demonstration)
2019-05-31
16:36
Demonstration of the copybtn.js module beyond tooltips: add a copy button near the full-length hash of check-ins on the /info page, to copy only the hash prefix when clicked. (check-in: 46f91da1a8 ... user: florian tags: copybtn.js-demonstration)
15:34
Auto-init HTML-defined buttons during the "DOMContentLoaded" event, so no more Javascript code required, apart from loading the copybtn.js module. (check-in: 148b01359c ... user: florian tags: tooltip-copyhash)
15:01
Revamp the comments, and refactor the code in preparation for an auto-init functionality for HTML-defined buttons. (check-in: 7fddf96cd6 ... user: florian tags: tooltip-copyhash)
14:44
Check that the value of the "data-copylength" attribute is a positive number prior to chopping the text. (check-in: b9823751c9 ... user: florian tags: tooltip-copyhash)
2019-05-30
11:33
Add the "data-copylength" attribute to control the length of the copied text. (Rationale: Allow copying just the shortened hash prefixes from elements displaying the full-length hashes, because the short forms are preferred when building command-lines or URLs, and because the full-length hashes are already much easier to copy.) (check-in: 2e17a063a2 ... user: florian tags: tooltip-copyhash)
11:04
Revert the manual edits to the makefiles from [f6fcbf292b], and only keep the changes made by the src/makemake.tcl script. (check-in: 2002a50893 ... user: florian tags: tooltip-copyhash)
2019-05-29
14:14
Apply the "hash-digits" setting to limit the length of hash prefixes displayed on tooltips. (check-in: 90e4f5ae9f ... user: florian tags: tooltip-copyhash)
14:02
Move the "Copy Button" functionality to a separate Javascript module, to be loaded and used independently from the timeline graph module. (check-in: f6fcbf292b ... user: florian tags: tooltip-copyhash)
12:55
More consistent naming of variables in the newly added Javascript part. (check-in: c887a1bb00 ... user: florian tags: tooltip-copyhash)
12:47
Give a visual feedback when the copy icon is clicked. (check-in: 3783706f67 ... user: florian tags: tooltip-copyhash)
12:39
Introduce the "copy-button" CSS class with the SVG icon as the background image, to simplify the Javascript part. (check-in: b0795ff620 ... user: florian tags: tooltip-copyhash)
2019-05-28
12:32
Cherry-pick [ac199e7a8a]: Explicitly query the client mouse coordinates, to fix the positioning of tooltips for nodes in IE. (check-in: 3b5e74c4ca ... user: florian tags: tooltip-copyhash)
12:16
Explicitly query the client mouse coordinates, to fix the positioning of tooltips for nodes in IE. (closed check-in: ac199e7a8a ... user: florian tags: tooltip-experiments)
08:35
Tune the SVG image data URI for IE: remove the (invalid) encoding tag, and URL-encode the smaller than and greater than signs. (check-in: c033389140 ... user: florian tags: tooltip-copyhash)
08:11
Move the code to setup the "Copy Hash" icon to a separate function, and link the icon to the target element through a "data-copytarget" attribute, so that "Copy Hash" icons could be added in other places than just tooltips. (check-in: 54f0ae7813 ... user: florian tags: tooltip-copyhash)
2019-05-27
09:19
Add a "Copy Hash" icon to the tooltip, to copy the hash or branch name of the underlying element to the clipboard. See the wiki page linked to this branch for more information. (check-in: 371943c936 ... user: florian tags: tooltip-copyhash)
06:58
Ensure the close timer is started for tooltips belonging to nodes instead of rails, and prevent an out-of-bounds array access for double-clicks outside of rails. (check-in: d57c1a797c ... user: florian tags: tooltip-experiments)