a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(ui): interval cards leave panel, adopt panel bg

+88 -95
+2 -2
ui/components/interval_card.slint
··· 41 41 42 42 Rectangle { 43 43 border-radius: 8px * Theme.font-scale; 44 - background: Theme.surface; 44 + background: Theme.panel; 45 45 border-width: 1px; 46 46 border-color: Theme.line; 47 47 min-height: th; ··· 245 245 246 246 Rectangle { 247 247 border-radius: 8px * Theme.font-scale; 248 - background: Theme.surface; 248 + background: Theme.panel; 249 249 border-width: 1px; 250 250 border-color: Theme.line; 251 251 clip: true;
+86 -93
ui/views/rhythm_tab.slint
··· 73 73 } 74 74 } 75 75 76 - // ── Break cadence panel ───────────────────────────────────────────────── 77 - Rectangle { 78 - border-radius: 10px * Theme.font-scale; 79 - background: Theme.panel; 76 + // ── Break cadence ─────────────────────────────────────────────────────── 77 + VerticalLayout { 78 + padding-bottom: 20px * Theme.font-scale; 79 + spacing: 20px * Theme.font-scale; 80 80 81 - VerticalLayout { 82 - padding: 20px * Theme.font-scale; 83 - spacing: 20px * Theme.font-scale; 81 + SectionHeading { 82 + title: "Break cadence"; 83 + description: "Each row is an interval. ioma cycles through them in order."; 84 + } 84 85 85 - SectionHeading { 86 - title: "Break cadence"; 87 - description: "Each row is an interval. ioma cycles through them in order."; 86 + for level[i] in root.levels: IntervalCard { 87 + index: i + 1; 88 + work-mins: level.work-mins; 89 + break-mins: level.break-mins; 90 + break-secs: level.break-extra-secs; 91 + label: level.label; 92 + enforced: level.enforced; 93 + remove-clicked => { root.level-removed(i); } 94 + work-mins-changed(v) => { 95 + root.level-changed(i, { 96 + work-mins: v, 97 + break-mins: level.break-mins, 98 + break-extra-secs: level.break-extra-secs, 99 + label: level.label, 100 + enforced: level.enforced, 101 + }); 88 102 } 89 - 90 - for level[i] in root.levels: IntervalCard { 91 - index: i + 1; 92 - work-mins: level.work-mins; 93 - break-mins: level.break-mins; 94 - break-secs: level.break-extra-secs; 95 - label: level.label; 96 - enforced: level.enforced; 97 - remove-clicked => { root.level-removed(i); } 98 - work-mins-changed(v) => { 99 - root.level-changed(i, { 100 - work-mins: v, 101 - break-mins: level.break-mins, 102 - break-extra-secs: level.break-extra-secs, 103 - label: level.label, 104 - enforced: level.enforced, 105 - }); 106 - } 107 - break-mins-changed(v) => { 108 - root.level-changed(i, { 109 - work-mins: level.work-mins, 110 - break-mins: v, 111 - break-extra-secs: level.break-extra-secs, 112 - label: level.label, 113 - enforced: level.enforced, 114 - }); 115 - } 116 - break-secs-changed(v) => { 117 - root.level-changed(i, { 118 - work-mins: level.work-mins, 119 - break-mins: level.break-mins, 120 - break-extra-secs: v, 121 - label: level.label, 122 - enforced: level.enforced, 123 - }); 124 - } 125 - label-changed(v) => { 126 - root.level-changed(i, { 127 - work-mins: level.work-mins, 128 - break-mins: level.break-mins, 129 - break-extra-secs: level.break-extra-secs, 130 - label: v, 131 - enforced: level.enforced, 132 - }); 133 - } 134 - enforced-changed(v) => { 135 - root.level-changed(i, { 136 - work-mins: level.work-mins, 137 - break-mins: level.break-mins, 138 - break-extra-secs: level.break-extra-secs, 139 - label: level.label, 140 - enforced: v, 141 - }); 142 - } 103 + break-mins-changed(v) => { 104 + root.level-changed(i, { 105 + work-mins: level.work-mins, 106 + break-mins: v, 107 + break-extra-secs: level.break-extra-secs, 108 + label: level.label, 109 + enforced: level.enforced, 110 + }); 111 + } 112 + break-secs-changed(v) => { 113 + root.level-changed(i, { 114 + work-mins: level.work-mins, 115 + break-mins: level.break-mins, 116 + break-extra-secs: v, 117 + label: level.label, 118 + enforced: level.enforced, 119 + }); 120 + } 121 + label-changed(v) => { 122 + root.level-changed(i, { 123 + work-mins: level.work-mins, 124 + break-mins: level.break-mins, 125 + break-extra-secs: level.break-extra-secs, 126 + label: v, 127 + enforced: level.enforced, 128 + }); 129 + } 130 + enforced-changed(v) => { 131 + root.level-changed(i, { 132 + work-mins: level.work-mins, 133 + break-mins: level.break-mins, 134 + break-extra-secs: level.break-extra-secs, 135 + label: level.label, 136 + enforced: v, 137 + }); 143 138 } 139 + } 144 140 145 - LongRestCard { 146 - index: root.levels.length + 1; 147 - enabled <=> root.long-break-enabled; 148 - after-cycles <=> root.long-break-after-cycles; 149 - duration-mins <=> root.long-break-duration-mins; 150 - label <=> root.long-break-label; 151 - enforced <=> root.long-break-enforced; 152 - } 141 + LongRestCard { 142 + index: root.levels.length + 1; 143 + enabled <=> root.long-break-enabled; 144 + after-cycles <=> root.long-break-after-cycles; 145 + duration-mins <=> root.long-break-duration-mins; 146 + label <=> root.long-break-label; 147 + enforced <=> root.long-break-enforced; 148 + } 153 149 154 - add-ta := TouchArea { 155 - height: 44px * Theme.font-scale; 156 - accessible-role: AccessibleRole.button; 157 - accessible-label: "Add interval"; 158 - accessible-action-default => { root.level-added(); } 159 - clicked => { root.level-added(); } 150 + add-ta := TouchArea { 151 + height: 44px * Theme.font-scale; 152 + accessible-role: AccessibleRole.button; 153 + accessible-label: "Add interval"; 154 + accessible-action-default => { root.level-added(); } 155 + clicked => { root.level-added(); } 160 156 161 - Rectangle { 162 - border-radius: 8px * Theme.font-scale; 163 - background: add-ta.has-hover ? Theme.surface-hov : transparent; 164 - border-width: 1px; 165 - border-color: Theme.line-med; 157 + Rectangle { 158 + border-radius: 8px * Theme.font-scale; 159 + background: add-ta.has-hover ? Theme.surface-hov : transparent; 160 + border-width: 1px; 161 + border-color: Theme.line-med; 166 162 167 - Text { 168 - text: "+ Add interval"; 169 - font-size: Theme.font_xsmall; 170 - color: add-ta.has-hover ? Theme.ink : Theme.ink-lo; 171 - horizontal-alignment: center; 172 - vertical-alignment: center; 173 - animate color { duration: 120ms; } 174 - } 163 + Text { 164 + text: "+ Add interval"; 165 + font-size: Theme.font_xsmall; 166 + color: add-ta.has-hover ? Theme.ink : Theme.ink-lo; 167 + horizontal-alignment: center; 168 + vertical-alignment: center; 169 + animate color { duration: 120ms; } 175 170 } 176 171 } 177 172 } 178 173 } 179 - 180 - Rectangle { height: 20px * Theme.font-scale; } 181 174 182 175 // ── During breaks panel ───────────────────────────────────────────────── 183 176 Rectangle {