feat: add custom menubar sample for startup (opensumi#525)

henry-fun · Mar 2, 2022 · ce5784e · ce5784e
1 parent 33b00a9
commit ce5784e
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 2 deletions.
diff --git a/packages/startup/entry/sample-modules/index.ts b/packages/startup/entry/sample-modules/index.ts
@@ -2,9 +2,10 @@ import { Provider, Injectable } from '@opensumi/di';
 import { BrowserModule } from '@opensumi/ide-core-browser';
 
 import { EditorEmptyComponentContribution } from './editor-empty-component.contribution';
+import { MenuBarContribution } from './menu-bar/menu-bar.contribution';
 import { StatusBarContribution } from './status-bar.contribution';
 
 @Injectable()
 export class SampleModule extends BrowserModule {
-  providers: Provider[] = [EditorEmptyComponentContribution, StatusBarContribution];
+  providers: Provider[] = [MenuBarContribution, EditorEmptyComponentContribution, StatusBarContribution];
 }
diff --git a/packages/startup/entry/sample-modules/menu-bar/logo.svg b/packages/startup/entry/sample-modules/menu-bar/logo.svg
diff --git a/packages/startup/entry/sample-modules/menu-bar/menu-bar.contribution.ts b/packages/startup/entry/sample-modules/menu-bar/menu-bar.contribution.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@opensumi/di';
+import { ComponentContribution, ComponentRegistry, Domain } from '@opensumi/ide-core-browser';
+import { MenuBarView } from './menu-bar.view';
+
+@Injectable()
+@Domain(ComponentContribution)
+export class MenuBarContribution implements ComponentContribution {
+  // Component key
+  static MenuBarContainer = '@opensumi/menu-bar-example';
+
+  registerComponent(registry: ComponentRegistry): void {
+    registry.register(MenuBarContribution.MenuBarContainer, {
+      component: MenuBarView,
+      id: MenuBarContribution.MenuBarContainer,
+    });
+  }
+}
diff --git a/packages/startup/entry/sample-modules/menu-bar/menu-bar.module.css b/packages/startup/entry/sample-modules/menu-bar/menu-bar.module.css
@@ -0,0 +1,16 @@
+.menu_bar_view {
+  display: flex;
+  background-color: var(--kt-menubar-background);
+  height: var(--tabBar-height);
+  align-items: center;
+}
+.menu_bar_view .menu_bar_logo {
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  background-image: url(logo.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  margin-left: 10px;
+}
diff --git a/packages/startup/entry/sample-modules/menu-bar/menu-bar.module.less b/packages/startup/entry/sample-modules/menu-bar/menu-bar.module.less
@@ -0,0 +1,17 @@
+.menu_bar_view {
+  display: flex;
+  background-color: var(--kt-menubar-background);
+  height: var(--tabBar-height);
+  align-items: center;
+
+  .menu_bar_logo {
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    background-image: url(./logo.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    margin-left: 10px;
+  }
+}
diff --git a/packages/startup/entry/sample-modules/menu-bar/menu-bar.view.tsx b/packages/startup/entry/sample-modules/menu-bar/menu-bar.view.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { MenuBar } from '@opensumi/ide-menu-bar/lib/browser/menu-bar.view';
+
+import * as styles from './menu-bar.module.less';
+
+/**
+ * Custom menu bar component.
+ * Add a logo in here, and keep
+ * opensumi's original menubar.
+ */
+export const MenuBarView = () => (
+  <div className={styles.menu_bar_view}>
+    <span className={styles.menu_bar_logo} />
+    <MenuBar />
+  </div>
+);
diff --git a/packages/startup/entry/web/app.tsx b/packages/startup/entry/web/app.tsx
@@ -21,7 +21,7 @@ renderApp({
     ...defaultConfig,
     ...{
       [SlotLocation.top]: {
-        modules: ['@opensumi/ide-menu-bar', 'toolbar'],
+        modules: ['@opensumi/menu-bar-example', 'toolbar'],
       },
     },
     ...{