Fossil SCM

Make the new attachment form legible in dark mode. Correct the enabling/disabling of the submit button, broken in recent refactoring.

stephan 2026-06-02 21:29 UTC attach-v2
Commit d906a8dc10c3074dd38a715f4178d993152d418fbb8fe98c260f94c50d861d51
Parent 58d98eed186ab59…
3 files changed +1 +17 +9 -9
~ skins/darkmode/css.txt ~ src/default.css ~ src/fossil.attach.js
M skins/darkmode/css.txt
+1
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -129,10 +129,11 @@
129129
 input[type=submit]:hover {
130130
 background-color: #FF4500f0;
131131
 color: rgba(24,24,24,0.8);
132132
 outline: 0
133133
 }
134
+button:disabled,
134135
 input[type=submit]:disabled {
135136
 color: #363636;
136137
 background-color: #707070;
137138
 }
138139
 .button:focus,
139140
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -129,10 +129,11 @@
129 input[type=submit]:hover {
130 background-color: #FF4500f0;
131 color: rgba(24,24,24,0.8);
132 outline: 0
133 }
 
134 input[type=submit]:disabled {
135 color: #363636;
136 background-color: #707070;
137 }
138 .button:focus,
139
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -129,10 +129,11 @@
129 input[type=submit]:hover {
130 background-color: #FF4500f0;
131 color: rgba(24,24,24,0.8);
132 outline: 0
133 }
134 button:disabled,
135 input[type=submit]:disabled {
136 color: #363636;
137 background-color: #707070;
138 }
139 .button:focus,
140
M src/default.css
+17
--- src/default.css
+++ src/default.css
@@ -2023,10 +2023,13 @@
20232023
 gap: 0.5em;
20242024
 padding: 0.75em;
20252025
 border: 1px dashed #ccc;
20262026
 border-radius: 0.25em;
20272027
 background-color: #fafafa;
2028
+}
2029
+body.fossil-dark-style .attach-container > .attach-row {
2030
+ background-color: initial;
20282031
 }
20292032
 .attach-container > .attach-row > .attach-dropzone {
20302033
 padding: 1em;
20312034
 text-align: center;
20322035
 background: #ffffff;
@@ -2035,20 +2038,34 @@
20352038
 border-radius: 0.25em;
20362039
 transition: background-color 0.15s ease-in-out;
20372040
 display: flex;
20382041
 flex-direction: row;
20392042
 flex-wrap: nowrap;
2043
+}
2044
+body.fossil-dark-style .attach-container > .attach-row > .attach-dropzone{
2045
+ background: initial;
20402046
 }
20412047
 .attach-container > .attach-row > .attach-dropzone.populated {
20422048
 background-color: #f1f8e9;
20432049
 border-color: #8bc34a;
20442050
 border-style: solid;
20452051
 text-align: left;
2052
+}
2053
+body.fossil-dark-style .attach-container > .attach-row > .attach-dropzone.populated{
2054
+ background-color: initial;
2055
+ border-color: #8bc34a;
20462056
 }
20472057
 .attach-container > .attach-row > .attach-dropzone.dragover {
20482058
 background-color: #e1f5fe;
20492059
 border-color: #03a9f4;
2060
+}
2061
+body.fossil-dark-style .attach-container > .attach-row > .attach-dropzone.dragover{
2062
+ border-color: #03a9f4;
2063
+}
2064
+body.fossil-dark-style > .attach-row > .attach-dropzone.dragover{
2065
+ background-color: #e1f5fe;
2066
+ border-color: #03a9f4;
20502067
 }
20512068
 .attach-container > .attach-row > .attach-dropzone > .thumbnail {
20522069
 max-width: 10em;
20532070
 max-height: 10em;
20542071
 }
20552072
--- src/default.css
+++ src/default.css
@@ -2023,10 +2023,13 @@
2023 gap: 0.5em;
2024 padding: 0.75em;
2025 border: 1px dashed #ccc;
2026 border-radius: 0.25em;
2027 background-color: #fafafa;
 
 
 
2028 }
2029 .attach-container > .attach-row > .attach-dropzone {
2030 padding: 1em;
2031 text-align: center;
2032 background: #ffffff;
@@ -2035,20 +2038,34 @@
2035 border-radius: 0.25em;
2036 transition: background-color 0.15s ease-in-out;
2037 display: flex;
2038 flex-direction: row;
2039 flex-wrap: nowrap;
 
 
 
2040 }
2041 .attach-container > .attach-row > .attach-dropzone.populated {
2042 background-color: #f1f8e9;
2043 border-color: #8bc34a;
2044 border-style: solid;
2045 text-align: left;
 
 
 
 
2046 }
2047 .attach-container > .attach-row > .attach-dropzone.dragover {
2048 background-color: #e1f5fe;
2049 border-color: #03a9f4;
 
 
 
 
 
 
 
2050 }
2051 .attach-container > .attach-row > .attach-dropzone > .thumbnail {
2052 max-width: 10em;
2053 max-height: 10em;
2054 }
2055
--- src/default.css
+++ src/default.css
@@ -2023,10 +2023,13 @@
2023 gap: 0.5em;
2024 padding: 0.75em;
2025 border: 1px dashed #ccc;
2026 border-radius: 0.25em;
2027 background-color: #fafafa;
2028 }
2029 body.fossil-dark-style .attach-container > .attach-row {
2030 background-color: initial;
2031 }
2032 .attach-container > .attach-row > .attach-dropzone {
2033 padding: 1em;
2034 text-align: center;
2035 background: #ffffff;
@@ -2035,20 +2038,34 @@
2038 border-radius: 0.25em;
2039 transition: background-color 0.15s ease-in-out;
2040 display: flex;
2041 flex-direction: row;
2042 flex-wrap: nowrap;
2043 }
2044 body.fossil-dark-style .attach-container > .attach-row > .attach-dropzone{
2045 background: initial;
2046 }
2047 .attach-container > .attach-row > .attach-dropzone.populated {
2048 background-color: #f1f8e9;
2049 border-color: #8bc34a;
2050 border-style: solid;
2051 text-align: left;
2052 }
2053 body.fossil-dark-style .attach-container > .attach-row > .attach-dropzone.populated{
2054 background-color: initial;
2055 border-color: #8bc34a;
2056 }
2057 .attach-container > .attach-row > .attach-dropzone.dragover {
2058 background-color: #e1f5fe;
2059 border-color: #03a9f4;
2060 }
2061 body.fossil-dark-style .attach-container > .attach-row > .attach-dropzone.dragover{
2062 border-color: #03a9f4;
2063 }
2064 body.fossil-dark-style > .attach-row > .attach-dropzone.dragover{
2065 background-color: #e1f5fe;
2066 border-color: #03a9f4;
2067 }
2068 .attach-container > .attach-row > .attach-dropzone > .thumbnail {
2069 max-width: 10em;
2070 max-height: 10em;
2071 }
2072
M src/fossil.attach.js
+9 -9
--- src/fossil.attach.js
+++ src/fossil.attach.js
@@ -82,19 +82,19 @@
8282
 eControls.append(eBtnAdd);
8383
 this.#e.list = D.addClass(D.div(), 'attach-container');
8484
 opt.container.appendChild(this.#e.list);
8585
 this.#e.list.appendChild(eControls);
8686
 if( opt.listener ){
87
- if( (opt.listener.add || opt.listener.all) instanceof Function ){
88
- this.addEventListener('entry-added', opt.listener.add);
89
- }
90
- if( (opt.listener.remove || opt.listener.all) instanceof Function ){
91
- this.addEventListener('entry-removed', opt.listener.remove);
92
- }
93
- if( (opt.listener.populate || opt.listener.all) instanceof Function ){
94
- this.addEventListener('entry-populated', opt.listener.populate);
95
- }
87
+ const doCb = (eventType, cb)=>{
88
+ const f = cb || opt.listener.all;
89
+ if( f instanceof Function ){
90
+ this.addEventListener(eventType, f);
91
+ }
92
+ };
93
+ doCb('entry-added', opt.listener.add);
94
+ doCb('entry-removed', opt.listener.remove);
95
+ doCb('entry-populated', opt.listener.populate);
9696
 }
9797
 if( Array.isArray(opt.controls) ){
9898
 eControls.append(...opt.controls);
9999
 }
100100
 if( opt.startWith > 0 ){
101101
--- src/fossil.attach.js
+++ src/fossil.attach.js
@@ -82,19 +82,19 @@
82 eControls.append(eBtnAdd);
83 this.#e.list = D.addClass(D.div(), 'attach-container');
84 opt.container.appendChild(this.#e.list);
85 this.#e.list.appendChild(eControls);
86 if( opt.listener ){
87 if( (opt.listener.add || opt.listener.all) instanceof Function ){
88 this.addEventListener('entry-added', opt.listener.add);
89 }
90 if( (opt.listener.remove || opt.listener.all) instanceof Function ){
91 this.addEventListener('entry-removed', opt.listener.remove);
92 }
93 if( (opt.listener.populate || opt.listener.all) instanceof Function ){
94 this.addEventListener('entry-populated', opt.listener.populate);
95 }
96 }
97 if( Array.isArray(opt.controls) ){
98 eControls.append(...opt.controls);
99 }
100 if( opt.startWith > 0 ){
101
--- src/fossil.attach.js
+++ src/fossil.attach.js
@@ -82,19 +82,19 @@
82 eControls.append(eBtnAdd);
83 this.#e.list = D.addClass(D.div(), 'attach-container');
84 opt.container.appendChild(this.#e.list);
85 this.#e.list.appendChild(eControls);
86 if( opt.listener ){
87 const doCb = (eventType, cb)=>{
88 const f = cb || opt.listener.all;
89 if( f instanceof Function ){
90 this.addEventListener(eventType, f);
91 }
92 };
93 doCb('entry-added', opt.listener.add);
94 doCb('entry-removed', opt.listener.remove);
95 doCb('entry-populated', opt.listener.populate);
96 }
97 if( Array.isArray(opt.controls) ){
98 eControls.append(...opt.controls);
99 }
100 if( opt.startWith > 0 ){
101

Keyboard Shortcuts

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