fix the iamge placeholder text
This commit is contained in:
parent
0e336642ad
commit
78da1859f5
@ -16,14 +16,17 @@ This module extends the Odoo Sign module to allow users to upload images as a fi
|
||||
],
|
||||
'assets': {
|
||||
'web.assets_frontend': [
|
||||
'sign_image_field/static/src/css/sign_image_field.css',
|
||||
'sign_image_field/static/src/js/sign_image_upload.js',
|
||||
'sign_image_field/static/src/xml/sign_items_image.xml',
|
||||
],
|
||||
'web.assets_backend': [
|
||||
'sign_image_field/static/src/css/sign_image_field.css',
|
||||
'sign_image_field/static/src/js/sign_image_upload.js',
|
||||
'sign_image_field/static/src/xml/sign_items_image.xml',
|
||||
],
|
||||
'sign.assets_public_sign': [
|
||||
'sign_image_field/static/src/css/sign_image_field.css',
|
||||
'sign_image_field/static/src/js/sign_image_upload.js',
|
||||
'sign_image_field/static/src/xml/sign_items_image.xml',
|
||||
]
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
<field name="item_type">image</field>
|
||||
<field name="icon">fa-image</field>
|
||||
<field name="tip">Upload an image</field>
|
||||
<field name="placeholder">Click to upload image</field>
|
||||
<field name="default_width">0.2</field>
|
||||
<field name="default_height">0.05</field>
|
||||
<field name="placeholder">📷</field>
|
||||
<field name="default_width">0.15</field>
|
||||
<field name="default_height">0.08</field>
|
||||
</record>
|
||||
</odoo>
|
||||
|
||||
43
static/src/css/sign_image_field.css
Normal file
43
static/src/css/sign_image_field.css
Normal file
@ -0,0 +1,43 @@
|
||||
/* Sign Image Field Styles */
|
||||
|
||||
.o_sign_sign_item[data-type="image"] {
|
||||
border: 2px dashed #ccc;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.o_sign_sign_item[data-type="image"]:hover {
|
||||
border-color: #007bff;
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
|
||||
.o_sign_sign_item[data-type="image"] .o_placeholder,
|
||||
.o_sign_sign_item .o_placeholder {
|
||||
font-size: 12px !important;
|
||||
color: #666 !important;
|
||||
font-weight: normal !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
max-width: 100% !important;
|
||||
display: inline-block !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.o_sign_sign_item[data-type="image"] img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Force reasonable font size for all image placeholders with highest specificity */
|
||||
div.o_sign_sign_item[data-type="image"] span.o_placeholder {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Override any inherited font sizes with maximum specificity */
|
||||
body div.o_sign_sign_item[data-type="image"] span.o_placeholder {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
@ -7,6 +7,32 @@ patch(SignablePDFIframe.prototype, {
|
||||
enableCustom(signItem) {
|
||||
super.enableCustom(signItem);
|
||||
if (signItem.data.type === 'image') {
|
||||
// Add data-type attribute for CSS targeting
|
||||
signItem.el.setAttribute('data-type', 'image');
|
||||
|
||||
// Function to adjust font size based on container dimensions
|
||||
const adjustFontSize = () => {
|
||||
const placeholder = signItem.el.querySelector('.o_placeholder');
|
||||
if (placeholder) {
|
||||
const containerHeight = signItem.el.offsetHeight;
|
||||
const containerWidth = signItem.el.offsetWidth;
|
||||
// Use the smaller dimension to calculate font size, but make it more reasonable
|
||||
const minDimension = Math.min(containerHeight, containerWidth);
|
||||
const fontSize = Math.max(10, Math.min(16, minDimension * 0.4));
|
||||
placeholder.style.fontSize = fontSize + 'px !important';
|
||||
placeholder.style.lineHeight = '1';
|
||||
}
|
||||
};
|
||||
|
||||
// Initial font size adjustment
|
||||
setTimeout(adjustFontSize, 100);
|
||||
|
||||
// Watch for size changes
|
||||
if (window.ResizeObserver) {
|
||||
const resizeObserver = new ResizeObserver(adjustFontSize);
|
||||
resizeObserver.observe(signItem.el);
|
||||
}
|
||||
|
||||
const input = signItem.el.querySelector('.o_sign_image_upload_input');
|
||||
if (!input) return;
|
||||
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<t t-if="type == 'image'" t-call="sign.imageSignItem"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[@t-if="type == 'selection'"]" position="after">
|
||||
<div t-if="type == 'image'" t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item" t-att-style="style" t-att-data-value="value" style="text-align:center;">
|
||||
<div t-if="type == 'image'" t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item" t-att-style="style" t-att-data-value="value" style="text-align:center; display:flex; align-items:center; justify-content:center;">
|
||||
<input type="file" accept="image/*" class="o_sign_image_upload_input" style="display:none"/>
|
||||
<t t-if="value">
|
||||
<img t-att-src="value" style="max-width:100%; max-height:100%; object-fit:contain;"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<span class="o_placeholder">
|
||||
<span class="o_placeholder" style="font-size:12px !important; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1;">
|
||||
<t t-esc="placeholder"/>
|
||||
</span>
|
||||
</t>
|
||||
@ -21,13 +21,13 @@
|
||||
</t>
|
||||
|
||||
<t t-name="sign.imageSignItem">
|
||||
<div t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item" t-att-data-id="id" t-att-style="style">
|
||||
<div class="sign_item_body" style="text-align:center;">
|
||||
<div t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item" t-att-data-id="id" t-att-style="style" style="text-align:center; display:flex; align-items:center; justify-content:center;">
|
||||
<div class="sign_item_body">
|
||||
<t t-if="value">
|
||||
<img t-att-src="value" style="max-width:100%; max-height:100%; object-fit:contain;"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<span class="o_placeholder">
|
||||
<span class="o_placeholder" style="font-size:12px !important; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1;">
|
||||
<t t-esc="placeholder"/>
|
||||
</span>
|
||||
</t>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user