Fossil SCM

Minor CSS and layout tweaks to /pikchrshow layout. Preview mode toggle is now disabled/enabled, rather than hidden/revealed, to help reduce UI jumpiness.

stephan 2020-09-11 00:06 trunk
Commit 2b556f1cc81aeaa269fab0a3e025aa9b78a19a1d8d0dfde362dedcb08de3d87c
Parent a5c685fa0d681d4…
2 files changed +6 -5 +7 -1
~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c
M src/fossil.page.pikchrshow.js
+6 -5
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -91,11 +91,11 @@
9191
 D.addClass(preTgt, 'error');
9292
 this.e.previewModeLabel.innerText = "Error";
9393
 return;
9494
 }
9595
 D.removeClass(preTgt, 'error');
96
- D.removeClass(this.e.btnTogglePreviewMode, 'hidden');
96
+ D.enable(this.e.btnTogglePreviewMode);
9797
 let label;
9898
 switch(this.previewMode){
9999
 case 0:
100100
 label = "Rendered SVG";
101101
 preTgt.innerHTML = this.response.raw;
@@ -131,13 +131,15 @@
131131
132132
 /** Fetches the preview from the server and updates the preview to
133133
 the rendered SVG content or error report. */
134134
 P.preview = function fp(){
135135
 if(!fp.hasOwnProperty('toDisable')){
136
- fp.toDisable = [ /* elements to disable during ajax operations */
136
+ fp.toDisable = [
137
+ /* input elements to disable during ajax operations */
137138
 this.e.btnSubmit, this.e.taContent,
138
- this.e.btnTogglePreviewMode, this.e.selectMarkupAlignment,
139
+ this.e.selectMarkupAlignment
140
+ /* this.e.btnTogglePreviewMode is handled separately */
139141
 ];
140142
 fp.target = this.e.previewTarget;
141143
 fp.updateView = function(c,isError){
142144
 P.previewMode = 0;
143145
 P.response.raw = c;
@@ -144,12 +146,11 @@
144146
 P.response.isError = isError;
145147
 D.enable(fp.toDisable);
146148
 P.renderPreview();
147149
 };
148150
 }
149
- D.disable(fp.toDisable);
150
- D.addClass(this.e.btnTogglePreviewMode, 'hidden');
151
+ D.disable(fp.toDisable, this.e.btnTogglePreviewMode);
151152
 const content = this.e.taContent.value.trim();
152153
 this.response.raw = undefined;
153154
 this.response.inputText = content;
154155
 if(!content){
155156
 fp.updateView("No pikchr content!",true);
156157
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -91,11 +91,11 @@
91 D.addClass(preTgt, 'error');
92 this.e.previewModeLabel.innerText = "Error";
93 return;
94 }
95 D.removeClass(preTgt, 'error');
96 D.removeClass(this.e.btnTogglePreviewMode, 'hidden');
97 let label;
98 switch(this.previewMode){
99 case 0:
100 label = "Rendered SVG";
101 preTgt.innerHTML = this.response.raw;
@@ -131,13 +131,15 @@
131
132 /** Fetches the preview from the server and updates the preview to
133 the rendered SVG content or error report. */
134 P.preview = function fp(){
135 if(!fp.hasOwnProperty('toDisable')){
136 fp.toDisable = [ /* elements to disable during ajax operations */
 
137 this.e.btnSubmit, this.e.taContent,
138 this.e.btnTogglePreviewMode, this.e.selectMarkupAlignment,
 
139 ];
140 fp.target = this.e.previewTarget;
141 fp.updateView = function(c,isError){
142 P.previewMode = 0;
143 P.response.raw = c;
@@ -144,12 +146,11 @@
144 P.response.isError = isError;
145 D.enable(fp.toDisable);
146 P.renderPreview();
147 };
148 }
149 D.disable(fp.toDisable);
150 D.addClass(this.e.btnTogglePreviewMode, 'hidden');
151 const content = this.e.taContent.value.trim();
152 this.response.raw = undefined;
153 this.response.inputText = content;
154 if(!content){
155 fp.updateView("No pikchr content!",true);
156
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -91,11 +91,11 @@
91 D.addClass(preTgt, 'error');
92 this.e.previewModeLabel.innerText = "Error";
93 return;
94 }
95 D.removeClass(preTgt, 'error');
96 D.enable(this.e.btnTogglePreviewMode);
97 let label;
98 switch(this.previewMode){
99 case 0:
100 label = "Rendered SVG";
101 preTgt.innerHTML = this.response.raw;
@@ -131,13 +131,15 @@
131
132 /** Fetches the preview from the server and updates the preview to
133 the rendered SVG content or error report. */
134 P.preview = function fp(){
135 if(!fp.hasOwnProperty('toDisable')){
136 fp.toDisable = [
137 /* input elements to disable during ajax operations */
138 this.e.btnSubmit, this.e.taContent,
139 this.e.selectMarkupAlignment
140 /* this.e.btnTogglePreviewMode is handled separately */
141 ];
142 fp.target = this.e.previewTarget;
143 fp.updateView = function(c,isError){
144 P.previewMode = 0;
145 P.response.raw = c;
@@ -144,12 +146,11 @@
146 P.response.isError = isError;
147 D.enable(fp.toDisable);
148 P.renderPreview();
149 };
150 }
151 D.disable(fp.toDisable, this.e.btnTogglePreviewMode);
 
152 const content = this.e.taContent.value.trim();
153 this.response.raw = undefined;
154 this.response.inputText = content;
155 if(!content){
156 fp.updateView("No pikchr content!",true);
157
M src/pikchrshow.c
+7 -1
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -72,20 +72,26 @@
7272
 CX("#sbs-wrapper {"
7373
 "display: flex; flex-direction: row; flex-wrap: wrap;"
7474
 "}");
7575
 CX("#sbs-wrapper > * {"
7676
 "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;"
77
+ "align-self: stretch;"
7778
 "}");
78
- CX("#sbs-wrapper textarea {max-width: initial}");
79
+ CX("#sbs-wrapper textarea {"
80
+ "max-width: initial; flex: 1 1 auto;"
81
+ "}");
7982
 CX("#pikchrshow-output, #pikchrshow-form"
8083
 "{display: flex; flex-direction: column; align-items: stretch;}");
8184
 CX("#pikchrshow-form > * {margin: 0.25em 0}");
8285
 CX("#pikchrshow-output {flex: 5 1 auto; padding: 0}");
8386
 CX("#pikchrshow-output > pre, "
8487
 "#pikchrshow-output > pre > div, "
8588
 "#pikchrshow-output > pre > div > pre "
8689
 "{margin: 0; padding: 0}");
90
+ CX("#pikchrshow-output > pre > div > pre "
91
+ /* Server-side error report */
92
+ "{padding: 0.5em}");
8793
 CX("#pikchrshow-controls {" /* where the buttons live */
8894
 "display: flex; flex-direction: row; "
8995
 "align-items: center; flex-wrap: wrap;"
9096
 "}");
9197
 CX("#pikchrshow-controls > * {"
9298
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -72,20 +72,26 @@
72 CX("#sbs-wrapper {"
73 "display: flex; flex-direction: row; flex-wrap: wrap;"
74 "}");
75 CX("#sbs-wrapper > * {"
76 "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;"
 
77 "}");
78 CX("#sbs-wrapper textarea {max-width: initial}");
 
 
79 CX("#pikchrshow-output, #pikchrshow-form"
80 "{display: flex; flex-direction: column; align-items: stretch;}");
81 CX("#pikchrshow-form > * {margin: 0.25em 0}");
82 CX("#pikchrshow-output {flex: 5 1 auto; padding: 0}");
83 CX("#pikchrshow-output > pre, "
84 "#pikchrshow-output > pre > div, "
85 "#pikchrshow-output > pre > div > pre "
86 "{margin: 0; padding: 0}");
 
 
 
87 CX("#pikchrshow-controls {" /* where the buttons live */
88 "display: flex; flex-direction: row; "
89 "align-items: center; flex-wrap: wrap;"
90 "}");
91 CX("#pikchrshow-controls > * {"
92
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -72,20 +72,26 @@
72 CX("#sbs-wrapper {"
73 "display: flex; flex-direction: row; flex-wrap: wrap;"
74 "}");
75 CX("#sbs-wrapper > * {"
76 "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;"
77 "align-self: stretch;"
78 "}");
79 CX("#sbs-wrapper textarea {"
80 "max-width: initial; flex: 1 1 auto;"
81 "}");
82 CX("#pikchrshow-output, #pikchrshow-form"
83 "{display: flex; flex-direction: column; align-items: stretch;}");
84 CX("#pikchrshow-form > * {margin: 0.25em 0}");
85 CX("#pikchrshow-output {flex: 5 1 auto; padding: 0}");
86 CX("#pikchrshow-output > pre, "
87 "#pikchrshow-output > pre > div, "
88 "#pikchrshow-output > pre > div > pre "
89 "{margin: 0; padding: 0}");
90 CX("#pikchrshow-output > pre > div > pre "
91 /* Server-side error report */
92 "{padding: 0.5em}");
93 CX("#pikchrshow-controls {" /* where the buttons live */
94 "display: flex; flex-direction: row; "
95 "align-items: center; flex-wrap: wrap;"
96 "}");
97 CX("#pikchrshow-controls > * {"
98

Keyboard Shortcuts

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