Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move the editor-buttons in the main toolbar

Browse Source 
By introducing a CSS variable for the editor-toolbars we're able to handle resizing of the viewer without complicating the code too much.
This commit is contained in:
Jonas Jenwald 2023-11-18 22:05:21 +01:00
parent 09ff1b98ee
commit 5df7c97074
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/viewer.css
View File

@ -28,6 +28,7 @@
--toolbar-icon-opacity: 0.7;
--doorhanger-icon-opacity: 0.9;
--editor-toolbar-base-offset: 105px;
--main-color: rgb(12 12 13);
--body-bg-color: rgb(212 212 215);
@ -572,15 +573,15 @@ body {
}
#editorStampParamsToolbar {
inset-inline-end: 40px;
inset-inline-end: calc(var(--editor-toolbar-base-offset) + 0px);
}
#editorInkParamsToolbar {
inset-inline-end: 68px;
inset-inline-end: calc(var(--editor-toolbar-base-offset) + 28px);
}
#editorFreeTextParamsToolbar {
inset-inline-end: 96px;
inset-inline-end: calc(var(--editor-toolbar-base-offset) + 56px);
}
#editorStampAddImage::before {
@ -1469,6 +1470,9 @@ dialog :link {
}
@media all and (max-width: 750px) {
:root {
--editor-toolbar-base-offset: 40px;
}
#outerContainer .hiddenMediumView {
display: none;
}

28
web/viewer.html
View File

@ -333,31 +333,31 @@ See https://github.com/adobe-type-tools/cmap-resources
<span id="numPages" class="toolbarLabel"></span>
</div>
<div id="toolbarViewerRight">
<button id="print" class="toolbarButton hiddenMediumView" title="Print" tabindex="32" data-l10n-id="pdfjs-print-button">
<span data-l10n-id="pdfjs-print-button-label">Print</span>
</button>
<button id="download" class="toolbarButton hiddenMediumView" title="Save" tabindex="33" data-l10n-id="pdfjs-save-button">
<span data-l10n-id="pdfjs-save-button-label">Save</span>
</button>
<div class="verticalToolbarSeparator hiddenMediumView"></div>
<div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
<button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="34" data-l10n-id="pdfjs-editor-free-text-button">
<button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-free-text-button">
<span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
</button>
<button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="35" data-l10n-id="pdfjs-editor-ink-button">
<button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="32" data-l10n-id="pdfjs-editor-ink-button">
<span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
</button>
<button id="editorStamp" class="toolbarButton" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="36" data-l10n-id="pdfjs-editor-stamp-button">
<button id="editorStamp" class="toolbarButton" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="33" data-l10n-id="pdfjs-editor-stamp-button">
<span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
</button>
</div>
<div id="editorModeSeparator" class="verticalToolbarSeparator"></div>
<button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="48" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-controls="secondaryToolbar">
<button id="print" class="toolbarButton hiddenMediumView" title="Print" tabindex="41" data-l10n-id="pdfjs-print-button">
<span data-l10n-id="pdfjs-print-button-label">Print</span>
</button>
<button id="download" class="toolbarButton hiddenMediumView" title="Save" tabindex="42" data-l10n-id="pdfjs-save-button">
<span data-l10n-id="pdfjs-save-button-label">Save</span>
</button>
<div class="verticalToolbarSeparator hiddenMediumView"></div>
<button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="43" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-controls="secondaryToolbar">
<span data-l10n-id="pdfjs-tools-button-label">Tools</span>
</button>
</div>