+
@@ -111,6 +111,29 @@ class ShopFloor {
this.wrapper.find(".sf-btn-refresh").on("click", () => this.refresh());
this.wrapper.find(".sf-btn-scan").on("click", () => this.open_scanner());
this.wrapper.find(".sf-btn-help").on("click", () => this.show_help());
+ this.wrapper.find(".sf-btn-theme").on("click", () => this.toggle_theme());
+ this.update_theme_button();
+ }
+
+ // Kiosk-friendly light/dark switch: flips the standard desk theme and persists it on the
+ // User (same as the Ctrl+Shift+G switcher), so the choice survives reloads and follows the
+ // operator's login on any device.
+ toggle_theme() {
+ const next = frappe.ui.get_current_theme() === "dark" ? "light" : "dark";
+ document.documentElement.setAttribute("data-theme-mode", next);
+ frappe.ui.set_theme(next);
+ frappe.xcall("frappe.core.doctype.user.user.switch_theme", {
+ theme: next.charAt(0).toUpperCase() + next.slice(1),
+ });
+ this.update_theme_button();
+ }
+
+ update_theme_button() {
+ const dark = frappe.ui.get_current_theme() === "dark";
+ this.wrapper
+ .find(".sf-btn-theme")
+ .html(dark ? "☀" : "☾")
+ .attr("title", dark ? __("Switch to Light Theme") : __("Switch to Dark Theme"));
}
render_shell_controls() {
@@ -1249,8 +1272,7 @@ class ShopFloor {
return;
case "1":
case "2":
- case "3":
- if (this.view === "manager") {
+ if (this.view === "manager" && MANAGER_BUCKETS[cint(e.key) - 1]) {
this.switch_bucket(MANAGER_BUCKETS[cint(e.key) - 1].key);
e.preventDefault();
}
@@ -1369,7 +1391,7 @@ class ShopFloor {
["r", __("Refresh")],
["b", __("Scan job card")],
["g then m / o", __("Switch Board / Operator view")],
- ["1 / 2 / 3", __("Switch board tab")],
+ ["1 / 2", __("Switch board tab")],
["↑ / ↓ or j / k", __("Move selection")],
["Enter", __("Open work order / run primary action")],
["Esc", __("Close detail / blur search")],
@@ -1547,6 +1569,7 @@ class ShopFloor {
.sf-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); white-space: nowrap; cursor: pointer; margin: 0; user-select: none; }
.sf-toggle input { cursor: pointer; width: 15px; height: 15px; margin: 0; }
.sf-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+ .sf-btn-theme { font-size: 15px; line-height: 1; min-width: 30px; }
.sf-title { font-size: 18px; font-weight: 700; color: var(--text-color); }
.sf-view-toggle { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; }
@@ -1609,8 +1632,17 @@ class ShopFloor {
outline: none;
}
.sf-wo-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
- .sf-wo-card.sf-selected { border-color: var(--primary); }
- .sf-wo-card.sf-focused { box-shadow: 0 0 0 2px var(--primary); }
+ [data-theme="dark"] .sf-wo-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
+ /* --primary is a fixed near-black (#171717) that the dark theme never remaps, so a ring
+ drawn with it disappears on dark cards. Light theme keeps the dark ring; dark theme
+ needs an accent colour — a light-gray ring on gray cards is still too subtle. */
+ .sf-wo-card.sf-selected { border-color: var(--primary-color, var(--primary)); }
+ .sf-wo-card.sf-focused { box-shadow: 0 0 0 2px var(--primary-color, var(--primary)); }
+ [data-theme="dark"] .sf-wo-card.sf-selected { border-color: var(--blue-500, #2490ef); }
+ [data-theme="dark"] .sf-wo-card.sf-focused {
+ box-shadow: 0 0 0 3px var(--blue-500, #2490ef);
+ border-color: transparent;
+ }
.sf-wo-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sf-wo-image { width: 66px; height: 66px; aspect-ratio: 1 / 1; align-self: center; border-radius: 12px; overflow: hidden; background: var(--bg-color); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sf-wo-image img { width: 100%; height: 100%; object-fit: cover; }
@@ -1635,6 +1667,7 @@ class ShopFloor {
.sf-wo-progress-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.sf-wo-progress-count { font-weight: 600; color: var(--text-color); font-variant-numeric: tabular-nums; }
.sf-progress { display: flex; height: 10px; border-radius: 6px; background: var(--gray-300, #d1d5db); overflow: hidden; }
+ [data-theme="dark"] .sf-progress { background: var(--gray-700, #374151); }
.sf-progress-seg { height: 100%; transition: width 0.3s ease; }
.sf-seg-done { background: var(--green-400, #9ae6b4); }
.sf-seg-wip { background: var(--orange-400, #fbd38d); }
diff --git a/erpnext/public/js/templates/shop_floor_template.html b/erpnext/public/js/templates/shop_floor_template.html
index 62e9184cef6..a606e956270 100644
--- a/erpnext/public/js/templates/shop_floor_template.html
+++ b/erpnext/public/js/templates/shop_floor_template.html
@@ -104,7 +104,7 @@
.mes-job-id {
color: var(--text-muted);
font-size: 14px;
- /* Match the indicator-pill's fixed 20px height so the Job Card id sits vertically
+ /* Match the fixed 20px height of the indicator pill so the Job Card id sits vertically
centered against the status pill in the meta row (otherwise the pill reads higher). */
line-height: 20px;
}
@@ -389,7 +389,7 @@
.mes-row {
display: flex;
align-items: center;
- gap: 16px;
+ gap: 12px;
padding: 11px 18px;
background: var(--fg-color);
border-bottom: 1px solid var(--border-color);
@@ -400,14 +400,23 @@
.mes-row:hover { background: var(--bg-color); }
.mes-row-status { flex: 0 0 150px; display: flex; align-items: center; gap: 6px; }
.mes-row-status .indicator-pill { white-space: nowrap; }
- .mes-row-id { flex: 0 0 120px; color: var(--text-muted); font-size: 14px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+ .mes-row-id { flex: 0 0 110px; color: var(--text-muted); font-size: 14px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mes-row-id a { color: var(--text-muted); }
/* Item cell: thumbnail + name on one line, so it lines up with the status/id row. */
.mes-row-item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
+ /* One fixed box for every list row thumbnail (Up Next, Completed Operations, session
+ lists) — image and initials fallback are locked to the same 32x32 so the rows always
+ line up regardless of the intrinsic image size. NOTE: never use single quotes or
+ double curly braces in the text parts of this template — the microtemplate compiler
+ cannot escape them. */
.mes-row-image {
width: 32px;
height: 32px;
- flex-shrink: 0;
+ min-width: 32px;
+ max-width: 32px;
+ min-height: 32px;
+ max-height: 32px;
+ flex: 0 0 32px;
border-radius: var(--border-radius);
overflow: hidden;
background: var(--bg-color);
@@ -416,8 +425,13 @@
align-items: center;
justify-content: center;
}
- .mes-row-image img { width: 100%; height: 100%; object-fit: cover; }
+ .mes-row-image img { width: 32px; height: 32px; object-fit: cover; display: block; }
.mes-row-image-fallback {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
@@ -435,7 +449,7 @@
}
/* Operation as its own column (was previously stacked under the item name). */
.mes-row-operation {
- flex: 0 0 140px;
+ flex: 0 0 110px;
color: var(--text-muted);
font-size: 14px;
overflow: hidden;
@@ -454,7 +468,7 @@
and vertically centers with the rest of the row. */
.mes-row-qty-uom { color: var(--text-muted); font-size: 13px; margin-left: 2px; }
.mes-row-info {
- flex: 0 0 140px;
+ flex: 0 0 120px;
text-align: right;
font-size: 14px;
color: var(--text-muted);
@@ -462,7 +476,9 @@
}
.mes-row-info--ready { color: var(--text-color); }
.mes-row-info--warn { color: var(--orange-500, #d97706); }
- .mes-row-action { flex: 0 0 auto; text-align: right; }
+ /* Fixed column widths so rows align across sections (Up Next, Completed Operations,
+ session lists) even when a row has no info text or action button. */
+ .mes-row-action { flex: 0 0 150px; text-align: right; }
.mes-row-action .btn { font-size: 14px; padding: 5px 12px; min-width: 96px; white-space: nowrap; }
@media (max-width: 768px) {
@@ -871,7 +887,7 @@
{% if (jc.item_image) { %}
{% } else { %}
{{ frappe.get_abbr(jc.finished_good || jc.production_item, 2) }}{% } %}
-
{{ jc.finished_good || jc.production_item }}
+
{{ jc.finished_good || jc.production_item }}