From 4320e69bad8e3068031dbd843932139a7bc13382 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 18 Apr 2020 09:08:06 +0200 Subject: [PATCH 1/7] feat(#680): if only one action, popover as ios style Signed-off-by: peterpeterparker --- .../deck/app-action-help/app-action-help.tsx | 9 +-- .../app-actions-element.tsx | 62 +++++++++---------- .../editor/app-reveal/app-reveal.scss | 6 ++ .../popovers/editor/app-reveal/app-reveal.tsx | 17 ++--- 4 files changed, 47 insertions(+), 47 deletions(-) diff --git a/studio/src/app/components/editor/actions/deck/app-action-help/app-action-help.tsx b/studio/src/app/components/editor/actions/deck/app-action-help/app-action-help.tsx index a9a2f6b64..cfc65b082 100644 --- a/studio/src/app/components/editor/actions/deck/app-action-help/app-action-help.tsx +++ b/studio/src/app/components/editor/actions/deck/app-action-help/app-action-help.tsx @@ -3,7 +3,7 @@ import {Component, h, Element, Prop, Event, EventEmitter} from '@stencil/core'; import {popoverController} from '@ionic/core'; @Component({ - tag: 'app-action-help' + tag: 'app-action-help', }) export class AppActionHelp { @Element() el: HTMLElement; @@ -14,13 +14,14 @@ export class AppActionHelp { @Event() private helpSelected: EventEmitter; - private async openGetHelp() { + private async openGetHelp($event?: UIEvent) { this.helpSelected.emit(); const popover: HTMLIonPopoverElement = await popoverController.create({ component: 'app-get-help', mode: 'ios', - cssClass: 'info' + event: $event, + cssClass: 'info', }); await popover.present(); @@ -35,7 +36,7 @@ export class AppActionHelp { ); } else { return ( - this.openGetHelp()} color="primary" mode="md" class="get-help-action"> + this.openGetHelp($event)} color="primary" mode="md" class="get-help-action"> Help 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 c406cf033..5c29e5975 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 @@ -22,7 +22,7 @@ import {BusyService} from '../../../../../services/editor/busy/busy.service'; @Component({ tag: 'app-actions-element', styleUrl: 'app-actions-element.scss', - shadow: false + shadow: false, }) export class AppActionsElement { @Element() el: HTMLElement; @@ -353,7 +353,7 @@ export class AppActionsElement { const popover: HTMLIonPopoverElement = await popoverController.create({ component: 'app-element-delete', event: $event, - mode: isMobile() && !isIOS() ? 'md' : 'ios' + mode: isMobile() && !isIOS() ? 'md' : 'ios', }); popover.onDidDismiss().then(async (detail: OverlayEventDetail) => { @@ -451,11 +451,11 @@ export class AppActionsElement { const popover: HTMLIonPopoverElement = await popoverController.create({ component: 'app-slot-type', componentProps: { - selectedElement: this.selectedElement + selectedElement: this.selectedElement, }, mode: 'md', showBackdrop: false, - cssClass: 'popover-menu' + cssClass: 'popover-menu', }); popover.onDidDismiss().then(async (detail: OverlayEventDetail) => { @@ -482,11 +482,11 @@ export class AppActionsElement { qrCode: this.slideNodeName === 'deckgo-slide-qrcode', chart: this.slideNodeName === 'deckgo-slide-chart', author: this.slideNodeName === 'deckgo-slide-author', - slideDidChange: this.slideDidChange + slideDidChange: this.slideDidChange, }, mode: 'md', showBackdrop: false, - cssClass: 'popover-menu' + cssClass: 'popover-menu', }); popover.onWillDismiss().then(async (detail: OverlayEventDetail) => { @@ -512,11 +512,11 @@ export class AppActionsElement { const popover: HTMLIonPopoverElement = await popoverController.create({ component: 'app-shape', componentProps: { - selectedElement: this.selectedElement + selectedElement: this.selectedElement, }, mode: 'md', showBackdrop: false, - cssClass: 'popover-menu' + cssClass: 'popover-menu', }); popover.onWillDismiss().then(async (detail: OverlayEventDetail) => { @@ -534,11 +534,11 @@ export class AppActionsElement { componentProps: { selectedElement: this.selectedElement, slide: this.slide, - imgDidChange: this.imgDidChange + imgDidChange: this.imgDidChange, }, mode: 'md', showBackdrop: false, - cssClass: 'popover-menu' + cssClass: 'popover-menu', }); return popover; @@ -553,8 +553,8 @@ export class AppActionsElement { component: 'app-poll-options', componentProps: { selectedElement: this.selectedElement, - slideDidChange: this.slideDidChange - } + slideDidChange: this.slideDidChange, + }, }); modal.onDidDismiss().then(async (_detail: OverlayEventDetail) => { @@ -566,7 +566,7 @@ export class AppActionsElement { await modal.present(); } - private async openReveal() { + private async openReveal($event: UIEvent) { if (this.slide) { return; } @@ -574,11 +574,11 @@ export class AppActionsElement { const popover: HTMLIonPopoverElement = await popoverController.create({ component: 'app-reveal', componentProps: { - selectedElement: this.selectedElement + selectedElement: this.selectedElement, }, - mode: 'md', - showBackdrop: false, - cssClass: 'popover-menu' + mode: 'ios', + event: $event, + cssClass: 'info', }); popover.onDidDismiss().then(async (detail: OverlayEventDetail) => { @@ -599,11 +599,11 @@ export class AppActionsElement { component: 'app-code', componentProps: { selectedElement: this.selectedElement, - codeDidChange: this.codeDidChange + codeDidChange: this.codeDidChange, }, mode: 'md', showBackdrop: false, - cssClass: 'popover-menu' + cssClass: 'popover-menu', }); await popover.present(); @@ -617,8 +617,8 @@ export class AppActionsElement { const modal: HTMLIonModalElement = await modalController.create({ component: 'app-youtube', componentProps: { - selectedElement: this.selectedElement - } + selectedElement: this.selectedElement, + }, }); modal.onDidDismiss().then(async (detail: OverlayEventDetail) => { @@ -638,8 +638,8 @@ export class AppActionsElement { const modal: HTMLIonModalElement = await modalController.create({ component: 'app-notes', componentProps: { - selectedElement: this.selectedElement - } + selectedElement: this.selectedElement, + }, }); modal.onDidDismiss().then(async (detail: OverlayEventDetail) => { @@ -826,11 +826,11 @@ export class AppActionsElement { component: 'app-color', componentProps: { slide: this.slide, - selectedElement: this.selectedElement + selectedElement: this.selectedElement, }, mode: 'md', showBackdrop: false, - cssClass: `popover-menu ${this.slideNodeName === 'deckgo-slide-poll' ? 'popover-menu-wide' : ''}` + cssClass: `popover-menu ${this.slideNodeName === 'deckgo-slide-poll' ? 'popover-menu-wide' : ''}`, }); await popover.present(); @@ -950,10 +950,10 @@ export class AppActionsElement { component: 'app-more-element-actions', componentProps: { notes: this.slide, - copy: this.slide || this.shape + copy: this.slide || this.shape, }, event: $event, - mode: 'ios' + mode: 'ios', }); popover.onDidDismiss().then(async (detail: OverlayEventDetail) => { @@ -1063,7 +1063,7 @@ export class AppActionsElement { this.openSlotType()} aria-label="Toggle element type" color="primary" mode="md" class={classToggle}> Toggle - + , ]; } @@ -1074,7 +1074,7 @@ export class AppActionsElement { this.openShape()} color="primary" aria-label="Add a shape" mode="md" class={classSlide}> Add shape - + , ]; } @@ -1104,7 +1104,7 @@ export class AppActionsElement { const classReveal: string | undefined = this.slide || this.code || this.shape || this.slideNodeName === 'deckgo-slide-youtube' ? 'hidden' : undefined; return ( - this.openReveal()} aria-label="Edit element animation" color="primary" mode="md" class={classReveal}> + this.openReveal($event)} aria-label="Edit element animation" color="primary" mode="md" class={classReveal}> Animation @@ -1123,7 +1123,7 @@ export class AppActionsElement { this.toggleList()} aria-label="Toggle to an ordered list" color="primary" mode="md" class={classListOL}> Ordered list - + , ]; } diff --git a/studio/src/app/popovers/editor/app-reveal/app-reveal.scss b/studio/src/app/popovers/editor/app-reveal/app-reveal.scss index 7e2036205..3fab8a2a1 100644 --- a/studio/src/app/popovers/editor/app-reveal/app-reveal.scss +++ b/studio/src/app/popovers/editor/app-reveal/app-reveal.scss @@ -1,3 +1,9 @@ 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 index c30bed0be..6ca63de74 100644 --- a/studio/src/app/popovers/editor/app-reveal/app-reveal.tsx +++ b/studio/src/app/popovers/editor/app-reveal/app-reveal.tsx @@ -4,9 +4,9 @@ import {SlotUtils} from '../../../utils/editor/slot.utils'; @Component({ tag: 'app-reveal', - styleUrl: 'app-reveal.scss' + styleUrl: 'app-reveal.scss', }) -export class AppSlideAdd { +export class AppReveal { @Element() el: HTMLElement; @Prop() @@ -21,25 +21,18 @@ export class AppSlideAdd { private async closePopover(reveal: boolean) { await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss({ - reveal: reveal + reveal: reveal, }); } render() { - return [ - -

Animation

- this.closePopover(this.currentReveal)}> - - - , - + return ( Animate transition this.closePopover(!this.currentReveal)}> - ]; + ); } } From 1728e4690e18b9f2792bc0047164522731598ebc Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 18 Apr 2020 11:58:02 +0200 Subject: [PATCH 2/7] feat(#680): add alignment picker Signed-off-by: peterpeterparker --- studio/package-lock.json | 13 +++-- studio/package.json | 2 +- .../app-actions-element.tsx | 34 +++++++++++-- .../popovers/editor/app-align/app-align.scss | 16 ++++++ .../popovers/editor/app-align/app-align.tsx | 50 +++++++++++++++++++ studio/src/app/utils/editor/align.utils.tsx | 47 +++++++++++++++++ studio/src/assets/assets.json | 5 +- studio/src/assets/icons/align-center.svg | 1 + studio/src/assets/icons/align-left.svg | 1 + studio/src/assets/icons/align-right.svg | 1 + studio/src/components.d.ts | 15 ++++++ 11 files changed, 177 insertions(+), 8 deletions(-) create mode 100644 studio/src/app/popovers/editor/app-align/app-align.scss create mode 100644 studio/src/app/popovers/editor/app-align/app-align.tsx create mode 100644 studio/src/app/utils/editor/align.utils.tsx create mode 100644 studio/src/assets/icons/align-center.svg create mode 100644 studio/src/assets/icons/align-left.svg create mode 100644 studio/src/assets/icons/align-right.svg diff --git a/studio/package-lock.json b/studio/package-lock.json index f4e22fb27..269cce211 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -88,6 +88,13 @@ "requires": { "@deckdeckgo/utils": "1.0.0", "prismjs": "^1.19.0" + }, + "dependencies": { + "@deckdeckgo/utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-yqbie3n3JDGU338MS9NNfAseQfPVamqC0m/Y1U8fSh7ZKSzSRCU/899nkpma9DZEg16v8vld8vnpImGrzkFSHg==" + } } }, "@deckdeckgo/inline-editor": { @@ -257,9 +264,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.0.0.tgz", - "integrity": "sha512-yqbie3n3JDGU338MS9NNfAseQfPVamqC0m/Y1U8fSh7ZKSzSRCU/899nkpma9DZEg16v8vld8vnpImGrzkFSHg==" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-/bomB2gBlEuXmLSXCHujABB1EYDTrcK/IQaH9NFh6ZUB+dEfb3L3uCof8RyUvQcEzqhVJJa63ZBnDnitJSOWYg==" }, "@deckdeckgo/youtube": { "version": "1.0.0", diff --git a/studio/package.json b/studio/package.json index deb4ff453..fe22a0f01 100644 --- a/studio/package.json +++ b/studio/package.json @@ -37,7 +37,7 @@ "@deckdeckgo/slide-title": "^1.0.0", "@deckdeckgo/slide-youtube": "^1.0.0", "@deckdeckgo/social": "^1.0.0", - "@deckdeckgo/utils": "^1.0.0", + "@deckdeckgo/utils": "^1.1.0", "@deckdeckgo/youtube": "^1.0.0", "@ionic/core": "5.0.5", "firebase": "^7.11.0", 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 5c29e5975..72d1b35af 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 @@ -13,6 +13,7 @@ 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 {EditAction} from '../../../../../utils/editor/edit-action'; import {MoreAction} from '../../../../../utils/editor/more-action'; @@ -50,6 +51,9 @@ export class AppActionsElement { @State() private shape: boolean = false; + @State() + private align: TextAlign | undefined; + @State() private list: SlotType; @@ -566,13 +570,13 @@ export class AppActionsElement { await modal.present(); } - private async openReveal($event: UIEvent) { + private async openSingleAction($event: UIEvent, component: string) { if (this.slide) { return; } const popover: HTMLIonPopoverElement = await popoverController.create({ - component: 'app-reveal', + component: component, componentProps: { selectedElement: this.selectedElement, }, @@ -741,6 +745,8 @@ 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 = this.isElementList(element); if (element) { @@ -978,6 +984,7 @@ export class AppActionsElement { {this.renderEdit()} {this.renderShapes()} {this.renderReveal()} + {this.renderAlign()} {this.renderColor()} {this.renderList()} {this.renderImages()} @@ -1104,13 +1111,34 @@ export class AppActionsElement { const classReveal: string | undefined = this.slide || this.code || this.shape || this.slideNodeName === 'deckgo-slide-youtube' ? 'hidden' : undefined; return ( - this.openReveal($event)} aria-label="Edit element animation" color="primary" mode="md" class={classReveal}> + this.openSingleAction($event, 'app-reveal')} + aria-label="Edit element animation" + color="primary" + mode="md" + class={classReveal}> Animation ); } + 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}> + + Alignment + + ); + } + private renderList() { const classListOL: string | undefined = this.list === SlotType.OL ? undefined : 'hidden'; const classListUL: string | undefined = this.list === SlotType.UL ? undefined : 'hidden'; diff --git a/studio/src/app/popovers/editor/app-align/app-align.scss b/studio/src/app/popovers/editor/app-align/app-align.scss new file mode 100644 index 000000000..72365280a --- /dev/null +++ b/studio/src/app/popovers/editor/app-align/app-align.scss @@ -0,0 +1,16 @@ +app-align { + @import "../../../../global/theme/editor/editor-popover"; + + ion-item { + --background-activated: transparent; + --background-focused: transparent; + --background-hover: transparent; + + cursor: pointer; + + &:hover, + &.active { + --color: var(--ion-color-primary); + } + } +} diff --git a/studio/src/app/popovers/editor/app-align/app-align.tsx b/studio/src/app/popovers/editor/app-align/app-align.tsx new file mode 100644 index 000000000..e89064e7b --- /dev/null +++ b/studio/src/app/popovers/editor/app-align/app-align.tsx @@ -0,0 +1,50 @@ +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/utils/editor/align.utils.tsx b/studio/src/app/utils/editor/align.utils.tsx new file mode 100644 index 000000000..d0c25056f --- /dev/null +++ b/studio/src/app/utils/editor/align.utils.tsx @@ -0,0 +1,47 @@ +import {isRTL} from '@deckdeckgo/utils'; +import {SlotType} from './slot-type'; + +export enum TextAlign { + LEFT = 'left', + CENTER = 'center', + RIGHT = 'right', +} + +export class AlignUtils { + static async getAlignment(element: HTMLElement): Promise { + if (!element || !this.isElementText(element)) { + return undefined; + } + + const style: CSSStyleDeclaration = window.getComputedStyle(element); + + if (style.textAlign === 'center') { + return TextAlign.CENTER; + } else if (style.textAlign === 'right') { + return TextAlign.RIGHT; + } else if (style.textAlign === 'left') { + return TextAlign.LEFT; + } + + return this.getDefaultAlignment(); + } + + private static getDefaultAlignment(): TextAlign { + return isRTL() ? TextAlign.RIGHT : TextAlign.LEFT; + } + + private static isElementText(element: HTMLElement): boolean { + return ( + element && + element.nodeName && + [ + SlotType.SECTION.toString(), + SlotType.H1.toString(), + SlotType.H2.toString(), + SlotType.H3.toString(), + SlotType.OL.toString(), + SlotType.UL.toString(), + ].indexOf(element.nodeName.toLowerCase()) > -1 + ); + } +} diff --git a/studio/src/assets/assets.json b/studio/src/assets/assets.json index 693d13301..4db15b934 100644 --- a/studio/src/assets/assets.json +++ b/studio/src/assets/assets.json @@ -235,6 +235,9 @@ {"src": "/icons/ionicons/code.svg", "ariaLabel": "Code"}, {"src": "/icons/ionicons/images.svg", "ariaLabel": "Images"}, {"src": "/icons/album.svg", "ariaLabel": "Animation"}, - {"src": "/icons/ionicons/checkmark.svg", "ariaLabel": "Check"} + {"src": "/icons/ionicons/checkmark.svg", "ariaLabel": "Check"}, + {"src": "/icons/align-center.svg", "ariaLabel": "Align center"}, + {"src": "/icons/align-left.svg", "ariaLabel": "Align left"}, + {"src": "/icons/align-right.svg", "ariaLabel": "Align right"} ] } diff --git a/studio/src/assets/icons/align-center.svg b/studio/src/assets/icons/align-center.svg new file mode 100644 index 000000000..7227625f7 --- /dev/null +++ b/studio/src/assets/icons/align-center.svg @@ -0,0 +1 @@ + diff --git a/studio/src/assets/icons/align-left.svg b/studio/src/assets/icons/align-left.svg new file mode 100644 index 000000000..7095ef373 --- /dev/null +++ b/studio/src/assets/icons/align-left.svg @@ -0,0 +1 @@ + diff --git a/studio/src/assets/icons/align-right.svg b/studio/src/assets/icons/align-right.svg new file mode 100644 index 000000000..d409e956b --- /dev/null +++ b/studio/src/assets/icons/align-right.svg @@ -0,0 +1 @@ + diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index e8d6758f9..ca2a55fe5 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -80,6 +80,9 @@ export namespace Components { 'touch': (element: HTMLElement, autoOpen?: boolean) => Promise; 'unSelect': () => Promise; } + interface AppAlign { + 'selectedElement': HTMLElement; + } interface AppAvatar { 'ariaLabel': string; 'src': string; @@ -366,6 +369,12 @@ declare global { new (): HTMLAppActionsElementElement; }; + interface HTMLAppAlignElement extends Components.AppAlign, HTMLStencilElement {} + var HTMLAppAlignElement: { + prototype: HTMLAppAlignElement; + new (): HTMLAppAlignElement; + }; + interface HTMLAppAvatarElement extends Components.AppAvatar, HTMLStencilElement {} var HTMLAppAvatarElement: { prototype: HTMLAppAvatarElement; @@ -907,6 +916,7 @@ declare global { 'app-actions-deck': HTMLAppActionsDeckElement; 'app-actions-editor': HTMLAppActionsEditorElement; 'app-actions-element': HTMLAppActionsElementElement; + 'app-align': HTMLAppAlignElement; 'app-avatar': HTMLAppAvatarElement; 'app-breadcrumbs': HTMLAppBreadcrumbsElement; 'app-code': HTMLAppCodeElement; @@ -1056,6 +1066,9 @@ declare namespace LocalJSX { 'onSlideDidChange'?: (event: CustomEvent) => void; 'slideCopy'?: EventEmitter; } + interface AppAlign { + 'selectedElement'?: HTMLElement; + } interface AppAvatar { 'ariaLabel'?: string; 'src'?: string; @@ -1334,6 +1347,7 @@ declare namespace LocalJSX { 'app-actions-deck': AppActionsDeck; 'app-actions-editor': AppActionsEditor; 'app-actions-element': AppActionsElement; + 'app-align': AppAlign; 'app-avatar': AppAvatar; 'app-breadcrumbs': AppBreadcrumbs; 'app-code': AppCode; @@ -1439,6 +1453,7 @@ declare module "@stencil/core" { 'app-actions-deck': LocalJSX.AppActionsDeck & JSXBase.HTMLAttributes; 'app-actions-editor': LocalJSX.AppActionsEditor & JSXBase.HTMLAttributes; 'app-actions-element': LocalJSX.AppActionsElement & JSXBase.HTMLAttributes; + 'app-align': LocalJSX.AppAlign & JSXBase.HTMLAttributes; 'app-avatar': LocalJSX.AppAvatar & JSXBase.HTMLAttributes; 'app-breadcrumbs': LocalJSX.AppBreadcrumbs & JSXBase.HTMLAttributes; 'app-code': LocalJSX.AppCode & JSXBase.HTMLAttributes; From 37a669e528cba5af2b859ae70743d846b1c149f9 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 18 Apr 2020 12:13:48 +0200 Subject: [PATCH 3/7] feat(#680): apply alignment Signed-off-by: peterpeterparker --- .../app-actions-element.tsx | 18 ++++++++++++++++-- studio/src/app/utils/editor/align.utils.tsx | 2 ++ 2 files changed, 18 insertions(+), 2 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 72d1b35af..c437e1f5c 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 @@ -570,7 +570,7 @@ export class AppActionsElement { await modal.present(); } - private async openSingleAction($event: UIEvent, component: string) { + private async openSingleAction($event: UIEvent, component: 'app-reveal' | 'app-align') { if (this.slide) { return; } @@ -586,8 +586,10 @@ export class AppActionsElement { }); popover.onDidDismiss().then(async (detail: OverlayEventDetail) => { - if (detail.data) { + 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); } }); @@ -915,6 +917,18 @@ 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) { diff --git a/studio/src/app/utils/editor/align.utils.tsx b/studio/src/app/utils/editor/align.utils.tsx index d0c25056f..c3fca420e 100644 --- a/studio/src/app/utils/editor/align.utils.tsx +++ b/studio/src/app/utils/editor/align.utils.tsx @@ -41,6 +41,8 @@ export class AlignUtils { SlotType.H3.toString(), SlotType.OL.toString(), SlotType.UL.toString(), + SlotType.REVEAL.toString(), + SlotType.REVEAL_LIST.toString(), ].indexOf(element.nodeName.toLowerCase()) > -1 ); } From f5a0b72cada64b806efdb78a306a4714793079f7 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 18 Apr 2020 12:22:35 +0200 Subject: [PATCH 4/7] fix(#680): MIT icons which do not need attribution Signed-off-by: peterpeterparker --- .../components/action-image/action-image.scss | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/webcomponents/inline-editor/src/components/components/action-image/action-image.scss b/webcomponents/inline-editor/src/components/components/action-image/action-image.scss index 5724c1710..1b0417e55 100644 --- a/webcomponents/inline-editor/src/components/components/action-image/action-image.scss +++ b/webcomponents/inline-editor/src/components/components/action-image/action-image.scss @@ -36,11 +36,11 @@ div { padding-top: 1px; > div { - width: 17px; - height: 17px; + width: 20px; + height: 20px; - -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); - mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); + -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7Ij48cGF0aCBkPSJNOTYsMzMxbDE2MCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjI1LjNweDsiLz48cGF0aCBkPSJNOTYsMTg1bDE2MCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjI1LjNweDsiLz48cGF0aCBkPSJNOTYsMjU4bDMyMCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjMycHg7Ii8+PHBhdGggZD0iTTk2LDExMmwzMjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDozMnB4OyIvPjxwYXRoIGQ9Ik05Niw0MDBsMzIwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MzJweDsiLz48L3N2Zz4K"); + mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7Ij48cGF0aCBkPSJNOTYsMzMxbDE2MCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjI1LjNweDsiLz48cGF0aCBkPSJNOTYsMTg1bDE2MCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjI1LjNweDsiLz48cGF0aCBkPSJNOTYsMjU4bDMyMCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjMycHg7Ii8+PHBhdGggZD0iTTk2LDExMmwzMjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDozMnB4OyIvPjxwYXRoIGQ9Ik05Niw0MDBsMzIwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MzJweDsiLz48L3N2Zz4K"); } } @@ -48,11 +48,11 @@ div { padding-top: 1px; > div { - width: 17px; - height: 17px; + width: 20px; + height: 20px; - -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='76.5' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='76.5' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); - mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='76.5' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='76.5' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); + -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7Ij48cGF0aCBkPSJNMTc2LDMzMWwxNjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoyNS4zcHg7Ii8+PHBhdGggZD0iTTE3NiwxODVsMTYwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MjUuM3B4OyIvPjxwYXRoIGQ9Ik05NiwyNThsMzIwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MzJweDsiLz48cGF0aCBkPSJNOTYsMTEybDMyMCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjMycHg7Ii8+PHBhdGggZD0iTTk2LDQwMGwzMjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDozMnB4OyIvPjwvc3ZnPgo="); + mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7Ij48cGF0aCBkPSJNMTc2LDMzMWwxNjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoyNS4zcHg7Ii8+PHBhdGggZD0iTTE3NiwxODVsMTYwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MjUuM3B4OyIvPjxwYXRoIGQ9Ik05NiwyNThsMzIwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MzJweDsiLz48cGF0aCBkPSJNOTYsMTEybDMyMCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjMycHg7Ii8+PHBhdGggZD0iTTk2LDQwMGwzMjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDozMnB4OyIvPjwvc3ZnPgo="); } } @@ -60,11 +60,11 @@ div { padding-top: 1px; > div { - width: 17px; - height: 17px; + width: 20px; + height: 20px; - -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='153' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='153' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); - mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='153' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='153' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); + -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7Ij48cGF0aCBkPSJNMjU2LDMzMWwxNjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoyNS4zcHg7Ii8+PHBhdGggZD0iTTI1NiwxODVsMTYwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MjUuM3B4OyIvPjxwYXRoIGQ9Ik05NiwyNThsMzIwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MzJweDsiLz48cGF0aCBkPSJNOTYsMTEybDMyMCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjMycHg7Ii8+PHBhdGggZD0iTTk2LDQwMGwzMjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDozMnB4OyIvPjwvc3ZnPgo="); + mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7Ij48cGF0aCBkPSJNMjU2LDMzMWwxNjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoyNS4zcHg7Ii8+PHBhdGggZD0iTTI1NiwxODVsMTYwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MjUuM3B4OyIvPjxwYXRoIGQ9Ik05NiwyNThsMzIwLDAiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MzJweDsiLz48cGF0aCBkPSJNOTYsMTEybDMyMCwwIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpjdXJyZW50Q29sb3I7c3Ryb2tlLXdpZHRoOjMycHg7Ii8+PHBhdGggZD0iTTk2LDQwMGwzMjAsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDozMnB4OyIvPjwvc3ZnPgo="); } } From 750caaa04ff4ce0864f0b8adab7b2858f2e7d2d3 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 18 Apr 2020 12:23:30 +0200 Subject: [PATCH 5/7] release(#680): inline-editor v1.1.1 Signed-off-by: peterpeterparker --- CHANGELOG.md | 2 +- webcomponents/inline-editor/CHANGELOG.md | 8 ++++++++ webcomponents/inline-editor/package-lock.json | 2 +- webcomponents/inline-editor/package.json | 2 +- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 011e6f4d6..43c5358bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ - core: v1.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md)) - drag-resize-rotate: v1.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/drag-resize-rotate/CHANGELOG.md)) - highlight-code: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md)) -- inline-editor: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md)) +- inline-editor: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md)) - lazy-img: v1.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/lazy-img/CHANGELOG.md)) - qrcode: v1.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/qrcode/CHANGELOG.md)) - remote: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/remote/CHANGELOG.md)) diff --git a/webcomponents/inline-editor/CHANGELOG.md b/webcomponents/inline-editor/CHANGELOG.md index 268d3726e..e7471f198 100644 --- a/webcomponents/inline-editor/CHANGELOG.md +++ b/webcomponents/inline-editor/CHANGELOG.md @@ -1,3 +1,11 @@ + + +# 1.1.1 (2020-04-18) + +### Fix + +- MIT icons which do not need attribution + # 1.1.0 (2020-04-17) diff --git a/webcomponents/inline-editor/package-lock.json b/webcomponents/inline-editor/package-lock.json index 98ec2a95a..5de60aa93 100644 --- a/webcomponents/inline-editor/package-lock.json +++ b/webcomponents/inline-editor/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/inline-editor", - "version": "1.1.0", + "version": "1.1.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/inline-editor/package.json b/webcomponents/inline-editor/package.json index c2f367f39..345967790 100644 --- a/webcomponents/inline-editor/package.json +++ b/webcomponents/inline-editor/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/inline-editor", - "version": "1.1.0", + "version": "1.1.1", "description": "A WYSIWYG HTML Inline Editor Web Component", "main": "dist/index.js", "module": "dist/index.mjs", From 2817970a231d119ef4b3a6665f7363612cf4eba3 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 18 Apr 2020 12:24:52 +0200 Subject: [PATCH 6/7] feat(#680): update inline-editor v1.1.1 Signed-off-by: peterpeterparker --- studio/package-lock.json | 11 +++-------- studio/package.json | 2 +- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/studio/package-lock.json b/studio/package-lock.json index 269cce211..9aed36289 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -98,9 +98,9 @@ } }, "@deckdeckgo/inline-editor": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.1.0.tgz", - "integrity": "sha512-33T22V2bf+2FnKAHY0ZR4cUJycu1S/U8bXD+zXNC+Ou9QUIOx9TDy4dLsLKxlimm6St5nn1GJE/UUxZQRg2WAg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.1.1.tgz", + "integrity": "sha512-uWyvvgjAYmDZ6mfTb4OnumGlgwQz3iPy5ZeRI0HtUa5K+0dMGz2leN9mGhidf++yIdQMrvcviuO0/HfaZpVriQ==", "requires": { "@deckdeckgo/color": "^1.1.0", "@deckdeckgo/utils": "^1.1.0" @@ -113,11 +113,6 @@ "requires": { "@deckdeckgo/utils": "^1.0.0" } - }, - "@deckdeckgo/utils": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.1.0.tgz", - "integrity": "sha512-/bomB2gBlEuXmLSXCHujABB1EYDTrcK/IQaH9NFh6ZUB+dEfb3L3uCof8RyUvQcEzqhVJJa63ZBnDnitJSOWYg==" } } }, diff --git a/studio/package.json b/studio/package.json index fe22a0f01..43c55cc1c 100644 --- a/studio/package.json +++ b/studio/package.json @@ -22,7 +22,7 @@ "@deckdeckgo/deck-utils": "^1.0.0", "@deckdeckgo/drag-resize-rotate": "^1.0.0", "@deckdeckgo/highlight-code": "^1.0.2", - "@deckdeckgo/inline-editor": "^1.1.0", + "@deckdeckgo/inline-editor": "^1.1.1", "@deckdeckgo/lazy-img": "^1.0.0", "@deckdeckgo/qrcode": "^1.0.0", "@deckdeckgo/remote": "^1.1.0", From a0e3fed60db9ea9350ee519acb3e59b04baccc52 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 18 Apr 2020 12:25:44 +0200 Subject: [PATCH 7/7] feat(#680): update inline-editor v1.1.1 Signed-off-by: peterpeterparker --- docs/package-lock.json | 25 ++++++++++++++++++++----- docs/package.json | 2 +- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/docs/package-lock.json b/docs/package-lock.json index e6603a4d0..2ddcac05d 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -91,12 +91,27 @@ } }, "@deckdeckgo/inline-editor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.0.0.tgz", - "integrity": "sha512-FLUUiEXKu1p1/RfEDpQmgcqUA67SD7OjC5DDJELZ/hRADhY/Z38wvnVlrxlnHzBu1vBcbdj64+bnbzL4y5ewyw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.1.1.tgz", + "integrity": "sha512-uWyvvgjAYmDZ6mfTb4OnumGlgwQz3iPy5ZeRI0HtUa5K+0dMGz2leN9mGhidf++yIdQMrvcviuO0/HfaZpVriQ==", "requires": { - "@deckdeckgo/color": "^1.0.1", - "@deckdeckgo/utils": "^1.0.0" + "@deckdeckgo/color": "^1.1.0", + "@deckdeckgo/utils": "^1.1.0" + }, + "dependencies": { + "@deckdeckgo/color": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/color/-/color-1.1.0.tgz", + "integrity": "sha512-xMgA+Vyn5wnDBVWEW58FBjhkY95XmTK3A24IKCkUUgGZNO8BoRnzPLD+/2IPpIXtLEzs+oawOi5wjvev8d6bFw==", + "requires": { + "@deckdeckgo/utils": "^1.0.0" + } + }, + "@deckdeckgo/utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-/bomB2gBlEuXmLSXCHujABB1EYDTrcK/IQaH9NFh6ZUB+dEfb3L3uCof8RyUvQcEzqhVJJa63ZBnDnitJSOWYg==" + } } }, "@deckdeckgo/lazy-img": { diff --git a/docs/package.json b/docs/package.json index 92f7d3abe..b6992d546 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,7 +19,7 @@ "@deckdeckgo/core": "^1.0.1", "@deckdeckgo/drag-resize-rotate": "^1.0.0", "@deckdeckgo/highlight-code": "^1.0.2", - "@deckdeckgo/inline-editor": "^1.0.0", + "@deckdeckgo/inline-editor": "^1.1.1", "@deckdeckgo/lazy-img": "^1.0.0", "@deckdeckgo/qrcode": "^1.0.0", "@deckdeckgo/slide-aspect-ratio": "^1.0.0",