Skip to content

B
baas-ide
Commit 22247f94 authored by LianaHus's avatar LianaHus
Browse files
Options

new style for landing page

parent 245a7fb2
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 79 deletions
src/app/ui/landing-page/landing-page.js
View file @ 22247f94
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` ...@@ -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 { ...@@ -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
} }
} }
src/app/ui/landing-page/section.js
View file @ 22247f94
...@@ -27,12 +27,11 @@ class Section { ...@@ -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 { ...@@ -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 { ...@@ -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>
......
src/app/ui/landing-page/workspace.js
View file @ 22247f94
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 { ...@@ -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')
}, () => {})
] ]
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment