Add ability to change the background colour of the Memory when creating it #10
Conversation
IanFindlay
changed the title
src/App.svelte
Outdated
| @@ -8,6 +8,7 @@ | |||
| let createMemoryIsOpen = false; | |||
| let appInstalled = window.matchMedia('(display-mode: standalone)').matches; | |||
| let installEvent = null; | |||
| let cardColor = ''; | |||
There was a problem hiding this comment.
This variable is never used
src/App.svelte
Outdated
| @@ -85,7 +86,7 @@ | |||
| </button> | |||
| </div> | |||
| {#if createMemoryIsOpen} | |||
| <CreateMemory save={saveMemory}></CreateMemory> | |||
| <CreateMemory save={saveMemory}> </CreateMemory> | |||
src/App.svelte
Outdated
| </style> |
There was a problem hiding this comment.
Give me my line ending back 😆
There was a problem hiding this comment.
This is something that may happen from time to time with my setup but I should have spotted it on the git diff. I've been truncating them so far but forget this time. Out of interest, any reason not to have the newline or is it just preference?
src/CreateMemory.svelte
Outdated
| @@ -1,29 +1,50 @@ | |||
| <script> | |||
| import Modal from './Modal.svelte'; | |||
| export let save; | |||
| export let cardColor; | |||
There was a problem hiding this comment.
export is used when you want to pass a variable from parent component to children. This component creates this variable so export isn't needed.
src/CreateMemory.svelte
Outdated
|
|
||
| cardColor = newRandomColor() | ||
| function changeColor() { | ||
| var colorElem = document.querySelector("body > main > div.modal.svelte-7jwz2f > article") |
There was a problem hiding this comment.
This -7jwz2f hash can change on its own when compiling.
This function should look like this:
function changeColor() {
cardColor = newRandomColor();
}
styles will update automatically
src/Modal.svelte
Outdated
| </style> |
src/CreateMemory.svelte
Outdated
| </button> | ||
| <button class="memory-form__color" on:click={changeColor}> | ||
| <i class="memory-form__color-icon material-icons">palette</i> | ||
| <span>Change Colour</span> |
There was a problem hiding this comment.
American English spelling is used throughout the entire project (in the code at least) so I would rename it to color
|
Think that covers the changes but if not I'll resolve the rest as soon as I can. Thanks for the valuable feedback. |
|
I will look at this in my free time, I'm adding hacktoberfest-accepted label for now |
I thought being able to pick the background colour of the memories would be a good feature as then people can colour code them as they please e.g. all angry memories have a red background.
This PR adds a 'Change Colour' button underneath the 'Save' button which will change the background to a random colour (it uses the original colour list at the moment) and, if the memory is saved, save this value so that every time it is opened it is in that colour. The 'Confirmation dialogues' will be red (which is set as a default).