composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-22 01:58:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Object details: Fix image being squashed

Browse Source
This commit is contained in:
Molkobain
2021-03-02 18:26:55 +01:00
parent 748a22c728
commit 282842fa2c
3 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
css/backoffice/components/_title.scss
View File

@@ -12,7 +12,8 @@ $ibo-title--medallion--background-color: $ibo-color-grey-100 !default;
$ibo-title--medallion--border: 2px solid $ibo-color-blue-grey-300 !default;
$ibo-title--medallion--border-radius: $ibo-border-radius-full !default;
$ibo-title--icon--size--must-cover: 100% !default;
$ibo-title--icon--size--must-contain: contain !default;
$ibo-title--icon--size--must-cover: cover !default;
$ibo-title--icon--size--must-zoomout: 66.67% !default;
$ibo-title--status-dot--size: 10px !default;
@@ -49,15 +50,25 @@ $ibo-title--object-tags--separator-dot--border-radius: $ibo-border-radius-full !
border: $ibo-title--medallion--border;
border-radius: $ibo-title--medallion--border-radius;
}
.ibo-title--icon {
width: $ibo-title--icon--size--must-cover;
height: auto;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: $ibo-title--icon--size--must-contain;
}
.ibo-title--icon--must-contain {
background-size: $ibo-title--icon--size--must-contain;
}
.ibo-title--icon--must-cover {
background-size: $ibo-title--icon--size--must-cover;
}
.ibo-title--icon--must-zoomout {
width: $ibo-title--icon--size--must-zoomout;
background-size: $ibo-title--icon--size--must-zoomout;
}
.ibo-title--for-object-details {

8
sources/application/UI/Base/Component/Title/Title.php
View File

@@ -22,12 +22,14 @@ class Title extends UIBlock
/** @inheritDoc */
public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/title/layout';
/** @var string Icon should cover all the space, best for icons with filled background */
public const ENUM_ICON_COVER_METHOD_COVER = 'cover';
/** @var string Icon should be contained (boxed) in the medallion, best for icons with transparent background and some margin around */
public const ENUM_ICON_COVER_METHOD_CONTAIN = 'contain';
/** @var string Icon should be a litte zoomed out to cover almost all space, best for icons with transparent background and no margin around (eg. class icons) */
public const ENUM_ICON_COVER_METHOD_ZOOMOUT = 'zoomout';
/** @var string Icon should cover all the space, best for icons with filled background */
public const ENUM_ICON_COVER_METHOD_COVER = 'cover';
/** @var string */
public const DEFAULT_ICON_COVER_METHOD = self::ENUM_ICON_COVER_METHOD_COVER;
public const DEFAULT_ICON_COVER_METHOD = self::ENUM_ICON_COVER_METHOD_CONTAIN;
/** @var string */
protected $sTitle;

2
templates/base/components/title/layout.html.twig
View File

@@ -2,7 +2,7 @@
<div id="{{ oUIBlock.GetId() }}" class="ibo-title {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
{% if oUIBlock.HasIcon() %}
<div {% if oUIBlock.IsMedallion %}class="ibo-title--medallion"{% endif %}>
<img class="ibo-title--icon ibo-title--icon--must-{{ oUIBlock.GetIconCoverMethod() }}" src="{{ oUIBlock.GetIconUrl() }}">
<div class="ibo-title--icon ibo-title--icon--must-{{ oUIBlock.GetIconCoverMethod() }}" style="background-image: url('{{ oUIBlock.GetIconUrl()|raw }}');"></div>
</div>
{% endif %}
<div class="ibo-title--content">