Fossil SCM

Found a couple snazzy icons for the pikchr view mode change button.

stephan 2020-09-15 04:42 trunk
Commit 927c90e88fba297527abfc89aad79aa072c80fbf598ed192576711873efc57f4
Parent e8f603f03a210ae…
1 file changed +20 -7
~ src/fossil.pikchr.js
M src/fossil.pikchr.js
+20 -7
--- src/fossil.pikchr.js
+++ src/fossil.pikchr.js
@@ -10,21 +10,21 @@
1010
 // Install an app-specific stylesheet, just for development, after which
1111
 // it will be moved into default.css
1212
 (function(){
1313
 const head = document.head || document.querySelector('head'),
1414
 styleTag = document.createElement('style'),
15
- wh = '1.5em' /* fixed width/height of buttons */,
15
+ wh = '1cm' /* fixed width/height of buttons */,
1616
 styleCSS = `
1717
 .pikchr-src-button {
1818
 min-height: ${wh}; max-height: ${wh};
1919
 min-width: ${wh}; max-width: ${wh};
2020
 font-size: ${wh};
2121
 position: absolute;
2222
 top: 0;
2323
 left: 0;
2424
 border: 1px solid black;
25
- background-color: rgba(255,255,0,0.2);
25
+ background-color: rgba(255,255,0,0.7);
2626
 border-radius: 0.25cm;
2727
 z-index: 50;
2828
 cursor: pointer;
2929
 text-align: center;
3030
 display: inline-flex;
@@ -31,26 +31,40 @@
3131
 align-items: center;
3232
 justify-content: center;
3333
 transform-origin: center;
3434
 transition: transform 250ms linear;
3535
 padding: 0; margin: 0;
36
+/* MIT-licensed SVG from: https://github.com/leungwensen/svg-icon/blob/master/dist/svg/ant/code.svg */
37
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 1195 1195' \
38
+xmlns='http:/\x2fwww.w3.org/2000/svg'%3e%3cpath d='M321.333 440q-9-10-22.5-10t-22.5 \
39
+10l-182 181q-9 9-9 22.5t9 22.5l182 182q9 10 22.5 10t22.5-10q10-9 10-22.5t-10-22.5l-159-159 \
40
+159-159q10-10 10-23t-10-22zm552 0q9-10 22.5-10t22.5 10l182 181q9 9 9 22.5t-9 \
41
+22.5l-182 182q-9 10-22.5 10t-22.5-10q-10-9-10-22.5t10-22.5l159-159-159-159q-10-10-10-23t10-22zm-97-180q12 \
42
+6 16 19t-2 24l-371 704q-7 12-19.5 16t-24.5-2q-11-7-15-19.5t2-24.5l371-703q6-12 \
43
+18.5-16t24.5 2z'/%3e%3c/svg%3e");
44
+ background-size: contain;
3645
 }
3746
 .pikchr-src-button.src-active {
3847
 transform: scaleX(-1);
39
-}
40
-.pikchr-src-button > span {
41
- vertical-align: middle;
48
+/* MIT-licensed SVG from: https://github.com/leungwensen/svg-icon/blob/master/dist/svg/ant/picture.svg */
49
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 1195 1195' \
50
+xmlns='http:/\x2fwww.w3.org/2000/svg'%3e%3cpath d='M1045.333 192h-896q-26 0-45 \
51
+19t-19 45v768q0 26 19 45t45 19h896q26 0 45-19t19-45V256q0-26-19-45t-45-19zm-896 \
52
+64h896v714l-236-348q-7-12-21-14t-25 7l-154 125-174-243q-10-14-28-13t-26 17l-232 \
53
+448V256zm855 768h-822l231-447 184 255 179-145zm-182-642q13 0 22.5 9.5t9.5 22.5-9.5 \
54
+22.5-22.5 9.5-22.5-9.5-9.5-22.5 9.5-22.5 22.5-9.5zm0-64q-40 0-68 28t-28 68 28 68 68 \
55
+28 68-28 28-68-28-68-68-28z'/%3e%3c/svg%3e");
4256
 }
4357
 textarea.pikchr-src-text {
4458
 box-sizing: border-box/*reduces UI shift*/;
4559
 }
4660
 .pikchr-copy-button {
4761
 min-width: ${wh}; max-width: ${wh};
4862
 min-height: ${wh}; max-height: ${wh};
4963
 display: inline-block;
5064
 position: absolute;
51
- top: calc(${wh} * 2);
65
+ top: calc(${wh} * 1.3);
5266
 left: 0;
5367
 z-index: 50;
5468
 padding: 0; margin: 0;
5569
 }
5670
 `;
@@ -120,11 +134,10 @@
120134
 parent.style.position = 'relative' /* REQUIRED for btn placement */;
121135
 const srcView = D.addClass(D.textarea(0,0,true), 'pikchr-src-text');
122136
 srcView.value = src.textContent;
123137
 const btnFlip = D.append(
124138
 D.addClass(D.span(), 'pikchr-src-button'),
125
- D.append(D.span(), "⟳")
126139
 );
127140
 const btnCopy = F.copyButton(
128141
 D.span(), {
129142
 cssClass: ['copy-button', 'pikchr-copy-button'],
130143
 extractText: function(){
131144
--- src/fossil.pikchr.js
+++ src/fossil.pikchr.js
@@ -10,21 +10,21 @@
10 // Install an app-specific stylesheet, just for development, after which
11 // it will be moved into default.css
12 (function(){
13 const head = document.head || document.querySelector('head'),
14 styleTag = document.createElement('style'),
15 wh = '1.5em' /* fixed width/height of buttons */,
16 styleCSS = `
17 .pikchr-src-button {
18 min-height: ${wh}; max-height: ${wh};
19 min-width: ${wh}; max-width: ${wh};
20 font-size: ${wh};
21 position: absolute;
22 top: 0;
23 left: 0;
24 border: 1px solid black;
25 background-color: rgba(255,255,0,0.2);
26 border-radius: 0.25cm;
27 z-index: 50;
28 cursor: pointer;
29 text-align: center;
30 display: inline-flex;
@@ -31,26 +31,40 @@
31 align-items: center;
32 justify-content: center;
33 transform-origin: center;
34 transition: transform 250ms linear;
35 padding: 0; margin: 0;
 
 
 
 
 
 
 
 
 
36 }
37 .pikchr-src-button.src-active {
38 transform: scaleX(-1);
39 }
40 .pikchr-src-button > span {
41 vertical-align: middle;
 
 
 
 
 
42 }
43 textarea.pikchr-src-text {
44 box-sizing: border-box/*reduces UI shift*/;
45 }
46 .pikchr-copy-button {
47 min-width: ${wh}; max-width: ${wh};
48 min-height: ${wh}; max-height: ${wh};
49 display: inline-block;
50 position: absolute;
51 top: calc(${wh} * 2);
52 left: 0;
53 z-index: 50;
54 padding: 0; margin: 0;
55 }
56 `;
@@ -120,11 +134,10 @@
120 parent.style.position = 'relative' /* REQUIRED for btn placement */;
121 const srcView = D.addClass(D.textarea(0,0,true), 'pikchr-src-text');
122 srcView.value = src.textContent;
123 const btnFlip = D.append(
124 D.addClass(D.span(), 'pikchr-src-button'),
125 D.append(D.span(), "⟳")
126 );
127 const btnCopy = F.copyButton(
128 D.span(), {
129 cssClass: ['copy-button', 'pikchr-copy-button'],
130 extractText: function(){
131
--- src/fossil.pikchr.js
+++ src/fossil.pikchr.js
@@ -10,21 +10,21 @@
10 // Install an app-specific stylesheet, just for development, after which
11 // it will be moved into default.css
12 (function(){
13 const head = document.head || document.querySelector('head'),
14 styleTag = document.createElement('style'),
15 wh = '1cm' /* fixed width/height of buttons */,
16 styleCSS = `
17 .pikchr-src-button {
18 min-height: ${wh}; max-height: ${wh};
19 min-width: ${wh}; max-width: ${wh};
20 font-size: ${wh};
21 position: absolute;
22 top: 0;
23 left: 0;
24 border: 1px solid black;
25 background-color: rgba(255,255,0,0.7);
26 border-radius: 0.25cm;
27 z-index: 50;
28 cursor: pointer;
29 text-align: center;
30 display: inline-flex;
@@ -31,26 +31,40 @@
31 align-items: center;
32 justify-content: center;
33 transform-origin: center;
34 transition: transform 250ms linear;
35 padding: 0; margin: 0;
36 /* MIT-licensed SVG from: https://github.com/leungwensen/svg-icon/blob/master/dist/svg/ant/code.svg */
37 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 1195 1195' \
38 xmlns='http:/\x2fwww.w3.org/2000/svg'%3e%3cpath d='M321.333 440q-9-10-22.5-10t-22.5 \
39 10l-182 181q-9 9-9 22.5t9 22.5l182 182q9 10 22.5 10t22.5-10q10-9 10-22.5t-10-22.5l-159-159 \
40 159-159q10-10 10-23t-10-22zm552 0q9-10 22.5-10t22.5 10l182 181q9 9 9 22.5t-9 \
41 22.5l-182 182q-9 10-22.5 10t-22.5-10q-10-9-10-22.5t10-22.5l159-159-159-159q-10-10-10-23t10-22zm-97-180q12 \
42 6 16 19t-2 24l-371 704q-7 12-19.5 16t-24.5-2q-11-7-15-19.5t2-24.5l371-703q6-12 \
43 18.5-16t24.5 2z'/%3e%3c/svg%3e");
44 background-size: contain;
45 }
46 .pikchr-src-button.src-active {
47 transform: scaleX(-1);
48 /* MIT-licensed SVG from: https://github.com/leungwensen/svg-icon/blob/master/dist/svg/ant/picture.svg */
49 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 1195 1195' \
50 xmlns='http:/\x2fwww.w3.org/2000/svg'%3e%3cpath d='M1045.333 192h-896q-26 0-45 \
51 19t-19 45v768q0 26 19 45t45 19h896q26 0 45-19t19-45V256q0-26-19-45t-45-19zm-896 \
52 64h896v714l-236-348q-7-12-21-14t-25 7l-154 125-174-243q-10-14-28-13t-26 17l-232 \
53 448V256zm855 768h-822l231-447 184 255 179-145zm-182-642q13 0 22.5 9.5t9.5 22.5-9.5 \
54 22.5-22.5 9.5-22.5-9.5-9.5-22.5 9.5-22.5 22.5-9.5zm0-64q-40 0-68 28t-28 68 28 68 68 \
55 28 68-28 28-68-28-68-68-28z'/%3e%3c/svg%3e");
56 }
57 textarea.pikchr-src-text {
58 box-sizing: border-box/*reduces UI shift*/;
59 }
60 .pikchr-copy-button {
61 min-width: ${wh}; max-width: ${wh};
62 min-height: ${wh}; max-height: ${wh};
63 display: inline-block;
64 position: absolute;
65 top: calc(${wh} * 1.3);
66 left: 0;
67 z-index: 50;
68 padding: 0; margin: 0;
69 }
70 `;
@@ -120,11 +134,10 @@
134 parent.style.position = 'relative' /* REQUIRED for btn placement */;
135 const srcView = D.addClass(D.textarea(0,0,true), 'pikchr-src-text');
136 srcView.value = src.textContent;
137 const btnFlip = D.append(
138 D.addClass(D.span(), 'pikchr-src-button'),
 
139 );
140 const btnCopy = F.copyButton(
141 D.span(), {
142 cssClass: ['copy-button', 'pikchr-copy-button'],
143 extractText: function(){
144

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button