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

Contained multitool toolbar within action window for vertical screens

Browse Source
This commit is contained in:
Connor Yoh 2025-03-19 14:17:51 +00:00
parent 4c382a1be9
commit 1ea1e0e560
2 changed files with 66 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/resources/static/css/multi-tool.css
View File

@ -51,16 +51,18 @@ label {
}
.mt-action-btn {
position: fixed;
bottom: 15%;
position: sticky;
bottom: 10%;
margin: auto;
margin-bottom: 25px;
border-radius: 2rem;
z-index: 12;
background-color: var(--md-sys-color-surface-container-low) ;
display: flex;
gap: 10px;
z-index: 12;
padding: 12px 0px 0px;
width: fit-content;
justify-content: center;
border-radius: 2rem;
padding: 10px 20px
}
@ -74,7 +76,7 @@ label {
.bg-card {
background-color: var(--md-sys-color-surface-5);
border-radius: 3rem;
padding: 25px 0 0;
padding: 25px 0;
}
#pages-container-wrapper {

120
src/main/resources/templates/multi-tool.html
View File

@ -14,67 +14,7 @@
<br><br>
<div class="container">
<div class="row justify-content-center">
<div class="mt-action-btn">
<button id="undo-btn" th:title="#{multiTool.undo}" class="btn btn-secondary" onclick="undo()"
disabled>
<span class="material-symbols-rounded">
undo
</span>
</button>
<button id="redo-btn" class="btn btn-secondary" th:title="#{multiTool.redo}" onclick="redo()"
disabled>
<span class="material-symbols-rounded">
redo
</span>
</button>
<button class="btn btn-secondary enable-on-file" th:title="#{multiTool.rotateLeft}"
onclick="rotateAll(-90)" disabled>
<span class="material-symbols-rounded">
rotate_left
</span>
</button>
<button class="btn btn-secondary enable-on-file" th:title="#{multiTool.rotateRight}"
onclick="rotateAll(90)" disabled>
<span class="material-symbols-rounded">
rotate_right
</span>
</button>
<button class="btn btn-secondary enable-on-file" th:title="#{multiTool.split}" onclick="splitAll()"
disabled>
<span class="material-symbols-rounded">
cut
</span>
</button>
<button class="btn btn-secondary enable-on-file" th:title="#{multiTool.insertPageBreak}"
onclick="addFilesBlankAll()" disabled>
<span class="material-symbols-rounded">
insert_page_break
</span>
</button>
<button id="select-pages-container" th:title="#{multiTool.selectPages}"
class="btn btn-secondary enable-on-file" onclick="toggleSelectPageVisibility()" disabled>
<span id="select-pages-button" class="material-symbols-rounded">
event_list
</span>
</button>
<button id="deselect-All-Container" th:title="#{multiTool.deselectAll}"
class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
<span class="material-symbols-rounded" id="deselect-icon">deselect</span>
</button>
<button id="select-All-Container" th:title="#{multiTool.selectAll}"
class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
<span class="material-symbols-rounded" id="select-icon">select_all</span>
</button>
<div class="button-container">
<button id="delete-button" th:title="#{multiTool.deleteSelected}"
class="btn btn-danger delete hidden" onclick="deleteSelected()">
<span class="material-symbols-rounded">delete</span>
</button>
</div>
</div>
<div class="col-md-12">
<div class="bg-card">
<div class="tool-header">
@ -119,13 +59,71 @@
</div>
</div>
<div class="multi-tool-container">
<div class="d-flex flex-wrap" id="pages-container-wrapper">
<div id="pages-container">
</div>
</div>
</div>
<div class="mt-action-btn">
<button id="undo-btn" th:title="#{multiTool.undo}" class="btn btn-secondary" onclick="undo()"
disabled>
<span class="material-symbols-rounded">
undo
</span>
</button>
<button id="redo-btn" class="btn btn-secondary" th:title="#{multiTool.redo}" onclick="redo()"
disabled>
<span class="material-symbols-rounded">
redo
</span>
</button>
<button class="btn btn-secondary enable-on-file" th:title="#{multiTool.rotateLeft}"
onclick="rotateAll(-90)" disabled>
<span class="material-symbols-rounded">
rotate_left
</span>
</button>
<button class="btn btn-secondary enable-on-file" th:title="#{multiTool.rotateRight}"
onclick="rotateAll(90)" disabled>
<span class="material-symbols-rounded">
rotate_right
</span>
</button>
<button class="btn btn-secondary enable-on-file" th:title="#{multiTool.split}" onclick="splitAll()"
disabled>
<span class="material-symbols-rounded">
cut
</span>
</button>
<button class="btn btn-secondary enable-on-file" th:title="#{multiTool.insertPageBreak}"
onclick="addFilesBlankAll()" disabled>
<span class="material-symbols-rounded">
insert_page_break
</span>
</button>
<button id="select-pages-container" th:title="#{multiTool.selectPages}"
class="btn btn-secondary enable-on-file" onclick="toggleSelectPageVisibility()" disabled>
<span id="select-pages-button" class="material-symbols-rounded">
event_list
</span>
</button>
<button id="deselect-All-Container" th:title="#{multiTool.deselectAll}"
class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
<span class="material-symbols-rounded" id="deselect-icon">deselect</span>
</button>
<button id="select-All-Container" th:title="#{multiTool.selectAll}"
class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
<span class="material-symbols-rounded" id="select-icon">select_all</span>
</button>
<div class="button-container">
<button id="delete-button" th:title="#{multiTool.deleteSelected}"
class="btn btn-danger delete hidden" onclick="deleteSelected()">
<span class="material-symbols-rounded">delete</span>
</button>
</div>
</div>
</div>
</div>
</div>