Fossil

Changes To branch/tooltip-copyhash
Login

Changes To branch/tooltip-copyhash

Changes to "branch/tooltip-copyhash" between 2019-06-11 07:20:54 and 2019-07-26 08:58:41

1
2
3
4
5
6

7
8
9
10
11
12
13
1
2
3
4
5

6
7
8
9
10
11
12
13





-
+







__TODO:__

* ☑️ <del>Trim the length of the copied hashes to the limit defined by the [`hash-digits`](/help?cmd=hash-digits) setting.</del>
* ☑️ <del>Also apply the same limit to the link text for hashes?</del>
* ☑️ <del>Reevaluate the position of the "Copy Hash" icon on the tooltip.</del>
* Refresh my trigonometry skills, and calculate the outline of the icon more accurately.
* ❌ <del>Refresh my trigonometry skills, and calculate the outline of the icon more accurately.</del> See comment below.

__Copy text to clipboard using Javascript:__

* <https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript>
* <https://stackoverflow.com/questions/46275918/copy-plain-text-with-no-rich-styles-to-clipboard-without-losing-focus>
* <https://blog.codeinside.eu/2016/05/12/copy-to-clipboard-with-javascript/>
* <https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/>
45
46
47
48
49
50
51
























































52
53
54
55
56
57
58
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114







+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+







    <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 64 (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)"