Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

XFA - Add a transparent blue background on all text fields for consistency

Browse Source
This commit is contained in:
Calixte Denizet 2021-07-28 11:34:48 +02:00
parent 76d882b560
commit 92f4cc52a6
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/core/xfa/template.js
View File

@ -2926,16 +2926,22 @@ class Fill extends XFAObject {
const ggrandpa = grandpa[$getParent](); const ggrandpa = grandpa[$getParent]();
const style = Object.create(null); const style = Object.create(null);
// Use for color, i.e. #...
let propName = "color"; let propName = "color";
// Use for non-color, i.e. gradient, radial-gradient...
let altPropName = propName;
if (parent instanceof Border) { if (parent instanceof Border) {
propName = "background"; propName = "background-color";
altPropName = "background";
if (ggrandpa instanceof Ui) { if (ggrandpa instanceof Ui) {
// The default fill color is white. // The default fill color is white.
style.background = "white"; style.backgroundColor = "white";
} }
} }
if (parent instanceof Rectangle || parent instanceof Arc) { if (parent instanceof Rectangle || parent instanceof Arc) {
propName = "fill"; propName = altPropName = "fill";
style.fill = "white"; style.fill = "white";
} }
@ -2948,12 +2954,16 @@ class Fill extends XFAObject {
continue; continue;
} }
style[propName] = obj[$toStyle](this.color); const color = obj[$toStyle](this.color);
if (color) {
style[color.startsWith("#") ? propName : altPropName] = color;
}
return style; return style;
} }
if (this.color) { if (this.color && this.color.value) {
style[propName] = this.color[$toStyle](); const color = this.color[$toStyle]();
style[color.startsWith("#") ? propName : altPropName] = color;
} }
return style; return style;

13
web/xfa_layer_builder.css
View File

@ -13,6 +13,10 @@
* limitations under the License. * limitations under the License.
*/ */
:root {
--unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
}
.xfaPage { .xfaPage {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -45,7 +49,7 @@
text-align: inherit; text-align: inherit;
text-decoration: inherit; text-decoration: inherit;
box-sizing: border-box; box-sizing: border-box;
background: transparent; background-color: transparent;
padding: 0; padding: 0;
margin: 0; margin: 0;
pointer-events: auto; pointer-events: auto;
@ -136,7 +140,7 @@
} }
.xfaBorder { .xfaBorder {
background: transparent; background-color: transparent;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
} }
@ -148,7 +152,8 @@
.xfaTextfield:focus, .xfaTextfield:focus,
.xfaSelect:focus { .xfaSelect:focus {
background: transparent; background-image: none;
background-color: transparent;
outline: none; outline: none;
} }
@ -159,7 +164,7 @@
flex: 1 1 auto; flex: 1 1 auto;
border: none; border: none;
resize: none; resize: none;
background: rgba(0, 54, 255, 0.13); background-image: var(--unfocused-field-background);
} }
.xfaTop > .xfaTextfield, .xfaTop > .xfaTextfield,