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

N°2844 - Fix image attribute display and editing

Browse Source
This commit is contained in:
Molkobain
2021-02-19 21:27:10 +01:00
parent 1c0177f711
commit f04a5dbfef
8 changed files with 166 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/backoffice/components/input/_all.scss
View File

@@ -4,11 +4,12 @@
*/
@import "input";
@import "input-select";
@import "input-checkbox";
@import "input-date";
@import "input-datetime";
@import "input-duration";
@import "input-image";
@import "input-select";
@import "input-select-icon";
@import "input-string";
@import "input-tagset";

45
css/backoffice/components/input/_input-image.scss Normal file
View File

@@ -0,0 +1,45 @@
/*!
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
.ibo-input-image {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.ibo-input-image--image-view {
position: relative;
overflow: hidden;
background-color: $ibo-color-grey-200;
border-radius: $ibo-border-radius-500;
@extend %ibo-fully-centered-content;
img[src=""],
img[src="null"] {
// Hiding "broken" image when src is not set
visibility: hidden;
}
input[type="file"] {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
}
.ibo-input-image--edit-buttons {
display: flex;
flex-direction: column;
margin-left: 0.5rem;
// Overload original siblings rule as buttons are displayed vertically
.ibo-button + .ibo-button {
margin-top: 0.5rem;
margin-left: 0;
}
}

54
css/light-grey.scss
View File

@@ -154,60 +154,6 @@
// color: $text-color;
//}
.edit-image {
.view-image {
display: inline-block;
img[src=""],
img[src="null"] {
// Hiding "broken" image when src is not set
visibility: hidden;
}
&.dirty {
// The image will be modified when saving the changes
&.compat {
// Browser not supporting FileReader
background-image: url($approot-relative + "css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=" + $version);
img {
opacity: 0.3;
}
}
}
}
.edit-buttons {
display: inline-block;
vertical-align: top;
margin-top: 4px;
margin-left: 3px;
.button {
cursor: pointer;
margin-bottom: 3px;
padding: 2px;
background-color: $highlight-color;
&.disabled {
cursor: default;
background-color: $grey-color;
opacity: 0.3;
}
.ui-icon {
background-image: url($approot-relative + "css/ui-lightness/images/ui-icons_ffffff_256x240.png?v=" + $version);
}
}
}
.file-input {
display: block;
position: relative;
}
}
/* Center the image both horizontally and vertically, withing a box which size is fixed (depends on the attribute definition) */
.details .view-image {
text-align: center;