Fossil SCM

pikchrshow: when running in a white-foreground skin, offer a checkbox to toggle the dark-theme simulation on and off (defaulting to on). Hide the checkbox for light skins.

stephan 2020-09-10 05:36 pikchrshow
Commit 72ac2b86a90af5304d94c1eaa13883973ec303c968c5152d3810a1f7707baa5d
Parent c7d88f275403fba…
1 file changed +21 -2
~ src/pikchrshow.c
M src/pikchrshow.c
+21 -2
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -29,15 +29,18 @@
2929
 ** A basic pikchr code editor and renderer, allowing users with write-
3030
 ** or wiki-write permissions to experiment with pikchr code.
3131
 */
3232
 void pikchrshow_cmd(void){
3333
 const char *zContent = P("content");
34
+ int isDark, flipColors;
3435
3536
 login_check_credentials();
3637
 if( !g.perm.WrWiki && !g.perm.Write ){
3738
 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
3839
 }
40
+ isDark = skin_detail_boolean("white-foreground");
41
+ flipColors = isDark ? (zContent ? P("flipcolors")!=0 : 1) : 0;
3942
 if(!zContent){
4043
 zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
4144
 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
4245
 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
4346
 "arrow <-> down from last box.s\n"
@@ -47,12 +50,16 @@
4750
 CX("<style>"
4851
 "#pikchrshow-output, #pikchrshow-form"
4952
 "{display: flex; flex-direction: column;}"
5053
 "#pikchrshow-form > * {margin: 0.25em 0;}"
5154
 "#pikchrshow-output {margin-top: 1em;}"
55
+ "#pikchrshow-controls {"
56
+ "display: flex; flex-direction: row; align-items: center;"
57
+ "}"
58
+ "#pikchrshow-controls > * {margin: 0 0.5em 0 0}"
5259
 "</style>");
53
- if( skin_detail_boolean("white-foreground") ){
60
+ if( flipColors ){
5461
 /* Flip the colors to approximate a dark theme look */
5562
 CX("<style>#pikchrshow-output > svg {"
5663
 "filter: invert(1) hue-rotate(180deg);"
5764
 "}</style>");
5865
 }
@@ -59,11 +66,23 @@
5966
 CX("<form method='POST' id='pikchrshow-form' action=''>");
6067
 CX("<div>Input pikchr code and tap SUBMIT to render it:</div>");
6168
 CX("<textarea name='content' rows='15' cols='80'>");
6269
 CX("%s", zContent/*safe-for-%s*/);
6370
 CX("</textarea>");
64
- CX("<input type='submit'></input>");
71
+ CX("<div id='pikchrshow-controls'>");
72
+ CX("<input type='submit' value='Submit'></input>");
73
+ if(isDark){
74
+ CX("<input id='flipcolors' type='checkbox' value='1' "
75
+ "name='flipcolors'");
76
+ if(flipColors){
77
+ CX(" checked");
78
+ }
79
+ CX("/>");
80
+ CX("<label for='flipcolors'>"
81
+ "Simulate dark color theme?</label>");
82
+ }
83
+ CX("</div>");
6584
 CX("</form>");
6685
 CX("<div id='pikchrshow-output'>");
6786
 if(*zContent){
6887
 int w = 0, h = 0;
6988
 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
7089
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -29,15 +29,18 @@
29 ** A basic pikchr code editor and renderer, allowing users with write-
30 ** or wiki-write permissions to experiment with pikchr code.
31 */
32 void pikchrshow_cmd(void){
33 const char *zContent = P("content");
 
34
35 login_check_credentials();
36 if( !g.perm.WrWiki && !g.perm.Write ){
37 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
38 }
 
 
39 if(!zContent){
40 zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
41 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
42 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
43 "arrow <-> down from last box.s\n"
@@ -47,12 +50,16 @@
47 CX("<style>"
48 "#pikchrshow-output, #pikchrshow-form"
49 "{display: flex; flex-direction: column;}"
50 "#pikchrshow-form > * {margin: 0.25em 0;}"
51 "#pikchrshow-output {margin-top: 1em;}"
 
 
 
 
52 "</style>");
53 if( skin_detail_boolean("white-foreground") ){
54 /* Flip the colors to approximate a dark theme look */
55 CX("<style>#pikchrshow-output > svg {"
56 "filter: invert(1) hue-rotate(180deg);"
57 "}</style>");
58 }
@@ -59,11 +66,23 @@
59 CX("<form method='POST' id='pikchrshow-form' action=''>");
60 CX("<div>Input pikchr code and tap SUBMIT to render it:</div>");
61 CX("<textarea name='content' rows='15' cols='80'>");
62 CX("%s", zContent/*safe-for-%s*/);
63 CX("</textarea>");
64 CX("<input type='submit'></input>");
 
 
 
 
 
 
 
 
 
 
 
 
65 CX("</form>");
66 CX("<div id='pikchrshow-output'>");
67 if(*zContent){
68 int w = 0, h = 0;
69 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
70
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -29,15 +29,18 @@
29 ** A basic pikchr code editor and renderer, allowing users with write-
30 ** or wiki-write permissions to experiment with pikchr code.
31 */
32 void pikchrshow_cmd(void){
33 const char *zContent = P("content");
34 int isDark, flipColors;
35
36 login_check_credentials();
37 if( !g.perm.WrWiki && !g.perm.Write ){
38 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
39 }
40 isDark = skin_detail_boolean("white-foreground");
41 flipColors = isDark ? (zContent ? P("flipcolors")!=0 : 1) : 0;
42 if(!zContent){
43 zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
44 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
45 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
46 "arrow <-> down from last box.s\n"
@@ -47,12 +50,16 @@
50 CX("<style>"
51 "#pikchrshow-output, #pikchrshow-form"
52 "{display: flex; flex-direction: column;}"
53 "#pikchrshow-form > * {margin: 0.25em 0;}"
54 "#pikchrshow-output {margin-top: 1em;}"
55 "#pikchrshow-controls {"
56 "display: flex; flex-direction: row; align-items: center;"
57 "}"
58 "#pikchrshow-controls > * {margin: 0 0.5em 0 0}"
59 "</style>");
60 if( flipColors ){
61 /* Flip the colors to approximate a dark theme look */
62 CX("<style>#pikchrshow-output > svg {"
63 "filter: invert(1) hue-rotate(180deg);"
64 "}</style>");
65 }
@@ -59,11 +66,23 @@
66 CX("<form method='POST' id='pikchrshow-form' action=''>");
67 CX("<div>Input pikchr code and tap SUBMIT to render it:</div>");
68 CX("<textarea name='content' rows='15' cols='80'>");
69 CX("%s", zContent/*safe-for-%s*/);
70 CX("</textarea>");
71 CX("<div id='pikchrshow-controls'>");
72 CX("<input type='submit' value='Submit'></input>");
73 if(isDark){
74 CX("<input id='flipcolors' type='checkbox' value='1' "
75 "name='flipcolors'");
76 if(flipColors){
77 CX(" checked");
78 }
79 CX("/>");
80 CX("<label for='flipcolors'>"
81 "Simulate dark color theme?</label>");
82 }
83 CX("</div>");
84 CX("</form>");
85 CX("<div id='pikchrshow-output'>");
86 if(*zContent){
87 int w = 0, h = 0;
88 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
89

Keyboard Shortcuts

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