From 09b39e78a11f6042a1143545d69248a77c59735d Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 3 Apr 2021 01:45:51 +0400 Subject: [PATCH] Night theme improvements --- src/components/chat/bubbles.ts | 19 ++++++- src/components/chat/input.ts | 4 ++ src/components/popups/stickers.ts | 16 +++--- src/components/ripple.ts | 4 +- src/components/sidebarLeft/index.ts | 11 +++- src/components/sidebarLeft/tabs/background.ts | 14 +---- .../sidebarRight/tabs/sharedMedia.ts | 8 ++- src/components/sidebarRight/tabs/stickers.ts | 2 +- src/helpers/color.ts | 14 ++++- src/index.hbs | 5 ++ src/lang.ts | 18 ++---- src/lib/appManagers/appImManager.ts | 15 +++-- src/lib/appManagers/appStateManager.ts | 6 +- src/scss/components/_global.scss | 4 ++ src/scss/partials/_button.scss | 1 + src/scss/partials/_chat.scss | 25 +++++---- src/scss/partials/_chatBubble.scss | 53 ++++++++++++------ src/scss/partials/_chatPinned.scss | 19 +++++-- src/scss/partials/_chatSearch.scss | 6 +- src/scss/partials/_checkbox.scss | 2 +- src/scss/partials/_input.scss | 7 ++- src/scss/partials/_leftSidebar.scss | 8 +-- src/scss/partials/_poll.scss | 2 +- src/scss/partials/_scrollable.scss | 7 ++- src/scss/partials/_selector.scss | 6 +- src/scss/partials/popups/_datePicker.scss | 14 ++--- src/scss/partials/popups/_popup.scss | 1 - src/scss/partials/popups/_stickers.scss | 9 +++ src/scss/style.scss | 44 +++++++++------ tweb design/March 2021/Day.png | Bin 0 -> 1451798 bytes tweb design/March 2021/Day_Alert.png | Bin 0 -> 1228918 bytes tweb design/March 2021/Day_Appearance.png | Bin 0 -> 1105040 bytes tweb design/March 2021/Day_Menu.png | Bin 0 -> 1261842 bytes tweb design/March 2021/Day_Profile.png | Bin 0 -> 3321568 bytes tweb design/March 2021/Day_Profile_Full.png | Bin 0 -> 3177892 bytes tweb design/March 2021/Day_Settings.png | Bin 0 -> 1759367 bytes tweb design/March 2021/Night.png | Bin 0 -> 937358 bytes tweb design/March 2021/Night_Alert.png | Bin 0 -> 882282 bytes tweb design/March 2021/Night_Appearance.png | Bin 0 -> 610616 bytes tweb design/March 2021/Night_Menu.png | Bin 0 -> 756933 bytes tweb design/March 2021/Night_Profile.png | Bin 0 -> 3033241 bytes tweb design/March 2021/Night_Profile_Full.png | Bin 0 -> 2877931 bytes tweb design/March 2021/Night_Settings.png | Bin 0 -> 1248202 bytes 43 files changed, 219 insertions(+), 125 deletions(-) create mode 100644 tweb design/March 2021/Day.png create mode 100644 tweb design/March 2021/Day_Alert.png create mode 100644 tweb design/March 2021/Day_Appearance.png create mode 100644 tweb design/March 2021/Day_Menu.png create mode 100644 tweb design/March 2021/Day_Profile.png create mode 100644 tweb design/March 2021/Day_Profile_Full.png create mode 100644 tweb design/March 2021/Day_Settings.png create mode 100644 tweb design/March 2021/Night.png create mode 100644 tweb design/March 2021/Night_Alert.png create mode 100644 tweb design/March 2021/Night_Appearance.png create mode 100644 tweb design/March 2021/Night_Menu.png create mode 100644 tweb design/March 2021/Night_Profile.png create mode 100644 tweb design/March 2021/Night_Profile_Full.png create mode 100644 tweb design/March 2021/Night_Settings.png diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 1b4188dea..6f016bf0e 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -2515,6 +2515,8 @@ export default class ChatBubbles { if(canHaveTail) { bubble.classList.add('can-have-tail'); + + bubbleContainer.append(generateTail()); } return bubble; @@ -3097,4 +3099,19 @@ export default class ChatBubbles { } } } -} \ No newline at end of file +} + +export function generateTail() { + const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttributeNS(null, 'viewBox', '0 0 11 20'); + svg.setAttributeNS(null, 'width', '11'); + svg.setAttributeNS(null, 'height', '20'); + svg.classList.add('bubble-tail'); + + const use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + use.setAttributeNS(null, 'href', '#message-tail-filled'); + + svg.append(use); + + return svg; +} diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index cd347e407..da94ab196 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -39,6 +39,7 @@ import { tsNow } from '../../helpers/date'; import appNavigationController from '../appNavigationController'; import { isMobile } from '../../helpers/userAgent'; import { i18n } from '../../lib/langPack'; +import { generateTail } from './bubbles'; const RECORD_MIN_TIME = 500; const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.'; @@ -136,6 +137,9 @@ export default class ChatInput { this.rowsWrapper = document.createElement('div'); this.rowsWrapper.classList.add('rows-wrapper', 'chat-input-wrapper'); + const tail = generateTail(); + this.rowsWrapper.append(tail); + const fakeRowsWrapper = this.fakeRowsWrapper = document.createElement('div'); fakeRowsWrapper.classList.add('fake-wrapper', 'fake-rows-wrapper'); diff --git a/src/components/popups/stickers.ts b/src/components/popups/stickers.ts index bc9f102f5..be394b73a 100644 --- a/src/components/popups/stickers.ts +++ b/src/components/popups/stickers.ts @@ -44,16 +44,17 @@ export default class PopupStickers extends PopupElement { div.classList.add('sticker-set'); this.stickersDiv = document.createElement('div'); - this.stickersDiv.classList.add('sticker-set-stickers'); + this.stickersDiv.classList.add('sticker-set-stickers', 'is-loading'); - putPreloader(this.stickersDiv); + putPreloader(this.stickersDiv, true); this.stickersFooter = document.createElement('div'); this.stickersFooter.classList.add('sticker-set-footer'); div.append(this.stickersDiv); - this.stickersFooter.append(i18n('Loading')); + const btn = Button('btn-primary btn-primary-transparent disable-hover', {noRipple: true, text: 'Loading'}); + this.stickersFooter.append(btn); this.body.append(div); const scrollable = new Scrollable(this.body); @@ -98,15 +99,15 @@ export default class PopupStickers extends PopupElement { animationIntersector.setOnlyOnePlayableGroup(ANIMATION_GROUP); this.h6.innerHTML = RichTextProcessor.wrapEmojiText(set.set.title); - !set.set.installed_date ? this.stickersFooter.classList.add('add') : this.stickersFooter.classList.remove('add'); + this.stickersFooter.classList.toggle('add', !set.set.installed_date); let button: HTMLElement; - if(set.set.hasOwnProperty('installed_date')) { + if(set.set.installed_date) { button = Button('btn-primary btn-primary-transparent danger', {noRipple: true}); - button.append(i18n('StickerPack.Remove', [set.set.count])); + button.append(i18n('RemoveStickersCount', [i18n('Stickers', [set.set.count])])); } else { button = Button('btn-primary btn-color-primary', {noRipple: true}); - button.append(i18n('StickerPack.Add1', [set.set.count])); + button.append(i18n('AddStickersCount', [i18n('Stickers', [set.set.count])])); } this.stickersFooter.textContent = ''; @@ -120,6 +121,7 @@ export default class PopupStickers extends PopupElement { const lazyLoadQueue = new LazyLoadQueue(); + this.stickersDiv.classList.remove('is-loading'); this.stickersDiv.innerHTML = ''; for(let doc of set.documents) { if(doc._ === 'documentEmpty') { diff --git a/src/components/ripple.ts b/src/components/ripple.ts index 4834976f1..509686773 100644 --- a/src/components/ripple.ts +++ b/src/components/ripple.ts @@ -147,7 +147,7 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise 1 || touchStartFired - || ((e.target as HTMLElement).tagName === 'BUTTON' && e.target !== elem) + || (['BUTTON', 'A'].includes((e.target as HTMLElement).tagName) && e.target !== elem) || findUpClassName(e.target as HTMLElement, 'c-ripple') !== r) { return; } @@ -177,7 +177,7 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise { }, - checkboxField: new CheckboxField({toggle: true}) + checkboxField: new CheckboxField({ + toggle: true, + stateKey: 'settings.nightTheme', + }) }, { icon: 'lamp', text: 'Animations', onClick: () => { }, - checkboxField: new CheckboxField({toggle: true, checked: true}) + checkboxField: new CheckboxField({ + toggle: true, + checked: true, + stateKey: 'settings.animationsEnabled', + }) }, { icon: 'help', text: 'SettingsHelp', diff --git a/src/components/sidebarLeft/tabs/background.ts b/src/components/sidebarLeft/tabs/background.ts index 5b2dba000..9c6094cfe 100644 --- a/src/components/sidebarLeft/tabs/background.ts +++ b/src/components/sidebarLeft/tabs/background.ts @@ -2,7 +2,7 @@ import { generateSection } from ".."; import { averageColor } from "../../../helpers/averageColor"; import blur from "../../../helpers/blur"; import { deferredPromise } from "../../../helpers/cancellablePromise"; -import { rgbToHsl } from "../../../helpers/color"; +import { highlightningColor, rgbToHsl } from "../../../helpers/color"; import { attachClickEvent, findUpClassName } from "../../../helpers/dom"; import { AccountWallPapers, WallPaper } from "../../../layer"; import appDocsManager, { MyDocument } from "../../../lib/appManagers/appDocsManager"; @@ -56,18 +56,6 @@ export default class AppBackgroundTab extends SliderSuperTab { }); }; - // * https://github.com/TelegramMessenger/Telegram-iOS/blob/3d062fff78cc6b287c74e6171f855a3500c0156d/submodules/TelegramPresentationData/Sources/PresentationData.swift#L453 - const highlightningColor = (pixel: Uint8ClampedArray) => { - let {h, s, l} = rgbToHsl(pixel[0], pixel[1], pixel[2]); - if(s > 0.0) { - s = Math.min(1.0, s + 0.05 + 0.1 * (1.0 - s)); - } - l = Math.max(0.0, l * 0.65); - - const hsla = `hsla(${h * 360}, ${s * 100}%, ${l * 100}%, .4)`; - return hsla; - }; - let tempId = 0; const setBackgroundDocument = (slug: string, doc: MyDocument) => { let _tempId = ++tempId; diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts index 464048197..739beb602 100644 --- a/src/components/sidebarRight/tabs/sharedMedia.ts +++ b/src/components/sidebarRight/tabs/sharedMedia.ts @@ -132,7 +132,11 @@ export default class AppSharedMediaTab extends SliderSuperTab { title: ' ', subtitleLangKey: 'UserBio', icon: 'info', - clickable: () => { + clickable: (e) => { + if((e.target as HTMLElement).tagName === 'A') { + return; + } + appProfileManager.getProfileByPeerId(this.peerId).then(full => { copyTextToClipboard(full.about); toast(I18n.format('BioCopied', true)); @@ -140,6 +144,8 @@ export default class AppSharedMediaTab extends SliderSuperTab { } }); + this.profileElements.bio.title.classList.add('pre-wrap'); + this.profileElements.username = new Row({ title: ' ', subtitleLangKey: 'Username', diff --git a/src/components/sidebarRight/tabs/stickers.ts b/src/components/sidebarRight/tabs/stickers.ts index 2f77bd093..1ab406903 100644 --- a/src/components/sidebarRight/tabs/stickers.ts +++ b/src/components/sidebarRight/tabs/stickers.ts @@ -97,7 +97,7 @@ export default class AppStickersTab extends SliderSuperTab { const countDiv = document.createElement('div'); countDiv.classList.add('sticker-set-count'); - countDiv.append(i18n('Stickers.Count', [set.count])); + countDiv.append(i18n('Stickers', [set.count])); details.append(countDiv); const button = document.createElement('button'); diff --git a/src/helpers/color.ts b/src/helpers/color.ts index 1962a0229..425a02c56 100644 --- a/src/helpers/color.ts +++ b/src/helpers/color.ts @@ -28,4 +28,16 @@ export function rgbToHsl(r: number, g: number, b: number) { s: s, l: l, }); -} \ No newline at end of file +} + +// * https://github.com/TelegramMessenger/Telegram-iOS/blob/3d062fff78cc6b287c74e6171f855a3500c0156d/submodules/TelegramPresentationData/Sources/PresentationData.swift#L453 +export function highlightningColor(pixel: Uint8ClampedArray) { + let {h, s, l} = rgbToHsl(pixel[0], pixel[1], pixel[2]); + if(s > 0.0) { + s = Math.min(1.0, s + 0.05 + 0.1 * (1.0 - s)); + } + l = Math.max(0.0, l * 0.65); + + const hsla = `hsla(${h * 360}, ${s * 100}%, ${l * 100}%, .4)`; + return hsla; +}; diff --git a/src/index.hbs b/src/index.hbs index 2fe9c8538..d3ec4271c 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -83,6 +83,11 @@