feat(frontend): replace native confirms and enhance form controls
Add ConfirmDialog to replace window.confirm for delete actions Enhance SwitchGroup with grid layout, descriptions, and disabled state Update AdminView to use TagsSelect and SwitchGroup for better UX
This commit is contained in:
@@ -1318,6 +1318,11 @@ svg {
|
||||
--btn-fg: #ffffff;
|
||||
}
|
||||
|
||||
.link-button--danger {
|
||||
--btn-bg: var(--danger);
|
||||
--btn-fg: #ffffff;
|
||||
}
|
||||
|
||||
.ui-button--ghost,
|
||||
.plain-button,
|
||||
.row-actions button,
|
||||
@@ -2762,6 +2767,14 @@ button:disabled,
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.confirm-dialog__message {
|
||||
margin: 0;
|
||||
color: var(--ink-soft);
|
||||
font-size: 15px;
|
||||
font-weight: 750;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.checklist-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
@@ -7534,6 +7547,12 @@ button:disabled,
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.switch-group__options--grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.switch-control {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
@@ -7553,7 +7572,29 @@ button:disabled,
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.switch-group__options--grid .switch-control--stacked {
|
||||
min-height: 52px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
justify-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.switch-control--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
.switch-control__copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.switch-control__label {
|
||||
display: block;
|
||||
color: var(--ink-soft);
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
@@ -7561,6 +7602,21 @@ button:disabled,
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.switch-control__description {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
line-height: 1.3;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.switch-group__options--grid .switch-control__label,
|
||||
.switch-group__options--grid .switch-control__description {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.switch-control input {
|
||||
position: absolute;
|
||||
inline-size: 1px;
|
||||
|
||||
Reference in New Issue
Block a user