Changed tab icons from glyphs to svg.

microsoft · Apr 15, 2019 · 04211bf · 04211bf
1 parent 413cfd5
commit 04211bf
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [build] Bumped electron version to v4.1.1 and updated .dmg installer background image in PR [1419](https://github.com/Microsoft/BotFramework-Emulator/pull/1419)
 - [ui-react] Added default disabled styling to checkbox control in PR [1424](https://github.com/Microsoft/BotFramework-Emulator/pull/1424)
 - [client] Fixed issue where BOM wasn't being stripped from transcripts opened via the File menu in PR [1425](https://github.com/Microsoft/BotFramework-Emulator/pull/1425)
+- [client] Fixed issue where tab icon glyphs weren't working on Mac in PR [1428](https://github.com/Microsoft/BotFramework-Emulator/pull/1428)
 
 ## Removed
 - [main] Removed custom user agent string from outgoing requests in PR [1427](https://github.com/Microsoft/BotFramework-Emulator/pull/1427)

diff --git a/packages/app/client/src/ui/shell/mdi/tab/tab.scss b/packages/app/client/src/ui/shell/mdi/tab/tab.scss
@@ -5,7 +5,7 @@
   background-color: var(--tab-bg);
   color: var(--tab-color);
   cursor: pointer;
-  padding: 4px 8px;
+  padding: 4px 12px;
   box-sizing: border-box;
   white-space: nowrap;
   position: relative;
@@ -33,16 +33,23 @@
 
   & > .editor-tab-icon {
     display: inline-block;
+    height: 12px;
     width: 12px;
     margin-right: 8px;
+    background-color: var(--tab-icon-color);
+    -webkit-mask-size: 12px;
 
-    &::before {
-      content: "🗋";
-      transform: rotate(180deg) skewX(180deg) scaleX(1.3);
-      display: inline-block;
-      color: var(--tab-icon-color);
-      padding-right: 5px;
-      padding-left: 8px;
+    &.livechat {
+      -webkit-mask: url('../../../media/ic_bot_explorer.svg') no-repeat;
+    }
+
+    &.settings {
+      -webkit-mask: url('../../../media/ic_settings.svg') no-repeat;
+    }
+
+    &.generic {
+      -webkit-mask: url('../../../media/ic_bot_framework.svg') no-repeat;
+      background-color: #007ACC;
     }
   }
 

diff --git a/packages/app/client/src/ui/shell/mdi/tab/tab.scss.d.ts b/packages/app/client/src/ui/shell/mdi/tab/tab.scss.d.ts
@@ -1,6 +1,9 @@
 // This is a generated file. Changes are likely to result in being overwritten
 export const tab: string;
 export const editorTabIcon: string;
+export const livechat: string;
+export const settings: string;
+export const generic: string;
 export const editorTabClose: string;
 export const truncatedTabText: string;
 export const draggedOverEditorTab: string;

diff --git a/packages/app/client/src/ui/shell/mdi/tab/tab.spec.tsx b/packages/app/client/src/ui/shell/mdi/tab/tab.spec.tsx
@@ -41,7 +41,11 @@ import { toggleDraggingTab } from '../../../../data/action/editorActions';
 import { TabContainer } from './tabContainer';
 import { Tab } from './tab';
 
-jest.mock('./tab.scss', () => ({}));
+jest.mock('./tab.scss', () => ({
+  generic: 'generic',
+  livechat: 'livechat',
+  settings: 'settings',
+}));
 jest.mock('../../../dialogs', () => ({}));
 
 describe('Tab', () => {
@@ -187,4 +191,21 @@ describe('Tab', () => {
 
     expect(mockDispatch).toHaveBeenCalled();
   });
+
+  it('should get an icon class', () => {
+    wrapper = mount(<Tab documentId={'welcome-page'} />);
+    instance = wrapper.find(Tab).instance();
+
+    expect(instance.iconClass).toBe('generic');
+
+    wrapper = mount(<Tab documentId={'app:settings'} />);
+    instance = wrapper.find(Tab).instance();
+
+    expect(instance.iconClass).toBe('settings');
+
+    wrapper = mount(<Tab documentId={'some-conversation-hash'} />);
+    instance = wrapper.find(Tab).instance();
+
+    expect(instance.iconClass).toBe('livechat');
+  });
 });
diff --git a/packages/app/client/src/ui/shell/mdi/tab/tab.tsx b/packages/app/client/src/ui/shell/mdi/tab/tab.tsx
@@ -68,6 +68,7 @@ export class Tab extends React.Component<TabProps, TabState> {
     const activeClassName = this.props.active ? styles.activeEditorTab : '';
     const draggedOverClassName = this.state.draggedOver ? styles.draggedOverEditorTab : '';
     const { label } = this.props;
+    const iconClass = this.iconClass;
 
     return (
       <div
@@ -80,7 +81,7 @@ export class Tab extends React.Component<TabProps, TabState> {
         onDragLeave={this.onDragLeave}
         onDragEnd={this.onDragEnd}
       >
-        <span className={styles.editorTabIcon} />
+        <span className={`${styles.editorTabIcon} ${iconClass}`} />
         <TruncateText className={styles.truncatedTabText}>{label}</TruncateText>
         {this.props.dirty ? <span>*</span> : null}
         <div className={styles.tabSeparator} />
@@ -150,4 +151,17 @@ export class Tab extends React.Component<TabProps, TabState> {
     e.preventDefault();
     e.stopPropagation();
   };
+
+  private get iconClass(): string {
+    switch (this.props.documentId) {
+      case 'welcome-page':
+        return styles.generic;
+
+      case 'app:settings':
+        return styles.settings;
+
+      default:
+        return styles.livechat;
+    }
+  }
 }