refactor(services): enhance TodoService with callbacks, UUID IDs, and UTF‑8 file handling
This commit is contained in:
6 files changed
+440
-44
No files matched your search
@@ -15,3 +15,5 @@
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
@import url("widgets/pomodoro.css");
|
||||
@import url("widgets/todo.css");
|
||||
@@ -0,0 +1,122 @@
|
||||
|
||||
#pomodoro-popup {
|
||||
background-color: @bg-a50;
|
||||
border-radius: apply(radius-md);
|
||||
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
|
||||
padding: 15px;
|
||||
margin-right: 20px;
|
||||
border: 1px solid @border-strong;
|
||||
}
|
||||
|
||||
#pomodoro-container {
|
||||
padding: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#pomodoro-time {
|
||||
font-size: 38px;
|
||||
font-weight: 800;
|
||||
color: @foreground;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
#pomodoro-cycle {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: @fg-a60;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
#pomodoro-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: @foreground;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
/* Base progress bar color */
|
||||
#pomodoro-progress {
|
||||
background-color: transparent;
|
||||
color: alpha(@primary, 0.3);
|
||||
border-color: @primary;
|
||||
}
|
||||
|
||||
/* Short break color */
|
||||
#pomodoro-progress-short {
|
||||
background-color: transparent;
|
||||
color: alpha(@success, 0.3);
|
||||
border-color: @success;
|
||||
}
|
||||
|
||||
/* Long break color */
|
||||
#pomodoro-progress-long {
|
||||
background-color: transparent;
|
||||
color: alpha(@error, 0.3);
|
||||
border-color: @error;
|
||||
}
|
||||
|
||||
#pomodoro-phase-btn {
|
||||
background-color: @fg-a18;
|
||||
color: alpha(@theme_fg_color, 0.7);
|
||||
border-radius: apply(radius-sm);
|
||||
padding: 5px 14px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#pomodoro-phase-btn:hover {
|
||||
background-color: @fg-a25;
|
||||
color: @theme_fg_color;
|
||||
}
|
||||
|
||||
#pomodoro-phase-btn.active {
|
||||
background-color: @primary;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#pomodoro-start-btn {
|
||||
background-color: @primary;
|
||||
color: white;
|
||||
border-radius: apply(radius-sm);
|
||||
padding: 6px 20px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#pomodoro-start-btn:hover {
|
||||
background-color: alpha(@primary, 0.8);
|
||||
}
|
||||
|
||||
#pomodoro-reset-btn, #pomodoro-secondary-btn {
|
||||
background-color: @fg-a18;
|
||||
color: @theme_fg_color;
|
||||
border-radius: apply(radius-sm);
|
||||
padding: 6px 15px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#pomodoro-reset-btn:hover, #pomodoro-secondary-btn:hover {
|
||||
background-color: @fg-a25;
|
||||
}
|
||||
|
||||
#pomodoro-spin-box {
|
||||
background-color: @fg-a18;
|
||||
border-radius: apply(radius-sm);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#pomodoro-spin-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 2px 4px;
|
||||
min-height: 16px;
|
||||
color: @theme_fg_color;
|
||||
border-radius: apply(radius-sm);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#pomodoro-spin-btn:hover {
|
||||
background-color: @fg-a25;
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
|
||||
/* === Main Todo List === */
|
||||
#todo-list-menu {
|
||||
background-color: @bg-a50;
|
||||
border-radius: apply(radius-md);
|
||||
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
|
||||
padding: 15px;
|
||||
margin-right: 20px;
|
||||
border: 1px solid @border-strong;
|
||||
}
|
||||
|
||||
#todo-main-container {
|
||||
padding: 5px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#todo-header {
|
||||
padding: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#todo-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: @foreground;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
#todo-stats {
|
||||
font-size: 12px;
|
||||
color: @fg-a60;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
/* === Add Task Section === */
|
||||
#todo-add-section {
|
||||
background-color: @fg-a18;
|
||||
border-radius: apply(radius-sm);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
#new-todo-entry {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: @foreground;
|
||||
font-size: 13px;
|
||||
font-family: "SF Pro Rounded";
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#new-todo-entry placeholder {
|
||||
color: @fg-a40;
|
||||
}
|
||||
|
||||
#add-todo-button {
|
||||
background-color: @primary;
|
||||
border-radius: apply(radius-full);
|
||||
padding: 6px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#add-todo-button:hover {
|
||||
background-color: alpha(@primary, 0.8);
|
||||
}
|
||||
|
||||
/* === Todo Items === */
|
||||
#todos-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#todo-item {
|
||||
background-color: transparent;
|
||||
border-radius: apply(radius-sm);
|
||||
padding: 8px 6px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
#todo-item:hover {
|
||||
background-color: alpha(@fg-a10, 0.3);
|
||||
}
|
||||
|
||||
#todo-divider {
|
||||
min-height: 1px;
|
||||
background-color: alpha(@fg-a20, 0.5);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* === Progress Ring === */
|
||||
#todo-progress-ring {
|
||||
background-color: transparent;
|
||||
color: alpha(@foreground, 0.15);
|
||||
border-color: @foreground;
|
||||
}
|
||||
|
||||
/* === Checkbox === */
|
||||
#todo-checkbox {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
#todo-checkbox:hover {
|
||||
background-color: alpha(@fg-a18, 0.5);
|
||||
border-radius: apply(radius-sm);
|
||||
}
|
||||
|
||||
/* === Task Text === */
|
||||
#todo-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: @foreground;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
/* === Options Button === */
|
||||
#todo-options-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 4px 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
font-size: 16px;
|
||||
color: @fg-a40;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
#todo-item:hover #todo-options-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#todo-options-btn:hover {
|
||||
color: @foreground;
|
||||
background-color: alpha(@fg-a18, 0.5);
|
||||
border-radius: apply(radius-sm);
|
||||
}
|
||||
|
||||
/* === Clear + Footer === */
|
||||
#clear-completed-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
color: @fg-a40;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#clear-completed-button:hover {
|
||||
color: @foreground;
|
||||
}
|
||||
|
||||
#todo-footer {
|
||||
font-size: 11px;
|
||||
color: @fg-a40;
|
||||
font-family: "SF Pro Rounded";
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* === Options Popover === */
|
||||
#todo-options-popover {
|
||||
background-color: @bg-a50;
|
||||
border-radius: apply(radius-md);
|
||||
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
|
||||
padding: 10px;
|
||||
margin-right: 20px;
|
||||
border: 1px solid @border-strong;
|
||||
min-width: 340px;
|
||||
}
|
||||
|
||||
#todo-options-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#todo-opt-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: @foreground;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
#todo-opt-subtitle {
|
||||
font-size: 11px;
|
||||
color: @fg-a60;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
/* === Color Swatches === */
|
||||
#todo-color-swatch {
|
||||
background-color: @fg-a18;
|
||||
border-radius: apply(radius-full);
|
||||
padding: 0;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
#todo-color-swatch:hover {
|
||||
border-color: alpha(@foreground, 0.3);
|
||||
}
|
||||
|
||||
#todo-color-swatch.selected {
|
||||
border-color: @foreground;
|
||||
box-shadow: 0 0 0 2px alpha(@foreground, 0.2);
|
||||
}
|
||||
|
||||
/* === Deadline Pill === */
|
||||
#todo-deadline-pill {
|
||||
background-color: @fg-a18;
|
||||
border-radius: apply(radius-full);
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
#todo-deadline-value {
|
||||
font-size: 12px;
|
||||
color: @foreground;
|
||||
font-family: "SF Pro Rounded";
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
/* === Stepper (reuse pomodoro style) === */
|
||||
#todo-spin-box {
|
||||
background-color: @fg-a10;
|
||||
border-radius: apply(radius-sm);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#todo-spin-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 2px 4px;
|
||||
min-height: 14px;
|
||||
color: @theme_fg_color;
|
||||
border-radius: apply(radius-sm);
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
#todo-spin-btn:hover {
|
||||
background-color: @fg-a25;
|
||||
}
|
||||
|
||||
#todo-spin-value {
|
||||
font-size: 12px;
|
||||
color: @foreground;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
/* === Preset Buttons === */
|
||||
#todo-preset-btn {
|
||||
background-color: @fg-a18;
|
||||
border-radius: apply(radius-full);
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
color: @foreground;
|
||||
font-family: "SF Pro Rounded";
|
||||
}
|
||||
|
||||
#todo-preset-btn:hover {
|
||||
background-color: @fg-a25;
|
||||
}
|
||||
Reference in new issue
Block a user