fix: Sidebar color (#2655)

* fix: change selector to get the correct sidebar color. fix loop * apply border * make new sidebar color work with older versions --------- Co-authored-by: Jean Brito <[email protected]>
RocketChat · May 17, 2023 · cf8ab50 · cf8ab50
1 parent f5c5c01
commit cf8ab50
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 8 deletions.
diff --git 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/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
@@ -6,6 +6,30 @@ import { getServerUrl, getAbsoluteUrl } from './urls';
 let timer: ReturnType<typeof setTimeout>;
 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,
@@ -14,35 +38,56 @@ const pollSidebarStyle = (
   clearTimeout(timer);
 
   document.body.append(referenceElement);
-  const { background, color } = window.getComputedStyle(referenceElement);
+  const { background, color, border } =
+    window.getComputedStyle(referenceElement);
+
   referenceElement.remove();
 
-  if (prevBackground !== background || prevColor !== color) {
+  const newBgg = prevBackground !== background ? background : prevBackground;
+  const newColor = prevColor !== color ? color : prevColor;
+  const newBorder = prevBorder !== border ? border : prevBorder;
+
+  if (
+    prevBackground !== background ||
+    prevColor !== color ||
+    newBorder !== border
+  ) {
     emit({
-      background,
-      color,
+      background: newBgg,
+      color: newColor,
+      border: newBorder,
     });
     prevBackground = background;
     prevColor = color;
+    prevBorder = border;
   }
 
-  timer = setTimeout(() => pollSidebarStyle(referenceElement, emit), 1000);
+  timer = setTimeout(() => pollSidebarStyle(referenceElement, emit), 5000);
 };
 
 let element: HTMLElement;
 
 const getElement = (): HTMLElement => {
   if (!element) {
     element = document.createElement('div');
-    element.classList.add('sidebar');
     element.style.backgroundColor = 'var(--sidebar-background)';
     element.style.color = 'var(--sidebar-item-text-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();
 

diff --git 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<WrapperProps>`
   ${({ sideBarStyle: { color } }) =>
     css`
       color: ${color ?? '#ffffff'};
+    `}
+  ${({ sideBarStyle: { border } }) =>
+    css`
+      border: ${border ?? 'none'};
     `}
 	${({ isVisible }) =>
     !isVisible &&
@@ -50,7 +55,6 @@ export const Content = styled.div<ContentProps>`
   flex-direction: column;
   flex: 1 1 0;
   padding-top: 10px;
-  background-color: rgba(0, 0, 0, 0.1);
   align-items: stretch;
 
   ${({ withWindowButtons }) =>