mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-08 00:03:28 +00:00
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'),
|
dictFileTooBig: $dropzone.data('file-too-big'),
|
||||||
dictRemoveFile: $dropzone.data('remove-file'),
|
dictRemoveFile: $dropzone.data('remove-file'),
|
||||||
timeout: 0,
|
timeout: 0,
|
||||||
|
thumbnailMethod: 'contain',
|
||||||
|
thumbnailWidth: 480,
|
||||||
|
thumbnailHeight: 480,
|
||||||
init() {
|
init() {
|
||||||
this.on('success', (file, data) => {
|
this.on('success', (file, data) => {
|
||||||
filenameDict[file.name] = {
|
filenameDict[file.name] = {
|
||||||
|
@ -2624,6 +2627,9 @@ $(document).ready(async () => {
|
||||||
dictFileTooBig: $dropzone.data('file-too-big'),
|
dictFileTooBig: $dropzone.data('file-too-big'),
|
||||||
dictRemoveFile: $dropzone.data('remove-file'),
|
dictRemoveFile: $dropzone.data('remove-file'),
|
||||||
timeout: 0,
|
timeout: 0,
|
||||||
|
thumbnailMethod: 'contain',
|
||||||
|
thumbnailWidth: 480,
|
||||||
|
thumbnailHeight: 480,
|
||||||
init() {
|
init() {
|
||||||
this.on('success', (file, data) => {
|
this.on('success', (file, data) => {
|
||||||
filenameDict[file.name] = data.uuid;
|
filenameDict[file.name] = data.uuid;
|
||||||
|
|
|
@ -1021,11 +1021,6 @@
|
||||||
color: var(--color-text-light-2);
|
color: var(--color-text-light-2);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropzone-attachments .thumbnails .ui.image {
|
|
||||||
max-height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.form {
|
.ui.form {
|
||||||
|
@ -2483,29 +2478,6 @@
|
||||||
padding-top: 15px;
|
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 {
|
.settings {
|
||||||
.content {
|
.content {
|
||||||
margin-top: 2px;
|
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 "./variables.less";
|
||||||
@import "./shared/issuelist.less";
|
@import "./shared/issuelist.less";
|
||||||
@import "./features/gitgraph.less";
|
|
||||||
@import "./features/animations.less";
|
@import "./features/animations.less";
|
||||||
|
@import "./features/dropzone.less";
|
||||||
|
@import "./features/gitgraph.less";
|
||||||
@import "./features/heatmap.less";
|
@import "./features/heatmap.less";
|
||||||
@import "./features/imagediff.less";
|
@import "./features/imagediff.less";
|
||||||
@import "./features/codeeditor.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;
|
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 .list > .item .header,
|
||||||
.ui.list > .item .header {
|
.ui.list > .item .header {
|
||||||
color: #dedede;
|
color: #dedede;
|
||||||
|
|
Loading…
Reference in a new issue