mirror of
https://github.com/devonthesofa/obsidian-note-status.git
synced 2026-07-22 05:45:04 +00:00
refactor: settings css BEM
This commit is contained in:
Aleix Soler
parent
1bc2b6fb6d
commit
595b76e081
3 changed files with 62 additions and 56 deletions
|
|
@ -27,10 +27,10 @@ export const CustomStatusItem: React.FC<Props> = ({
|
|||
return (
|
||||
<div className="custom-status-item">
|
||||
{/* Simple horizontal layout with all inputs in a row */}
|
||||
<div className="custom-status-row">
|
||||
<div className="custom-status-item__row">
|
||||
{/* Icon field - simple text input */}
|
||||
<div className="custom-status-field">
|
||||
<label className="custom-status-label">Icon</label>
|
||||
<div className="custom-status-item__field">
|
||||
<label className="custom-status-item__label">Icon</label>
|
||||
<Input
|
||||
variant="text"
|
||||
value={status.icon}
|
||||
|
|
@ -38,14 +38,17 @@ export const CustomStatusItem: React.FC<Props> = ({
|
|||
onCustomStatusChange(index, "icon", value || "")
|
||||
}
|
||||
placeholder="📝"
|
||||
className="custom-status-icon-input"
|
||||
className="custom-status-item__input custom-status-item__input--icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Name field */}
|
||||
<div className="custom-status-field custom-status-field--name">
|
||||
<label className="custom-status-label">
|
||||
Name <span className="custom-status-required">*</span>
|
||||
<div className="custom-status-item__field custom-status-item__field--name">
|
||||
<label className="custom-status-item__label">
|
||||
Name{" "}
|
||||
<span className="custom-status-item__label--required">
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<Input
|
||||
variant="text"
|
||||
|
|
@ -54,15 +57,17 @@ export const CustomStatusItem: React.FC<Props> = ({
|
|||
onCustomStatusChange(index, "name", value || "")
|
||||
}
|
||||
placeholder="e.g. In Progress"
|
||||
className={`custom-status-name-input ${
|
||||
!isValid ? "custom-status-input--invalid" : ""
|
||||
className={`custom-status-item__input custom-status-item__input--name ${
|
||||
!isValid ? "custom-status-item__input--invalid" : ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description field */}
|
||||
<div className="custom-status-field custom-status-field--description">
|
||||
<label className="custom-status-label">Description</label>
|
||||
<div className="custom-status-item__field custom-status-item__field--description">
|
||||
<label className="custom-status-item__label">
|
||||
Description
|
||||
</label>
|
||||
<Input
|
||||
variant="text"
|
||||
value={status.description || ""}
|
||||
|
|
@ -70,29 +75,29 @@ export const CustomStatusItem: React.FC<Props> = ({
|
|||
onCustomStatusChange(index, "description", value)
|
||||
}
|
||||
placeholder="Optional description"
|
||||
className="custom-status-description-input"
|
||||
className="custom-status-item__input custom-status-item__input--description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Color picker */}
|
||||
<div className="custom-status-field custom-status-field--color">
|
||||
<label className="custom-status-label">Color</label>
|
||||
<div className="custom-status-item__field custom-status-item__field--color">
|
||||
<label className="custom-status-item__label">Color</label>
|
||||
<Input
|
||||
variant="color"
|
||||
value={status.color || "#888888"}
|
||||
onChange={(value) =>
|
||||
onCustomStatusChange(index, "color", value)
|
||||
}
|
||||
className="custom-status-color-input"
|
||||
className="custom-status-item__input custom-status-item__input--color"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Remove button */}
|
||||
<div className="custom-status-field custom-status-field--actions">
|
||||
<div className="custom-status-item__field custom-status-item__field--actions">
|
||||
<button
|
||||
onClick={() => onCustomStatusRemove(index)}
|
||||
aria-label="Remove status"
|
||||
className="custom-status-remove-btn"
|
||||
className="custom-status-item__remove-btn"
|
||||
title="Remove this status"
|
||||
>
|
||||
×
|
||||
|
|
@ -101,21 +106,21 @@ export const CustomStatusItem: React.FC<Props> = ({
|
|||
</div>
|
||||
|
||||
{/* Preview row - shows how the status will look */}
|
||||
<div className="custom-status-preview">
|
||||
<div className="custom-status-item__preview">
|
||||
<span
|
||||
className="custom-status-preview-icon"
|
||||
className="custom-status-item__preview-icon"
|
||||
style={{ color: status.color }}
|
||||
>
|
||||
{displayIcon}
|
||||
</span>
|
||||
<span
|
||||
className="custom-status-preview-text"
|
||||
className="custom-status-item__preview-text"
|
||||
style={{ color: status.color }}
|
||||
>
|
||||
{status.name || "Status name"}
|
||||
</span>
|
||||
{status.description && (
|
||||
<span className="custom-status-preview-desc">
|
||||
<span className="custom-status-item__preview-desc">
|
||||
{status.description}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -123,7 +128,7 @@ export const CustomStatusItem: React.FC<Props> = ({
|
|||
|
||||
{/* Validation message */}
|
||||
{!isValid && (
|
||||
<div className="custom-status-error">
|
||||
<div className="custom-status-item__error">
|
||||
Please enter a status name
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export const CustomStatusSettings: React.FC<Props> = ({
|
|||
>
|
||||
<div className="custom-status-list">
|
||||
{settings.customStatuses.length === 0 ? (
|
||||
<div className="custom-status-empty">
|
||||
<div className="custom-status-list__empty">
|
||||
<p>
|
||||
No custom statuses yet. Click "Add Status" below
|
||||
to create your first one.
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
gap: var(--size-2-1);
|
||||
}
|
||||
|
||||
/* Custom Status Item - KISS Design */
|
||||
/* Custom Status Item - BEM Methodology */
|
||||
.custom-status-item {
|
||||
background: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
|
|
@ -60,73 +60,73 @@
|
|||
border-color: var(--interactive-hover);
|
||||
}
|
||||
|
||||
/* Main input row - horizontal layout */
|
||||
.custom-status-row {
|
||||
.custom-status-item__row {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: var(--size-4-2);
|
||||
margin-bottom: var(--size-4-2);
|
||||
}
|
||||
|
||||
/* Individual field containers */
|
||||
.custom-status-field {
|
||||
.custom-status-item__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-2-1);
|
||||
}
|
||||
|
||||
.custom-status-field--name {
|
||||
.custom-status-item__field--name {
|
||||
flex: 2;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.custom-status-field--description {
|
||||
.custom-status-item__field--description {
|
||||
flex: 2;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.custom-status-field--color {
|
||||
.custom-status-item__field--color {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.custom-status-field--actions {
|
||||
.custom-status-item__field--actions {
|
||||
flex: 0 0 auto;
|
||||
padding-top: var(--size-4-1);
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
.custom-status-label {
|
||||
.custom-status-item__label {
|
||||
font-size: var(--font-ui-smaller);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--size-2-1);
|
||||
}
|
||||
|
||||
.custom-status-required {
|
||||
.custom-status-item__label--required {
|
||||
color: var(--text-error);
|
||||
}
|
||||
|
||||
/* Input styling */
|
||||
.custom-status-icon-input {
|
||||
.custom-status-item__input {
|
||||
/* Base input styles handled by Input component */
|
||||
}
|
||||
|
||||
.custom-status-item__input--icon {
|
||||
width: 50px !important;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.custom-status-name-input {
|
||||
.custom-status-item__input--name {
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.custom-status-name-input.custom-status-input--invalid {
|
||||
.custom-status-item__input--name.custom-status-item__input--invalid {
|
||||
border-color: var(--text-error) !important;
|
||||
background: var(--background-modifier-error) !important;
|
||||
}
|
||||
|
||||
.custom-status-description-input {
|
||||
.custom-status-item__input--description {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.custom-status-color-input {
|
||||
.custom-status-item__input--color {
|
||||
width: 40px !important;
|
||||
height: 32px !important;
|
||||
border-radius: var(--radius-s);
|
||||
|
|
@ -134,12 +134,11 @@
|
|||
border: 2px solid var(--background-modifier-border) !important;
|
||||
}
|
||||
|
||||
.custom-status-color-input:hover {
|
||||
.custom-status-item__input--color:hover {
|
||||
border-color: var(--interactive-hover) !important;
|
||||
}
|
||||
|
||||
/* Remove button */
|
||||
.custom-status-remove-btn {
|
||||
.custom-status-item__remove-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-s);
|
||||
|
|
@ -152,13 +151,12 @@
|
|||
transition: all var(--anim-duration-fast) ease;
|
||||
}
|
||||
|
||||
.custom-status-remove-btn:hover {
|
||||
.custom-status-item__remove-btn:hover {
|
||||
background: var(--text-error);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Preview section */
|
||||
.custom-status-preview {
|
||||
.custom-status-item__preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--size-2-2);
|
||||
|
|
@ -169,27 +167,26 @@
|
|||
font-size: var(--font-ui-small);
|
||||
}
|
||||
|
||||
.custom-status-preview-icon {
|
||||
.custom-status-item__preview-icon {
|
||||
font-size: 1.1em;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.custom-status-preview-text {
|
||||
.custom-status-item__preview-text {
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.custom-status-preview-desc {
|
||||
.custom-status-item__preview-desc {
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.custom-status-preview-desc::before {
|
||||
.custom-status-item__preview-desc::before {
|
||||
content: "— ";
|
||||
}
|
||||
|
||||
/* Error message */
|
||||
.custom-status-error {
|
||||
.custom-status-item__error {
|
||||
color: var(--text-error);
|
||||
font-size: var(--font-ui-smaller);
|
||||
margin-top: var(--size-2-1);
|
||||
|
|
@ -199,8 +196,12 @@
|
|||
border-left: 3px solid var(--text-error);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.custom-status-empty {
|
||||
/* Custom Status List - BEM */
|
||||
.custom-status-list {
|
||||
/* Container for multiple custom status items */
|
||||
}
|
||||
|
||||
.custom-status-list__empty {
|
||||
text-align: center;
|
||||
padding: var(--size-4-4) var(--size-4-2);
|
||||
color: var(--text-muted);
|
||||
|
|
@ -210,7 +211,7 @@
|
|||
background: var(--background-primary-alt);
|
||||
}
|
||||
|
||||
.custom-status-empty p {
|
||||
.custom-status-list__empty p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue