saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-06-13 02:55:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

GoogleDrive button layout change

Browse Source
This commit is contained in:
Connor Yoh 2025-03-27 16:22:17 +00:00
parent 8438413935
commit f6e8f07afc
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/resources/static/css/fileSelect.css
View File

@ -274,10 +274,8 @@
.googleDriveButton { .googleDriveButton {
position: absolute; width: 2.5rem;
bottom: 15px; pointer-events: auto;
right: 5px;
width: 5%;
} }
.googleDriveButton img { .googleDriveButton img {
width:100% width:100%

6
src/main/resources/static/js/googleFilePicker.js
View File

@ -4,6 +4,8 @@
let tokenClient; let tokenClient;
let accessToken = sessionStorage.getItem(SESSION_STORAGE_ID); let accessToken = sessionStorage.getItem(SESSION_STORAGE_ID);
document.getElementById("google-drive-button").addEventListener('click', onGoogleDriveButtonClick);
/** /**
* Callback after api.js is loaded. * Callback after api.js is loaded.
*/ */
@ -33,7 +35,9 @@
/** /**
* Sign in the user upon button click. * Sign in the user upon button click.
*/ */
function handleAuthClick() { function onGoogleDriveButtonClick(e) {
e.stopPropagation();
tokenClient.callback = (response) => { tokenClient.callback = (response) => {
if (response.error !== undefined) { if (response.error !== undefined) {

8
src/main/resources/templates/fragments/common.html
View File

@ -229,7 +229,7 @@
};</script> };</script>
<div class="custom-file-chooser mb-3" <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}"> 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}"> th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}">
<label class="file-input-btn d-none"> <label class="file-input-btn d-none">
<input type="file" class="form-control" <input type="file" class="form-control"
@ -245,9 +245,9 @@
<div th:text="#{fileChooser.or}" style="margin-right: 5px"></div> <div th:text="#{fileChooser.or}" style="margin-right: 5px"></div>
<div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div> <div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
</div> </div>
</div> <div th:if="${@GoogleDriveEnabled == true}" id="google-drive-button" class="googleDriveButton">
<div th:if="${@GoogleDriveEnabled == true}" id="google-drive-button" class="googleDriveButton" onclick="handleAuthClick()"> <img th:src="@{'/images/google-drive.svg'}" alt="google drive">
<img th:src="@{'/images/google-drive.svg'}" alt="google drive"> </div>
</div> </div>
<div class="selected-files flex-wrap"></div> <div class="selected-files flex-wrap"></div>
</div> </div>