2 |
4 |
5 |
7 |
8 |
10 |
11 |
13 |
--------------------------------------------------------------------------------
/src/app/screen-tasks/empty-state/empty-state.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl: './empty-state.html',
5 | styleUrls: ['./empty-state.scss'],
6 | selector: 'empty-state',
7 | encapsulation: ViewEncapsulation.None,
8 | changeDetection: ChangeDetectionStrategy.OnPush,
9 | })
10 | export class EmptyStateComponent {}
11 |
--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # You can see what browsers were selected by your queries by running:
6 | # npx browserslist
7 |
8 | last 1 Chrome versions
9 | last 1 Firefox versions
10 |
--------------------------------------------------------------------------------
/src/assets/icons/brightness_medium.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/manifest.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Timer",
3 | "short_name": "Timer",
4 | "theme_color": "#82bd17",
5 | "background_color": "#2c2c2c",
6 | "display": "standalone",
7 | "scope": ".",
8 | "start_url": "./",
9 | "icons": [
10 | {
11 | "src": "assets/favicon.svg",
12 | "sizes": "48x48 72x72 96x96 128x128 256x256",
13 | "type": "image/svg+xml",
14 | "purpose": "any"
15 | }
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/src/assets/icons/more_vert.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/utils/router.ts:
--------------------------------------------------------------------------------
1 | import { ActivatedRouteSnapshot } from '@angular/router';
2 |
3 | export const getAllChildren = (route: ActivatedRouteSnapshot): ActivatedRouteSnapshot[] => {
4 | return route.children.flatMap((child) => [child, ...getAllChildren(child)]);
5 | };
6 |
7 | export const getAllParents = (route: ActivatedRouteSnapshot): ActivatedRouteSnapshot[] => {
8 | return route.parent ? [route.parent, ...getAllParents(route.parent)] : [];
9 | };
10 |
--------------------------------------------------------------------------------
/src/assets/icons/play_circle.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/icons/dark_mode.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/icons/pause_circle.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/icons/check_circle.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/e2e/page-objects/menu-task-actions.ts:
--------------------------------------------------------------------------------
1 | import { e2e } from '../utils';
2 |
3 | export const menuTaskActions = {
4 | selectorState: e2e('button-task-actions__selector-state'),
5 | optionActive: e2e('button-task-actions__state-option-active'),
6 | optionFinished: e2e('button-task-actions__state-option-finished'),
7 | optionDropped: e2e('button-task-actions__state-option-dropped'),
8 | buttonRename: e2e('button-task-actions__button-rename'),
9 | buttonDelete: e2e('button-task-actions__button-delete'),
10 | };
11 |
--------------------------------------------------------------------------------
/src/app/dialog-hotkeys-cheatsheet/dialog-hotkeys-cheatsheet.html:
--------------------------------------------------------------------------------
1 | Keyboard shortcuts
2 |
3 |
14 | -
4 | @for (key of keys; track key.action) {
5 |
- 6 | @for (formatted of key.formatted | map: withoutCyrillics; track formatted) { 7 | {{ formatted }} 8 | } 9 | 10 |
- {{ key.description }} 11 | } 12 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/app/guards/game-state.ts:
--------------------------------------------------------------------------------
1 | import { inject } from '@angular/core';
2 | import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot } from '@angular/router';
3 | import { isValidTaskState } from '@app/domain/task';
4 |
5 | export const gameStateGuard: CanActivateFn = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
6 | const tasksState = next.params.state;
7 | return (tasksState && isValidTaskState(tasksState)) || tasksState === 'all'
8 | ? true
9 | : inject(Router).navigate(['/active']);
10 | };
11 |
--------------------------------------------------------------------------------
/src/assets/favicon.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/light_mode.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/screen-task/type-safe-virtual-for.ts:
--------------------------------------------------------------------------------
1 | import { CdkVirtualForOfContext } from '@angular/cdk/scrolling';
2 | import { Directive, input } from '@angular/core';
3 |
4 | // https://github.com/angular/components/issues/26609
5 | @Directive({
6 | selector: '[cdkVirtualFor]',
7 | })
8 | export class TypeSafeCdkVirtualForDirectiveCreate task
2 | 9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/app/dialog-rename-task/dialog-rename-task.html:
--------------------------------------------------------------------------------
1 | Rename task
2 | 9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/.testcaferc.cjs:
--------------------------------------------------------------------------------
1 | /** @type {TestCafeConfigurationOptions} */
2 | module.exports = {
3 | src: './e2e/fixtures/',
4 | baseUrl: 'http://localhost:4200/',
5 | screenshots: {
6 | path: './e2e/screenshots',
7 | takeOnFails: true,
8 | },
9 | compilerOptions: {
10 | typescript: {
11 | options: {
12 | esModuleInterop: true,
13 | },
14 | },
15 | },
16 | reporter: [
17 | {
18 | name: 'spec-plus',
19 | filter: ['It has just been rewritten with a recent screenshot', 'The browser window was resized'],
20 | },
21 | ],
22 | hooks: {
23 | test: {
24 | before: async (t) => {
25 | const client = await t.getCurrentCDPSession();
26 | client.Animation.setPlaybackRate({ playbackRate: 100000 });
27 | await t.resizeWindow(1920, 1080);
28 | },
29 | },
30 | },
31 | };
32 |
--------------------------------------------------------------------------------
/e2e/page-objects/dialog-split-session.ts:
--------------------------------------------------------------------------------
1 | import { Selector, t } from 'testcafe';
2 | import { e2e } from '../utils';
3 |
4 | const sliderInput = Selector('.mdc-slider__track');
5 | export const dialogSplitSession = {
6 | sessionStart: e2e('dialog-split-session__session-start'),
7 | sessionEnd: e2e('dialog-split-session__session-end'),
8 | sessionDuration: e2e('dialog-split-session__session-duration'),
9 | sliderInput,
10 | sliderTrack: Selector('.mdc-slider__track'),
11 | sliderThumb: Selector('mat-slider-visual-thumb'),
12 | buttonSubmit: e2e('dialog-split-session__button-submit'),
13 | async setSliderValue(ratio: number) {
14 | const trackWidth = await sliderInput.getBoundingClientRectProperty('width');
15 | const moveTo = Math.floor(trackWidth * ratio);
16 | await t.click(Selector('mat-slider'), { offsetX: moveTo });
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/src/app/app.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | flex: 1;
3 | display: flex;
4 | flex-direction: column;
5 | }
6 | .link-all img {
7 | width: 32px;
8 | height: 32px;
9 | vertical-align: middle;
10 | }
11 | mat-drawer {
12 | border-right: 1px solid var(--mat-menu-divider-color);
13 | }
14 | mat-drawer-container {
15 | flex: 1;
16 | }
17 | mat-drawer-content {
18 | display: flex;
19 | }
20 | .drawer-container {
21 | height: 100%;
22 | display: flex;
23 | flex-direction: column;
24 | padding-bottom: 1rem;
25 | box-sizing: border-box;
26 | overflow-x: hidden;
27 | }
28 | .states {
29 | margin-top: auto;
30 | margin-bottom: auto;
31 | }
32 | .import-label {
33 | position: relative;
34 | cursor: pointer;
35 |
36 | input {
37 | width: 100%;
38 | height: 100%;
39 | position: absolute;
40 | opacity: 0;
41 | z-index: -1;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/app/domain/date-time.ts:
--------------------------------------------------------------------------------
1 | import { assertNever } from '@app/utils/assert';
2 | import { pad2 } from '@app/utils/number';
3 |
4 | export type Duration = Milliseconds;
5 | export type Seconds = number;
6 | export type Milliseconds = number;
7 | export type DurationFn = (now: Milliseconds) => Duration;
8 |
9 | export const formatHours = (value: Duration): string => {
10 | if (value <= 0) return '00:00';
11 |
12 | return (['h', 'm'] as const)
13 | .map((part) => {
14 | switch (part) {
15 | case 'h':
16 | return pad2(~~(value / 3600000));
17 | case 'm':
18 | return pad2(~~((value % 3600000) / 60000));
19 | default:
20 | return assertNever(part);
21 | }
22 | })
23 | .join(':');
24 | };
25 |
26 | export const daysToMilliseconds = (days: number): Milliseconds => days * 24 * 60 * 60 * 1000;
27 |
--------------------------------------------------------------------------------
/src/app/providers/import-export.ts:
--------------------------------------------------------------------------------
1 | import { inject, Injectable } from '@angular/core';
2 | import { fromStoredTasks } from '@app/domain/storage';
3 | import { AppStore } from './state';
4 |
5 | @Injectable({ providedIn: 'root' })
6 | export class ImportExportService {
7 | private store = inject(AppStore);
8 | import(event: Event) {
9 | const target = event.target;
10 | if (!(target instanceof HTMLInputElement)) return;
11 | const file = target?.files?.[0];
12 | if (!file) return;
13 | const fileReader = new FileReader();
14 | fileReader.addEventListener(
15 | 'load',
16 | () => {
17 | if (typeof fileReader.result !== 'string') return;
18 | this.store.loadTasks(fromStoredTasks(JSON.parse(fileReader.result)));
19 | },
20 | { once: true },
21 | );
22 | fileReader.readAsText(file);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/screen-tasks/tasks-filter/tasks-filter.scss:
--------------------------------------------------------------------------------
1 | form {
2 | display: grid;
3 | gap: 10px;
4 | padding: 10px;
5 | grid-template-columns: 1fr 1fr auto;
6 | }
7 |
8 | .name {
9 | grid-row: 1;
10 | grid-column: span 1;
11 | }
12 |
13 | .duration {
14 | grid-row: 1;
15 | grid-column: 2 / span 2;
16 | }
17 |
18 | .from {
19 | grid-row: 2;
20 | grid-column: 1;
21 | }
22 | .to {
23 | grid-row: 2;
24 | grid-column: 2;
25 | }
26 |
27 | .dates-menu {
28 | grid-row: 2;
29 | grid-column: 3;
30 | position: relative;
31 | top: 7px;
32 | }
33 |
34 | @media (max-width: 530px) {
35 | form {
36 | grid-template-columns: 1fr;
37 | }
38 | .name {
39 | grid-column: span 1;
40 | }
41 |
42 | .dates-menu {
43 | display: none;
44 | }
45 | }
46 |
47 | timeline-chart-uplot {
48 | height: 300px;
49 | }
50 |
51 | input[type='search']::-webkit-search-cancel-button {
52 | -webkit-appearance: none;
53 | }
54 |
--------------------------------------------------------------------------------
/src/app/pipes/task-state-icon.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 | import { Task, TaskState, isTask, isTaskRunning } from '@app/domain/task';
3 | import { assertNever } from '@app/utils/assert';
4 |
5 | @Pipe({
6 | name: 'taskStateIcon',
7 | })
8 | export class TaskStateIconPipe implements PipeTransform {
9 | transform(stateOrTask?: Task | TaskState) {
10 | const task = isTask(stateOrTask);
11 | const inputState = typeof stateOrTask === 'string' ? stateOrTask : null;
12 | const state = task?.state ?? inputState;
13 |
14 | if (task && isTaskRunning(task)) {
15 | return 'pause_circle';
16 | }
17 | if (!state) {
18 | return 'timer-logo';
19 | }
20 | switch (state) {
21 | case TaskState.active:
22 | return 'play_circle';
23 | case TaskState.finished:
24 | return 'check_circle';
25 | case TaskState.dropped:
26 | return 'delete';
27 | default:
28 | return assertNever(state);
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/app/directives/button-reset-input.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
2 | import { MatIconButton } from '@angular/material/button';
3 | import { MatIcon } from '@angular/material/icon';
4 | import { MatTooltip } from '@angular/material/tooltip';
5 |
6 | @Component({
7 | selector: 'button-reset-input-control',
8 | changeDetection: ChangeDetectionStrategy.OnPush,
9 | template: `
10 | @if (showButton()) {
11 |
14 | }
15 | `,
16 | styles: [
17 | `
18 | :host {
19 | display: contents;
20 | }
21 | `,
22 | ],
23 | imports: [MatIconButton, MatIcon, MatTooltip],
24 | })
25 | export class ButtonResetInputComponentEdit session
2 | 25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/app/screen-task/button-session-actions/button-session-actions.html:
--------------------------------------------------------------------------------
1 |
4 | 
13 |
14 | Originally created back in 2011 to track my time spent on video games, it eventually turned into sorts of Todo MVC, the project gets rewritten from scracth every several years as a learning excercise. This is the fifth iteration. Some of previous Timer iterations:
15 |
16 | - https://github.com/Klaster1/timer
17 | - https://github.com/Klaster1/timer2
18 |
19 | # Development
20 |
21 | You will need Node.js 22 or newer.
22 |
23 | ## Running the app for development locally
24 |
25 | 1. Install packages with `npm i`.
26 | 2. Run `npx ng serve`. The app will start at [http://localhost:4200](http://localhost:4200).
27 | 3. Change the Angular app, the web page will live reload.
28 |
29 | ## Building the app
30 |
31 | 1. Install packages with `npm i` if you haven't already.
32 | 2. Run `npm run build`. Static files will be placed in the `dist` directory.
33 |
--------------------------------------------------------------------------------
/e2e/fixtures/filters.ts:
--------------------------------------------------------------------------------
1 | import { screenTask } from '../page-objects/screen-task';
2 | import { screenTasks } from '../page-objects/screen-tasks';
3 | import { getLocationSearch, reload } from '../utils';
4 | import { VISUAL_REGRESSION_OK, comparePageScreenshot } from '../visual-regression';
5 |
6 | fixture('Filters');
7 |
8 | test('Name', async (t) => {
9 | // Have some tasks with uppercase names
10 | await screenTasks.addTask('GAME');
11 | await screenTasks.addTask('FOO');
12 | await screenTasks.addTask('BAR');
13 | await screenTasks.addTask('BAZ');
14 | // Send "ctrl+f" keys
15 | await t.pressKey('ctrl+f');
16 |
17 | await t.expect(await comparePageScreenshot('empty filter')).eql(VISUAL_REGRESSION_OK);
18 | // Fill in the "Name filter", in lowercase
19 | await t.typeText(screenTasks.filter.name.input, 'game', { paste: true });
20 | // Assert current task is still opened
21 | await t.expect(screenTask.name.textContent).eql('BAZ');
22 | // Assert the displayed tasks match the filter
23 | await t.expect(screenTasks.taskItem.count).eql(1);
24 | await t.expect(screenTasks.taskName.nth(0).textContent).eql('GAME');
25 | await t.expect(await comparePageScreenshot('name filled')).eql(VISUAL_REGRESSION_OK);
26 | // Assert the URL ends with "?search=${value}"
27 | await t.expect(getLocationSearch()).eql('?search=game');
28 | // Reload the page, assert the filter is still open and applied
29 | await reload();
30 | await t.expect(screenTasks.taskItem.count).eql(1);
31 | await t.expect(screenTasks.taskName.nth(0).textContent).eql('GAME');
32 | // Clear the filter value with "Clear" button in the form control
33 | await t.click(screenTasks.filter.name.buttonClear);
34 | await t.expect(await comparePageScreenshot('cleared')).eql(VISUAL_REGRESSION_OK);
35 | // Assert all tasks are displayed
36 | await t.expect(screenTasks.taskItem.count).eql(4);
37 | await t.expect(getLocationSearch()).eql('');
38 | });
39 |
--------------------------------------------------------------------------------
/src/app/domain/hotkeys.ts:
--------------------------------------------------------------------------------
1 | import { ExtendedKeyboardEvent, Hotkey } from 'angular2-hotkeys';
2 |
3 | const KEY_NEXT_EN = 'j';
4 | const KEY_NEXT_RU = 'о';
5 | export const KEYS_NEXT = [KEY_NEXT_EN, KEY_NEXT_RU];
6 |
7 | const KEY_PREV_EN = 'k';
8 | const KEY_PREV_RU = 'л';
9 | export const KEYS_PREV = [KEY_PREV_EN, KEY_PREV_RU];
10 |
11 | const KEY_ADD_EN = 'a';
12 | const KEY_ADD_RU = 'ф';
13 | export const KEYS_ADD = [KEY_ADD_EN, KEY_ADD_RU];
14 |
15 | const KEY_SEARCH_EN = 'ctrl+f';
16 | const KEY_SEARCH_RU = 'ctrl+а';
17 | export const KEYS_SEARCH = [KEY_SEARCH_EN, KEY_SEARCH_RU];
18 |
19 | const KEY_GO_ALL_EN = 'g t';
20 | const KEY_GO_ALL_RU = 'п е';
21 | export const KEYS_GO_ALL = [KEY_GO_ALL_EN, KEY_GO_ALL_RU];
22 |
23 | const KEY_GO_ACTIVE_EN = 'g a';
24 | const KEY_GO_ACTIVE_RU = 'п ф';
25 | export const KEYS_GO_ACTIVE = [KEY_GO_ACTIVE_EN, KEY_GO_ACTIVE_RU];
26 |
27 | const KEY_GO_FINISHED_EN = 'g f';
28 | const KEY_GO_FINISHED_RU = 'п а';
29 | export const KEYS_GO_FINISHED = [KEY_GO_FINISHED_EN, KEY_GO_FINISHED_RU];
30 |
31 | const KEY_START_STOP_EN = 's';
32 | const KEY_START_STOP_RU = 'ы';
33 | export const KEYS_START_STOP = [KEY_START_STOP_EN, KEY_START_STOP_RU];
34 |
35 | const KEY_MARK_FINISHED_EN = 'm f';
36 | const KEY_MARK_FINISHED_RU = 'ь а';
37 | export const KEYS_MARK_FINISHED = [KEY_MARK_FINISHED_EN, KEY_MARK_FINISHED_RU];
38 |
39 | const KEY_MARK_ACTIVE_EN = 'm a';
40 | const KEY_MARK_ACTIVE_RU = 'ь ф';
41 | export const KEYS_MARK_ACTIVE = [KEY_MARK_ACTIVE_EN, KEY_MARK_ACTIVE_RU];
42 |
43 | const KEY_RENAME_EN = 'r t';
44 | const KEY_RENAME_RU = 'к е';
45 | const KEY_RENAME_ALT = 'f2';
46 | export const KEYS_RENAME = [KEY_RENAME_EN, KEY_RENAME_RU, KEY_RENAME_ALT];
47 |
48 | const KEY_DELETE_TASK_EN = 'd t';
49 | const KEY_DELETE_TASK_RU = 'в е';
50 | export const KEYS_DELETE_TASK = [KEY_DELETE_TASK_EN, KEY_DELETE_TASK_RU];
51 |
52 | export const hotkey = (keys: string | string[], description: string, cb: (e: ExtendedKeyboardEvent) => any) =>
53 | new Hotkey(keys, (e) => (setTimeout(() => cb(e), 0), e), [], description);
54 |
--------------------------------------------------------------------------------
/src/app/button-task-actions/button-task-actions.html:
--------------------------------------------------------------------------------
1 | @if (task(); as task) {
2 |
11 | | Start | 6 |End | 7 |Duration | 8 |
|---|---|---|
| 14 | {{ session.start | date: 'yyyy-MM-dd H:mm' }} 15 | | 16 |17 | {{ session.end | date: 'yyyy-MM-dd H:mm' }} 18 | | 19 |
20 | |
22 |
Split session
29 | 48 |
49 |
50 |
60 |
61 |
--------------------------------------------------------------------------------
/src/app/screen-tasks/screen-tasks.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: contents;
3 | }
4 | .container {
5 | display: grid;
6 | grid-template-rows: 1fr;
7 | flex: 1;
8 | --fab-offset: 1rem;
9 |
10 | @media (min-width: 900px) {
11 | &:not(.task-opened) {
12 | grid-template-areas: 'left tasks right';
13 | grid-template-columns: 1fr 50% 1fr;
14 | }
15 | &.task-opened {
16 | grid-template-areas: 'tasks task';
17 | grid-template-columns: 1fr 1fr;
18 | }
19 | }
20 | @media (max-width: 900px) {
21 | grid-template-columns: [tasks-start task-start] 1fr;
22 | grid-template-rows: [tasks-start task-start] 1fr;
23 |
24 | .task {
25 | z-index: 1;
26 | }
27 | }
28 | }
29 | mat-icon.running {
30 | background: var(--timer-logo-color) !important;
31 | color: var(--mat-app-background-color) !important;
32 | border-radius: 100%;
33 | }
34 | [matlistitemtitle] {
35 | display: grid;
36 | grid-template-columns: 1fr auto;
37 | }
38 | .name {
39 | overflow: hidden;
40 | text-overflow: ellipsis;
41 | }
42 | .tasks {
43 | grid-area: tasks;
44 | position: relative;
45 | max-height: 100vh;
46 | display: flex;
47 | flex-direction: column;
48 | }
49 | .task {
50 | grid-area: task;
51 | display: flex;
52 | flex-direction: column;
53 | overflow: hidden;
54 | }
55 | mat-toolbar {
56 | flex: 0 0 auto;
57 | }
58 | [mat-fab] {
59 | position: absolute;
60 | bottom: var(--fab-offset);
61 | right: var(--fab-offset);
62 | left: 50%;
63 | }
64 | h1 {
65 | width: 100%;
66 | }
67 | .search-form,
68 | h1 {
69 | display: flex;
70 | align-items: center;
71 | }
72 | .range-filter {
73 | margin-left: auto;
74 | flex: 0 0 42.5px;
75 | }
76 | .search-form {
77 | margin-left: auto;
78 | }
79 | .state-duration {
80 | position: relative;
81 | top: 1px;
82 | }
83 | .filter-trigger-icon {
84 | position: relative;
85 | top: 3px;
86 | }
87 | cdk-virtual-scroll-viewport {
88 | flex: 1;
89 | }
90 | empty-state {
91 | margin: auto;
92 | }
93 | .cdk-drop-list-dragging {
94 | position: relative;
95 |
96 | &:after {
97 | display: block;
98 | content: '';
99 | position: absolute;
100 | top: 0;
101 | right: 0;
102 | bottom: 0;
103 | left: 0;
104 | border: dotted 2px grey;
105 | }
106 | }
107 | .item-content {
108 | display: flex;
109 | flex-direction: row;
110 | align-items: center;
111 | }
112 | mat-nav-list {
113 | padding: 0;
114 | }
115 | .item-title {
116 | position: relative;
117 | top: 1px;
118 | }
119 |
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | @use 'pkg:@angular/material' as mat;
2 | @use 'pkg:@angular/material/core/theming/inspection' as inspection;
3 | @use 'pkg:@angular/material/core/theming/all-theme' as all-theme;
4 | @use 'pkg:@angular/material/core/theming/theming' as theming;
5 | @use 'm3-theme' as theme;
6 |
7 | a {
8 | color: var(--primary-darker-color);
9 | text-decoration: none;
10 | }
11 |
12 | @include mat.elevation-classes();
13 | @include mat.app-background();
14 |
15 | @mixin used-components-theme($theme) {
16 | $dedupe-key: 'angular-material-theme';
17 | @include theming.private-check-duplicate-theme-styles($theme, $dedupe-key) {
18 | @include mat.elevation-classes();
19 | @include mat.app-background();
20 | @include mat.tooltip-theme($theme);
21 | @include mat.form-field-theme($theme);
22 | @include mat.input-theme($theme);
23 | @include mat.select-theme($theme);
24 | @include mat.dialog-theme($theme);
25 | @include mat.menu-theme($theme);
26 | @include mat.list-theme($theme);
27 | @include mat.button-theme($theme);
28 | @include mat.icon-button-theme($theme);
29 | @include mat.fab-theme($theme);
30 | @include mat.icon-theme($theme);
31 | @include mat.sidenav-theme($theme);
32 | @include mat.toolbar-theme($theme);
33 | @include mat.table-theme($theme);
34 | @include mat.snack-bar-theme($theme);
35 | @include mat.slider-theme($theme);
36 | }
37 | }
38 |
39 | @mixin used-components-colors($theme) {
40 | @include all-theme.all-component-themes(inspection.theme-remove($theme, base, typography, density));
41 | }
42 |
43 | @mixin overrides() {
44 | & {
45 | --mat-sidenav-container-width: 65px;
46 | --mat-icon-color: var(--mat-form-field-leading-icon-color);
47 | --mat-sidenav-container-shape: 0;
48 | --mat-list-active-indicator-shape: 0;
49 | --mat-toolbar-container-background-color: var(--mat-tooltip-supporting-text-color);
50 | --mat-sidenav-container-background-color: var(--mat-tooltip-supporting-text-color);
51 | --mat-table-row-item-outline-color: var(--mat-sidenav-container-background-color);
52 | }
53 | }
54 |
55 | :root {
56 | @include used-components-theme(theme.$light-theme);
57 | @include overrides();
58 |
59 | & {
60 | --scrollbar-active-color: var(--mat-option-selected-state-layer-color);
61 | --scrollbar-radius: 4px;
62 | --timer-logo-color: #82bd17;
63 | }
64 | }
65 | :root:has(.theme-dark) {
66 | @include used-components-colors(theme.$dark-theme);
67 | @include overrides();
68 |
69 | & {
70 | color-scheme: dark;
71 | }
72 | }
73 |
74 | html,
75 | body {
76 | height: 100%;
77 | }
78 | body {
79 | padding: 0;
80 | margin: 0;
81 | font-family: Roboto, 'Helvetica Neue', sans-serif;
82 | min-height: 100vh;
83 | display: flex;
84 | }
85 |
86 | .ng-scroll-content {
87 | max-width: 100%;
88 | }
89 |
90 | .list-centered-icons {
91 | .mat-mdc-list-item {
92 | text-align: center;
93 | }
94 | mat-icon {
95 | vertical-align: middle;
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/src/app/app.html:
--------------------------------------------------------------------------------
1 |
7 |
10 | | Start | 17 |End | 18 |Duration | 19 |20 | |
|---|---|---|---|
| 32 | {{ item.start | date: 'yyyy-MM-dd H:mm' }} 33 | | 34 |35 | {{ item.end | date: 'yyyy-MM-dd H:mm' }} 36 | | 37 |
38 | |
40 |
41 | |
47 |
| Total | 53 |54 | |
55 | |
57 | 58 | |
2 | @if (store.currentTasks(); as tasks) {
3 |
4 |
5 |
6 |
10 |
13 |
14 | @defer { @if (searchOpened()) {
15 |
23 |
24 |
36 |
49 |
50 |
59 | } @else { @defer { @if (searchOpened() === false) {
60 |
61 | 
62 | No tasks
63 |
64 | @switch (store.currentTaskState()) { @case ('all') { Create a task and it will show up here } @case
65 | (taskState.active) { Create a task and it will show up here } @case (taskState.finished) { You didn't finish any
66 | tasks yet } @case (taskState.dropped) { You didn't abandon any tasks yet } }
67 |
68 |
78 |
79 | } @else {
80 |
81 |
86 | } } }
87 |
88 | } @if (store.isCurrentTaskOpened()) {
89 |
90 |
92 | }
93 |
94 |
--------------------------------------------------------------------------------
/src/app/app.ts:
--------------------------------------------------------------------------------
1 | import { DragDropModule } from '@angular/cdk/drag-drop';
2 | import { ChangeDetectionStrategy, Component, DestroyRef, computed, effect, inject } from '@angular/core';
3 | import { MatIcon } from '@angular/material/icon';
4 | import { MatActionList, MatListItem, MatNavList } from '@angular/material/list';
5 | import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
6 | import { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';
7 | import { MatTooltip } from '@angular/material/tooltip';
8 | import { DomSanitizer } from '@angular/platform-browser';
9 | import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
10 | import { HotkeysService } from 'angular2-hotkeys';
11 | import { ButtonThemeSwitcherComponent } from './button-theme-switcher/button-theme-switcher';
12 | import { KEYS_GO_ACTIVE, KEYS_GO_ALL, KEYS_GO_FINISHED, hotkey } from './domain/hotkeys';
13 | import { toStoredTasks } from './domain/storage';
14 | import { TaskState } from './domain/task';
15 | import { TaskStateIconPipe } from './pipes/task-state-icon';
16 | import { FaviconService } from './providers/favicon';
17 | import { ImportExportService } from './providers/import-export';
18 | import { RoutedDialogs } from './providers/routed-dialogs';
19 | import { AppStore } from './providers/state';
20 |
21 | @Component({
22 | selector: 'app-root',
23 | templateUrl: './app.html',
24 | styleUrls: ['./app.scss'],
25 | changeDetection: ChangeDetectionStrategy.OnPush,
26 | imports: [
27 | MatDrawerContainer,
28 | MatDrawer,
29 | MatDrawerContent,
30 | MatMenuTrigger,
31 | MatMenu,
32 | MatMenuItem,
33 | MatNavList,
34 | MatListItem,
35 | MatActionList,
36 | MatIcon,
37 | MatTooltip,
38 | TaskStateIconPipe,
39 | DragDropModule,
40 | RouterLink,
41 | RouterLinkActive,
42 | RouterOutlet,
43 | ButtonThemeSwitcherComponent,
44 | ],
45 | })
46 | export class AppComponent {
47 | public keys = inject
6 | {{ store.currentTaskState() | taskState }}
7 | (
10 |
13 |
43 | {{ task.name }}
44 |
46 |
62 | No tasks
63 |
64 | @switch (store.currentTaskState()) { @case ('all') { Create a task and it will show up here } @case
65 | (taskState.active) { Create a task and it will show up here } @case (taskState.finished) { You didn't finish any
66 | tasks yet } @case (taskState.dropped) { You didn't abandon any tasks yet } }
67 |
68 |
78 |