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

Commit 09f668e

Browse files
peterpeterparkerpeterpeterparker
committed
feat: slot type in right menu too
1 parent d2df86c commit 09f668e

File tree

5 files changed

+97
-67
lines changed

5 files changed

+97
-67
lines changed

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

Lines changed: 8 additions & 8 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) => {
@@ -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={() => this.openCode()}>
660+
return <a onClick={() => this.openCode()} title="Code attributes">
661661
<ion-icon name="code"></ion-icon>
662662
</a>
663663
}

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

Lines changed: 3 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;

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

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -260,56 +260,57 @@ export class AppCode {
260260
}
261261

262262
render() {
263-
return <ion-list>
264-
<ion-item-divider><ion-label>Language</ion-label></ion-item-divider>
265-
266-
<ion-item class="select">
267-
<ion-label>Language</ion-label>
268-
<ion-select value={this.currentLanguage} onIonChange={(e: CustomEvent) => this.toggleCodeLanguage(e)} class="ion-padding-start ion-padding-end">
269-
{this.renderSelectOptions()}
270-
</ion-select>
271-
</ion-item>
272-
273-
<ion-item-divider class="ion-padding-top"><ion-label>Colors</ion-label></ion-item-divider>
274-
275-
<ion-item class="select">
276-
<ion-label>Color applied to</ion-label>
277-
278-
<ion-select value={this.codeColorType} onIonChange={(e: CustomEvent) => this.toggleColorType(e)} class="ion-padding-start ion-padding-end">
279-
<ion-select-option value={CodeColorType.COMMENTS}>Comments</ion-select-option>
280-
<ion-select-option value={CodeColorType.FUNCTION}>Functions</ion-select-option>
281-
<ion-select-option value={CodeColorType.KEYWORD}>Keywords</ion-select-option>
282-
<ion-select-option value={CodeColorType.OPERATOR}>Operators</ion-select-option>
283-
<ion-select-option value={CodeColorType.PUNCTUATION}>Punctuation</ion-select-option>
284-
<ion-select-option value={CodeColorType.PROPERTY}>Properties</ion-select-option>
285-
<ion-select-option value={CodeColorType.REGEX}>Regex</ion-select-option>
286-
<ion-select-option value={CodeColorType.SELECTOR}>Selector</ion-select-option>
287-
</ion-select>
288-
</ion-item>
289-
290-
<ion-item>
291-
<ion-label>Color</ion-label>
292-
<input type="color" value={this.codeColor} onChange={(e) => this.selectColor(e, this.setCodeColor)}></input>
293-
</ion-item>
294-
295-
<ion-item-divider class="ion-padding-top">
296-
<ion-label>Highlight lines</ion-label>
297-
<button slot="end" class="info" onClick={() => this.presentHighlightInfo()}>
298-
<ion-icon name="help"></ion-icon>
299-
</button>
300-
</ion-item-divider>
301-
302-
<ion-item>
303-
<ion-input value={this.highlightLines} placeholder="List your lines here" debounce={500}
304-
onIonInput={(e: CustomEvent<KeyboardEvent>) => this.handleInput(e)}
305-
onIonChange={() => this.highlightSelectedLines()}></ion-input>
306-
</ion-item>
307-
308-
<ion-item>
309-
<ion-label>Color</ion-label>
310-
<input type="color" value={this.highlightColor} onChange={(e) => this.selectColor(e, this.setHighlightColor)}></input>
311-
</ion-item>
312-
</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>]
313314
}
314315

315316
private renderSelectOptions() {

‎studio/src/app/popovers/editor/app-slot-type/app-slot-type.scss‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,35 @@
11
app-slot-type {
2+
div {
3+
h2 {
4+
color: var(--ion-color-primary);
5+
}
6+
}
7+
8+
ion-list.list-ios {
9+
margin-bottom: 0;
10+
padding-top: 8px;
11+
padding-bottom: 8px;
12+
}
13+
14+
ion-item {
15+
--border-width: 0;
16+
--inner-border-width: 0;
17+
}
18+
219
a {
320
color: inherit;
421
cursor: pointer;
522

623
&.current {
7-
color: var(--ion-color-primary);
24+
ion-item {
25+
color: var(--ion-color-tertiary);
26+
}
827
}
928

1029
&:hover {
11-
color: var(--ion-color-tertiary);
30+
ion-item {
31+
color: var(--ion-color-tertiary);
32+
}
1233
}
1334
}
1435
}

‎studio/src/app/popovers/editor/app-slot-type/app-slot-type.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,17 @@ export class AppSlideAdd {
2929
}
3030

3131
render() {
32-
return <div padding>
33-
<a onClick={() => this.closePopover(SlotType.H1)} class={this.currentType === SlotType.H1 ? "current" : ""}><h1>Title</h1></a>
34-
<a onClick={() => this.closePopover(SlotType.H2)} class={this.currentType === SlotType.H2 ? "current" : ""}><h2>Title</h2></a>
35-
<a onClick={() => this.closePopover(SlotType.H3)} class={this.currentType === SlotType.H3 ? "current" : ""}><h3>Title</h3></a>
36-
<a onClick={() => this.closePopover(SlotType.DIV)} class={this.currentType === SlotType.DIV ? "current" : ""}><p>Paragraph</p></a>
37-
<a onClick={() => this.closePopover(SlotType.CODE)} class={this.currentType === SlotType.CODE ? "current" : ""}><p>Code</p></a>
38-
</div>
32+
return [<div class="ion-padding">
33+
<h2>Toggle element type</h2>
34+
</div>,
35+
36+
<ion-list>
37+
<a onClick={() => this.closePopover(SlotType.H1)} class={this.currentType === SlotType.H1 ? "current" : ""}><ion-item><h1>Title</h1></ion-item></a>
38+
<a onClick={() => this.closePopover(SlotType.H2)} class={this.currentType === SlotType.H2 ? "current" : ""}><ion-item><h2>Title</h2></ion-item></a>
39+
<a onClick={() => this.closePopover(SlotType.H3)} class={this.currentType === SlotType.H3 ? "current" : ""}><ion-item><h3>Title</h3></ion-item></a>
40+
<a onClick={() => this.closePopover(SlotType.DIV)} class={this.currentType === SlotType.DIV ? "current" : ""}><ion-item><p>Paragraph</p></ion-item></a>
41+
<a onClick={() => this.closePopover(SlotType.CODE)} class={this.currentType === SlotType.CODE ? "current" : ""}><ion-item><p>Code</p></ion-item></a>
42+
</ion-list>
43+
]
3944
}
4045
}

0 commit comments

Comments
 (0)