style(fusion_plating_shopfloor): polish the scan button pair
Matched, intentional look for the two scan controls: - Scan QR (camera, primary sticker-scan) — accent-filled blue, fa-qrcode. - Enter Code (manual / scanner-gun) — accent-tinted secondary, fa-keyboard-o. Both now use Font Awesome icons (no emoji), inline-flex aligned icon+label. Enter Code's class restructured so scan-alt persists alongside the active state when the drawer is open. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -72,6 +72,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.toolbar-btn {
|
.toolbar-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -81,8 +83,10 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $plant-text;
|
color: $plant-text;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
white-space: nowrap;
|
||||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||||
|
i { font-size: 15px; line-height: 1; }
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
||||||
@@ -93,6 +97,24 @@
|
|||||||
color: #5e4400;
|
color: #5e4400;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
// Scan pair — matched look. "Scan QR" (camera, the primary way to
|
||||||
|
// scan a printed job sticker) is accent-filled so it stands out;
|
||||||
|
// "Enter Code" (manual / hardware scanner-gun) is the accent-tinted
|
||||||
|
// secondary. Matched FA icons (fa-qrcode / fa-keyboard-o), no emoji.
|
||||||
|
&.o_fp_qr_btn {
|
||||||
|
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||||
|
border-color: #1d4ed8;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
i { color: #fff; }
|
||||||
|
&:hover { box-shadow: 0 3px 8px rgba(29, 78, 216, 0.32); }
|
||||||
|
}
|
||||||
|
&.scan-alt {
|
||||||
|
background: linear-gradient(135deg, $plant-mine-bg 0%, $plant-card-bg 100%);
|
||||||
|
border-color: $plant-mine-border;
|
||||||
|
font-weight: 600;
|
||||||
|
i { color: #1d4ed8; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 8 tiles — Work Orders, At My Station, Bakes Due, On Hold,
|
// 8 tiles — Work Orders, At My Station, Bakes Due, On Hold,
|
||||||
|
|||||||
@@ -32,9 +32,9 @@
|
|||||||
gun text drawer (a wedge gun types the code;
|
gun text drawer (a wedge gun types the code;
|
||||||
no camera). -->
|
no camera). -->
|
||||||
<QrScanner cssClass="'toolbar-btn'" label="'Scan QR'"/>
|
<QrScanner cssClass="'toolbar-btn'" label="'Scan QR'"/>
|
||||||
<button class="toolbar-btn"
|
<button class="toolbar-btn scan-alt"
|
||||||
t-att-class="state.showScan ? 'toolbar-btn active' : 'toolbar-btn'"
|
t-att-class="state.showScan ? 'active' : ''"
|
||||||
t-on-click="toggleScan">⌨️ Enter Code</button>
|
t-on-click="toggleScan"><i class="fa fa-keyboard-o me-1"/>Enter Code</button>
|
||||||
<button class="toolbar-btn handoff" t-on-click="onHandOff">🔓 Hand Off</button>
|
<button class="toolbar-btn handoff" t-on-click="onHandOff">🔓 Hand Off</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user