Fossil SCM

pikchrshow: always show the dark-mode checkbox but default to checked only in dark mode. Minor layout improvements.

stephan 2020-09-10 07:07 pikchrshow
Commit 627ffe3cd80fcb5e370f37f3752f7f7f077e411a7dcd33fe1a2e68ab7521561d
Parent 72ac2b86a90af53…
1 file changed +28 -23
~ src/pikchrshow.c
M src/pikchrshow.c
+28 -23
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -36,54 +36,59 @@
3636
 login_check_credentials();
3737
 if( !g.perm.WrWiki && !g.perm.Write ){
3838
 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
3939
 }
4040
 isDark = skin_detail_boolean("white-foreground");
41
- flipColors = isDark ? (zContent ? P("flipcolors")!=0 : 1) : 0;
41
+ flipColors = zContent ? P("flipcolors")!=0 : isDark;
4242
 if(!zContent){
4343
 zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
4444
 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
4545
 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
4646
 "arrow <-> down from last box.s\n"
4747
 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
4848
 }
4949
 style_header("PikchrShow");
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 {"
50
+ CX("<style>");
51
+ CX("#pikchrshow-output, #pikchrshow-form"
52
+ "{display: flex; flex-direction: column;}");
53
+ CX("#pikchrshow-form > * {margin: 0.25em 0;}");
54
+ CX("#pikchrshow-output {margin-top: 1em;}");
55
+ CX("#pikchrshow-controls {"
5656
 "display: flex; flex-direction: row; align-items: center;"
57
- "}"
58
- "#pikchrshow-controls > * {margin: 0 0.5em 0 0}"
59
- "</style>");
57
+ "}");
58
+ CX("#pikchrshow-controls > * {"
59
+ "display: inline; margin-left: 0.5em;"
60
+ "}");
61
+ CX("#pikchrshow-controls > .input-with-label > * {"
62
+ "cursor: pointer;"
63
+ "}");
64
+ CX("</style>");
6065
 if( flipColors ){
6166
 /* Flip the colors to approximate a dark theme look */
6267
 CX("<style>#pikchrshow-output > svg {"
6368
 "filter: invert(1) hue-rotate(180deg);"
6469
 "}</style>");
6570
 }
6671
 CX("<form method='POST' id='pikchrshow-form' action=''>");
6772
 CX("<div>Input pikchr code and tap SUBMIT to render it:</div>");
68
- CX("<textarea name='content' rows='15' cols='80'>");
73
+ CX("<textarea name='content' rows='10' cols='80'>");
6974
 CX("%s", zContent/*safe-for-%s*/);
7075
 CX("</textarea>");
7176
 CX("<div id='pikchrshow-controls'>");
7277
 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>");
78
+ CX("<span class='input-with-label'>"
79
+ "<input id='flipcolors' type='checkbox' value='1' "
80
+ "name='flipcolors'");
81
+ if(flipColors){
82
+ CX(" checked");
83
+ }
84
+ CX("/>");
85
+ CX("<label for='flipcolors'>"
86
+ "Simulate dark color theme?</label>");
87
+ CX("</span>");
88
+ CX("</div>"/*#pikchrshow-controls*/);
89
+ CX("</form>"/*#pikchrshow-form*/);
8590
 CX("<div id='pikchrshow-output'>");
8691
 if(*zContent){
8792
 int w = 0, h = 0;
8893
 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
8994
 if( w>0 && h>0 ){
9095
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -36,54 +36,59 @@
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 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
48 }
49 style_header("PikchrShow");
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 }
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 if( w>0 && h>0 ){
90
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -36,54 +36,59 @@
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 = zContent ? P("flipcolors")!=0 : isDark;
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 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
48 }
49 style_header("PikchrShow");
50 CX("<style>");
51 CX("#pikchrshow-output, #pikchrshow-form"
52 "{display: flex; flex-direction: column;}");
53 CX("#pikchrshow-form > * {margin: 0.25em 0;}");
54 CX("#pikchrshow-output {margin-top: 1em;}");
55 CX("#pikchrshow-controls {"
56 "display: flex; flex-direction: row; align-items: center;"
57 "}");
58 CX("#pikchrshow-controls > * {"
59 "display: inline; margin-left: 0.5em;"
60 "}");
61 CX("#pikchrshow-controls > .input-with-label > * {"
62 "cursor: pointer;"
63 "}");
64 CX("</style>");
65 if( flipColors ){
66 /* Flip the colors to approximate a dark theme look */
67 CX("<style>#pikchrshow-output > svg {"
68 "filter: invert(1) hue-rotate(180deg);"
69 "}</style>");
70 }
71 CX("<form method='POST' id='pikchrshow-form' action=''>");
72 CX("<div>Input pikchr code and tap SUBMIT to render it:</div>");
73 CX("<textarea name='content' rows='10' cols='80'>");
74 CX("%s", zContent/*safe-for-%s*/);
75 CX("</textarea>");
76 CX("<div id='pikchrshow-controls'>");
77 CX("<input type='submit' value='Submit'></input>");
78 CX("<span class='input-with-label'>"
79 "<input id='flipcolors' type='checkbox' value='1' "
80 "name='flipcolors'");
81 if(flipColors){
82 CX(" checked");
83 }
84 CX("/>");
85 CX("<label for='flipcolors'>"
86 "Simulate dark color theme?</label>");
87 CX("</span>");
88 CX("</div>"/*#pikchrshow-controls*/);
89 CX("</form>"/*#pikchrshow-form*/);
90 CX("<div id='pikchrshow-output'>");
91 if(*zContent){
92 int w = 0, h = 0;
93 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
94 if( w>0 && h>0 ){
95

Keyboard Shortcuts

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