From e7f483b573c31a73a776a8873e350ea65453fce1 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 5 Dec 2020 12:48:07 +0200 Subject: [PATCH] Added apply link button in markup tooltip --- src/components/chat/markupTooltip.ts | 44 ++++++++++++++++++----- src/scss/components/_global.scss | 8 ++--- src/scss/partials/_button.scss | 3 +- src/scss/partials/_chatMarkupTooltip.scss | 25 ++++++++++--- 4 files changed, 62 insertions(+), 18 deletions(-) diff --git a/src/components/chat/markupTooltip.ts b/src/components/chat/markupTooltip.ts index 7cb31cf9..a561f75d 100644 --- a/src/components/chat/markupTooltip.ts +++ b/src/components/chat/markupTooltip.ts @@ -8,6 +8,7 @@ export default class MarkupTooltip { private wrapper: HTMLElement; private buttons: {[type in MarkdownType]: HTMLElement} = {} as any; private linkBackButton: HTMLElement; + private linkApplyButton: HTMLButtonElement; private hideTimeout: number; private addedListener = false; private waitingForMouseUp = false; @@ -50,6 +51,8 @@ export default class MarkupTooltip { } else { this.linkInput.value = ''; } + + this.linkInput.classList.toggle('is-valid', this.isLinkValid()); }); } }); @@ -59,8 +62,9 @@ export default class MarkupTooltip { this.linkInput.placeholder = 'Enter URL...'; this.linkInput.classList.add('input-clear'); this.linkInput.addEventListener('keydown', (e) => { + const valid = !this.linkInput.value.length || !!RichTextProcessor.matchUrl(this.linkInput.value);///^(http)|(https):\/\//i.test(this.linkInput.value); + if(e.code == 'Enter') { - const valid = !this.linkInput.value.length || RichTextProcessor.matchUrl(this.linkInput.value);///^(http)|(https):\/\//i.test(this.linkInput.value); if(!valid) { if(this.linkInput.classList.contains('error')) { this.linkInput.classList.remove('error'); @@ -69,28 +73,41 @@ export default class MarkupTooltip { this.linkInput.classList.add('error'); } else { - cancelEvent(e); - this.resetSelection(); - this.appImManager.chat.input.applyMarkdown('link', this.linkInput.value); - this.hide(); + this.applyLink(e); } - } else { - this.linkInput.classList.remove('error'); } }); + this.linkInput.addEventListener('input', (e) => { + const valid = this.isLinkValid(); + + this.linkInput.classList.toggle('is-valid', valid); + this.linkInput.classList.remove('error'); + }); + this.linkBackButton.addEventListener('click', () => { this.container.classList.remove('is-link'); //input.value = ''; this.resetSelection(); }); + + this.linkApplyButton = ButtonIcon('check markup-tooltip-link-apply', {noRipple: true}); + this.linkApplyButton.addEventListener('click', (e) => { + this.applyLink(e); + }); + + const applyDiv = document.createElement('div'); + applyDiv.classList.add('markup-tooltip-link-apply-container'); const delimiter1 = document.createElement('span'); const delimiter2 = document.createElement('span'); + const delimiter3 = document.createElement('span'); delimiter1.classList.add('markup-tooltip-delimiter'); delimiter2.classList.add('markup-tooltip-delimiter'); + delimiter3.classList.add('markup-tooltip-delimiter'); tools1.insertBefore(delimiter1, this.buttons.link); - tools2.append(this.linkBackButton, delimiter2, this.linkInput); + applyDiv.append(delimiter3, this.linkApplyButton); + tools2.append(this.linkBackButton, delimiter2, this.linkInput, applyDiv); //tools1.insertBefore(delimiter2, this.buttons.link.nextSibling); this.wrapper.append(tools1, tools2); @@ -98,6 +115,17 @@ export default class MarkupTooltip { document.body.append(this.container); } + private applyLink(e: Event) { + cancelEvent(e); + this.resetSelection(); + this.appImManager.chat.input.applyMarkdown('link', this.linkInput.value); + this.hide(); + } + + private isLinkValid() { + return !this.linkInput.value.length || !!RichTextProcessor.matchUrl(this.linkInput.value); + } + private resetSelection() { const selection = window.getSelection(); selection.removeAllRanges(); diff --git a/src/scss/components/_global.scss b/src/scss/components/_global.scss index 70b63dd9..20302526 100644 --- a/src/scss/components/_global.scss +++ b/src/scss/components/_global.scss @@ -91,13 +91,13 @@ Utility Classes user-select: none; } -/* .no-transition { +.no-transition { transition: none !important; - &-all, &-all * { + /* &-all, &-all * { transition: none !important; - } -} */ + } */ +} .inline { display: inline; diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index b4e8cbfc..b0ad0dbc 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -232,7 +232,7 @@ } } -// ! example: multiselect input +// ! example: multiselect input, button in pinned messages chat .btn-transparent { color: #000; background-color: transparent; @@ -240,6 +240,7 @@ align-items: center; padding: 0 .875rem; //width: auto; + text-transform: capitalize; html.no-touch &:hover { background-color: var(--color-gray-hover); diff --git a/src/scss/partials/_chatMarkupTooltip.scss b/src/scss/partials/_chatMarkupTooltip.scss index 1e2ac0cd..60481f79 100644 --- a/src/scss/partials/_chatMarkupTooltip.scss +++ b/src/scss/partials/_chatMarkupTooltip.scss @@ -43,8 +43,7 @@ width: $widthLink; .markup-tooltip-delimiter { - margin-left: .25rem; - margin-right: .75rem; + margin: 0 .25rem; } } } @@ -83,12 +82,28 @@ transform: translateX(#{-$widthRegular}); } + &-link-apply { + color: $color-blue; + font-size: 2rem; + + &-container { + display: flex; + align-items: center; + opacity: 0; + transition: opacity var(--layer-transition); + pointer-events: none; + } + } + .input-clear { flex: 1 1 auto; text-overflow: ellipsis; - } - &.no-transition { - transition: none; + margin: 0 .5rem; + + &.is-valid + .markup-tooltip-link-apply-container { + opacity: 1; + pointer-events: all; + } } } \ No newline at end of file