Merge pull request #6140 from ethereum/hometab

New HomeTab Design

Author: yann300

apps/remix-ide-e2e/src/tests/generalSettings.test.ts

@@ -9,8 +9,7 @@ module.exports = {
 
   'Should display settings menu ': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
-      .click('*[data-id="landingPageStartSolidity"]')
-      .waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
+      .waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
       .click('*[data-id="verticalIconsKindsettings"]')
       .waitForElementContainsText('h6[data-id="sidePanelSwapitTitle"]', 'SETTINGS')
   },

apps/remix-ide-e2e/src/tests/gist.test.ts

@@ -69,7 +69,7 @@ module.exports = {
       */
   },
 
-  'Load Gist Modal #group1': function (browser: NightwatchBrowser) {
+  'Load Gist Modal #group1': '' + function (browser: NightwatchBrowser) {
     browser.clickLaunchIcon('home')
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('filePanel')
@@ -85,7 +85,7 @@ module.exports = {
       .modalFooterCancelClick('gisthandler')
   },
 
-  'Display Error Message For Invalid Gist ID #group1': function (browser: NightwatchBrowser) {
+  'Display Error Message For Invalid Gist ID #group1': '' + function (browser: NightwatchBrowser) {
     browser
       .pause(1000)
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
@@ -126,7 +126,7 @@ module.exports = {
       .click('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
   },
 
-  'Import From Gist For Valid Gist ID #group2': function (browser: NightwatchBrowser) {
+  'Import From Gist For Valid Gist ID #group2': '' + function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 15000)
       .clickLaunchIcon('settings')

apps/remix-ide-e2e/src/tests/homeTab.test.ts

@@ -8,7 +8,7 @@ module.exports = {
     init(browser, done)
   },
 
-  'Should start coding #group1': function (browser: NightwatchBrowser) {
+  'Should start coding #group1': '' + function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('*[data-id="homeTabGetStartedremixDefault"]')
       .click('*[data-id="homeTabGetStartedremixDefault"]')
@@ -25,7 +25,7 @@ module.exports = {
       })
   },
 
-  'Should start with ERC20 workspace #group1': function (browser: NightwatchBrowser) {
+  'Should start with ERC20 workspace #group1': '' + function (browser: NightwatchBrowser) {
     browser
       .click('*[data-path="home"')
       .waitForElementVisible('*[data-id="homeTabGetStartedozerc20"]')

apps/remix-ide-e2e/src/tests/importFromGithub.test.ts

@@ -19,9 +19,9 @@ module.exports = {
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('filePanel')
       .click('div[data-id="verticalIconsHomeIcon"]')
-      .waitForElementVisible('button[data-id="landingPageImportFromGitHubButton"]')
       .pause(1000)
-      .click('button[data-id="landingPageImportFromGitHubButton"]')
+      .click('*[data-id="workspacesMenuDropdown"]')
+      .click('*[data-id="workspaceclone"]')
       .waitForElementVisible('*[data-id="fileSystemModalDialogModalTitle-react"]')
       .assert.containsText('*[data-id="fileSystemModalDialogModalTitle-react"]', 'Clone Git Repository')
       .waitForElementVisible('*[data-id="fileSystemModalDialogModalBody-react"]')
@@ -45,8 +45,9 @@ module.exports = {
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('filePanel')
       .click('div[data-id="verticalIconsHomeIcon"]')
-      .waitForElementVisible('button[data-id="landingPageImportFromGitHubButton"]').pause(1000)
-      .click('button[data-id="landingPageImportFromGitHubButton"]')
+      .pause(1000)
+      .click('*[data-id="workspacesMenuDropdown"]')
+      .click('*[data-id="workspaceclone"]')
       .waitForElementVisible('input[data-id="modalDialogCustomPromptTextClone"]')
       .execute(() => {
         (document.querySelector('input[data-id="modalDialogCustomPromptTextClone"]') as any).focus()

apps/remix-ide/src/app/components/vertical-icons.tsx

@@ -12,7 +12,7 @@ const profile = {
   displayName: 'Vertical Icons',
   description: 'Remix IDE vertical icons',
   version: packageJson.version,
-  methods: ['select', 'unlinkContent', 'linkContent'],
+  methods: ['select', 'unlinkContent', 'linkContent', 'activateAndSelect'],
   events: ['toggleContent', 'showContent']
 }
 
@@ -128,6 +128,15 @@ export class VerticalIcons extends Plugin {
     this.events.emit('showContent', name)
   }
 
+  async activateAndSelect(name: string) {
+    const isActive = await this.call('manager', 'isActive', name)
+
+    if (!isActive) {
+      await this.call('manager', 'activatePlugin', name)
+    }
+    this.select(name)
+  }
+
   /**
    * Toggles the side panel for plugin
    * @param {string} name Name of profile of the module to activate

apps/remix-ide/src/app/panels/file-panel.js

@@ -213,15 +213,13 @@ export default class Filepanel extends ViewPlugin {
   saveRecent(workspaceName) {
     if (workspaceName === 'code-sample') return
     if (!localStorage.getItem('recentWorkspaces')) {
-      localStorage.setItem('recentWorkspaces', JSON.stringify([ workspaceName ]))
+      localStorage.setItem('recentWorkspaces', JSON.stringify([ { name: workspaceName, timestamp: Date.now() } ]))
     } else {
       let recents = JSON.parse(localStorage.getItem('recentWorkspaces'))
       // checking if we have a duplication
-      if (!recents.find((el) => {
-        return el === workspaceName
-      })) {
-        recents = ([workspaceName, ...recents])
-        recents = recents.filter((el) => { return el != "" })
+      if (!recents.find((el) => typeof el === 'string' ? el === workspaceName : el.name === workspaceName)) {
+        recents = ([{ name: workspaceName, timestamp: Date.now() }, ...recents])
+        recents = recents.filter((el) => typeof el === 'string' ? el !== '' : el.name !== '')
         localStorage.setItem('recentWorkspaces', JSON.stringify(recents))
       }
     }

apps/remix-ide/src/app/tabs/locales/en/home.json

@@ -30,7 +30,8 @@
   "home.dgitPluginDesc": "Add source control to your projects.",
   "home.oneClickDappDesc": "Quickly generate smart contract interfaces",
   "home.getStarted": "Get Started",
-  "home.projectTemplates": "Explore. Prototype. Create.",
+  "home.projectTemplates": "Learn. Explore.",
+  "home.projectTemplates2": "Create.",
   "home.blankTemplateDesc": "Create an empty workspace.",
   "home.remixDefaultTemplateDesc": "Create a workspace with sample files.",
   "home.ozerc20TemplateDesc": "Create an ERC20 token by importing OpenZeppelin library.",
@@ -68,9 +69,12 @@
   "home.resources": "Resources",
   "home.connectToLocalhost": "Connect to Localhost",
   "home.seeAllTutorials": "See all tutorials",
-  "home.maintainedByRemix": "Maintained by Remix",
+  "home.maintainedBy": "Maintained by",
   "home.gitCloneTooltip": "Clone a Github repo to a new workspace",
   "home.gistTooltip": "Open Gist repo",
-  "home.newFileTooltip": "Add a new file to a workspace"
+  "home.newFileTooltip": "Add a new file to a workspace",
+  "home.createNewWorkspace": "Create a new workspace",
+  "home.startLearning": "Start Learning",
+  "home.exploreAllPlugins": "Explore all plugins"
 }
 

apps/remix-ide/src/assets/css/themes/remix-unicorn.css

@@ -9529,9 +9529,6 @@ a.text-dark:focus {
   border-image-slice: 1;
   border-image-outset: 2px;
 }
-.custom_home_bg {
-  background: linear-gradient(45deg, #ff00004d, #fca80f3b, #ffff004a, #00800033, #0000ff29, #4b00822e, #ee82ee4a, #ff000057);
-}
 
 .plugins-list-header {
   background: transparent !important;