@ -1,33 +1,38 @@
var yo = require ( 'yo-yo' ) let yo = require ( 'yo-yo' )
var csjs = require ( 'csjs-inject' ) let csjs = require ( 'csjs-inject' )
// var globalRegistry = require('../../../global/registry')
let globalRegistry = require ( '../../../global/registry' )
let CompilerImport = require ( '../../compiler/compiler-imports' )
var modalDialogCustom = require ( '../modal-dialog-custom' )
var tooltip = require ( '../tooltip' )
var css = csjs ` let css = csjs `
. sectionContainer { . sectionContainer {
display : table - cell ; display : flex ;
flex - direction : column ; flex - direction : column ;
flex - wrap : wrap ; flex - wrap : wrap ;
align - content : space - around ; align - content : space - around ;
padding : 20 px ; padding : 20 px ;
max - width : 300 px ; max - width : 340 px ;
min - height : 300 px ;
background - color : var ( -- light ) ; background - color : var ( -- light ) ;
font - family : "Lucida Console" , Monaco , monospace ; font - family : "Lucida Console" , Monaco , monospace ;
} }
. landingPage { . landingPage {
height : 100 % ; height : 100 % ;
width : 100 % ; width : 100 % ;
background - color : var ( -- light ) ;
flex - wrap : wrap ; flex - wrap : wrap ;
justify - content : space - evenly ; justify - content : space - evenly ;
user - select : none ;
} }
. im { . im {
display : grid ; display : grid ;
max - width : 15 0px ; max - width : 20 0px ;
max - height : 16 0px ; max - height : 20 0px ;
width : 100 % ; width : 100 % ;
height : 100 % ; height : 100 % ;
padding : 20 px ; padding : 20 px ;
background - color : var ( -- bg - light ) ; background - color : var ( -- bg - light ) ;
align - self : center ;
} }
. im : hover { . im : hover {
} }
@ -43,73 +48,109 @@ export class LandingPage extends ApiFactory {
constructor ( appManager , appStore ) { constructor ( appManager , appStore ) {
super ( ) super ( )
this . sections = [ ] this . sections = [ ]
/ * v a r a c t i o n s S t a r t = [ let load = function ( item ) {
let compilerImport = new CompilerImport ( )
let fileProviders = globalRegistry . get ( 'fileproviders' ) . api
modalDialogCustom . prompt ( null , 'Enter the ' + item + ' you would like to load.' , null , ( target ) => {
if ( target !== '' ) {
compilerImport . import (
target ,
( loadingMsg ) => { tooltip ( loadingMsg ) } ,
( error , content , cleanUrl , type , url ) => {
if ( error ) {
modalDialogCustom . alert ( error )
} else {
if ( fileProviders [ type ] ) {
fileProviders [ type ] . addReadOnly ( cleanUrl , content , url )
}
}
}
)
}
} )
}
var actionsStart = [
{ label : 'New file' , { label : 'New file' ,
type : 'callback' , type : 'callback' ,
payload : ( ) => { payload : ( ) => {
let fileExplorer = globalRegistry . get ( 'fileexplorer' ) . api let fileExplorer = globalRegistry . get ( 'fileexplorer/browser ' ) . api
fileExplorer . creatNewFile ( ) fileExplorer . create NewFile ( )
} }
} , } ,
{ label : 'Import from GitHub' , type : ` callback ` , payload : ( ) => { this . alert ( ` -imported from GitHub- ` ) } } , { label : 'Open file' ,
{ label : 'Import from gist' , type : ` callback ` , payload : ( ) => { this . alert ( ` -imported from gist- ` ) } } , type : ` callback ` ,
{ label : 'Import from swarm' , type : ` callback ` , payload : ( ) => { this . alert ( ` -imported from swarm- ` ) } } , description : ` ` ,
{ label : 'Import from ipfs' , type : ` callback ` , payload : ( ) => { this . alert ( ` -imported from ipfs- ` ) } } , payload : ( ) => { this . alert ( ` -imported from gist- ` ) }
{ label : 'Import from gist' , type : ` callback ` , payload : ( ) => { this . alert ( ` -imported from gist- ` ) } } , } ,
{ label : 'Open file' , type : ` callback ` , payload : ( ) => { this . alert ( ` -imported from gist- ` ) } } { label : 'Import from gist' ,
] * / type : ` callback ` ,
description : ` ` ,
var actionsLearn = [ payload : ( ) => {
{ label : 'Remix documentation' , type : ` link ` , payload : ` https://remix.readthedocs.io/en/latest/# ` } , let app = globalRegistry . get ( 'app' ) . api
{ label : 'GitHub repository' , type : ` link ` , payload : ` https://github.com/ethereum/remix-ide ` } , app . loadFromGist ( { gist : '' } )
{ label : 'Access local file system. remixd' , type : ` link ` , payload : ` https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html ` } , }
{ label : 'npm module for remixd' , type : ` link ` , payload : ` https://www.npmjs.com/package/remixd ` } , } ,
{ label : 'Medium posts' , type : ` link ` , payload : ` https://medium.com/remix-ide ` } , { label : 'Import from GitHub' ,
{ label : 'Tutorials' , type : ` link ` , payload : ` https://github.com/ethereum/remix-workshops ` } type : ` callback ` ,
] description : ` ` ,
payload : ( ) => {
var actionsPlugins = [ load ( 'URL' )
{ label : 'Remix plugins & modules' , type : ` link ` , payload : ` https://github.com/ethereum/remix-plugin/blob/master/readme.md ` } , }
{ label : 'Repository on GitHub' , type : ` link ` , payload : ` https://github.com/ethereum/remix-plugin ` } , } ,
{ label : 'Examples' , type : ` link ` , payload : ` https://github.com/ethereum/remix-plugin/tree/master/examples ` } , { label : 'Import from Swarm' ,
{ label : 'Build a plugin for Remix' , type : ` link ` , payload : ` https://medium.com/remix-ide/build-a-plugin-for-remix-90d43b209c5a ` } type : ` callback ` ,
description : ` ` ,
payload : ( ) => { load ( 'bzz-raw URL' ) }
} ,
{ label : 'Import from IPFS' ,
type : ` callback ` ,
description : ` ` ,
payload : ( ) => { load ( 'IPFS URL' ) }
} ,
{ label : 'Connect to localhost' ,
type : ` callback ` ,
description : ` ` ,
payload : ( ) => {
appManager . ensureActivated ( 'remixd' )
}
}
] ]
var actionsHelp = [ var actionsHelp = [
{ label : 'Gitter channel' , type : ` link ` , payload : ` https://gitter.im/ethereum/remix ` } , { label : 'Remix documentation' , type : ` link ` , description : ` ` , payload : ` https://remix.readthedocs.io/en/latest/# ` } ,
{ label : 'Stack Overflow' , type : ` link ` , payload : ` https://stackoverflow.com/questions/tagged/remix ` } , { label : 'Access local file system. remixd' , description : ` ` , type : ` link ` , payload : ` https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html ` } ,
{ label : 'Reddit' , type : ` link ` , payload : ` https://www.reddit.com/r/ethdev/search?q=remix&restrict_sr=1 ` } { label : 'Medium posts' , type : ` link ` , description : ` ` , payload : ` https://medium.com/remix-ide ` } ,
{ label : 'Plugins & modules' , type : ` link ` , description : ` ` , payload : ` https://github.com/ethereum/remix-plugin/blob/master/readme.md ` } ,
{ label : 'GitHub repo' , type : ` link ` , description : ` ` , payload : ` https://github.com/ethereum/remix-ide ` } ,
{ label : 'Gitter channel' , type : ` link ` , description : ` ` , payload : ` https://gitter.im/ethereum/remix ` } ,
{ label : 'Stack Overflow' , type : ` link ` , description : ` ` , payload : ` https://stackoverflow.com/questions/tagged/remix ` } ,
{ label : 'Reddit' , type : ` link ` , description : ` ` , payload : ` https://www.reddit.com/r/ethdev/search?q=remix&restrict_sr=1 ` }
] ]
// var sectionStart = new Section('Start', actionsStart)
var sectionStart = new Section ( 'Start' , actionsStart )
var sectionLearn = new Section ( 'Learn' , actionsLearn ) let sectionHelp = new Section ( 'Help' , actionsHelp )
var sectionPlugins = new Section ( 'Plugins' , actionsPlugins )
var sectionHelp = new Section ( 'Help' , actionsHelp )
var sectionsWorkspaces = [ ] this . sectionWorkspaceMain = [ ]
this . sectionWorkspaceOthers = [ ]
defaultWorkspaces ( appManager ) . forEach ( ( workspace ) => { defaultWorkspaces ( appManager ) . forEach ( ( workspace ) => {
sectionsWorkspaces . push ( { if ( workspace . isMain ) {
this . sectionWorkspaceMain . push ( {
label : workspace . title , label : workspace . title ,
type : 'callback' , type : 'callback' ,
description : workspace . description ,
payload : ( ) => { workspace . activate ( ) } payload : ( ) => { workspace . activate ( ) }
} ) } )
} ) } else {
sections Workspaces . push ( { this . sectionWorkspaceOther s . push ( {
label : 'Close All Modules' , label : workspace . title ,
type : 'callback' , type : 'callback' ,
payload : ( ) => { description : workspace . description ,
appStore . getActives ( ) payload : ( ) => { workspace . activate ( ) }
. filter ( ( { profile } ) => ! profile . required ) } )
. forEach ( ( profile ) => { appManager . deactivateOne ( profile . name ) } )
} }
} ) } )
var sectionWorkspace = new Section ( 'Workspaces' , sectionsWorkspaces ) this . sections . push ( sectionStart )
this . sections . push ( sectionWorkspace )
// this.sections.push(sectionStart)
this . sections . push ( sectionLearn )
this . sections . push ( sectionPlugins )
this . sections . push ( sectionHelp ) this . sections . push ( sectionHelp )
} }
@ -131,20 +172,54 @@ export class LandingPage extends ApiFactory {
< div class = "${css.landingPage}" > < div class = "${css.landingPage}" >
< / d i v > < / d i v >
` `
totalLook . appendChild ( yo `
< div class = "${css.sectionContainer} p-2" > let main = yo ` <div class="container m-4"></div> `
< img class = "${css.im}" src = "${logo}" / > for ( let i = 0 ; i < this . sectionWorkspaceMain . length ; i ++ ) {
$ { this . sections [ 0 ] . render ( ) } main . appendChild ( yo `
< / d i v > < span class = "btn btn-secondary btn-lg m-2" onclick = "${this.sectionWorkspaceMain[i].payload}" >
$ { this . sectionWorkspaceMain [ i ] . label }
< / s p a n >
` )
` )
}
for ( let i = 1 ; i < this . sections . length ; i ++ ) { let others = yo ` <div class="container m-4"></div> `
totalLook . appendChild ( yo ` for ( let i = 0 ; i < this . sectionWorkspaceOthers . length ; i ++ ) {
others . appendChild ( yo `
< span class = "btn btn-secondary btn-sm m-2" onclick = "${this.sectionWorkspaceOthers[i].payload}" >
$ { this . sectionWorkspaceOthers [ i ] . label }
< / s p a n >
` )
}
let docs = yo ` <div class="container m-4"></div> `
for ( let i = 0 ; i < this . sections . length ; i ++ ) {
docs . appendChild ( yo `
< div class = "${css.sectionContainer} p-2" > < div class = "${css.sectionContainer} p-2" >
$ { this . sections [ i ] . render ( ) } $ { this . sections [ i ] . render ( ) }
< / d i v > < / d i v >
` )
` )
} }
totalLook . appendChild ( yo `
< div class = "container-fluid" >
< div class = "row" >
< div class = "card m-4 p-4" style = "min-width: 50%;" >
< img class = "card-img-top ${css.im}" src = "${logo}" / >
< div class = "card-body-fluid m-4" >
< h5 class = "card-header m-4" > Workspaces < / h 5 >
< h6 > Create , compile and execute smart contracts < / h 6 >
< p > $ { main } < / p >
< h6 > Most used plugins < / h 6 >
< p > $ { others } < / p >
< / d i v >
< / d i v >
< div >
$ { docs }
< / d i v >
< / d i v >
< / d i v >
` )
return totalLook return totalLook
} }
} }
yann300
6 years ago
committed by
GitHub