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

new style for landing page

Browse Source
pull/1/head
LianaHus 6 years ago
parent 245a7fb25e
commit 22247f9464
3 changed files with 175 additions and 79 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. 206
      src/app/ui/landing-page/landing-page.js
  2. 7
      src/app/ui/landing-page/section.js
  3. 41
      src/app/ui/landing-page/workspace.js

206
src/app/ui/landing-page/landing-page.js
Unescape View File

@ -1,35 +1,39 @@
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 : 20px; padding : 20px;
max-width : 340px; max-width : 340px;
min-height : 300px;
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 : 150px; max-width : 200px;
max-height : 160px; max-height : 200px;
width : 100%; width : 100%;
height : 100%; height : 100%;
padding : 20px; padding : 20px;
background-color: var(--bg-light); background-color: var(--bg-light);
margin-left : 75px; align-self : center;
user-select : none;
} }
.im:hover { .im:hover {
} }
@ -39,69 +43,119 @@ var css = csjs`
import { defaultWorkspaces } from './workspace' import { defaultWorkspaces } from './workspace'
import { ApiFactory } from 'remix-plugin' import { ApiFactory } from 'remix-plugin'
import Section from './section' import Section from './section'
import { ENGINE_METHOD_ALL } from 'constants';
export class LandingPage extends ApiFactory { export class LandingPage extends ApiFactory {
constructor (appManager, appStore) { constructor (appManager, appStore) {
super() super()
this.sections = [] 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', { 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.createNewFile()
} }
}, },
{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: 'Access local file system. remixd', type: `link`, payload: `https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html` }, app.loadFromGist({gist: ''})
{ label: 'Medium posts', type: `link`, payload: `https://medium.com/remix-ide` }, }
{ label: 'Plugins & modules', type: `link`, payload: `https://github.com/ethereum/remix-plugin/blob/master/readme.md` }, },
{ label: 'GitHub repo', type: `link`, payload: `https://github.com/ethereum/remix-ide` } { 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 = [ 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 sectionHelp = new Section('Help', actionsHelp)
var sectionsWorkspaces = [] this.sectionWorkspaceMain = []
this.sectionWorkspaceOthers = []
defaultWorkspaces(appManager).forEach((workspace) => { defaultWorkspaces(appManager).forEach((workspace) => {
sectionsWorkspaces.push({ if (workspace.isMain) {
label: workspace.title, this.sectionWorkspaceMain.push({
type: 'callback', label: workspace.title,
payload: () => { workspace.activate() } type: 'callback',
}) description: workspace.description,
}) payload: () => { workspace.activate() }
sectionsWorkspaces.push({ })
label: 'Close All Modules', } else {
type: 'callback', this.sectionWorkspaceOthers.push({
payload: () => { label: workspace.title,
appStore.getActives() type: 'callback',
.filter(({ profile }) => !profile.required) description: workspace.description,
.forEach((profile) => { appManager.deactivateOne(profile.name) }) payload: () => { workspace.activate() }
})
} }
}) })
var sectionWorkspace = new Section('Workspaces', sectionsWorkspaces) // var sectionWorkspaceMain = new Section('Workspaces', sectionsWorkspacesMain)
this.sections.push(sectionWorkspace) // this.sections.push(sectionWorkspaceMain)
// this.sections.push(sectionStart) this.sections.push(sectionStart)
this.sections.push(sectionLearn)
this.sections.push(sectionHelp) this.sections.push(sectionHelp)
} }
@ -123,20 +177,54 @@ export class LandingPage extends ApiFactory {
<div class="${css.landingPage}"> <div class="${css.landingPage}">
</div> </div>
` `
totalLook.appendChild(yo`
<div class="${css.sectionContainer} p-2">
<img class="${css.im}" src="${logo}" />
${this.sections[0].render()}
</div>
`)
for (let i = 1; i < this.sections.length; i++) { let main = yo`<div class="container m-4"></div>`
totalLook.appendChild(yo` for (let i = 0; i < this.sectionWorkspaceMain.length; i++) {
main.appendChild(yo`
<span class="btn btn-secondary btn-lg m-2" onclick="${this.sectionWorkspaceMain[i].payload}">
${this.sectionWorkspaceMain[i].label}
</span>
`)
}
let others = yo`<div class="container m-4"></div>`
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}
</span>
`)
}
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()}
</div> </div>
`) `)
} }
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</h5>
<h6>Create, compile and execute smart contracts</h6>
<p>${main}</p>
<h6> Most used plugins</h6>
<p>${others}</p>
</div>
</div>
<div>
${docs}
</div>
</div>
</div>
`)
return totalLook return totalLook
} }
} }

7
src/app/ui/landing-page/section.js
Unescape View File

@ -27,12 +27,11 @@ class Section {
constructor (title, actions) { constructor (title, actions) {
this.title = title this.title = title
this.actions = actions this.actions = actions
this.cardStyle = (this.title === 'Workspaces') ? 'bg-success text-light' : 'bg-light text-dark'
} }
render () { render () {
let sectionLook = yo` let sectionLook = yo`
<div class="card ${this.cardStyle} p-3" style="min-width: 300px; min-height: 190px;"> <div class="card border-0 bg-light bd-light text-dark p-1" style="min-width: 300px; min-height: 210px;">
<div class="card-header font-weight-bold" style="user-select: none;">${this.title}</div> <div class="card-header font-weight-bold" style="user-select: none;">${this.title}</div>
<p></p> <p></p>
</div> </div>
@ -41,7 +40,7 @@ class Section {
if (this.actions[i].type === `callback`) { if (this.actions[i].type === `callback`) {
sectionLook.appendChild(yo` sectionLook.appendChild(yo`
<div> <div>
<span class ="${css.text}" onclick=${this.actions[i].payload} > <span class="${css.text} text-dark" onclick=${this.actions[i].payload} >
${this.actions[i].label} ${this.actions[i].label}
</span> </span>
</div> </div>
@ -49,7 +48,7 @@ class Section {
} else if (this.actions[i].type === `link`) { } else if (this.actions[i].type === `link`) {
sectionLook.appendChild(yo` sectionLook.appendChild(yo`
<div > <div >
<a class="${css.link} text-decoration-none" href=${this.actions[i].payload} target="_blank" > <a class="${css.link} text-dark text-decoration-none" href=${this.actions[i].payload} target="_blank" >
${this.actions[i].label} ${this.actions[i].label}
</a> </a>
</div> </div>

41
src/app/ui/landing-page/workspace.js
Unescape View File

@ -1,7 +1,8 @@
export class Workspace { export class Workspace {
constructor (title, description, activate, deactivate) { constructor (title, description, isMain, activate, deactivate) {
this.title = title this.title = title
this.description = description this.description = description
this.isMain = isMain
this.activate = activate this.activate = activate
this.deactivate = deactivate this.deactivate = deactivate
} }
@ -9,23 +10,31 @@ export class Workspace {
export const defaultWorkspaces = (appManager) => { export const defaultWorkspaces = (appManager) => {
return [ return [
new Workspace('Solidity', '', () => { new Workspace(
appManager.ensureActivated('solidity') 'Solidity',
appManager.ensureActivated('run') 'Writing smart contracts. It is used for implementing smart contracts on various blockchain platforms',
appManager.ensureActivated('solidityStaticAnalysis') true,
appManager.ensureActivated('solidityUnitTesting') () => {
}, () => {}), appManager.ensureActivated('solidity')
new Workspace('Vyper', '', () => { appManager.ensureActivated('run')
appManager.ensureActivated('vyper') appManager.ensureActivated('solidityStaticAnalysis')
appManager.ensureActivated('run') 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('solidity')
appManager.ensureActivated('run')
appManager.ensureActivated('pipeline') appManager.ensureActivated('pipeline')
}, () => {}), appManager.ensureActivated('run')
new Workspace('Debugger', '', () => { })
appManager.ensureActivated('debugger')
}, () => {})
] ]
} }

Write Preview
Loading…
Cancel
Save