From a3be9977473dbdbfe66832bf43f4c23398f96084 Mon Sep 17 00:00:00 2001
From: Benoit Alessandroni <benoit@happy-dev.fr>
Date: Wed, 5 Aug 2020 16:52:38 +0200
Subject: [PATCH] Switch to using the new solid-form-image file input
---
src/includes/components/widgets.pug | 10 ----
src/includes/entrepreneur/profile/edit.pug | 6 +-
src/includes/mentor/profile/edit.pug | 6 +-
src/includes/mentor/resources/create.pug | 6 +-
src/includes/mentor/resources/edit.pug | 4 +-
src/scripts/coopstarter.js | 31 ----------
src/styles/index.scss | 70 +++++++++++++---------
7 files changed, 56 insertions(+), 77 deletions(-)
diff --git a/src/includes/components/widgets.pug b/src/includes/components/widgets.pug
index 0c6c1ac7..cbca0ef4 100644
--- a/src/includes/components/widgets.pug
+++ b/src/includes/components/widgets.pug
@@ -226,16 +226,6 @@ solid-widget(name="accordion-request-resource")
div
h2 ${value}
-solid-widget(name="cs-form-file-custom")
- template
- label(for="preview_image")
- solid-form-file(upload-url=`${sdn}upload/` name="preview_image" )
-
-solid-widget(name="cs-account-profile-picture")
- template
- label(for="picture")
- solid-form-file(upload-url=`${sdn}upload/` name="picture")
-
solid-widget(name="cs-display-twitter-button")
template
a.twitter-share-button(
diff --git a/src/includes/entrepreneur/profile/edit.pug b/src/includes/entrepreneur/profile/edit.pug
index a894ce0a..041b0339 100644
--- a/src/includes/entrepreneur/profile/edit.pug
+++ b/src/includes/entrepreneur/profile/edit.pug
@@ -43,8 +43,10 @@ solid-form#entrepreneur_profile_picture.block_log.block_creat_count(
widget-issuer="solid-form-hidden"
widget-slug="solid-form-hidden"
upload-url-picture=`${sdn}upload/`
- widget-picture='cs-account-profile-picture'
- class-picture='input_photo w_25'
+
+ label-picture=`${data.UploadProfilePictureLabel}`
+ widget-picture='solid-form-label-image'
+ class-picture='input_photo'
submit-button=`${data.SaveModification}`
next='entrepreneur-account-edit-confirmation'
diff --git a/src/includes/mentor/profile/edit.pug b/src/includes/mentor/profile/edit.pug
index f7189bb7..f0201e6f 100644
--- a/src/includes/mentor/profile/edit.pug
+++ b/src/includes/mentor/profile/edit.pug
@@ -76,8 +76,10 @@ solid-form#mentor_profile_picture.block_log.block_creat_count(
widget-issuer="solid-form-hidden"
widget-slug="solid-form-hidden"
upload-url-picture=`${sdn}upload/`
- widget-picture='cs-account-profile-picture'
- class-picture='input_photo w_25'
+
+ label-picture=`${data.UploadProfilePictureLabel}`
+ widget-picture='solid-form-label-image'
+ class-picture='input_photo'
submit-button=`${data.SaveModification}`
next='mentor-account-edit-confirmation'
diff --git a/src/includes/mentor/resources/create.pug b/src/includes/mentor/resources/create.pug
index cb55879e..3fa22a02 100644
--- a/src/includes/mentor/resources/create.pug
+++ b/src/includes/mentor/resources/create.pug
@@ -81,7 +81,7 @@ p.p_entete=`${data.ThankYouEnrichingDatabase}`
class-steps='required'
class-sharing='required'
class-headline='w_75'
- class-preview_image='input_photo w_25'
+ class-preview_image='input_photo'
multiple-fields='solid-form-multipleselect-label-autocompletion'
multiple-type='solid-form-multipleselect-label-autocompletion'
@@ -96,7 +96,9 @@ p.p_entete=`${data.ThankYouEnrichingDatabase}`
widget-description='solid-form-label-textarea'
widget-publication_year='solid-form-label-number'
widget-country='solid-form-dropdown-label-autocompletion'
- widget-preview_image='cs-form-file-custom'
+ widget-preview_image='solid-form-label-image-label'
+
+ class-picture='input_photo'
widget-iframe_link='solid-form-label-textarea'
upload-url-preview_image=`${sdn}upload/`
diff --git a/src/includes/mentor/resources/edit.pug b/src/includes/mentor/resources/edit.pug
index c30b2afb..4436a778 100644
--- a/src/includes/mentor/resources/edit.pug
+++ b/src/includes/mentor/resources/edit.pug
@@ -99,8 +99,8 @@ p.p_entete=`${data.ThankYouEnrichingDatabase}`
widget-publication_year='solid-form-label-number'
upload-url-preview_image=`${sdn}upload/`
- widget-preview_image='cs-form-file-custom'
- class-preview_image='input_photo w_25'
+ widget-preview_image='solid-form-label-image'
+ class-preview_image='input_photo'
submit-button=`${data.SendForValidation}`
next="resource-creation-confirmation"
diff --git a/src/scripts/coopstarter.js b/src/scripts/coopstarter.js
index 3965532a..b01d8ccb 100644
--- a/src/scripts/coopstarter.js
+++ b/src/scripts/coopstarter.js
@@ -470,28 +470,6 @@ async function selectProperLanguage() {
}
}
-/**
- * Initialise the custom form file behaviour
- * Todo : we can improve the performance adding param to reduce the loop
- */
-function initFileUpload(elementId, inputName, fileUploadLabel) {
- const parentForm = document.getElementById(elementId);
- parentForm.addEventListener("populate", e => {
- var previewImage = e.target.querySelectorAll(
- `solid-form-file input[name='${inputName}']+input`
- );
-
- var previewlabel = e.target.querySelectorAll("solid-form-file div label");
- for (let item of previewlabel) {
- item.innerHTML = fileUploadLabel;
- }
-
- for (let item of previewImage) {
- item.addEventListener("change", loadFile);
- }
- });
-}
-
/**
* Manage the like sender hidden form
* @param {*} event
@@ -1042,12 +1020,6 @@ document.addEventListener("DOMContentLoaded", event => {
};
});
- //Init the form file behaviour
- initFileUpload("resource_creation_form", "preview_image", uploadPreviewImageLabel);
- initFileUpload("resource_edition_form", "preview_image", uploadPreviewImageLabel);
-
- // initFileUpload("mentor_profile_creation", "account.picture", "Upload a file");
- initFileUpload("mentor_profile_picture", "picture", uploadProfilePictureLabel);
refreshRequestList("change_status_request", "request_list");
//Refresh data list on delete resources
@@ -1105,9 +1077,6 @@ document.addEventListener("DOMContentLoaded", event => {
//manage accordion for "More criteria"
manageAccordionMoreCriteria();
- initFileUpload("entrepreneur_profile_picture", "picture", "Upload a file");
- // initFileUpload("entrepreneur_profile_creation", "picture", "Upload a file");
-
let detailsSearcher = document.getElementById("detail-entrepreneur");
detailsSearcher.addEventListener("populate", event => {
var searcherProfileLinks = document.getElementsByTagName('cs-display-entrepreneur-link');
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 093b2ded..c301745a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -597,11 +597,24 @@ header .ico_search:before{
overflow: hidden;
display: block;
}
+solid-form-search > form {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ & > solid-form-dropdown-label[name="type"] {
+ display: none;
+ }
+}
+
solid-form-label-text, solid-form-dropdown, solid-form-dropdown-label,
solid-form-dropdown-label-autocompletion, solid-form-multipleselect-label-autocompletion, solid-form-dropdown-autocompletion, solid-form-label-number{
display: block;
width: 48.5%;
+
}
+solid-multiple-select > solid-form-dropdown-label,
solid-multiple-select > solid-form-dropdown-autocompletion,
solid-form-multipleselect > solid-form-dropdown-label-autocompletion,
solid-form-multipleselect-label-autocompletion > solid-form-dropdown {
@@ -686,35 +699,36 @@ div#mentor-database-resource-detail cs-display-property[name="name"] p{
width: 100%;
}
-.input_photo label{
- position: relative;
-}
-
-.input_photo{
+.input_photo {
text-align: left;
-}
-
-.input_photo label div{
- // position: absolute;
- left: 25%;
- // margin-top: 3rem;
-}
-.input_photo input:first-of-type{
- width: 10rem;
- height: 10rem;
- border-radius: 50%;
- margin: 0 3rem 0 0;
- background: url(../images/telecharger.png) no-repeat 52% 67% var(--bg-form);
- cursor: pointer;
-}
-
-.input_photo input[type="file"]{
- position: absolute;
- left: 0;
- width: 10rem;
- height: 10rem;
- opacity: 0;
- cursor: pointer;
+ label {
+ position: relative;
+ div {
+ left: 25%;
+ }
+ }
+ input:first-of-type {
+ display: none;
+ }
+ input:nth-of-type(2) {
+ width: 10rem;
+ height: 10rem;
+ border-radius: 50%;
+ margin: 0 3rem 0 0;
+ content:"";
+ background: url(../images/telecharger.png) no-repeat 52% 67% var(--bg-form);
+ cursor: pointer;
+ }
+ img {
+ width: 10rem;
+ height: 10rem;
+ position: relative;
+ border-radius: 50%;
+ float: right;
+ }
+ button {
+ display: none;
+ }
}
solid-form-label-text[name="iframe_link"] div{
--
GitLab