entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 8 Releases Wiki Activity

css: update file-upload-widget to support image preview (#84688) #462

Merged
tjund merged 2 commits from wip/84688-file-input-image-preview into main 2024-02-15 16:19:28 +01:00
Conversation 1 Commits 2 Files Changed 3 +72 -61
3 changed files with 72 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
static/includes/wcs/_bulk.scss
View File

@ -539,22 +539,19 @@ div.file-upload-widget {
font-size: 0;
cursor: pointer;
}
div.upload-done {
display: none;
}
div.click-to-upload {
display: block;
}
div.widget-message {
padding-top: 20px;
&::before {
pointer-events: none;
content: "\f016"; // file-o
font-family: FontAwesome;
content: "\f016"; // file-o
box-sizing: content-box;
font-size: 40px;
height: 1em;
display: block;
padding-top: 20px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1;
}
&::after {
pointer-events: none;
@ -564,7 +561,8 @@ div.file-upload-widget {
display: block;
position: absolute;
left: calc(50% + 10px);
top: 30px;
top: 20px;
line-height: 1;
@if ($button-background == $widget-background) {
color: $button-color;
} @else {
@ -578,13 +576,35 @@ div.file-upload-widget {
&.file-image div.widget-message::before {
content: "\f1c5"; // file-image-o
}
&.file-image div.upload-done {
background-color: $zebra-color;
padding-top: 10px;
&::before {
content: "";
background-image: var(--image-preview-url);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
font-size: 80px;
margin-top: 0;
margin-bottom: 0;
}
&::after {
content: none;
}
}
}
&.has-file {
div.file-button {
div.upload-done {
display: block;
.widget-message.click-to-upload {
display: none;
}
div.click-to-upload {
}
}
&.has-no-file {
div.file-button {
.widget-message.upload-done {
display: none;
}
}
@ -642,28 +662,44 @@ div.file-upload-widget {
&.pk-compact-file,
&.short {
div.file-button {
min-height: 50px;
}
div.widget-message.click-to-upload {
display: flex;
}
div.widget-message.upload-done,
div.widget-message.click-to-upload {
align-items: center;
padding: 5px 10px;
text-align: left;
&::before {
padding-top: 10px;
padding-right: 20px;
min-height: 70px;
div.widget-message {
display: flex;
align-items: center;
padding: 5px 10px;
text-align: left;
&::before {
margin-right: 20px;
font-size: 40px;
}
&::after {
top: 5px;
left: 38px;
}
}
&::after {
top: 2px;
left: 38px;
div.fileinfo {
text-align: left;
padding-left: 55px;
min-height: 1.5em;
margin-top: -1.5em;
}
&.file-image {
div.widget-message.upload-done {
padding-top: 5px;
&::before {
width: 2em;
font-size: 60px;
margin-top: 0;
}
}
div.fileinfo {
padding-left: 140px;
}
}
}
&.widget-readonly div.file-button {
height: 70px;
div.widget-message.upload-done {
div.widget-message {
display: none;
}
.filename {
@ -681,17 +717,6 @@ div.file-upload-widget {
margin-top: 0;
}
}
&.has-file {
div.widget-message.upload-done {
display: flex;
}
}
div.fileinfo {
text-align: left;
padding-left: 55px;
min-height: 1.5em;
margin-top: -1.5em;
}
}
div.fileprogress {
position: absolute;

14
static/toodego/_forms.scss
View File

@ -9,6 +9,7 @@ div.file-upload-widget {
}
}
&.has-file div.file-button {
background-image: linear-gradient(rgba(250, 250, 250, 0.8), rgba(250, 250, 250, 0.8)), var(--image-preview-url);
background-size: contain;
}
div.file-button.file-image {
@ -19,15 +20,15 @@ div.file-upload-widget {
&::before {
content: "";
background: url(img/photo-add.png) 50% 0px no-repeat;
box-sizing: content-box;
height: 40px;
height: 70px;
}
&.upload-done {
background-color: transparent;
padding-top: 30px;
}
}
}
&.has-file div.file-button.file-image {
div.widget-message {
background: rgba(250, 250, 250, 0.8);
}
div.widget-message::before {
background-image: url(img/photo-done.png);
}
@ -40,9 +41,6 @@ div.file-upload-widget {
background: $red;
}
}
div.fileinfo {
background: rgba(250, 250, 250, 0.8);
}
}
div.xtemplate-photo {
div.hint {

12
static/toodego/extra.js
View File

@ -898,18 +898,6 @@ $(function() {
$('div.buttons div.cancel-button button').text('Continuer').css('margin-right', '0');
}
/* photo upload, add a preview */
$('.file-button.file-image').on('wcs:image-blob', function(ev, file) {
var $widget = $(this);
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
$widget[0].style.backgroundImage = 'url(' + e.target.result + ')';
}
reader.readAsDataURL(file);
}
});
/* custom checkboxes intertitles for publik notification */
$('.template-pn-thematiques').each(function(idx, elem) {
const titles = Array();