Feature/ux improvements (#2288)
* Multi-tool advert on pages that share functionality * Update translation files Signed-off-by: GitHub Action <action@github.com> * Rtl CSS * Upgraded tooltips on multitool. Order selected pages list. Repositionicons. Minor additional tweaks * restore gb translations * Update translation files Signed-off-by: GitHub Action <action@github.com> * remove blankspace --------- Signed-off-by: GitHub Action <action@github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This commit is contained in:
reecebrowne
@@ -3,8 +3,8 @@
|
||||
<div>
|
||||
<span th:utext="#{multiTool-advert.message(|/multi-tool|)}"></span>
|
||||
<button id="closeMultiToolAdvert" style="position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
inset-inline-end: 12px;
|
||||
inset-block-start: 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: white;
|
||||
@@ -16,13 +16,13 @@
|
||||
<style>
|
||||
.multi-toolAdvert {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-inline-start: 50%;
|
||||
max-width: 52rem;
|
||||
z-index: 0;
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border-radius: 2rem;
|
||||
padding: 10px 27px 10px 20px;
|
||||
padding-block: 10px;
|
||||
padding-inline: 20px 27px;
|
||||
font-size: 0.9rem;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
@@ -43,6 +43,7 @@
|
||||
const closeBtn = document.getElementById('closeMultiToolAdvert');
|
||||
|
||||
const cacheKey = `closeMultiToolAdvert_${window.location.pathname}`;
|
||||
const isRTL = document.documentElement.dir === 'rtl';
|
||||
|
||||
if (localStorage.getItem(cacheKey) !== 'true') {
|
||||
advert.style.display = 'flex';
|
||||
@@ -52,6 +53,13 @@
|
||||
advert.style.display = 'none';
|
||||
localStorage.setItem(cacheKey, 'true');
|
||||
});
|
||||
|
||||
|
||||
if (isRTL) {
|
||||
advert.style.transform = 'translateX(50%)'; // Flip direction for RTL
|
||||
} else {
|
||||
advert.style.transform = 'translateX(-50%)';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
@@ -31,64 +31,79 @@
|
||||
<span class="material-symbols-rounded">
|
||||
add
|
||||
</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.addFile}"></span>
|
||||
</button>
|
||||
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
|
||||
<span class="material-symbols-rounded">
|
||||
rotate_left
|
||||
</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.rotateLeft}"></span>
|
||||
</button>
|
||||
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
|
||||
<span class="material-symbols-rounded">
|
||||
rotate_right
|
||||
</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.rotateRight}"></span>
|
||||
</button>
|
||||
<button class="btn btn-secondary enable-on-file" onclick="splitAll()" disabled>
|
||||
<span class="material-symbols-rounded">
|
||||
cut
|
||||
</span>
|
||||
</button>
|
||||
<button id="select-pages-container" class="btn btn-secondary enable-on-file"
|
||||
th:title="#{multiTool.selectPages}" onclick="toggleSelectPageVisibility()" disabled>
|
||||
<span id="select-pages-button" class="material-symbols-rounded">
|
||||
event_list
|
||||
</span>
|
||||
</button>
|
||||
<button id="select-All-Container" class="btn btn-secondary enable-on-file hidden"
|
||||
onclick="toggleSelectAll()" disabled>
|
||||
<span th:title="#{multiTool.selectAll}" class="material-symbols-rounded"
|
||||
id="select-icon">select_all</span>
|
||||
<span th:title="#{multiTool.deselectAll}" class="material-symbols-rounded" style="display: none;"
|
||||
id="deselect-icon">deselect</span>
|
||||
</button>
|
||||
<div class=" button-container">
|
||||
<button th:title="#{multiTool.deleteSelected}" id="delete-button" class="btn btn-danger hidden"
|
||||
onclick="deleteSelected()">
|
||||
<span class="material-symbols-rounded">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
<button id="export-selected-button" class="btn btn-primary enable-on-file hidden"
|
||||
onclick="exportPdf(true)" disabled>
|
||||
<span th:title="#{multiTool.downloadSelected}" class="material-symbols-rounded">
|
||||
file_save
|
||||
</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.split}"></span>
|
||||
</button>
|
||||
<button class="btn btn-secondary enable-on-file" onclick="addFilesBlankAll()" disabled>
|
||||
<span class="material-symbols-rounded">
|
||||
insert_page_break
|
||||
</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.insertPageBreak}"></span>
|
||||
</button>
|
||||
<button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf(false)" disabled>
|
||||
<span th:title="#{multiTool.downloadAll}" class="material-symbols-rounded">
|
||||
download
|
||||
<button id="select-pages-container" class="btn btn-secondary enable-on-file"
|
||||
onclick="toggleSelectPageVisibility()" disabled>
|
||||
<span id="select-pages-button" class="material-symbols-rounded">
|
||||
event_list
|
||||
</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.selectPages}"></span>
|
||||
|
||||
</button>
|
||||
<button id="deselect-All-Container" class="btn btn-secondary enable-on-file hidden"
|
||||
onclick="toggleSelectAll()" disabled>
|
||||
<span class="material-symbols-rounded" id="deselect-icon">deselect</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.deselectAll}"></span>
|
||||
</button>
|
||||
<button id="select-All-Container" class="btn btn-secondary enable-on-file hidden"
|
||||
onclick="toggleSelectAll()" disabled>
|
||||
<span class="material-symbols-rounded"
|
||||
id="select-icon">select_all</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.selectAll}"></span>
|
||||
</button>
|
||||
<div class="button-container">
|
||||
<button id="delete-button" class="btn btn-danger delete hidden" onclick="deleteSelected()">
|
||||
<span class="material-symbols-rounded">delete</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.deleteSelected}"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div style="margin-left:auto">
|
||||
<button id="export-selected-button" class="btn btn-primary enable-on-file hidden"
|
||||
onclick="exportPdf(true)" disabled>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.downloadSelected}"></span>
|
||||
<span class="material-symbols-rounded">
|
||||
file_save
|
||||
</span>
|
||||
</button>
|
||||
<button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf(false)"
|
||||
disabled>
|
||||
<span class="material-symbols-rounded">
|
||||
download
|
||||
</span>
|
||||
<span class="btn-tooltip" th:text="#{multiTool.downloadAll}"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="selected-pages-display" class="selected-pages-container hidden">
|
||||
<div style="display:flex; height:3rem; margin-right:1rem">
|
||||
<h5 th:text="#{multiTool.selectedPages}" style="white-space: nowrap; margin-right: 1rem;">Selected
|
||||
Pages</h5>
|
||||
<input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10"
|
||||
value="">
|
||||
<input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10" value="">
|
||||
</div>
|
||||
<ul id="selected-pages-list" class="pages-list"></ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user