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

Commit d291ebc

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

File tree

4 files changed

+45
-124
lines changed

4 files changed

+45
-124
lines changed

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

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

3-
enum CodeFontSize {
3+
enum FontSize {
44
VERY_SMALL,
55
SMALL,
66
NORMAL,
@@ -9,23 +9,26 @@ enum CodeFontSize {
99
}
1010

1111
@Component({
12-
tag: 'app-font-code',
12+
tag: 'app-font-size',
1313
})
14-
export class AppColorCode {
14+
export class AppFontSize {
1515
@Prop()
1616
selectedElement: HTMLElement;
1717

18+
@Prop()
19+
selector: '--deckgo-highlight-code-font-size' | '--deckgo-math-font-size' = '--deckgo-highlight-code-font-size';
20+
1821
@State()
19-
private currentFontSize: CodeFontSize = undefined;
22+
private currentFontSize: FontSize = undefined;
2023

2124
@Event() codeDidChange: EventEmitter<void>;
2225

2326
async componentWillLoad() {
2427
this.currentFontSize = await this.initFontSize();
2528
}
2629

27-
private initFontSize(): Promise<CodeFontSize> {
28-
return new Promise<CodeFontSize>((resolve) => {
30+
private initFontSize(): Promise<FontSize> {
31+
return new Promise<FontSize>((resolve) => {
2932
if (!this.selectedElement || !this.selectedElement.style) {
3033
resolve(null);
3134
return;
@@ -34,15 +37,15 @@ export class AppColorCode {
3437
const property: string = this.selectedElement.style.getPropertyValue('--deckgo-highlight-code-font-size');
3538

3639
if (property === '50%') {
37-
resolve(CodeFontSize.VERY_SMALL);
40+
resolve(FontSize.VERY_SMALL);
3841
} else if (property === '75%') {
39-
resolve(CodeFontSize.SMALL);
42+
resolve(FontSize.SMALL);
4043
} else if (property === '150%') {
41-
resolve(CodeFontSize.BIG);
44+
resolve(FontSize.BIG);
4245
} else if (property === '200%') {
43-
resolve(CodeFontSize.VERY_BIG);
46+
resolve(FontSize.VERY_BIG);
4447
} else {
45-
resolve(CodeFontSize.NORMAL);
48+
resolve(FontSize.NORMAL);
4649
}
4750
});
4851
}
@@ -63,13 +66,13 @@ export class AppColorCode {
6366

6467
this.selectedElement.style.removeProperty('--deckgo-highlight-code-font-size');
6568

66-
if (this.currentFontSize === CodeFontSize.VERY_SMALL) {
69+
if (this.currentFontSize === FontSize.VERY_SMALL) {
6770
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '50%');
68-
} else if (this.currentFontSize === CodeFontSize.SMALL) {
71+
} else if (this.currentFontSize === FontSize.SMALL) {
6972
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '75%');
70-
} else if (this.currentFontSize === CodeFontSize.BIG) {
73+
} else if (this.currentFontSize === FontSize.BIG) {
7174
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '150%');
72-
} else if (this.currentFontSize === CodeFontSize.VERY_BIG) {
75+
} else if (this.currentFontSize === FontSize.VERY_BIG) {
7376
this.selectedElement.style.setProperty('--deckgo-highlight-code-font-size', '200%');
7477
}
7578

@@ -95,11 +98,11 @@ export class AppColorCode {
9598
interface="popover"
9699
mode="md"
97100
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>
101+
<ion-select-option value={FontSize.VERY_SMALL}>Very small</ion-select-option>
102+
<ion-select-option value={FontSize.SMALL}>Small</ion-select-option>
103+
<ion-select-option value={FontSize.NORMAL}>Normal</ion-select-option>
104+
<ion-select-option value={FontSize.BIG}>Big</ion-select-option>
105+
<ion-select-option value={FontSize.VERY_BIG}>Very big</ion-select-option>
103106
</ion-select>
104107
</ion-item>
105108
</ion-list>

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

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

3-
enum MathFontSize {
4-
VERY_SMALL,
5-
SMALL,
6-
NORMAL,
7-
BIG,
8-
VERY_BIG,
9-
}
10-
113
@Component({
124
tag: 'app-math',
135
styleUrl: 'app-math.scss',
@@ -21,9 +13,6 @@ export class AppMath {
2113
@Prop()
2214
mathDidChange: EventEmitter<HTMLElement>;
2315

24-
@State()
25-
private currentFontSize: MathFontSize = undefined;
26-
2716
@State()
2817
private macros: string | undefined;
2918

@@ -38,69 +27,13 @@ export class AppMath {
3827
}
3928

4029
private async initCurrent(): Promise<void> {
41-
this.currentFontSize = await this.initFontSize();
4230
this.macros = this.selectedElement ? this.selectedElement.getAttribute('macros') : undefined;
4331
}
4432

4533
private emitMathDidChange() {
4634
this.mathDidChange.emit(this.selectedElement);
4735
}
4836

49-
private initFontSize(): Promise<MathFontSize> {
50-
return new Promise<MathFontSize>((resolve) => {
51-
if (!this.selectedElement || !this.selectedElement.style) {
52-
resolve(null);
53-
return;
54-
}
55-
56-
const property: string = this.selectedElement.style.getPropertyValue('--deckgo-math-font-size');
57-
58-
if (property === '50%') {
59-
resolve(MathFontSize.VERY_SMALL);
60-
} else if (property === '75%') {
61-
resolve(MathFontSize.SMALL);
62-
} else if (property === '150%') {
63-
resolve(MathFontSize.BIG);
64-
} else if (property === '200%') {
65-
resolve(MathFontSize.VERY_BIG);
66-
} else {
67-
resolve(MathFontSize.NORMAL);
68-
}
69-
});
70-
}
71-
72-
private toggleFontSize($event: CustomEvent): Promise<void> {
73-
return new Promise<void>(async (resolve) => {
74-
if (!$event || !$event.detail) {
75-
resolve();
76-
return;
77-
}
78-
79-
this.currentFontSize = $event.detail.value;
80-
81-
if (!this.selectedElement) {
82-
resolve();
83-
return;
84-
}
85-
86-
this.selectedElement.style.removeProperty('--deckgo-math-font-size');
87-
88-
if (this.currentFontSize === MathFontSize.VERY_SMALL) {
89-
this.selectedElement.style.setProperty('--deckgo-math-font-size', '50%');
90-
} else if (this.currentFontSize === MathFontSize.SMALL) {
91-
this.selectedElement.style.setProperty('--deckgo-math-font-size', '75%');
92-
} else if (this.currentFontSize === MathFontSize.BIG) {
93-
this.selectedElement.style.setProperty('--deckgo-math-font-size', '150%');
94-
} else if (this.currentFontSize === MathFontSize.VERY_BIG) {
95-
this.selectedElement.style.setProperty('--deckgo-math-font-size', '200%');
96-
}
97-
98-
this.emitMathDidChange();
99-
100-
resolve();
101-
});
102-
}
103-
10437
private handleMacrosInput($event: CustomEvent<KeyboardEvent>) {
10538
this.macros = ($event.target as InputTargetEvent).value;
10639
}
@@ -128,28 +61,6 @@ export class AppMath {
12861
</ion-router-link>
12962
</ion-toolbar>,
13063
<ion-list>
131-
<ion-item-divider class="ion-padding-top">
132-
<ion-label>Font size</ion-label>
133-
</ion-item-divider>
134-
135-
<ion-item class="select">
136-
<ion-label>Size</ion-label>
137-
138-
<ion-select
139-
value={this.currentFontSize}
140-
placeholder="Select a font size"
141-
onIonChange={($event: CustomEvent) => this.toggleFontSize($event)}
142-
interface="popover"
143-
mode="md"
144-
class="ion-padding-start ion-padding-end">
145-
<ion-select-option value={MathFontSize.VERY_SMALL}>Very small</ion-select-option>
146-
<ion-select-option value={MathFontSize.SMALL}>Small</ion-select-option>
147-
<ion-select-option value={MathFontSize.NORMAL}>Normal</ion-select-option>
148-
<ion-select-option value={MathFontSize.BIG}>Big</ion-select-option>
149-
<ion-select-option value={MathFontSize.VERY_BIG}>Very big</ion-select-option>
150-
</ion-select>
151-
</ion-item>
152-
15364
<ion-item-divider>
15465
<ion-label>Macros</ion-label>
15566
</ion-item-divider>

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -223,16 +223,16 @@ export class AppElementStyle {
223223
);
224224
} else {
225225
return [
226-
this.renderFontCode(),
226+
this.renderFontSize(),
227+
<app-align selectedElement={this.selectedElement} onAlignChange={() => this.emitStyleChange()}></app-align>,
228+
this.renderList(),
227229
<app-color-text-background
228230
expander={!this.slide}
229231
selectedElement={this.selectedElement}
230232
moreColors={this.moreColors}
231233
slide={this.slide}
232234
shape={this.shape}
233235
onColorChange={() => this.emitStyleChange()}></app-color-text-background>,
234-
<app-align selectedElement={this.selectedElement} onAlignChange={() => this.emitStyleChange()}></app-align>,
235-
this.renderList(),
236236
];
237237
}
238238
}
@@ -255,11 +255,16 @@ export class AppElementStyle {
255255
return <app-list selectedElement={this.selectedElement} onToggleList={() => this.closePopover()}></app-list>;
256256
}
257257

258-
private renderFontCode() {
259-
if (!this.code) {
258+
private renderFontSize() {
259+
if (!this.code && !this.math) {
260260
return undefined;
261261
}
262262

263-
return <app-font-code selectedElement={this.selectedElement} onCodeDidChange={() => this.emitStyleChange()}></app-font-code>;
263+
return (
264+
<app-font-size
265+
selectedElement={this.selectedElement}
266+
selector={this.math ? '--deckgo-math-font-size' : '--deckgo-highlight-code-font-size'}
267+
onCodeDidChange={() => this.emitStyleChange()}></app-font-size>
268+
);
264269
}
265270
}

‎studio/src/components.d.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -212,8 +212,9 @@ export namespace Components {
212212
'editable': boolean;
213213
'tags': string[];
214214
}
215-
interface AppFontCode {
215+
interface AppFontSize {
216216
'selectedElement': HTMLElement;
217+
'selector': '--deckgo-highlight-code-font-size' | '--deckgo-math-font-size';
217218
}
218219
interface AppFooter {
219220
'display': 'menu' | 'landing';
@@ -623,10 +624,10 @@ declare global {
623624
new (): HTMLAppFeedCardTagsElement;
624625
};
625626

626-
interface HTMLAppFontCodeElement extends Components.AppFontCode, HTMLStencilElement {}
627-
var HTMLAppFontCodeElement: {
628-
prototype: HTMLAppFontCodeElement;
629-
new (): HTMLAppFontCodeElement;
627+
interface HTMLAppFontSizeElement extends Components.AppFontSize, HTMLStencilElement {}
628+
var HTMLAppFontSizeElement: {
629+
prototype: HTMLAppFontSizeElement;
630+
new (): HTMLAppFontSizeElement;
630631
};
631632

632633
interface HTMLAppFooterElement extends Components.AppFooter, HTMLStencilElement {}
@@ -1032,7 +1033,7 @@ declare global {
10321033
'app-feed': HTMLAppFeedElement;
10331034
'app-feed-card': HTMLAppFeedCardElement;
10341035
'app-feed-card-tags': HTMLAppFeedCardTagsElement;
1035-
'app-font-code': HTMLAppFontCodeElement;
1036+
'app-font-size': HTMLAppFontSizeElement;
10361037
'app-footer': HTMLAppFooterElement;
10371038
'app-fullscreen-info': HTMLAppFullscreenInfoElement;
10381039
'app-get-help': HTMLAppGetHelpElement;
@@ -1293,9 +1294,10 @@ declare namespace LocalJSX {
12931294
'onRemoveTag'?: (event: CustomEvent<string>) => void;
12941295
'tags'?: string[];
12951296
}
1296-
interface AppFontCode {
1297+
interface AppFontSize {
12971298
'onCodeDidChange'?: (event: CustomEvent<void>) => void;
12981299
'selectedElement'?: HTMLElement;
1300+
'selector'?: '--deckgo-highlight-code-font-size' | '--deckgo-math-font-size';
12991301
}
13001302
interface AppFooter {
13011303
'display'?: 'menu' | 'landing';
@@ -1507,7 +1509,7 @@ declare namespace LocalJSX {
15071509
'app-feed': AppFeed;
15081510
'app-feed-card': AppFeedCard;
15091511
'app-feed-card-tags': AppFeedCardTags;
1510-
'app-font-code': AppFontCode;
1512+
'app-font-size': AppFontSize;
15111513
'app-footer': AppFooter;
15121514
'app-fullscreen-info': AppFullscreenInfo;
15131515
'app-get-help': AppGetHelp;
@@ -1620,7 +1622,7 @@ declare module "@stencil/core" {
16201622
'app-feed': LocalJSX.AppFeed & JSXBase.HTMLAttributes<HTMLAppFeedElement>;
16211623
'app-feed-card': LocalJSX.AppFeedCard & JSXBase.HTMLAttributes<HTMLAppFeedCardElement>;
16221624
'app-feed-card-tags': LocalJSX.AppFeedCardTags & JSXBase.HTMLAttributes<HTMLAppFeedCardTagsElement>;
1623-
'app-font-code': LocalJSX.AppFontCode & JSXBase.HTMLAttributes<HTMLAppFontCodeElement>;
1625+
'app-font-size': LocalJSX.AppFontSize & JSXBase.HTMLAttributes<HTMLAppFontSizeElement>;
16241626
'app-footer': LocalJSX.AppFooter & JSXBase.HTMLAttributes<HTMLAppFooterElement>;
16251627
'app-fullscreen-info': LocalJSX.AppFullscreenInfo & JSXBase.HTMLAttributes<HTMLAppFullscreenInfoElement>;
16261628
'app-get-help': LocalJSX.AppGetHelp & JSXBase.HTMLAttributes<HTMLAppGetHelpElement>;

0 commit comments

Comments
 (0)