feat: add global items in actiitybar

Author: wewoor

src/core/workbench/activityBar.ts

@@ -23,6 +23,7 @@ export interface IActivityBarItem {
     data?: any;
     iconName?: string;
     checked?: boolean;
+    type?: 'normal' | 'global';
     render?: () => React.ReactNode | JSX.Element;
     onClick?: (event: React.MouseEvent, item: IActivityBarItem) => void;
 }

src/extensions/activityBar/package.json

@@ -0,0 +1,13 @@
+{
+	"name": "activitybar",
+	"displayName": "Test extension",
+	"description": "This is a test ",
+	"version": "1.0.0",
+	"publisher": "vscode",
+	"license": "MIT",
+	"engines": {
+		"vscode": "*"
+	},
+	"kindOf": ["ui"],
+	"main": "./src/index"
+}

src/extensions/activityBar/src/index.tsx

@@ -0,0 +1,35 @@
+import { activityBar } from 'mo/index';
+import { ActivityBarEvent, IActivityBarItem } from 'mo/core/workbench/activityBar';
+import { ExtensionService } from 'mo/services/extensionService';
+
+function initActivityBar(extensionCtx: ExtensionService) {
+    const globalSettings: IActivityBarItem = {
+        id: 'global-settings',
+        name: 'Settings',
+        iconName: 'codicon-settings-gear',
+        type: 'global',
+        onClick: function(e, options) {
+
+        },
+    };
+
+    const globalUserAccount: IActivityBarItem = {
+        id: 'global-Account',
+        name: 'Account',
+        iconName: 'codicon-account',
+        type: 'global',
+        onClick: function(e, options) {
+
+        },
+    };
+
+    activityBar.push([globalUserAccount, globalSettings]);
+
+    activityBar.subscribe(ActivityBarEvent.OnClick, (data) => {
+        console.log('Explore activityBar subscribe onClick:', data);
+    });
+}
+
+export function activate(extensionCtx: ExtensionService) {
+    initActivityBar(extensionCtx);
+}

src/extensions/explore/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "activitybar",
+	"name": "explore",
 	"displayName": "Test extension",
 	"description": "This is a test ",
 	"version": "1.0.0",

src/extensions/explore/src/index.tsx

@@ -14,7 +14,6 @@ function initActivityBar(extensionCtx: ExtensionService) {
 
         },
     };
-
     activityBar.push([folderFeat]);
 
     activityBar.subscribe(ActivityBarEvent.OnClick, (data) => {

src/extensions/index.ts

@@ -1,16 +1,19 @@
-/**
- * Default extensions
- */
-
 import { IExtension, IExtensionEntry } from 'mo/core/extension';
 import * as ExploreBarPkg from './explore/package.json';
 import * as SearchBarPkg from './search/package.json';
+import * as ActivityBarPkg from './activityBar/package.json';
+
+/**
+ * Default extensions
+ */
 
 const requireContext = require.context('./');
 
 const ExploreBar: IExtension = ExploreBarPkg as any; // require('./explore/package.json');
 ExploreBar.activate = require('./explore/src/index').activate;
 
+const ActivityBar: IExtension = ActivityBarPkg as any; // require('./explore/package.json');
+ActivityBar.activate = require('./activityBar/src/index').activate;
 
 const SearchBar: IExtension = SearchBarPkg as any; // require('./search/package.json');
 SearchBar.activate = require('./search/src/index').activate;
@@ -21,9 +24,8 @@ export const defaultExtensions: IExtensionEntry = {
     location: requireContext,
     extensions: [
         ExploreBar,
+        ActivityBar,
         SearchBar,
         Themes,
-        // 'theme-defaults',
-        // 'theme-monokai',
     ],
 };

src/workbench/activityBar/activityBar.tsx

@@ -10,23 +10,37 @@ export interface IActivityBarProps {
 
 function ActivityBar(props: IActivityBar) {
     const { data, render, selected, onClick } = props;
-    let content: React.ReactNode = data?.map((item: IActivityBarItem, index: number) => (
-        <ActivityBarItem key={item.id} {...item} data-index={index} checked={selected === item.id}/>
-    ));
+
     if (render) {
-        content = render();
+        return (
+            <div className={prefixClaName(SYMBOL_ACTIVITY_BAR)}>
+                {render()}
+            </div>
+        );
     }
 
+    const normalBarItems = data?.filter((item: IActivityBarItem) => !item.type || item.type === 'normal');
+    const globalBarItems = data?.filter((item: IActivityBarItem) => item.type && item.type === 'global');
+
+    const renderItems = (item: IActivityBarItem, index: number) => (
+        <ActivityBarItem key={item.id} {...item} data-index={index} checked={selected === item.id}/>
+    );
+
     const click = (e: React.MouseEvent) => {
         console.log('ActivityBar onClick:', e);
         onClick(e, {} as any );
     };
 
     return (
-        <div className={prefixClaName(SYMBOL_ACTIVITY_BAR)} onClick={click}>
-            <ul className={prefixClaName('container', SYMBOL_ACTIVITY_BAR)}>
-                {content}
-            </ul>
+        <div className={prefixClaName(SYMBOL_ACTIVITY_BAR)} id={SYMBOL_ACTIVITY_BAR} onClick={click}>
+            <div className={prefixClaName('container', SYMBOL_ACTIVITY_BAR)}>
+                <ul className={'normal-items'}>
+                    {normalBarItems.map(renderItems)}
+                </ul>
+                <ul className={'global-items'}>
+                    {globalBarItems.map(renderItems)}
+                </ul>
+            </div>
         </div>
     );
 };

src/workbench/activityBar/style.scss

@@ -8,20 +8,30 @@
     width: 48px;
     z-index: 1;
 
-    .#{$activityBar}-container {
+    .active-item-indicator {
         height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 2px;
+    }
+}
+
+.#{$activityBar}-container {
+    height: 100%;
+    position: relative;
+    width: 100%;
+    
+    ul {
         margin: 0;
         padding: 0;
-        position: relative;
-        width: 100%;
     }
 
-    .active-item-indicator {
-        height: 100%;
+    .global-items {
+        bottom: 0;
         left: 0;
         position: absolute;
-        top: 0;
-        width: 2px;
+        right: 0;
     }
 }
 

src/workbench/index.tsx

@@ -16,7 +16,6 @@ import { SidebarView } from 'mo/workbench/sidebar';
 import { MenuBarView } from 'mo/workbench/menuBar';
 import { ActivityBarView } from 'mo/workbench/activityBar';
 import StatusBar from 'mo/workbench/statusBar';
-import SettingsBar from 'mo/workbench/settings';
 import Panel from 'mo/workbench/panel';
 
 export interface IWorkbenchProps {
@@ -66,7 +65,6 @@ export function Workbench(props: IWorkbenchProps) {
                 <ActivityBarProvider>
                     <ActivityBarView />
                 </ActivityBarProvider>
-                <SettingsBar />
                 <MainBench/>
             </div>
             <StatusBar />

src/workbench/settings/index.tsx

@@ -4,12 +4,12 @@ import { memo } from 'react';
 
 import { prefixClaName } from 'mo/common/className';
 
-export function SettingBar() {
+export function Settings() {
     return (
         <div className={prefixClaName('settings')}>
-            <a className='settings-action codicon codicon-settings-gear'></a>
+            Settings
         </div>
     );
 };
 
-export default memo(SettingBar);
+export default memo(Settings);