feat: support to set dark icon for customized tab (#932)

* feat: support to set dark icon for customized tab * chore: add docs
ringcentral · Dec 13, 2024 · c8b9caa · c8b9caa
1 parent d8119f5
commit c8b9caa
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/docs/integration/custom-tab.md b/docs/integration/custom-tab.md
@@ -13,8 +13,9 @@ document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
     id: 'tabID', // tab id, required
     title: 'CRM',
     type: 'tab', // tab type
-    iconUri: 'https://xxx/icon.png', // icon for tab, 24x24
-    activeIconUri: 'https://xxx/icon-active.png', // icon for tab in active status, 24x24
+    iconUri: 'https://xxx/icon.png', // icon for tab, 24x24, recommended color: #16181D
+    activeIconUri: 'https://xxx/icon-active.png', // icon for tab in active status, 24x24, recommended color: ##2559E4
+    darkIconUri: 'https://xxx/icon-dark.png', // Supported from v2.2.1, icon for tab in dark mode, 24x24, recommended color: #ffffff
     hidden: false, // optional, default false, whether to hide the tab icon from navigation bar
     unreadCount: 0, // optional, unread count, 0-99
     priority: 31, // tab priority, 0-100, 0 is the highest priority, Phone tab: 10, Text: 20, Fax: 30, Glip: 40, Contacts: 50, Video: 60, Settings: 70

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ringcentral-embeddable",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A RingCentral Embeddable Widget Application",
   "main": "index.js",
   "license": "MIT",

diff --git a/src/components/MainViewPanel/index.tsx b/src/components/MainViewPanel/index.tsx
@@ -60,6 +60,7 @@ export const MainViewPanel = (props) => {
     smsUnreadCounts,
     voiceUnreadCounts,
     customizedTabs = [],
+    themeType,
   } = props;
   const tabList: Tab[] = [];
   if (showPhone) {
@@ -212,6 +213,10 @@ export const MainViewPanel = (props) => {
     if (customTab.hidden) {
       return;
     }
+    let iconUri = customTab.iconUri;
+    if (themeType === 'dark' && customTab.darkIconUri) {
+      iconUri = customTab.darkIconUri;
+    }
     tabList.push({
       label: customTab.label,
       path: customTab.path,
@@ -220,7 +225,7 @@ export const MainViewPanel = (props) => {
       showHeader: () => true,
       showHeaderBorder: true,
       priority: customTab.priority,
-      iconUri: customTab.iconUri,
+      iconUri,
       activeIconUri: customTab.activeIconUri,
     });
   });

diff --git a/src/modules/MainViewUI/index.ts b/src/modules/MainViewUI/index.ts
@@ -14,6 +14,7 @@ import { RcUIModuleV2 } from '@ringcentral-integration/core';
     'ThirdPartyService',
     'Brand',
     'PhoneTabsUI',
+    'Theme',
   ],
 })
 export class MainViewUI extends RcUIModuleV2 {
@@ -33,6 +34,7 @@ export class MainViewUI extends RcUIModuleV2 {
       brand,
       thirdPartyService,
       phoneTabsUI,
+      theme,
     } = this._deps;
 
     const showPhone = appFeatures.ready && (
@@ -68,6 +70,7 @@ export class MainViewUI extends RcUIModuleV2 {
       faxUnreadCounts: messageStore.faxUnreadCounts || 0,
       voiceUnreadCounts: messageStore.voiceUnreadCounts || 0,
       customizedTabs: thirdPartyService.customizedTabs,
+      themeType: theme.themeType,
     };
   }
 

diff --git a/src/modules/ThirdPartyService/index.ts b/src/modules/ThirdPartyService/index.ts
@@ -1509,6 +1509,7 @@ export default class ThirdPartyService extends RcModuleV2 {
       label: tab.title,
       iconUri: tab.iconUri,
       activeIconUri: tab.activeIconUri,
+      darkIconUri: tab.darkIconUri,
       priority: tab.priority,
       unreadCount: tab.unreadCount,
       path: `/customizedTabs/${tab.id}`,