dragbar z-index fixed, removed Optimism, added Cairo

pull/5370/head
lianahus 3 years ago
parent f25fc85dfb
commit 67621094fd
  1. BIN
      apps/remix-ide/src/assets/img/cairoLogo.webp
  2. 10
      apps/remix-ide/src/remixAppManager.js
  3. 5
      libs/remix-core-plugin/src/lib/compiler-artefacts.ts
  4. 4
      libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.css
  5. 15
      libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
  6. 45
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
  7. 48
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
  8. 2
      libs/remix-ui/panel/src/lib/dragbar/dragbar.css
  9. 2
      libs/remix-ui/run-tab/src/lib/actions/index.ts

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

@ -145,16 +145,6 @@ export class RemixAppManager extends PluginManager {
pattern: [], pattern: [],
sticky: true sticky: true
}) })
await this.call('filePanel', 'registerContextMenuItem', {
id: 'optimism-compiler',
name: 'compileCustomAction',
label: 'Compile with Optimism',
type: [],
extension: ['.sol'],
path: [],
pattern: [],
sticky: true
})
} }
} }

@ -48,11 +48,6 @@ export class CompilerArtefacts extends Plugin {
saveCompilationPerFileResult(file, source, languageVersion, data) saveCompilationPerFileResult(file, source, languageVersion, data)
}) })
this.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => {
this.compilersArtefacts.__last = new CompilerAbstract(languageVersion, data, source)
saveCompilationPerFileResult(file, source, languageVersion, data)
})
this.on('solidityUnitTesting', 'compilationFinished', (file, source, languageVersion, data) => { this.on('solidityUnitTesting', 'compilationFinished', (file, source, languageVersion, data) => {
this.compilersArtefacts.__last = new CompilerAbstract(languageVersion, data, source) this.compilersArtefacts.__last = new CompilerAbstract(languageVersion, data, source)
saveCompilationPerFileResult(file, source, languageVersion, data) saveCompilationPerFileResult(file, source, languageVersion, data)

@ -7,7 +7,7 @@
left: 0px; left: 0px;
top: 0px; top: 0px;
width: 0.3em; width: 0.3em;
z-index: 9999; z-index: 1000;
} }
.overlay { .overlay {
@ -17,7 +17,7 @@
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: block; display: block;
z-index: 9998; z-index: 1000;
} }
.dragbar:hover, .dragbar:hover,

@ -6,21 +6,26 @@ interface PluginButtonProps {
imgPath: string, imgPath: string,
envID: string, envID: string,
envText: string, envText: string,
callback: any callback: any,
l2?: boolean
} }
function PluginButton ({ imgPath, envID, envText, callback }: PluginButtonProps) { function PluginButton ({ imgPath, envID, envText, callback, l2 }: PluginButtonProps) {
const themeFilter = useContext(ThemeContext) const themeFilter = useContext(ThemeContext)
return ( return (
<div>
<button <button
className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center remixui_envButton" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center remixui_home_envButton"
data-id={'landingPageStart' + envText} data-id={'landingPageStart' + envText}
onClick={() => callback()} onClick={() => callback()}
> >
<img className="m-2 align-self-center remixui_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } /> <img className="m-2 align-self-center remixui_home_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } />
<label className="text-uppercase text-dark remixui_cursorStyle">{envText}</label> <label className="text-uppercase text-dark remixui_home_cursorStyle">{envText}</label>
</button> </button>
{ l2 && <label className="bg-light mx-1 px-1 mb-0 mx-2 position-relative remixui_home_l2Label">L2</label> }
</div>
) )
} }

@ -1,82 +1,85 @@
.remixui_text { .remixui_home_text {
cursor: pointer; cursor: pointer;
font-weight: normal; font-weight: normal;
max-width: 300px; max-width: 300px;
} }
.remixui_text:hover { .remixui_home_text:hover {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
.remixui_homeContainer { .remixui_home_homeContainer {
overflow-y: hidden; overflow-y: hidden;
overflow-y: auto; overflow-y: auto;
flex-grow: 3; flex-grow: 3;
} }
.remixui_hpLogoContainer { .remixui_home_hpLogoContainer {
margin: 30px; margin: 30px;
padding-right: 90px; padding-right: 90px;
} }
.remixui_mediaBadge { .remixui_home_mediaBadge {
font-size: 2em; font-size: 2em;
height: 2em; height: 2em;
width: 2em; width: 2em;
} }
.remixui_mediaBadge:focus { .remixui_home_mediaBadge:focus {
outline: none; outline: none;
} }
.remixui_image { .remixui_home_image {
height: 1em; height: 1em;
width: 1em; width: 1em;
text-align: center; text-align: center;
} }
.remixui_logoImg { .remixui_home_logoImg {
height: 10em; height: 10em;
} }
.remixui_rightPanel { .remixui_home_rightPanel {
right: 0; right: 0;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
} }
.remixui_remixHomeMedia { .remixui_home_remixHomeMedia {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.remixui_panels { .remixui_home_panels {
box-shadow: 0px 0px 13px -7px; box-shadow: 0px 0px 13px -7px;
} }
.remixui_labelIt { .remixui_home_labelIt {
margin-bottom: 0; margin-bottom: 0;
} }
.remixui_bigLabelSize { .remixui_home_bigLabelSize {
font-size: 13px; font-size: 13px;
} }
.remixui_seeAll { .remixui_home_seeAll {
margin-top: 7px; margin-top: 7px;
white-space: nowrap; white-space: nowrap;
} }
.remixui_importFrom p { .remixui_home_importFrom p {
margin-right: 10px; margin-right: 10px;
} }
.remixui_logoContainer img{ .remixui_home_logoContainer img{
height: 150px; height: 150px;
opacity: 0.7; opacity: 0.7;
} }
.remixui_envLogo { .remixui_home_envLogo {
height: 16px; height: 16px;
} }
.remixui_cursorStyle { .remixui_home_cursorStyle {
cursor: pointer; cursor: pointer;
} }
.remixui_envButton { .remixui_home_envButton {
width: 120px; width: 120px;
height: 70px; height: 70px;
} }
.remixui_media { .remixui_home_media {
overflow: hidden; overflow: hidden;
max-width: 400px; max-width: 400px;
transition: .5s ease-out; transition: .5s ease-out;
z-index: 1000; z-index: 1000;
} }
.remixui_migrationBtn { .remixui_home_migrationBtn {
width: 100px; width: 100px;
} }
.remixui_home_l2Label {
bottom: 10px;
}

@ -150,10 +150,10 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
plugin.verticalIcons.select('solidity') plugin.verticalIcons.select('solidity')
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity']) _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity'])
} }
const startOptimism = async () => { const startCairo = async () => {
await plugin.appManager.activatePlugin('optimism-compiler') await plugin.appManager.activatePlugin('cairo_compiler')
plugin.verticalIcons.select('optimism-compiler') plugin.verticalIcons.select('cairo_compiler')
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'optimism-compiler']) _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'cairo_compiler'])
} }
const startSolhint = async () => { const startSolhint = async () => {
await plugin.appManager.activatePlugin(['solidity', 'solhint']) await plugin.appManager.activatePlugin(['solidity', 'solhint'])
@ -232,7 +232,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
<label style={ { fontSize: 'xxx-large', height: 'auto', alignSelf: 'flex-end' } }>Remix IDE</label> <label style={ { fontSize: 'xxx-large', height: 'auto', alignSelf: 'flex-end' } }>Remix IDE</label>
</div> </div>
<div className="mr-4 d-flex"> <div className="mr-4 d-flex">
<img className="mt-4 mb-2 remixui_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img> <img className="mt-4 mb-2 remixui_home_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
<audio <audio
id="remiAudio" id="remiAudio"
muted={false} muted={false}
@ -241,14 +241,14 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
></audio> ></audio>
</div> </div>
</div> </div>
<div className="row remixui_hpSections mx-2 mr-4" data-id="landingPageHpSections"> <div className="row mx-2 mr-4" data-id="landingPageHpSections">
<div className="ml-3"> <div className="ml-3">
<div className="mb-5"> <div className="mb-5">
<h4>Featured Plugins</h4> <h4>Featured Plugins</h4>
<div className="d-flex flex-row pt-2"> <div className="d-flex flex-row pt-2">
<ThemeContext.Provider value={ state.themeQuality }> <ThemeContext.Provider value={ state.themeQuality }>
<PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} /> <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} />
<PluginButton imgPath="assets/img/optimismLogo.webp" envID="optimismLogo" envText="Optimism" callback={() => startOptimism()} /> <PluginButton imgPath="assets/img/cairoLogo.webp" envID="CairoLogo" envText="Cairo compiler" l2={true} callback={() => startCairo()} />
<PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={() => startSolhint()} /> <PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={() => startSolhint()} />
<PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={() => startLearnEth()} /> <PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={() => startLearnEth()} />
<PluginButton imgPath="assets/img/sourcifyLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={() => startSourceVerify()} /> <PluginButton imgPath="assets/img/sourcifyLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={() => startSourceVerify()} />
@ -261,11 +261,11 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
<h4>File</h4> <h4>File</h4>
<p className="mb-1"> <p className="mb-1">
<i className="mr-2 far fa-file"></i> <i className="mr-2 far fa-file"></i>
<span className="ml-1 mb-1 remixui_text" onClick={() => createNewFile()}>New File</span> <span className="ml-1 mb-1 remixui_home_text" onClick={() => createNewFile()}>New File</span>
</p> </p>
<p className="mb-1"> <p className="mb-1">
<i className="mr-2 far fa-file-alt"></i> <i className="mr-2 far fa-file-alt"></i>
<span className="ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text"> <span className="ml-1 remixui_home_labelIt remixui_home_bigLabelSize remixui_home_text">
Open Files Open Files
<input title="open file" type="file" onChange={(event) => { <input title="open file" type="file" onChange={(event) => {
event.stopPropagation() event.stopPropagation()
@ -275,7 +275,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
</p> </p>
<p className="mb-1"> <p className="mb-1">
<i className="mr-1 far fa-hdd"></i> <i className="mr-1 far fa-hdd"></i>
<span className="ml-1 remixui_text" onClick={() => connectToLocalhost()}>Connect to Localhost</span> <span className="ml-1 remixui_home_text" onClick={() => connectToLocalhost()}>Connect to Localhost</span>
</p> </p>
<p className="mt-3 mb-0"><label>LOAD FROM:</label></p> <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
<div className="btn-group"> <div className="btn-group">
@ -289,28 +289,28 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
<h4>Resources</h4> <h4>Resources</h4>
<p className="mb-1"> <p className="mb-1">
<i className="mr-2 fas fa-book"></i> <i className="mr-2 fas fa-book"></i>
<a className="remixui_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a> <a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
</p> </p>
<p className="mb-1"> <p className="mb-1">
<i className="mr-2 fab fa-gitter"></i> <i className="mr-2 fab fa-gitter"></i>
<a className="remixui_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a> <a className="remixui_home_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
</p> </p>
<p className="mb-1"> <p className="mb-1">
<img id='remixHhomeWebsite' className="mr-2 remixui_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img> <img id='remixHhomeWebsite' className="mr-2 remixui_home_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
<a className="remixui_text" target="__blank" href="https://remix-project.org">Featuring website</a> <a className="remixui_home_text" target="__blank" href="https://remix-project.org">Featuring website</a>
</p> </p>
<p className="mb-1"> <p className="mb-1">
<i className="mr-2 fab fa-ethereum remixui_image"></i> <i className="mr-2 fab fa-ethereum remixui_home_image"></i>
<span className="remixui_text" onClick={() => switchToPreviousVersion()}>Old experience</span> <span className="remixui_home_text" onClick={() => switchToPreviousVersion()}>Old experience</span>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="d-flex flex-column remixui_rightPanel"> <div className="d-flex flex-column remixui_home_rightPanel">
<div className="d-flex pr-3 py-2 align-self-end" id="remixIDEMediaPanelsTitle"> <div className="d-flex pr-3 py-2 align-self-end" id="remixIDEMediaPanelsTitle">
<button <button
className="btn-info p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-twitter" className="btn-info p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-twitter"
id="remixIDEHomeTwitterbtn" id="remixIDEHomeTwitterbtn"
title="Twitter" title="Twitter"
onClick={(e) => { onClick={(e) => {
@ -321,7 +321,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
}} }}
></button> ></button>
<button <button
className="btn-danger p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-medium" className="btn-danger p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-medium"
id="remixIDEHomeMediumbtn" id="remixIDEHomeMediumbtn"
title="Medium blogs" title="Medium blogs"
onClick={(e) => { onClick={(e) => {
@ -332,9 +332,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
}} }}
></button> ></button>
</div> </div>
<div className="mr-3 d-flex bg-light remixui_panels" style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } } id="remixIDEMediaPanels"> <div className="mr-3 d-flex bg-light remixui_home_panels" style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } } id="remixIDEMediaPanels">
<div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_remixHomeMedia" style={ { maxHeight: maxHeight } }> <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" style={ { maxHeight: maxHeight } }>
<div id="medium-widget" className="px-3 remixui_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: elHeight } }> <div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: elHeight } }>
<div <div
id="retainable-rss-embed" id="retainable-rss-embed"
data-rss="https://medium.com/feed/remix-ide" data-rss="https://medium.com/feed/remix-ide"
@ -348,8 +348,8 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
</div> </div>
</div> </div>
</div> </div>
<div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } > <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >
<div className="remixui_media" style={ { minHeight: elHeight } } > <div className="remixui_home_media" style={ { minHeight: elHeight } } >
<a className="twitter-timeline" <a className="twitter-timeline"
data-width="330" data-width="330"
data-theme={ state.themeQuality.name } data-theme={ state.themeQuality.name }

@ -7,7 +7,7 @@
left: 0px; left: 0px;
top: 0px; top: 0px;
height: 0.3em; height: 0.3em;
z-index: 9999; z-index: 1000;
} }
.overlay { .overlay {

@ -74,8 +74,6 @@ const setupEvents = () => {
plugin.on('yulp', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data)) plugin.on('yulp', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
plugin.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
plugin.on('udapp', 'setEnvironmentModeReducer', (env: { context: string, fork: string }, from: string) => { plugin.on('udapp', 'setEnvironmentModeReducer', (env: { context: string, fork: string }, from: string) => {
dispatch(displayPopUp(plugin.REACT_API.envToasterContent(env, from))) dispatch(displayPopUp(plugin.REACT_API.envToasterContent(env, from)))
setExecutionContext(env, plugin.REACT_API.web3Dialog()) setExecutionContext(env, plugin.REACT_API.web3Dialog())

Loading…
Cancel
Save