fix: hotfixes for the color store design

This commit is contained in:
max_richter 2021-04-01 19:21:01 +02:00
parent a04f518e0e
commit 0f746d836f
4 changed files with 21 additions and 14 deletions

View File

@ -21,7 +21,7 @@
let layerOpacity = 50; let layerOpacity = 50;
let _layerOpacity = localStorage.getItem("layerOpacity"); let _layerOpacity = localStorage.getItem("layerOpacity");
if (_layerOpacity) { if (_layerOpacity) {
layerOpacity = _layerOpacity; layerOpacity = +_layerOpacity;
} }
</script> </script>

View File

@ -516,7 +516,7 @@
position: absolute; position: absolute;
top: 60px; top: 60px;
right: 10px; right: 10px;
z-index: 1001; z-index: 998;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
@ -525,7 +525,7 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
z-index: 1001; z-index: 998;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }

View File

@ -1,5 +1,5 @@
<script> <script>
import { colorStore } from "stores"; import { colorStore, modalStore } from "stores";
export let activeColor = "ff0000"; export let activeColor = "ff0000";
export let activeTool; export let activeTool;
@ -39,7 +39,7 @@
style={`background-color: #${c.val};`} style={`background-color: #${c.val};`}
/> />
{/each} {/each}
<div class="color">Ξ</div> <div class="color" on:click={() => ($modalStore = "colors")}>Ξ</div>
</div> </div>
<div class="settings-wrapper"> <div class="settings-wrapper">

View File

@ -94,19 +94,24 @@
{/if} {/if}
{/each} {/each}
<div id="cross-wrapper" on:click={() => route.set("main")}> <div class="footer">
<Cross w={20} color="white" weight={2} /> <div id="cross-wrapper" on:click={() => route.set("main")}>
<p>Add more images</p> <Cross w={20} color="white" weight={2} />
</div> <p>Add more images</p>
</div>
<div id="color-wrapper" on:click={() => ($modalStore = "colors")}> <div id="color-wrapper" on:click={() => ($modalStore = "colors")}>
<Cross w={20} color="white" weight={2} /> <p>Edit Colors</p>
<p>Add more images</p> </div>
</div> </div>
</main> </main>
<style> <style>
#cross-wrapper { .footer {
display: flex;
}
#cross-wrapper,
#color-wrapper {
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -114,8 +119,10 @@
padding: 10px; padding: 10px;
width: fit-content; width: fit-content;
cursor: pointer; cursor: pointer;
margin-right: 10px;
} }
#cross-wrapper > p { #cross-wrapper > p,
#color-wrapper > p {
margin: 0; margin: 0;
color: white; color: white;
margin-left: 10px; margin-left: 10px;