From f04f4f676a0f4740625635ad94d3798c2580a68d Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 27 Apr 2023 11:23:35 -0300 Subject: [PATCH 1/4] fix: change selector to get the correct sidebar color. fix loop --- src/servers/preload/sidebar.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/servers/preload/sidebar.ts b/src/servers/preload/sidebar.ts index 0f8a00205e..f9858caad0 100644 --- a/src/servers/preload/sidebar.ts +++ b/src/servers/preload/sidebar.ts @@ -15,18 +15,21 @@ const pollSidebarStyle = ( document.body.append(referenceElement); const { background, color } = window.getComputedStyle(referenceElement); + referenceElement.remove(); + const newBgg = prevBackground !== background ? background : prevBackground; + const newColor = prevColor !== color ? color : prevColor; + if (prevBackground !== background || prevColor !== color) { emit({ - background, - color, + background: newBgg, + color: newColor, }); prevBackground = background; prevColor = color; + timer = setTimeout(() => pollSidebarStyle(referenceElement, emit), 1000); } - - timer = setTimeout(() => pollSidebarStyle(referenceElement, emit), 1000); }; let element: HTMLElement; @@ -34,7 +37,7 @@ let element: HTMLElement; const getElement = (): HTMLElement => { if (!element) { element = document.createElement('div'); - element.classList.add('sidebar'); + element.classList.add('rcx-sidebar--main'); element.style.backgroundColor = 'var(--sidebar-background)'; element.style.color = 'var(--sidebar-item-text-color)'; element.style.display = 'none'; From b2d1e32aebe063423a84129ecd91bf7f2ad60bfe Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 27 Apr 2023 14:28:14 -0300 Subject: [PATCH 2/4] fix: revert timeout --- src/servers/preload/sidebar.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/servers/preload/sidebar.ts b/src/servers/preload/sidebar.ts index f9858caad0..9d98a944cf 100644 --- a/src/servers/preload/sidebar.ts +++ b/src/servers/preload/sidebar.ts @@ -28,8 +28,9 @@ const pollSidebarStyle = ( }); prevBackground = background; prevColor = color; - timer = setTimeout(() => pollSidebarStyle(referenceElement, emit), 1000); } + + timer = setTimeout(() => pollSidebarStyle(referenceElement, emit), 5000); }; let element: HTMLElement; From 74101225493ecd2ca30a1bb63ca8e8f909f801a9 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 4 May 2023 23:26:34 -0300 Subject: [PATCH 3/4] apply border --- src/servers/common.ts | 1 + src/servers/preload/sidebar.ts | 14 ++++++++++++-- src/ui/components/SideBar/styles.tsx | 6 +++++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/servers/common.ts b/src/servers/common.ts index 6fc382f020..fd69241105 100644 --- a/src/servers/common.ts +++ b/src/servers/common.ts @@ -6,6 +6,7 @@ export type Server = { style?: { background: string | null; color: string | null; + border: string | null; }; lastPath?: string; failed?: boolean; diff --git a/src/servers/preload/sidebar.ts b/src/servers/preload/sidebar.ts index 9d98a944cf..6042e8a464 100644 --- a/src/servers/preload/sidebar.ts +++ b/src/servers/preload/sidebar.ts @@ -6,6 +6,7 @@ import { getServerUrl, getAbsoluteUrl } from './urls'; let timer: ReturnType; let prevBackground: string; let prevColor: string; +let prevBorder: string; const pollSidebarStyle = ( referenceElement: Element, @@ -14,20 +15,28 @@ const pollSidebarStyle = ( clearTimeout(timer); document.body.append(referenceElement); - const { background, color } = window.getComputedStyle(referenceElement); + const { background, color, border } = + window.getComputedStyle(referenceElement); referenceElement.remove(); const newBgg = prevBackground !== background ? background : prevBackground; const newColor = prevColor !== color ? color : prevColor; + const newBorder = prevBorder !== border ? border : prevBorder; - if (prevBackground !== background || prevColor !== color) { + if ( + prevBackground !== background || + prevColor !== color || + newBorder !== border + ) { emit({ background: newBgg, color: newColor, + border: newBorder, }); prevBackground = background; prevColor = color; + prevBorder = border; } timer = setTimeout(() => pollSidebarStyle(referenceElement, emit), 5000); @@ -41,6 +50,7 @@ const getElement = (): HTMLElement => { element.classList.add('rcx-sidebar--main'); element.style.backgroundColor = 'var(--sidebar-background)'; element.style.color = 'var(--sidebar-item-text-color)'; + element.style.border = '1px solid var(--sidebar-border-color)'; element.style.display = 'none'; } diff --git a/src/ui/components/SideBar/styles.tsx b/src/ui/components/SideBar/styles.tsx index b9959c1ea3..dc1d75c438 100644 --- a/src/ui/components/SideBar/styles.tsx +++ b/src/ui/components/SideBar/styles.tsx @@ -7,6 +7,7 @@ type WrapperProps = { sideBarStyle: { background?: string; color?: string; + border?: string; }; isVisible: boolean; }; @@ -32,6 +33,10 @@ export const Wrapper = styled.div` ${({ sideBarStyle: { color } }) => css` color: ${color ?? '#ffffff'}; + `} + ${({ sideBarStyle: { border } }) => + css` + border: ${border ?? 'none'}; `} ${({ isVisible }) => !isVisible && @@ -50,7 +55,6 @@ export const Content = styled.div` flex-direction: column; flex: 1 1 0; padding-top: 10px; - background-color: rgba(0, 0, 0, 0.1); align-items: stretch; ${({ withWindowButtons }) => From 454293fff3e8a453ed8a58bcac0e358e8ad6cb1c Mon Sep 17 00:00:00 2001 From: Jean Brito Date: Wed, 17 May 2023 15:00:24 -0300 Subject: [PATCH 4/4] make new sidebar color work with older versions --- src/servers/preload/api.ts | 3 ++- src/servers/preload/sidebar.ts | 35 ++++++++++++++++++++++++++++++++-- 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/servers/preload/api.ts b/src/servers/preload/api.ts index 77aace19cc..aef5eda651 100644 --- a/src/servers/preload/api.ts +++ b/src/servers/preload/api.ts @@ -12,7 +12,7 @@ import { getInternalVideoChatWindowEnabled, openInternalVideoChatWindow, } from './internalVideoChatWindow'; -import { setBackground } from './sidebar'; +import { setBackground, setServerVersionToSidebar } from './sidebar'; import { setTitle } from './title'; import { setUrlResolver } from './urls'; import { setUserLoggedIn } from './userLoggedIn'; @@ -62,6 +62,7 @@ export const RocketChatDesktop: RocketChatDesktopAPI = { setServerInfo: (_serverInfo) => { serverInfo = _serverInfo; cb(_serverInfo); + setServerVersionToSidebar(_serverInfo.version); }, setUrlResolver, setBadge, diff --git a/src/servers/preload/sidebar.ts b/src/servers/preload/sidebar.ts index 6042e8a464..8762270e32 100644 --- a/src/servers/preload/sidebar.ts +++ b/src/servers/preload/sidebar.ts @@ -7,6 +7,29 @@ let timer: ReturnType; let prevBackground: string; let prevColor: string; let prevBorder: string; +let serverVersion: string; + +function versionIsGreaterOrEqualsTo( + version1: string, + version2: string +): boolean { + const v1 = version1.match(/\d+/g)?.map(Number) || []; + const v2 = version2.match(/\d+/g)?.map(Number) || []; + + for (let i = 0; i < 3; i++) { + const n1 = v1[i] || 0; + const n2 = v2[i] || 0; + + if (n1 > n2) { + return true; + } + if (n1 < n2) { + return false; + } + } + + return true; +} const pollSidebarStyle = ( referenceElement: Element, @@ -47,16 +70,24 @@ let element: HTMLElement; const getElement = (): HTMLElement => { if (!element) { element = document.createElement('div'); - element.classList.add('rcx-sidebar--main'); element.style.backgroundColor = 'var(--sidebar-background)'; element.style.color = 'var(--sidebar-item-text-color)'; - element.style.border = '1px solid var(--sidebar-border-color)'; element.style.display = 'none'; + if (versionIsGreaterOrEqualsTo(serverVersion, '6.3.0')) { + element.classList.add('rcx-sidebar--main'); + element.style.border = '1px solid var(--sidebar-border-color)'; + } else { + element.classList.add('sidebar'); + } } return element; }; +export const setServerVersionToSidebar = (version: string): void => { + serverVersion = version; +}; + export const setBackground = (imageUrl: string): void => { const element = getElement();