Dropzone styling improvements (#15291)
* Dropzone styling improvements - Move all dropzone styles to separate file - Fix white background in arc-green - Fix rendering of non-square images and previews * increase thumbnail quality, set contain in js, replace blur effect with opacity
This commit is contained in:
parent
3dc099773d
commit
afa781bf20
5 changed files with 57 additions and 37 deletions
|
@ -999,6 +999,9 @@ async function initRepository() {
|
|||
dictFileTooBig: $dropzone.data('file-too-big'),
|
||||
dictRemoveFile: $dropzone.data('remove-file'),
|
||||
timeout: 0,
|
||||
thumbnailMethod: 'contain',
|
||||
thumbnailWidth: 480,
|
||||
thumbnailHeight: 480,
|
||||
init() {
|
||||
this.on('success', (file, data) => {
|
||||
filenameDict[file.name] = {
|
||||
|
@ -2624,6 +2627,9 @@ $(document).ready(async () => {
|
|||
dictFileTooBig: $dropzone.data('file-too-big'),
|
||||
dictRemoveFile: $dropzone.data('remove-file'),
|
||||
timeout: 0,
|
||||
thumbnailMethod: 'contain',
|
||||
thumbnailWidth: 480,
|
||||
thumbnailHeight: 480,
|
||||
init() {
|
||||
this.on('success', (file, data) => {
|
||||
filenameDict[file.name] = data.uuid;
|
||||
|
|
|
@ -1021,11 +1021,6 @@
|
|||
color: var(--color-text-light-2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.dropzone-attachments .thumbnails .ui.image {
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ui.form {
|
||||
|
@ -2483,29 +2478,6 @@
|
|||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.ui.form {
|
||||
.dropzone {
|
||||
border: 2px dashed var(--color-secondary);
|
||||
background: none;
|
||||
box-shadow: none !important;
|
||||
padding: 0;
|
||||
min-height: 5rem;
|
||||
border-radius: 4px;
|
||||
|
||||
.dz-button {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
&:hover .dz-button {
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.dz-error-message {
|
||||
top: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
.content {
|
||||
margin-top: 2px;
|
||||
|
|
49
web_src/less/features/dropzone.less
Normal file
49
web_src/less/features/dropzone.less
Normal file
|
@ -0,0 +1,49 @@
|
|||
.dropzone {
|
||||
border: 2px dashed var(--color-secondary) !important;
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
min-height: 5rem !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-button {
|
||||
color: var(--color-text-light) !important;
|
||||
}
|
||||
|
||||
.dropzone:hover .dz-button {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-error-message {
|
||||
top: 120px !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-image {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-image img {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview.dz-image-preview,
|
||||
.dropzone-attachments .thumbnails img {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.dropzone-attachments .thumbnails img {
|
||||
height: 120px !important;
|
||||
width: 120px !important;
|
||||
object-fit: contain !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview:hover .dz-image img {
|
||||
filter: opacity(.5) !important;
|
||||
}
|
|
@ -2,8 +2,9 @@
|
|||
|
||||
@import "./variables.less";
|
||||
@import "./shared/issuelist.less";
|
||||
@import "./features/gitgraph.less";
|
||||
@import "./features/animations.less";
|
||||
@import "./features/dropzone.less";
|
||||
@import "./features/gitgraph.less";
|
||||
@import "./features/heatmap.less";
|
||||
@import "./features/imagediff.less";
|
||||
@import "./features/codeeditor.less";
|
||||
|
|
|
@ -426,14 +426,6 @@ td.blob-hunk {
|
|||
box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent;
|
||||
}
|
||||
|
||||
.ui.form .dropzone .dz-button {
|
||||
color: rgba(158, 158, 158, .8);
|
||||
}
|
||||
|
||||
.ui.form .dropzone:hover .dz-button {
|
||||
color: rgba(158, 158, 158, 1);
|
||||
}
|
||||
|
||||
.ui.list .list > .item .header,
|
||||
.ui.list > .item .header {
|
||||
color: #dedede;
|
||||
|
|
Reference in a new issue