change text for translation. working on file section

7 months ago · 869b392818
parent 634d4254c4
commit 869b392818
3 changed files with 90 additions and 58 deletions
--- a/apps/remix-ide/src/app/tabs/locales/en/home.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/home.json
@ -61,7 +61,7 @@
  "home.startCodingPlayground": "Open a playground for prototyping and simple learning",
  "home.openFile": "Open File",
  "home.openFileTooltip": "Open a File from your File System",
-  "home.accessFileSystem": "Access File System",
+  "home.accessFileSystem": "Connect to local filesystem",
  "home.loadFrom": "Load from",
  "home.resources": "Resources",
  "home.connectToLocalhost": "Connect to Localhost",
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
@ -253,6 +253,28 @@ contract HelloWorld {
      </ModalDialog>
      <Toaster message={state.toasterMsg} />
      <div className="justify-content-start mt-1 p-2 d-flex flex-column" id="hTFileSection">
+        {(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && (
+          <div className="d-flex flex-column mb-3">
+            <label style={{ fontSize: '0.8rem' }} className="mt-3">
+                Recent workspaces
+            </label>
+            {state.recentWorkspaces[0] && state.recentWorkspaces[0] !== '' && (
+              <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[0])}>
+                {state.recentWorkspaces[0]}
+              </a>
+            )}
+            {state.recentWorkspaces[1] && state.recentWorkspaces[1] !== '' && (
+              <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[1])}>
+                {state.recentWorkspaces[1]}
+              </a>
+            )}
+            {state.recentWorkspaces[2] && state.recentWorkspaces[2] !== '' && (
+              <a className="cursor-pointer ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[2])}>
+                {state.recentWorkspaces[2]}
+              </a>
+            )}
+          </div>
+        )}
        <label style={{ fontSize: '1.2rem' }}>
          <FormattedMessage id="home.files" />
        </label>
@ -293,63 +315,32 @@ contract HelloWorld {
                />
              </span>
            </CustomTooltip>
-            <CustomTooltip
-              placement={'top'}
-              tooltipId="overlay-tooltip"
-              tooltipClasses="text-nowrap"
-              tooltipText={<FormattedMessage id="home.connectToLocalhost" />}
-              tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+            <button
+              className="btn text-nowrap p-2 mr-2 border my-1"
+              data-id="landingPageImportFromGitHubButton"
+              onClick={() =>
+                showFullMessage('GitHub', 'github URL', [
+                  'https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol',
+                  'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol',
+                ])
+              }
            >
-              <button className="btn text-nowrap p-2 border my-1" style={{ width: 'fit-content' }} onClick={() => connectToLocalhost()}>
-                <FormattedMessage id="home.accessFileSystem" />
-              </button>
-            </CustomTooltip>
+            GitHub
+            </button>
+            <button className="btn text-nowrap p-2 mr-2 border my-1" onClick={() => showFullMessage('Ipfs', 'ipfs hash', ['ipfs://QmQQfBMkpDgmxKzYaoAtqfaybzfgGm9b2LWYyT56Chv6xH'], 'ipfs://')}>
+            IPFS
+            </button>
          </div>
-          {(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && (
-            <div className="d-flex flex-column">
-              <label style={{ fontSize: '0.8rem' }} className="mt-3">
-                Recent workspaces
-              </label>
-              {state.recentWorkspaces[0] && state.recentWorkspaces[0] !== '' && (
-                <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[0])}>
-                  {state.recentWorkspaces[0]}
-                </a>
-              )}
-              {state.recentWorkspaces[1] && state.recentWorkspaces[1] !== '' && (
-                <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[1])}>
-                  {state.recentWorkspaces[1]}
-                </a>
-              )}
-              {state.recentWorkspaces[2] && state.recentWorkspaces[2] !== '' && (
-                <a className="cursor-pointer ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[2])}>
-                  {state.recentWorkspaces[2]}
-                </a>
-              )}
-            </div>
-          )}
+
        </div>
-        <label style={{ fontSize: '0.8rem' }} className="pt-3">
+        {/* <label style={{ fontSize: '0.8rem' }} className="pt-3">
          <FormattedMessage id="home.loadFrom" />
-        </label>
-        <div className="d-flex">
-          <button
-            className="btn p-2 border mr-2"
-            data-id="landingPageImportFromGitHubButton"
-            onClick={() =>
-              showFullMessage('GitHub', 'github URL', [
-                'https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol',
-                'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol',
-              ])
-            }
-          >
-            GitHub
-          </button>
-          <button className="btn p-2 border mr-2" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>
+        </label> */}
+        <div className="d-flex mt-2">
+          {/* <button className="btn p-2 border mr-2" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>
            Gist
          </button>
-          <button className="btn p-2 border mr-2" onClick={() => showFullMessage('Ipfs', 'ipfs hash', ['ipfs://QmQQfBMkpDgmxKzYaoAtqfaybzfgGm9b2LWYyT56Chv6xH'], 'ipfs://')}>
-            IPFS
-          </button>
+
          <button
            className="btn p-2 border"
            onClick={() =>
@ -357,7 +348,18 @@ contract HelloWorld {
            }
          >
            HTTPS
-          </button>
+          </button> */}
+          <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText={<FormattedMessage id="home.connectToLocalhost" />}
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
+            <button className="btn btn-block w-100 text-nowrap p-2 border my-1" style={{ width: 'fit-content' }} onClick={() => connectToLocalhost()}>
+              <FormattedMessage id="home.accessFileSystem" />
+            </button>
+          </CustomTooltip>
        </div>
      </div>
    </>
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useRef, useContext } from 'react'
+import React, { useEffect, useRef, useContext, SyntheticEvent, useState } from 'react'
 import { useIntl, FormattedMessage } from 'react-intl'
 import { TEMPLATE_NAMES,TEMPLATE_METADATA } from '@remix-ui/workspace'
 import { ThemeContext } from '../themeContext'
@ -144,6 +144,33 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
    _paq.push(['trackEvent', 'hometab', 'homeGetStarted', templateName])
  }

+  const [activeButtonClass, setActiveButtonClass] = useState('')
+  const [activeButton, setActiveButton] = useState('homeTabGetStartedPlayground')
+
+  useEffect(() => {
+    const checkWorkspaceName = async () => {
+      const currentWorkspace = await plugin.call('filePanel', 'getCurrentWorkspace')
+      const getWorkspaces = await plugin.call('filePanel', 'getWorkspaces')
+      // setActiveButton(currentWorkspace.name)
+      console.log('activeButton', { activeButton, currentWorkspace, getWorkspaces })
+    }
+    checkWorkspaceName()
+  }, [])
+  const manipulateClasses = async (e: SyntheticEvent) => {
+    const target = e.target as HTMLButtonElement
+    // if btn-primary is active, remove it based on the following conditions:
+    // 1. Most importantly, if the  activeButton is the same as the data-id of any of the buttons
+    // then that button should be active
+    // 2. If the activeButton is not the same as the data-id of any of the buttons
+    // then the first button should be active
+    const currentWorkspace = await plugin.call('filePanel', 'getCurrentWorkspace')
+    const allworkspaces = await plugin.call('filePanel', 'getWorkspaces')
+    console.log('currentWorkspace', { currentWorkspace, allworkspaces })
+    if (target.classList.contains('btn-primary') && target.dataset.id === activeButton) {
+
+    }
+  }
+
  return (
    <div className="pl-2" id="hTGetStartedSection">
      <label className="pt-3" style={{ fontSize: '1.2rem' }}>
@ -154,11 +181,13 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
          <div className="pt-2">
            <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
              {workspaceTemplates.slice(0, 3).map((template, index) => (
-                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="top-start">
+                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="top-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
                  <button key={index} className={index === 0 ? "btn btn-primary border p-2 text-nowrap mr-3" : index === workspaceTemplates.length - 1 ? "btn border p-2 text-nowrap mr-2" : "btn border p-2 text-nowrap mr-3"}
-                    onClick={() => {
-                      createWorkspace(template.templateName)
+                    onClick={(e) => {
+                      manipulateClasses(e)
+                      // createWorkspace(template.templateName)
                    }}
+                    data-id={`homeTabGetStarted${template.workspaceTitle}`}
                  >
                    {template.workspaceTitle}
                  </button>
@ -167,13 +196,14 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
            </div>
            <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
              {workspaceTemplates.slice(3, workspaceTemplates.length).map((template, index) => (
-                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start">
+                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
                  <button
                    key={index}
                    className={"btn border p-2 text-nowrap mr-3"}
                    onClick={() => {
                      createWorkspace(template.templateName)
                    }}
+                    data-id={`homeTabGetStarted${template.workspaceTitle}`}
                  >
                    {template.workspaceTitle}
                  </button>