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

Commit 7630ce1

Browse files
peterpeterparkerpeterpeterparker
committed
feat: code terminal and theme are styles
Signed-off-by: peterpeterparker <[email protected]>
1 parent bc20f59 commit 7630ce1

File tree

6 files changed

+144
-107
lines changed

6 files changed

+144
-107
lines changed

‎studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, h, State, Prop} from '@stencil/core';
1+
import {Component, h, Prop} from '@stencil/core';
22

33
@Component({
44
tag: 'app-expansion-panel',
@@ -10,11 +10,17 @@ export class AppExpansionPanel {
1010
@Prop()
1111
expander: boolean = true;
1212

13-
@State()
14-
private expanded: 'open' | 'close' = 'open';
13+
@Prop({mutable: true})
14+
expanded: 'open' | 'close' = 'open';
1515

1616
// Source animation: https://css-tricks.com/using-css-transitions-auto-dimensions/
1717

18+
componentDidLoad() {
19+
if (this.expanded === 'close') {
20+
this.container.style.height = 0 + 'px';
21+
}
22+
}
23+
1824
private toggle() {
1925
if (this.expanded === 'close') {
2026
this.expand();

‎studio/src/app/components/editor/styles/element/app-color-code/app-color-code.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,13 @@ app-color-code {
88
ion-item.action-button {
99
padding-bottom: 8px;
1010
}
11+
12+
ion-list {
13+
&.terminal,
14+
&.theme {
15+
ion-item {
16+
margin-bottom: 4px;
17+
}
18+
}
19+
}
1120
}

‎studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx‎

Lines changed: 120 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core';
2+
23
import {alertController, RangeChangeEventDetail} from '@ionic/core';
4+
5+
import {DeckdeckgoHighlightCodeCarbonTheme, DeckdeckgoHighlightCodeTerminal} from '@deckdeckgo/highlight-code';
6+
37
import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils';
48

59
enum CodeColorType {
@@ -45,11 +49,18 @@ export class AppColorCode {
4549
@State()
4650
private highlightColorOpacity: number = 100;
4751

48-
@Event() colorChange: EventEmitter<void>;
52+
@State()
53+
private terminal: DeckdeckgoHighlightCodeTerminal = DeckdeckgoHighlightCodeTerminal.CARBON;
54+
55+
@State()
56+
private theme: DeckdeckgoHighlightCodeCarbonTheme = DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
57+
58+
@Event() codeDidChange: EventEmitter<void>;
4959

5060
async componentWillLoad() {
51-
await this.initColor();
52-
await this.initCurrentHiglight();
61+
const promises: Promise<void>[] = [this.initColor(), this.initCurrentHiglight(), this.initTerminal()];
62+
63+
await Promise.all(promises);
5364
}
5465

5566
// prettier-ignore
@@ -68,6 +79,18 @@ export class AppColorCode {
6879
});
6980
}
7081

82+
private async initTerminal() {
83+
this.terminal =
84+
this.selectedElement && this.selectedElement.hasAttribute('terminal')
85+
? (this.selectedElement.getAttribute('terminal') as DeckdeckgoHighlightCodeTerminal)
86+
: DeckdeckgoHighlightCodeTerminal.CARBON;
87+
88+
this.theme =
89+
this.selectedElement && this.selectedElement.hasAttribute('theme')
90+
? (this.selectedElement.getAttribute('theme') as DeckdeckgoHighlightCodeCarbonTheme)
91+
: DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
92+
}
93+
7194
private selectColor($event: CustomEvent, colorFunction: Function): Promise<void> {
7295
return new Promise<void>(async (resolve) => {
7396
if (!this.selectedElement || !this.selectedElement.parentElement) {
@@ -165,13 +188,13 @@ export class AppColorCode {
165188
}
166189

167190
// prettier-ignore
168-
private initColor(): Promise<string> {
169-
return new Promise<string>(async (resolve) => {
191+
private initColor(): Promise<void> {
192+
return new Promise<void>(async (resolve) => {
170193
if (!this.selectedElement || !this.selectedElement.style) {
171194
this.codeColor = undefined;
172195
this.codeColorOpacity = 100;
173196

174-
resolve(null);
197+
resolve();
175198
return;
176199
}
177200

@@ -248,7 +271,7 @@ export class AppColorCode {
248271
}
249272

250273
private emitColorChange() {
251-
this.colorChange.emit();
274+
this.codeDidChange.emit();
252275
}
253276

254277
private updateOpacity($event: CustomEvent<RangeChangeEventDetail>, opacityFunction: Function): Promise<void> {
@@ -297,13 +320,39 @@ export class AppColorCode {
297320
});
298321
}
299322

323+
private toggle($event: CustomEvent, attribute: 'terminal' | 'theme'): Promise<void> {
324+
return new Promise<void>(async (resolve) => {
325+
if (!$event || !$event.detail) {
326+
resolve();
327+
return;
328+
}
329+
330+
if (!this.selectedElement) {
331+
resolve();
332+
return;
333+
}
334+
335+
if (attribute === 'terminal') {
336+
this.terminal = $event.detail.value;
337+
} else if (attribute === 'theme') {
338+
this.theme = $event.detail.value;
339+
}
340+
341+
this.selectedElement.setAttribute(attribute, $event.detail.value);
342+
343+
this.codeDidChange.emit();
344+
345+
resolve();
346+
});
347+
}
348+
300349
render() {
301-
return [this.renderCategoryColor(), this.renderHighlightLinesColor()];
350+
return [this.renderTerminal(), this.renderTheme(), this.renderCategoryColor(), this.renderHighlightLinesColor()];
302351
}
303352

304353
private renderCategoryColor() {
305354
return (
306-
<app-expansion-panel>
355+
<app-expansion-panel expanded={'close'}>
307356
<ion-label slot="title">Colors</ion-label>
308357
<ion-list>
309358
<ion-item class="select">
@@ -365,9 +414,70 @@ export class AppColorCode {
365414
);
366415
}
367416

368-
private renderHighlightLinesColor() {
417+
private renderTerminal() {
418+
return (
419+
<app-expansion-panel>
420+
<ion-label slot="title">Terminal</ion-label>
421+
422+
<ion-list class="terminal">
423+
<ion-item class="select">
424+
<ion-label>Terminal</ion-label>
425+
426+
<ion-select
427+
value={this.terminal}
428+
placeholder="Select a terminal"
429+
onIonChange={($event: CustomEvent) => this.toggle($event, 'terminal')}
430+
interface="popover"
431+
mode="md"
432+
class="ion-padding-start ion-padding-end ion-text-capitalize">
433+
{Object.keys(DeckdeckgoHighlightCodeTerminal).map((key: string) => {
434+
return (
435+
<ion-select-option value={DeckdeckgoHighlightCodeTerminal[key]}>
436+
{DeckdeckgoHighlightCodeTerminal[key].replace(/^\w/, (c) => c.toUpperCase())}
437+
</ion-select-option>
438+
);
439+
})}
440+
</ion-select>
441+
</ion-item>
442+
</ion-list>
443+
</app-expansion-panel>
444+
);
445+
}
446+
447+
private renderTheme() {
369448
return (
370449
<app-expansion-panel>
450+
<ion-label slot="title">Theme</ion-label>
451+
452+
<ion-list class="theme">
453+
<ion-item class="select">
454+
<ion-label>Theme</ion-label>
455+
456+
<ion-select
457+
value={this.theme}
458+
placeholder="Select a theme"
459+
disabled={this.terminal !== DeckdeckgoHighlightCodeTerminal.CARBON}
460+
onIonChange={($event: CustomEvent) => this.toggle($event, 'theme')}
461+
interface="popover"
462+
mode="md"
463+
class="ion-padding-start ion-padding-end ion-text-capitalize">
464+
{Object.keys(DeckdeckgoHighlightCodeCarbonTheme).map((key: string) => {
465+
return (
466+
<ion-select-option value={DeckdeckgoHighlightCodeCarbonTheme[key]}>
467+
{DeckdeckgoHighlightCodeCarbonTheme[key].replace(/^\w/, (c) => c.toUpperCase())}
468+
</ion-select-option>
469+
);
470+
})}
471+
</ion-select>
472+
</ion-item>
473+
</ion-list>
474+
</app-expansion-panel>
475+
);
476+
}
477+
478+
private renderHighlightLinesColor() {
479+
return (
480+
<app-expansion-panel expanded={'close'}>
371481
<ion-label slot="title">Highlight lines</ion-label>
372482
<button slot="info" class="info" onClick={($event: UIEvent) => this.presentHighlightInfo($event)}>
373483
<ion-icon name="help"></ion-icon>

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

Lines changed: 0 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import {Component, Element, EventEmitter, Prop, State, h} from '@stencil/core';
22

33
import {modalController, OverlayEventDetail} from '@ionic/core';
44

5-
import {DeckdeckgoHighlightCodeTerminal, DeckdeckgoHighlightCodeCarbonTheme} from '@deckdeckgo/highlight-code';
6-
75
import {PrismLanguage, PrismService} from '../../../services/editor/prism/prism.service';
86

97
enum CodeFontSize {
@@ -36,12 +34,6 @@ export class AppCode {
3634
@State()
3735
private lineNumbers: boolean = false;
3836

39-
@State()
40-
private terminal: DeckdeckgoHighlightCodeTerminal = DeckdeckgoHighlightCodeTerminal.CARBON;
41-
42-
@State()
43-
private theme: DeckdeckgoHighlightCodeCarbonTheme = DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
44-
4537
private prismService: PrismService;
4638

4739
constructor() {
@@ -62,15 +54,6 @@ export class AppCode {
6254

6355
this.currentFontSize = await this.initFontSize();
6456
this.lineNumbers = this.selectedElement && this.selectedElement.hasAttribute('line-numbers');
65-
this.terminal =
66-
this.selectedElement && this.selectedElement.hasAttribute('terminal')
67-
? (this.selectedElement.getAttribute('terminal') as DeckdeckgoHighlightCodeTerminal)
68-
: DeckdeckgoHighlightCodeTerminal.CARBON;
69-
70-
this.theme =
71-
this.selectedElement && this.selectedElement.hasAttribute('theme')
72-
? (this.selectedElement.getAttribute('theme') as DeckdeckgoHighlightCodeCarbonTheme)
73-
: DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
7457

7558
resolve();
7659
});
@@ -141,32 +124,6 @@ export class AppCode {
141124
});
142125
}
143126

144-
private toggle($event: CustomEvent, attribute: 'terminal' | 'theme'): Promise<void> {
145-
return new Promise<void>(async (resolve) => {
146-
if (!$event || !$event.detail) {
147-
resolve();
148-
return;
149-
}
150-
151-
if (!this.selectedElement) {
152-
resolve();
153-
return;
154-
}
155-
156-
if (attribute === 'terminal') {
157-
this.terminal = $event.detail.value;
158-
} else if (attribute === 'theme') {
159-
this.theme = $event.detail.value;
160-
}
161-
162-
this.selectedElement.setAttribute(attribute, $event.detail.value);
163-
164-
this.emitCodeDidChange();
165-
166-
resolve();
167-
});
168-
}
169-
170127
private toggleLineNumbers($event: CustomEvent): Promise<void> {
171128
return new Promise<void>(async (resolve) => {
172129
if (!this.selectedElement) {
@@ -251,55 +208,6 @@ export class AppCode {
251208
</ion-select>
252209
</ion-item>
253210

254-
<ion-item-divider class="ion-padding-top">
255-
<ion-label>Terminal</ion-label>
256-
</ion-item-divider>
257-
258-
<ion-item class="select">
259-
<ion-label>Terminal</ion-label>
260-
261-
<ion-select
262-
value={this.terminal}
263-
placeholder="Select a terminal"
264-
onIonChange={($event: CustomEvent) => this.toggle($event, 'terminal')}
265-
interface="popover"
266-
mode="md"
267-
class="ion-padding-start ion-padding-end ion-text-capitalize">
268-
{Object.keys(DeckdeckgoHighlightCodeTerminal).map((key: string) => {
269-
return (
270-
<ion-select-option value={DeckdeckgoHighlightCodeTerminal[key]}>
271-
{DeckdeckgoHighlightCodeTerminal[key].replace(/^\w/, (c) => c.toUpperCase())}
272-
</ion-select-option>
273-
);
274-
})}
275-
</ion-select>
276-
</ion-item>
277-
278-
<ion-item-divider class="ion-padding-top">
279-
<ion-label>Theme</ion-label>
280-
</ion-item-divider>
281-
282-
<ion-item class="select">
283-
<ion-label>Theme</ion-label>
284-
285-
<ion-select
286-
value={this.theme}
287-
placeholder="Select a theme"
288-
disabled={this.terminal !== DeckdeckgoHighlightCodeTerminal.CARBON}
289-
onIonChange={($event: CustomEvent) => this.toggle($event, 'theme')}
290-
interface="popover"
291-
mode="md"
292-
class="ion-padding-start ion-padding-end ion-text-capitalize">
293-
{Object.keys(DeckdeckgoHighlightCodeCarbonTheme).map((key: string) => {
294-
return (
295-
<ion-select-option value={DeckdeckgoHighlightCodeCarbonTheme[key]}>
296-
{DeckdeckgoHighlightCodeCarbonTheme[key].replace(/^\w/, (c) => c.toUpperCase())}
297-
</ion-select-option>
298-
);
299-
})}
300-
</ion-select>
301-
</ion-item>
302-
303211
<ion-item>
304212
<ion-label>Display line numbers</ion-label>
305213
<ion-checkbox slot="end" checked={this.lineNumbers} onIonChange={($event: CustomEvent) => this.toggleLineNumbers($event)}></ion-checkbox>

‎studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,9 @@ export class AppElementStyle {
192192
<app-color-chart selectedElement={this.selectedElement} onColorChange={() => this.emitStyleChange()} moreColors={this.moreColors}></app-color-chart>
193193
);
194194
} else if (this.applyToTargetElement === TargetElement.CODE) {
195-
return <app-color-code selectedElement={this.selectedElement} onColorChange={() => this.emitStyleChange()} moreColors={this.moreColors}></app-color-code>;
195+
return (
196+
<app-color-code selectedElement={this.selectedElement} onCodeDidChange={() => this.emitStyleChange()} moreColors={this.moreColors}></app-color-code>
197+
);
196198
} else if (this.applyToTargetElement === TargetElement.SIDES) {
197199
return (
198200
<app-color-sides

‎studio/src/components.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,7 @@ export namespace Components {
198198
}
199199
interface AppEmbed {}
200200
interface AppExpansionPanel {
201+
'expanded': 'open' | 'close';
201202
'expander': boolean;
202203
}
203204
interface AppFaq {}
@@ -1171,7 +1172,7 @@ declare namespace LocalJSX {
11711172
}
11721173
interface AppColorCode {
11731174
'moreColors'?: boolean;
1174-
'onColorChange'?: (event: CustomEvent<void>) => void;
1175+
'onCodeDidChange'?: (event: CustomEvent<void>) => void;
11751176
'selectedElement'?: HTMLElement;
11761177
}
11771178
interface AppColorQrcode {
@@ -1267,6 +1268,7 @@ declare namespace LocalJSX {
12671268
}
12681269
interface AppEmbed {}
12691270
interface AppExpansionPanel {
1271+
'expanded'?: 'open' | 'close';
12701272
'expander'?: boolean;
12711273
}
12721274
interface AppFaq {}

0 commit comments

Comments
 (0)