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

Manual redact tooltips (#2614)

Browse Source 
# Description

Added tooltips and translations to all visible buttons on manual redact

## Checklist

- [ X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ X] I have performed a self-review of my own code
- [ X] I have attached images of the change if it is UI based
- [ X] I have commented my code, particularly in hard-to-understand
areas
- [ X] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [X ] My changes generate no new warnings
- [ X] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
This commit is contained in:
reecebrowne 2025-01-06 17:43:52 +00:00 committed by GitHub
parent ddbef1c82b
commit 98d4443ebd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 83 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/main/resources/messages_en_GB.properties
View File

@ -588,11 +588,27 @@ autoRedact.submitButton=Submit
redact.title=Manual Redaction redact.title=Manual Redaction
redact.header=Manual Redaction redact.header=Manual Redaction
redact.submit=Redact redact.submit=Redact
redact.textBasedRedaction=Text based Redaction
redact.pageBasedRedaction=Page-based Redaction redact.pageBasedRedaction=Page-based Redaction
redact.convertPDFToImageLabel=Convert PDF to PDF-Image (Used to remove text behind the box) redact.convertPDFToImageLabel=Convert PDF to PDF-Image (Used to remove text behind the box)
redact.pageRedactionNumbers.title=Pages redact.pageRedactionNumbers.title=Pages
redact.pageRedactionNumbers.placeholder=(e.g. 1,2,8 or 4,7,12-16 or 2n-1) redact.pageRedactionNumbers.placeholder=(e.g. 1,2,8 or 4,7,12-16 or 2n-1)
redact.redactionColor.title=Redaction Color redact.redactionColor.title=Redaction Color
redact.export=Export
redact.upload=Upload
redact.boxRedaction=Box draw redaction
redact.zoom=Zoom
redact.zoomIn=Zoom in
redact.zoomOut=Zoom out
redact.nextPage=Next Page
redact.previousPage=Previous Page
redact.toggleSidebar=Toggle Sidebar
redact.showThumbnails=Show Thumbnails
redact.showDocumentOutline=Show Document Outline (double-click to expand/collapse all items)
redact.showAttatchments=Show Attachments
redact.showLayers=Show Layers (double-click to reset all layers to the default state)
redact.colourPicker=Colour Picker
redact.findCurrentOutlineItem=Find current outline item
#showJS #showJS
showJS.title=Show Javascript showJS.title=Show Javascript

17
src/main/resources/static/css/general.css
View File

@ -126,4 +126,19 @@ input[data-autocompleted] {
} }
.btn:hover .btn-tooltip { .btn:hover .btn-tooltip {
display: block; display: block;
} }
.btn-primary:hover .btn-tooltip {
display: block;
}
.btn-success:hover .btn-tooltip {
display: block;
}
.btn-secondary:hover .btn-tooltip {
display: block;
}
.btn-toolbarButton:hover .btn-tooltip {
display: block;
}
.toolbarButton:hover .btn-tooltip {
display: block;
}

10
src/main/resources/static/pdfjs-legacy/css/viewer-redact.css
View File

@ -4006,16 +4006,8 @@ body {
color: var(--dialog-button-hover-color); color: var(--dialog-button-hover-color);
} }
.toolbarButton > span {
display: inline-block;
width: 0;
height: 0;
overflow: hidden;
}
:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled] { :is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled] {
opacity: 0.5; background-color : rgba(169, 201, 246, 0.5);}
}
.splitToolbarButton > .toolbarButton:is(:hover, :focus-visible), .splitToolbarButton > .toolbarButton:is(:hover, :focus-visible),
.dropdownToolbarButton:hover { .dropdownToolbarButton:hover {

90
src/main/resources/templates/security/redact.html
View File

@ -86,23 +86,25 @@
<div id="toolbarSidebar"> <div id="toolbarSidebar">
<div id="toolbarSidebarLeft"> <div id="toolbarSidebarLeft">
<div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup"> <div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
<button id="viewThumbnail" class="toolbarButton toggled toolbar-btn-hover" title="Show Thumbnails" tabindex="2" <button id="viewThumbnail" class="toolbarButton toggled toolbar-btn-hover" tabindex="2"
data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView"> data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
<span data-l10n-id="pdfjs-thumbs-button-label">Thumbnails</span> <span class="btn-tooltip" th:text="#{redact.showThumbnails}"></span>
</button> </button>
<button id="viewOutline" class="toolbarButton toolbar-btn-hover" <button id="viewOutline" class="toolbarButton toolbar-btn-hover"
title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" tabindex="3"
data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false" data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false"
aria-controls="outlineView"> aria-controls="outlineView">
<span data-l10n-id="pdfjs-document-outline-button-label">Document Outline</span> <span class="btn-tooltip" th:text="#{redact.showDocumentOutline}"></span>
</button> </button>
<button id="viewAttachments" class="d-none toolbarButton" title="Show Attachments" tabindex="4" <button id="viewAttachments" class="d-none toolbarButton" tabindex="4"
data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView"> data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView">
<span class="btn-tooltip" th:text="#{redact.showAttachments}"></span>
<span data-l10n-id="pdfjs-attachments-button-label">Attachments</span> <span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
</button> </button>
<button id="viewLayers" class="d-none toolbarButton" <button id="viewLayers" class="d-none toolbarButton"
title="Show Layers (double-click to reset all layers to the default state)" tabindex="5" tabindex="5"
data-l10n-id="pdfjs-layers-button" role="radio" aria-checked="false" aria-controls="layersView"> data-l10n-id="pdfjs-layers-button" role="radio" aria-checked="false" aria-controls="layersView">
<span class="btn-tooltip" th:text="#{redact.showLayers}"></span>
<span data-l10n-id="pdfjs-layers-button-label">Layers</span> <span data-l10n-id="pdfjs-layers-button-label">Layers</span>
</button> </button>
</div> </div>
@ -112,9 +114,9 @@
<div id="outlineOptionsContainer"> <div id="outlineOptionsContainer">
<div class="verticalToolbarSeparator"></div> <div class="verticalToolbarSeparator"></div>
<button id="currentOutlineItem" class="toolbarButton" disabled="disabled" title="Find Current Outline Item" <button id="currentOutlineItem" class="toolbarButton" disabled="disabled"
tabindex="6" data-l10n-id="pdfjs-current-outline-item-button"> tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">
<span data-l10n-id="pdfjs-current-outline-item-button-label">Current Outline Item</span> <span class="btn-tooltip" th:text="#{redact.findCurrentOutlineItem}"></span>
</button> </button>
</div> </div>
</div> </div>
@ -372,9 +374,9 @@
<span id="showMoreBtnIcon" class="material-symbols-rounded">more_horiz</span> <span id="showMoreBtnIcon" class="material-symbols-rounded">more_horiz</span>
</button> </button>
</div> </div>
<button id="sidebarToggle" class="toolbarButton mt-2" title="Toggle Sidebar" tabindex="11" <button id="sidebarToggle" class="toolbarButton mt-2" tabindex="11"
data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer"> data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
<span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span> <span class="btn-tooltip" th:text="#{redact.toggleSidebar}"></span>
</button> </button>
<div class="toolbarButtonSpacer d-none"></div> <div class="toolbarButtonSpacer d-none"></div>
<button id="viewFind" class="d-none toolbarButton" title="Find in Document" tabindex="12" <button id="viewFind" class="d-none toolbarButton" title="Find in Document" tabindex="12"
@ -382,18 +384,18 @@
<span data-l10n-id="pdfjs-findbar-button-label">Find</span> <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
</button> </button>
<div class="splitToolbarButton hiddenSmallView"> <div class="splitToolbarButton hiddenSmallView">
<button class="toolbarButton btn-secondary toolbar-btn-hover" title="Previous Page" id="previous" tabindex="13" <button class="toolbarButton btn-secondary toolbar-btn-hover" id="previous" tabindex="13"
data-l10n-id="pdfjs-previous-button"> data-l10n-id="pdfjs-previous-button">
<span data-l10n-id="pdfjs-previous-button-label">Previous</span> <span class="btn-tooltip" th:text="#{redact.previousPage}"></span>
</button> </button>
<div class="splitToolbarButtonSeparator d-none"></div> <div class="splitToolbarButtonSeparator d-none"></div>
<button class="toolbarButton btn-secondary toolbar-btn-hover" title="Next Page" id="next" tabindex="14" <button class="toolbarButton btn-secondary toolbar-btn-hover" id="next" tabindex="14"
data-l10n-id="pdfjs-next-button"> data-l10n-id="pdfjs-next-button">
<span data-l10n-id="pdfjs-next-button-label">Next</span> <span class="btn-tooltip" th:text="#{redact.nextPage}"></span>
</button> </button>
</div> </div>
<span class="loadingInput start"> <span class="loadingInput start">
<input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" <input type="number" id="pageNumber" class="toolbarField" value="1" min="1" tabindex="15"
data-l10n-id="pdfjs-page-input" autocomplete="off"> data-l10n-id="pdfjs-page-input" autocomplete="off">
</span> </span>
<span id="numPages" class="toolbarLabel"></span> <span id="numPages" class="toolbarLabel"></span>
@ -401,65 +403,69 @@
</div> </div>
<div id="toolbarViewerMiddle"> <div id="toolbarViewerMiddle">
<div class="splitToolbarButton"> <div class="splitToolbarButton">
<button id="zoomOut" class="toolbarButton btn-primary toolbar-btn-hover" title="Zoom Out" tabindex="21" <button id="zoomOut" class="toolbarButton btn-primary toolbar-btn-hover" tabindex="21"
data-l10n-id="pdfjs-zoom-out-button"> data-l10n-id="pdfjs-zoom-out-button">
<span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span> <span class="btn-tooltip" th:text="#{redact.zoomOut}"></span>
</button> </button>
<div class="splitToolbarButtonSeparator"></div> <div class="splitToolbarButtonSeparator"></div>
<button id="zoomIn" class="toolbarButton btn-primary toolbar-btn-hover" title="Zoom In" tabindex="22" <button id="zoomIn" class="toolbarButton btn-primary toolbar-btn-hover" tabindex="22"
data-l10n-id="pdfjs-zoom-in-button"> data-l10n-id="pdfjs-zoom-in-button">
<span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span> <span class="btn-tooltip" th:text="#{redact.zoomIn}"></span>
</button> </button>
</div> </div>
<span id="scaleSelectContainer" class="dropdownToolbarButton"> <span id="scaleSelectContainer" class="dropdownToolbarButton">
<select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="pdfjs-zoom-select"> <select id="scaleSelect" tabindex="23" data-l10n-id="pdfjs-zoom-select">
<option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="pdfjs-page-scale-auto"> <option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="pdfjs-page-scale-auto">
Automatic Zoom</option> Automatic Zoom</option>
<option id="pageActualOption" title="" value="page-actual" data-l10n-id="pdfjs-page-scale-actual"> <option id="pageActualOption" value="page-actual" data-l10n-id="pdfjs-page-scale-actual">
Actual Size</option> Actual Size</option>
<option id="pageFitOption" title="" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page <option id="pageFitOption" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page
Fit Fit
</option> </option>
<option id="pageWidthOption" title="" value="page-width" data-l10n-id="pdfjs-page-scale-width"> <option id="pageWidthOption" value="page-width" data-l10n-id="pdfjs-page-scale-width">
Page Width</option> Page Width</option>
<option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true" <option id="customScaleOption" value="custom" disabled="disabled" hidden="true"
data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option> data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
<option title="" value="0.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 50 }'> <option value="0.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 50 }'>
50%</option> 50%</option>
<option title="" value="0.75" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 75 }'>75% <option value="0.75" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 75 }'>75%
</option> </option>
<option title="" value="1" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 100 }'> <option value="1" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 100 }'>
100%</option> 100%</option>
<option title="" value="1.25" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 125 }'>125% <option value="1.25" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 125 }'>125%
</option> </option>
<option title="" value="1.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 150 }'>150% <option value="1.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 150 }'>150%
</option> </option>
<option title="" value="2" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 200 }'> <option value="2" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 200 }'>
200%</option> 200%</option>
<option title="" value="3" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 300 }'> <option value="3" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 300 }'>
300%</option> 300%</option>
<option title="" value="4" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 400 }'> <option value="4" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 400 }'>
400%</option> 400%</option>
</select> </select>
</span> </span>
</div> </div>
<div id="redactionsToolbarViewer" class="splitToolbarButton d-flex"> <div id="redactionsToolbarViewer" class="splitToolbarButton d-flex">
<button id="man-text-select-redact" class="btn-primary" title="Text-based selection redaction" tabindex="22"> <button id="man-text-select-redact" class="btn-primary" tabindex="22">
<span class="btn-tooltip" th:text="#{redact.textBasedRedaction}"></span>
<span id="text-selection" class="material-symbols-rounded user-select-none pe-none">text_select_start <span id="text-selection" class="material-symbols-rounded user-select-none pe-none">text_select_start
</span> </span>
</button> </button>
<button id="man-shape-redact" class="btn-primary" title="Shape drawing redaction" tabindex="22"> <button id="man-shape-redact" class="btn-primary" tabindex="22">
<span class="btn-tooltip" th:text="#{redact.boxRedaction}"></span>
<span id="shape-selection" class="material-symbols-rounded user-select-none pe-none">pageless <span id="shape-selection" class="material-symbols-rounded user-select-none pe-none">pageless
</span> </span>
</button> </button>
<button id="redactionsPaletteContainer" class="btn-primary"> <button id="redactionsPaletteContainer" class="btn-primary">
<span class="btn-tooltip" th:text="#{redact.colourPicker}"></span>
<label id="redactions-palette" class="material-symbols-rounded palette-color text-center" <label id="redactions-palette" class="material-symbols-rounded palette-color text-center"
style="--palette-color: #000000;"> style="--palette-color: #000000;">
palette palette
<input type="color" name="color-picker"> <input type="color" name="color-picker">
</label> </label>
</button> </button>
<button id="apply-redaction" title="Apply changes" class="btn-success d-none" disabled> <button id="apply-redaction" class="btn-success d-none" disabled>
<span class="btn-tooltip" th:text="#{redact.applyChanges}"></span>
<span id="apply-redaction-icon" class="material-symbols-rounded"> <span id="apply-redaction-icon" class="material-symbols-rounded">
check check
</span> </span>
@ -467,22 +473,26 @@
</div> </div>
<div id="toolbarViewerRight"> <div id="toolbarViewerRight">
<div class="splitToolbarButton"> <div class="splitToolbarButton">
<button id="pdfToImageBtn" th:title="#{redact.convertPDFToImageLabel}" class="btn-success"> <button id="pdfToImageBtn" class="btn-success">
<span class="btn-tooltip" th:text="#{redact.convertPDFToImageLabel}"></span>
<span id="pdfToImageBtnIcon" class="material-symbols-rounded"> <span id="pdfToImageBtnIcon" class="material-symbols-rounded">
image image
</span> </span>
</button> </button>
<button id="pageBasedRedactionBtn" th:title="#{redact.pageBasedRedaction}" class="btn-primary"> <button id="pageBasedRedactionBtn" class="btn-primary">
<span class="btn-tooltip" th:text="#{redact.pageBasedRedaction}"></span>
<span id="pageBasedRedactionBtnIcon" class="material-symbols-rounded"> <span id="pageBasedRedactionBtnIcon" class="material-symbols-rounded">
document_scanner document_scanner
</span> </span>
</button> </button>
<button id="uploadBtn" title="Upload" class="btn-primary"> <button id="uploadBtn" class="btn-primary">
<span class="btn-tooltip" th:text="#{redact.upload}"></span>
<span id="uploadBtnIcon" class="material-symbols-rounded"> <span id="uploadBtnIcon" class="material-symbols-rounded">
upload upload
</span> </span>
</button> </button>
<button id="downloadBtn" title="Submit" class="btn-primary"> <button id="downloadBtn" class="btn-primary">
<span class="btn-tooltip" th:text="#{redact.export}"></span>
<span id="downloadBtnIcon" class="material-symbols-rounded"> <span id="downloadBtnIcon" class="material-symbols-rounded">
download download
</span> </span>