composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-12 23:14:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°6240 - Improve display of picture in read or edit mode (#484)

Browse Source
This commit is contained in:
Anne-Catherine
2023-05-15 16:12:26 +02:00
committed by GitHub
parent bf21481bf6
commit a98fab8f66
3 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/attributedef.class.inc.php
View File

@@ -8611,7 +8611,7 @@ class AttributeImage extends AttributeBlob
$sCssClasses .= ' '.(($bIsCustomImage) ? 'attribute-image-custom' : 'attribute-image-default');
// Important: If you change this, mind updating edit_image.js as well
return '<div class="'.$sCssClasses.'" style="max-width: '.$sMaxWidthPx.'; max-height: '.$sMaxHeightPx.'; aspect-ratio: '.$iMaxWidth.' / '.$iMaxHeight.'">'.$sRet.'</div>';
return '<div class="'.$sCssClasses.'" style="max-width: min('.$sMaxWidthPx.',100%); max-height: min('.$sMaxHeightPx.',100%); aspect-ratio: '.$iMaxWidth.' / '.$iMaxHeight.'">'.$sRet.'</div>';
}
/**
@@ -8625,7 +8625,7 @@ class AttributeImage extends AttributeBlob
* @since 2.7.0 change visibility to protected
*/
protected function GetHtmlForImageUrl($sUrl, $iMaxWidthPx, $iMaxHeightPx) {
return '<img src="'.$sUrl.'" style="max-width: '.$iMaxWidthPx.'; max-height: '.$iMaxHeightPx.'">';
return '<img src="'.$sUrl.'" style="max-width: min('.$iMaxWidthPx.',100%); max-height: min('.$iMaxHeightPx.',100%)">';
}
/**

11
css/backoffice/components/_field.scss
View File

@@ -64,11 +64,22 @@ $ibo-field--enable-bulk--checkbox--margin-left: $ibo-spacing-300 !default;
word-break: break-word;
white-space: inherit;
}
& pre {
white-space: break-spaces;
}
}
}
/* We need the rule to keep picture inside the column */
&[data-attribute-type="AttributeImage"] {
> .ibo-field--value {
display: grid;
> span {
display: inherit;
}
}
}
}
/* Large field = Label on top, value below */

2
js/edit_image.js
View File

@@ -71,7 +71,7 @@ $(function()
let sMarkup = `
<input type="hidden" id="do_remove_${this.options.input_name}" name="${this.options.input_name}[remove]" value="0"/>
<div id="preview_${this.options.input_name}" class="${sCssClasses}" data-role="ibo-input-image--image-view" style="max-width: ${this.options.max_width_px}px; max-height: ${this.options.max_height_px}px; aspect-ratio: ${this.options.max_width_px} / ${this.options.max_height_px};">
<img src="${sImageUrl}" data-original-src="${sImageUrl}" data-default-src="${this.options.default_image_url}" style="max-width: ${this.options.max_width_px}px; max-height: ${this.options.max_height_px}px">
<img src="${sImageUrl}" data-original-src="${sImageUrl}" data-default-src="${this.options.default_image_url}" style="max-width: min(${this.options.max_width_px}px,100%); max-height: min(${this.options.max_height_px}px,100%)">
<input id="file_${this.options.input_name}" name="${this.options.input_name}[fcontents]" type="file" />
</div>
<div id="buttons_${this.options.input_name}" class="ibo-input-image--edit-buttons" data-role="ibo-input-image--edit-buttons">