Fossil SCM

Minor style consistency/layout tweaks to wikiedit and fileedit.

stephan 2020-08-12 11:44 trunk
Commit e7c348f1d9d3731500f98a3ece44d891ecdba12d7c0d5eca20b3ecab1f902aef
Parent 5dd9ff1c0415072…
5 files changed -1 +6 -5 +4 -4 +8 -10 +14 -2
~ src/fileedit.c ~ src/fossil.page.fileedit.js ~ src/fossil.page.wikiedit.js ~ src/style.fileedit.css ~ src/style.wikiedit.css
M src/fileedit.c
-1
--- src/fileedit.c
+++ src/fileedit.c
@@ -1697,11 +1697,10 @@
16971697
 CX("<div id='fileedit-tab-fileselect' "
16981698
 "data-tab-parent='fileedit-tabs' "
16991699
 "data-tab-label='File Selection' "
17001700
 "class='hidden'"
17011701
 ">");
1702
- CX("<h1>Select a file to edit:</h1>");
17031702
 CX("<div id='fileedit-file-selector'></div>");
17041703
 CX("</div>"/*#fileedit-tab-fileselect*/);
17051704
 }
17061705
17071706
 /******* Content tab *******/
17081707
--- src/fileedit.c
+++ src/fileedit.c
@@ -1697,11 +1697,10 @@
1697 CX("<div id='fileedit-tab-fileselect' "
1698 "data-tab-parent='fileedit-tabs' "
1699 "data-tab-label='File Selection' "
1700 "class='hidden'"
1701 ">");
1702 CX("<h1>Select a file to edit:</h1>");
1703 CX("<div id='fileedit-file-selector'></div>");
1704 CX("</div>"/*#fileedit-tab-fileselect*/);
1705 }
1706
1707 /******* Content tab *******/
1708
--- src/fileedit.c
+++ src/fileedit.c
@@ -1697,11 +1697,10 @@
1697 CX("<div id='fileedit-tab-fileselect' "
1698 "data-tab-parent='fileedit-tabs' "
1699 "data-tab-label='File Selection' "
1700 "class='hidden'"
1701 ">");
 
1702 CX("<div id='fileedit-file-selector'></div>");
1703 CX("</div>"/*#fileedit-tab-fileselect*/);
1704 }
1705
1706 /******* Content tab *******/
1707
M src/fossil.page.fileedit.js
+6 -5
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -386,20 +386,20 @@
386386
 Initializes the checkin/file selector widget. Must only be
387387
 called once.
388388
 */
389389
 init: function(){
390390
 this.cache.branchNames = F.storage.getJSON(this.cache.branchKey, {});
391
- const selCi = this.e.selectCi = D.select(),
391
+ const selCi = this.e.selectCi = D.addClass(D.select(), 'flex-grow'),
392392
 selFiles = this.e.selectFiles
393393
 = D.addClass(D.select(), 'file-list'),
394394
 btnLoad = this.e.btnLoadFile =
395395
 D.addClass(D.button("Load file"), "flex-shrink"),
396396
 filesLabel = this.e.fileListLabel =
397397
 D.addClass(D.div(),'flex-shrink','file-list-label'),
398398
 ciLabelWrapper = D.addClass(
399399
 D.div(), 'flex-container','flex-row', 'flex-shrink',
400
- 'stretch'
400
+ 'stretch', 'child-gap-small'
401401
 ),
402402
 btnReload = D.addClass(
403403
 D.button('Reload'), 'flex-shrink'
404404
 ),
405405
 ciLabel = this.e.ciListLabel =
@@ -409,16 +409,17 @@
409409
 D.attr(selFiles, 'title',
410410
 "The list of editable files for the selected checkin.");
411411
 D.attr(btnLoad, 'title',
412412
 "Load the selected file into the editor.");
413413
 D.disable(selCi, selFiles, btnLoad);
414
- D.attr(selFiles, 'size', 10);
414
+ D.attr(selFiles, 'size', 12);
415415
 D.append(
416416
 this.e.container,
417
+ ciLabel,
417418
 D.append(ciLabelWrapper,
418
- btnReload, ciLabel),
419
- selCi,
419
+ selCi,
420
+ btnReload),
420421
 filesLabel,
421422
 selFiles,
422423
 /* Use a wrapper for btnLoad so that the button itself does not
423424
 stretch to fill the parent width: */
424425
 D.append(D.addClass(D.div(), 'flex-shrink'), btnLoad)
425426
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -386,20 +386,20 @@
386 Initializes the checkin/file selector widget. Must only be
387 called once.
388 */
389 init: function(){
390 this.cache.branchNames = F.storage.getJSON(this.cache.branchKey, {});
391 const selCi = this.e.selectCi = D.select(),
392 selFiles = this.e.selectFiles
393 = D.addClass(D.select(), 'file-list'),
394 btnLoad = this.e.btnLoadFile =
395 D.addClass(D.button("Load file"), "flex-shrink"),
396 filesLabel = this.e.fileListLabel =
397 D.addClass(D.div(),'flex-shrink','file-list-label'),
398 ciLabelWrapper = D.addClass(
399 D.div(), 'flex-container','flex-row', 'flex-shrink',
400 'stretch'
401 ),
402 btnReload = D.addClass(
403 D.button('Reload'), 'flex-shrink'
404 ),
405 ciLabel = this.e.ciListLabel =
@@ -409,16 +409,17 @@
409 D.attr(selFiles, 'title',
410 "The list of editable files for the selected checkin.");
411 D.attr(btnLoad, 'title',
412 "Load the selected file into the editor.");
413 D.disable(selCi, selFiles, btnLoad);
414 D.attr(selFiles, 'size', 10);
415 D.append(
416 this.e.container,
 
417 D.append(ciLabelWrapper,
418 btnReload, ciLabel),
419 selCi,
420 filesLabel,
421 selFiles,
422 /* Use a wrapper for btnLoad so that the button itself does not
423 stretch to fill the parent width: */
424 D.append(D.addClass(D.div(), 'flex-shrink'), btnLoad)
425
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -386,20 +386,20 @@
386 Initializes the checkin/file selector widget. Must only be
387 called once.
388 */
389 init: function(){
390 this.cache.branchNames = F.storage.getJSON(this.cache.branchKey, {});
391 const selCi = this.e.selectCi = D.addClass(D.select(), 'flex-grow'),
392 selFiles = this.e.selectFiles
393 = D.addClass(D.select(), 'file-list'),
394 btnLoad = this.e.btnLoadFile =
395 D.addClass(D.button("Load file"), "flex-shrink"),
396 filesLabel = this.e.fileListLabel =
397 D.addClass(D.div(),'flex-shrink','file-list-label'),
398 ciLabelWrapper = D.addClass(
399 D.div(), 'flex-container','flex-row', 'flex-shrink',
400 'stretch', 'child-gap-small'
401 ),
402 btnReload = D.addClass(
403 D.button('Reload'), 'flex-shrink'
404 ),
405 ciLabel = this.e.ciListLabel =
@@ -409,16 +409,17 @@
409 D.attr(selFiles, 'title',
410 "The list of editable files for the selected checkin.");
411 D.attr(btnLoad, 'title',
412 "Load the selected file into the editor.");
413 D.disable(selCi, selFiles, btnLoad);
414 D.attr(selFiles, 'size', 12);
415 D.append(
416 this.e.container,
417 ciLabel,
418 D.append(ciLabelWrapper,
419 selCi,
420 btnReload),
421 filesLabel,
422 selFiles,
423 /* Use a wrapper for btnLoad so that the button itself does not
424 stretch to fill the parent width: */
425 D.append(D.addClass(D.div(), 'flex-shrink'), btnLoad)
426
M src/fossil.page.wikiedit.js
+4 -4
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -548,11 +548,11 @@
548548
 D.append(
549549
 parentElem,
550550
 D.append(D.fieldset("Select a page to edit"),
551551
 sel)
552552
 );
553
- D.attr(sel, 'size', 15);
553
+ D.attr(sel, 'size', 12);
554554
 D.option(D.disable(D.clearElement(sel)), "Loading...");
555555
556556
 /** Set up filter checkboxes for the various types
557557
 of wiki pages... */
558558
 const fsFilter = D.fieldset("Page types"),
@@ -612,13 +612,13 @@
612612
 fsLegendBody = D.div();
613613
 D.append(fsLegend, fsLegendBody);
614614
 D.addClass(fsLegendBody, 'flex-container', 'flex-column', 'stretch');
615615
 D.append(
616616
 fsLegendBody,
617
- D.append(D.span(), getEditMarker(getEditMarker.NEW,false)," = page is new/unsaved"),
618
- D.append(D.span(), getEditMarker(getEditMarker.MODIFIED,false)," = page has local edits"),
619
- D.append(D.span(), getEditMarker(getEditMarker.DELETED,false)," = page is empty (deleted)")
617
+ D.append(D.span(), getEditMarker(getEditMarker.NEW,false)," = new/unsaved"),
618
+ D.append(D.span(), getEditMarker(getEditMarker.MODIFIED,false)," = has local edits"),
619
+ D.append(D.span(), getEditMarker(getEditMarker.DELETED,false)," = is empty (deleted)")
620620
 );
621621
622622
 const fsNewPage = D.fieldset("Create new page"),
623623
 fsNewPageBody = D.div(),
624624
 newPageName = D.input('text'),
625625
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -548,11 +548,11 @@
548 D.append(
549 parentElem,
550 D.append(D.fieldset("Select a page to edit"),
551 sel)
552 );
553 D.attr(sel, 'size', 15);
554 D.option(D.disable(D.clearElement(sel)), "Loading...");
555
556 /** Set up filter checkboxes for the various types
557 of wiki pages... */
558 const fsFilter = D.fieldset("Page types"),
@@ -612,13 +612,13 @@
612 fsLegendBody = D.div();
613 D.append(fsLegend, fsLegendBody);
614 D.addClass(fsLegendBody, 'flex-container', 'flex-column', 'stretch');
615 D.append(
616 fsLegendBody,
617 D.append(D.span(), getEditMarker(getEditMarker.NEW,false)," = page is new/unsaved"),
618 D.append(D.span(), getEditMarker(getEditMarker.MODIFIED,false)," = page has local edits"),
619 D.append(D.span(), getEditMarker(getEditMarker.DELETED,false)," = page is empty (deleted)")
620 );
621
622 const fsNewPage = D.fieldset("Create new page"),
623 fsNewPageBody = D.div(),
624 newPageName = D.input('text'),
625
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -548,11 +548,11 @@
548 D.append(
549 parentElem,
550 D.append(D.fieldset("Select a page to edit"),
551 sel)
552 );
553 D.attr(sel, 'size', 12);
554 D.option(D.disable(D.clearElement(sel)), "Loading...");
555
556 /** Set up filter checkboxes for the various types
557 of wiki pages... */
558 const fsFilter = D.fieldset("Page types"),
@@ -612,13 +612,13 @@
612 fsLegendBody = D.div();
613 D.append(fsLegend, fsLegendBody);
614 D.addClass(fsLegendBody, 'flex-container', 'flex-column', 'stretch');
615 D.append(
616 fsLegendBody,
617 D.append(D.span(), getEditMarker(getEditMarker.NEW,false)," = new/unsaved"),
618 D.append(D.span(), getEditMarker(getEditMarker.MODIFIED,false)," = has local edits"),
619 D.append(D.span(), getEditMarker(getEditMarker.DELETED,false)," = is empty (deleted)")
620 );
621
622 const fsNewPage = D.fieldset("Create new page"),
623 fsNewPageBody = D.div(),
624 newPageName = D.input('text'),
625
M src/style.fileedit.css
+8 -10
--- src/style.fileedit.css
+++ src/style.fileedit.css
@@ -20,11 +20,11 @@
2020
 /* Depending on the skin, it might be useful to add one or both of
2121
 the following... */
2222
 /*border-width: 1px;*/
2323
 /*border: initial; */
2424
 }
25
-body.fileedit fieldset {
25
+body.fileedit fieldset:not(.tab-wrapper) {
2626
 margin: 0.5em 0 0.5em 0;
2727
 padding: 0.25em 0;
2828
 border-radius: 0.5em;
2929
 border-color: inherit;
3030
 border-width: 1px;
@@ -66,11 +66,11 @@
6666
 body.fileedit div.fileedit-preview {
6767
 margin: 0;
6868
 padding: 0;
6969
 }
7070
 body.fileedit #fileedit-tabs {
71
- margin: 1em 0 0 0;
71
+ margin: 0.5em 0 0 0;
7272
 }
7373
 body.fileedit #fileedit-tab-preview-wrapper {
7474
 overflow: auto;
7575
 }
7676
 body.fileedit #fileedit-tab-fileselect > h1 {
@@ -115,30 +115,28 @@
115115
 }
116116
 body.fileedit #fileedit-file-selector {
117117
 display: flex;
118118
 flex-direction: column;
119119
 align-content: flex-start;
120
- border-color: inherit;
121
- border-width: 1px;
122
- border-style: inset;
123
- border-radius: 0.5em;
124120
 padding: 0 0.25em;
125121
 margin: 0;
126122
 min-height: 12em;
127123
 }
128124
 body.fileedit #fileedit-file-selector select {
129125
 margin: 0 0 0.5em 0;
130126
 height: initial;
131127
 font-family: monospace;
128
+ border: initial;
129
+}
130
+body.fileedit select:focus {
131
+ border: initial;
132132
 }
133133
 body.fileedit #fileedit-file-selector select option {
134134
 margin: 0 0 0.5em 0.55em;
135135
 }
136
-body.fileedit select:focus {
137
- border: none;
138
-}
139
-body.fileedit option:focus {
136
+body.fileedit select option,
137
+body.fileedit select option:focus {
140138
 border: none;
141139
 }
142140
 body.fileedit #fileedit-file-selector > div {
143141
 padding: 0;
144142
 margin: 0;
145143
--- src/style.fileedit.css
+++ src/style.fileedit.css
@@ -20,11 +20,11 @@
20 /* Depending on the skin, it might be useful to add one or both of
21 the following... */
22 /*border-width: 1px;*/
23 /*border: initial; */
24 }
25 body.fileedit fieldset {
26 margin: 0.5em 0 0.5em 0;
27 padding: 0.25em 0;
28 border-radius: 0.5em;
29 border-color: inherit;
30 border-width: 1px;
@@ -66,11 +66,11 @@
66 body.fileedit div.fileedit-preview {
67 margin: 0;
68 padding: 0;
69 }
70 body.fileedit #fileedit-tabs {
71 margin: 1em 0 0 0;
72 }
73 body.fileedit #fileedit-tab-preview-wrapper {
74 overflow: auto;
75 }
76 body.fileedit #fileedit-tab-fileselect > h1 {
@@ -115,30 +115,28 @@
115 }
116 body.fileedit #fileedit-file-selector {
117 display: flex;
118 flex-direction: column;
119 align-content: flex-start;
120 border-color: inherit;
121 border-width: 1px;
122 border-style: inset;
123 border-radius: 0.5em;
124 padding: 0 0.25em;
125 margin: 0;
126 min-height: 12em;
127 }
128 body.fileedit #fileedit-file-selector select {
129 margin: 0 0 0.5em 0;
130 height: initial;
131 font-family: monospace;
 
 
 
 
132 }
133 body.fileedit #fileedit-file-selector select option {
134 margin: 0 0 0.5em 0.55em;
135 }
136 body.fileedit select:focus {
137 border: none;
138 }
139 body.fileedit option:focus {
140 border: none;
141 }
142 body.fileedit #fileedit-file-selector > div {
143 padding: 0;
144 margin: 0;
145
--- src/style.fileedit.css
+++ src/style.fileedit.css
@@ -20,11 +20,11 @@
20 /* Depending on the skin, it might be useful to add one or both of
21 the following... */
22 /*border-width: 1px;*/
23 /*border: initial; */
24 }
25 body.fileedit fieldset:not(.tab-wrapper) {
26 margin: 0.5em 0 0.5em 0;
27 padding: 0.25em 0;
28 border-radius: 0.5em;
29 border-color: inherit;
30 border-width: 1px;
@@ -66,11 +66,11 @@
66 body.fileedit div.fileedit-preview {
67 margin: 0;
68 padding: 0;
69 }
70 body.fileedit #fileedit-tabs {
71 margin: 0.5em 0 0 0;
72 }
73 body.fileedit #fileedit-tab-preview-wrapper {
74 overflow: auto;
75 }
76 body.fileedit #fileedit-tab-fileselect > h1 {
@@ -115,30 +115,28 @@
115 }
116 body.fileedit #fileedit-file-selector {
117 display: flex;
118 flex-direction: column;
119 align-content: flex-start;
 
 
 
 
120 padding: 0 0.25em;
121 margin: 0;
122 min-height: 12em;
123 }
124 body.fileedit #fileedit-file-selector select {
125 margin: 0 0 0.5em 0;
126 height: initial;
127 font-family: monospace;
128 border: initial;
129 }
130 body.fileedit select:focus {
131 border: initial;
132 }
133 body.fileedit #fileedit-file-selector select option {
134 margin: 0 0 0.5em 0.55em;
135 }
136 body.fileedit select option,
137 body.fileedit select option:focus {
 
 
138 border: none;
139 }
140 body.fileedit #fileedit-file-selector > div {
141 padding: 0;
142 margin: 0;
143
M src/style.wikiedit.css
+14 -2
--- src/style.wikiedit.css
+++ src/style.wikiedit.css
@@ -16,11 +16,11 @@
1616
 body.wikiedit div.wikiedit-preview {
1717
 margin: 0;
1818
 padding: 0;
1919
 }
2020
 body.wikiedit #wikiedit-tabs {
21
- margin: 1em 0 0 0;
21
+ margin: 0.5em 0 0 0;
2222
 }
2323
 body.wikiedit #wikiedit-tab-preview-wrapper {
2424
 overflow: auto;
2525
 }
2626
 body.wikiedit .tab-container > .tabs > .tab-panel > .wikiedit-options {
@@ -59,13 +59,21 @@
5959
 body.wikiedit .WikiList select {
6060
 font-size: 110%;
6161
 margin: initial;
6262
 height: initial /* some skins set these to a fixed height */;
6363
 font-family: monospace;
64
+ border: initial;
65
+}
66
+body.wikiedit select:focus {
67
+ border: initial;
6468
 }
6569
 body.wikiedit .WikiList select option {
6670
 margin: 0 0 0.5em 0.55em;
71
+}
72
+body.wikiedit select option,
73
+body.wikiedit select option:focus {
74
+ border: none;
6775
 }
6876
 body.wikiedit .WikiList select option.stashed,
6977
 body.wikiedit .WikiList select option.stashed-new,
7078
 body.wikiedit .WikiList select option.deleted {
7179
 margin-left: -0.4em;
@@ -89,15 +97,19 @@
8997
 body.wikiedit .WikiList label {
9098
 margin: 0 0.5em;
9199
 vertical-align: text-bottom;
92100
 }
93101
 body.wikiedit .WikiList legend {
94
- font-size: 90%;
95102
 margin: 0 0 0 0.5em;
103
+}
104
+body.wikiedit .WikiList > fieldset {
105
+ margin: 0;
106
+ width: calc(100% - 1em);
96107
 }
97108
 body.wikiedit .WikiList fieldset > :not(legend) {
98109
 /* Stretch page selection list when it's empty or only has short page names */
110
+ margin: 0;
99111
 width: 100%;
100112
 }
101113
 body.wikiedit .WikiList .fieldset-wrapper {
102114
 /* Container for the filter and edit status fieldsets */
103115
 display: flex;
104116
--- src/style.wikiedit.css
+++ src/style.wikiedit.css
@@ -16,11 +16,11 @@
16 body.wikiedit div.wikiedit-preview {
17 margin: 0;
18 padding: 0;
19 }
20 body.wikiedit #wikiedit-tabs {
21 margin: 1em 0 0 0;
22 }
23 body.wikiedit #wikiedit-tab-preview-wrapper {
24 overflow: auto;
25 }
26 body.wikiedit .tab-container > .tabs > .tab-panel > .wikiedit-options {
@@ -59,13 +59,21 @@
59 body.wikiedit .WikiList select {
60 font-size: 110%;
61 margin: initial;
62 height: initial /* some skins set these to a fixed height */;
63 font-family: monospace;
 
 
 
 
64 }
65 body.wikiedit .WikiList select option {
66 margin: 0 0 0.5em 0.55em;
 
 
 
 
67 }
68 body.wikiedit .WikiList select option.stashed,
69 body.wikiedit .WikiList select option.stashed-new,
70 body.wikiedit .WikiList select option.deleted {
71 margin-left: -0.4em;
@@ -89,15 +97,19 @@
89 body.wikiedit .WikiList label {
90 margin: 0 0.5em;
91 vertical-align: text-bottom;
92 }
93 body.wikiedit .WikiList legend {
94 font-size: 90%;
95 margin: 0 0 0 0.5em;
 
 
 
 
96 }
97 body.wikiedit .WikiList fieldset > :not(legend) {
98 /* Stretch page selection list when it's empty or only has short page names */
 
99 width: 100%;
100 }
101 body.wikiedit .WikiList .fieldset-wrapper {
102 /* Container for the filter and edit status fieldsets */
103 display: flex;
104
--- src/style.wikiedit.css
+++ src/style.wikiedit.css
@@ -16,11 +16,11 @@
16 body.wikiedit div.wikiedit-preview {
17 margin: 0;
18 padding: 0;
19 }
20 body.wikiedit #wikiedit-tabs {
21 margin: 0.5em 0 0 0;
22 }
23 body.wikiedit #wikiedit-tab-preview-wrapper {
24 overflow: auto;
25 }
26 body.wikiedit .tab-container > .tabs > .tab-panel > .wikiedit-options {
@@ -59,13 +59,21 @@
59 body.wikiedit .WikiList select {
60 font-size: 110%;
61 margin: initial;
62 height: initial /* some skins set these to a fixed height */;
63 font-family: monospace;
64 border: initial;
65 }
66 body.wikiedit select:focus {
67 border: initial;
68 }
69 body.wikiedit .WikiList select option {
70 margin: 0 0 0.5em 0.55em;
71 }
72 body.wikiedit select option,
73 body.wikiedit select option:focus {
74 border: none;
75 }
76 body.wikiedit .WikiList select option.stashed,
77 body.wikiedit .WikiList select option.stashed-new,
78 body.wikiedit .WikiList select option.deleted {
79 margin-left: -0.4em;
@@ -89,15 +97,19 @@
97 body.wikiedit .WikiList label {
98 margin: 0 0.5em;
99 vertical-align: text-bottom;
100 }
101 body.wikiedit .WikiList legend {
 
102 margin: 0 0 0 0.5em;
103 }
104 body.wikiedit .WikiList > fieldset {
105 margin: 0;
106 width: calc(100% - 1em);
107 }
108 body.wikiedit .WikiList fieldset > :not(legend) {
109 /* Stretch page selection list when it's empty or only has short page names */
110 margin: 0;
111 width: 100%;
112 }
113 body.wikiedit .WikiList .fieldset-wrapper {
114 /* Container for the filter and edit status fieldsets */
115 display: flex;
116

Keyboard Shortcuts

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