topbar up and running

Author: joeizang

apps/remix-ide/src/app.ts

@@ -526,7 +526,7 @@ class AppComponent {
     const landingPage = new LandingPage(appManager, this.menuicons, fileManager, filePanel, contentImport)
     this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor)//, appManager)
 
-    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel, this.popupPanel])
+    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, this.topBar, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel, this.popupPanel])
 
     // CONTENT VIEWS & DEFAULT PLUGINS
     const openZeppelinProxy = new OpenZeppelinProxy(blockchain)
@@ -603,7 +603,9 @@ class AppComponent {
       'pluginStateLogger',
       'matomo'
     ])
+
     await this.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
+    await this.appManager.activatePlugin(['topbar'])
     await this.appManager.activatePlugin(['statusBar'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await this.appManager.activatePlugin(['pinnedPanel'])

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -249,11 +249,10 @@ const RemixApp = (props: IRemixAppUi) => {
             {showEnterDialog && <EnterDialog handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>}
             {showManagePreferencesDialog && <ManagePreferencesDialog savePreferencesFn={() => setShowEnterDialog(true)}></ManagePreferencesDialog>}
             <div className='d-flex flex-column'>
+              <div className='top-bar'>
+                {props.app.topBar.render()}
+              </div>
               <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
-                <div className='top-bar'>
-                  {props.app.topBar.render()}
-                  <h1>Top Bar</h1>
-                </div>
                 <div id="icon-panel" data-id="remixIdeIconPanel" className="custom_icon_panel iconpanel bg-light">
                   {props.app.menuicons.render()}
                 </div>

libs/remix-ui/app/src/lib/remix-app/style/remix-app.css

@@ -9,7 +9,7 @@ pre {
 }
 .remixIDE            {
   width              : 100%;
-  height             : 100vh;
+  height             : 95vh;
   overflow           : hidden;
   flex-direction     : row;
   display            : flex;
@@ -42,7 +42,7 @@ pre {
 }
 
 .top-bar {
-  
+
 }
 .pinnedpanel           {
   width              : 320px;

libs/remix-ui/top-bar/src/components/BasicLogo.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+interface BasicLogoProps {
+  classList?: string
+  solid?: boolean
+}
+
+function BasicLogo({ classList = '', solid = true }: BasicLogoProps) {
+  if (solid) {
+    return (
+      <svg id="Ebene_2" className={classList} data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
+        <path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z" />
+        <path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z" />
+        <path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z" />
+      </svg>
+    )
+  } else {
+    return <img className="" src="assets/img/remix_logo_light.webp" style={{ height: '3rem' }} alt=""></img>
+  }
+}
+
+export default BasicLogo

libs/remix-ui/top-bar/src/css/topbar.css

@@ -0,0 +1,6 @@
+.remixui_homeIcon svg path {
+  fill: var(--primary);
+}
+.remixui_homeIcon svg polygon {
+  fill: var(--primary);
+}

libs/remix-ui/top-bar/src/lib/remix-ui-topbar.tsx

@@ -1,5 +1,64 @@
-import React from 'react'
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
+import React, { useContext, useState } from 'react'
+import BasicLogo from '../components/BasicLogo'
+import '../css/topbar.css'
+import { Dropdown } from 'react-bootstrap'
+import { CustomToggle } from 'libs/remix-ui/helper/src/lib/components/custom-dropdown'
+import { WorkspaceMetadata } from 'libs/remix-ui/workspace/src/lib/types'
+import { platformContext } from 'libs/remix-ui/app/src/lib/remix-app/context/context'
+import { useIntl } from 'react-intl'
+import { FileSystemContext } from 'libs/remix-ui/workspace/src/lib/contexts'
 
 export const RemixUiTopbar = () => {
-  return <div className="display-1 text-danger">RemixUiTopbar</div>
+  const intl = useIntl()
+  const global = useContext(FileSystemContext)
+  const [showDropdown, setShowDropdown] = useState(false)
+  const [selectedWorkspace, setSelectedWorkspace] = useState<WorkspaceMetadata>(null)
+  const platform = useContext(platformContext)
+  const LOCALHOST = ' - connect to localhost - '
+  const NO_WORKSPACE = ' - none - '
+  const [currentWorkspace, setCurrentWorkspace] = useState<string>(NO_WORKSPACE)
+  const [togglerText, setTogglerText] = useState<'Connecting' | 'Connected to Local FileSystem'>('Connecting')
+
+  const toggleDropdown = (isOpen: boolean) => {
+    setShowDropdown(isOpen)
+  }
+  const formatNameForReadonly = (name: string) => {
+    return global.fs.readonly ? name + ` (${intl.formatMessage({ id: 'filePanel.readOnly' })})` : name
+  }
+
+  return (
+    <section className="h-100 p-2 d-flex flex-row align-items-center justify-content-between bg-light border">
+      <div className="d-flex flex-row align-items-center justify-content-between">
+        <span className="d-flex align-items-center justify-content-between mr-3">
+          <span style={{ width: '35px', height: '35px' }} className="remixui_homeIcon"><BasicLogo /></span>
+          <span className="text-primary ml-2 font-weight-light text-uppercase" style={{ fontSize: '1.2rem' }}>Remix</span>
+        </span>
+        <span className="btn btn-sm border border-secondary text-secondary">v0.57.0</span>
+      </div>
+      <div>
+        <Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
+          <Dropdown.Toggle
+            as={CustomToggle}
+            id="dropdown-custom-components"
+            className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control"
+            icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
+          >
+            {selectedWorkspace ? selectedWorkspace.name === LOCALHOST ? togglerText : selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly('localhost') : NO_WORKSPACE}
+          </Dropdown.Toggle>
+        </Dropdown>
+      </div>
+      <div>
+        <span>
+          Connect to Github
+        </span>
+        <span>
+          Theme
+        </span>
+        <span>
+          Settings
+        </span>
+      </div>
+    </section>
+  )
 }

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@@ -84,7 +84,7 @@ const RemixUiVerticalIconsPanel = ({ verticalIconsPlugin, icons }: RemixUiVertic
   return (
     <div id="iconsP" className="h-100">
       <div className="remixui_icons d-flex flex-column remixui_icons_height" ref={iconPanelRef}>
-        <Home verticalIconPlugin={verticalIconsPlugin} />
+        {/* <Home verticalIconPlugin={verticalIconsPlugin} /> */}
         <div className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? 'remixui_default-icons-container remixui_requiredSection' : activateScroll && activateScroll.scrollState ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
           <IconList theme={theme} icons={icons.filter((p) => p.isRequired && p.profile.name !== 'pluginManager')} verticalIconsPlugin={verticalIconsPlugin} itemContextAction={itemContextAction} />
           {scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? <Chevron direction="up" divElementRef={scrollableRef} cssRule={'fa fa-chevron-up remixui_icon-chevron my-0'} /> : null}