From 6e32bf2144fdc93288441b90df117e0a1179e7ae Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Tue, 26 May 2020 22:03:44 +0200 Subject: [PATCH 01/19] feat: rework color, background and style ux Signed-off-by: peterpeterparker --- .../app-actions-element.tsx | 1 + .../app-expansion-panel.scss | 29 +++++ .../app-expansion-panel.tsx | 79 ++++++++++++ .../components/editor/app-image/app-image.tsx | 35 +++--- .../app-select-target-element.tsx | 20 ++-- .../app-color-text-background.tsx | 112 +++++++----------- .../editor/app-deck-style/app-deck-style.tsx | 22 ++-- .../app-image-element/app-image-element.tsx | 27 ++++- .../src/app/utils/editor/target-element.tsx | 4 +- studio/src/assets/assets.json | 3 +- .../assets/icons/ionicons/chevron-down.svg | 1 + studio/src/components.d.ts | 19 ++- .../global/theme/editor/editor-popover.scss | 7 ++ studio/src/global/theme/popover.scss | 3 +- 14 files changed, 250 insertions(+), 112 deletions(-) create mode 100644 studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss create mode 100644 studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx create mode 100644 studio/src/assets/icons/ionicons/chevron-down.svg diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index a08f06977..ec46e04a0 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -546,6 +546,7 @@ export class AppActionsElement { selectedElement: this.selectedElement, slide: this.slide, imgDidChange: this.imgDidChange, + slideDidChange: this.slideDidChange, }, mode: 'md', showBackdrop: false, diff --git a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss new file mode 100644 index 000000000..57949d586 --- /dev/null +++ b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss @@ -0,0 +1,29 @@ +app-expansion-panel { + display: block; + + article { + > div { + overflow: hidden; + transition: height 0.25s ease-in; + } + + > ion-item { + font-size: var(--font-size-normal); + + ion-icon { + margin: 12px 8px 12px 0; + color: black; + + transition: transform 0.25s ease-in; + } + } + + &.close { + > ion-item { + ion-icon { + transform: rotate(-90deg); + } + } + } + } +} diff --git a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx new file mode 100644 index 000000000..752d714c3 --- /dev/null +++ b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx @@ -0,0 +1,79 @@ +import {Component, h, State} from '@stencil/core'; + +@Component({ + tag: 'app-expansion-panel', + styleUrl: 'app-expansion-panel.scss', +}) +export class AppExpansionPanel { + container!: HTMLDivElement; + + @State() + private expanded: 'open' | 'close' = 'open'; + + // Source animation: https://css-tricks.com/using-css-transitions-auto-dimensions/ + + private toggle() { + if (this.expanded === 'close') { + this.expand(); + } else { + this.collapse(); + } + } + + private collapse() { + if (!this.container) { + return; + } + + const sectionHeight: number = this.container.scrollHeight; + const elementTransition = this.container.style.transition; + this.container.style.transition = ''; + + requestAnimationFrame(() => { + this.container.style.height = sectionHeight + 'px'; + this.container.style.transition = elementTransition; + + requestAnimationFrame(() => { + this.container.style.height = 0 + 'px'; + }); + }); + + this.expanded = 'close'; + } + + private expand() { + if (!this.container) { + return; + } + + const sectionHeight: number = this.container.scrollHeight; + this.container.style.height = sectionHeight + 'px'; + + this.container.addEventListener( + 'transitionend', + () => { + this.container.style.height = ''; + }, + {once: true} + ); + + this.expanded = 'open'; + } + + render() { + return ( +
+ this.toggle()}> +
+ +
+ + + +
(this.container = el as HTMLDivElement)}> + +
+
+ ); + } +} diff --git a/studio/src/app/components/editor/app-image/app-image.tsx b/studio/src/app/components/editor/app-image/app-image.tsx index 3702f666d..137c4f2c5 100644 --- a/studio/src/app/components/editor/app-image/app-image.tsx +++ b/studio/src/app/components/editor/app-image/app-image.tsx @@ -231,26 +231,29 @@ export class AppImage { render() { return ( - - {this.renderImageSize()} - {this.renderImageAlignment()} + + Image + + {this.renderImageSize()} + {this.renderImageAlignment()} - {this.renderStockPhotos()} - {this.renderGif()} + {this.renderStockPhotos()} + {this.renderGif()} - {this.renderCustom()} + {this.renderCustom()} - {this.renderDeleteAction()} + {this.renderDeleteAction()} - - History - - + + History + + - {this.renderImagesHistory()} - + {this.renderImagesHistory()} + + ); } @@ -301,7 +304,7 @@ export class AppImage { return ( this.selectAction(EditAction.DELETE_BACKGROUND)} fill="outline" class="delete"> - Delete background + Reset image ); diff --git a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx index 06f55d3ae..1ead9417c 100644 --- a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx +++ b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx @@ -4,7 +4,7 @@ import {TargetElement} from '../../../utils/editor/target-element'; @Component({ tag: 'app-select-target-element', - styleUrl: 'app-select-target-element.scss' + styleUrl: 'app-select-target-element.scss', }) export class AppSelectTargetElement { @Prop() @@ -24,7 +24,7 @@ export class AppSelectTargetElement { // color is a reserved prop word @Prop() - colorTarget: boolean = false; + textTarget: boolean = false; @Prop() background: boolean = false; @@ -51,7 +51,7 @@ export class AppSelectTargetElement { } render() { - if (!this.colorTarget && !this.slide && !this.shapes) { + if (!this.textTarget && !this.slide && !this.shapes) { if (!this.code) { return undefined; } @@ -67,8 +67,8 @@ export class AppSelectTargetElement { ); } else { - const selectedValue: TargetElement = this.colorTarget - ? TargetElement.COLOR + const selectedValue: TargetElement = this.textTarget + ? TargetElement.TEXT : this.sides ? TargetElement.SIDES : this.qrCode @@ -87,7 +87,7 @@ export class AppSelectTargetElement { {this.renderChart()} {this.renderSides()} {this.renderSlide()} - {this.renderColor()} + {this.renderText()} {this.renderBackground()} {this.renderFonts()} {this.renderTransition()} @@ -134,11 +134,11 @@ export class AppSelectTargetElement { } } - private renderColor() { - if (this.colorTarget) { + private renderText() { + if (this.textTarget) { return ( - - Colors + + Text ); } else { diff --git a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx index dd5f5a0ba..314244259 100644 --- a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx +++ b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx @@ -1,13 +1,8 @@ -import {Component, Element, Event, EventEmitter, h, Method, Prop, State} from '@stencil/core'; +import {Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch} from '@stencil/core'; import {RangeChangeEventDetail} from '@ionic/core'; import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils'; -enum ApplyColorType { - TEXT, - BACKGROUND, -} - @Component({ tag: 'app-color-text-background', }) @@ -29,21 +24,26 @@ export class AppColorTextBackground { @Prop() shape: boolean = false; + @Prop() + colorType: 'text' | 'background' = 'text'; + @State() private color: string; @State() private colorOpacity: number = 100; - @State() - private applyColorType: ApplyColorType = ApplyColorType.TEXT; - @Event() colorChange: EventEmitter; async componentWillLoad() { await this.initCurrentColors(); } + @Watch('colorType') + async onColorTypeChange() { + await this.initCurrentColors(); + } + @Method() async initCurrentColors() { if (!this.selectedElement) { @@ -53,7 +53,7 @@ export class AppColorTextBackground { let styleColor: InitStyleColor; // prettier-ignore - if (this.applyColorType === ApplyColorType.BACKGROUND) { + if (this.colorType === 'background') { styleColor = await ColorUtils.splitColor(this.selectedElement.style.getPropertyValue('--background') ? this.selectedElement.style.getPropertyValue('--background') : this.selectedElement.style.background); } else { styleColor = await ColorUtils.splitColor(this.selectedElement.style.getPropertyValue('--color') ? this.selectedElement.style.getPropertyValue('--color') : this.selectedElement.style.color); @@ -63,14 +63,6 @@ export class AppColorTextBackground { this.colorOpacity = styleColor.opacity; } - private async selectApplyType($event: CustomEvent) { - if ($event && $event.detail) { - this.applyColorType = $event.detail.value; - - await this.initCurrentColors(); - } - } - private async selectColor($event: CustomEvent) { if (!this.selectedElement || !$event || !$event.detail) { return; @@ -82,7 +74,7 @@ export class AppColorTextBackground { } private async applyColor() { - if (this.applyColorType === ApplyColorType.BACKGROUND) { + if (this.colorType === 'background') { await this.applyBackground(); } else { await this.applyTextColor(); @@ -96,7 +88,7 @@ export class AppColorTextBackground { return; } - if (this.applyColorType === ApplyColorType.BACKGROUND) { + if (this.colorType === 'background') { this.selectedElement.style.removeProperty('--background'); this.selectedElement.style.removeProperty('background'); } else { @@ -175,59 +167,39 @@ export class AppColorTextBackground { } render() { - return [ - - this.selectApplyType($event)} value={ApplyColorType.TEXT}> + return ( + + Color + - Apply color to + + Opacity {this.colorOpacity}% + - - - {this.shape ? 'Shape' : 'Text'} - - - - - Background - + + ) => this.updateOpacity(e)}> - - - - Opacity {this.colorOpacity}% - - - - ) => this.updateOpacity(e)}> + + this.selectColor($event)} + color-rgb={this.color}> + + + + this.resetColor()} fill="outline" class="delete"> + Reset color + - , - this.selectColor($event)} - color-rgb={this.color}> - - , - - this.resetColor()} fill="outline" class="delete"> - {this.resetLabelContent()} - - , - ]; - } - - private resetLabelContent() { - if (this.applyColorType === ApplyColorType.BACKGROUND) { - return 'Reset background'; - } else { - return 'Reset color'; - } + + ); } } diff --git a/studio/src/app/popovers/editor/app-deck-style/app-deck-style.tsx b/studio/src/app/popovers/editor/app-deck-style/app-deck-style.tsx index 72a37b233..beafc67b0 100644 --- a/studio/src/app/popovers/editor/app-deck-style/app-deck-style.tsx +++ b/studio/src/app/popovers/editor/app-deck-style/app-deck-style.tsx @@ -8,7 +8,7 @@ import {ImageHelper} from '../../../helpers/editor/image.helper'; @Component({ tag: 'app-deck-style', - styleUrl: 'app-deck-style.scss' + styleUrl: 'app-deck-style.scss', }) export class AppDeck { @Element() el: HTMLElement; @@ -23,7 +23,7 @@ export class AppDeck { deckDidChange: EventEmitter; @State() - private applyToTargetElement: TargetElement = TargetElement.COLOR; + private applyToTargetElement: TargetElement = TargetElement.TEXT; @State() private moreColors: boolean = true; @@ -92,18 +92,18 @@ export class AppDeck { , ) => this.selectApplyToTargetElement($event)}>, - this.renderOptions() + this.renderOptions(), ]; } private renderOptions() { - if (this.applyToTargetElement === TargetElement.COLOR) { + if (this.applyToTargetElement === TargetElement.TEXT) { return ( this.onColorChange()}> ); } else if (this.applyToTargetElement === TargetElement.BACKGROUND) { - return ( + return [ + this.onColorChange()}>, ) => this.onImageAction($event)} - onImgDidChange={($event: CustomEvent) => this.onImgDidChange($event)}> - ); + onImgDidChange={($event: CustomEvent) => this.onImgDidChange($event)}>, + ]; } else if (this.applyToTargetElement === TargetElement.TRANSITION) { return this.onTransitionChange()}>; } else if (this.applyToTargetElement === TargetElement.FONTS) { diff --git a/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx b/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx index 65f167e91..c2e6526af 100644 --- a/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx +++ b/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx @@ -4,7 +4,7 @@ import {ImageAction} from '../../../utils/editor/image-action'; @Component({ tag: 'app-image-element', - styleUrl: 'app-image-element.scss' + styleUrl: 'app-image-element.scss', }) export class AppImageElement { @Element() el: HTMLElement; @@ -18,6 +18,9 @@ export class AppImageElement { @Prop() imgDidChange: EventEmitter; + @Prop() + slideDidChange: EventEmitter; + private async closePopoverWithoutResults() { await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss(); } @@ -34,6 +37,10 @@ export class AppImageElement { } } + private onColorChange() { + this.slideDidChange.emit(this.selectedElement); + } + render() { return [ @@ -42,11 +49,27 @@ export class AppImageElement { , + this.renderBackgroundColor(), ) => this.onAction($event)} - onImgDidChange={($event: CustomEvent) => this.onImgDidChange($event)}> + onImgDidChange={($event: CustomEvent) => this.onImgDidChange($event)}>, ]; } + + private renderBackgroundColor() { + if (!this.slide) { + return undefined; + } + + return ( + this.onColorChange()}> + ); + } } diff --git a/studio/src/app/utils/editor/target-element.tsx b/studio/src/app/utils/editor/target-element.tsx index 13b7fa180..121421d62 100644 --- a/studio/src/app/utils/editor/target-element.tsx +++ b/studio/src/app/utils/editor/target-element.tsx @@ -4,11 +4,11 @@ export enum TargetElement { SLIDE = 'slide', SECTION = 'section', CODE = 'code', - COLOR = 'color', + TEXT = 'text', BACKGROUND = 'background', TRANSITION = 'transition', SIDES = 'sides', FONTS = 'fonts', SHAPES = 'shapes', - IMAGES = 'shape' + IMAGES = 'shape', } diff --git a/studio/src/assets/assets.json b/studio/src/assets/assets.json index 7ebf49279..4aaeec167 100644 --- a/studio/src/assets/assets.json +++ b/studio/src/assets/assets.json @@ -240,6 +240,7 @@ {"src": "/icons/align-left.svg", "ariaLabel": "Align left"}, {"src": "/icons/align-right.svg", "ariaLabel": "Align right"}, {"src": "/icons/math.svg", "ariaLabel": "Math"}, - {"src": "/icons/ionicons/color-wand.svg", "ariaLabel": "Transform element"} + {"src": "/icons/ionicons/color-wand.svg", "ariaLabel": "Transform element"}, + {"src": "/icons/ionicons/chevron-down.svg", "ariaLabel": "Chevron down"} ] } diff --git a/studio/src/assets/icons/ionicons/chevron-down.svg b/studio/src/assets/icons/ionicons/chevron-down.svg new file mode 100644 index 000000000..0ddceaab6 --- /dev/null +++ b/studio/src/assets/icons/ionicons/chevron-down.svg @@ -0,0 +1 @@ +ionicons-v5-a diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index c1c63a5c6..04f56b455 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -127,6 +127,7 @@ export namespace Components { 'template': 'split' | 'author'; } interface AppColorTextBackground { + 'colorType': 'text' | 'background'; 'deck': boolean; 'initCurrentColors': () => Promise; 'moreColors': boolean; @@ -186,6 +187,7 @@ export namespace Components { } interface AppElementDelete {} interface AppEmbed {} + interface AppExpansionPanel {} interface AppFaq {} interface AppFeed {} interface AppFeedCard { @@ -220,6 +222,7 @@ export namespace Components { 'imgDidChange': EventEmitter; 'selectedElement': HTMLElement; 'slide': boolean; + 'slideDidChange': EventEmitter; } interface AppInactivity { 'fullscreen': boolean; @@ -299,13 +302,13 @@ export namespace Components { 'background': boolean; 'chart': boolean; 'code': boolean; - 'colorTarget': boolean; 'fonts': boolean; 'images': boolean; 'qrCode': boolean; 'shapes': boolean; 'sides': boolean; 'slide': boolean; + 'textTarget': boolean; 'transition': boolean; } interface AppServices {} @@ -573,6 +576,12 @@ declare global { new (): HTMLAppEmbedElement; }; + interface HTMLAppExpansionPanelElement extends Components.AppExpansionPanel, HTMLStencilElement {} + var HTMLAppExpansionPanelElement: { + prototype: HTMLAppExpansionPanelElement; + new (): HTMLAppExpansionPanelElement; + }; + interface HTMLAppFaqElement extends Components.AppFaq, HTMLStencilElement {} var HTMLAppFaqElement: { prototype: HTMLAppFaqElement; @@ -989,6 +998,7 @@ declare global { 'app-editor': HTMLAppEditorElement; 'app-element-delete': HTMLAppElementDeleteElement; 'app-embed': HTMLAppEmbedElement; + 'app-expansion-panel': HTMLAppExpansionPanelElement; 'app-faq': HTMLAppFaqElement; 'app-feed': HTMLAppFeedElement; 'app-feed-card': HTMLAppFeedCardElement; @@ -1160,6 +1170,7 @@ declare namespace LocalJSX { 'template'?: 'split' | 'author'; } interface AppColorTextBackground { + 'colorType'?: 'text' | 'background'; 'deck'?: boolean; 'moreColors'?: boolean; 'onColorChange'?: (event: CustomEvent) => void; @@ -1228,6 +1239,7 @@ declare namespace LocalJSX { } interface AppElementDelete {} interface AppEmbed {} + interface AppExpansionPanel {} interface AppFaq {} interface AppFeed {} interface AppFeedCard { @@ -1272,6 +1284,7 @@ declare namespace LocalJSX { 'imgDidChange'?: EventEmitter; 'selectedElement'?: HTMLElement; 'slide'?: boolean; + 'slideDidChange'?: EventEmitter; } interface AppInactivity { 'fullscreen'?: boolean; @@ -1356,7 +1369,6 @@ declare namespace LocalJSX { 'background'?: boolean; 'chart'?: boolean; 'code'?: boolean; - 'colorTarget'?: boolean; 'fonts'?: boolean; 'images'?: boolean; 'onApplyTo'?: (event: CustomEvent) => void; @@ -1364,6 +1376,7 @@ declare namespace LocalJSX { 'shapes'?: boolean; 'sides'?: boolean; 'slide'?: boolean; + 'textTarget'?: boolean; 'transition'?: boolean; } interface AppServices {} @@ -1441,6 +1454,7 @@ declare namespace LocalJSX { 'app-editor': AppEditor; 'app-element-delete': AppElementDelete; 'app-embed': AppEmbed; + 'app-expansion-panel': AppExpansionPanel; 'app-faq': AppFaq; 'app-feed': AppFeed; 'app-feed-card': AppFeedCard; @@ -1551,6 +1565,7 @@ declare module "@stencil/core" { 'app-editor': LocalJSX.AppEditor & JSXBase.HTMLAttributes; 'app-element-delete': LocalJSX.AppElementDelete & JSXBase.HTMLAttributes; 'app-embed': LocalJSX.AppEmbed & JSXBase.HTMLAttributes; + 'app-expansion-panel': LocalJSX.AppExpansionPanel & JSXBase.HTMLAttributes; 'app-faq': LocalJSX.AppFaq & JSXBase.HTMLAttributes; 'app-feed': LocalJSX.AppFeed & JSXBase.HTMLAttributes; 'app-feed-card': LocalJSX.AppFeedCard & JSXBase.HTMLAttributes; diff --git a/studio/src/global/theme/editor/editor-popover.scss b/studio/src/global/theme/editor/editor-popover.scss index 5c5100a48..848d537f7 100644 --- a/studio/src/global/theme/editor/editor-popover.scss +++ b/studio/src/global/theme/editor/editor-popover.scss @@ -55,6 +55,13 @@ ion-button.delete { ion-segment { ion-segment-button { + text-transform: none; + font-size: var(--font-size-normal); + font-weight: 400; + + --indicator-color: black; + --color-checked: black; + &:first-of-type { margin-left: 8px; } diff --git a/studio/src/global/theme/popover.scss b/studio/src/global/theme/popover.scss index 47b2ffa45..4b330a61a 100644 --- a/studio/src/global/theme/popover.scss +++ b/studio/src/global/theme/popover.scss @@ -3,13 +3,14 @@ ion-popover { ion-router-link[slot="end"] { cursor: pointer; border-bottom-color: transparent; + color: black; } } } ion-popover.popover-menu { &.popover-menu-wide { - --width: 420px; + --width: 380px; --max-width: 100%; } From d1214bc682825a7271ddbcf24d5f1a55c194ca2f Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 27 May 2020 07:21:25 +0200 Subject: [PATCH 02/19] feat: use style instead of color and background for slides and elements Signed-off-by: peterpeterparker --- .../app-actions-element.tsx | 27 +++---- .../app-select-target-element.tsx | 2 +- .../editor/app-deck-style/app-deck-style.scss | 4 - .../app-image-element/app-image-element.tsx | 23 ------ .../style/app-deck-style/app-deck-style.scss | 4 + .../app-deck-style/app-deck-style.tsx | 6 +- .../app-element-style/app-element-style.scss} | 6 +- .../app-element-style/app-element-style.tsx} | 77 +++++++++++++++---- studio/src/components.d.ts | 45 ++++++----- 9 files changed, 114 insertions(+), 80 deletions(-) delete mode 100644 studio/src/app/popovers/editor/app-deck-style/app-deck-style.scss create mode 100644 studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.scss rename studio/src/app/popovers/editor/{ => style}/app-deck-style/app-deck-style.tsx (95%) rename studio/src/app/popovers/editor/{app-color/app-color.scss => style/app-element-style/app-element-style.scss} (61%) rename studio/src/app/popovers/editor/{app-color/app-color.tsx => style/app-element-style/app-element-style.tsx} (72%) diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index ec46e04a0..419513991 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -546,7 +546,6 @@ export class AppActionsElement { selectedElement: this.selectedElement, slide: this.slide, imgDidChange: this.imgDidChange, - slideDidChange: this.slideDidChange, }, mode: 'md', showBackdrop: false, @@ -765,8 +764,8 @@ export class AppActionsElement { }); } - @Listen('colorDidChange', {target: 'document'}) - async onColorDidChange(_$event: CustomEvent) { + @Listen('styleDidChange', {target: 'document'}) + async onStyleDidChange(_$event: CustomEvent) { await this.emitChange(); } @@ -884,12 +883,14 @@ export class AppActionsElement { }); } - private async openColor() { + private async openStyle() { const popover: HTMLIonPopoverElement = await popoverController.create({ - component: 'app-color', + component: 'app-element-style', componentProps: { slide: this.slide, selectedElement: this.selectedElement, + imgDidChange: this.imgDidChange, + imageHelper: this.imageHelper, }, mode: 'md', showBackdrop: false, @@ -1080,7 +1081,7 @@ export class AppActionsElement { {this.renderEdit()} {this.renderShapes()} - {this.renderColor()} + {this.renderStyle()} {this.renderReveal()} {this.renderAlign()} {this.renderList()} @@ -1136,11 +1137,11 @@ export class AppActionsElement { ); } - private renderColor() { + private renderStyle() { return ( - this.openColor()} aria-label="Color" color="primary" mode="md"> - - Color + this.openStyle()} aria-label="Style" color="primary" mode="md"> + + Style ); } @@ -1207,12 +1208,12 @@ export class AppActionsElement { } private renderImages() { - const classImage: string | undefined = this.image || this.slide ? undefined : 'hidden'; + const classImage: string | undefined = this.image ? undefined : 'hidden'; return ( - this.openImage()} aria-label={this.slide ? 'Background' : 'Image'} color="primary" mode="md" class={classImage}> + this.openImage()} aria-label="Image" color="primary" mode="md" class={classImage}> - {this.slide ? 'Background' : 'Image'} + Image ); } diff --git a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx index 1ead9417c..0b895afc9 100644 --- a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx +++ b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx @@ -126,7 +126,7 @@ export class AppSelectTargetElement { if (this.slide) { return ( - Slide + Text ); } else { diff --git a/studio/src/app/popovers/editor/app-deck-style/app-deck-style.scss b/studio/src/app/popovers/editor/app-deck-style/app-deck-style.scss deleted file mode 100644 index 32bde4240..000000000 --- a/studio/src/app/popovers/editor/app-deck-style/app-deck-style.scss +++ /dev/null @@ -1,4 +0,0 @@ -app-deck-style { - @import "../../../../global/theme/editor/editor-info"; - @import "../../../../global/theme/editor/editor-popover"; -} diff --git a/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx b/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx index c2e6526af..94c1ad329 100644 --- a/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx +++ b/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx @@ -18,9 +18,6 @@ export class AppImageElement { @Prop() imgDidChange: EventEmitter; - @Prop() - slideDidChange: EventEmitter; - private async closePopoverWithoutResults() { await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss(); } @@ -37,10 +34,6 @@ export class AppImageElement { } } - private onColorChange() { - this.slideDidChange.emit(this.selectedElement); - } - render() { return [ @@ -49,7 +42,6 @@ export class AppImageElement { , - this.renderBackgroundColor(), ) => this.onImgDidChange($event)}>, ]; } - - private renderBackgroundColor() { - if (!this.slide) { - return undefined; - } - - return ( - this.onColorChange()}> - ); - } } diff --git a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.scss b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.scss new file mode 100644 index 000000000..36cfc372a --- /dev/null +++ b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.scss @@ -0,0 +1,4 @@ +app-deck-style { + @import "../../../../../global/theme/editor/editor-info"; + @import "../../../../../global/theme/editor/editor-popover"; +} diff --git a/studio/src/app/popovers/editor/app-deck-style/app-deck-style.tsx b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx similarity index 95% rename from studio/src/app/popovers/editor/app-deck-style/app-deck-style.tsx rename to studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx index beafc67b0..256e7cf9f 100644 --- a/studio/src/app/popovers/editor/app-deck-style/app-deck-style.tsx +++ b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx @@ -2,9 +2,9 @@ import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/ import {isIPad} from '@deckdeckgo/utils'; -import {TargetElement} from '../../../utils/editor/target-element'; -import {ImageAction} from '../../../utils/editor/image-action'; -import {ImageHelper} from '../../../helpers/editor/image.helper'; +import {TargetElement} from '../../../../utils/editor/target-element'; +import {ImageAction} from '../../../../utils/editor/image-action'; +import {ImageHelper} from '../../../../helpers/editor/image.helper'; @Component({ tag: 'app-deck-style', diff --git a/studio/src/app/popovers/editor/app-color/app-color.scss b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.scss similarity index 61% rename from studio/src/app/popovers/editor/app-color/app-color.scss rename to studio/src/app/popovers/editor/style/app-element-style/app-element-style.scss index 3bac06535..d8b9ebb85 100644 --- a/studio/src/app/popovers/editor/app-color/app-color.scss +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.scss @@ -1,6 +1,6 @@ -app-color { - @import "../../../../global/theme/editor/editor-info"; - @import "../../../../global/theme/editor/editor-popover"; +app-element-style { + @import "../../../../../global/theme/editor/editor-info"; + @import "../../../../../global/theme/editor/editor-popover"; ion-icon.more { font-size: 1rem; diff --git a/studio/src/app/popovers/editor/app-color/app-color.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx similarity index 72% rename from studio/src/app/popovers/editor/app-color/app-color.tsx rename to studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index f4a7d08c5..b6c604d9f 100644 --- a/studio/src/app/popovers/editor/app-color/app-color.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -2,14 +2,16 @@ import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/ import {isIPad} from '@deckdeckgo/utils'; -import {TargetElement} from '../../../utils/editor/target-element'; -import {SlotType} from '../../../utils/editor/slot-type'; +import {TargetElement} from '../../../../utils/editor/target-element'; +import {SlotType} from '../../../../utils/editor/slot-type'; +import {ImageAction} from '../../../../utils/editor/image-action'; +import {ImageHelper} from '../../../../helpers/editor/image.helper'; @Component({ - tag: 'app-color', - styleUrl: 'app-color.scss' + tag: 'app-element-style', + styleUrl: 'app-element-style.scss', }) -export class AppColor { +export class AppElementStyle { @Element() el: HTMLElement; @Prop() @@ -18,7 +20,13 @@ export class AppColor { @Prop() selectedElement: HTMLElement; - @Event() colorDidChange: EventEmitter; + @Prop() + imgDidChange: EventEmitter; + + @Prop() + imageHelper: ImageHelper; + + @Event() styleDidChange: EventEmitter; @State() private applyToTargetElement: TargetElement = TargetElement.SLIDE; @@ -93,32 +101,52 @@ export class AppColor { private colorChange($event: CustomEvent) { if ($event) { - this.colorDidChange.emit($event.detail); + this.styleDidChange.emit($event.detail); + } + } + + private async onImageAction($event: CustomEvent) { + if (!this.slide) { + return; + } + + if ($event && $event.detail) { + const popover = this.el.closest('ion-popover') as HTMLIonPopoverElement; + + popover.onWillDismiss().then(async () => { + await this.imageHelper.imageAction(this.selectedElement, true, false, $event.detail); + }); + + await popover.dismiss(); + } + } + + private onImgDidChange($event: CustomEvent) { + if ($event && $event.detail) { + this.imgDidChange.emit($event.detail); } } render() { return [ -

{this.slide ? 'Slide colors' : 'Colors'}

+

{this.slide ? 'Slide style' : 'Style'}

this.closePopover()}> , this.renderSelectTarget(), - this.renderColorOptions() + this.renderColorOptions(), ]; } private renderSelectTarget() { - if (this.slide && !this.qrCode && !this.poll && !this.chart && !this.author && !this.split) { - return undefined; - } - return ( ) => this.colorChange($event)} moreColors={this.moreColors}> ); + } else if (this.applyToTargetElement === TargetElement.BACKGROUND) { + return [ + ) => this.colorChange($event)}>, + this.renderImage(), + ]; } else { return ( ) => this.onImageAction($event)} + onImgDidChange={($event: CustomEvent) => this.onImgDidChange($event)}> + ); + } } diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 04f56b455..a72c40ae9 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -29,6 +29,9 @@ import { import { EditAction, } from './app/utils/editor/edit-action'; +import { + ImageHelper, +} from './app/helpers/editor/image.helper'; import { ImageAction, } from './app/utils/editor/image-action'; @@ -102,10 +105,6 @@ export namespace Components { 'currentLanguage': PrismLanguage | undefined; 'selectedElement': HTMLElement; } - interface AppColor { - 'selectedElement': HTMLElement; - 'slide': boolean; - } interface AppColorChart { 'initCurrentColors': () => Promise; 'moreColors': boolean; @@ -186,6 +185,12 @@ export namespace Components { 'deckId': string; } interface AppElementDelete {} + interface AppElementStyle { + 'imageHelper': ImageHelper; + 'imgDidChange': EventEmitter; + 'selectedElement': HTMLElement; + 'slide': boolean; + } interface AppEmbed {} interface AppExpansionPanel {} interface AppFaq {} @@ -222,7 +227,6 @@ export namespace Components { 'imgDidChange': EventEmitter; 'selectedElement': HTMLElement; 'slide': boolean; - 'slideDidChange': EventEmitter; } interface AppInactivity { 'fullscreen': boolean; @@ -420,12 +424,6 @@ declare global { new (): HTMLAppCodeLanguagesElement; }; - interface HTMLAppColorElement extends Components.AppColor, HTMLStencilElement {} - var HTMLAppColorElement: { - prototype: HTMLAppColorElement; - new (): HTMLAppColorElement; - }; - interface HTMLAppColorChartElement extends Components.AppColorChart, HTMLStencilElement {} var HTMLAppColorChartElement: { prototype: HTMLAppColorChartElement; @@ -570,6 +568,12 @@ declare global { new (): HTMLAppElementDeleteElement; }; + interface HTMLAppElementStyleElement extends Components.AppElementStyle, HTMLStencilElement {} + var HTMLAppElementStyleElement: { + prototype: HTMLAppElementStyleElement; + new (): HTMLAppElementStyleElement; + }; + interface HTMLAppEmbedElement extends Components.AppEmbed, HTMLStencilElement {} var HTMLAppEmbedElement: { prototype: HTMLAppEmbedElement; @@ -972,7 +976,6 @@ declare global { 'app-breadcrumbs': HTMLAppBreadcrumbsElement; 'app-code': HTMLAppCodeElement; 'app-code-languages': HTMLAppCodeLanguagesElement; - 'app-color': HTMLAppColorElement; 'app-color-chart': HTMLAppColorChartElement; 'app-color-code': HTMLAppColorCodeElement; 'app-color-qrcode': HTMLAppColorQrcodeElement; @@ -997,6 +1000,7 @@ declare global { 'app-edit-slide-qrcode': HTMLAppEditSlideQrcodeElement; 'app-editor': HTMLAppEditorElement; 'app-element-delete': HTMLAppElementDeleteElement; + 'app-element-style': HTMLAppElementStyleElement; 'app-embed': HTMLAppEmbedElement; 'app-expansion-panel': HTMLAppExpansionPanelElement; 'app-faq': HTMLAppFaqElement; @@ -1143,11 +1147,6 @@ declare namespace LocalJSX { 'currentLanguage'?: PrismLanguage | undefined; 'selectedElement'?: HTMLElement; } - interface AppColor { - 'onColorDidChange'?: (event: CustomEvent) => void; - 'selectedElement'?: HTMLElement; - 'slide'?: boolean; - } interface AppColorChart { 'moreColors'?: boolean; 'onColorChange'?: (event: CustomEvent) => void; @@ -1238,6 +1237,13 @@ declare namespace LocalJSX { 'deckId'?: string; } interface AppElementDelete {} + interface AppElementStyle { + 'imageHelper'?: ImageHelper; + 'imgDidChange'?: EventEmitter; + 'onStyleDidChange'?: (event: CustomEvent) => void; + 'selectedElement'?: HTMLElement; + 'slide'?: boolean; + } interface AppEmbed {} interface AppExpansionPanel {} interface AppFaq {} @@ -1284,7 +1290,6 @@ declare namespace LocalJSX { 'imgDidChange'?: EventEmitter; 'selectedElement'?: HTMLElement; 'slide'?: boolean; - 'slideDidChange'?: EventEmitter; } interface AppInactivity { 'fullscreen'?: boolean; @@ -1428,7 +1433,6 @@ declare namespace LocalJSX { 'app-breadcrumbs': AppBreadcrumbs; 'app-code': AppCode; 'app-code-languages': AppCodeLanguages; - 'app-color': AppColor; 'app-color-chart': AppColorChart; 'app-color-code': AppColorCode; 'app-color-qrcode': AppColorQrcode; @@ -1453,6 +1457,7 @@ declare namespace LocalJSX { 'app-edit-slide-qrcode': AppEditSlideQrcode; 'app-editor': AppEditor; 'app-element-delete': AppElementDelete; + 'app-element-style': AppElementStyle; 'app-embed': AppEmbed; 'app-expansion-panel': AppExpansionPanel; 'app-faq': AppFaq; @@ -1539,7 +1544,6 @@ declare module "@stencil/core" { 'app-breadcrumbs': LocalJSX.AppBreadcrumbs & JSXBase.HTMLAttributes; 'app-code': LocalJSX.AppCode & JSXBase.HTMLAttributes; 'app-code-languages': LocalJSX.AppCodeLanguages & JSXBase.HTMLAttributes; - 'app-color': LocalJSX.AppColor & JSXBase.HTMLAttributes; 'app-color-chart': LocalJSX.AppColorChart & JSXBase.HTMLAttributes; 'app-color-code': LocalJSX.AppColorCode & JSXBase.HTMLAttributes; 'app-color-qrcode': LocalJSX.AppColorQrcode & JSXBase.HTMLAttributes; @@ -1564,6 +1568,7 @@ declare module "@stencil/core" { 'app-edit-slide-qrcode': LocalJSX.AppEditSlideQrcode & JSXBase.HTMLAttributes; 'app-editor': LocalJSX.AppEditor & JSXBase.HTMLAttributes; 'app-element-delete': LocalJSX.AppElementDelete & JSXBase.HTMLAttributes; + 'app-element-style': LocalJSX.AppElementStyle & JSXBase.HTMLAttributes; 'app-embed': LocalJSX.AppEmbed & JSXBase.HTMLAttributes; 'app-expansion-panel': LocalJSX.AppExpansionPanel & JSXBase.HTMLAttributes; 'app-faq': LocalJSX.AppFaq & JSXBase.HTMLAttributes; From 259a3b1725bcc692bf0da003a79fa0acab8476b2 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 27 May 2020 07:26:18 +0200 Subject: [PATCH 03/19] feat: options icon Signed-off-by: peterpeterparker --- .../element/app-actions-element/app-actions-element.tsx | 2 +- studio/src/assets/assets.json | 4 ++-- studio/src/assets/icons/ionicons/settings.svg | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) create mode 100644 studio/src/assets/icons/ionicons/settings.svg diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index 419513991..e389c8aef 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -1165,7 +1165,7 @@ export class AppActionsElement { aria-label="Edit slide options" mode="md" class={classSlide}> - + Options , this.openTransform()} aria-label="Toggle element type" color="primary" mode="md" class={classToggle}> diff --git a/studio/src/assets/assets.json b/studio/src/assets/assets.json index 4aaeec167..3a608e859 100644 --- a/studio/src/assets/assets.json +++ b/studio/src/assets/assets.json @@ -229,7 +229,6 @@ {"src": "/icons/ionicons/create.svg", "ariaLabel": "Notes"}, {"src": "/icons/ionicons/copy.svg", "ariaLabel": "Copy"}, {"src": "/icons/ionicons/color-palette.svg", "ariaLabel": "Color"}, - {"src": "/icons/ionicons/pencil.svg", "ariaLabel": "Edit"}, {"src": "/icons/ionicons/add.svg", "ariaLabel": "Add"}, {"src": "/icons/ionicons/shapes.svg", "ariaLabel": "Shapes"}, {"src": "/icons/ionicons/code.svg", "ariaLabel": "Code"}, @@ -241,6 +240,7 @@ {"src": "/icons/align-right.svg", "ariaLabel": "Align right"}, {"src": "/icons/math.svg", "ariaLabel": "Math"}, {"src": "/icons/ionicons/color-wand.svg", "ariaLabel": "Transform element"}, - {"src": "/icons/ionicons/chevron-down.svg", "ariaLabel": "Chevron down"} + {"src": "/icons/ionicons/chevron-down.svg", "ariaLabel": "Chevron down"}, + {"src": "/icons/ionicons/settings.svg", "ariaLabel": "Settings"} ] } diff --git a/studio/src/assets/icons/ionicons/settings.svg b/studio/src/assets/icons/ionicons/settings.svg new file mode 100644 index 000000000..204a1e405 --- /dev/null +++ b/studio/src/assets/icons/ionicons/settings.svg @@ -0,0 +1 @@ +ionicons-v5-q From 456098c1b963b4b99d75a3dca05fae9a861e8d9c Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 27 May 2020 07:42:41 +0200 Subject: [PATCH 04/19] fix: code target in selection Signed-off-by: peterpeterparker --- .../editor/style/app-element-style/app-element-style.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index b6c604d9f..c31bc873a 100644 --- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -142,9 +142,11 @@ export class AppElementStyle { } private renderSelectTarget() { + const elementTarget: boolean = !this.slide && !this.code && !this.shape; + return ( Date: Wed, 27 May 2020 07:48:07 +0200 Subject: [PATCH 05/19] feat: no style for image elements Signed-off-by: peterpeterparker --- .../element/app-actions-element/app-actions-element.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index e389c8aef..e0215d58b 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -1138,8 +1138,10 @@ export class AppActionsElement { } private renderStyle() { + const classNotImage: string | undefined = this.image ? 'hidden' : undefined; + return ( - this.openStyle()} aria-label="Style" color="primary" mode="md"> + this.openStyle()} aria-label="Style" color="primary" mode="md" class={classNotImage}> Style From 35bddfdad43a6f24c82217c4f632bfab9060e5ac Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 27 May 2020 18:10:03 +0200 Subject: [PATCH 06/19] feat: expansion panel for code colors Signed-off-by: peterpeterparker --- .../app-expansion-panel.scss | 1 + .../app-expansion-panel.tsx | 3 + .../color/app-color-code/app-color-code.tsx | 222 +++++++++--------- .../src/global/theme/editor/editor-info.scss | 11 +- 4 files changed, 129 insertions(+), 108 deletions(-) diff --git a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss index 57949d586..025a1112f 100644 --- a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss +++ b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss @@ -13,6 +13,7 @@ app-expansion-panel { ion-icon { margin: 12px 8px 12px 0; color: black; + font-size: var(--font-size-small); transition: transform 0.25s ease-in; } diff --git a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx index 752d714c3..bf32890dc 100644 --- a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx +++ b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx @@ -68,6 +68,9 @@ export class AppExpansionPanel { +
+ +
(this.container = el as HTMLDivElement)}> diff --git a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx index 8c7b88b35..407edb92e 100644 --- a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx +++ b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx @@ -236,7 +236,9 @@ export class AppColorCode { } // prettier-ignore - private async presentHighlightInfo() { + private async presentHighlightInfo($event: UIEvent) { + $event.stopPropagation(); + const alert: HTMLIonAlertElement = await alertController.create({ message: 'If you wish to highlight some specific lines of your code, list their line numbers separately using comma.

For example: 1,2 7,7 13,15

Which would highlight lines 1 to 2, line 7 and lines 13 to 15.', buttons: ['Ok'] @@ -296,110 +298,118 @@ export class AppColorCode { } render() { - return [ - - - Apply color to - - - - Apply color to - - this.toggleColorType(e)} - interface="popover" - mode="md" - class="ion-padding-start ion-padding-end"> - Comments - Functions - Keywords - Operators - Punctuation - Properties - Regex - Selector - Line numbers - - - - - - Opacity {this.codeColorOpacity}% - - - - - ) => this.updateOpacity($event, this.setCodeOpacity)}> - - -
- this.selectColor($event, this.setCodeColor)} - color-rgb={this.codeColor} - more={this.moreColors}> - - -
- - - this.resetCodeColor()} fill="outline" class="delete"> - Reset color - - - - - Highlight lines - - - - - ) => this.handleInput(e)} - onIonChange={() => this.highlightSelectedLines()}> - - - - - Opacity {this.highlightColorOpacity}% - - - - - ) => this.updateOpacity($event, this.setHighlightOpacity)}> - - -
- this.selectColor($event, this.setHighlightColor)} - color-rgb={this.highlightColor} - more={this.moreColors}> - - -
- , - ]; + return [this.renderCategoryColor(), this.renderHighlightLinesColor()]; + } + + private renderCategoryColor() { + return ( + + Colors + + + Apply color to + + this.toggleColorType(e)} + interface="popover" + mode="md" + class="ion-padding-start ion-padding-end"> + Comments + Functions + Keywords + Operators + Punctuation + Properties + Regex + Selector + Line numbers + + + + + + Opacity {this.codeColorOpacity}% + + + + + ) => this.updateOpacity($event, this.setCodeOpacity)}> + + +
+ this.selectColor($event, this.setCodeColor)} + color-rgb={this.codeColor} + more={this.moreColors}> + + +
+ + + this.resetCodeColor()} fill="outline" class="delete"> + Reset color + + + + + ); + } + + private renderHighlightLinesColor() { + return ( + + Highlight lines + + + + ) => this.handleInput(e)} + onIonChange={() => this.highlightSelectedLines()}> + + + + + Opacity {this.highlightColorOpacity}% + + + + + ) => this.updateOpacity($event, this.setHighlightOpacity)}> + + +
+ this.selectColor($event, this.setHighlightColor)} + color-rgb={this.highlightColor} + more={this.moreColors}> + + +
+ + + ); } } diff --git a/studio/src/global/theme/editor/editor-info.scss b/studio/src/global/theme/editor/editor-info.scss index 886deab79..55641ea16 100644 --- a/studio/src/global/theme/editor/editor-info.scss +++ b/studio/src/global/theme/editor/editor-info.scss @@ -1,16 +1,23 @@ -ion-item-divider { +ion-item-divider, +app-expansion-panel { button.info { background: var(--ion-color-light); border: 1px solid #dedede; border-radius: 50%; height: 1.5rem; width: 1.5rem; - margin: 16px 16px 0; padding: 0; outline: 0; ion-icon { color: var(--ion-color-light-contrast); + margin: 0; } } } + +ion-item-divider { + button.info { + margin: 16px 16px 0; + } +} From c6332ec3b2c310a017d7e61c2e1cb309e14933c4 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 27 May 2020 18:56:05 +0200 Subject: [PATCH 07/19] style: hide div end info if closed Signed-off-by: peterpeterparker --- .../app-expansion-panel/app-expansion-panel.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss index 025a1112f..2d1d893fe 100644 --- a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss +++ b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss @@ -10,20 +10,30 @@ app-expansion-panel { > ion-item { font-size: var(--font-size-normal); - ion-icon { + > ion-icon { margin: 12px 8px 12px 0; color: black; font-size: var(--font-size-small); transition: transform 0.25s ease-in; } + + div[slot="end"] { + opacity: 1; + + transition: opacity 0.25s ease-in; + } } &.close { > ion-item { - ion-icon { + > ion-icon { transform: rotate(-90deg); } + + div[slot="end"] { + opacity: 0; + } } } } From 2250110a3b574f04924011d00d808ab254ad158f Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 08:58:04 +0200 Subject: [PATCH 08/19] feat: style text and background in code Signed-off-by: peterpeterparker --- .../app-select-target-element.tsx | 88 +++++++++---------- .../app-element-style/app-element-style.tsx | 2 +- 2 files changed, 44 insertions(+), 46 deletions(-) diff --git a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx index 0b895afc9..ddadf8f16 100644 --- a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx +++ b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx @@ -51,51 +51,37 @@ export class AppSelectTargetElement { } render() { - if (!this.textTarget && !this.slide && !this.shapes) { - if (!this.code) { - return undefined; - } - - return ( - this.selectApplyToAll($event)}> - - Code - - - Section - - - ); - } else { - const selectedValue: TargetElement = this.textTarget - ? TargetElement.TEXT - : this.sides - ? TargetElement.SIDES - : this.qrCode - ? TargetElement.QR_CODE - : this.chart - ? TargetElement.CHART - : this.shapes - ? TargetElement.SHAPES - : this.images - ? TargetElement.IMAGES - : TargetElement.SLIDE; - - return ( - this.selectApplyToAll($event)}> - {this.renderQRCode()} - {this.renderChart()} - {this.renderSides()} - {this.renderSlide()} - {this.renderText()} - {this.renderBackground()} - {this.renderFonts()} - {this.renderTransition()} - {this.renderShapes()} - {this.renderImages()} - - ); - } + const selectedValue: TargetElement = this.code + ? TargetElement.CODE + : this.textTarget + ? TargetElement.TEXT + : this.sides + ? TargetElement.SIDES + : this.qrCode + ? TargetElement.QR_CODE + : this.chart + ? TargetElement.CHART + : this.shapes + ? TargetElement.SHAPES + : this.images + ? TargetElement.IMAGES + : TargetElement.SLIDE; + + return ( + this.selectApplyToAll($event)}> + {this.renderQRCode()} + {this.renderChart()} + {this.renderSides()} + {this.renderSlide()} + {this.renderCode()} + {this.renderText()} + {this.renderBackground()} + {this.renderFonts()} + {this.renderTransition()} + {this.renderShapes()} + {this.renderImages()} + + ); } private renderQRCode() { @@ -158,6 +144,18 @@ export class AppSelectTargetElement { } } + private renderCode() { + if (this.code) { + return ( + + Code + + ); + } else { + return undefined; + } + } + private renderTransition() { if (this.transition) { return ( diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index c31bc873a..b34f376c0 100644 --- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -142,7 +142,7 @@ export class AppElementStyle { } private renderSelectTarget() { - const elementTarget: boolean = !this.slide && !this.code && !this.shape; + const elementTarget: boolean = !this.slide && !this.shape; return ( Date: Thu, 28 May 2020 09:00:55 +0200 Subject: [PATCH 09/19] feat: always action style first Signed-off-by: peterpeterparker --- .../actions/element/app-actions-element/app-actions-element.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index e0215d58b..b055da08e 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -1079,9 +1079,9 @@ export class AppActionsElement { return ( + {this.renderStyle()} {this.renderEdit()} {this.renderShapes()} - {this.renderStyle()} {this.renderReveal()} {this.renderAlign()} {this.renderList()} From 3008c312c2077702d45fc2e290b0ad5f133eedf7 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 09:27:40 +0200 Subject: [PATCH 10/19] feat: alignment editable in popover within text section Signed-off-by: peterpeterparker --- .../app-actions-element.tsx | 47 +-------------- .../editor/app-align/app-align.scss | 6 +- .../components/editor/app-align/app-align.tsx | 58 +++++++++++++++++++ .../color/app-color-chart/app-color-chart.tsx | 4 +- .../color/app-color-code/app-color-code.tsx | 4 +- .../app-color-qrcode/app-color-qrcode.tsx | 6 +- .../color/app-color-sides/app-color-sides.tsx | 6 +- .../app-color-text-background.tsx | 8 +-- .../popovers/editor/app-align/app-align.tsx | 50 ---------------- .../app-element-style/app-element-style.tsx | 41 +++++-------- studio/src/components.d.ts | 13 +++-- 11 files changed, 101 insertions(+), 142 deletions(-) rename studio/src/app/{popovers => components}/editor/app-align/app-align.scss (78%) create mode 100644 studio/src/app/components/editor/app-align/app-align.tsx delete mode 100644 studio/src/app/popovers/editor/app-align/app-align.tsx diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index b055da08e..ec1f16aaa 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -15,7 +15,6 @@ import {ToggleSlotUtils} from '../../../../../utils/editor/toggle-slot.utils'; import {RevealSlotUtils} from '../../../../../utils/editor/reveal-slot.utils'; import {SlotType} from '../../../../../utils/editor/slot-type'; import {SlotUtils} from '../../../../../utils/editor/slot.utils'; -import {AlignUtils, TextAlign} from '../../../../../utils/editor/align.utils'; import {ListUtils} from '../../../../../utils/editor/list.utils'; import {EditAction} from '../../../../../utils/editor/edit-action'; @@ -61,9 +60,6 @@ export class AppActionsElement { @State() private shape: boolean = false; - @State() - private align: TextAlign | undefined; - @State() private list: SlotType.OL | SlotType.UL | undefined; @@ -577,7 +573,7 @@ export class AppActionsElement { await modal.present(); } - private async openSingleAction($event: UIEvent, component: 'app-reveal' | 'app-align' | 'app-list') { + private async openSingleAction($event: UIEvent, component: 'app-reveal' | 'app-list') { if (this.slide) { return; } @@ -595,8 +591,6 @@ export class AppActionsElement { popover.onDidDismiss().then(async (detail: OverlayEventDetail) => { if (detail.data && component === 'app-reveal') { await this.toggleReveal(detail.data.reveal); - } else if (detail.data && component === 'app-align') { - await this.updateAlignAttribute(detail.data.align); } else if (detail.data && component === 'app-list') { await this.toggleList(detail.data.list); } @@ -765,7 +759,7 @@ export class AppActionsElement { } @Listen('styleDidChange', {target: 'document'}) - async onStyleDidChange(_$event: CustomEvent) { + async onStyleDidChange() { await this.emitChange(); } @@ -776,7 +770,7 @@ export class AppActionsElement { return; } - // If not deck or slide, then parent is the container slide + // If not slide, then parent is the container slide this.slideDidChange.emit(this.slide ? this.selectedElement : this.selectedElement.parentElement); resolve(); @@ -801,8 +795,6 @@ export class AppActionsElement { this.image = this.isElementImage(SlotUtils.isNodeReveal(element) ? (element.firstElementChild as HTMLElement) : element); this.shape = this.isElementShape(element); - this.align = await AlignUtils.getAlignment(element); - this.list = await ListUtils.isElementList(element); if (element) { @@ -990,18 +982,6 @@ export class AppActionsElement { }); } - private async updateAlignAttribute(align: TextAlign): Promise { - if (!this.selectedElement) { - return; - } - - this.selectedElement.style.textAlign = align; - - await this.emitChange(); - - await this.reset(); - } - private resizeSlideContent(slideElement?: HTMLElement): Promise { return new Promise(async (resolve) => { if (!this.selectedElement) { @@ -1083,7 +1063,6 @@ export class AppActionsElement { {this.renderEdit()} {this.renderShapes()} {this.renderReveal()} - {this.renderAlign()} {this.renderList()} {this.renderImages()} {this.renderCodeOptions()} @@ -1236,26 +1215,6 @@ export class AppActionsElement { ); } - private renderAlign() { - const classAlign: string | undefined = this.align === undefined ? 'hidden' : undefined; - - return ( - this.openSingleAction($event, 'app-align')} - aria-label="Edit element alignment" - color="primary" - mode="md" - class={classAlign}> - {this.align !== undefined ? ( - - ) : ( - - )} - Alignment - - ); - } - private renderList() { const classList: string | undefined = this.list === undefined ? 'hidden wider-devices' : 'wider-devices'; diff --git a/studio/src/app/popovers/editor/app-align/app-align.scss b/studio/src/app/components/editor/app-align/app-align.scss similarity index 78% rename from studio/src/app/popovers/editor/app-align/app-align.scss rename to studio/src/app/components/editor/app-align/app-align.scss index 72365280a..64f6b2f85 100644 --- a/studio/src/app/popovers/editor/app-align/app-align.scss +++ b/studio/src/app/components/editor/app-align/app-align.scss @@ -1,6 +1,4 @@ app-align { - @import "../../../../global/theme/editor/editor-popover"; - ion-item { --background-activated: transparent; --background-focused: transparent; @@ -11,6 +9,10 @@ app-align { &:hover, &.active { --color: var(--ion-color-primary); + + ion-icon { + color: var(--ion-color-primary); + } } } } diff --git a/studio/src/app/components/editor/app-align/app-align.tsx b/studio/src/app/components/editor/app-align/app-align.tsx new file mode 100644 index 000000000..ace856b65 --- /dev/null +++ b/studio/src/app/components/editor/app-align/app-align.tsx @@ -0,0 +1,58 @@ +import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; + +import {AlignUtils, TextAlign} from '../../../utils/editor/align.utils'; + +@Component({ + tag: 'app-align', + styleUrl: 'app-align.scss', +}) +export class AppAlign { + @Prop() + selectedElement: HTMLElement; + + @State() + private align: TextAlign | undefined; + + @Event() alignChange: EventEmitter; + + async componentWillLoad() { + this.align = await AlignUtils.getAlignment(this.selectedElement); + } + + private async updateAlign(align: TextAlign): Promise { + if (!this.selectedElement) { + return; + } + + this.selectedElement.style.textAlign = align; + this.align = align; + + this.alignChange.emit(); + } + + render() { + if (this.align === undefined) { + return undefined; + } + + return ( + + Alignment + + {this.renderAlign(TextAlign.LEFT, 'Align left')} + {this.renderAlign(TextAlign.CENTER, 'Align center')} + {this.renderAlign(TextAlign.RIGHT, 'Align right')} + + + ); + } + + private renderAlign(align: TextAlign, text: string) { + return ( + this.updateAlign(align)} class={this.align == align ? 'active' : undefined}> + + {text} + + ); + } +} diff --git a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx index 9a2675a21..ad00a7626 100644 --- a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx +++ b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx @@ -43,7 +43,7 @@ export class AppColorDeckSlide { private indexes: number[] = [...Array(99).keys()]; - @Event() colorChange: EventEmitter; + @Event() colorChange: EventEmitter; async componentWillLoad() { this.chartType = await ChartUtils.initSlideChartType(this.selectedElement); @@ -129,7 +129,7 @@ export class AppColorDeckSlide { this.selectedElement.style.setProperty('--deckgo-chart-text-color', selectedColor); } - this.colorChange.emit(false); + this.colorChange.emit(); resolve(); }); diff --git a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx index 407edb92e..a871e5a34 100644 --- a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx +++ b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx @@ -45,7 +45,7 @@ export class AppColorCode { @State() private highlightColorOpacity: number = 100; - @Event() colorChange: EventEmitter; + @Event() colorChange: EventEmitter; async componentWillLoad() { await this.initColor(); @@ -248,7 +248,7 @@ export class AppColorCode { } private emitColorChange() { - this.colorChange.emit(false); + this.colorChange.emit(); } private updateOpacity($event: CustomEvent, opacityFunction: Function): Promise { diff --git a/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx b/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx index 41a6119bc..63ec58f06 100644 --- a/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx +++ b/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx @@ -29,7 +29,7 @@ export class AppColorQRCode { @State() private applyColorType: ApplyColorType = ApplyColorType.QR_CODE; - @Event() colorChange: EventEmitter; + @Event() colorChange: EventEmitter; async componentWillLoad() { await this.initCurrentColors(); @@ -93,7 +93,7 @@ export class AppColorQRCode { this.color = null; this.colorOpacity = 100; - this.colorChange.emit(false); + this.colorChange.emit(); resolve(); }); @@ -114,7 +114,7 @@ export class AppColorQRCode { this.selectedElement.style.setProperty('--deckgo-qrcode-color-fill', selectedColor); } - this.colorChange.emit(false); + this.colorChange.emit(); resolve(); }); diff --git a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx index bc0a52349..7dcb3a9a6 100644 --- a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx +++ b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx @@ -32,7 +32,7 @@ export class AppColorSides { @State() private applyColorType: ApplyColorType = ApplyColorType.TEXT; - @Event() colorChange: EventEmitter; + @Event() colorChange: EventEmitter; @State() private endSide: boolean = false; @@ -99,7 +99,7 @@ export class AppColorSides { this.color = null; this.colorOpacity = 100; - this.colorChange.emit(false); + this.colorChange.emit(); resolve(); }); @@ -120,7 +120,7 @@ export class AppColorSides { this.selectedElement.style.setProperty(`--slide-${this.template}-color-${this.endSide ? 'end' : 'start'}`, selectedColor); } - this.colorChange.emit(false); + this.colorChange.emit(); resolve(); }); diff --git a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx index 314244259..5a34c4686 100644 --- a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx +++ b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx @@ -33,7 +33,7 @@ export class AppColorTextBackground { @State() private colorOpacity: number = 100; - @Event() colorChange: EventEmitter; + @Event() colorChange: EventEmitter; async componentWillLoad() { await this.initCurrentColors(); @@ -99,7 +99,7 @@ export class AppColorTextBackground { this.color = null; this.colorOpacity = 100; - this.colorChange.emit(this.deck); + this.colorChange.emit(); resolve(); }); @@ -120,7 +120,7 @@ export class AppColorTextBackground { this.selectedElement.style.color = selectedColor; } - this.colorChange.emit(this.deck); + this.colorChange.emit(); resolve(); }); @@ -141,7 +141,7 @@ export class AppColorTextBackground { this.selectedElement.style.background = selectedColor; } - this.colorChange.emit(this.deck); + this.colorChange.emit(); resolve(); }); diff --git a/studio/src/app/popovers/editor/app-align/app-align.tsx b/studio/src/app/popovers/editor/app-align/app-align.tsx deleted file mode 100644 index e89064e7b..000000000 --- a/studio/src/app/popovers/editor/app-align/app-align.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import {Component, Element, h, Prop, State} from '@stencil/core'; - -import {AlignUtils, TextAlign} from '../../../utils/editor/align.utils'; - -@Component({ - tag: 'app-align', - styleUrl: 'app-align.scss', -}) -export class AppAlign { - @Element() el: HTMLElement; - - @Prop() - selectedElement: HTMLElement; - - @State() - private currentAlign: TextAlign | undefined; - - async componentWillLoad() { - this.currentAlign = await AlignUtils.getAlignment(this.selectedElement); - } - - private async closePopover(align: TextAlign) { - await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss({ - align: align, - }); - } - - private async align(align: TextAlign) { - await this.closePopover(align); - } - - render() { - return ( - - {this.renderAlign(TextAlign.LEFT, 'Align left')} - {this.renderAlign(TextAlign.CENTER, 'Align center')} - {this.renderAlign(TextAlign.RIGHT, 'Align right')} - - ); - } - - private renderAlign(align: TextAlign, text: string) { - return ( - this.align(align)} class={this.currentAlign == align ? 'active' : undefined}> - - {text} - - ); - } -} diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index b34f376c0..64eec3528 100644 --- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -5,6 +5,7 @@ import {isIPad} from '@deckdeckgo/utils'; import {TargetElement} from '../../../../utils/editor/target-element'; import {SlotType} from '../../../../utils/editor/slot-type'; import {ImageAction} from '../../../../utils/editor/image-action'; + import {ImageHelper} from '../../../../helpers/editor/image.helper'; @Component({ @@ -26,7 +27,7 @@ export class AppElementStyle { @Prop() imageHelper: ImageHelper; - @Event() styleDidChange: EventEmitter; + @Event() styleDidChange: EventEmitter; @State() private applyToTargetElement: TargetElement = TargetElement.SLIDE; @@ -99,10 +100,8 @@ export class AppElementStyle { } } - private colorChange($event: CustomEvent) { - if ($event) { - this.styleDidChange.emit($event.detail); - } + private emitStyleChange() { + this.styleDidChange.emit(); } private async onImageAction($event: CustomEvent) { @@ -137,7 +136,7 @@ export class AppElementStyle { , this.renderSelectTarget(), - this.renderColorOptions(), + this.renderStyleOptions(), ]; } @@ -157,34 +156,23 @@ export class AppElementStyle { ); } - private renderColorOptions() { + private renderStyleOptions() { if (this.applyToTargetElement === TargetElement.QR_CODE) { return ( - ) => this.colorChange($event)} - moreColors={this.moreColors}> + this.emitStyleChange()} moreColors={this.moreColors}> ); } else if (this.applyToTargetElement === TargetElement.CHART) { return ( - ) => this.colorChange($event)} - moreColors={this.moreColors}> + this.emitStyleChange()} moreColors={this.moreColors}> ); } else if (this.applyToTargetElement === TargetElement.CODE) { - return ( - ) => this.colorChange($event)} - moreColors={this.moreColors}> - ); + return this.emitStyleChange()} moreColors={this.moreColors}>; } else if (this.applyToTargetElement === TargetElement.SIDES) { return ( ) => this.colorChange($event)} + onColorChange={() => this.emitStyleChange()} moreColors={this.moreColors}> ); } else if (this.applyToTargetElement === TargetElement.BACKGROUND) { @@ -193,18 +181,19 @@ export class AppElementStyle { colorType={'background'} selectedElement={this.selectedElement} moreColors={this.moreColors} - onColorChange={($event: CustomEvent) => this.colorChange($event)}>, + onColorChange={() => this.emitStyleChange()}>, this.renderImage(), ]; } else { - return ( + return [ ) => this.colorChange($event)}> - ); + onColorChange={() => this.emitStyleChange()}>, + this.emitStyleChange()}>, + ]; } } diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index a72c40ae9..84a6cd575 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -1128,6 +1128,7 @@ declare namespace LocalJSX { 'slideCopy'?: EventEmitter; } interface AppAlign { + 'onAlignChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; } interface AppAvatar { @@ -1149,22 +1150,22 @@ declare namespace LocalJSX { } interface AppColorChart { 'moreColors'?: boolean; - 'onColorChange'?: (event: CustomEvent) => void; + 'onColorChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; } interface AppColorCode { 'moreColors'?: boolean; - 'onColorChange'?: (event: CustomEvent) => void; + 'onColorChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; } interface AppColorQrcode { 'moreColors'?: boolean; - 'onColorChange'?: (event: CustomEvent) => void; + 'onColorChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; } interface AppColorSides { 'moreColors'?: boolean; - 'onColorChange'?: (event: CustomEvent) => void; + 'onColorChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; 'template'?: 'split' | 'author'; } @@ -1172,7 +1173,7 @@ declare namespace LocalJSX { 'colorType'?: 'text' | 'background'; 'deck'?: boolean; 'moreColors'?: boolean; - 'onColorChange'?: (event: CustomEvent) => void; + 'onColorChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; 'shape'?: boolean; 'slide'?: boolean; @@ -1240,7 +1241,7 @@ declare namespace LocalJSX { interface AppElementStyle { 'imageHelper'?: ImageHelper; 'imgDidChange'?: EventEmitter; - 'onStyleDidChange'?: (event: CustomEvent) => void; + 'onStyleDidChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; 'slide'?: boolean; } From 88b53e1bbda877c8d5caae8eac43043eb6a8f883 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 09:47:43 +0200 Subject: [PATCH 11/19] style: spacing and color in expansion Signed-off-by: peterpeterparker --- studio/src/app/components/editor/app-align/app-align.scss | 2 +- studio/src/app/components/editor/app-align/app-align.tsx | 2 +- .../editor/app-expansion-panel/app-expansion-panel.scss | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/studio/src/app/components/editor/app-align/app-align.scss b/studio/src/app/components/editor/app-align/app-align.scss index 64f6b2f85..6d78ca1f6 100644 --- a/studio/src/app/components/editor/app-align/app-align.scss +++ b/studio/src/app/components/editor/app-align/app-align.scss @@ -1,5 +1,5 @@ app-align { - ion-item { + ion-item.align { --background-activated: transparent; --background-focused: transparent; --background-hover: transparent; diff --git a/studio/src/app/components/editor/app-align/app-align.tsx b/studio/src/app/components/editor/app-align/app-align.tsx index ace856b65..3b4545b3d 100644 --- a/studio/src/app/components/editor/app-align/app-align.tsx +++ b/studio/src/app/components/editor/app-align/app-align.tsx @@ -49,7 +49,7 @@ export class AppAlign { private renderAlign(align: TextAlign, text: string) { return ( - this.updateAlign(align)} class={this.align == align ? 'active' : undefined}> + this.updateAlign(align)} class={`align ${this.align == align ? 'active' : undefined}`}> {text} diff --git a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss index 2d1d893fe..a6b9b2125 100644 --- a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss +++ b/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss @@ -5,6 +5,10 @@ app-expansion-panel { > div { overflow: hidden; transition: height 0.25s ease-in; + + ion-list[class*="list"] { + padding: 0; + } } > ion-item { From 5d3ffe17a46268e58686a68769688735e8d6ba32 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 09:57:21 +0200 Subject: [PATCH 12/19] style: wording, icons and order Signed-off-by: peterpeterparker --- .../app-actions-element.tsx | 25 ++++++++++++------- .../app/popovers/editor/app-code/app-code.tsx | 2 +- .../app/popovers/editor/app-math/app-math.tsx | 2 +- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index ec1f16aaa..833ed4b51 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -1067,6 +1067,7 @@ export class AppActionsElement { {this.renderImages()} {this.renderCodeOptions()} {this.renderMathOptions()} + {this.renderTransform()} @@ -1129,9 +1130,8 @@ export class AppActionsElement { private renderEdit() { const classSlide: string | undefined = this.slide && this.isSlideEditable() ? undefined : 'hidden'; - const classToggle: string | undefined = !this.slide && !this.shape ? undefined : 'hidden'; - return [ + return ( this.slideNodeName === 'deckgo-slide-poll' @@ -1148,12 +1148,19 @@ export class AppActionsElement { class={classSlide}> Options - , + + ); + } + + private renderTransform() { + const classToggle: string | undefined = !this.slide && !this.shape ? undefined : 'hidden'; + + return ( this.openTransform()} aria-label="Toggle element type" color="primary" mode="md" class={classToggle}> Transform - , - ]; + + ); } private renderShapes() { @@ -1172,8 +1179,8 @@ export class AppActionsElement { return ( this.openCode()} aria-label="Code attributes" color="primary" mode="md" class={classSlideCode}> - - Attributes + + Options ); } @@ -1182,8 +1189,8 @@ export class AppActionsElement { return ( this.openMath()} aria-label="Math options" color="primary" mode="md" class={classSlideMath}> - - Attributes + + Options ); } diff --git a/studio/src/app/popovers/editor/app-code/app-code.tsx b/studio/src/app/popovers/editor/app-code/app-code.tsx index 64b8a13f1..f1c9d28f8 100644 --- a/studio/src/app/popovers/editor/app-code/app-code.tsx +++ b/studio/src/app/popovers/editor/app-code/app-code.tsx @@ -209,7 +209,7 @@ export class AppCode { render() { return [ -

Code attributes

+

Code options

this.closePopover()}> diff --git a/studio/src/app/popovers/editor/app-math/app-math.tsx b/studio/src/app/popovers/editor/app-math/app-math.tsx index 10ea5fa5a..d0c8d1ce6 100644 --- a/studio/src/app/popovers/editor/app-math/app-math.tsx +++ b/studio/src/app/popovers/editor/app-math/app-math.tsx @@ -122,7 +122,7 @@ export class AppMath { render() { return [ -

Math attributes

+

Math options

this.closePopover()}> From bdf015b63c9ad63f433198602b9a25f5c8bf905e Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 13:47:38 +0200 Subject: [PATCH 13/19] feat: move element transition to style Signed-off-by: peterpeterparker --- .../app-actions-element.tsx | 64 ++++++------------- .../editor/app-reveal/app-reveal.scss | 0 .../editor/app-reveal/app-reveal.tsx | 39 +++++++++++ .../app-more-element-actions.tsx | 16 ----- .../editor/app-reveal/app-reveal.scss | 9 --- .../popovers/editor/app-reveal/app-reveal.tsx | 38 ----------- .../app-element-style/app-element-style.tsx | 32 +++++++--- studio/src/assets/assets.json | 1 - studio/src/assets/icons/album.svg | 1 - studio/src/components.d.ts | 11 +++- studio/src/global/theme/popover.scss | 2 + 11 files changed, 90 insertions(+), 123 deletions(-) create mode 100644 studio/src/app/components/editor/app-reveal/app-reveal.scss create mode 100644 studio/src/app/components/editor/app-reveal/app-reveal.tsx delete mode 100644 studio/src/app/popovers/editor/app-reveal/app-reveal.scss delete mode 100644 studio/src/app/popovers/editor/app-reveal/app-reveal.tsx delete mode 100644 studio/src/assets/icons/album.svg diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index 833ed4b51..01324ad5b 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -573,7 +573,7 @@ export class AppActionsElement { await modal.present(); } - private async openSingleAction($event: UIEvent, component: 'app-reveal' | 'app-list') { + private async openSingleAction($event: UIEvent, component: 'app-list') { if (this.slide) { return; } @@ -589,9 +589,7 @@ export class AppActionsElement { }); popover.onDidDismiss().then(async (detail: OverlayEventDetail) => { - if (detail.data && component === 'app-reveal') { - await this.toggleReveal(detail.data.reveal); - } else if (detail.data && component === 'app-list') { + if (detail.data && component === 'app-list') { await this.toggleList(detail.data.list); } }); @@ -722,21 +720,6 @@ export class AppActionsElement { }); } - private toggleReveal(reveal: boolean): Promise { - return new Promise(async (resolve) => { - if (!this.selectedElement || !this.selectedElement.parentElement) { - resolve(); - return; - } - - const element: HTMLElement = await RevealSlotUtils.toggleReveal(this.selectedElement, reveal); - - await this.replaceSlot(element); - - resolve(); - }); - } - private replaceSlot(element: HTMLElement): Promise { return new Promise(async (resolve) => { if (!this.selectedElement || !this.selectedElement.parentElement || !element) { @@ -763,6 +746,17 @@ export class AppActionsElement { await this.emitChange(); } + @Listen('toggleReveal', {target: 'document'}) + async onToggleReveal($event: CustomEvent) { + if (!this.selectedElement || !this.selectedElement.parentElement || !$event) { + return; + } + + const element: HTMLElement = await RevealSlotUtils.toggleReveal(this.selectedElement, $event.detail); + + await this.replaceSlot(element); + } + private emitChange(): Promise { return new Promise((resolve) => { if (!this.selectedElement || !this.selectedElement.parentElement) { @@ -883,6 +877,10 @@ export class AppActionsElement { selectedElement: this.selectedElement, imgDidChange: this.imgDidChange, imageHelper: this.imageHelper, + code: this.code, + math: this.math, + shape: this.shape, + image: this.image, }, mode: 'md', showBackdrop: false, @@ -1025,7 +1023,6 @@ export class AppActionsElement { componentProps: { notes: this.slide, copy: this.slide || this.shape, - reveal: !this.hideReveal(), list: this.list !== undefined, }, event: $event, @@ -1040,8 +1037,6 @@ export class AppActionsElement { await this.clone(); } else if (detail.data.action === MoreAction.DELETE) { await this.confirmDeleteElement($event); - } else if (detail.data.action === MoreAction.REVEAL) { - await this.openSingleAction($event, 'app-reveal'); } else if (detail.data.action === MoreAction.LIST) { await this.openSingleAction($event, 'app-list'); } @@ -1051,10 +1046,6 @@ export class AppActionsElement { await popover.present(); } - private hideReveal(): boolean { - return this.slide || this.code || this.math || this.shape || this.slideNodeName === 'deckgo-slide-youtube'; - } - render() { return ( @@ -1062,7 +1053,6 @@ export class AppActionsElement { {this.renderStyle()} {this.renderEdit()} {this.renderShapes()} - {this.renderReveal()} {this.renderList()} {this.renderImages()} {this.renderCodeOptions()} @@ -1118,10 +1108,8 @@ export class AppActionsElement { } private renderStyle() { - const classNotImage: string | undefined = this.image ? 'hidden' : undefined; - return ( - this.openStyle()} aria-label="Style" color="primary" mode="md" class={classNotImage}> + this.openStyle()} aria-label="Style" color="primary" mode="md"> Style @@ -1206,22 +1194,6 @@ export class AppActionsElement { ); } - private renderReveal() { - const classReveal: string | undefined = this.hideReveal() ? 'hidden wider-devices' : 'wider-devices'; - - return ( - this.openSingleAction($event, 'app-reveal')} - aria-label="Edit element animation" - color="primary" - mode="md" - class={classReveal}> - - Animation - - ); - } - private renderList() { const classList: string | undefined = this.list === undefined ? 'hidden wider-devices' : 'wider-devices'; diff --git a/studio/src/app/components/editor/app-reveal/app-reveal.scss b/studio/src/app/components/editor/app-reveal/app-reveal.scss new file mode 100644 index 000000000..e69de29bb diff --git a/studio/src/app/components/editor/app-reveal/app-reveal.tsx b/studio/src/app/components/editor/app-reveal/app-reveal.tsx new file mode 100644 index 000000000..5ee0986a8 --- /dev/null +++ b/studio/src/app/components/editor/app-reveal/app-reveal.tsx @@ -0,0 +1,39 @@ +import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; + +import {SlotUtils} from '../../../utils/editor/slot.utils'; + +@Component({ + tag: 'app-reveal', + styleUrl: 'app-reveal.scss', +}) +export class AppReveal { + @Prop() + selectedElement: HTMLElement; + + @State() + private reveal: boolean = false; + + @Event() toggleReveal: EventEmitter; + + componentWillLoad() { + this.reveal = SlotUtils.isNodeReveal(this.selectedElement) || SlotUtils.isNodeRevealList(this.selectedElement); + + console.log(this.selectedElement, this.reveal); + } + + private toggle() { + this.reveal = !this.reveal; + this.toggleReveal.emit(this.reveal); + } + + render() { + return ( + + + Animate transition + this.toggle()}> + + + ); + } +} diff --git a/studio/src/app/popovers/editor/actions/app-more-element-actions/app-more-element-actions.tsx b/studio/src/app/popovers/editor/actions/app-more-element-actions/app-more-element-actions.tsx index c22e0611f..e22aec57d 100644 --- a/studio/src/app/popovers/editor/actions/app-more-element-actions/app-more-element-actions.tsx +++ b/studio/src/app/popovers/editor/actions/app-more-element-actions/app-more-element-actions.tsx @@ -14,9 +14,6 @@ export class AppMoreElementActions { @Prop() copy: boolean = false; - @Prop() - reveal: boolean = false; - @Prop() list: boolean = false; @@ -31,7 +28,6 @@ export class AppMoreElementActions {
{this.renderNotes()} {this.renderCopy()} - {this.renderReveal()} {this.renderList()} {this.renderDelete()}
@@ -74,18 +70,6 @@ export class AppMoreElementActions { ); } - private renderReveal() { - if (!this.reveal) { - return undefined; - } - - return ( - this.closePopover(MoreAction.REVEAL)} aria-label="Animation"> -

Animation

- - ); - } - private renderDelete() { return ( this.closePopover(MoreAction.DELETE)} aria-label="Delete"> diff --git a/studio/src/app/popovers/editor/app-reveal/app-reveal.scss b/studio/src/app/popovers/editor/app-reveal/app-reveal.scss deleted file mode 100644 index 3fab8a2a1..000000000 --- a/studio/src/app/popovers/editor/app-reveal/app-reveal.scss +++ /dev/null @@ -1,9 +0,0 @@ -app-reveal { - @import "../../../../global/theme/editor/editor-popover"; - - ion-item { - --background-activated: transparent; - --background-focused: transparent; - --background-hover: transparent; - } -} diff --git a/studio/src/app/popovers/editor/app-reveal/app-reveal.tsx b/studio/src/app/popovers/editor/app-reveal/app-reveal.tsx deleted file mode 100644 index 6ca63de74..000000000 --- a/studio/src/app/popovers/editor/app-reveal/app-reveal.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import {Component, Element, h, Prop, State} from '@stencil/core'; - -import {SlotUtils} from '../../../utils/editor/slot.utils'; - -@Component({ - tag: 'app-reveal', - styleUrl: 'app-reveal.scss', -}) -export class AppReveal { - @Element() el: HTMLElement; - - @Prop() - selectedElement: HTMLElement; - - @State() - private currentReveal: boolean = false; - - componentWillLoad() { - this.currentReveal = SlotUtils.isNodeReveal(this.selectedElement) || SlotUtils.isNodeRevealList(this.selectedElement); - } - - private async closePopover(reveal: boolean) { - await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss({ - reveal: reveal, - }); - } - - render() { - return ( - - - Animate transition - this.closePopover(!this.currentReveal)}> - - - ); - } -} diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index 64eec3528..9f27ddbc2 100644 --- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -27,6 +27,18 @@ export class AppElementStyle { @Prop() imageHelper: ImageHelper; + @Prop() + code: boolean = false; + + @Prop() + math: boolean = false; + + @Prop() + shape: boolean = false; + + @Prop() + image: boolean = false; + @Event() styleDidChange: EventEmitter; @State() @@ -44,18 +56,15 @@ export class AppElementStyle { @State() private poll: boolean = false; - @State() - private code: boolean = false; - - @State() - private shape: boolean = false; - @State() private author: boolean = false; @State() private split: boolean = false; + @State() + private demo: boolean = false; + async componentWillLoad() { if (this.slide) { this.qrCode = this.selectedElement && this.selectedElement.tagName && this.selectedElement.tagName.toUpperCase() === 'deckgo-slide-qrcode'.toUpperCase(); @@ -65,8 +74,7 @@ export class AppElementStyle { this.split = this.selectedElement && this.selectedElement.tagName && this.selectedElement.tagName.toUpperCase() === 'deckgo-slide-split'.toUpperCase(); } - this.code = this.selectedElement && this.selectedElement.nodeName && this.selectedElement.nodeName.toLocaleLowerCase() === SlotType.CODE; - this.shape = this.selectedElement && this.selectedElement.nodeName && this.selectedElement.nodeName.toLocaleLowerCase() === SlotType.DRAG_RESIZE_ROTATE; + this.demo = this.selectedElement && this.selectedElement.nodeName && this.selectedElement.nodeName.toLocaleLowerCase() === SlotType.DEMO; // prettier-ignore this.applyToTargetElement = this.code ? TargetElement.CODE : (this.qrCode || this.poll ? TargetElement.QR_CODE : (this.chart ? TargetElement.CHART : (this.author || this.split ? TargetElement.SIDES : TargetElement.SLIDE))); @@ -141,17 +149,19 @@ export class AppElementStyle { } private renderSelectTarget() { - const elementTarget: boolean = !this.slide && !this.shape; + const elementTarget: boolean = !this.slide && !this.shape && !this.image; + const transition: boolean = !this.slide && !this.code && !this.math && !this.shape && !this.demo; return ( ) => this.selectApplyToTargetElement($event)}> ); } @@ -184,6 +194,8 @@ export class AppElementStyle { onColorChange={() => this.emitStyleChange()}>, this.renderImage(), ]; + } else if (this.applyToTargetElement === TargetElement.TRANSITION) { + return this.closePopover()}>; } else { return [ \ No newline at end of file diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 84a6cd575..2d59e4fa3 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -186,9 +186,13 @@ export namespace Components { } interface AppElementDelete {} interface AppElementStyle { + 'code': boolean; + 'image': boolean; 'imageHelper': ImageHelper; 'imgDidChange': EventEmitter; + 'math': boolean; 'selectedElement': HTMLElement; + 'shape': boolean; 'slide': boolean; } interface AppEmbed {} @@ -251,7 +255,6 @@ export namespace Components { 'copy': boolean; 'list': boolean; 'notes': boolean; - 'reveal': boolean; } interface AppMoreShareOptions {} interface AppNavigation { @@ -1239,10 +1242,14 @@ declare namespace LocalJSX { } interface AppElementDelete {} interface AppElementStyle { + 'code'?: boolean; + 'image'?: boolean; 'imageHelper'?: ImageHelper; 'imgDidChange'?: EventEmitter; + 'math'?: boolean; 'onStyleDidChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; + 'shape'?: boolean; 'slide'?: boolean; } interface AppEmbed {} @@ -1316,7 +1323,6 @@ declare namespace LocalJSX { 'copy'?: boolean; 'list'?: boolean; 'notes'?: boolean; - 'reveal'?: boolean; } interface AppMoreShareOptions {} interface AppNavigation { @@ -1368,6 +1374,7 @@ declare namespace LocalJSX { interface AppRemoteConnect {} interface AppRemoteRequest {} interface AppReveal { + 'onToggleReveal'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; } interface AppRoot {} diff --git a/studio/src/global/theme/popover.scss b/studio/src/global/theme/popover.scss index 4b330a61a..0c331f4bb 100644 --- a/studio/src/global/theme/popover.scss +++ b/studio/src/global/theme/popover.scss @@ -14,6 +14,8 @@ ion-popover.popover-menu { --max-width: 100%; } + --width: 284px; + div.popover-content { top: 0 !important; left: inherit !important; From a7b8978db17dc0374db9ef33b6206c5d97b84719 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 14:11:55 +0200 Subject: [PATCH 14/19] feat: move image alignment and size to style Signed-off-by: peterpeterparker --- .../app-actions-element.tsx | 1 - .../components/editor/app-image/app-image.tsx | 190 ---------------- .../app-select-target-element.tsx | 18 ++ .../app-image-style/app-image-style.tsx | 206 ++++++++++++++++++ .../app-image-element/app-image-element.tsx | 17 +- .../style/app-deck-style/app-deck-style.tsx | 16 +- .../app-element-style/app-element-style.tsx | 26 ++- .../src/app/utils/editor/target-element.tsx | 3 +- studio/src/components.d.ts | 22 +- 9 files changed, 267 insertions(+), 232 deletions(-) create mode 100644 studio/src/app/components/editor/styles/app-image-style/app-image-style.tsx diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index 01324ad5b..e9eb9df84 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -541,7 +541,6 @@ export class AppActionsElement { componentProps: { selectedElement: this.selectedElement, slide: this.slide, - imgDidChange: this.imgDidChange, }, mode: 'md', showBackdrop: false, diff --git a/studio/src/app/components/editor/app-image/app-image.tsx b/studio/src/app/components/editor/app-image/app-image.tsx index 137c4f2c5..e3d554690 100644 --- a/studio/src/app/components/editor/app-image/app-image.tsx +++ b/studio/src/app/components/editor/app-image/app-image.tsx @@ -7,19 +7,6 @@ import {ImageAction} from '../../../utils/editor/image-action'; import {ImageHistoryService} from '../../../services/editor/image-history/image-history.service'; -enum ImageSize { - SMALL = '25%', - MEDIUM = '50%', - LARGE = '75%', - ORIGINAL = '100%', -} - -enum ImageAlignment { - START = 'flex-start', - CENTER = 'center', - END = 'flex-end', -} - @Component({ tag: 'app-image', styleUrl: 'app-image.scss', @@ -29,8 +16,6 @@ export class AppImage { @Event() private action: EventEmitter; - @Event() private imgDidChange: EventEmitter; - @Prop() selectedElement: HTMLElement; @@ -51,12 +36,6 @@ export class AppImage { @State() private imagesHistoryEven: (UnsplashPhoto | TenorGif | StorageFile)[]; - @State() - private currentImageSize: ImageSize; - - @State() - private currentImageAlignment: ImageAlignment; - @State() private navigatorOnline: boolean = navigator.onLine; @@ -66,9 +45,6 @@ export class AppImage { async componentWillLoad() { await this.initImagesHistory(); - - this.currentImageSize = await this.initImageSize(); - this.currentImageAlignment = await this.initImageAlignment(); } private initImagesHistory(): Promise { @@ -87,65 +63,6 @@ export class AppImage { }); } - private initImageSize(): Promise { - return new Promise((resolve) => { - if (!this.selectedElement || !this.selectedElement.style) { - resolve(null); - return; - } - - if (this.selectedElement.style.getPropertyValue('--deckgo-lazy-img-height') === '25%') { - resolve(ImageSize.SMALL); - } else if (this.selectedElement.style.getPropertyValue('--deckgo-lazy-img-height') === '50%') { - resolve(ImageSize.MEDIUM); - } else if (this.selectedElement.style.getPropertyValue('--deckgo-lazy-img-height') === '75%') { - resolve(ImageSize.LARGE); - } else { - resolve(ImageSize.ORIGINAL); - } - }); - } - - private initImageAlignment(): Promise { - return new Promise(async (resolve) => { - if (!this.selectedElement || !this.selectedElement.style) { - resolve(null); - return; - } - - if (this.selectedElement.style.getPropertyValue('justify-content') === 'center') { - resolve(ImageAlignment.CENTER); - } else if (this.selectedElement.style.getPropertyValue('justify-content') === 'flex-end') { - resolve(ImageAlignment.END); - } else if (this.selectedElement.style.getPropertyValue('justify-content') === 'flex-start') { - resolve(ImageAlignment.START); - } else { - const result: ImageAlignment = await this.findSlideDefaultAlignment(); - resolve(result); - } - }); - } - - private findSlideDefaultAlignment(): Promise { - return new Promise((resolve) => { - const parent: HTMLElement = this.selectedElement.parentElement; - - if (parent && parent.nodeName && parent.nodeName.toLowerCase().indexOf('deckgo-slide') > -1) { - const container: HTMLElement = parent.shadowRoot.querySelector('.deckgo-slide'); - if (container) { - const style: CSSStyleDeclaration = window.getComputedStyle(container); - - if (style && style.alignItems === 'center') { - resolve(ImageAlignment.CENTER); - return; - } - } - } - - resolve(ImageAlignment.START); - }); - } - private async selectAction(action: EditAction, image?: UnsplashPhoto | TenorGif | StorageFile) { const data: ImageAction = { action: action, @@ -180,63 +97,11 @@ export class AppImage { return await alert.present(); } - private toggleImageSize($event: CustomEvent): Promise { - return new Promise(async (resolve) => { - if (!$event || !$event.detail) { - resolve(); - return; - } - - this.currentImageSize = $event.detail.value; - - if (!this.selectedElement) { - resolve(); - return; - } - - if (this.currentImageSize === ImageSize.ORIGINAL) { - this.selectedElement.style.removeProperty('--deckgo-lazy-img-height'); - } else { - this.selectedElement.style.setProperty('--deckgo-lazy-img-height', this.currentImageSize); - } - - this.imgDidChange.emit(this.selectedElement); - - resolve(); - }); - } - - private toggleImageAlignment($event: CustomEvent): Promise { - return new Promise(async (resolve) => { - if (!$event || !$event.detail) { - resolve(); - return; - } - - this.currentImageAlignment = $event.detail.value; - - if (!this.selectedElement) { - resolve(); - return; - } - - this.selectedElement.style.setProperty('display', 'inline-flex'); - this.selectedElement.style.setProperty('justify-content', this.currentImageAlignment); - - this.imgDidChange.emit(this.selectedElement); - - resolve(); - }); - } - render() { return ( Image - {this.renderImageSize()} - {this.renderImageAlignment()} - {this.renderStockPhotos()} {this.renderGif()} @@ -331,59 +196,4 @@ export class AppImage { ); } } - - private renderImageSize() { - if (this.deck || this.slide) { - return undefined; - } else { - return [ - - Size - , - - - Size - - this.toggleImageSize(e)} - class="ion-padding-start ion-padding-end"> - Small - Medium - Large - Original - - , - ]; - } - } - - private renderImageAlignment() { - if (this.deck || this.slide) { - return undefined; - } else { - return [ - - Alignment - , - - - Alignment - - this.toggleImageAlignment(e)} - interface="popover" - mode="md" - class="ion-padding-start ion-padding-end"> - Start - Center - End - - , - ]; - } - } } diff --git a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx index ddadf8f16..baded3f67 100644 --- a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx +++ b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx @@ -41,6 +41,9 @@ export class AppSelectTargetElement { @Prop() images: boolean = false; + @Prop() + image: boolean = false; + @Event() applyTo: EventEmitter; @@ -53,6 +56,8 @@ export class AppSelectTargetElement { render() { const selectedValue: TargetElement = this.code ? TargetElement.CODE + : this.image + ? TargetElement.IMAGE : this.textTarget ? TargetElement.TEXT : this.sides @@ -74,6 +79,7 @@ export class AppSelectTargetElement { {this.renderSides()} {this.renderSlide()} {this.renderCode()} + {this.renderImage()} {this.renderText()} {this.renderBackground()} {this.renderFonts()} @@ -156,6 +162,18 @@ export class AppSelectTargetElement { } } + private renderImage() { + if (this.image) { + return ( + + Image + + ); + } else { + return undefined; + } + } + private renderTransition() { if (this.transition) { return ( diff --git a/studio/src/app/components/editor/styles/app-image-style/app-image-style.tsx b/studio/src/app/components/editor/styles/app-image-style/app-image-style.tsx new file mode 100644 index 000000000..9febde947 --- /dev/null +++ b/studio/src/app/components/editor/styles/app-image-style/app-image-style.tsx @@ -0,0 +1,206 @@ +import {Component, Element, Prop, State, h, EventEmitter, Event} from '@stencil/core'; + +enum ImageSize { + SMALL = '25%', + MEDIUM = '50%', + LARGE = '75%', + ORIGINAL = '100%', +} + +enum ImageAlignment { + START = 'flex-start', + CENTER = 'center', + END = 'flex-end', +} + +@Component({ + tag: 'app-image-style', +}) +export class AppImageStyle { + @Element() el: HTMLElement; + + @Event() private imgDidChange: EventEmitter; + + @Prop() + selectedElement: HTMLElement; + + @State() + private currentImageSize: ImageSize; + + @State() + private currentImageAlignment: ImageAlignment; + + async componentWillLoad() { + this.currentImageSize = await this.initImageSize(); + this.currentImageAlignment = await this.initImageAlignment(); + } + + private initImageSize(): Promise { + return new Promise((resolve) => { + if (!this.selectedElement || !this.selectedElement.style) { + resolve(null); + return; + } + + if (this.selectedElement.style.getPropertyValue('--deckgo-lazy-img-height') === '25%') { + resolve(ImageSize.SMALL); + } else if (this.selectedElement.style.getPropertyValue('--deckgo-lazy-img-height') === '50%') { + resolve(ImageSize.MEDIUM); + } else if (this.selectedElement.style.getPropertyValue('--deckgo-lazy-img-height') === '75%') { + resolve(ImageSize.LARGE); + } else { + resolve(ImageSize.ORIGINAL); + } + }); + } + + private initImageAlignment(): Promise { + return new Promise(async (resolve) => { + if (!this.selectedElement || !this.selectedElement.style) { + resolve(null); + return; + } + + if (this.selectedElement.style.getPropertyValue('justify-content') === 'center') { + resolve(ImageAlignment.CENTER); + } else if (this.selectedElement.style.getPropertyValue('justify-content') === 'flex-end') { + resolve(ImageAlignment.END); + } else if (this.selectedElement.style.getPropertyValue('justify-content') === 'flex-start') { + resolve(ImageAlignment.START); + } else { + const result: ImageAlignment = await this.findSlideDefaultAlignment(); + resolve(result); + } + }); + } + + private findSlideDefaultAlignment(): Promise { + return new Promise((resolve) => { + const parent: HTMLElement = this.selectedElement.parentElement; + + if (parent && parent.nodeName && parent.nodeName.toLowerCase().indexOf('deckgo-slide') > -1) { + const container: HTMLElement = parent.shadowRoot.querySelector('.deckgo-slide'); + if (container) { + const style: CSSStyleDeclaration = window.getComputedStyle(container); + + if (style && style.alignItems === 'center') { + resolve(ImageAlignment.CENTER); + return; + } + } + } + + resolve(ImageAlignment.START); + }); + } + + private toggleImageSize($event: CustomEvent): Promise { + return new Promise(async (resolve) => { + if (!$event || !$event.detail) { + resolve(); + return; + } + + this.currentImageSize = $event.detail.value; + + if (!this.selectedElement) { + resolve(); + return; + } + + if (this.currentImageSize === ImageSize.ORIGINAL) { + this.selectedElement.style.removeProperty('--deckgo-lazy-img-height'); + } else { + this.selectedElement.style.setProperty('--deckgo-lazy-img-height', this.currentImageSize); + } + + this.imgDidChange.emit(this.selectedElement); + + resolve(); + }); + } + + private toggleImageAlignment($event: CustomEvent): Promise { + return new Promise(async (resolve) => { + if (!$event || !$event.detail) { + resolve(); + return; + } + + this.currentImageAlignment = $event.detail.value; + + if (!this.selectedElement) { + resolve(); + return; + } + + this.selectedElement.style.setProperty('display', 'inline-flex'); + this.selectedElement.style.setProperty('justify-content', this.currentImageAlignment); + + this.imgDidChange.emit(this.selectedElement); + + resolve(); + }); + } + + render() { + return ( + + Image + + {this.renderImageSize()} + {this.renderImageAlignment()} + + + ); + } + + private renderImageSize() { + return [ + + Size + , + + + Size + + this.toggleImageSize(e)} + interface="popover" + mode="md" + class="ion-padding-start ion-padding-end"> + Small + Medium + Large + Original + + , + ]; + } + + private renderImageAlignment() { + return [ + + Alignment + , + + + Alignment + + this.toggleImageAlignment(e)} + interface="popover" + mode="md" + class="ion-padding-start ion-padding-end"> + Start + Center + End + + , + ]; + } +} diff --git a/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx b/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx index 94c1ad329..49cd36b75 100644 --- a/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx +++ b/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx @@ -1,4 +1,4 @@ -import {Component, Element, Prop, h, EventEmitter} from '@stencil/core'; +import {Component, Element, Prop, h} from '@stencil/core'; import {ImageAction} from '../../../utils/editor/image-action'; @@ -15,19 +15,10 @@ export class AppImageElement { @Prop() slide: boolean = false; - @Prop() - imgDidChange: EventEmitter; - private async closePopoverWithoutResults() { await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss(); } - private onImgDidChange($event: CustomEvent) { - if ($event && $event.detail) { - this.imgDidChange.emit($event.detail); - } - } - private async onAction($event: CustomEvent) { if ($event && $event.detail) { await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss($event.detail); @@ -42,11 +33,7 @@ export class AppImageElement { , - ) => this.onAction($event)} - onImgDidChange={($event: CustomEvent) => this.onImgDidChange($event)}>, + ) => this.onAction($event)}>, ]; } } diff --git a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx index 256e7cf9f..dbfc14a38 100644 --- a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx +++ b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx @@ -1,4 +1,4 @@ -import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core'; +import {Component, Element, EventEmitter, h, Prop, State} from '@stencil/core'; import {isIPad} from '@deckdeckgo/utils'; @@ -33,8 +33,6 @@ export class AppDeck { private imageHelper: ImageHelper; - @Event() private imgDidChange: EventEmitter; - async componentWillLoad() { this.moreColors = !isIPad(); @@ -77,12 +75,6 @@ export class AppDeck { } } - private onImgDidChange($event: CustomEvent) { - if ($event && $event.detail) { - this.imgDidChange.emit($event.detail); - } - } - render() { return [ @@ -119,11 +111,7 @@ export class AppDeck { moreColors={this.moreColors} deck={true} onColorChange={() => this.onColorChange()}>, - ) => this.onImageAction($event)} - onImgDidChange={($event: CustomEvent) => this.onImgDidChange($event)}>, + ) => this.onImageAction($event)}>, ]; } else if (this.applyToTargetElement === TargetElement.TRANSITION) { return this.onTransitionChange()}>; diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index 9f27ddbc2..06c6aa5db 100644 --- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -76,8 +76,17 @@ export class AppElementStyle { this.demo = this.selectedElement && this.selectedElement.nodeName && this.selectedElement.nodeName.toLocaleLowerCase() === SlotType.DEMO; - // prettier-ignore - this.applyToTargetElement = this.code ? TargetElement.CODE : (this.qrCode || this.poll ? TargetElement.QR_CODE : (this.chart ? TargetElement.CHART : (this.author || this.split ? TargetElement.SIDES : TargetElement.SLIDE))); + this.applyToTargetElement = this.image + ? TargetElement.IMAGE + : this.code + ? TargetElement.CODE + : this.qrCode || this.poll + ? TargetElement.QR_CODE + : this.chart + ? TargetElement.CHART + : this.author || this.split + ? TargetElement.SIDES + : TargetElement.SLIDE; this.moreColors = !isIPad(); } @@ -160,6 +169,7 @@ export class AppElementStyle { qrCode={this.qrCode || this.poll} chart={this.chart || this.poll} code={this.code} + image={this.image} sides={this.author || this.split} transition={transition} onApplyTo={($event: CustomEvent) => this.selectApplyToTargetElement($event)}> @@ -196,6 +206,12 @@ export class AppElementStyle { ]; } else if (this.applyToTargetElement === TargetElement.TRANSITION) { return this.closePopover()}>; + } else if (this.applyToTargetElement === TargetElement.IMAGE) { + return ( + ) => this.onImgDidChange($event)}> + ); } else { return [ ) => this.onImageAction($event)} - onImgDidChange={($event: CustomEvent) => this.onImgDidChange($event)}> + ) => this.onImageAction($event)}> ); } } diff --git a/studio/src/app/utils/editor/target-element.tsx b/studio/src/app/utils/editor/target-element.tsx index 121421d62..2de21da57 100644 --- a/studio/src/app/utils/editor/target-element.tsx +++ b/studio/src/app/utils/editor/target-element.tsx @@ -10,5 +10,6 @@ export enum TargetElement { SIDES = 'sides', FONTS = 'fonts', SHAPES = 'shapes', - IMAGES = 'shape', + IMAGES = 'images', + IMAGE = 'image', } diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 2d59e4fa3..c5e13f433 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -228,10 +228,12 @@ export namespace Components { 'imagesOdd': (UnsplashPhoto | TenorGif | StorageFile)[]; } interface AppImageElement { - 'imgDidChange': EventEmitter; 'selectedElement': HTMLElement; 'slide': boolean; } + interface AppImageStyle { + 'selectedElement': HTMLElement; + } interface AppInactivity { 'fullscreen': boolean; } @@ -310,6 +312,7 @@ export namespace Components { 'chart': boolean; 'code': boolean; 'fonts': boolean; + 'image': boolean; 'images': boolean; 'qrCode': boolean; 'shapes': boolean; @@ -673,6 +676,12 @@ declare global { new (): HTMLAppImageElementElement; }; + interface HTMLAppImageStyleElement extends Components.AppImageStyle, HTMLStencilElement {} + var HTMLAppImageStyleElement: { + prototype: HTMLAppImageStyleElement; + new (): HTMLAppImageStyleElement; + }; + interface HTMLAppInactivityElement extends Components.AppInactivity, HTMLStencilElement {} var HTMLAppInactivityElement: { prototype: HTMLAppInactivityElement; @@ -1020,6 +1029,7 @@ declare global { 'app-image': HTMLAppImageElement; 'app-image-columns': HTMLAppImageColumnsElement; 'app-image-element': HTMLAppImageElementElement; + 'app-image-style': HTMLAppImageStyleElement; 'app-inactivity': HTMLAppInactivityElement; 'app-landing': HTMLAppLandingElement; 'app-landing-content': HTMLAppLandingContentElement; @@ -1204,7 +1214,6 @@ declare namespace LocalJSX { interface AppDeckStyle { 'blockSlide'?: EventEmitter; 'deckDidChange'?: EventEmitter; - 'onImgDidChange'?: (event: CustomEvent) => void; 'signIn'?: EventEmitter; } interface AppDeckTransition { @@ -1285,7 +1294,6 @@ declare namespace LocalJSX { 'deck'?: boolean; 'deleteBackground'?: boolean; 'onAction'?: (event: CustomEvent) => void; - 'onImgDidChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; 'slide'?: boolean; } @@ -1295,10 +1303,13 @@ declare namespace LocalJSX { 'onSelectImage'?: (event: CustomEvent) => void; } interface AppImageElement { - 'imgDidChange'?: EventEmitter; 'selectedElement'?: HTMLElement; 'slide'?: boolean; } + interface AppImageStyle { + 'onImgDidChange'?: (event: CustomEvent) => void; + 'selectedElement'?: HTMLElement; + } interface AppInactivity { 'fullscreen'?: boolean; 'onMouseInactivity'?: (event: CustomEvent) => void; @@ -1383,6 +1394,7 @@ declare namespace LocalJSX { 'chart'?: boolean; 'code'?: boolean; 'fonts'?: boolean; + 'image'?: boolean; 'images'?: boolean; 'onApplyTo'?: (event: CustomEvent) => void; 'qrCode'?: boolean; @@ -1482,6 +1494,7 @@ declare namespace LocalJSX { 'app-image': AppImage; 'app-image-columns': AppImageColumns; 'app-image-element': AppImageElement; + 'app-image-style': AppImageStyle; 'app-inactivity': AppInactivity; 'app-landing': AppLanding; 'app-landing-content': AppLandingContent; @@ -1593,6 +1606,7 @@ declare module "@stencil/core" { 'app-image': LocalJSX.AppImage & JSXBase.HTMLAttributes; 'app-image-columns': LocalJSX.AppImageColumns & JSXBase.HTMLAttributes; 'app-image-element': LocalJSX.AppImageElement & JSXBase.HTMLAttributes; + 'app-image-style': LocalJSX.AppImageStyle & JSXBase.HTMLAttributes; 'app-inactivity': LocalJSX.AppInactivity & JSXBase.HTMLAttributes; 'app-landing': LocalJSX.AppLanding & JSXBase.HTMLAttributes; 'app-landing-content': LocalJSX.AppLandingContent & JSXBase.HTMLAttributes; From 65d525e61ddfd3eb00d15bfc3d8a96afd1f9594a Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 14:15:54 +0200 Subject: [PATCH 15/19] refactor: group style components in a package Signed-off-by: peterpeterparker --- .../app-expansion-panel/app-expansion-panel.scss | 0 .../app-expansion-panel/app-expansion-panel.tsx | 0 .../editor/{ => styles}/app-image/app-image.scss | 0 .../editor/{ => styles}/app-image/app-image.tsx | 6 +++--- .../{ => styles/deck}/app-deck-fonts/app-deck-fonts.scss | 0 .../{ => styles/deck}/app-deck-fonts/app-deck-fonts.tsx | 9 +++------ .../deck}/app-deck-transition/app-deck-transition.scss | 0 .../deck}/app-deck-transition/app-deck-transition.tsx | 2 +- .../editor/{ => styles/element}/app-align/app-align.scss | 0 .../editor/{ => styles/element}/app-align/app-align.tsx | 2 +- .../{ => element}/app-image-style/app-image-style.tsx | 0 .../{ => styles/element}/app-reveal/app-reveal.scss | 0 .../{ => styles/element}/app-reveal/app-reveal.tsx | 2 +- 13 files changed, 9 insertions(+), 12 deletions(-) rename studio/src/app/components/editor/{ => styles}/app-expansion-panel/app-expansion-panel.scss (100%) rename studio/src/app/components/editor/{ => styles}/app-expansion-panel/app-expansion-panel.tsx (100%) rename studio/src/app/components/editor/{ => styles}/app-image/app-image.scss (100%) rename studio/src/app/components/editor/{ => styles}/app-image/app-image.tsx (95%) rename studio/src/app/components/editor/{ => styles/deck}/app-deck-fonts/app-deck-fonts.scss (100%) rename studio/src/app/components/editor/{ => styles/deck}/app-deck-fonts/app-deck-fonts.tsx (90%) rename studio/src/app/components/editor/{ => styles/deck}/app-deck-transition/app-deck-transition.scss (100%) rename studio/src/app/components/editor/{ => styles/deck}/app-deck-transition/app-deck-transition.tsx (98%) rename studio/src/app/components/editor/{ => styles/element}/app-align/app-align.scss (100%) rename studio/src/app/components/editor/{ => styles/element}/app-align/app-align.tsx (94%) rename studio/src/app/components/editor/styles/{ => element}/app-image-style/app-image-style.tsx (100%) rename studio/src/app/components/editor/{ => styles/element}/app-reveal/app-reveal.scss (100%) rename studio/src/app/components/editor/{ => styles/element}/app-reveal/app-reveal.tsx (93%) diff --git a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss b/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.scss similarity index 100% rename from studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.scss rename to studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.scss diff --git a/studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx b/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx similarity index 100% rename from studio/src/app/components/editor/app-expansion-panel/app-expansion-panel.tsx rename to studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx diff --git a/studio/src/app/components/editor/app-image/app-image.scss b/studio/src/app/components/editor/styles/app-image/app-image.scss similarity index 100% rename from studio/src/app/components/editor/app-image/app-image.scss rename to studio/src/app/components/editor/styles/app-image/app-image.scss diff --git a/studio/src/app/components/editor/app-image/app-image.tsx b/studio/src/app/components/editor/styles/app-image/app-image.tsx similarity index 95% rename from studio/src/app/components/editor/app-image/app-image.tsx rename to studio/src/app/components/editor/styles/app-image/app-image.tsx index e3d554690..288dc9705 100644 --- a/studio/src/app/components/editor/app-image/app-image.tsx +++ b/studio/src/app/components/editor/styles/app-image/app-image.tsx @@ -2,10 +2,10 @@ import {Component, Element, Prop, State, h, EventEmitter, Event} from '@stencil/ import {alertController} from '@ionic/core'; -import {EditAction} from '../../../utils/editor/edit-action'; -import {ImageAction} from '../../../utils/editor/image-action'; +import {EditAction} from '../../../../utils/editor/edit-action'; +import {ImageAction} from '../../../../utils/editor/image-action'; -import {ImageHistoryService} from '../../../services/editor/image-history/image-history.service'; +import {ImageHistoryService} from '../../../../services/editor/image-history/image-history.service'; @Component({ tag: 'app-image', diff --git a/studio/src/app/components/editor/app-deck-fonts/app-deck-fonts.scss b/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.scss similarity index 100% rename from studio/src/app/components/editor/app-deck-fonts/app-deck-fonts.scss rename to studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.scss diff --git a/studio/src/app/components/editor/app-deck-fonts/app-deck-fonts.tsx b/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx similarity index 90% rename from studio/src/app/components/editor/app-deck-fonts/app-deck-fonts.tsx rename to studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx index 39489c5d3..d0115b50f 100644 --- a/studio/src/app/components/editor/app-deck-fonts/app-deck-fonts.tsx +++ b/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx @@ -1,10 +1,10 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; -import {FontsService} from '../../../services/editor/fonts/fonts.service'; +import {FontsService} from '../../../../../services/editor/fonts/fonts.service'; @Component({ tag: 'app-deck-fonts', - styleUrl: 'app-deck-fonts.scss' + styleUrl: 'app-deck-fonts.scss', }) export class AppDeckFonts { @Prop() @@ -38,10 +38,7 @@ export class AppDeckFonts { return; } - this.selectedFont = this.deckElement.style - .getPropertyValue('font-family') - .replace(/\'/g, '') - .replace(/"/g, ''); + this.selectedFont = this.deckElement.style.getPropertyValue('font-family').replace(/\'/g, '').replace(/"/g, ''); resolve(); }); diff --git a/studio/src/app/components/editor/app-deck-transition/app-deck-transition.scss b/studio/src/app/components/editor/styles/deck/app-deck-transition/app-deck-transition.scss similarity index 100% rename from studio/src/app/components/editor/app-deck-transition/app-deck-transition.scss rename to studio/src/app/components/editor/styles/deck/app-deck-transition/app-deck-transition.scss diff --git a/studio/src/app/components/editor/app-deck-transition/app-deck-transition.tsx b/studio/src/app/components/editor/styles/deck/app-deck-transition/app-deck-transition.tsx similarity index 98% rename from studio/src/app/components/editor/app-deck-transition/app-deck-transition.tsx rename to studio/src/app/components/editor/styles/deck/app-deck-transition/app-deck-transition.tsx index 6a02266cf..fea1a0f48 100644 --- a/studio/src/app/components/editor/app-deck-transition/app-deck-transition.tsx +++ b/studio/src/app/components/editor/styles/deck/app-deck-transition/app-deck-transition.tsx @@ -4,7 +4,7 @@ import {interval, Subscription} from 'rxjs'; @Component({ tag: 'app-deck-transition', - styleUrl: 'app-deck-transition.scss' + styleUrl: 'app-deck-transition.scss', }) export class AppDeckTransition { @Element() el: HTMLElement; diff --git a/studio/src/app/components/editor/app-align/app-align.scss b/studio/src/app/components/editor/styles/element/app-align/app-align.scss similarity index 100% rename from studio/src/app/components/editor/app-align/app-align.scss rename to studio/src/app/components/editor/styles/element/app-align/app-align.scss diff --git a/studio/src/app/components/editor/app-align/app-align.tsx b/studio/src/app/components/editor/styles/element/app-align/app-align.tsx similarity index 94% rename from studio/src/app/components/editor/app-align/app-align.tsx rename to studio/src/app/components/editor/styles/element/app-align/app-align.tsx index 3b4545b3d..641b9c823 100644 --- a/studio/src/app/components/editor/app-align/app-align.tsx +++ b/studio/src/app/components/editor/styles/element/app-align/app-align.tsx @@ -1,6 +1,6 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; -import {AlignUtils, TextAlign} from '../../../utils/editor/align.utils'; +import {AlignUtils, TextAlign} from '../../../../../utils/editor/align.utils'; @Component({ tag: 'app-align', diff --git a/studio/src/app/components/editor/styles/app-image-style/app-image-style.tsx b/studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx similarity index 100% rename from studio/src/app/components/editor/styles/app-image-style/app-image-style.tsx rename to studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx diff --git a/studio/src/app/components/editor/app-reveal/app-reveal.scss b/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.scss similarity index 100% rename from studio/src/app/components/editor/app-reveal/app-reveal.scss rename to studio/src/app/components/editor/styles/element/app-reveal/app-reveal.scss diff --git a/studio/src/app/components/editor/app-reveal/app-reveal.tsx b/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx similarity index 93% rename from studio/src/app/components/editor/app-reveal/app-reveal.tsx rename to studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx index 5ee0986a8..e43663287 100644 --- a/studio/src/app/components/editor/app-reveal/app-reveal.tsx +++ b/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx @@ -1,6 +1,6 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; -import {SlotUtils} from '../../../utils/editor/slot.utils'; +import {SlotUtils} from '../../../../../utils/editor/slot.utils'; @Component({ tag: 'app-reveal', From 34d7e556c343806d249b20dc9c526992656e60e3 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 14:53:29 +0200 Subject: [PATCH 16/19] feat: list in style Signed-off-by: peterpeterparker --- .../app-actions-element.tsx | 103 ++++++------------ .../styles/element}/app-list/app-list.scss | 8 +- .../styles/element/app-list/app-list.tsx | 46 ++++++++ .../app-more-element-actions.tsx | 16 --- .../app/popovers/editor/app-list/app-list.tsx | 48 -------- .../app-element-style/app-element-style.tsx | 17 +++ studio/src/components.d.ts | 9 +- 7 files changed, 103 insertions(+), 144 deletions(-) rename studio/src/app/{popovers/editor => components/editor/styles/element}/app-list/app-list.scss (73%) create mode 100644 studio/src/app/components/editor/styles/element/app-list/app-list.tsx delete mode 100644 studio/src/app/popovers/editor/app-list/app-list.tsx diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index e9eb9df84..3c43b7a22 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -15,7 +15,6 @@ import {ToggleSlotUtils} from '../../../../../utils/editor/toggle-slot.utils'; import {RevealSlotUtils} from '../../../../../utils/editor/reveal-slot.utils'; import {SlotType} from '../../../../../utils/editor/slot-type'; import {SlotUtils} from '../../../../../utils/editor/slot.utils'; -import {ListUtils} from '../../../../../utils/editor/list.utils'; import {EditAction} from '../../../../../utils/editor/edit-action'; import {MoreAction} from '../../../../../utils/editor/more-action'; @@ -60,9 +59,6 @@ export class AppActionsElement { @State() private shape: boolean = false; - @State() - private list: SlotType.OL | SlotType.UL | undefined; - @Event() private blockSlide: EventEmitter; @Event() private slideDelete: EventEmitter; @@ -145,6 +141,36 @@ export class AppActionsElement { await this.blurSelectedElement(); } + @Listen('pagerClick', {target: 'document'}) + async onPagerClick() { + await this.reset(); + } + + @Listen('styleDidChange', {target: 'document'}) + async onStyleDidChange() { + await this.emitChange(); + } + + @Listen('toggleReveal', {target: 'document'}) + async onToggleReveal($event: CustomEvent) { + if (!this.selectedElement || !this.selectedElement.parentElement || !$event) { + return; + } + + const element: HTMLElement = await RevealSlotUtils.toggleReveal(this.selectedElement, $event.detail); + + await this.replaceSlot(element); + } + + @Listen('toggleList', {target: 'document'}) + async onToggleList($event: CustomEvent) { + if (!$event) { + return; + } + + await this.toggleList($event.detail); + } + @Method() touch(element: HTMLElement, autoOpen: boolean = true): Promise { return new Promise(async (resolve) => { @@ -344,11 +370,6 @@ export class AppActionsElement { }); } - @Listen('pagerClick', {target: 'document'}) - async onPagerClick() { - await this.reset(); - } - @Method() async reset() { await this.initSelectedElement(null); @@ -572,30 +593,6 @@ export class AppActionsElement { await modal.present(); } - private async openSingleAction($event: UIEvent, component: 'app-list') { - if (this.slide) { - return; - } - - const popover: HTMLIonPopoverElement = await popoverController.create({ - component: component, - componentProps: { - selectedElement: this.selectedElement, - }, - mode: 'ios', - event: $event, - cssClass: 'info', - }); - - popover.onDidDismiss().then(async (detail: OverlayEventDetail) => { - if (detail.data && component === 'app-list') { - await this.toggleList(detail.data.list); - } - }); - - await popover.present(); - } - private async openCode() { if (!this.code) { return; @@ -740,22 +737,6 @@ export class AppActionsElement { }); } - @Listen('styleDidChange', {target: 'document'}) - async onStyleDidChange() { - await this.emitChange(); - } - - @Listen('toggleReveal', {target: 'document'}) - async onToggleReveal($event: CustomEvent) { - if (!this.selectedElement || !this.selectedElement.parentElement || !$event) { - return; - } - - const element: HTMLElement = await RevealSlotUtils.toggleReveal(this.selectedElement, $event.detail); - - await this.replaceSlot(element); - } - private emitChange(): Promise { return new Promise((resolve) => { if (!this.selectedElement || !this.selectedElement.parentElement) { @@ -788,8 +769,6 @@ export class AppActionsElement { this.image = this.isElementImage(SlotUtils.isNodeReveal(element) ? (element.firstElementChild as HTMLElement) : element); this.shape = this.isElementShape(element); - this.list = await ListUtils.isElementList(element); - if (element) { element.addEventListener('paste', this.cleanOnPaste, false); @@ -947,7 +926,7 @@ export class AppActionsElement { private toggleList(destinationListType: SlotType.OL | SlotType.UL): Promise { return new Promise(async (resolve) => { - if (!this.selectedElement || !this.list) { + if (!this.selectedElement) { resolve(); return; } @@ -1022,7 +1001,6 @@ export class AppActionsElement { componentProps: { notes: this.slide, copy: this.slide || this.shape, - list: this.list !== undefined, }, event: $event, mode: 'ios', @@ -1036,8 +1014,6 @@ export class AppActionsElement { await this.clone(); } else if (detail.data.action === MoreAction.DELETE) { await this.confirmDeleteElement($event); - } else if (detail.data.action === MoreAction.LIST) { - await this.openSingleAction($event, 'app-list'); } } }); @@ -1052,7 +1028,6 @@ export class AppActionsElement { {this.renderStyle()} {this.renderEdit()} {this.renderShapes()} - {this.renderList()} {this.renderImages()} {this.renderCodeOptions()} {this.renderMathOptions()} @@ -1193,22 +1168,6 @@ export class AppActionsElement { ); } - private renderList() { - const classList: string | undefined = this.list === undefined ? 'hidden wider-devices' : 'wider-devices'; - - return ( - this.openSingleAction($event, 'app-list')} - aria-label="Edit ordered or unordered list" - color="primary" - mode="md" - class={classList}> - - List - - ); - } - private renderMore() { return ( this.openMoreActions(e)} disabled={this.deckBusy} color="primary" class="small-devices" mode="md"> diff --git a/studio/src/app/popovers/editor/app-list/app-list.scss b/studio/src/app/components/editor/styles/element/app-list/app-list.scss similarity index 73% rename from studio/src/app/popovers/editor/app-list/app-list.scss rename to studio/src/app/components/editor/styles/element/app-list/app-list.scss index 1e718308d..143985fdf 100644 --- a/studio/src/app/popovers/editor/app-list/app-list.scss +++ b/studio/src/app/components/editor/styles/element/app-list/app-list.scss @@ -1,7 +1,5 @@ app-list { - @import "../../../../global/theme/editor/editor-popover"; - - ion-item { + ion-item.list { --background-activated: transparent; --background-focused: transparent; --background-hover: transparent; @@ -11,6 +9,10 @@ app-list { &:hover, &.active { --color: var(--ion-color-primary); + + ion-icon { + color: var(--ion-color-primary); + } } } } diff --git a/studio/src/app/components/editor/styles/element/app-list/app-list.tsx b/studio/src/app/components/editor/styles/element/app-list/app-list.tsx new file mode 100644 index 000000000..bf6df5ac9 --- /dev/null +++ b/studio/src/app/components/editor/styles/element/app-list/app-list.tsx @@ -0,0 +1,46 @@ +import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; + +import {SlotType} from '../../../../../utils/editor/slot-type'; +import {ListUtils} from '../../../../../utils/editor/list.utils'; + +@Component({ + tag: 'app-list', + styleUrl: 'app-list.scss', +}) +export class AppList { + @Prop() + selectedElement: HTMLElement; + + @State() + private list: SlotType.OL | SlotType.UL | undefined; + + @Event() toggleList: EventEmitter; + + async componentWillLoad() { + this.list = await ListUtils.isElementList(this.selectedElement); + } + + private async selectList(list: SlotType.OL | SlotType.UL) { + this.list = list; + this.toggleList.emit(list); + } + + render() { + return ( + + List + + this.selectList(SlotType.UL)} class={`list ${this.list == SlotType.UL ? 'active' : undefined}`}> + + Unordered list + + + this.selectList(SlotType.OL)} class={`list ${this.list == SlotType.OL ? 'active' : undefined}`}> + + Ordered list + + + + ); + } +} diff --git a/studio/src/app/popovers/editor/actions/app-more-element-actions/app-more-element-actions.tsx b/studio/src/app/popovers/editor/actions/app-more-element-actions/app-more-element-actions.tsx index e22aec57d..0bebbea0e 100644 --- a/studio/src/app/popovers/editor/actions/app-more-element-actions/app-more-element-actions.tsx +++ b/studio/src/app/popovers/editor/actions/app-more-element-actions/app-more-element-actions.tsx @@ -14,9 +14,6 @@ export class AppMoreElementActions { @Prop() copy: boolean = false; - @Prop() - list: boolean = false; - private async closePopover(action: MoreAction) { await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss({ action: action, @@ -28,7 +25,6 @@ export class AppMoreElementActions {
{this.renderNotes()} {this.renderCopy()} - {this.renderList()} {this.renderDelete()}
); @@ -58,18 +54,6 @@ export class AppMoreElementActions { ); } - private renderList() { - if (!this.list) { - return undefined; - } - - return ( - this.closePopover(MoreAction.LIST)} aria-label="List"> -

List

- - ); - } - private renderDelete() { return ( this.closePopover(MoreAction.DELETE)} aria-label="Delete"> diff --git a/studio/src/app/popovers/editor/app-list/app-list.tsx b/studio/src/app/popovers/editor/app-list/app-list.tsx deleted file mode 100644 index 3e19bed43..000000000 --- a/studio/src/app/popovers/editor/app-list/app-list.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import {Component, Element, h, Prop, State} from '@stencil/core'; - -import {SlotType} from '../../../utils/editor/slot-type'; -import {ListUtils} from '../../../utils/editor/list.utils'; - -@Component({ - tag: 'app-list', - styleUrl: 'app-list.scss', -}) -export class AppList { - @Element() el: HTMLElement; - - @Prop() - selectedElement: HTMLElement; - - @State() - private currentList: SlotType.OL | SlotType.UL | undefined; - - async componentWillLoad() { - this.currentList = await ListUtils.isElementList(this.selectedElement); - } - - private async closePopover(list: SlotType.OL | SlotType.UL) { - await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss({ - list: list, - }); - } - - private async selectList(list: SlotType.OL | SlotType.UL) { - await this.closePopover(list); - } - - render() { - return ( - - this.selectList(SlotType.UL)} class={this.currentList == SlotType.UL ? 'active' : undefined}> - - Unordered list - - - this.selectList(SlotType.OL)} class={this.currentList == SlotType.OL ? 'active' : undefined}> - - Ordered list - - - ); - } -} diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index 06c6aa5db..1049d3ad9 100644 --- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -5,6 +5,7 @@ import {isIPad} from '@deckdeckgo/utils'; import {TargetElement} from '../../../../utils/editor/target-element'; import {SlotType} from '../../../../utils/editor/slot-type'; import {ImageAction} from '../../../../utils/editor/image-action'; +import {ListUtils} from '../../../../utils/editor/list.utils'; import {ImageHelper} from '../../../../helpers/editor/image.helper'; @@ -65,6 +66,9 @@ export class AppElementStyle { @State() private demo: boolean = false; + @State() + private list: SlotType.OL | SlotType.UL | undefined; + async componentWillLoad() { if (this.slide) { this.qrCode = this.selectedElement && this.selectedElement.tagName && this.selectedElement.tagName.toUpperCase() === 'deckgo-slide-qrcode'.toUpperCase(); @@ -76,6 +80,8 @@ export class AppElementStyle { this.demo = this.selectedElement && this.selectedElement.nodeName && this.selectedElement.nodeName.toLocaleLowerCase() === SlotType.DEMO; + this.list = await ListUtils.isElementList(this.selectedElement); + this.applyToTargetElement = this.image ? TargetElement.IMAGE : this.code @@ -221,6 +227,7 @@ export class AppElementStyle { shape={this.shape} onColorChange={() => this.emitStyleChange()}>, this.emitStyleChange()}>, + this.renderList(), ]; } } @@ -234,4 +241,14 @@ export class AppElementStyle { ) => this.onImageAction($event)}> ); } + + private renderList() { + if (!this.list) { + return undefined; + } + + console.log(this.list); + + return this.closePopover()}>; + } } diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index c5e13f433..c14684dbe 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -35,6 +35,9 @@ import { import { ImageAction, } from './app/utils/editor/image-action'; +import { + SlotType, +} from './app/utils/editor/slot-type'; import { TargetElement, } from './app/utils/editor/target-element'; @@ -44,9 +47,6 @@ import { import { ItemReorderEventDetail, } from '@ionic/core'; -import { - SlotType, -} from './app/utils/editor/slot-type'; export namespace Components { interface AppAbout {} @@ -255,7 +255,6 @@ export namespace Components { } interface AppMoreElementActions { 'copy': boolean; - 'list': boolean; 'notes': boolean; } interface AppMoreShareOptions {} @@ -1319,6 +1318,7 @@ declare namespace LocalJSX { interface AppLandingDeck {} interface AppLandingFooter {} interface AppList { + 'onToggleList'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; } interface AppLogo {} @@ -1332,7 +1332,6 @@ declare namespace LocalJSX { } interface AppMoreElementActions { 'copy'?: boolean; - 'list'?: boolean; 'notes'?: boolean; } interface AppMoreShareOptions {} From 21293bad1d273994cc7d6f9fa217e208a9a83cbe Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 14:54:21 +0200 Subject: [PATCH 17/19] feat: remove console.log Signed-off-by: peterpeterparker --- .../components/editor/styles/element/app-reveal/app-reveal.tsx | 2 -- .../editor/style/app-element-style/app-element-style.tsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx b/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx index e43663287..fd8f91051 100644 --- a/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx +++ b/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx @@ -17,8 +17,6 @@ export class AppReveal { componentWillLoad() { this.reveal = SlotUtils.isNodeReveal(this.selectedElement) || SlotUtils.isNodeRevealList(this.selectedElement); - - console.log(this.selectedElement, this.reveal); } private toggle() { diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index 1049d3ad9..08143bd78 100644 --- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -247,8 +247,6 @@ export class AppElementStyle { return undefined; } - console.log(this.list); - return this.closePopover()}>; } } From ec82e6e047178ce14bb4eae76331d5e860acb25d Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 15:23:42 +0200 Subject: [PATCH 18/19] feat: don't display expander on panel if only one element Signed-off-by: peterpeterparker --- .../app-color-text-background.tsx | 5 ++++- .../app-expansion-panel/app-expansion-panel.scss | 8 ++++---- .../app-expansion-panel/app-expansion-panel.tsx | 7 +++++-- .../components/editor/styles/app-image/app-image.tsx | 5 ++++- .../element/app-image-style/app-image-style.tsx | 11 ++++------- .../editor/styles/element/app-list/app-list.tsx | 2 +- .../editor/app-image-element/app-image-element.tsx | 6 +++++- .../editor/style/app-deck-style/app-deck-style.tsx | 2 ++ .../style/app-element-style/app-element-style.tsx | 2 ++ studio/src/components.d.ts | 12 ++++++++++-- studio/src/global/theme/editor/editor-popover.scss | 4 ++++ 11 files changed, 45 insertions(+), 19 deletions(-) diff --git a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx index 5a34c4686..ced08687e 100644 --- a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx +++ b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx @@ -27,6 +27,9 @@ export class AppColorTextBackground { @Prop() colorType: 'text' | 'background' = 'text'; + @Prop() + expander: boolean = true; + @State() private color: string; @@ -168,7 +171,7 @@ export class AppColorTextBackground { render() { return ( - + Color diff --git a/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.scss b/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.scss index a6b9b2125..1457b992a 100644 --- a/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.scss +++ b/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.scss @@ -5,15 +5,15 @@ app-expansion-panel { > div { overflow: hidden; transition: height 0.25s ease-in; - - ion-list[class*="list"] { - padding: 0; - } } > ion-item { font-size: var(--font-size-normal); + &.hidden { + display: none; + } + > ion-icon { margin: 12px 8px 12px 0; color: black; diff --git a/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx b/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx index bf32890dc..50161d8de 100644 --- a/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx +++ b/studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx @@ -1,4 +1,4 @@ -import {Component, h, State} from '@stencil/core'; +import {Component, h, State, Prop} from '@stencil/core'; @Component({ tag: 'app-expansion-panel', @@ -7,6 +7,9 @@ import {Component, h, State} from '@stencil/core'; export class AppExpansionPanel { container!: HTMLDivElement; + @Prop() + expander: boolean = true; + @State() private expanded: 'open' | 'close' = 'open'; @@ -63,7 +66,7 @@ export class AppExpansionPanel { render() { return (
- this.toggle()}> + this.toggle()} class={this.expander ? undefined : 'hidden'}>
diff --git a/studio/src/app/components/editor/styles/app-image/app-image.tsx b/studio/src/app/components/editor/styles/app-image/app-image.tsx index 288dc9705..c4375f939 100644 --- a/studio/src/app/components/editor/styles/app-image/app-image.tsx +++ b/studio/src/app/components/editor/styles/app-image/app-image.tsx @@ -28,6 +28,9 @@ export class AppImage { @Prop() deck: boolean = false; + @Prop() + expander: boolean = true; + private imageHistoryService: ImageHistoryService; @State() @@ -99,7 +102,7 @@ export class AppImage { render() { return ( - + Image {this.renderStockPhotos()} diff --git a/studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx b/studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx index 9febde947..00459421d 100644 --- a/studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx +++ b/studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx @@ -145,13 +145,10 @@ export class AppImageStyle { render() { return ( - - Image - - {this.renderImageSize()} - {this.renderImageAlignment()} - - + + {this.renderImageSize()} + {this.renderImageAlignment()} + ); } diff --git a/studio/src/app/components/editor/styles/element/app-list/app-list.tsx b/studio/src/app/components/editor/styles/element/app-list/app-list.tsx index bf6df5ac9..15adc5940 100644 --- a/studio/src/app/components/editor/styles/element/app-list/app-list.tsx +++ b/studio/src/app/components/editor/styles/element/app-list/app-list.tsx @@ -27,7 +27,7 @@ export class AppList { render() { return ( - + List this.selectList(SlotType.UL)} class={`list ${this.list == SlotType.UL ? 'active' : undefined}`}> diff --git a/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx b/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx index 49cd36b75..11ea74ee7 100644 --- a/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx +++ b/studio/src/app/popovers/editor/app-image-element/app-image-element.tsx @@ -33,7 +33,11 @@ export class AppImageElement { , - ) => this.onAction($event)}>, + ) => this.onAction($event)}>, ]; } } diff --git a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx index dbfc14a38..3c835f325 100644 --- a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx +++ b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx @@ -98,6 +98,7 @@ export class AppDeck { if (this.applyToTargetElement === TargetElement.TEXT) { return ( Promise; 'moreColors': boolean; 'selectedElement': HTMLElement; @@ -196,7 +197,9 @@ export namespace Components { 'slide': boolean; } interface AppEmbed {} - interface AppExpansionPanel {} + interface AppExpansionPanel { + 'expander': boolean; + } interface AppFaq {} interface AppFeed {} interface AppFeedCard { @@ -220,6 +223,7 @@ export namespace Components { interface AppImage { 'deck': boolean; 'deleteBackground': boolean; + 'expander': boolean; 'selectedElement': HTMLElement; 'slide': boolean; } @@ -1184,6 +1188,7 @@ declare namespace LocalJSX { interface AppColorTextBackground { 'colorType'?: 'text' | 'background'; 'deck'?: boolean; + 'expander'?: boolean; 'moreColors'?: boolean; 'onColorChange'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; @@ -1261,7 +1266,9 @@ declare namespace LocalJSX { 'slide'?: boolean; } interface AppEmbed {} - interface AppExpansionPanel {} + interface AppExpansionPanel { + 'expander'?: boolean; + } interface AppFaq {} interface AppFeed {} interface AppFeedCard { @@ -1292,6 +1299,7 @@ declare namespace LocalJSX { interface AppImage { 'deck'?: boolean; 'deleteBackground'?: boolean; + 'expander'?: boolean; 'onAction'?: (event: CustomEvent) => void; 'selectedElement'?: HTMLElement; 'slide'?: boolean; diff --git a/studio/src/global/theme/editor/editor-popover.scss b/studio/src/global/theme/editor/editor-popover.scss index 848d537f7..6cc788acc 100644 --- a/studio/src/global/theme/editor/editor-popover.scss +++ b/studio/src/global/theme/editor/editor-popover.scss @@ -8,6 +8,10 @@ ion-list.list-ios { padding-bottom: 8px; } +ion-list[class*="list"] { + padding: 0; +} + ion-item { --border-width: 0; --inner-border-width: 0; From 34f85472c653c15c42e8c9c344a3544c1e800aa9 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 28 May 2020 15:57:01 +0200 Subject: [PATCH 19/19] feat: wording and use select Signed-off-by: peterpeterparker --- .../color/app-color-chart/app-color-chart.tsx | 6 +-- .../color/app-color-code/app-color-code.tsx | 2 +- .../app-color-qrcode/app-color-qrcode.tsx | 42 ++++++++++--------- .../color/app-color-sides/app-color-sides.tsx | 38 ++++++++++------- 4 files changed, 49 insertions(+), 39 deletions(-) diff --git a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx index ad00a7626..9c575f37a 100644 --- a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx +++ b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx @@ -174,15 +174,15 @@ export class AppColorDeckSlide { render() { return [ - Apply color to + Apply a color to , - Apply color to + Apply a color to this.toggleColorType(e)} interface="popover" mode="md" diff --git a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx index a871e5a34..fc82794f3 100644 --- a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx +++ b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx @@ -307,7 +307,7 @@ export class AppColorCode { Colors - Apply color to + Apply a color to + Apply a color to + , + - this.selectApplyType($event)} value={ApplyColorType.QR_CODE}> - - Apply color to - - - - Fill - - - - - Background - - - + + Apply a color to + + this.selectApplyType($event)} + interface="popover" + mode="md" + class="ion-padding-start ion-padding-end"> + Fill, + Backdrop, + + + Opacity {this.colorOpacity}% diff --git a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx index 7dcb3a9a6..c96907249 100644 --- a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx +++ b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx @@ -155,27 +155,33 @@ export class AppColorSides { return [ - Selected side + Style which side of the slide? + {this.endSide ? 'End' : 'Start'} this.toggleSide()}> - this.selectApplyType($event)} class="ion-padding-top" value={ApplyColorType.TEXT}> - - Apply color to - - - - Text - - - - - Background - - - + + + Apply which color to this side? + + + + Apply a color to + + this.selectApplyType($event)} + interface="popover" + mode="md" + class="ion-padding-start ion-padding-end"> + Text, + Background, + + + Opacity {this.colorOpacity}%