mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

extra space after tabs and el with opacity at the end

Browse Source
pull/3530/head^2
lianahus 2 years ago committed by Aniket
parent 0698464ec7
commit af07f993f1
6 changed files with 82 additions and 85 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      apps/remix-ide/src/app/ui/landing-page/landing-page.js
  2. 2
      apps/remix-ide/src/index.html
  3. 10
      libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
  4. 18
      libs/remix-ui/app/src/lib/remix-app/style/remix-app.css
  5. 7
      libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
  6. 128
      libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

2
apps/remix-ide/src/app/ui/landing-page/landing-page.js
Unescape View File

@ -9,7 +9,7 @@ const profile = {
displayName: 'Home',
methods: [],
events: [],
description: 'Remix home',
description: 'Remix Home',
icon: 'assets/img/home.webp',
location: 'mainPanel',
version: packageJson.version

2
apps/remix-ide/src/index.html
Unescape View File

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html>
<html class="overflow-hidden">
<head>
<meta charset="utf-8">

10
libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
Unescape View File

@ -9,6 +9,7 @@ import AppDialogs from './components/modals/dialogs'
import DialogViewPlugin from './components/modals/dialogViewPlugin'
import { AppContext } from './context/context'
import { IntlProvider } from 'react-intl'
import { CustomTooltip } from '@remix-ui/helper';
interface IRemixAppUi {
app: any
@ -87,8 +88,15 @@ const RemixApp = (props: IRemixAppUi) => {
<div id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light">{props.app.menuicons.render()}</div>
<div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}>{props.app.sidePanel.render()}</div>
<DragBar resetTrigger={resetTrigger} maximiseTrigger={maximiseTrigger} minWidth={285} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
<div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
<div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel d-flex'>
<RemixUIMainPanel Context={AppContext}></RemixUIMainPanel>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-all-tabs"
tooltipText="Scroll to see all tabs"
>
<div className='remix-ui-tabs_end remix-bg-opacity position-absolute position-fixed'></div>
</CustomTooltip>
</div>
</div>
<div>{props.app.hiddenPanel.render()}</div>

18
libs/remix-ui/app/src/lib/remix-app/style/remix-app.css
Unescape View File

@ -34,7 +34,6 @@ pre {
width : 320px;
transition : width 0.25s;
}
.highlightcode {
position : absolute;
z-index : 20;
@ -54,19 +53,24 @@ pre {
height : 200px;
}
.centered svg path {
fill: var(--secondary);
fill : var(--secondary);
}
.centered svg polygon {
fill : var(--secondary);
fill : var(--secondary);
}
.onboarding {
color : var(--text-info);
background-color : var(--info);
color : var(--text-info);
background-color : var(--info);
}
.matomoBtn {
width : 100px;
}
.splash {
text-align: center;
text-align : center;
}
.remix-ui-tabs_end {
height : 2.15rem;
width : 4rem;
right : -10px;
filter : opacity(0.5);
}

7
libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
Unescape View File

@ -2,13 +2,6 @@
display: -webkit-box;
max-height: 2.15rem;
}
.remix-ui-tabs_end {
height: 2.15rem;
background-image: linear-gradient(to right, var(--body-bg) , var(--secondary));
width: 3rem;
right: -10px;
filter: opacity(0.5);
}
.remix-ui-tabs li {
display: inline-block;
}

128
libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
Unescape View File

@ -93,7 +93,7 @@ export const TabsUI = (props: TabsUIProps) => {
<CustomTooltip
tooltipId="tabsActive"
tooltipText={tab.tooltip}
placement="bottom"
placement="bottom-start"
>
<div
ref={el => { tabsRef.current[index] = el }}
@ -154,79 +154,71 @@ export const TabsUI = (props: TabsUIProps) => {
}
return (
<div className='d-block'>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-all-tabs"
tooltipText="Scroll to see all tabs"
>
<div className='remix-ui-tabs_end position-absolute position-fixed'></div>
</CustomTooltip>
<div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs" data-id="tabs-component">
<div className="d-flex flex-row" style={{ maxWidth: 'fit-content', width: '97%' }}>
<div className="d-flex flex-row justify-content-center align-items-center m-1 mt-1">
<button
data-id='play-editor'
className="btn text-success py-0"
disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol')}
onClick={async () => {
const path = active().substr(active().indexOf('/') + 1, active().length)
const content = await props.plugin.call('fileManager', "readFile", path)
if (tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') {
await props.plugin.call('scriptRunner', 'execute', content, path)
_paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
} else if (tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul') {
await props.plugin.call('solidity', 'compile', path)
_paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
}
}}
>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-run-script"
tooltipText={<span>
{(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') ? "Run script (CTRL + SHIFT + S)" :
tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul'? "Compile CTRL + S" : "Select .sol or .yul file to compile or a .ts or .js file and run it"}
</span>}
>
<i className="fad fa-play"></i>
</CustomTooltip>
</button>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-zoom-out"
tooltipText="Zoom out"
>
<span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" onClick={() => props.onZoomOut()}></span>
</CustomTooltip>
<div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs" data-id="tabs-component">
<div className="d-flex flex-row" style={{ maxWidth: 'fit-content', width: '99%' }}>
<div className="d-flex flex-row justify-content-center align-items-center m-1 mt-1">
<button
data-id='play-editor'
className="btn text-success py-0"
disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol')}
onClick={async () => {
const path = active().substr(active().indexOf('/') + 1, active().length)
const content = await props.plugin.call('fileManager', "readFile", path)
if (tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') {
await props.plugin.call('scriptRunner', 'execute', content, path)
_paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
} else if (tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul') {
await props.plugin.call('solidity', 'compile', path)
_paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
}
}}
>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-run-zoom-in"
tooltipText="Zoom in"
tooltipId="overlay-tooltip-run-script"
tooltipText={<span>
{(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') ? "Run script (CTRL + SHIFT + S)" :
tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul'? "Compile CTRL + S" : "Select .sol or .yul file to compile or a .ts or .js file and run it"}
</span>}
>
<span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" onClick={() => props.onZoomIn()}></span>
<i className="fad fa-play"></i>
</CustomTooltip>
</div>
<Tabs
className="tab-scroll"
selectedIndex={tabsState.selectedIndex}
domRef={(domEl) => {
if (tabsElement.current) return
tabsElement.current = domEl
tabsElement.current.addEventListener('wheel', transformScroll)
}}
onSelect={(index) => {
props.onSelect(index)
currentIndexRef.current = index
dispatch({ type: 'SELECT_INDEX', payload: index, ext: getExt(props.tabs[currentIndexRef.current].name)})
}}
</button>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-zoom-out"
tooltipText="Zoom out"
>
<span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" onClick={() => props.onZoomOut()}></span>
</CustomTooltip>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-run-zoom-in"
tooltipText="Zoom in"
>
<TabList className="d-flex flex-row align-items-center">
{props.tabs.map((tab, i) => <Tab className="" key={tab.name}>{renderTab(tab, i)}</Tab>)}
</TabList>
{props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
</Tabs>
<span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" onClick={() => props.onZoomIn()}></span>
</CustomTooltip>
</div>
<Tabs
className="tab-scroll"
selectedIndex={tabsState.selectedIndex}
domRef={(domEl) => {
if (tabsElement.current) return
tabsElement.current = domEl
tabsElement.current.addEventListener('wheel', transformScroll)
}}
onSelect={(index) => {
props.onSelect(index)
currentIndexRef.current = index
dispatch({ type: 'SELECT_INDEX', payload: index, ext: getExt(props.tabs[currentIndexRef.current].name)})
}}
>
<TabList className="d-flex flex-row align-items-center">
{props.tabs.map((tab, i) => <Tab className="" key={tab.name}>{renderTab(tab, i)}</Tab>)}
<div style={{minWidth: '4rem', height: "1rem"}} id="dummyElForLastXVisibility"></div>
</TabList>
{props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
</Tabs>
</div>
</div>
)

Write Preview
Loading…
Cancel
Save