Skip to content

Commit c1edfda

Browse files
deltorkdeltork
committed
fix: minor ui adjustment to styling editor
1 parent c4b40c6 commit c1edfda

13 files changed

Lines changed: 274 additions & 213 deletions

‎packages/studio-web/src/app/editor/editor.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,12 @@ <h2 i18n="Title for upload box" class="title">
6464
</div>
6565
</div></div-->
6666
<div
67-
class="d-flex justify-content-center flex-column flex-xl-row flex-xl-nowrap bg-light mt-3"
67+
class="d-flex justify-content-center flex-column flex-xl-row flex-xl-nowrap bg-light mt-3 full-height"
6868
>
6969
<div id="readalongContainer" #readalongContainer></div>
7070
<div [class.d-none]="!hasFile" [class.d-lg-flex]="hasFile" class="flex-row">
7171
<div
72-
class="handle me-2 d-none d-lg-block"
72+
class="m-0 p-0 handle me-xl-2 d-none d-xl-block"
7373
#handle
7474
draggable="true"
7575
id="handle"

‎packages/studio-web/src/app/editor/editor.component.sass‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,34 @@
88
--bs-gutter-x: 0
99

1010
#readalongContainer
11-
margin: 0 2.5vw
11+
margin: 0 auto
12+
13+
#styleWindow
14+
justify-content: start
15+
margin: 0 auto
16+
17+
@media screen and (min-width:1200px) and (max-width:1500px)
18+
.full-height
19+
max-height: 95vmin
1220

1321
@media screen and (min-width:1200px)
1422
div > #handle
15-
position: absolute
23+
position: relative
1624
width: 13px
17-
height: 85vh
18-
max-height: calc( 55vh + 100px)
25+
height: 100%
1926
background-color: rgba(0,0,0,0.7)
2027
border: 3px solid #eee
2128
border-width: 0 5px
2229
margin-right: 1em
2330
margin-top: 1em
2431
cursor: col-resize
2532
z-index: 1000
33+
display: block
34+
#styleWindow
35+
margin: 0
36+
max-height: 95vh
37+
overflow-y: auto
2638

2739
app-wc-styling:has(#style-section.collapsed)
2840
width: 100px
29-
41+
overflow: hidden !important

‎packages/studio-web/src/app/editor/editor.component.ts‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import WaveSurfer from "wavesurfer.js";
22

3-
import { takeUntil, Subject, take } from "rxjs";
3+
import { takeUntil, Subject, take, fromEvent, debounceTime } from "rxjs";
44
import {
55
AfterViewInit,
66
Component,
@@ -70,6 +70,14 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
7070
this.wcStylingService.$wcStyleFonts.subscribe((font) =>
7171
this.addWCCustomFont(font),
7272
);
73+
fromEvent(window, "resize")
74+
.pipe(debounceTime(100), takeUntil(this.unsubscribe$)) // wait for 1 second after the last resize event
75+
.subscribe(() => {
76+
// When the window is resized, we want to reset the style window size
77+
// so that it does not get squeezed too small
78+
console.log("[DEBUG] window resized");
79+
this.resetStyleWindowSize();
80+
});
7381
}
7482

7583
async ngAfterViewInit(): Promise<void> {
@@ -134,37 +142,39 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
134142
this.startTour();
135143
}
136144
if (this.handleElement) {
137-
(this.handleElement.nativeElement as HTMLElement).addEventListener(
138-
"drag",
139-
(ev: DragEvent) => {
145+
fromEvent(this.handleElement.nativeElement, "dragend")
146+
.pipe(takeUntil(this.unsubscribe$), debounceTime(100))
147+
.subscribe((event) => {
148+
const ev = event as DragEvent;
140149
console.log("[DEBUG] dragged");
141150
if (this.styleElement.collapsed$.getValue()) {
142151
this.resetStyleWindowSize();
143152
return;
144153
}
145-
if (ev.x < 600) return; // do not let the read along be squeezed past 600px width
154+
if (ev.x < 600) {
155+
return;
156+
} // do not let the read along be squeezed past 600px width
157+
if (window.innerWidth - ev.x < 400) return; // do not let the style window be squeezed past 600px width)
146158
// When the handle is dragged, we want to resize the readalong and style containers
147159
const styleEle = this.styleElement?.styleSection
148160
.nativeElement as HTMLElement;
149161
const readAlong = this.readalongContainerElement
150162
?.nativeElement as HTMLElement;
151163
if (styleEle?.style) {
152-
styleEle.style.width = `calc(100vw - ${ev.x}px)`;
164+
styleEle.style.width = `calc(100vw - ${ev.x + 50}px)`;
153165
}
154166

155167
if (readAlong?.style) {
156168
readAlong.style.width = `${ev.x}px`;
157169
}
158-
},
159-
);
160-
this.styleElement.collapsed$.subscribe((collapsed) => {
161-
if (collapsed) {
162-
this.resetStyleWindowSize();
163-
}
164-
});
170+
});
165171
} else {
166172
this.resetStyleWindowSize();
167173
}
174+
this.styleElement.collapsed$.subscribe((collapsed) => {
175+
// When the style element is collapsed, we want to reset the style window size
176+
this.resetStyleWindowSize();
177+
});
168178
}
169179

170180
ngOnInit(): void {}
@@ -263,6 +273,9 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
263273
}
264274

265275
async loadRasFile(file: File | Blob) {
276+
//reset css
277+
this.wcStylingService.$wcStyleInput.next("");
278+
this.wcStylingService.$wcStyleFonts.next("");
266279
const text = await file.text();
267280
const readalong = await this.parseReadalong(text);
268281
this.loadAudioIntoWavesurferElement();
@@ -556,7 +569,9 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
556569
?.nativeElement as HTMLElement;
557570

558571
if (window.innerWidth > 1199) {
559-
styleEle.style.width = `65vh`;
572+
styleEle.style.width = this.styleElement.collapsed$.value
573+
? `65vh`
574+
: "calc(30vw - 50px)";
560575
readAlong.style.width = `70vw`;
561576
} else {
562577
styleEle.style.width = `95vw`;

‎packages/studio-web/src/app/shared/download/download.service.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,8 @@ Please host all assets on your server, include the font and package imports defi
240240
version="${environment.packageJson.singleFileBundleVersion}"
241241
href="data:application/readalong+xml;base64,${rasB64}"
242242
audio="${b64Audio}"
243-
image-assets-folder=""${b64Css}
243+
image-assets-folder=""
244+
${b64Css}
244245
>
245246
<span slot="read-along-header">${slots.title}</span>
246247
<span slot="read-along-subheader">${slots.subtitle}</span>
@@ -390,7 +391,8 @@ Please host all assets on your server, include the font and package imports defi
390391
audio="assets/${basename}.${audioExtension}"
391392
theme="light"
392393
language="eng"
393-
image-assets-folder="assets/"${pathCss}
394+
image-assets-folder="assets/"
395+
${pathCss}
394396
>
395397
<span slot='read-along-header'>${slots.title}</span>
396398
<span slot='read-along-subheader'>${slots.subtitle}</span>

‎packages/studio-web/src/app/shared/wc-styling/wc-styling-helper.html‎

Lines changed: 71 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,72 @@
1-
<div class="style-helper">
2-
<p>
3-
To customize the look and feel of your read-along, you need to upload or
4-
write some Cascading Style Sheets in the styling section.
5-
</p>
6-
<p>
7-
We are providing a table below to help you customize. Please note that your
8-
design must include both the light (<code>.theme--light</code>) and dark
9-
(<code>.theme--dark</code>) themes.
10-
</p>
11-
12-
<h2>Common classes</h2>
13-
<table>
14-
<thead>
15-
<tr>
16-
<th>Class</th>
17-
<th>Description</th>
18-
</tr>
19-
</thead>
20-
<tbody>
21-
<tr>
22-
<th>
23-
<code>.sentence__word</code>
24-
</th>
25-
<td>The aligned text</td>
26-
</tr>
27-
<tr>
28-
<th>
29-
<code>.sentence__word.reading</code>
30-
</th>
31-
<td>The aligned text being read</td>
32-
</tr>
33-
<tr>
34-
<th>
35-
<code>.sentence__text</code>
36-
</th>
37-
<td>The unaligned text</td>
38-
</tr>
39-
<tr>
40-
<th>
41-
<code>.sentence__translation</code>
42-
</th>
43-
<td>The translated text</td>
44-
</tr>
45-
<tr>
46-
<th>
47-
<code>.sentence</code>
48-
</th>
49-
<td>The sentence container</td>
50-
</tr>
51-
<tr>
52-
<th>
53-
<code>.paragraph</code>
54-
</th>
55-
<td>The paragraph containing the</td>
56-
</tr>
57-
</tbody>
58-
</table>
59-
<h2>Sample Style</h2>
60-
<!-- prettier-ignore -->
61-
62-
<pre class="css-block">
1+
<h2 mat-dialog-title i18n="Advanced styling">Advanced styling</h2>
2+
<mat-dialog-content class="mat-typography">
3+
<div class="style-helper">
4+
<p>
5+
To customize the look and feel of your read-along, you need to upload or
6+
write some Cascading Style Sheets in the styling section.
7+
</p>
8+
<p>
9+
We are providing a table below to help you customize. Please note that
10+
your design must include both the light (<code>.theme--light</code>) and
11+
dark (<code>.theme--dark</code>) themes.
12+
</p>
13+
14+
<h2>Common classes</h2>
15+
<table>
16+
<thead>
17+
<tr>
18+
<th>Class</th>
19+
<th>Description</th>
20+
</tr>
21+
</thead>
22+
<tbody>
23+
<tr>
24+
<th>
25+
<code>.sentence__word</code>
26+
</th>
27+
<td>The aligned text</td>
28+
</tr>
29+
<tr>
30+
<th>
31+
<code>.sentence__word.reading</code>
32+
</th>
33+
<td>The aligned text being read</td>
34+
</tr>
35+
<tr>
36+
<th>
37+
<code>.sentence__text</code>
38+
</th>
39+
<td>The unaligned text</td>
40+
</tr>
41+
<tr>
42+
<th>
43+
<code>.sentence__translation</code>
44+
</th>
45+
<td>The translated text</td>
46+
</tr>
47+
<tr>
48+
<th>
49+
<code>.sentence</code>
50+
</th>
51+
<td>The sentence container</td>
52+
</tr>
53+
<tr>
54+
<th>
55+
<code>.paragraph</code>
56+
</th>
57+
<td>The paragraph containing the</td>
58+
</tr>
59+
</tbody>
60+
</table>
61+
<h2>Sample Style</h2>
62+
<!-- prettier-ignore -->
63+
64+
<pre class="css-block">
6365
<span class="comment">
6466
/**
6567
define your colors and variables
66-
**/
67-
</span>
68+
**/
69+
</span>
6870
<span class="css-class">
6971
:root,
7072
#read-along-container</span> &#123;
@@ -205,4 +207,8 @@ <h2>Sample Style</h2>
205207
&#125;
206208

207209
</pre>
208-
</div>
210+
</div>
211+
</mat-dialog-content>
212+
<mat-dialog-actions>
213+
<button mat-button mat-dialog-close i18n="Close">Close</button>
214+
</mat-dialog-actions>

0 commit comments

Comments
 (0)