diff --git a/src/main/resources/static/css/fileSelect.css b/src/main/resources/static/css/fileSelect.css index 7e5553443..579135c3d 100644 --- a/src/main/resources/static/css/fileSelect.css +++ b/src/main/resources/static/css/fileSelect.css @@ -274,10 +274,8 @@ .googleDriveButton { - position: absolute; - bottom: 15px; - right: 5px; - width: 5%; + width: 2.5rem; + pointer-events: auto; } .googleDriveButton img { width:100% diff --git a/src/main/resources/static/js/googleFilePicker.js b/src/main/resources/static/js/googleFilePicker.js index 042242699..d9b02fdf1 100644 --- a/src/main/resources/static/js/googleFilePicker.js +++ b/src/main/resources/static/js/googleFilePicker.js @@ -4,6 +4,8 @@ let tokenClient; let accessToken = sessionStorage.getItem(SESSION_STORAGE_ID); + document.getElementById("google-drive-button").addEventListener('click', onGoogleDriveButtonClick); + /** * Callback after api.js is loaded. */ @@ -33,7 +35,9 @@ /** * Sign in the user upon button click. */ - function handleAuthClick() { + function onGoogleDriveButtonClick(e) { + + e.stopPropagation(); tokenClient.callback = (response) => { if (response.error !== undefined) { diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html index b0004cba2..f39c5d704 100644 --- a/src/main/resources/templates/fragments/common.html +++ b/src/main/resources/templates/fragments/common.html @@ -229,7 +229,7 @@ };</script> <div class="custom-file-chooser mb-3" th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-element-container-id=${name+'-input-container'}, data-bs-show-uploads=${showUploads}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}"> - <div class="mb-3 d-flex flex-row justify-content-center align-items-center flex-wrap input-container" + <div class="mb-3 d-flex flex-column justify-content-center align-items-center flex-wrap input-container" th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}"> <label class="file-input-btn d-none"> <input type="file" class="form-control" @@ -245,9 +245,9 @@ <div th:text="#{fileChooser.or}" style="margin-right: 5px"></div> <div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div> </div> - </div> - <div th:if="${@GoogleDriveEnabled == true}" id="google-drive-button" class="googleDriveButton" onclick="handleAuthClick()"> - <img th:src="@{'/images/google-drive.svg'}" alt="google drive"> + <div th:if="${@GoogleDriveEnabled == true}" id="google-drive-button" class="googleDriveButton"> + <img th:src="@{'/images/google-drive.svg'}" alt="google drive"> + </div> </div> <div class="selected-files flex-wrap"></div> </div>