Vasyka/autocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(faq): replace confusing status pill with iOS-style toggle switch

Browse Source 
Previous pill button showed "● ACTIVE" or "○ INACTIVE" but users read
it as a status label, not a clickable action — nobody clicked to
disable.

New UI: 46×24 iOS-style switch that slides between grey (OFF) and
green (ON) with a sliding white knob, plus a text label next to it.
The whole switch is a form button — clicking flips hints_enabled.
Title attribute + label make both directions obvious: "Click pentru
a DEZACTIVA" when on, "Click pentru a ACTIVA" when off.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vasyka
2026-09-01 10:59:33 +00:00
parent 0716b70bfa
commit 6dba81502b
3 changed files with 47 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lang/en.json
+5
View File
@@ -412,6 +412,8 @@
"Class": "Class",
"Clasă (pentru pricing)": "Class (for pricing)",
"Claude API Key": "Claude API Key",
"Click pentru a ACTIVA": "Click to ENABLE",
"Click pentru a DEZACTIVA": "Click to DISABLE",
"Click pentru a redenumi": "Click to rename",
"Client": "Client",
"Client & Auto": "Client & Vehicle",
@@ -585,6 +587,7 @@
"DCT": "DCT",
"DCT (Dual-Clutch)": "DCT (Dual-Clutch)",
"DENY — interzice dreptul": "DENY — deny the permission",
"DEZACTIV": "OFF",
"DOT": "DOT",
"DSG": "DSG",
"DUPĂ": "AFTER",
@@ -1954,6 +1957,7 @@
"Succes": "Success",
"Sugerează revizie / piese de uzură.": "Suggest service / wear parts.",
"Sugestii pe pagini:": "In-page hints:",
"Sugestii „?\" pe pagini:": "In-page \"?\" hints:",
"Sumă": "Amount",
"Sumă achitată": "Sumă achitată",
"Sumă:": "Sumă:",
@@ -2066,6 +2070,7 @@
"Toate răspunsurile la un click distanță. Fiecare pagină are propriile hint-uri „?\" — sau caută mai jos.": "All answers a click away. Every page has its own \"?\" hints — or search below.",
"Toate statusurile": "All statuses",
"Toate timpurile": "All time",
"Toggle hints": "Toggle hints",
"Token generat!": "Token generated!",
"Token public": "Token public",
"Token revocat": "Token revocat",
lang/ru.json
+5
View File
@@ -412,6 +412,8 @@
"Class": "Класс",
"Clasă (pentru pricing)": "Класс (для тарификации)",
"Claude API Key": "Claude API Key",
"Click pentru a ACTIVA": "Клик, чтобы ВКЛЮЧИТЬ",
"Click pentru a DEZACTIVA": "Клик, чтобы ВЫКЛЮЧИТЬ",
"Click pentru a redenumi": "Кликните для переименования",
"Client": "Клиент",
"Client & Auto": "Клиент и авто",
@@ -585,6 +587,7 @@
"DCT": "DCT",
"DCT (Dual-Clutch)": "DCT (Dual-Clutch)",
"DENY — interzice dreptul": "DENY — запретить право",
"DEZACTIV": "ВЫКЛ",
"DOT": "DOT",
"DSG": "DSG",
"DUPĂ": "ПОСЛЕ",
@@ -1954,6 +1957,7 @@
"Succes": "Успех",
"Sugerează revizie / piese de uzură.": "Предложите ТО / расходники.",
"Sugestii pe pagini:": "Подсказки на страницах:",
"Sugestii „?\" pe pagini:": "Подсказки «?» на страницах:",
"Sumă": "Сумма",
"Sumă achitată": "Sumă achitată",
"Sumă:": "Sumă:",
@@ -2066,6 +2070,7 @@
"Toate răspunsurile la un click distanță. Fiecare pagină are propriile hint-uri „?\" — sau caută mai jos.": "Все ответы в одном клике. У каждой страницы свои подсказки «?» — или ищи ниже.",
"Toate statusurile": "Все статусы",
"Toate timpurile": "За всё время",
"Toggle hints": "Переключить подсказки",
"Token generat!": "Токен создан!",
"Token public": "Token public",
"Token revocat": "Token revocat",
resources/views/filament/tenant/pages/faq.blade.php
+37 -12
View File
@@ -101,15 +101,36 @@
.faq-search:focus { outline: 2px solid #3b82f6; outline-offset: -1px; border-color: #3b82f6; }
.faq-toggle { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.faq-toggle-lbl { color: #6b7280; font-size: 12px; }
.faq-btn-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 20px; border: 0;
font-size: 12px; font-weight: 600; cursor: pointer;
transition: all .15s;
/* iOS-style switch — makes clear both ON and OFF states are clickable */
.faq-switch {
position: relative;
width: 46px; height: 24px;
background: #d1d5db;
border-radius: 12px;
border: 0; padding: 0;
cursor: pointer;
transition: background .2s;
display: inline-block;
}
.faq-btn-toggle.on { background: #10b981; color: #fff; }
.faq-btn-toggle.off { background: #e5e7eb; color: #374151; }
.faq-btn-toggle:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.faq-switch.on { background: #10b981; }
.faq-switch::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
transition: left .2s;
}
.faq-switch.on::after { left: 24px; }
.faq-switch-lbl {
font-size: 12px; font-weight: 600;
margin-left: 8px;
min-width: 62px; display: inline-block;
}
.faq-switch-lbl.on { color: #059669; }
.faq-switch-lbl.off { color: #6b7280; }
.faq-btn-reset {
padding: 7px 14px; border-radius: 20px;
border: 1px solid #d1d5db; background: #fff; color: #6b7280;
@@ -284,12 +305,16 @@
<div class="faq-controls">
<input type="text" class="faq-search" placeholder="{{ __('Caută în ghid...') }}" wire:model.live.debounce.300ms="search">
<div class="faq-toggle">
<span class="faq-toggle-lbl">{{ __('Sugestii pe pagini:') }}</span>
<form method="POST" action="{{ route('hints.toggle') }}" style="display:inline;">
<span class="faq-toggle-lbl">{{ __('Sugestii „?" pe pagini:') }}</span>
<form method="POST" action="{{ route('hints.toggle') }}" style="display:inline-flex;align-items:center;">
@csrf
<button type="submit" class="faq-btn-toggle {{ $user?->hints_enabled ? 'on' : 'off' }}">
{{ $user?->hints_enabled ? '● ' . __('ACTIVE') : '○ ' . __('INACTIVE') }}
<button type="submit" class="faq-switch {{ $user?->hints_enabled ? 'on' : 'off' }}"
title="{{ $user?->hints_enabled ? __('Click pentru a DEZACTIVA') : __('Click pentru a ACTIVA') }}"
aria-label="{{ __('Toggle hints') }}">
</button>
<span class="faq-switch-lbl {{ $user?->hints_enabled ? 'on' : 'off' }}">
{{ $user?->hints_enabled ? __('ACTIVE') : __('DEZACTIV') }}
</span>
</form>
<form method="POST" action="{{ route('hints.reset') }}" style="display:inline;">
@csrf