A music player that connects to your cloud/distributed storage.
chore: adapt export-import to new styles
+118
-122
+66
-66
src/facets/data/export-import/index.html
+66
-66
src/facets/data/export-import/index.html
···
1
-
<main>
2
-
<div class="panel">
3
-
<p>
4
-
Export all Diffuse data to a JSON snapshot, or restore from a previously exported file.
5
-
Importing replaces all data in that category.
6
-
</p>
7
-
<hr />
8
-
<div class="row">
9
-
<button id="export" disabled>
10
-
<span class="with-icon"><i class="ph-bold ph-download-simple"></i> Export all data</span>
11
-
</button>
12
-
</div>
13
-
<hr />
14
-
<div class="row">
15
-
<label class="with-icon" for="file">
16
-
<i class="ph-bold ph-upload"></i>
17
-
<input id="file" type="file" accept=".json,application/json" />
18
-
</label>
19
-
</div>
20
-
<hr />
21
-
<div class="row">
22
-
<button id="import-tracks" disabled>
23
-
<span class="with-icon"><i class="ph-bold ph-music-note"></i> Import tracks</span>
24
-
</button>
25
-
</div>
26
-
<div class="row">
27
-
<button id="import-playlist-items" disabled>
28
-
<span class="with-icon"><i class="ph-bold ph-playlist"></i> Import playlist items</span>
29
-
</button>
30
-
</div>
31
-
<div class="row">
32
-
<button id="import-facets" disabled>
33
-
<span class="with-icon"><i class="ph-bold ph-squares-four"></i> Import facets</span>
34
-
</button>
35
-
</div>
36
-
<div id="status" class="status" hidden></div>
37
-
</div>
38
-
</main>
39
-
40
1
<style>
41
2
@import "./styles/base.css";
42
-
@import "./styles/wireframe/ui.css";
43
3
@import "./vendor/@phosphor-icons/web/bold/style.css";
4
+
@import "./styles/diffuse/facet.css";
44
5
45
-
body {
46
-
display: flex;
47
-
align-items: center;
48
-
justify-content: center;
49
-
height: 100dvh;
50
-
}
51
-
52
-
main {
53
-
padding: var(--space-md);
54
-
}
55
-
56
-
button {
57
-
flex: 1;
58
-
}
59
-
60
-
p {
61
-
line-height: var(--leading-relaxed);
62
-
max-width: 42ch;
63
-
}
64
-
65
-
label {
66
-
flex: 1;
67
-
}
6
+
@layer base, diffuse;
68
7
69
8
input[type="file"] {
70
-
flex: 1;
9
+
background: none;
10
+
border: none;
11
+
padding: 0;
12
+
width: auto;
71
13
}
72
14
73
15
.status {
74
-
margin-top: var(--space-sm);
75
-
font-size: var(--text-sm);
16
+
font-size: var(--fs-xs);
76
17
}
77
18
78
19
.status--success {
···
91
32
}
92
33
}
93
34
</style>
35
+
36
+
<main>
37
+
<div class="facet__left">
38
+
<div>
39
+
<a href="./dashboard/" class="diffuse-logo-container">
40
+
<svg viewBox="0 0 902 134" width="160">
41
+
<title>Diffuse</title>
42
+
<use
43
+
xlink:href="images/diffuse-current.svg#diffuse"
44
+
href="images/diffuse-current.svg#diffuse"
45
+
></use>
46
+
</svg>
47
+
</a>
48
+
</div>
49
+
<h1>Export & Import</h1>
50
+
<p>
51
+
Export all Diffuse data to a JSON snapshot, or restore from a previously exported file.
52
+
Importing replaces all data in that category.
53
+
</p>
54
+
</div>
55
+
56
+
<div class="facet__right">
57
+
<div class="button-row">
58
+
<button id="export" disabled>
59
+
<i class="ph-bold ph-download-simple"></i>
60
+
<span>Export all data</span>
61
+
</button>
62
+
</div>
63
+
64
+
<hr />
65
+
66
+
<div>
67
+
<input id="file" type="file" accept=".json,application/json" />
68
+
</div>
69
+
70
+
<hr />
71
+
72
+
<p class="button-row">
73
+
<button id="import-tracks" disabled>
74
+
<i class="ph-bold ph-music-note"></i>
75
+
<span>Import tracks</span>
76
+
</button>
77
+
</p>
78
+
<p class="button-row">
79
+
<button id="import-playlist-items" disabled>
80
+
<i class="ph-bold ph-playlist"></i>
81
+
<span>Import playlist items</span>
82
+
</button>
83
+
</p>
84
+
<p class="button-row">
85
+
<button id="import-facets" disabled>
86
+
<i class="ph-bold ph-squares-four"></i>
87
+
<span>Import facets</span>
88
+
</button>
89
+
</p>
90
+
91
+
<div id="status" class="status" hidden></div>
92
+
</div>
93
+
</main>
94
94
95
95
<script type="module" src="facets/data/export-import/index.inline.js"></script>
+2
-1
src/facets/data/export-import/index.inline.js
+2
-1
src/facets/data/export-import/index.inline.js
···
112
112
* @param {string} label
113
113
*/
114
114
function setButtonLabel(btn, label) {
115
-
/** @type {ChildNode} */ (btn.querySelector(".with-icon")?.lastChild).textContent = label;
115
+
const span = /** @type {HTMLElement} */ (btn.querySelector("span"));
116
+
span.textContent = label;
116
117
}
117
118
118
119
// Import tracks
+50
-55
src/facets/data/v3-import/index.html
+50
-55
src/facets/data/v3-import/index.html
···
1
-
<main>
2
-
<div class="panel">
3
-
<p>
4
-
Import data from the previous version of Diffuse (v3). Upload the snapshot JSON file you
5
-
exported.
6
-
</p>
7
-
<hr />
8
-
<div class="row">
9
-
<label class="with-icon" for="file">
10
-
<i class="ph-bold ph-upload"></i>
11
-
<input id="file" type="file" accept=".json,application/json" />
12
-
</label>
13
-
</div>
14
-
<hr />
15
-
<div class="row">
16
-
<button id="import-favourites" disabled>
17
-
<span class="with-icon"><i class="ph-fill ph-star"></i> Import favourites</span>
18
-
</button>
19
-
</div>
20
-
<div class="row">
21
-
<button id="import-playlist-items" disabled>
22
-
<span class="with-icon"><i class="ph-bold ph-playlist"></i> Import playlist items</span>
23
-
</button>
24
-
</div>
25
-
<div id="status" class="status" hidden></div>
26
-
</div>
27
-
</main>
28
-
29
1
<style>
30
2
@import "./styles/base.css";
31
-
@import "./styles/wireframe/ui.css";
32
3
@import "./vendor/@phosphor-icons/web/bold/style.css";
33
4
@import "./vendor/@phosphor-icons/web/fill/style.css";
34
-
35
-
body {
36
-
display: flex;
37
-
align-items: center;
38
-
justify-content: center;
39
-
height: 100dvh;
40
-
}
41
-
42
-
main {
43
-
padding: var(--space-md);
44
-
}
5
+
@import "./styles/diffuse/facet.css";
45
6
46
-
button {
47
-
flex: 1;
48
-
}
49
-
50
-
p {
51
-
line-height: var(--leading-relaxed);
52
-
max-width: 42ch;
53
-
}
54
-
55
-
label {
56
-
flex: 1;
57
-
}
7
+
@layer base, diffuse;
58
8
59
9
input[type="file"] {
60
-
flex: 1;
10
+
background: none;
11
+
border: none;
12
+
padding: 0;
13
+
width: auto;
61
14
}
62
15
63
16
.status {
64
-
margin-top: var(--space-sm);
65
-
font-size: var(--text-sm);
17
+
font-size: var(--fs-xs);
66
18
}
67
19
68
20
.status--success {
···
81
33
}
82
34
}
83
35
</style>
36
+
37
+
<main>
38
+
<div class="facet__left">
39
+
<div>
40
+
<a href="./dashboard/" class="diffuse-logo-container">
41
+
<svg viewBox="0 0 902 134" width="160">
42
+
<title>Diffuse</title>
43
+
<use
44
+
xlink:href="images/diffuse-current.svg#diffuse"
45
+
href="images/diffuse-current.svg#diffuse"
46
+
></use>
47
+
</svg>
48
+
</a>
49
+
</div>
50
+
<h1>V3.x Import</h1>
51
+
<p>
52
+
Import data from the previous version of Diffuse. Upload the snapshot JSON file you exported.
53
+
</p>
54
+
</div>
55
+
56
+
<div class="facet__right">
57
+
<div>
58
+
<input id="file" type="file" accept=".json,application/json" />
59
+
</div>
60
+
61
+
<hr />
62
+
63
+
<p class="button-row">
64
+
<button id="import-favourites" disabled>
65
+
<i class="ph-fill ph-star"></i>
66
+
<span>Import favourites</span>
67
+
</button>
68
+
</p>
69
+
<p class="button-row">
70
+
<button id="import-playlist-items" disabled>
71
+
<i class="ph-bold ph-playlist"></i>
72
+
<span>Import playlist items</span>
73
+
</button>
74
+
</p>
75
+
76
+
<div id="status" class="status" hidden></div>
77
+
</div>
78
+
</main>
84
79
85
80
<script type="module" src="facets/data/v3-import/index.inline.js"></script>