mirror of
https://github.com/Sternenlabor/fabaccess-sticker-generator.git
synced 2025-03-11 14:31:41 +01:00
added new color settings & changed QR code background to white
This commit is contained in:
André Fiedler
parent
77ae56924e
commit
896d80e419
4
images/settings.svg
Normal file
4
images/settings.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z"/>
|
||||
<circle cx="16" cy="16" r="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 416 B |
33
index.html
33
index.html
@ -7,24 +7,33 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>FabAccess Sticker Generator</h1>
|
||||
<div id="fabaccess-sticker-generator">
|
||||
<fabaccess-preview-box value="" size="25"></fabaccess-preview-box>
|
||||
<main>
|
||||
<h1>FabAccess Sticker Generator</h1>
|
||||
|
||||
<fabaccess-settings-form></fabaccess-settings-form>
|
||||
<button id="settings-button" title="Settings">
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
|
||||
<div class="download-buttons">
|
||||
<button id="download-qr-code-svg">Download QR Code as SVG</button>
|
||||
<button id="download-qr-code-png">Download QR Code as PNG</button>
|
||||
<button id="add-qr-code-to-page">Add QR Code to PDF</button>
|
||||
<button id="download-pdf">Download PDF</button>
|
||||
<div id="fabaccess-sticker-generator">
|
||||
<fabaccess-preview-box value="" size="25"></fabaccess-preview-box>
|
||||
|
||||
<fabaccess-settings-form></fabaccess-settings-form>
|
||||
|
||||
<div class="download-buttons">
|
||||
<button id="download-qr-code-svg">Download QR Code as SVG</button>
|
||||
<button id="download-qr-code-png">Download QR Code as PNG</button>
|
||||
<button id="add-qr-code-to-page">Add QR Code to PDF</button>
|
||||
<button id="download-pdf">Download PDF</button>
|
||||
</div>
|
||||
|
||||
<fabaccess-pdf-viewer></fabaccess-pdf-viewer>
|
||||
</div>
|
||||
|
||||
<fabaccess-pdf-viewer></fabaccess-pdf-viewer>
|
||||
</div>
|
||||
</main>
|
||||
<fabaccess-color-settings></fabaccess-color-settings>
|
||||
</body>
|
||||
<script defer src="/src/PreviewBox.mjs" type="module"></script>
|
||||
<script defer src="/src/SettingsForm.mjs" type="module"></script>
|
||||
<script defer src="/src/ColorSettings.mjs" type="module"></script>
|
||||
<script defer src="/src/PDFViewer.mjs" type="module"></script>
|
||||
<script defer src="index.mjs" type="module"></script>
|
||||
</html>
|
||||
|
||||
25
index.mjs
25
index.mjs
@ -1,18 +1,37 @@
|
||||
import SVGRenderer from '/src/SVGRenderer.mjs'
|
||||
import PNGRenderer from '/src/PNGRenderer.mjs'
|
||||
import PDFRenderer from '/src/PDFRenderer.mjs'
|
||||
import ColorSettings from '/src/ColorSettings.mjs'
|
||||
|
||||
// Get references to the custom elements
|
||||
const box = document.querySelector('fabaccess-preview-box')
|
||||
const form = document.querySelector('fabaccess-settings-form')
|
||||
const colorSettings = document.querySelector('fabaccess-color-settings')
|
||||
|
||||
// Event listener for changes in the settings form
|
||||
form.addEventListener('change', (e) => {
|
||||
// Update the optimizeForPrint option in the SVGRenderer
|
||||
SVGRenderer.optimizeForPrint = e.detail.optimizeForPrint
|
||||
// Update the attributes of the preview box
|
||||
box.setAttribute('value', e.detail.machineID)
|
||||
box.setAttribute('size', e.detail.size)
|
||||
box.update()
|
||||
})
|
||||
|
||||
// Event listener for changes in the color settings
|
||||
colorSettings.addEventListener('colors-changed', (e) => {
|
||||
// Apply the new colors to the document
|
||||
const colors = e.detail.colors
|
||||
for (const key in colors) {
|
||||
document.documentElement.style.setProperty(`--${key}`, colors[key])
|
||||
}
|
||||
// Update the preview box
|
||||
box.update()
|
||||
})
|
||||
|
||||
// Load colors from localStorage and apply them
|
||||
ColorSettings.applyStoredColors()
|
||||
|
||||
// Add click event listeners to the buttons
|
||||
document.querySelector('#download-qr-code-svg').addEventListener('click', () => SVGRenderer.downloadSVG(form.machineID, form.size))
|
||||
document.querySelector('#download-qr-code-png').addEventListener('click', () => PNGRenderer.downloadPNG(form.machineID, form.size))
|
||||
@ -22,3 +41,9 @@ document.querySelector('#download-pdf').addEventListener('click', () => PDFRende
|
||||
// Initialize the preview box
|
||||
box.setAttribute('value', form.machineID)
|
||||
box.setAttribute('size', form.size)
|
||||
|
||||
// Show the settings dialog when the settings button is clicked
|
||||
const settingsButton = document.querySelector('#settings-button')
|
||||
settingsButton.addEventListener('click', () => {
|
||||
colorSettings.show()
|
||||
})
|
||||
|
||||
109
src/ColorSettings.css
Normal file
109
src/ColorSettings.css
Normal file
@ -0,0 +1,109 @@
|
||||
#dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#dialog {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 40px 5px 20px 5px;
|
||||
}
|
||||
|
||||
#dialog::before {
|
||||
content: 'Color Settings';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
background-color: var(--secondary-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.color-field {
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--secondary-color);
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.color-field label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input[type='color'] {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input[type='color']::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type='color']::-webkit-color-swatch {
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--secondary-color);
|
||||
}
|
||||
|
||||
input[type='color']::-moz-color-swatch {
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--secondary-color);
|
||||
}
|
||||
|
||||
#dialog-buttons {
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#dialog-buttons button {
|
||||
margin-left: 10px;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#dialog-buttons #cancel-button {
|
||||
background-color: var(--secondary-color-light);
|
||||
}
|
||||
209
src/ColorSettings.mjs
Normal file
209
src/ColorSettings.mjs
Normal file
@ -0,0 +1,209 @@
|
||||
// Create a template element to define the structure of the color settings dialog
|
||||
const template = document.createElement('template')
|
||||
template.innerHTML = /* html */ `
|
||||
<style> @import url("/src/ColorSettings.css"); </style>
|
||||
<div id="dialog-overlay">
|
||||
<div id="dialog">
|
||||
<div class="color-field">
|
||||
<input type="color" id="sticker-background-color" name="sticker-background-color" />
|
||||
<label for="sticker-background-color">Sticker Background</label>
|
||||
</div>
|
||||
<div class="color-field">
|
||||
<input type="color" id="sticker-border-color" name="sticker-border-color" />
|
||||
<label for="sticker-border-color">Sticker Border</label>
|
||||
</div>
|
||||
<div class="color-field">
|
||||
<input type="color" id="icon-color" name="icon-color" />
|
||||
<label for="icon-color">Icon Color</label>
|
||||
</div>
|
||||
<div class="color-field">
|
||||
<input type="color" id="qr-code-background-color" name="qr-code-background-color" />
|
||||
<label for="qr-code-background-color">QR Code Background</label>
|
||||
</div>
|
||||
<div class="color-field">
|
||||
<input type="color" id="qr-code-foreground-color" name="qr-code-foreground-color" />
|
||||
<label for="qr-code-foreground-color">QR Code Foreground</label>
|
||||
</div>
|
||||
<div class="color-field">
|
||||
<input type="color" id="label-color" name="label-color" />
|
||||
<label for="label-color">Label Color</label>
|
||||
</div>
|
||||
<div id="dialog-buttons">
|
||||
<button id="save-button">Save</button>
|
||||
<button id="cancel-button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
// Define a custom ColorSettings class that extends HTMLElement
|
||||
export default class ColorSettings extends HTMLElement {
|
||||
#root = null // Private property to store the root node
|
||||
|
||||
/**
|
||||
* Creates an instance of ColorSettings and initializes the component.
|
||||
*/
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
// Attach a shadow DOM tree to this element
|
||||
this.attachShadow({ mode: 'open' })
|
||||
// Append the cloned template content to the shadow root
|
||||
this.shadowRoot.append(template.content.cloneNode(true))
|
||||
|
||||
// Get the root node of the shadow DOM
|
||||
this.#root = this.shadowRoot.getRootNode()
|
||||
|
||||
// Get elements from the shadow DOM
|
||||
this.overlay = this.#root.getElementById('dialog-overlay')
|
||||
this.saveButton = this.#root.getElementById('save-button')
|
||||
this.cancelButton = this.#root.getElementById('cancel-button')
|
||||
|
||||
// Color input fields
|
||||
this.stickerBackgroundColorInput = this.#root.getElementById('sticker-background-color')
|
||||
this.stickerBorderColorInput = this.#root.getElementById('sticker-border-color')
|
||||
this.iconColorInput = this.#root.getElementById('icon-color')
|
||||
this.qrCodeBackgroundColorInput = this.#root.getElementById('qr-code-background-color')
|
||||
this.qrCodeForegroundColorInput = this.#root.getElementById('qr-code-foreground-color')
|
||||
this.labelColorInput = this.#root.getElementById('label-color')
|
||||
|
||||
// Load colors from localStorage or use default colors
|
||||
this.colors = ColorSettings.loadColors()
|
||||
|
||||
// Set input values to current colors
|
||||
this.stickerBackgroundColorInput.value = this.colors['sticker-background-color']
|
||||
this.stickerBorderColorInput.value = this.colors['sticker-border-color']
|
||||
this.iconColorInput.value = this.colors['icon-color']
|
||||
this.qrCodeBackgroundColorInput.value = this.colors['qr-code-background-color']
|
||||
this.qrCodeForegroundColorInput.value = this.colors['qr-code-foreground-color']
|
||||
this.labelColorInput.value = this.colors['label-color']
|
||||
|
||||
// Bind event listeners
|
||||
this.saveButton.addEventListener('click', this.#handleSave.bind(this))
|
||||
this.cancelButton.addEventListener('click', this.#handleCancel.bind(this))
|
||||
|
||||
// Initially hide the dialog
|
||||
this.hide()
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the color settings dialog.
|
||||
*/
|
||||
show() {
|
||||
this.overlay.style.display = 'flex'
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the color settings dialog.
|
||||
*/
|
||||
hide() {
|
||||
this.overlay.style.display = 'none'
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads colors from localStorage or uses default colors.
|
||||
* @returns {Object} - An object containing the color settings.
|
||||
*/
|
||||
static loadColors() {
|
||||
const colors = {}
|
||||
for (const key in ColorSettings.defaultColors) {
|
||||
colors[key] = localStorage.getItem(key) || ColorSettings.defaultColors[key]
|
||||
}
|
||||
return colors
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves the current colors to localStorage.
|
||||
*/
|
||||
saveColors() {
|
||||
for (const key in this.colors) {
|
||||
localStorage.setItem(key, this.colors[key])
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Applies stored colors to the document's root element.
|
||||
* This method retrieves colors from localStorage or uses default colors,
|
||||
* and sets them as CSS variables on the root element.
|
||||
*/
|
||||
static applyStoredColors() {
|
||||
const colors = ColorSettings.loadColors()
|
||||
for (const key in colors) {
|
||||
document.documentElement.style.setProperty(`--${key}`, colors[key])
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the default color values.
|
||||
* @returns {Object} - An object containing the default color settings.
|
||||
*/
|
||||
static get defaultColors() {
|
||||
const style = getComputedStyle(document.body)
|
||||
return {
|
||||
'sticker-background-color': style.getPropertyValue('--secondary-color'),
|
||||
'sticker-border-color': style.getPropertyValue('--primary-color'),
|
||||
'icon-color': style.getPropertyValue('--primary-color'),
|
||||
'qr-code-background-color': '#ffffff',
|
||||
'qr-code-foreground-color': style.getPropertyValue('--secondary-color'),
|
||||
'label-color': style.getPropertyValue('--primary-color')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatches a custom event to notify that the colors have changed.
|
||||
* @private
|
||||
*/
|
||||
#dispatchChangeEvent() {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('colors-changed', {
|
||||
detail: { colors: this.colors },
|
||||
composed: true
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the save button click event.
|
||||
* Updates colors based on user input, saves them, and notifies listeners.
|
||||
* @private
|
||||
*/
|
||||
#handleSave() {
|
||||
// Update colors from input fields
|
||||
this.colors['sticker-background-color'] = this.stickerBackgroundColorInput.value
|
||||
this.colors['sticker-border-color'] = this.stickerBorderColorInput.value
|
||||
this.colors['icon-color'] = this.iconColorInput.value
|
||||
this.colors['qr-code-background-color'] = this.qrCodeBackgroundColorInput.value
|
||||
this.colors['qr-code-foreground-color'] = this.qrCodeForegroundColorInput.value
|
||||
this.colors['label-color'] = this.labelColorInput.value
|
||||
|
||||
// Save colors to localStorage
|
||||
this.saveColors()
|
||||
|
||||
// Dispatch change event
|
||||
this.#dispatchChangeEvent()
|
||||
|
||||
// Hide the dialog
|
||||
this.hide()
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the cancel button click event.
|
||||
* Resets input fields to previous colors and hides the dialog.
|
||||
* @private
|
||||
*/
|
||||
#handleCancel() {
|
||||
// Reset input fields to current colors
|
||||
this.stickerBackgroundColorInput.value = this.colors['sticker-background-color']
|
||||
this.stickerBorderColorInput.value = this.colors['sticker-border-color']
|
||||
this.iconColorInput.value = this.colors['icon-color']
|
||||
this.qrCodeBackgroundColorInput.value = this.colors['qr-code-background-color']
|
||||
this.qrCodeForegroundColorInput.value = this.colors['qr-code-foreground-color']
|
||||
this.labelColorInput.value = this.colors['label-color']
|
||||
|
||||
// Hide the dialog
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
|
||||
// Define the custom element 'fabaccess-color-settings' associated with the ColorSettings class
|
||||
customElements.define('fabaccess-color-settings', ColorSettings)
|
||||
@ -22,7 +22,7 @@ export default class SVGRenderer {
|
||||
mtx: -1,
|
||||
ecl: machineID?.value > 60 ? 'Q' : 'H',
|
||||
ecb: true,
|
||||
pal: ['#000', 'transparent'],
|
||||
pal: ['var(--qr-code-foreground-color)', 'var(--qr-code-background-color)'],
|
||||
vrb: true
|
||||
}
|
||||
|
||||
@ -38,28 +38,16 @@ export default class SVGRenderer {
|
||||
let svgCode = `
|
||||
<svg version="1.1" viewBox="0 0 ${SVG_PIXEL_WIDTH} ${SVG_PIXEL_HEIGHT}" ${wh} xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
|
||||
<path d="m7.35 0c-4.06 0-7.33 3.27-7.33 7.33v23h-0.0197v70.7c0 4.06 3.27 7.33 7.33 7.33h182c4.06 0 7.33-3.27 7.33-7.33v-14.2h0.0197v-79.4c0-4.06-3.27-7.33-7.33-7.33z"
|
||||
fill="var(--primary-color)"/>
|
||||
fill="var(--sticker-border-color)"/>
|
||||
<path d="m10.6 6.94c-2 0-3.62 1.61-3.62 3.62v25.1h-0.0197v62.5c0 2 1.61 3.62 3.62 3.62h176c2 0 3.62-1.61 3.62-3.62v-9.02h0.0196v-78.6c0-2-1.61-3.62-3.62-3.62z"
|
||||
fill="var(--secondary-color)"/>
|
||||
fill="var(--sticker-background-color)"/>
|
||||
<path d="m70.2 21.7c-6.84 0.0014-12.7 4.91-13.9 11.7 3.7-0.194 6.98-0.607 9.32-1.13-0.0927-0.37-0.142-0.752-0.144-1.13 0-2.6 2.11-4.7 4.7-4.7s4.7 2.09 4.7 4.7-2.09 4.7-4.7 4.7c-1.31-0.0014-2.55-0.543-3.43-1.49-2.7 0.689-6.4 1.14-10.7 1.34-0.0014 0.0507-0.0024 0.103-0.0039 0.153v28.2h28.2v-28.2c0-7.78-6.3-14.1-14.1-14.1zm-37.7 2e-3c-7.78 0-14.1 6.3-14.1 14.1v2e-3c0.0072 5.97 3.78 11.3 9.39 13.3v33.7l3.77 3.94 5.63-3.94v-3.34l-1.41-3.63 1.41-1.57v-4.14l-3.28-4.71 3.28-3.13v-1.61l-1.41-3.63 1.41-1.57v-6.38c5.62-1.99 9.38-7.3 9.39-13.3-0.0014-0.0522-0.0049-0.105-0.0078-0.155-4.21-0.196-7.93-0.656-10.7-1.35-0.887 0.953-2.13 1.5-3.43 1.5-2.6 0-4.7-2.11-4.7-4.7 0-2.6 2.11-4.7 4.7-4.7 2.6 0 4.7 2.09 4.7 4.7-0.0014 0.383-0.0491 0.764-0.144 1.14 2.36 0.53 5.63 0.933 9.3 1.13-1.19-6.74-7.03-11.7-13.8-11.7zm18.5 4.74c-2.12 0.0072-4.23 0.0814-6.24 0.222 0.517 0.688 0.975 1.41 1.37 2.18 3.39-0.186 7.03-0.185 10.5 2e-3 0.389-0.764 0.842-1.5 1.35-2.18-2.23-0.153-4.57-0.228-6.91-0.219zm-16.3 1.84c-0.682 0.223-1.26 0.465-1.74 0.743-0.765 0.438-1.48 1.05-1.5 2.04-0.0218 0.992 0.692 1.64 1.45 2.08 0.497 0.291 1.09 0.542 1.79 0.774 0.639-0.478 1.11-1.17 1.31-1.96-0.908-0.26-1.58-0.532-1.95-0.756-0.087-0.0522-0.0803-0.0561-0.13-0.0923 0.0566-0.0421 0.0578-0.0589 0.165-0.12 0.387-0.222 1.05-0.484 1.92-0.735-0.195-0.8-0.667-1.49-1.31-1.96zm33.4 0c-0.638 0.478-1.11 1.17-1.31 1.96 0.983 0.28 1.68 0.581 2.04 0.812 0.0348 0.0218 0.0212 0.016 0.0472 0.0334-0.0552 0.0435-0.0596 0.0598-0.161 0.118-0.387 0.223-1.05 0.488-1.93 0.743 0.196 0.8 0.665 1.49 1.31 1.96 0.689-0.226 1.27-0.468 1.76-0.75 0.731-0.422 1.41-0.987 1.48-1.93 0.071-0.947-0.587-1.64-1.28-2.08-0.53-0.336-1.18-0.615-1.95-0.872zm-13 5.14c-2.46 0.0942-5 0.0963-7.46 2e-3 0.122 0.751 0.188 1.51 0.196 2.28 2.34 0.0827 4.73 0.0821 7.07-2e-3 0.0072-0.76 0.0742-1.52 0.194-2.28zm4.73 4.73h20.6c0.782 0 1.41 0.628 1.41 1.41v20.6c0 0.782-0.628 1.41-1.41 1.41h-20.6c-0.779 0-1.41-0.626-1.41-1.41v-20.6c0-0.779 0.63-1.41 1.41-1.41zm10.4 5.87c-3.01 0-6.01 1.14-8.31 3.43-0.458 0.46-0.458 1.21 0 1.66 0.458 0.458 1.21 0.458 1.66 0 3.66-3.66 9.63-3.66 13.3 0 0.23 0.23 0.531 0.343 0.831 0.343s0.601-0.114 0.831-0.343c0.458-0.46 0.458-1.21 0-1.66-2.3-2.29-5.3-3.43-8.31-3.43zm0 3.52c-2.19 0-4.26 0.855-5.82 2.41-0.458 0.46-0.458 1.21 0 1.66 0.458 0.458 1.21 0.458 1.66 0 1.11-1.11 2.59-1.72 4.16-1.72s3.04 0.611 4.16 1.72c0.23 0.23 0.531 0.343 0.831 0.343s0.601-0.114 0.831-0.343c0.458-0.458 0.458-1.21 0-1.66-1.55-1.55-3.62-2.41-5.81-2.41zm-2e-3 3.52c-1.21 0-2.41 0.458-3.31 1.37-0.458 0.46-0.458 1.21 0 1.66 0.458 0.458 1.21 0.458 1.66 0 0.914-0.916 2.41-0.916 3.31 0 0.231 0.23 0.531 0.343 0.831 0.343s0.601-0.114 0.831-0.343c0.458-0.46 0.458-1.21 0-1.66-0.916-0.915-2.12-1.37-3.32-1.37zm-39.9 1.18h2.35v28.2h-2.35zm39.9 2.35c-0.648 0-1.18 0.527-1.18 1.18s0.527 1.18 1.18 1.18c0.651 0 1.18-0.527 1.18-1.18s-0.525-1.18-1.18-1.18z"
|
||||
fill="var(--primary-color)"/>
|
||||
<path d="m181 91.6h-74.1v-74.1h74.1z" fill="var(--primary-color)"/>
|
||||
${QRCode(data).outerHTML.replace('<svg', '<svg x="103" y="14"').replace('fill="#000"', 'fill="var(--secondary-color)"')}
|
||||
fill="var(--icon-color)"/>
|
||||
<path d="m181 91.6h-74.1v-74.1h74.1z" fill="var(--qr-code-background-color)"/>
|
||||
${QRCode(data).outerHTML.replace('<svg', '<svg x="103" y="14"').replace('fill="#000"', 'fill="var(--qr-code-foreground-color)"')}
|
||||
</svg>
|
||||
`
|
||||
|
||||
if (this.optimizeForPrint) {
|
||||
svgCode = Utils.replace(svgCode, {
|
||||
'var(--primary-color)': Utils.getCssValue('--primary-color-print'),
|
||||
'var(--secondary-color)': Utils.getCssValue('--secondary-color-print')
|
||||
})
|
||||
} else {
|
||||
svgCode = Utils.replace(svgCode, {
|
||||
'var(--primary-color)': Utils.getCssValue('--primary-color'),
|
||||
'var(--secondary-color)': Utils.getCssValue('--secondary-color')
|
||||
})
|
||||
}
|
||||
|
||||
return svgCode
|
||||
}
|
||||
|
||||
|
||||
@ -23,8 +23,9 @@ template.innerHTML = /* html */ `
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fabaccess-checkbox id="optimize-for-laser-printer" />Optimize Colors for Laser printing</fabaccess-checkbox>`
|
||||
|
||||
<!--
|
||||
<fabaccess-checkbox id="optimize-for-laser-printer" />Optimize Colors for Laser printing</fabaccess-checkbox>
|
||||
-->
|
||||
`
|
||||
|
||||
|
||||
@ -57,21 +58,25 @@ class SettingsForm extends HTMLElement {
|
||||
|
||||
// Get form elements from the shadow DOM
|
||||
const machineIdInput = this.#root.getElementById('machineID')
|
||||
const optimizeForPrint = this.#root.getElementById('optimize-for-laser-printer')
|
||||
const size = this.#root.getElementById('size')
|
||||
//const optimizeForPrintCheckbox = this.#root.getElementById('optimize-for-laser-printer')
|
||||
const sizeSelect = this.#root.getElementById('size')
|
||||
|
||||
// Add event listener for input changes
|
||||
machineIdInput.addEventListener('keyup', this.#handleInputChange.bind(this), {
|
||||
passive: false
|
||||
})
|
||||
|
||||
size.addEventListener('change', this.#handleSelectChange.bind(this), {
|
||||
// Add event listener for size selection changes
|
||||
sizeSelect.addEventListener('change', this.#handleSelectChange.bind(this), {
|
||||
passive: false
|
||||
})
|
||||
|
||||
optimizeForPrint.addEventListener('change', this.#handleCheckboxChange.bind(this), {
|
||||
// Add event listener for checkbox changes
|
||||
/*
|
||||
optimizeForPrintCheckbox.addEventListener('change', this.#handleCheckboxChange.bind(this), {
|
||||
passive: false
|
||||
})
|
||||
*/
|
||||
|
||||
// Set focus to the machine ID input after the element is rendered
|
||||
setTimeout(() => machineIdInput.focus(), 0)
|
||||
@ -155,6 +160,7 @@ class SettingsForm extends HTMLElement {
|
||||
* @param {Event} e - The event object.
|
||||
* @private
|
||||
*/
|
||||
/*
|
||||
#handleCheckboxChange(e) {
|
||||
e.stopPropagation()
|
||||
const val = e.detail.checked
|
||||
@ -172,6 +178,7 @@ class SettingsForm extends HTMLElement {
|
||||
})
|
||||
)
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
// Define the custom element 'fabaccess-settings-form' associated with the SettingsForm class
|
||||
|
||||
87
style.css
87
style.css
@ -5,12 +5,6 @@
|
||||
--primary-color-light: color-mix(in srgb, var(--primary-color), white 20%);
|
||||
--secondary-color-dark: color-mix(in srgb, var(--secondary-color), black 20%);
|
||||
--secondary-color-light: color-mix(in srgb, var(--secondary-color), white 20%);
|
||||
/*
|
||||
--primary-color-print: oklch(from var(--primary-color) calc(l + 0.22) calc(c + 0.04) calc(h - 10));
|
||||
--secondary-color-print: oklch(from var(--secondary-color) calc(l + 0.07) c calc(h - 30));
|
||||
*/
|
||||
--primary-color-print: #66ffde;
|
||||
--secondary-color-print: #303d3e;
|
||||
--inline-start: left;
|
||||
--main-color: rgb(249 249 250);
|
||||
--toolbar-button-print-icon: url(/images/toolbar-button-print.svg);
|
||||
@ -21,6 +15,13 @@
|
||||
--toolbar-icon-bg-color: rgb(255 255 255);
|
||||
--toolbar-fg-color: rgb(255 255 255);
|
||||
--button-hover-color: rgb(102 102 103);
|
||||
|
||||
--sticker-background-color: #ffffff;
|
||||
--sticker-border-color: #000000;
|
||||
--icon-color: #000000;
|
||||
--qr-code-background-color: #ffffff;
|
||||
--qr-code-foreground-color: #000000;
|
||||
--label-color: #000000;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -35,14 +36,23 @@ body {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
width: 80%;
|
||||
max-width: 900px;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
text-indent: -15px;
|
||||
color: var(--primary-color);
|
||||
font-size: 14px;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
fabaccess-preview-box {
|
||||
@ -51,10 +61,10 @@ fabaccess-preview-box {
|
||||
}
|
||||
|
||||
#fabaccess-sticker-generator {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 2;
|
||||
float: none;
|
||||
width: auto;
|
||||
width: 80%;
|
||||
max-width: 900px;
|
||||
width: calc(100% - 40px);
|
||||
margin: 5px auto 20px auto;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
@ -63,7 +73,7 @@ fabaccess-preview-box {
|
||||
}
|
||||
|
||||
.download-buttons {
|
||||
margin: 20px 0;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.download-buttons button {
|
||||
@ -88,6 +98,58 @@ fabaccess-preview-box {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#settings-button {
|
||||
position: relative;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
font: message-box;
|
||||
float: var(--inline-start);
|
||||
min-width: 16px;
|
||||
margin: 2px 1px;
|
||||
padding: 2px 6px 0;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
color: var(--main-color);
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
background-color: #3c474d;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
#settings-button::before {
|
||||
opacity: var(--toolbar-icon-opacity);
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: '';
|
||||
background-color: var(--toolbar-icon-bg-color);
|
||||
-webkit-mask-size: cover;
|
||||
mask-size: cover;
|
||||
-webkit-mask-image: url(/images/settings.svg);
|
||||
mask-image: url(/images/settings.svg);
|
||||
}
|
||||
|
||||
#settings-button > span {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 620px) {
|
||||
fabaccess-preview-box {
|
||||
height: 300px;
|
||||
@ -110,7 +172,8 @@ fabaccess-preview-box {
|
||||
fabaccess-settings-form {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
margin: 0 0 20px 20px;
|
||||
margin: 0 0 0 20px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.download-buttons {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user