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

N°3723 Restyle attachment drag and drop and add a better user experience

Browse Source
This commit is contained in:
Stephen Abello
2021-02-17 11:04:38 +01:00
parent 666d0d418f
commit bdec220d7e
4 changed files with 101 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
css/backoffice/pages/_attachments.scss
View File

@@ -5,6 +5,18 @@ $ibo-attachment--datatable--line-height: $ibo-attachment--datatable--icon-previe
$ibo-attachment--datatable--first-column--line-height: 0px !default;
$ibo-attachment--drag-in--border: 2px $ibo-color-grey-400 dashed !default;
$ibo-attachment--upload-file--drop-zone-hint--max-height: 200px !default;
$ibo-attachment--upload-file--drop-zone-hint--margin: 22px 0px !default;
$ibo-attachment--upload-file--drop-zone-hint--color: $ibo-color-grey-700 !default;
$ibo-attachment--upload-file--drop-zone-hint--image--margin-bottom: 5px !default;
$ibo-attachment--tab-header--drop-in--background-color: $ibo-color-blue-200 !default;
$ibo-attachment--tab-header--drop-in--color: $ibo-color-blue-800 !default;
$ibo-attachment--tab-header--drop-in--icon--padding-left: 8px !default;
$ibo-attachment--tab-header--drop-in--icon--content: "\f382" !default;
$ibo-attachment--tab-header--drop-in--icon--color: $ibo-color-blue-600 !default;
#ibo-attachment--upload-file{
.ibo-input-file-select--container{
display: inline-block;
@@ -20,4 +32,44 @@ $ibo-attachment--datatable--first-column--line-height: 0px !default;
}
.ibo-attachment--datatable tbody tr td:nth-child(1){
line-height: $ibo-attachment--datatable--first-column--line-height;
}
.ibo-attachment--upload-file--drop-zone-hint{
display: none;
}
.ibo-drag-in {
border: $ibo-attachment--drag-in--border;
.ibo-attachment--upload-file--drop-zone-hint {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-height: $ibo-attachment--upload-file--drop-zone-hint--max-height;
margin: $ibo-attachment--upload-file--drop-zone-hint--margin;
color: $ibo-attachment--upload-file--drop-zone-hint--color;
> svg{
margin-bottom: $ibo-attachment--upload-file--drop-zone-hint--image--margin-bottom;
}
}
#ibo-attachment--upload-file--upload-button-container {
display: none;
}
}
.ibo-tab-container--tab-header{
&.ibo-drag-in{
border: none;
background-color: $ibo-attachment--tab-header--drop-in--background-color;
color: $ibo-attachment--tab-header--drop-in--color;
> a::after{
padding-left: $ibo-attachment--tab-header--drop-in--icon--padding-left;
font-family: "Font Awesome 5 Free";
content: $ibo-attachment--tab-header--drop-in--icon--content;
font-weight: 900;
color: $ibo-color-blue-600;
}
}
}