From e861dcbbafa1da8ffcc80292e62cd8686da18f00 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 10 Apr 2021 01:43:36 +0200 Subject: [PATCH] Dropzone styling improvements (#15291) (#15374) * 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 Co-authored-by: techknowlogick --- web_src/js/index.js | 6 +++ web_src/less/_repository.less | 28 -------------- web_src/less/features/dropzone.less | 49 ++++++++++++++++++++++++ web_src/less/index.less | 3 +- web_src/less/themes/theme-arc-green.less | 8 ---- 5 files changed, 57 insertions(+), 37 deletions(-) create mode 100644 web_src/less/features/dropzone.less diff --git a/web_src/js/index.js b/web_src/js/index.js index 64f43573290..e9dd45f0a36 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -997,6 +997,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] = { @@ -2601,6 +2604,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; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 4d1d36fd6d3..840af1b5154 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -1021,11 +1021,6 @@ color: var(--color-text-light-2); font-style: italic; } - - .dropzone-attachments .thumbnails .ui.image { - max-height: 150px; - } - } .ui.form { @@ -2417,29 +2412,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; diff --git a/web_src/less/features/dropzone.less b/web_src/less/features/dropzone.less new file mode 100644 index 00000000000..0490a0da181 --- /dev/null +++ b/web_src/less/features/dropzone.less @@ -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; +} diff --git a/web_src/less/index.less b/web_src/less/index.less index 48b847d34d4..9910b93b956 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -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"; diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 104eb226fcd..876d022eb32 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.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;