Skip to content
This repository was archived by the owner on Nov 5, 2024. It is now read-only.

Commit 3776c2e

Browse files
mallowigimallowigi
committed
wip
1 parent dd795ed commit 3776c2e

18 files changed

Lines changed: 531 additions & 476 deletions

‎src/App.svelte‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { onMount } from 'svelte';
33
44
import allThemes from './assets/themes.json';
5-
import { app } from '~store.ts';
6-
// import Panel from '~src/components/Panel.svelte';
5+
import { app } from '~store/store.ts';
6+
import Panel from '~components/Panel.svelte';
77
import Loading from '~components/Loading.svelte';
88
99
onMount(async _ => {
@@ -24,6 +24,7 @@
2424
$app.loadDefaults();
2525
2626
$app.loading = false;
27+
console.log('finished loading');
2728
});
2829
</script>
2930

@@ -41,8 +42,8 @@
4142

4243

4344
<main class='main'>
44-
<Loading></Loading>
45+
<Loading />
4546
{#if !$app.loading}
46-
<!-- <Panel></Panel>-->
47+
<Panel />
4748
{/if}
4849
</main>

‎src/components/Footer.svelte‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<style lang='scss'>
2+
.footer {
3+
grid-area: footer;
4+
text-align: right;
5+
6+
a {
7+
text-decoration: none;
8+
color: var(--links);
9+
}
10+
}
11+
</style>
12+
13+
<script>
14+
const year = new Date().getFullYear();
15+
</script>
16+
17+
<div class='footer'>
18+
<small>Material Theme © 2015-{year} <a target='_blank' href='https://www.material-theme.com'>Elior Boukhobza & Jonas Augsburger</a></small>
19+
-
20+
<small>Original concept from <a target='_blank' href='https://github.com/micjamking'>Mike King</a></small>
21+
</div>

‎src/components/Loading.svelte‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<style lang='scss'>
2+
.loading {
3+
background: var(--bg, #263238);
4+
display: flex;
5+
justify-content: center;
6+
align-items: flex-start;
7+
text-align: center;
8+
width: 100%;
9+
margin: 0 auto;
10+
padding: 0 2rem;
11+
max-width: 40rem;
12+
min-width: 24rem;
13+
14+
h4 {
15+
font-weight: normal;
16+
font-style: normal;
17+
color: var(--fg, #b0bec5);
18+
text-rendering: optimizeLegibility;
19+
margin-top: 0.2rem;
20+
margin-bottom: 0.5rem;
21+
line-height: 1.4;
22+
23+
margin-top: 0;
24+
margin-bottom: 0;
25+
line-height: 1;
26+
font-size: 2em;
27+
}
28+
}
29+
30+
</style>
31+
32+
<script>
33+
import { app } from '~store/store.ts';
34+
</script>
35+
36+
<div class='loading'>
37+
{#if $app.loading}
38+
<h4>Loading...</h4>
39+
{/if}
40+
</div>

‎src/components/Palette.svelte‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<style lang='scss'>
2+
.palette {
3+
height: 2em;
4+
margin-bottom: .5em;
5+
font-size: 1em;
6+
display: flex;
7+
flex-direction: row;
8+
justify-content: space-between;
9+
align-content: center;
10+
align-items: center;
11+
12+
&::after {
13+
display: table;
14+
content: '';
15+
clear: both;
16+
}
17+
18+
li {
19+
position: relative;
20+
list-style: none;
21+
height: 50%;
22+
display: block;
23+
float: left;
24+
z-index: 1;
25+
flex: 1;
26+
transition: transform 0.25s cubic-bezier(.55, 1.15, 0.1, 1.15);
27+
animation: zoomIn 0.15s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
28+
29+
&:before {
30+
content: '';
31+
display: block;
32+
width: 100%;
33+
height: 100%;
34+
background-color: inherit;
35+
transform: scale3d(1, 1, 1);
36+
box-shadow: none;
37+
position: absolute;
38+
border-radius: 10%;
39+
}
40+
41+
&:hover {
42+
z-index: 2;
43+
44+
&:before {
45+
border-radius: 1%;
46+
transform: scale3d(1.5, 4, 1);
47+
box-shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.15);
48+
transition: transform 0.25s cubic-bezier(.55, 1.15, 0.1, 1.15);
49+
}
50+
}
51+
}
52+
}
53+
</style>
54+
55+
<script>
56+
import {fade} from 'svelte/transition';
57+
import { app } from '~store/store.ts';
58+
59+
60+
function isColor(color) {
61+
return color && color.startsWith && color.startsWith('#');
62+
}
63+
</script>
64+
65+
{#if $app.currentTheme}
66+
<ul class="palette" transition:fade>
67+
{#each Object.entries($app.currentTheme.colors) as [key, color]}
68+
{#if isColor(color)}
69+
<li class="anim anim-delayed" style="background: {color}"
70+
title="{key}"></li>
71+
{/if}
72+
{/each}
73+
</ul>
74+
{/if}

src2/components/Panel.svelte renamed to src/components/Panel.svelte

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script>
2-
import Footer from './Footer.svelte';
3-
import { app } from '../$app';
2+
import { app } from '~store/store.ts';
43
import { blur } from 'svelte/transition';
5-
import ThemeSwitcher from './ThemeSwitcher.svelte';
4+
import ThemeSwitcher from '~components/ThemeSwitcher.svelte';
5+
import Footer from '~components/Footer.svelte';
66
</script>
77

8-
<style>
8+
<style lang='scss'>
99
.alert {
1010
position: absolute;
1111
z-index: 3;
@@ -27,12 +27,12 @@
2727
grid-template-columns: 100%;
2828
grid-template-rows: [content] 100% [footer] 32px;
2929
grid-template-areas:
30-
"content"
31-
"footer";
30+
'content'
31+
'footer';
3232
}
3333
</style>
3434

35-
{#if $app.notifying == true}
35+
{#if $app.notifying === true}
3636
<div class='alert' transition:blur='{{amount: 10}}'>
3737
Close and reopen DevTools to apply your changes!<br>
3838
<strong>Do not forget to change the theme to Light or Dark according to your selected theme!</strong>
@@ -41,7 +41,7 @@
4141
{/if}
4242

4343
<div class='container'>
44-
<ThemeSwitcher></ThemeSwitcher>
44+
<ThemeSwitcher />
4545

46-
<Footer></Footer>
46+
<Footer />
4747
</div>

src2/components/Settings.svelte renamed to src/components/Settings.svelte

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
2-
import { app } from '../$app';
3-
import { styleBuilder } from '../style-builder';
2+
import { app } from '~store/store.ts';
3+
4+
import { styleBuilder } from '~utils/styleBuilder';
45
import { debounce } from '@github/mini-throttle';
56
67
function applyTheme() {
@@ -9,7 +10,7 @@
910
currentTheme: $app.currentTheme,
1011
currentFontFamily: $app.currentFontFamily,
1112
currentFontSize: $app.currentFontSize,
12-
accentColor: $app.currentAccentColor,
13+
currentAccentColor: $app.currentAccentColor,
1314
scrollbars: $app.scrollbars
1415
});
1516
}
@@ -22,21 +23,26 @@
2223
}
2324
</script>
2425

25-
<style>
26+
<style lang='scss'>
2627
.font-setting {
2728
display: block;
2829
margin: 1rem auto;
29-
}
3030
31-
.font-setting label {
32-
display: block;
33-
text-align: left;
34-
margin-bottom: 0.5em;
35-
}
31+
label {
32+
display: block;
33+
text-align: left;
34+
margin-bottom: 0.5em;
35+
}
3636
37-
.font-setting input {
38-
display: block;
39-
background-image: none;
37+
input {
38+
display: block;
39+
background-image: none;
40+
}
41+
42+
.accent-color-input {
43+
border: none;
44+
display: inline-block;
45+
}
4046
}
4147
4248
.font-family input {
@@ -49,11 +55,6 @@
4955
border-radius: 10px;
5056
}
5157
52-
.font-setting .accent-color-input {
53-
border: none;
54-
display: inline-block;
55-
}
56-
5758
.accent-reset-button {
5859
background: var(--button);
5960
color: var(--text);
@@ -63,49 +64,48 @@
6364
border: 0;
6465
transition: all .3s;
6566
outline: none;
66-
}
6767
68-
.accent-reset-button:hover {
69-
background: var(--hl);
70-
color: var(--selection-fg-color);
68+
&:hover {
69+
background: var(--hl);
70+
color: var(--selection-fg-color);
71+
}
7172
}
7273
7374
.accent-color-wrapper {
7475
display: flex;
7576
justify-content: space-between;
7677
}
7778
78-
input[type="color"] {
79+
input[type='color'] {
7980
-webkit-appearance: none;
8081
width: 32px;
8182
height: 32px;
8283
border-radius: 50%;
8384
}
8485
85-
input[type="color"]::-webkit-color-swatch-wrapper {
86+
input[type='color']::-webkit-color-swatch-wrapper {
8687
padding: 0;
8788
border-radius: 50%;
8889
}
8990
90-
input[type="color"]::-webkit-color-swatch {
91+
input[type='color']::-webkit-color-swatch {
9192
border-color: var(--border);
9293
border-radius: 50%;
9394
}
9495
95-
input[type="checkbox"] {
96+
input[type='checkbox'] {
9697
filter: none !important;
9798
position: absolute !important;
9899
opacity: 0 !important;
99100
}
100101
101-
input[type="checkbox"] + label {
102+
input[type='checkbox'] + label {
102103
position: relative !important;
103104
cursor: pointer !important;
104105
padding: 0 !important;
105106
}
106107
107-
108-
input[type="checkbox"] + label:before {
108+
input[type='checkbox'] + label:before {
109109
position: relative;
110110
content: '' !important;
111111
margin-right: 10px !important;
@@ -118,31 +118,30 @@
118118
border-radius: 4px !important;
119119
}
120120
121-
input[type="checkbox"]:hover + label:before {
121+
input[type='checkbox']:hover + label:before {
122122
background: var(--contrast) !important;
123123
}
124124
125-
input[type="checkbox"]:focus + label:before {
125+
input[type='checkbox']:focus + label:before {
126126
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12) !important;
127127
}
128128
129-
input[type="checkbox"]:checked + label:before {
129+
input[type='checkbox']:checked + label:before {
130130
background: var(--accent) !important;
131131
color: var(--bg) !important;
132132
}
133133
134-
input[type="checkbox"]:disabled + label {
134+
input[type='checkbox']:disabled + label {
135135
color: #b8b8b8 !important;
136136
cursor: auto !important;
137137
}
138138
139-
140-
input[type="checkbox"]:disabled + label:before {
139+
input[type='checkbox']:disabled + label:before {
141140
box-shadow: none !important;
142141
opacity: 0.6;
143142
}
144143
145-
input[type="checkbox"]:checked + label:after {
144+
input[type='checkbox']:checked + label:after {
146145
content: '' !important;
147146
position: absolute !important;
148147
left: 3px !important;
@@ -213,5 +212,5 @@
213212
id='scrollbars'
214213
on:change={debouncedApply}
215214
bind:checked={$app.scrollbars} />
216-
<label for="scrollbars"></label>
215+
<label for='scrollbars'></label>
217216
</div>

0 commit comments

Comments
 (0)