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

Commit 4936ee6

Browse files
peterpeterparkerpeterpeterparker
committed
merge: popover right menu
2 parents 7c8bbcf + 86420a7 commit 4936ee6

File tree

14 files changed

+226
-133
lines changed

14 files changed

+226
-133
lines changed

‎studio/package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎studio/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"dependencies": {
1717
"@ionic/core": "4.1.1",
1818
"deckdeckgo": "^1.0.0-beta.32",
19-
"deckdeckgo-highlight-code": "^1.0.0-alpha.13",
19+
"deckdeckgo-highlight-code": "^1.0.0-alpha.14",
2020
"deckdeckgo-inline-editor": "^1.0.0-alpha.5",
2121
"deckdeckgo-qrcode": "^1.0.0-alpha.6",
2222
"deckdeckgo-remote": "^1.0.0-alpha.8",

‎studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -489,7 +489,7 @@ export class AppEditorToolbar {
489489
await this.emitChange();
490490
};
491491

492-
private async openSlotType($event: UIEvent) {
492+
private async openSlotType() {
493493
if (this.deckOrSlide) {
494494
return;
495495
}
@@ -499,8 +499,8 @@ export class AppEditorToolbar {
499499
componentProps: {
500500
selectedElement: this.selectedElement
501501
},
502-
event: $event,
503-
mode: 'ios'
502+
mode: 'md',
503+
cssClass: 'popover-menu'
504504
});
505505

506506
popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {
@@ -512,7 +512,7 @@ export class AppEditorToolbar {
512512
await popover.present();
513513
}
514514

515-
private async openCode($event: UIEvent) {
515+
private async openCode() {
516516
if (!this.code) {
517517
return;
518518
}
@@ -523,8 +523,8 @@ export class AppEditorToolbar {
523523
selectedElement: this.selectedElement,
524524
codeDidChange: this.codeDidChange
525525
},
526-
event: $event,
527-
mode: 'ios'
526+
mode: 'md',
527+
cssClass: 'popover-menu'
528528
});
529529

530530
await popover.present();
@@ -618,7 +618,7 @@ export class AppEditorToolbar {
618618
}
619619

620620
private renderDelete() {
621-
return <a onClick={() => this.deleteElement()}
621+
return <a onClick={() => this.deleteElement()} title="Delete"
622622
class={this.deckBusy && this.deckOrSlide ? "disabled" : undefined}>
623623
<ion-icon name="trash"></ion-icon>
624624
</a>
@@ -634,10 +634,10 @@ export class AppEditorToolbar {
634634
};
635635

636636
return [
637-
<a onClick={(e: UIEvent) => this.openForDeckOrSlide(e, this.openColorPicker)}>
637+
<a onClick={(e: UIEvent) => this.openForDeckOrSlide(e, this.openColorPicker)} title="Color">
638638
<ion-label style={styleColor}>A</ion-label>
639639
</a>,
640-
<a onClick={(e: UIEvent) => this.openForDeckOrSlide(e, this.openBackgroundPicker)}>
640+
<a onClick={(e: UIEvent) => this.openForDeckOrSlide(e, this.openBackgroundPicker)} title="Background">
641641
<ion-label style={styleBackground}>Bg</ion-label>
642642
</a>
643643
]
@@ -647,7 +647,7 @@ export class AppEditorToolbar {
647647
if (this.deckOrSlide) {
648648
return undefined;
649649
} else {
650-
return <a onClick={(e: UIEvent) => this.openSlotType(e)}>
650+
return <a onClick={() => this.openSlotType()} title="Toggle element type">
651651
<ion-label>T</ion-label>
652652
</a>
653653
}
@@ -657,7 +657,7 @@ export class AppEditorToolbar {
657657
if (!this.code) {
658658
return undefined;
659659
} else {
660-
return <a onClick={(e: UIEvent) => this.openCode(e)}>
660+
return <a onClick={() => this.openCode()} title="Code attributes">
661661
<ion-icon name="code"></ion-icon>
662662
</a>
663663
}

‎studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export class DeckEventsHandler {
5555
this.el.addEventListener('deckDidChange', this.onDeckChange, false);
5656
this.el.addEventListener('slideDidChange', this.onSlideChange, false);
5757
this.el.addEventListener('slideDidLoad', this.onSlideDidLoad, false);
58+
this.el.addEventListener('slidesDidLoad', this.onSlidesDidLoad, false);
5859
this.el.addEventListener('slideDelete', this.onSlideDelete, false);
5960
this.el.addEventListener('codeDidChange', this.onCodeChange, false);
6061

@@ -75,6 +76,7 @@ export class DeckEventsHandler {
7576
this.el.removeEventListener('deckDidChange', this.onDeckChange, true);
7677
this.el.removeEventListener('slideDidChange', this.onSlideChange, true);
7778
this.el.removeEventListener('slideDidLoad', this.onSlideDidLoad, true);
79+
this.el.removeEventListener('slidesDidLoad', this.onSlidesDidLoad, true);
7880
this.el.removeEventListener('slideDelete', this.onSlideDelete, true);
7981
this.el.removeEventListener('codeDidChange', this.onCodeChange, true);
8082

@@ -91,11 +93,16 @@ export class DeckEventsHandler {
9193

9294
private onSlideDidLoad = async ($event: CustomEvent) => {
9395
if ($event && $event.target && $event.target instanceof HTMLElement) {
94-
await this.slideToLastSlide($event.target);
9596
await this.createSlide($event.target);
9697
}
9798
};
9899

100+
private onSlidesDidLoad = async ($event: CustomEvent) => {
101+
if ($event) {
102+
await this.slideToLastSlide();
103+
}
104+
};
105+
99106
private onDeckChange = async ($event: CustomEvent) => {
100107
if (!$event || !$event.detail) {
101108
return;
@@ -518,19 +525,33 @@ export class DeckEventsHandler {
518525
return SlideTemplate[templateKey];
519526
}
520527

521-
private slideToLastSlide(newSlide: HTMLElement): Promise<void> {
528+
private slideToLastSlide(): Promise<void> {
522529
return new Promise<void>(async (resolve) => {
523530
const deck: HTMLElement = this.el.querySelector('deckgo-deck');
524531

525-
if (!deck) {
532+
if (!deck || !deck.children || deck.children.length <= 0) {
533+
resolve();
534+
return;
535+
}
536+
537+
const slides: Element[] = Array.from(deck.children).filter((slide: Element) => {
538+
return slide.tagName.toLocaleLowerCase().indexOf('deckgo-slide-') > -1
539+
});
540+
541+
if (!slides || slides.length <= 0) {
526542
resolve();
527543
return;
528544
}
529545

530-
if (!newSlide.getAttribute('slide_id') && deck.hasChildNodes()) {
531-
await (deck as any).slideTo(deck.children && deck.children.length > 0 ? deck.children.length - 1 : 0);
546+
const lastSlide: Element = slides[slides.length - 1];
547+
548+
if (!lastSlide || lastSlide.getAttribute('slide_id')) {
549+
resolve();
550+
return;
532551
}
533552

553+
await (deck as any).slideTo(slides.length - 1);
554+
534555
resolve();
535556
});
536557
}

‎studio/src/app/pages/editor/app-editor/app-editor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -341,8 +341,8 @@ export class AppEditor {
341341
const popover: HTMLIonPopoverElement = await this.popoverController.create({
342342
component: 'app-slide-type',
343343
event: $event.detail,
344-
mode: 'ios',
345-
cssClass: 'app-slide-type'
344+
mode: 'md',
345+
cssClass: 'popover-menu'
346346
});
347347

348348
popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {

‎studio/src/app/popovers/editor/app-code/app-code.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
app-code {
2+
h2 {
3+
color: var(--ion-color-primary);
4+
}
25

36
ion-list.list-ios {
47
margin-bottom: 0;
@@ -9,6 +12,14 @@ app-code {
912
ion-item {
1013
--border-width: 0;
1114
--inner-border-width: 0;
15+
16+
&.item-input {
17+
--highlight-color-focused: transparent;
18+
19+
ion-input {
20+
border-bottom: 1px solid var(--ion-color-medium);
21+
}
22+
}
1223

1324
&.select {
1425
ion-label:first-of-type {
@@ -20,6 +31,10 @@ app-code {
2031
padding-left: 0;
2132
}
2233
}
34+
35+
small {
36+
color: var(--ion-color-medium);
37+
}
2338
}
2439

2540
ion-item-divider {
@@ -31,5 +46,19 @@ app-code {
3146
ion-label {
3247
margin: 16px 0 4px;
3348
}
49+
50+
button.info {
51+
background: transparent;
52+
border: 1px solid var(--ion-color-primary);
53+
border-radius: 50%;
54+
height: 1.5rem;
55+
width: 1.5rem;
56+
margin: 16px 16px 0;
57+
padding: 0;
58+
59+
ion-icon {
60+
color: var(--ion-color-primary);
61+
}
62+
}
3463
}
3564
}

‎studio/src/app/popovers/editor/app-code/app-code.tsx‎

Lines changed: 63 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ enum CodeColorType {
1919
})
2020
export class AppCode {
2121

22+
@Prop({connect: 'ion-alert-controller'}) alertController: HTMLIonAlertControllerElement;
23+
2224
@Element() el: HTMLElement;
2325

2426
@Prop()
@@ -68,10 +70,7 @@ export class AppCode {
6870
private initCurrentHiglight(): Promise<void> {
6971
return new Promise<void>(async (resolve) => {
7072
this.highlightLines = this.selectedElement && this.selectedElement.getAttribute('highlight-lines') ? this.selectedElement.getAttribute('highlight-lines') : null;
71-
72-
if (this.selectedElement && this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-line-background')) {
73-
this.highlightColor = this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-line-background');
74-
}
73+
this.highlightColor = this.selectedElement && this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-line-background') ? this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-line-background') : '#3880ff';
7574

7675
resolve();
7776
});
@@ -251,58 +250,67 @@ export class AppCode {
251250
});
252251
}
253252

253+
private async presentHighlightInfo() {
254+
const alert = await this.alertController.create({
255+
message: 'If you wish to highlight some specific lines of your code, list their line numbers separately using comma.<br/><br/>For example: 0,2 7,7 13,15<br/><br/>Which would highlight lines 0 to 2, line 7 and lines 13 to 15.',
256+
buttons: ['Ok']
257+
});
258+
259+
return await alert.present();
260+
}
261+
254262
render() {
255-
return <ion-list>
256-
<ion-item-divider><ion-label>Language</ion-label></ion-item-divider>
257-
258-
<ion-item class="select">
259-
<ion-label>Language</ion-label>
260-
<ion-select value={this.currentLanguage} onIonChange={(e: CustomEvent) => this.toggleCodeLanguage(e)} class="ion-padding-start ion-padding-end">
261-
{this.renderSelectOptions()}
262-
</ion-select>
263-
</ion-item>
264-
265-
<ion-item-divider class="ion-padding-top"><ion-label>Colors</ion-label></ion-item-divider>
266-
267-
<ion-item class="select">
268-
<ion-label>Color applied to</ion-label>
269-
270-
<ion-select value={this.codeColorType} onIonChange={(e: CustomEvent) => this.toggleColorType(e)} class="ion-padding-start ion-padding-end">
271-
<ion-select-option value={CodeColorType.COMMENTS}>Comments</ion-select-option>
272-
<ion-select-option value={CodeColorType.FUNCTION}>Functions</ion-select-option>
273-
<ion-select-option value={CodeColorType.KEYWORD}>Keywords</ion-select-option>
274-
<ion-select-option value={CodeColorType.OPERATOR}>Operators</ion-select-option>
275-
<ion-select-option value={CodeColorType.PUNCTUATION}>Punctuation</ion-select-option>
276-
<ion-select-option value={CodeColorType.PROPERTY}>Properties</ion-select-option>
277-
<ion-select-option value={CodeColorType.REGEX}>Regex</ion-select-option>
278-
<ion-select-option value={CodeColorType.SELECTOR}>Selector</ion-select-option>
279-
</ion-select>
280-
</ion-item>
281-
282-
<ion-item>
283-
<ion-label>Color</ion-label>
284-
<input type="color" value={this.codeColor} onChange={(e) => this.selectColor(e, this.setCodeColor)}></input>
285-
</ion-item>
286-
287-
<ion-item-divider class="ion-padding-top">
288-
<ion-label>Highlight lines</ion-label>
289-
</ion-item-divider>
290-
291-
<ion-item>
292-
<ion-input value={this.highlightLines} placeholder="Enter lines here" debounce={500}
293-
onIonInput={(e: CustomEvent<KeyboardEvent>) => this.handleInput(e)}
294-
onIonChange={() => this.highlightSelectedLines()}></ion-input>
295-
</ion-item>
296-
297-
<ion-item>
298-
<small>To highlight lines, use a coma separated list of lines. For example: 0,2 7,7 13,15</small>
299-
</ion-item>
300-
301-
<ion-item>
302-
<ion-label>Color</ion-label>
303-
<input type="color" value={this.highlightColor} onChange={(e) => this.selectColor(e, this.setHighlightColor)}></input>
304-
</ion-item>
305-
</ion-list>
263+
return [<div class="ion-padding"><h2>Code attributes</h2></div>,
264+
<ion-list>
265+
<ion-item-divider><ion-label>Language</ion-label></ion-item-divider>
266+
267+
<ion-item class="select">
268+
<ion-label>Language</ion-label>
269+
<ion-select value={this.currentLanguage} onIonChange={(e: CustomEvent) => this.toggleCodeLanguage(e)} class="ion-padding-start ion-padding-end">
270+
{this.renderSelectOptions()}
271+
</ion-select>
272+
</ion-item>
273+
274+
<ion-item-divider class="ion-padding-top"><ion-label>Colors</ion-label></ion-item-divider>
275+
276+
<ion-item class="select">
277+
<ion-label>Color applied to</ion-label>
278+
279+
<ion-select value={this.codeColorType} onIonChange={(e: CustomEvent) => this.toggleColorType(e)} class="ion-padding-start ion-padding-end">
280+
<ion-select-option value={CodeColorType.COMMENTS}>Comments</ion-select-option>
281+
<ion-select-option value={CodeColorType.FUNCTION}>Functions</ion-select-option>
282+
<ion-select-option value={CodeColorType.KEYWORD}>Keywords</ion-select-option>
283+
<ion-select-option value={CodeColorType.OPERATOR}>Operators</ion-select-option>
284+
<ion-select-option value={CodeColorType.PUNCTUATION}>Punctuation</ion-select-option>
285+
<ion-select-option value={CodeColorType.PROPERTY}>Properties</ion-select-option>
286+
<ion-select-option value={CodeColorType.REGEX}>Regex</ion-select-option>
287+
<ion-select-option value={CodeColorType.SELECTOR}>Selector</ion-select-option>
288+
</ion-select>
289+
</ion-item>
290+
291+
<ion-item>
292+
<ion-label>Color</ion-label>
293+
<input type="color" value={this.codeColor} onChange={(e) => this.selectColor(e, this.setCodeColor)}></input>
294+
</ion-item>
295+
296+
<ion-item-divider class="ion-padding-top">
297+
<ion-label>Highlight lines</ion-label>
298+
<button slot="end" class="info" onClick={() => this.presentHighlightInfo()}>
299+
<ion-icon name="help"></ion-icon>
300+
</button>
301+
</ion-item-divider>
302+
303+
<ion-item>
304+
<ion-input value={this.highlightLines} placeholder="List your lines here" debounce={500}
305+
onIonInput={(e: CustomEvent<KeyboardEvent>) => this.handleInput(e)}
306+
onIonChange={() => this.highlightSelectedLines()}></ion-input>
307+
</ion-item>
308+
309+
<ion-item>
310+
<ion-label>Color</ion-label>
311+
<input type="color" value={this.highlightColor} onChange={(e) => this.selectColor(e, this.setHighlightColor)}></input>
312+
</ion-item>
313+
</ion-list>]
306314
}
307315

308316
private renderSelectOptions() {

0 commit comments

Comments
 (0)