From 99b0150e7a2fe57e938cf44fd96233752835b393 Mon Sep 17 00:00:00 2001 From: Dimitrios Kaitantzidis <james_k23@hotmail.gr> Date: Sat, 21 Oct 2023 11:26:58 +0300 Subject: [PATCH] WIP: Adds Drap and drop --- .idea/.gitignore | 8 -- .../controller/web/GeneralWebController.java | 38 +++---- src/main/resources/messages_en_US.properties | 3 + .../resources/static/images/book-opened.svg | 18 +++ src/main/resources/templates/home.html | 3 +- src/main/resources/templates/view-pdf.html | 104 ++++++++++++++++++ 6 files changed, 146 insertions(+), 28 deletions(-) delete mode 100644 .idea/.gitignore create mode 100644 src/main/resources/static/images/book-opened.svg create mode 100644 src/main/resources/templates/view-pdf.html diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index 13566b81..00000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Editor-based HTTP Client requests -/httpRequests/ -# Datasource local storage ignored files -/dataSources/ -/dataSources.local.xml diff --git a/src/main/java/stirling/software/SPDF/controller/web/GeneralWebController.java b/src/main/java/stirling/software/SPDF/controller/web/GeneralWebController.java index 6c934290..458d7230 100644 --- a/src/main/java/stirling/software/SPDF/controller/web/GeneralWebController.java +++ b/src/main/java/stirling/software/SPDF/controller/web/GeneralWebController.java @@ -1,18 +1,9 @@ package stirling.software.SPDF.controller.web; -import java.io.IOException; -import java.nio.charset.StandardCharsets; -import java.nio.file.Files; -import java.nio.file.Path; -import java.nio.file.Paths; -import java.util.ArrayList; -import java.util.Arrays; -import java.util.HashMap; -import java.util.List; -import java.util.Map; -import java.util.Objects; -import java.util.stream.Collectors; -import java.util.stream.Stream; +import com.fasterxml.jackson.core.type.TypeReference; +import com.fasterxml.jackson.databind.ObjectMapper; +import io.swagger.v3.oas.annotations.Hidden; +import io.swagger.v3.oas.annotations.tags.Tag; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.core.io.Resource; import org.springframework.core.io.ResourceLoader; @@ -21,11 +12,14 @@ import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; -import com.fasterxml.jackson.core.type.TypeReference; -import com.fasterxml.jackson.databind.ObjectMapper; - -import io.swagger.v3.oas.annotations.Hidden; -import io.swagger.v3.oas.annotations.tags.Tag; +import java.io.IOException; +import java.nio.charset.StandardCharsets; +import java.nio.file.Files; +import java.nio.file.Path; +import java.nio.file.Paths; +import java.util.*; +import java.util.stream.Collectors; +import java.util.stream.Stream; @Controller @Tag(name = "General", description = "General APIs") @@ -80,7 +74,13 @@ public class GeneralWebController { model.addAttribute("currentPage", "merge-pdfs"); return "merge-pdfs"; } - + + @GetMapping("/view-pdf") + @Hidden + public String ViewPdfForm(Model model) { + model.addAttribute("currentPage", "view-pdf"); + return "view-pdf"; + } @GetMapping("/multi-tool") @Hidden diff --git a/src/main/resources/messages_en_US.properties b/src/main/resources/messages_en_US.properties index bc712951..96237592 100644 --- a/src/main/resources/messages_en_US.properties +++ b/src/main/resources/messages_en_US.properties @@ -126,6 +126,9 @@ adminUserSettings.submit=Save User # HOME-PAGE # ############# home.desc=Your locally hosted one-stop-shop for all your PDF needs. +home.viewPdf.title=View PDF +home.viewPdf.desc=View, annotate, add text or images +viewPdf.tags=view,read,annotate,text,image home.multiTool.title=PDF Multi Tool diff --git a/src/main/resources/static/images/book-opened.svg b/src/main/resources/static/images/book-opened.svg new file mode 100644 index 00000000..e642d31a --- /dev/null +++ b/src/main/resources/static/images/book-opened.svg @@ -0,0 +1,18 @@ +<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" + width="800px" height="800px" viewBox="0 0 318.336 318.336" + xml:space="preserve"> +<g> + <g> + <path d="M302.137,74.432h-21.031c-30.496-13.614-56.389-20.611-77.028-20.611c-26.731,0-39.245,11.649-44.906,20.535 + c-5.658-8.886-18.17-20.535-44.906-20.535c-20.638,0-46.533,7.003-77.037,20.611H16.2c-8.946,0-16.2,7.253-16.2,16.2v157.684 + c0,8.949,7.254,16.2,16.2,16.2h285.937c8.948,0,16.199-7.251,16.199-16.2V90.632C318.336,81.686,311.085,74.432,302.137,74.432z + M154.786,84.265c-0.048,0.25-0.069,0.503-0.069,0.757V233.74c-7.084-8.18-18.95-14.438-38.804-14.438 + c-35.44,0-79.927,19.432-95.813,26.947V91.528c13.608-6.927,26.31-12.587,38.156-17.096c21.745-8.271,40.526-12.511,56.004-12.511 + c18.992,0,29.37,6.354,34.986,12.511c3.241,3.554,4.91,7.038,5.698,9.192C154.852,83.985,154.791,84.243,154.786,84.265z + M298.234,246.249c-15.884-7.516-60.371-26.947-95.809-26.947c-19.859,0-31.72,6.254-38.805,14.438 + c-0.261,0.3-0.562,0.58-0.804,0.886V85.48c0.084-0.351,0.269-0.981,0.583-1.825c0.799-2.149,2.499-5.647,5.776-9.218 + c5.648-6.157,16.026-12.512,34.9-12.512c15.478,0,34.251,4.24,56.004,12.512c11.854,4.509,24.548,10.17,38.153,17.097V246.249 + L298.234,246.249z"/> + </g> +</g> +</svg> \ No newline at end of file diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html index dcea42b8..72ef3ee7 100644 --- a/src/main/resources/templates/home.html +++ b/src/main/resources/templates/home.html @@ -29,7 +29,8 @@ <!-- <div th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', svgPath='images/pipeline.svg')}"></div> --> - + + <div th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', svgPath='images/book-opened.svg')}"></div> <div th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', svgPath='images/tools.svg')}"></div> <div th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', svgPath='images/union.svg')}"></div> <div th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', svgPath='images/layout-split.svg')}"></div> diff --git a/src/main/resources/templates/view-pdf.html b/src/main/resources/templates/view-pdf.html new file mode 100644 index 00000000..1338f37d --- /dev/null +++ b/src/main/resources/templates/view-pdf.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org"> + +<th:block th:insert="~{fragments/common :: head(title=#{multiTool.title})}"></th:block> + +<body> +<div id="image-highlighter"></div> +<div id="page-container"> + <div id="content-wrap"> + <div th:insert="~{fragments/navbar.html :: navbar}"></div> + <br> <br> + <div class="container"> + <fieldset class="upload_dropZone text-center mb-3 p-4"> + + <legend class="visually-hidden">Image uploader</legend> + + <svg class="upload_svg" width="60" height="60" aria-hidden="true"> + <use href="#icon-imageUpload"></use> + </svg> + + <p class="small my-2">Drag & Drop PDF(s) inside dashed region<br><i>or</i></p> + + <input id="upload_image_background" data-post-name="image_background" + data-post-url="https://someplace.com/image/uploads/backgrounds/" + class="position-absolute invisible" type="file" multiple + accept="image/jpeg, image/png, image/svg+xml"/> + + <label class="btn btn-upload mb-3" for="upload_image_background">Choose file(s)</label> + + <div class="upload_gallery d-flex flex-wrap justify-content-center gap-3 mb-0"></div> + + </fieldset> + </div> + + </div> + <div th:insert="~{fragments/footer.html :: footer}"></div> +</div> +<div id="drag-container"></div> + +<script type="module"> + +</script> + +<style> + fieldset { + --colorPrimaryNormal: #00b3bb; + --colorPrimaryDark: #00979f; + --colorPrimaryGlare: #00cdd7; + --colorPrimaryHalf: #80d9dd; + --colorPrimaryQuarter: #bfecee; + --colorPrimaryEighth: #dff5f7; + --colorPrimaryPale: #f3f5f7; + --colorPrimarySeparator: #f3f5f7; + --colorPrimaryOutline: #dff5f7; + --colorButtonNormal: #00b3bb; + --colorButtonHover: #00cdd7; + --colorLinkNormal: #00979f; + --colorLinkHover: #00cdd7; + + } + + body { + margin: 24px; + } + + .upload_dropZone { + color: var(--base-font-color); + background-color: var(--background-color); + outline: 2px dashed var(--scroll-bar-color, #c1ddef); + outline-offset: -12px; + transition: outline-offset 0.2s ease-out, + outline-color 0.3s ease-in-out, + background-color 0.2s ease-out; + } + + .upload_dropZone.highlight { + outline-offset: -4px; + outline-color: var(--bs-blue, #0576bd); + background-color: var(--colorPrimaryEighth, #c8dadf); + } + + .upload_svg { + fill: var(--bs-blue, #0576bd); + } + + .btn-upload { + color: #fff; + background-color: var(--bs-blue); + } + + .btn-upload:hover, + .btn-upload:focus { + color: #fff; + background-color: var(--bs-blue); + } + + .upload_img { + width: calc(33.333% - (2rem / 3)); + object-fit: contain; + } +</style> +</body> + +</html>