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

Commit 22a913a

Browse files
peterpeterparkerpeterpeterparker
authored
Merge pull request #744 from deckgo/code-style-font-text
feat: improve code and fonts UX
2 parents afd7eab + e8d3564 commit 22a913a

File tree

22 files changed

+362
-375
lines changed

22 files changed

+362
-375
lines changed

‎studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export class AppSelectTargetElement {
118118
if (this.slide) {
119119
return (
120120
<ion-segment-button value={TargetElement.SLIDE} mode="md">
121-
<ion-label>Text</ion-label>
121+
<ion-label>Font</ion-label>
122122
</ion-segment-button>
123123
);
124124
} else {
@@ -130,7 +130,7 @@ export class AppSelectTargetElement {
130130
if (this.textTarget) {
131131
return (
132132
<ion-segment-button value={TargetElement.TEXT} mode="md">
133-
<ion-label>Text</ion-label>
133+
<ion-label>Font</ion-label>
134134
</ion-segment-button>
135135
);
136136
} else {

‎studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx‎ renamed to ‎studio/src/app/components/editor/styles/app-color-text-background/app-color-text-background.tsx‎

File renamed without changes.

‎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-align/app-align.scss‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
11
app-align {
2-
ion-item.align {
3-
--background-activated: transparent;
4-
--background-focused: transparent;
5-
--background-hover: transparent;
6-
7-
--color: rgba(0, 0, 0, 0.6);
8-
font-size: var(--font-size-normal);
9-
10-
cursor: pointer;
11-
12-
&:hover,
13-
&.active {
14-
--color: black;
15-
16-
ion-icon {
17-
color: black;
18-
}
2+
ion-list {
3+
ion-item {
4+
margin-bottom: 4px;
195
}
206
}
217
}

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

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ export class AppAlign {
1919
this.align = await AlignUtils.getAlignment(this.selectedElement);
2020
}
2121

22-
private async updateAlign(align: TextAlign): Promise<void> {
23-
if (!this.selectedElement) {
22+
private async updateAlign($event: CustomEvent): Promise<void> {
23+
if (!this.selectedElement || !$event || !$event.detail) {
2424
return;
2525
}
2626

27-
this.selectedElement.style.textAlign = align;
28-
this.align = align;
27+
this.selectedElement.style.textAlign = $event.detail.value;
28+
this.align = $event.detail.value;
2929

3030
this.alignChange.emit();
3131
}
@@ -39,20 +39,23 @@ export class AppAlign {
3939
<app-expansion-panel>
4040
<ion-label slot="title">Alignment</ion-label>
4141
<ion-list>
42-
{this.renderAlign(TextAlign.LEFT, 'Align left')}
43-
{this.renderAlign(TextAlign.CENTER, 'Align center')}
44-
{this.renderAlign(TextAlign.RIGHT, 'Align right')}
42+
<ion-item class="select">
43+
<ion-label>Alignment</ion-label>
44+
45+
<ion-select
46+
value={this.align}
47+
placeholder="Select an alignment"
48+
onIonChange={($event: CustomEvent) => this.updateAlign($event)}
49+
interface="popover"
50+
mode="md"
51+
class="ion-padding-start ion-padding-end">
52+
<ion-select-option value={TextAlign.LEFT}>Left</ion-select-option>
53+
<ion-select-option value={TextAlign.CENTER}>Center</ion-select-option>
54+
<ion-select-option value={TextAlign.RIGHT}>Right</ion-select-option>
55+
</ion-select>
56+
</ion-item>
4557
</ion-list>
4658
</app-expansion-panel>
4759
);
4860
}
49-
50-
private renderAlign(align: TextAlign, text: string) {
51-
return (
52-
<ion-item onClick={() => this.updateAlign(align)} class={`align ${this.align == align ? 'active' : undefined}`}>
53-
<ion-icon slot="start" src={`/assets/icons/align-${align}.svg`} role="presentation"></ion-icon>
54-
<ion-label>{text}</ion-label>
55-
</ion-item>
56-
);
57-
}
5861
}

‎studio/src/app/components/editor/color/app-color-code/app-color-code.scss‎ renamed to ‎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/color/app-color-code/app-color-code.tsx‎ renamed to ‎studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx‎

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

59
enum CodeColorType {
610
COMMENTS,
@@ -19,8 +23,6 @@ enum CodeColorType {
1923
styleUrl: 'app-color-code.scss',
2024
})
2125
export class AppColorCode {
22-
@Element() el: HTMLElement;
23-
2426
@Prop()
2527
selectedElement: HTMLElement;
2628

@@ -45,11 +47,18 @@ export class AppColorCode {
4547
@State()
4648
private highlightColorOpacity: number = 100;
4749

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

5058
async componentWillLoad() {
51-
await this.initColor();
52-
await this.initCurrentHiglight();
59+
const promises: Promise<void>[] = [this.initColor(), this.initCurrentHiglight(), this.initTerminal()];
60+
61+
await Promise.all(promises);
5362
}
5463

5564
// prettier-ignore
@@ -68,6 +77,18 @@ export class AppColorCode {
6877
});
6978
}
7079

80+
private async initTerminal() {
81+
this.terminal =
82+
this.selectedElement && this.selectedElement.hasAttribute('terminal')
83+
? (this.selectedElement.getAttribute('terminal') as DeckdeckgoHighlightCodeTerminal)
84+
: DeckdeckgoHighlightCodeTerminal.CARBON;
85+
86+
this.theme =
87+
this.selectedElement && this.selectedElement.hasAttribute('theme')
88+
? (this.selectedElement.getAttribute('theme') as DeckdeckgoHighlightCodeCarbonTheme)
89+
: DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
90+
}
91+
7192
private selectColor($event: CustomEvent, colorFunction: Function): Promise<void> {
7293
return new Promise<void>(async (resolve) => {
7394
if (!this.selectedElement || !this.selectedElement.parentElement) {
@@ -165,13 +186,13 @@ export class AppColorCode {
165186
}
166187

167188
// prettier-ignore
168-
private initColor(): Promise<string> {
169-
return new Promise<string>(async (resolve) => {
189+
private initColor(): Promise<void> {
190+
return new Promise<void>(async (resolve) => {
170191
if (!this.selectedElement || !this.selectedElement.style) {
171192
this.codeColor = undefined;
172193
this.codeColorOpacity = 100;
173194

174-
resolve(null);
195+
resolve();
175196
return;
176197
}
177198

@@ -248,7 +269,7 @@ export class AppColorCode {
248269
}
249270

250271
private emitColorChange() {
251-
this.colorChange.emit();
272+
this.codeDidChange.emit();
252273
}
253274

254275
private updateOpacity($event: CustomEvent<RangeChangeEventDetail>, opacityFunction: Function): Promise<void> {
@@ -297,14 +318,40 @@ export class AppColorCode {
297318
});
298319
}
299320

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

304351
private renderCategoryColor() {
305352
return (
306-
<app-expansion-panel>
307-
<ion-label slot="title">Colors</ion-label>
353+
<app-expansion-panel expanded={'close'}>
354+
<ion-label slot="title">More colors</ion-label>
308355
<ion-list>
309356
<ion-item class="select">
310357
<ion-label>Apply a color to</ion-label>
@@ -365,9 +412,70 @@ export class AppColorCode {
365412
);
366413
}
367414

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

‎studio/src/app/components/editor/styles/element/app-font-size/app-font-size.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
app-font-size {
2+
ion-list {
3+
ion-item {
4+
margin-bottom: 4px;
5+
}
6+
}
7+
}

0 commit comments

Comments
 (0)