Fase 3 feedback round 2: live color preview, bigger top icon, dashboard links
- Style preview now updates immediately when picking a color via the
colorpicker widget. It sets the input value through jQuery's synthetic
trigger(), which a native addEventListener('change', ...) never sees -
bound the listener through jQuery instead so both native and
colorpicker-driven changes refresh the preview.
- Icon-above-QR max height raised from 25% to 62.5% of QR height (~2.5x
bigger per feedback); the existing 60%-width cap now becomes the
practical limit for most icons. Verified generated QR still decodes.
- Dashboard's "Dynamic Qr codes" and "Static QR codes" info-boxes now link
to their list pages. "Total qr codes"/"Total Scans" left as-is - no
combined-list or scan-report page exists yet to link them to.
- Random-style button now has a "Randomize" label to match its row-mates
(Load preset/Save as preset/Style preview), instead of an empty spacer.
This commit is contained in:
Vendored
+12
-3
@@ -95,9 +95,18 @@
|
||||
});
|
||||
|
||||
document.querySelectorAll('#foreground, #background').forEach(function (input) {
|
||||
input.addEventListener('change', function () {
|
||||
updateStylePreview(scopeOf(input));
|
||||
});
|
||||
// bootstrap-colorpicker sets the value and fires 'change' via jQuery's
|
||||
// synthetic .trigger(), which a native addEventListener never sees - so the
|
||||
// preview only updates via jQuery's event binding, not the native one below.
|
||||
if (window.jQuery) {
|
||||
jQuery(input).on('change', function () {
|
||||
updateStylePreview(scopeOf(input));
|
||||
});
|
||||
} else {
|
||||
input.addEventListener('change', function () {
|
||||
updateStylePreview(scopeOf(input));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('select[name="level"]').forEach(function (select) {
|
||||
|
||||
@@ -58,7 +58,7 @@ if (QRCODE_GENERATOR === "internal-chillerlan.qrcode") {
|
||||
<div class="col-sm-12 mb-2">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-3">
|
||||
<label> </label>
|
||||
<label>Randomize</label>
|
||||
<button type="button" id="random_style_btn" class="btn btn-outline-secondary btn-block">
|
||||
<i class="fa fa-dice"></i> Random style
|
||||
</button>
|
||||
|
||||
+18
-14
@@ -120,29 +120,33 @@ foreach ($createdQrcode_static as $row) {
|
||||
</div><!-- /.col -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box mb-3 bg-success">
|
||||
<span class="info-box-icon"><i class="fa fa-qrcode"></i></span>
|
||||
<a href="dynamic_qrcodes.php" class="d-block">
|
||||
<div class="info-box mb-3 bg-success">
|
||||
<span class="info-box-icon"><i class="fa fa-qrcode"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Dynamic Qr codes</span>
|
||||
<span class="info-box-number"><?php echo $numQrcode_dynamic; ?></span>
|
||||
</div><!-- /.info-box-content -->
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Dynamic Qr codes</span>
|
||||
<span class="info-box-number"><?php echo $numQrcode_dynamic; ?></span>
|
||||
</div><!-- /.info-box-content -->
|
||||
</div>
|
||||
</a>
|
||||
</div><!-- /.col -->
|
||||
|
||||
<!-- fix for small devices only -->
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box mb-3 bg-danger">
|
||||
<span class="info-box-icon"><i class="fa fa-qrcode"></i></span>
|
||||
<a href="static_qrcodes.php" class="d-block">
|
||||
<div class="info-box mb-3 bg-danger">
|
||||
<span class="info-box-icon"><i class="fa fa-qrcode"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Static QR codes</span>
|
||||
<span class="info-box-number"><?php echo $numQrcode_static; ?></span>
|
||||
</div><!-- /.info-box-content -->
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Static QR codes</span>
|
||||
<span class="info-box-number"><?php echo $numQrcode_static; ?></span>
|
||||
</div><!-- /.info-box-content -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div><!-- /.col -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
|
||||
@@ -174,7 +174,7 @@ class Qrcode {
|
||||
$iconWidth = imagesx($icon);
|
||||
$iconHeight = imagesy($icon);
|
||||
|
||||
$maxIconHeight = (int) ($height * 0.25);
|
||||
$maxIconHeight = (int) ($height * 0.625);
|
||||
$scale = min($maxIconHeight / $iconHeight, ($width * 0.6) / $iconWidth, 1);
|
||||
$targetWidth = max(1, (int) ($iconWidth * $scale));
|
||||
$targetHeight = max(1, (int) ($iconHeight * $scale));
|
||||
|
||||
@@ -159,7 +159,7 @@ class Qrcode {
|
||||
$iconWidth = imagesx($icon);
|
||||
$iconHeight = imagesy($icon);
|
||||
|
||||
$maxIconHeight = (int) ($height * 0.25);
|
||||
$maxIconHeight = (int) ($height * 0.625);
|
||||
$scale = min($maxIconHeight / $iconHeight, ($width * 0.6) / $iconWidth, 1);
|
||||
$targetWidth = max(1, (int) ($iconWidth * $scale));
|
||||
$targetHeight = max(1, (int) ($iconHeight * $scale));
|
||||
|
||||
Reference in New Issue
Block a user