${self.data._options.map(label => {
- var input = yo`
`
+ let index = self.data._elements.length
+ var input = yo`
+
+ `
if (self.data.selected.indexOf(label) !== -1) {
input.checked = true
self.event.trigger('select', [label])
@@ -58,7 +66,7 @@ class Dropdown {
return yo`
${input}
-
+
`
})}
diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 0c7cbfdb35..8e3b3790bd 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -1,33 +1,38 @@
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-// var globalRegistry = require('../../../global/registry')
+let yo = require('yo-yo')
+let csjs = require('csjs-inject')
+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 {
- display : table-cell;
+ display : flex;
flex-direction : column;
flex-wrap : wrap;
align-content : space-around;
padding : 20px;
- max-width : 300px;
+ max-width : 340px;
+ min-height : 300px;
background-color: var(--light);
font-family : "Lucida Console", Monaco, monospace;
}
.landingPage {
height : 100%;
width : 100%;
- background-color: var(--light);
flex-wrap : wrap;
justify-content : space-evenly;
+ user-select : none;
}
.im {
display : grid;
- max-width : 150px;
- max-height : 160px;
+ max-width : 200px;
+ max-height : 200px;
width : 100%;
height : 100%;
padding : 20px;
background-color: var(--bg-light);
+ align-self : center;
}
.im:hover {
}
@@ -43,73 +48,109 @@ export class LandingPage extends ApiFactory {
constructor (appManager, appStore) {
super()
this.sections = []
- /* var actionsStart = [
+ 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',
type: 'callback',
payload: () => {
- let fileExplorer = globalRegistry.get('fileexplorer').api
- fileExplorer.creatNewFile()
+ let fileExplorer = globalRegistry.get('fileexplorer/browser').api
+ fileExplorer.createNewFile()
}
},
- {label: 'Import from GitHub', type: `callback`, payload: () => { this.alert(`-imported from GitHub-`) }},
- {label: 'Import from gist', type: `callback`, payload: () => { this.alert(`-imported from gist-`) }},
- {label: 'Import from swarm', type: `callback`, payload: () => { this.alert(`-imported from swarm-`) }},
- {label: 'Import from ipfs', type: `callback`, payload: () => { this.alert(`-imported from ipfs-`) }},
- {label: 'Import from gist', type: `callback`, payload: () => { this.alert(`-imported from gist-`) }},
- {label: 'Open file', type: `callback`, payload: () => { this.alert(`-imported from gist-`) }}
- ] */
-
- var actionsLearn = [
- { label: 'Remix documentation', type: `link`, payload: `https://remix.readthedocs.io/en/latest/#` },
- { label: 'GitHub repository', type: `link`, payload: `https://github.com/ethereum/remix-ide` },
- { 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: 'Tutorials', type: `link`, payload: `https://github.com/ethereum/remix-workshops` }
- ]
-
- var actionsPlugins = [
- { 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: 'Build a plugin for Remix', type: `link`, payload: `https://medium.com/remix-ide/build-a-plugin-for-remix-90d43b209c5a` }
+ { label: 'Open file',
+ type: `callback`,
+ description: ``,
+ payload: () => { this.alert(`-imported from gist-`) }
+ },
+ { label: 'Import from gist',
+ type: `callback`,
+ description: ``,
+ payload: () => {
+ let app = globalRegistry.get('app').api
+ app.loadFromGist({gist: ''})
+ }
+ },
+ { label: 'Import from GitHub',
+ type: `callback`,
+ description: ``,
+ payload: () => {
+ load('URL')
+ }
+ },
+ { label: 'Import from Swarm',
+ 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 = [
- { label: 'Gitter channel', type: `link`, payload: `https://gitter.im/ethereum/remix` },
- { label: 'Stack Overflow', type: `link`, payload: `https://stackoverflow.com/questions/tagged/remix` },
- { label: 'Reddit', type: `link`, payload: `https://www.reddit.com/r/ethdev/search?q=remix&restrict_sr=1` }
+ { label: 'Remix documentation', type: `link`, description: ``, payload: `https://remix.readthedocs.io/en/latest/#` },
+ { label: 'Access local file system. remixd', description: ``, type: `link`, payload: `https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html` },
+ { 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 sectionLearn = new Section('Learn', actionsLearn)
- var sectionPlugins = new Section('Plugins', actionsPlugins)
- var sectionHelp = new Section('Help', actionsHelp)
+ var sectionStart = new Section('Start', actionsStart)
+ let sectionHelp = new Section('Help', actionsHelp)
- var sectionsWorkspaces = []
+ this.sectionWorkspaceMain = []
+ this.sectionWorkspaceOthers = []
defaultWorkspaces(appManager).forEach((workspace) => {
- sectionsWorkspaces.push({
- label: workspace.title,
- type: 'callback',
- payload: () => { workspace.activate() }
- })
- })
- sectionsWorkspaces.push({
- label: 'Close All Modules',
- type: 'callback',
- payload: () => {
- appStore.getActives()
- .filter(({ profile }) => !profile.required)
- .forEach((profile) => { appManager.deactivateOne(profile.name) })
+ if (workspace.isMain) {
+ this.sectionWorkspaceMain.push({
+ label: workspace.title,
+ type: 'callback',
+ description: workspace.description,
+ payload: () => { workspace.activate() }
+ })
+ } else {
+ this.sectionWorkspaceOthers.push({
+ label: workspace.title,
+ type: 'callback',
+ description: workspace.description,
+ payload: () => { workspace.activate() }
+ })
}
})
- var sectionWorkspace = new Section('Workspaces', sectionsWorkspaces)
-
- this.sections.push(sectionWorkspace)
- // this.sections.push(sectionStart)
- this.sections.push(sectionLearn)
- this.sections.push(sectionPlugins)
+ this.sections.push(sectionStart)
this.sections.push(sectionHelp)
}
@@ -131,20 +172,54 @@ export class LandingPage extends ApiFactory {
`
- totalLook.appendChild(yo`
-
-
- ${this.sections[0].render()}
-
- `)
- for (let i = 1; i < this.sections.length; i++) {
- totalLook.appendChild(yo`
+ let main = yo`
`
+ for (let i = 0; i < this.sectionWorkspaceMain.length; i++) {
+ main.appendChild(yo`
+
+ ${this.sectionWorkspaceMain[i].label}
+
+ `)
+ }
+
+ let others = yo`
`
+ for (let i = 0; i < this.sectionWorkspaceOthers.length; i++) {
+ others.appendChild(yo`
+
+ ${this.sectionWorkspaceOthers[i].label}
+
+ `)
+ }
+
+ let docs = yo`
`
+ for (let i = 0; i < this.sections.length; i++) {
+ docs.appendChild(yo`
${this.sections[i].render()}
`)
}
+
+ totalLook.appendChild(yo`
+
+
+
+
+
+
+
Create, compile and execute smart contracts
+
${main}
+
Most used plugins
+
${others}
+
+
+
+ ${docs}
+
+
+
+ `)
+
return totalLook
}
}
diff --git a/src/app/ui/landing-page/section.js b/src/app/ui/landing-page/section.js
index 72f51193f8..4cb1ee4c5b 100644
--- a/src/app/ui/landing-page/section.js
+++ b/src/app/ui/landing-page/section.js
@@ -6,6 +6,7 @@ var css = csjs`
cursor: pointer;
font-weight: normal;
max-width: 300px;
+ user-select: none;
}
.text:hover {
font-weight: bold;
@@ -14,6 +15,7 @@ var css = csjs`
cursor: pointer;
font-weight: normal;
text-decoration : none;
+ user-select: none;
}
.link:hover {
font-weight: bold;
@@ -25,13 +27,12 @@ class Section {
constructor (title, actions) {
this.title = title
this.actions = actions
- this.cardStyle = (this.title === 'Workspaces') ? 'bg-success text-light' : 'bg-light text-dark border-dark'
}
render () {
let sectionLook = yo`
-
-
+
`
@@ -39,7 +40,7 @@ class Section {
if (this.actions[i].type === `callback`) {
sectionLook.appendChild(yo`
-
+
${this.actions[i].label}
@@ -47,7 +48,7 @@ class Section {
} else if (this.actions[i].type === `link`) {
sectionLook.appendChild(yo`
diff --git a/src/app/ui/landing-page/workspace.js b/src/app/ui/landing-page/workspace.js
index 539fcfa30d..9189be0a6b 100644
--- a/src/app/ui/landing-page/workspace.js
+++ b/src/app/ui/landing-page/workspace.js
@@ -1,7 +1,8 @@
export class Workspace {
- constructor (title, description, activate, deactivate) {
+ constructor (title, description, isMain, activate, deactivate) {
this.title = title
this.description = description
+ this.isMain = isMain
this.activate = activate
this.deactivate = deactivate
}
@@ -9,23 +10,31 @@ export class Workspace {
export const defaultWorkspaces = (appManager) => {
return [
- new Workspace('Solidity', '', () => {
- appManager.ensureActivated('solidity')
- appManager.ensureActivated('run')
- appManager.ensureActivated('solidityStaticAnalysis')
- appManager.ensureActivated('solidityUnitTesting')
- }, () => {}),
- new Workspace('Vyper', '', () => {
- appManager.ensureActivated('vyper')
- appManager.ensureActivated('run')
+ new Workspace(
+ 'Solidity',
+ 'Writing smart contracts. It is used for implementing smart contracts on various blockchain platforms',
+ true,
+ () => {
+ appManager.ensureActivated('solidity')
+ appManager.ensureActivated('run')
+ appManager.ensureActivated('solidityStaticAnalysis')
+ appManager.ensureActivated('solidityUnitTesting')
+ }, () => {}),
+ new Workspace(
+ 'Vyper',
+ 'Vyper is a contract-oriented, pythonic programming language that targets the Ethereum Virtual Machine (EVM)',
+ true,
+ () => {
+ appManager.ensureActivated('vyper')
+ appManager.ensureActivated('run')
+ }, () => {}),
+ new Workspace('Debugger', 'Debug transactions with remix', false, () => {
+ appManager.ensureActivated('debugger')
}, () => {}),
- new Workspace('Pipeline', '', () => {
+ new Workspace('Pipeline', '', false, () => {
appManager.ensureActivated('solidity')
- appManager.ensureActivated('run')
appManager.ensureActivated('pipeline')
- }, () => {}),
- new Workspace('Debugger', '', () => {
- appManager.ensureActivated('debugger')
- }, () => {})
+ appManager.ensureActivated('run')
+ })
]
}
diff --git a/src/app/ui/styles/dropdown-styles.js b/src/app/ui/styles/dropdown-styles.js
index 2ccbe1f59c..d29b0944bf 100644
--- a/src/app/ui/styles/dropdown-styles.js
+++ b/src/app/ui/styles/dropdown-styles.js
@@ -6,23 +6,22 @@ var css = csjs`
position : relative;
display : flex;
flex-direction : column;
- margin-right : 10px;
+ margin-left : 10px;
width : auto;
}
.selectbox {
display : flex;
align-items : center;
- margin : 3px;
cursor : pointer;
}
.selected {
display : inline-block;
- min-width : 30ch;
max-width : 30ch;
white-space : nowrap;
text-overflow : ellipsis;
overflow : hidden;
- padding : 3px;
+ margin-right : 10px;
+ min-width : 200px;
}
.icon {
padding : 0px 5px;
@@ -32,15 +31,18 @@ var css = csjs`
display : flex;
flex-direction : column;
align-items : end;
- top : 24px;
+ top : 32px;
left : 0;
- width : 250px;
- border : 1px solid var(--primary);
+ width : 245px;
+ border : 1px solid var(--dark);
border-radius : 3px;
border-top : 0;
+ padding-left : 5px;
}
.option {
- margin: 0;
+ margin-left : 5px;
+ margin-top : 5px;
+ width : -webkit-fill-available;
}
`
diff --git a/src/remixAppManager.js b/src/remixAppManager.js
index 65e8647384..73ee4e1d22 100644
--- a/src/remixAppManager.js
+++ b/src/remixAppManager.js
@@ -18,6 +18,7 @@ export class RemixAppManager extends AppManagerApi {
ensureActivated (apiName) {
if (!this.store.isActive(apiName)) this.activateOne(apiName)
+ this.event.emit('ensureActivated', apiName)
}
proxy () {