Skip to content

Commit

Permalink
feat: initial note color
Browse files Browse the repository at this point in the history
  • Loading branch information
jensmeichler committed Mar 8, 2024
1 parent 478986e commit 49f8648
Show file tree
Hide file tree
Showing 9 changed files with 29 additions and 24 deletions.
4 changes: 2 additions & 2 deletions src/app/components/draggables/image/image.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -199,14 +199,14 @@
<ng-container *ngFor="let item of dataService.tab.images">
<button (click)="connectTo(item)" *ngIf="image !== item"
mat-menu-item [attr.aria-label]="'CONNECT_TO' | translate"
[style.background]="'#212121'">
[style.background]="'var(--color-note)'">
<mat-icon>{{image.connectedTo?.includes(item.id) ? 'close' : 'link'}}</mat-icon>
{{DisplayValue.fromImage(item)}}
</button>
</ng-container>
<button *ngIf="image.connectedTo" (click)="connectTo(undefined)"
mat-menu-item [attr.aria-label]="'CONNECT_TO_NOTHING' | translate"
[style.background]="'#212121'">
[style.background]="'var(--color-note)'">
<mat-icon>link_off</mat-icon>
{{'CONNECT_TO_NOTHING' | translate}}
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -229,14 +229,14 @@
<ng-container *ngFor="let item of dataService.tab.images">
<button (click)="connectTo(item)"
mat-menu-item [attr.aria-label]="'CONNECT_TO' | translate"
[style.background]="'#212121'">
[style.background]="'var(--color-note)'">
<mat-icon>{{noteList.connectedTo?.includes(item.id) ? 'close' : 'link'}}</mat-icon>
{{DisplayValue.fromImage(item)}}
</button>
</ng-container>
<button *ngIf="noteList.connectedTo" (click)="connectTo(undefined)"
mat-menu-item [attr.aria-label]="'CONNECT_TO_NOTHING' | translate"
[style.background]="'#212121'">
[style.background]="'var(--color-note)'">
<mat-icon>link_off</mat-icon>
{{'CONNECT_TO_NOTHING' | translate}}
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/draggables/note/note.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -250,15 +250,15 @@
<ng-container *ngFor="let item of dataService.tab.images">
<button (click)="connectTo(item)"
mat-menu-item [attr.aria-label]="'CONNECT_TO' | translate"
[style.background]="'#212121'">
[style.background]="'var(--color-note)'">
<mat-icon>{{note.connectedTo?.includes(item.id) ? 'close' : 'link'}}</mat-icon>
{{DisplayValue.fromImage(item)}}
</button>
</ng-container>

<button *ngIf="note.connectedTo" (click)="connectTo(undefined)"
mat-menu-item [attr.aria-label]="'CONNECT_TO_NOTHING' | translate"
[style.background]="'#212121'">
[style.background]="'var(--color-note)'">
<mat-icon>link_off</mat-icon>
{{'CONNECT_TO_NOTHING' | translate}}
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -268,14 +268,14 @@
<ng-container *ngFor="let item of dataService.tab.images">
<button (click)="connectTo(item)"
mat-menu-item [attr.aria-label]="'CONNECT_TO' | translate"
[style.background]="'#212121'">
[style.background]="'var(--color-note)'">
<mat-icon>{{taskList.connectedTo?.includes(item.id) ? 'close' : 'link'}}</mat-icon>
{{DisplayValue.fromImage(item)}}
</button>
</ng-container>
<button *ngIf="taskList.connectedTo" (click)="connectTo(undefined)"
mat-menu-item [attr.aria-label]="'CONNECT_TO_NOTHING' | translate"
[style.background]="'#212121'">
[style.background]="'var(--color-note)'">
<mat-icon>link_off</mat-icon>
{{'CONNECT_TO_NOTHING' | translate}}
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/app/models/note-list.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import {Colored} from "./colored.model";
*/
export class NoteList extends DraggableNoteBase implements Colored {
/** The color of the text. */
foregroundColor: string = '#ffffff';
foregroundColor: string = 'var(--color-note-accent)';
/** The color of the background. */
backgroundColor: string = '#212121';
backgroundColor: string = 'var(--color-note)';
/** The color of the background gradient if specified. */
backgroundColorGradient?: string;

Expand Down
4 changes: 2 additions & 2 deletions src/app/models/note.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import {Reminder} from "./reminder.model";
*/
export class Note extends DraggableNoteBase implements Colored {
/** The color of the text. */
foregroundColor: string = '#ffffff';
foregroundColor: string = 'var(--color-note-accent)';
/** The color of the background. */
backgroundColor: string = '#212121';
backgroundColor: string = 'var(--color-note)';
/** The color of the background gradient if specified. */
backgroundColorGradient?: string;

Expand Down
4 changes: 2 additions & 2 deletions src/app/models/task-list.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import {Colored} from "./colored.model";
*/
export class TaskList extends DraggableNoteBase implements Colored {
/** The color of the text. */
foregroundColor: string = '#ffffff';
foregroundColor: string = 'var(--color-note-accent)';
/** The color of the background. */
backgroundColor: string = '#212121';
backgroundColor: string = 'var(--color-note)';
/** The color of the background gradient if specified. */
backgroundColorGradient?: string;

Expand Down
20 changes: 10 additions & 10 deletions src/assets/screens/welcome.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"notes": [
{
"id": "welcome_note_1",
"foregroundColor": "#ffffff",
"backgroundColor": "#212121",
"foregroundColor": "var(--color-note-accent)",
"backgroundColor": "var(--color-note)",
"posX": 0,
"posY": 84,
"posZ": 1,
Expand All @@ -15,8 +15,8 @@
},
{
"id": "welcome_note_2",
"foregroundColor": "#ffffff",
"backgroundColor": "#212121",
"foregroundColor": "var(--color-note-accent)",
"backgroundColor": "var(--color-note)",
"posX": 720,
"posY": 359,
"posZ": 4,
Expand All @@ -30,24 +30,24 @@
"notes": [
{
"id": "welcome_note_3_1",
"foregroundColor": "#ffffff",
"backgroundColor": "#212121",
"foregroundColor": "var(--color-note-accent)",
"backgroundColor": "var(--color-note)",
"posX": 0,
"posY": 0,
"content": "When you click me, I am saved to your clipboard 💥"
},
{
"id": "welcome_note_list_3_2",
"foregroundColor": "#ffffff",
"backgroundColor": "#212121",
"foregroundColor": "var(--color-note-accent)",
"backgroundColor": "var(--color-note)",
"posX": 0,
"posY": 0,
"content": "You can just add new notes from your clipboard by pressing the ➕ button"
},
{
"id": "welcome_note_list_3_3",
"foregroundColor": "#ffffff",
"backgroundColor": "#212121",
"foregroundColor": "var(--color-note-accent)",
"backgroundColor": "var(--color-note)",
"posX": 0,
"posY": 0,
"content": "It's also possible to order notes using drag drop ⚡"
Expand Down
5 changes: 5 additions & 0 deletions src/styles.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
:root {
color-scheme: dark;

--color-background: #131313;
--color-transparency-light: #FFFFFF19;
--color-transparency-medium: #FFFFFF4D;
--color-transparency-strong: #FFFFFF90;
--color-note: #212121;
--color-note-accent: white;
--color-primary: #7b1ea2;
--color-primary-opacity: #7B1EA267;
--color-secondary: #69f0ae;
Expand All @@ -20,10 +22,13 @@

&[theme="light"] {
color-scheme: light;

--color-background: white;
--color-transparency-light: #00000019;
--color-transparency-medium: #0000004D;
--color-transparency-strong: #00000090;
--color-note: white;
--color-note-accent: black;

--shadow-light: 0 1px 4px 1px #2F2F2F26,0 1px 2px 0 #2F2F2F26;
--shadow-strong: 0 0 12px 0 #2F2F2F50;
Expand Down

0 comments on commit 49f8648

Please sign in to comment.