Fossil SCM

Improved the tab control styling, and no longer use buttons so that their :focus style doesn't break the appearance. Fixed some CSS which no longer matched after removal of the outer wrapping FORM element.

stephan 2020-05-06 22:57 fileedit-ajaxify
Commit a84f6458c04800ee0bd8b1843012eb8e49a7987c2b29c91ad848a99180689e8b
Parent 6b7805e056ddd9e…
4 files changed +24 -15 +13 +5 -3 +3 -2
~ src/default_css.txt ~ src/fileedit.c ~ src/fossil.page.fileedit.js ~ src/fossil.tabs.js
M src/default_css.txt
+24 -15
--- src/default_css.txt
+++ src/default_css.txt
@@ -917,50 +917,59 @@
917917
 flex-direction: row;
918918
 flex: 1 10 auto;
919919
 align-self: stretch;
920920
 flex-wrap: wrap;
921921
 }
922
-.tab-container > .tab-bar > button {
922
+.tab-container > .tab-bar > .tab-button {
923
+ display: inline-block;
923924
 border-radius: 0.5em 0.5em 0 0;
924
- margin: 0.5em 0.5em 0 0.5em;
925
+ margin: 0 0.1em;
926
+ padding: 0.25em 0.75em;
925927
 align-self: baseline;
928
+ border-color: inherit;
929
+ border-width: 1px;
930
+ border-bottom: none;
931
+ border-top-style: inset;
932
+ border-left-style: inset;
933
+ border-right-style: inset;
934
+ cursor: pointer;
935
+ opacity: 0.6;
926936
 }
927
-.tab-container > .tab-bar > button.selected {
928
- font-style: italic;
929
- font-weight: bold;
930
- margin: 0 0.5em;
937
+.tab-container > .tab-bar > .tab-button.selected {
931938
 text-decoration: underline;
939
+ opacity: 1.0;
940
+ border-top-style: outset;
941
+ border-left-style: outset;
942
+ border-right-style: outset;
932943
 }
933944
 //////////////////////////////////
934945
 // Styles for /fileedit:
935
-form.fileedit textarea {
946
+textarea.fileedit {
936947
 font-family: monospace;
937948
 width: 100%;
949
+ flex: 10 1 auto;
938950
 }
939
-form.fileedit fieldset {
951
+body.fileedit fieldset {
940952
 margin: 0.5em 0 0.5em 0;
941953
 border-radius: 0.5em;
942954
 border-color: inherit;
943955
 border-width: 1px;
944956
 font-size: 85%;
945957
 }
946
-form.fileedit fieldset > legend {
958
+body.fileedit fieldset > legend {
947959
 margin: 0 0 0 1em;
948960
 padding: 0 0.5em 0 0.5em;
949961
 }
950
-form.fileedit fieldset > div {
962
+body.fileedit fieldset > div {
951963
 margin: 0 0.25em 0.25em 0.25em;
952964
 }
953
-form.fileedit fieldset > div > .input-with-label {
965
+body.fileedit fieldset > div > .input-with-label {
954966
 margin: 0.25em 0.5em;
955967
 }
956
-form.fileedit fieldset > div > button {
968
+body.fileedit fieldset > div > button {
957969
 margin: 0.25em 0.5em;
958970
 }
959
-form.fileedit input:invalid {
960
- border-left: 0.2em dashed red;
961
-}
962971
 .fileedit-hint {
963972
 font-size: 80%;
964973
 opacity: 0.75;
965974
 }
966975
 .fileedit-error-report {
967976
--- src/default_css.txt
+++ src/default_css.txt
@@ -917,50 +917,59 @@
917 flex-direction: row;
918 flex: 1 10 auto;
919 align-self: stretch;
920 flex-wrap: wrap;
921 }
922 .tab-container > .tab-bar > button {
 
923 border-radius: 0.5em 0.5em 0 0;
924 margin: 0.5em 0.5em 0 0.5em;
 
925 align-self: baseline;
 
 
 
 
 
 
 
 
926 }
927 .tab-container > .tab-bar > button.selected {
928 font-style: italic;
929 font-weight: bold;
930 margin: 0 0.5em;
931 text-decoration: underline;
 
 
 
 
932 }
933 //////////////////////////////////
934 // Styles for /fileedit:
935 form.fileedit textarea {
936 font-family: monospace;
937 width: 100%;
 
938 }
939 form.fileedit fieldset {
940 margin: 0.5em 0 0.5em 0;
941 border-radius: 0.5em;
942 border-color: inherit;
943 border-width: 1px;
944 font-size: 85%;
945 }
946 form.fileedit fieldset > legend {
947 margin: 0 0 0 1em;
948 padding: 0 0.5em 0 0.5em;
949 }
950 form.fileedit fieldset > div {
951 margin: 0 0.25em 0.25em 0.25em;
952 }
953 form.fileedit fieldset > div > .input-with-label {
954 margin: 0.25em 0.5em;
955 }
956 form.fileedit fieldset > div > button {
957 margin: 0.25em 0.5em;
958 }
959 form.fileedit input:invalid {
960 border-left: 0.2em dashed red;
961 }
962 .fileedit-hint {
963 font-size: 80%;
964 opacity: 0.75;
965 }
966 .fileedit-error-report {
967
--- src/default_css.txt
+++ src/default_css.txt
@@ -917,50 +917,59 @@
917 flex-direction: row;
918 flex: 1 10 auto;
919 align-self: stretch;
920 flex-wrap: wrap;
921 }
922 .tab-container > .tab-bar > .tab-button {
923 display: inline-block;
924 border-radius: 0.5em 0.5em 0 0;
925 margin: 0 0.1em;
926 padding: 0.25em 0.75em;
927 align-self: baseline;
928 border-color: inherit;
929 border-width: 1px;
930 border-bottom: none;
931 border-top-style: inset;
932 border-left-style: inset;
933 border-right-style: inset;
934 cursor: pointer;
935 opacity: 0.6;
936 }
937 .tab-container > .tab-bar > .tab-button.selected {
 
 
 
938 text-decoration: underline;
939 opacity: 1.0;
940 border-top-style: outset;
941 border-left-style: outset;
942 border-right-style: outset;
943 }
944 //////////////////////////////////
945 // Styles for /fileedit:
946 textarea.fileedit {
947 font-family: monospace;
948 width: 100%;
949 flex: 10 1 auto;
950 }
951 body.fileedit fieldset {
952 margin: 0.5em 0 0.5em 0;
953 border-radius: 0.5em;
954 border-color: inherit;
955 border-width: 1px;
956 font-size: 85%;
957 }
958 body.fileedit fieldset > legend {
959 margin: 0 0 0 1em;
960 padding: 0 0.5em 0 0.5em;
961 }
962 body.fileedit fieldset > div {
963 margin: 0 0.25em 0.25em 0.25em;
964 }
965 body.fileedit fieldset > div > .input-with-label {
966 margin: 0.25em 0.5em;
967 }
968 body.fileedit fieldset > div > button {
969 margin: 0.25em 0.5em;
970 }
 
 
 
971 .fileedit-hint {
972 font-size: 80%;
973 opacity: 0.75;
974 }
975 .fileedit-error-report {
976
M src/fileedit.c
+13
--- src/fileedit.c
+++ src/fileedit.c
@@ -1517,10 +1517,22 @@
15171517
 ** thus have already caused us to skipped to the end of the page to
15181518
 ** render the errors. Any up-coming errors, barring malloc failure
15191519
 ** or similar, are not "that" fatal. We can/should continue
15201520
 ** rendering the page, then output the error message at the end.
15211521
 ********************************************************************/
1522
+
1523
+ {
1524
+ /* The CSS for this page lives in a common file but much of it we
1525
+ ** don't want inadvertently being used by other pages. We don't
1526
+ ** have a common, page-specific container we can filter our CSS
1527
+ ** selectors, but we do have the BODY, which we can decorate with
1528
+ ** whatever CSS we wish...
1529
+ */
1530
+ style_emit_script_tag(0,0);
1531
+ CX("document.body.classList.add('fileedit');\n");
1532
+ style_emit_script_tag(1,0);
1533
+ }
15221534
 CX("<p>This page is <em>NEW AND EXPERIMENTAL</em>. "
15231535
 "USE AT YOUR OWN RISK, preferably on a test "
15241536
 "repo.</p>\n");
15251537
15261538
 /******* Hidden fields *******/
@@ -1588,10 +1600,11 @@
15881600
 "150%", 150, "175%", 175,
15891601
 "200%", 200, NULL);
15901602
 CX("</div>");
15911603
 CX("<div class='flex-container row'>");
15921604
 CX("<textarea name='content' id='fileedit-content-editor' "
1605
+ "class='fileedit' "
15931606
 "rows='20' cols='80'>");
15941607
 CX("Loading...");
15951608
 CX("</textarea>");
15961609
 CX("</div>"/*textarea wrapper*/);
15971610
 CX("</div>"/*#tab-file-content*/);
15981611
--- src/fileedit.c
+++ src/fileedit.c
@@ -1517,10 +1517,22 @@
1517 ** thus have already caused us to skipped to the end of the page to
1518 ** render the errors. Any up-coming errors, barring malloc failure
1519 ** or similar, are not "that" fatal. We can/should continue
1520 ** rendering the page, then output the error message at the end.
1521 ********************************************************************/
 
 
 
 
 
 
 
 
 
 
 
 
1522 CX("<p>This page is <em>NEW AND EXPERIMENTAL</em>. "
1523 "USE AT YOUR OWN RISK, preferably on a test "
1524 "repo.</p>\n");
1525
1526 /******* Hidden fields *******/
@@ -1588,10 +1600,11 @@
1588 "150%", 150, "175%", 175,
1589 "200%", 200, NULL);
1590 CX("</div>");
1591 CX("<div class='flex-container row'>");
1592 CX("<textarea name='content' id='fileedit-content-editor' "
 
1593 "rows='20' cols='80'>");
1594 CX("Loading...");
1595 CX("</textarea>");
1596 CX("</div>"/*textarea wrapper*/);
1597 CX("</div>"/*#tab-file-content*/);
1598
--- src/fileedit.c
+++ src/fileedit.c
@@ -1517,10 +1517,22 @@
1517 ** thus have already caused us to skipped to the end of the page to
1518 ** render the errors. Any up-coming errors, barring malloc failure
1519 ** or similar, are not "that" fatal. We can/should continue
1520 ** rendering the page, then output the error message at the end.
1521 ********************************************************************/
1522
1523 {
1524 /* The CSS for this page lives in a common file but much of it we
1525 ** don't want inadvertently being used by other pages. We don't
1526 ** have a common, page-specific container we can filter our CSS
1527 ** selectors, but we do have the BODY, which we can decorate with
1528 ** whatever CSS we wish...
1529 */
1530 style_emit_script_tag(0,0);
1531 CX("document.body.classList.add('fileedit');\n");
1532 style_emit_script_tag(1,0);
1533 }
1534 CX("<p>This page is <em>NEW AND EXPERIMENTAL</em>. "
1535 "USE AT YOUR OWN RISK, preferably on a test "
1536 "repo.</p>\n");
1537
1538 /******* Hidden fields *******/
@@ -1588,10 +1600,11 @@
1600 "150%", 150, "175%", 175,
1601 "200%", 200, NULL);
1602 CX("</div>");
1603 CX("<div class='flex-container row'>");
1604 CX("<textarea name='content' id='fileedit-content-editor' "
1605 "class='fileedit' "
1606 "rows='20' cols='80'>");
1607 CX("Loading...");
1608 CX("</textarea>");
1609 CX("</div>"/*textarea wrapper*/);
1610 CX("</div>"/*#tab-file-content*/);
1611
M src/fossil.page.fileedit.js
+5 -3
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -92,13 +92,14 @@
9292
 );
9393
 const selectFontSize = E('select[name=editor_font_size]');
9494
 if(selectFontSize){
9595
 selectFontSize.addEventListener(
9696
 "change",function(e){
97
- P.e.taEditor.className = e.target.className.replace(
97
+ const ed = P.e.taEditor;
98
+ ed.className = ed.className.replace(
9899
 /\bfont-size-\d+/g, '' );
99
- P.e.taEditor.classList.add('font-size-'+e.target.value);
100
+ ed.classList.add('font-size-'+e.target.value);
100101
 }, false
101102
 );
102103
 selectFontSize.dispatchEvent(
103104
 // Force UI update
104105
 new Event('change',{target:selectFontSize})
@@ -189,15 +190,16 @@
189190
 if('string'===typeof c){
190191
 target.innerHTML = c;
191192
 }
192193
 if(switchToTab) self.tabs.switchToTab(self.e.tabs.preview);
193194
 };
195
+ const content = this.e.taEditor.value;
194196
 if(!content){
195197
 updateView('');
196198
 return this;
197199
 }
198
- this._postPreview(this.e.taEditor.value, updateView);
200
+ this._postPreview(content, updateView);
199201
 return this;
200202
 };
201203
202204
 /**
203205
 Callback for use with F.connectPagePreviewers()
204206
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -92,13 +92,14 @@
92 );
93 const selectFontSize = E('select[name=editor_font_size]');
94 if(selectFontSize){
95 selectFontSize.addEventListener(
96 "change",function(e){
97 P.e.taEditor.className = e.target.className.replace(
 
98 /\bfont-size-\d+/g, '' );
99 P.e.taEditor.classList.add('font-size-'+e.target.value);
100 }, false
101 );
102 selectFontSize.dispatchEvent(
103 // Force UI update
104 new Event('change',{target:selectFontSize})
@@ -189,15 +190,16 @@
189 if('string'===typeof c){
190 target.innerHTML = c;
191 }
192 if(switchToTab) self.tabs.switchToTab(self.e.tabs.preview);
193 };
 
194 if(!content){
195 updateView('');
196 return this;
197 }
198 this._postPreview(this.e.taEditor.value, updateView);
199 return this;
200 };
201
202 /**
203 Callback for use with F.connectPagePreviewers()
204
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -92,13 +92,14 @@
92 );
93 const selectFontSize = E('select[name=editor_font_size]');
94 if(selectFontSize){
95 selectFontSize.addEventListener(
96 "change",function(e){
97 const ed = P.e.taEditor;
98 ed.className = ed.className.replace(
99 /\bfont-size-\d+/g, '' );
100 ed.classList.add('font-size-'+e.target.value);
101 }, false
102 );
103 selectFontSize.dispatchEvent(
104 // Force UI update
105 new Event('change',{target:selectFontSize})
@@ -189,15 +190,16 @@
190 if('string'===typeof c){
191 target.innerHTML = c;
192 }
193 if(switchToTab) self.tabs.switchToTab(self.e.tabs.preview);
194 };
195 const content = this.e.taEditor.value;
196 if(!content){
197 updateView('');
198 return this;
199 }
200 this._postPreview(content, updateView);
201 return this;
202 };
203
204 /**
205 Callback for use with F.connectPagePreviewers()
206
M src/fossil.tabs.js
+3 -2
--- src/fossil.tabs.js
+++ src/fossil.tabs.js
@@ -53,11 +53,12 @@
5353
5454
 DOM elements of potential interest to users:
5555
5656
 this.e.container = the outermost container element.
5757
58
- this.e.tabBar = the button bar
58
+ this.e.tabBar = the button bar. Each "button" (whether it's a
59
+ buttor not is unspecified) has a class of .tab-button.
5960
6061
 this.e.tabs = the parent for all of the tab elements.
6162
6263
 It is legal, within reason, to manipulate these a bit, in
6364
 particular this.e.container, e.g. by adding more children to
@@ -114,11 +115,11 @@
114115
 }
115116
 tab = tabArg(tab);
116117
 tab.remove();
117118
 D.append(this.e.tabs, D.addClass(tab,'tab-panel'));
118119
 const lbl = tab.dataset.tabLabel || 'Tab #'+(this.e.tabs.childNodes.length-1);
119
- const btn = D.button(lbl);
120
+ const btn = D.addClass(D.append(D.span(), lbl), 'tab-button');
120121
 D.append(this.e.tabBar,btn);
121122
 btn.$manager = this;
122123
 btn.$tab = tab;
123124
 btn.addEventListener('click', f.click, false);
124125
 return this;
125126
--- src/fossil.tabs.js
+++ src/fossil.tabs.js
@@ -53,11 +53,12 @@
53
54 DOM elements of potential interest to users:
55
56 this.e.container = the outermost container element.
57
58 this.e.tabBar = the button bar
 
59
60 this.e.tabs = the parent for all of the tab elements.
61
62 It is legal, within reason, to manipulate these a bit, in
63 particular this.e.container, e.g. by adding more children to
@@ -114,11 +115,11 @@
114 }
115 tab = tabArg(tab);
116 tab.remove();
117 D.append(this.e.tabs, D.addClass(tab,'tab-panel'));
118 const lbl = tab.dataset.tabLabel || 'Tab #'+(this.e.tabs.childNodes.length-1);
119 const btn = D.button(lbl);
120 D.append(this.e.tabBar,btn);
121 btn.$manager = this;
122 btn.$tab = tab;
123 btn.addEventListener('click', f.click, false);
124 return this;
125
--- src/fossil.tabs.js
+++ src/fossil.tabs.js
@@ -53,11 +53,12 @@
53
54 DOM elements of potential interest to users:
55
56 this.e.container = the outermost container element.
57
58 this.e.tabBar = the button bar. Each "button" (whether it's a
59 buttor not is unspecified) has a class of .tab-button.
60
61 this.e.tabs = the parent for all of the tab elements.
62
63 It is legal, within reason, to manipulate these a bit, in
64 particular this.e.container, e.g. by adding more children to
@@ -114,11 +115,11 @@
115 }
116 tab = tabArg(tab);
117 tab.remove();
118 D.append(this.e.tabs, D.addClass(tab,'tab-panel'));
119 const lbl = tab.dataset.tabLabel || 'Tab #'+(this.e.tabs.childNodes.length-1);
120 const btn = D.addClass(D.append(D.span(), lbl), 'tab-button');
121 D.append(this.e.tabBar,btn);
122 btn.$manager = this;
123 btn.$tab = tab;
124 btn.addEventListener('click', f.click, false);
125 return this;
126

Keyboard Shortcuts

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