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

Commit e7013b0

Browse files
peterpeterparkerpeterpeterparker
committed
feat: code font size is style
Signed-off-by: peterpeterparker <[email protected]>
1 parent 7630ce1 commit e7013b0

File tree

5 files changed

+137
-94
lines changed

5 files changed

+137
-94
lines changed

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

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

33
import {alertController, RangeChangeEventDetail} from '@ionic/core';
44

@@ -23,8 +23,6 @@ enum CodeColorType {
2323
styleUrl: 'app-color-code.scss',
2424
})
2525
export class AppColorCode {
26-
@Element() el: HTMLElement;
27-
2826
@Prop()
2927
selectedElement: HTMLElement;
3028

@@ -353,7 +351,7 @@ export class AppColorCode {
353351
private renderCategoryColor() {
354352
return (
355353
<app-expansion-panel expanded={'close'}>
356-
<ion-label slot="title">Colors</ion-label>
354+
<ion-label slot="title">More colors</ion-label>
357355
<ion-list>
358356
<ion-item class="select">
359357
<ion-label>Apply a color to</ion-label>

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core';
2+
3+
enum CodeFontSize {
4+
VERY_SMALL,
5+
SMALL,
6+
NORMAL,
7+
BIG,
8+
VERY_BIG,
9+
}
10+
11+
@Component({
12+
tag: 'app-font-code',
13+
})
14+
export class AppColorCode {
15+
@Prop()
16+
selectedElement: HTMLElement;
17+
18+
@State()
19+
private currentFontSize: CodeFontSize = undefined;
20+
21+
@Event() codeDidChange: EventEmitter<void>;
22+
23+
async componentWillLoad() {
24+
this.currentFontSize = await this.initFontSize();
25+
}
26+
27+
private initFontSize(): Promise<CodeFontSize> {
28+
return new Promise<CodeFontSize>((resolve) => {
29+
if (!this.selectedElement || !this.selectedElement.style) {
30+
resolve(null);
31+
return;
32+
}
33+
34+
const property: string = this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-font-size');
35+
36+
if (property === '50%') {
37+
resolve(CodeFontSize.VERY_SMALL);
38+
} else if (property === '75%') {
39+
resolve(CodeFontSize.SMALL);
40+
} else if (property === '150%') {
41+
resolve(CodeFontSize.BIG);
42+
} else if (property === '200%') {
43+
resolve(CodeFontSize.VERY_BIG);
44+
} else {
45+
resolve(CodeFontSize.NORMAL);
46+
}
47+
});
48+
}
49+
50+
private toggleFontSize($event: CustomEvent): Promise<void> {
51+
return new Promise<void>(async (resolve) => {
52+
if (!$event || !$event.detail) {
53+
resolve();
54+
return;
55+
}
56+
57+
this.currentFontSize = $event.detail.value;
58+
59+
if (!this.selectedElement) {
60+
resolve();
61+
return;
62+
}
63+
64+
this.selectedElement.style.removeProperty('--deckgo-highlight-code-font-size');
65+
66+
if (this.currentFontSize === CodeFontSize.VERY_SMALL) {
67+
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '50%');
68+
} else if (this.currentFontSize === CodeFontSize.SMALL) {
69+
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '75%');
70+
} else if (this.currentFontSize === CodeFontSize.BIG) {
71+
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '150%');
72+
} else if (this.currentFontSize === CodeFontSize.VERY_BIG) {
73+
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '200%');
74+
}
75+
76+
this.codeDidChange.emit();
77+
78+
resolve();
79+
});
80+
}
81+
82+
render() {
83+
return (
84+
<app-expansion-panel>
85+
<ion-label slot="title">Size</ion-label>
86+
87+
<ion-list>
88+
<ion-item class="select">
89+
<ion-label>Size</ion-label>
90+
91+
<ion-select
92+
value={this.currentFontSize}
93+
placeholder="Select a font size"
94+
onIonChange={($event: CustomEvent) => this.toggleFontSize($event)}
95+
interface="popover"
96+
mode="md"
97+
class="ion-padding-start ion-padding-end">
98+
<ion-select-option value={CodeFontSize.VERY_SMALL}>Very small</ion-select-option>
99+
<ion-select-option value={CodeFontSize.SMALL}>Small</ion-select-option>
100+
<ion-select-option value={CodeFontSize.NORMAL}>Normal</ion-select-option>
101+
<ion-select-option value={CodeFontSize.BIG}>Big</ion-select-option>
102+
<ion-select-option value={CodeFontSize.VERY_BIG}>Very big</ion-select-option>
103+
</ion-select>
104+
</ion-item>
105+
</ion-list>
106+
</app-expansion-panel>
107+
);
108+
}
109+
}

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

Lines changed: 0 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,6 @@ import {modalController, OverlayEventDetail} from '@ionic/core';
44

55
import {PrismLanguage, PrismService} from '../../../services/editor/prism/prism.service';
66

7-
enum CodeFontSize {
8-
VERY_SMALL,
9-
SMALL,
10-
NORMAL,
11-
BIG,
12-
VERY_BIG,
13-
}
14-
157
@Component({
168
tag: 'app-code',
179
styleUrl: 'app-code.scss',
@@ -28,9 +20,6 @@ export class AppCode {
2820
@State()
2921
private currentLanguage: PrismLanguage | undefined;
3022

31-
@State()
32-
private currentFontSize: CodeFontSize = undefined;
33-
3423
@State()
3524
private lineNumbers: boolean = false;
3625

@@ -52,7 +41,6 @@ export class AppCode {
5241
return new Promise<void>(async (resolve) => {
5342
await this.initCurrentLanguage();
5443

55-
this.currentFontSize = await this.initFontSize();
5644
this.lineNumbers = this.selectedElement && this.selectedElement.hasAttribute('line-numbers');
5745

5846
resolve();
@@ -69,61 +57,6 @@ export class AppCode {
6957
this.codeDidChange.emit(this.selectedElement);
7058
}
7159

72-
private initFontSize(): Promise<CodeFontSize> {
73-
return new Promise<CodeFontSize>((resolve) => {
74-
if (!this.selectedElement || !this.selectedElement.style) {
75-
resolve(null);
76-
return;
77-
}
78-
79-
const property: string = this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-font-size');
80-
81-
if (property === '50%') {
82-
resolve(CodeFontSize.VERY_SMALL);
83-
} else if (property === '75%') {
84-
resolve(CodeFontSize.SMALL);
85-
} else if (property === '150%') {
86-
resolve(CodeFontSize.BIG);
87-
} else if (property === '200%') {
88-
resolve(CodeFontSize.VERY_BIG);
89-
} else {
90-
resolve(CodeFontSize.NORMAL);
91-
}
92-
});
93-
}
94-
95-
private toggleFontSize($event: CustomEvent): Promise<void> {
96-
return new Promise<void>(async (resolve) => {
97-
if (!$event || !$event.detail) {
98-
resolve();
99-
return;
100-
}
101-
102-
this.currentFontSize = $event.detail.value;
103-
104-
if (!this.selectedElement) {
105-
resolve();
106-
return;
107-
}
108-
109-
this.selectedElement.style.removeProperty('--deckgo-highlight-code-font-size');
110-
111-
if (this.currentFontSize === CodeFontSize.VERY_SMALL) {
112-
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '50%');
113-
} else if (this.currentFontSize === CodeFontSize.SMALL) {
114-
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '75%');
115-
} else if (this.currentFontSize === CodeFontSize.BIG) {
116-
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '150%');
117-
} else if (this.currentFontSize === CodeFontSize.VERY_BIG) {
118-
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '200%');
119-
}
120-
121-
this.emitCodeDidChange();
122-
123-
resolve();
124-
});
125-
}
126-
12760
private toggleLineNumbers($event: CustomEvent): Promise<void> {
12861
return new Promise<void>(async (resolve) => {
12962
if (!this.selectedElement) {
@@ -186,28 +119,6 @@ export class AppCode {
186119
</div>
187120
</ion-item>
188121

189-
<ion-item-divider class="ion-padding-top">
190-
<ion-label>Font size</ion-label>
191-
</ion-item-divider>
192-
193-
<ion-item class="select">
194-
<ion-label>Size</ion-label>
195-
196-
<ion-select
197-
value={this.currentFontSize}
198-
placeholder="Select a font size"
199-
onIonChange={($event: CustomEvent) => this.toggleFontSize($event)}
200-
interface="popover"
201-
mode="md"
202-
class="ion-padding-start ion-padding-end">
203-
<ion-select-option value={CodeFontSize.VERY_SMALL}>Very small</ion-select-option>
204-
<ion-select-option value={CodeFontSize.SMALL}>Small</ion-select-option>
205-
<ion-select-option value={CodeFontSize.NORMAL}>Normal</ion-select-option>
206-
<ion-select-option value={CodeFontSize.BIG}>Big</ion-select-option>
207-
<ion-select-option value={CodeFontSize.VERY_BIG}>Very big</ion-select-option>
208-
</ion-select>
209-
</ion-item>
210-
211122
<ion-item>
212123
<ion-label>Display line numbers</ion-label>
213124
<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: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,8 +223,9 @@ export class AppElementStyle {
223223
);
224224
} else {
225225
return [
226+
this.renderFontCode(),
226227
<app-color-text-background
227-
expander={!this.slide && !this.code}
228+
expander={!this.slide}
228229
selectedElement={this.selectedElement}
229230
moreColors={this.moreColors}
230231
slide={this.slide}
@@ -253,4 +254,12 @@ export class AppElementStyle {
253254

254255
return <app-list selectedElement={this.selectedElement} onToggleList={() => this.closePopover()}></app-list>;
255256
}
257+
258+
private renderFontCode() {
259+
if (!this.code) {
260+
return undefined;
261+
}
262+
263+
return <app-font-code selectedElement={this.selectedElement} onCodeDidChange={() => this.emitStyleChange()}></app-font-code>;
264+
}
256265
}

‎studio/src/components.d.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,9 @@ export namespace Components {
212212
'editable': boolean;
213213
'tags': string[];
214214
}
215+
interface AppFontCode {
216+
'selectedElement': HTMLElement;
217+
}
215218
interface AppFooter {
216219
'display': 'menu' | 'landing';
217220
}
@@ -620,6 +623,12 @@ declare global {
620623
new (): HTMLAppFeedCardTagsElement;
621624
};
622625

626+
interface HTMLAppFontCodeElement extends Components.AppFontCode, HTMLStencilElement {}
627+
var HTMLAppFontCodeElement: {
628+
prototype: HTMLAppFontCodeElement;
629+
new (): HTMLAppFontCodeElement;
630+
};
631+
623632
interface HTMLAppFooterElement extends Components.AppFooter, HTMLStencilElement {}
624633
var HTMLAppFooterElement: {
625634
prototype: HTMLAppFooterElement;
@@ -1023,6 +1032,7 @@ declare global {
10231032
'app-feed': HTMLAppFeedElement;
10241033
'app-feed-card': HTMLAppFeedCardElement;
10251034
'app-feed-card-tags': HTMLAppFeedCardTagsElement;
1035+
'app-font-code': HTMLAppFontCodeElement;
10261036
'app-footer': HTMLAppFooterElement;
10271037
'app-fullscreen-info': HTMLAppFullscreenInfoElement;
10281038
'app-get-help': HTMLAppGetHelpElement;
@@ -1283,6 +1293,10 @@ declare namespace LocalJSX {
12831293
'onRemoveTag'?: (event: CustomEvent<string>) => void;
12841294
'tags'?: string[];
12851295
}
1296+
interface AppFontCode {
1297+
'onCodeDidChange'?: (event: CustomEvent<void>) => void;
1298+
'selectedElement'?: HTMLElement;
1299+
}
12861300
interface AppFooter {
12871301
'display'?: 'menu' | 'landing';
12881302
}
@@ -1493,6 +1507,7 @@ declare namespace LocalJSX {
14931507
'app-feed': AppFeed;
14941508
'app-feed-card': AppFeedCard;
14951509
'app-feed-card-tags': AppFeedCardTags;
1510+
'app-font-code': AppFontCode;
14961511
'app-footer': AppFooter;
14971512
'app-fullscreen-info': AppFullscreenInfo;
14981513
'app-get-help': AppGetHelp;
@@ -1605,6 +1620,7 @@ declare module "@stencil/core" {
16051620
'app-feed': LocalJSX.AppFeed & JSXBase.HTMLAttributes<HTMLAppFeedElement>;
16061621
'app-feed-card': LocalJSX.AppFeedCard & JSXBase.HTMLAttributes<HTMLAppFeedCardElement>;
16071622
'app-feed-card-tags': LocalJSX.AppFeedCardTags & JSXBase.HTMLAttributes<HTMLAppFeedCardTagsElement>;
1623+
'app-font-code': LocalJSX.AppFontCode & JSXBase.HTMLAttributes<HTMLAppFontCodeElement>;
16081624
'app-footer': LocalJSX.AppFooter & JSXBase.HTMLAttributes<HTMLAppFooterElement>;
16091625
'app-fullscreen-info': LocalJSX.AppFullscreenInfo & JSXBase.HTMLAttributes<HTMLAppFullscreenInfoElement>;
16101626
'app-get-help': LocalJSX.AppGetHelp & JSXBase.HTMLAttributes<HTMLAppGetHelpElement>;

0 commit comments

Comments
 (0)