Skip to content

Commit 4c0bf47

Browse files
deltorkdeltork
committed
test: minor adjustment to web bundle test
1 parent 8f755d8 commit 4c0bf47

File tree

13 files changed

+268
-108
lines changed

13 files changed

+268
-108
lines changed

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
[(ngModel)]="studioService.slots.title"
3939
[ngStyle]="{
4040
'width.ch': studioService.slots.title.length,
41-
'min-width.ch': 20
41+
'min-width.ch': 20,
4242
}"
4343
style="border: none"
4444
placeholder="Enter your title here"
@@ -50,7 +50,7 @@
5050
[(ngModel)]="studioService.slots.subtitle"
5151
[ngStyle]="{
5252
'width.ch': studioService.slots.subtitle.length,
53-
'min-width.ch': 20
53+
'min-width.ch': 20,
5454
}"
5555
style="border: none"
5656
placeholder="Enter your subtitle here"
@@ -60,7 +60,5 @@
6060
</read-along>
6161
</div>
6262
</div>
63-
<div class="row mb-5"></div>
64-
<app-wc-styling></app-wc-styling>
6563
</div>
6664
</section>

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

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,32 @@ <h2 i18n="Title for upload box" class="title">
5353
</div>
5454
</div>
5555
</div>
56-
<div class="container">
57-
<div class="row justify-content-center">
58-
<div class="col">
59-
<div id="readalongContainer" #readalongContainer></div>
60-
</div>
56+
<!--div class="fluid-container">
57+
<div class="row flex-nowrap">
58+
<div class="col col-lg-7">
59+
6160
</div>
61+
<div class="col-12 bg-fade col-lg-5 pt-lg-5 d-lg-flex flex-row" *ngIf="hasFile">
62+
6263
64+
</div>
65+
</div></div-->
66+
<div
67+
class="d-flex justify-content-center flex-column flex-xl-row flex-xl-nowrap bg-light mt-3"
68+
>
69+
<div id="readalongContainer" #readalongContainer></div>
70+
<div [class.d-none]="!hasFile" [class.d-lg-flex]="hasFile" class="flex-row">
71+
<div
72+
class="handle me-2 d-none d-lg-block"
73+
#handle
74+
draggable="true"
75+
id="handle"
76+
></div>
77+
<app-wc-styling #styleWindow id="styleWindow"></app-wc-styling>
78+
</div>
79+
</div>
80+
81+
<div class="container">
6382
<div class="row justify-content-center mt-5 mb-5">
6483
<div class="col" id="audioToolbar">
6584
<mat-toolbar *ngIf="editorService.audioControl$.valid">
@@ -91,7 +110,5 @@ <h2 i18n="Title for upload box" class="title">
91110
></div>
92111
</div>
93112
</div>
94-
95-
<app-wc-styling *ngIf="hasFile"></app-wc-styling>
96113
</div>
97114
</section>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,24 @@
66

77
.row
88
--bs-gutter-x: 0
9+
10+
#readalongContainer
11+
margin: 0 2.5vw
12+
13+
@media screen and (min-width:1200px)
14+
div > #handle
15+
position: absolute
16+
width: 13px
17+
height: 85vh
18+
max-height: calc( 55vh + 100px)
19+
background-color: rgba(0,0,0,0.7)
20+
border: 3px solid #eee
21+
border-width: 0 5px
22+
margin-right: 1em
23+
margin-top: 1em
24+
cursor: col-resize
25+
z-index: 1000
26+
27+
app-wc-styling:has(#style-section.collapsed)
28+
width: 100px
29+

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

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { DownloadService } from "../shared/download/download.service";
3131
import { SupportedOutputs } from "../ras.service";
3232
import { ToastrService } from "ngx-toastr";
3333
import { WcStylingService } from "../shared/wc-styling/wc-styling.service";
34+
import { WcStylingComponent } from "../shared/wc-styling/wc-styling.component";
3435
@Component({
3536
selector: "app-editor",
3637
templateUrl: "./editor.component.html",
@@ -41,7 +42,8 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
4142
@ViewChild("wavesurferContainer") wavesurferContainer!: ElementRef;
4243
wavesurfer: WaveSurfer;
4344
@ViewChild("readalongContainer") readalongContainerElement: ElementRef;
44-
45+
@ViewChild("handle") handleElement!: ElementRef;
46+
@ViewChild("styleWindow") styleElement!: WcStylingComponent;
4547
readalong: Components.ReadAlong;
4648

4749
language: "eng" | "fra" | "spa" = "eng";
@@ -128,6 +130,38 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
128130
if (window.location.hash.endsWith("startTour=yes")) {
129131
this.startTour();
130132
}
133+
if (this.handleElement) {
134+
(this.handleElement.nativeElement as HTMLElement).addEventListener(
135+
"drag",
136+
(ev: DragEvent) => {
137+
console.log("[DEBUG] dragged");
138+
if (this.styleElement.collapsed$.getValue()) {
139+
this.resetStyleWindowSize();
140+
return;
141+
}
142+
if (ev.x < 600) return; // do not let the read along be squeezed past 600px width
143+
// When the handle is dragged, we want to resize the readalong and style containers
144+
const styleEle = this.styleElement?.styleSection
145+
.nativeElement as HTMLElement;
146+
const readAlong = this.readalongContainerElement
147+
?.nativeElement as HTMLElement;
148+
if (styleEle?.style) {
149+
styleEle.style.width = `calc(100vw - ${ev.x}px)`;
150+
}
151+
152+
if (readAlong?.style) {
153+
readAlong.style.width = `${ev.x}px`;
154+
}
155+
},
156+
);
157+
this.styleElement.collapsed$.subscribe((collapsed) => {
158+
if (collapsed) {
159+
this.resetStyleWindowSize();
160+
}
161+
});
162+
} else {
163+
this.resetStyleWindowSize();
164+
}
131165
}
132166

133167
ngOnInit(): void {}
@@ -477,4 +511,18 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
477511
async addWCCustomFont($font: string) {
478512
this.readalong?.addCustomFont($font);
479513
}
514+
resetStyleWindowSize() {
515+
const styleEle = this.styleElement?.styleSection
516+
.nativeElement as HTMLElement;
517+
const readAlong = this.readalongContainerElement
518+
?.nativeElement as HTMLElement;
519+
520+
if (window.innerWidth > 1199) {
521+
styleEle.style.width = `65vh`;
522+
readAlong.style.width = `70vw`;
523+
} else {
524+
styleEle.style.width = `95vw`;
525+
readAlong.style.width = `95vw`;
526+
}
527+
}
480528
}

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

Lines changed: 55 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,56 @@
11
<div
2+
#styleSection
23
id="style-section"
3-
[class]="'col-12 p-3 border bg-light' + (collapsed ? ' collapsed' : '')"
4+
[class]="
5+
'col p-3 bg-light' + ((collapsed$ | async) ? ' collapsed' : ' ms-xl-5')
6+
"
47
>
5-
<div class="d-flex flex-column flex-md-row justify-content-between">
6-
<div class="p-0 order-1 order-md-0">
7-
<h1 i18n="Title for style box" class="title">
8-
Optional:
8+
<div class="d-flex flex-column flex-md-row justify-content-between header">
9+
<div class="p-0 order-0 order-md-0">
10+
<button
11+
mat-icon-button
12+
(click)="toggleCollapse()"
13+
data-test-id="toggle-css-box"
14+
>
15+
<span class="d-none d-xl-inline">
16+
<mat-icon *ngIf="collapsed$ | async">code</mat-icon>
17+
<mat-icon *ngIf="!(collapsed$ | async)">chevron_right</mat-icon>
18+
</span>
19+
<span class="d-xl-none">
20+
<mat-icon *ngIf="collapsed$ | async">keyboard_arrow_down</mat-icon>
21+
<mat-icon *ngIf="!(collapsed$ | async)">keyboard_arrow_up</mat-icon>
22+
</span>
23+
</button>
24+
</div>
25+
<div
26+
*ngIf="collapsed$ | async"
27+
class="p-0 order-1 order-md-1 helper-text"
28+
(click)="collapsed$.next(false)"
29+
>
30+
<h1 i18n="Advanced styling" class="title">Advanced styling</h1>
31+
</div>
32+
<div class="ms-5 ms-md-0 p-0 order-1 order-md-1">
33+
<h1 class="title">
934
<a
1035
rel="noopener"
1136
href="https://github.com/ReadAlongs/Studio-Web/tree/main/packages/web-component#css-customization"
1237
target="_blank"
1338
>
14-
Styling</a
39+
<span i18n="Advanced styling">Advanced Styling</span></a
1540
>
1641
<button class="nav__button" mat-button (click)="openHelpDialog()">
1742
<mat-icon>help</mat-icon>
18-
help
43+
<span i18n="Help">Help</span>
1944
</button>
2045
</h1>
2146
</div>
22-
<div class="p-0 order-2 order-md-1">
47+
<div class="ms-5 ms-md-0 p-0 order-2 order-md-2">
2348
<mat-button-toggle-group
2449
appearance="legacy"
2550
(change)="toggleStyleInput($event)"
2651
name="inputMethod"
2752
aria-label="Input Method"
28-
[value]="$inputType"
53+
[value]="inputType"
2954
>
3055
<mat-button-toggle i18n="Label for style Write toggle" value="edit"
3156
>Write</mat-button-toggle
@@ -35,18 +60,8 @@ <h1 i18n="Title for style box" class="title">
3560
>
3661
</mat-button-toggle-group>
3762
</div>
38-
<div class="p-0 order-0 order-md-2">
39-
<button
40-
mat-icon-button
41-
(click)="collapsed = !collapsed"
42-
data-test-id="toggle-css-box"
43-
>
44-
<mat-icon *ngIf="collapsed">keyboard_arrow_down</mat-icon
45-
><mat-icon *ngIf="!collapsed">keyboard_arrow_up</mat-icon>
46-
</button>
47-
</div>
4863
</div>
49-
<div *ngIf="$inputType === 'upload'">
64+
<div *ngIf="inputType === 'upload'">
5065
<div class="row">
5166
<div class="mt-4 mb-3">
5267
<!-- <div class="container"> -->
@@ -69,34 +84,37 @@ <h1 i18n="Title for style box" class="title">
6984
</div>
7085
</div>
7186
</div>
72-
<div *ngIf="$inputType === 'edit'">
87+
<div *ngIf="inputType === 'edit'">
7388
<div class="d-flex flex-column flex-md-row justify-content-between p-0">
74-
<span class="p-0"
75-
><h2 i18n="Title for style writing box" class="subtitle">
89+
<span class="ms-5 ms-md-0 p-0">
90+
<h2
91+
i18n="Title for style writing box"
92+
class="subtitle mt-3 text-center"
93+
>
7694
Write or paste your style sheet here
77-
</h2></span
78-
>
79-
<span class="p-0">
80-
<button mat-button (click)="updateStyle()">
81-
<mat-icon class="mat-icon-lg">sync</mat-icon>
82-
Apply
83-
</button></span
95+
</h2>
96+
</span>
97+
98+
<span
99+
class="ms-5 ms-md-0 p-0 d-flex justify-content-between flex-row flex-lg-column"
84100
>
85-
<span class="p-0">
86101
<button
87102
i18n="Style download button"
88103
mat-button
89-
[disabled]="!($styleText | async)"
104+
[disabled]="!(styleText$ | async)"
90105
(click)="downloadStyle()"
91106
aria-label="Style download button"
92107
class="pr-0"
93108
>
94-
<mat-icon class="mat-icon-lg">save</mat-icon> Save a copy
109+
<mat-icon class="mat-icon-lg">save</mat-icon> Save a copy</button
110+
><button mat-button (click)="updateStyle()">
111+
<mat-icon class="mat-icon-lg">sync</mat-icon>
112+
Apply
95113
</button>
96114
</span>
97115
</div>
98116
<div class="row">
99-
<div class="mt-4 mb-3">
117+
<div class="mt-4 mb-3 ms-5 ms-md-0">
100118
<!-- <div class="container"> -->
101119
<label
102120
i18n="Instructions for uploading font"
@@ -117,10 +135,10 @@ <h1 i18n="Title for style box" class="title">
117135
</div>
118136
</div>
119137
<div class="row">
120-
<mat-form-field class="col-12 p-0 b-0">
138+
<mat-form-field class="col-12 p-0 b-0 ms-5 ms-md-0">
121139
<textarea
122-
[ngModel]="$styleText | async"
123-
(ngModelChange)="$styleText.next($event)"
140+
[ngModel]="styleText$ | async"
141+
(ngModelChange)="styleText$.next($event)"
124142
id="styleInput"
125143
class="border rounded b-0 p-0 bg-light"
126144
matInput

‎packages/studio-web/src/app/shared/wc-styling/wc-styling.component.sass‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
#styleInput
22
border: 1px solid #222
3-
min-height: 35vh
43
font-family: 'Noto Sans', 'Verdana', 'Arial', 'sans-serif'
5-
4+
min-height: 35vh
65
.collapsed
76
max-height: 8em
87
overflow: hidden
@@ -37,3 +36,37 @@ h2
3736
font-family: 'Courier new'
3837
font-size: 1.4em
3938
line-height: 1.5em
39+
40+
@media only screen and (max-width:1200px)
41+
#style-section
42+
width: 95vw
43+
margin-left: 2.5vw
44+
45+
div.header > div.helper-text
46+
display: none !important
47+
48+
@media only screen and (min-width:1200px)
49+
#style-section
50+
transform: rotate(0deg) translateX(0%)
51+
height: 70vh
52+
transition: height 1s
53+
width: 100%
54+
55+
#style-section.collapsed
56+
transform: rotate(90deg)
57+
transform-origin: bottom left
58+
width: 85em
59+
max-height: 4.7em
60+
transition: transform 1s
61+
max-width: calc( 55vh + 100px)
62+
63+
div.header > div
64+
display: none
65+
66+
div.header > div:first-of-type, div.header > div.helper-text
67+
display: inline-block
68+
cursor: pointer
69+
70+
71+
div.justify-content-between
72+
justify-content: flex-start !important

0 commit comments

Comments
 (0)