Merge pull request #1742 from ethereum/swap_it_Home

landing page styleing
pull/1/head
yann300 6 years ago committed by GitHub
commit 726689f07f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      src/app/editor/contextView.js
  2. 4
      src/app/editor/contextualListener.js
  3. 8
      src/app/editor/styles/contextView-styles.js
  4. 15
      src/app/panels/editor-panel.js
  5. 78
      src/app/ui/landing-page/generate.js
  6. 98
      src/app/ui/landing-page/landing-page.js
  7. 62
      src/app/ui/landing-page/section.js

@ -31,13 +31,17 @@ class ContextView {
this.sourceMappingDecoder = new SourceMappingDecoder()
this.previousElement = null
this.contextualListener.event.register('contextChanged', nodes => {
this.show()
this._nodes = nodes
this.update()
})
this.contextualListener.event.register('stopHighlighting', () => {
this.hide()
})
}
render () {
const view = yo`<div class=${css.contextview}>
const view = yo`<div class="${css.contextview} ${css.contextviewcontainer} bg-secondary border-top-0">
<div class=${css.container}>
${this._renderTarget()}
</div>

@ -69,7 +69,6 @@ class ContextualListener {
this.currentPosition = cursorPosition
return
}
this._stopHighlighting()
this.currentPosition = cursorPosition
this.currentFile = file
if (compilationResult && compilationResult.data && compilationResult.data.sources[file]) {
@ -79,7 +78,7 @@ class ContextualListener {
this._highlightExpressions(nodes[nodes.length - 1], compilationResult)
}
this.event.trigger('contextChanged', [nodes])
}
} else this._stopHighlighting()
}
_buildIndex (compilationResult, source) {
@ -164,6 +163,7 @@ class ContextualListener {
const event = this._activeHighlights[eventKey]
this.editor.removeMarker(event.eventId, event.fileTarget)
}
this.event.trigger('stopHighlighting', [])
this._activeHighlights = []
}

@ -43,6 +43,14 @@ var css = csjs`
height: 13px;
margin-right: 5px;
}
.contextviewcontainer{
position : absolute;
top : 39px;
z-index : 50;
left : 350px;
border-radius : 1px;
border : 2px solid var(--secondary);
}
`
module.exports = css

@ -24,14 +24,7 @@ var css = csjs`
height : 100%;
width : 100%;
}
.contextviewcontainer{
position : absolute;
top : 39px;
z-index : 50;
left : 350px;
border-radius : 1px;
border : 2px solid var(--secondary);
}
`
class EditorPanel {
@ -64,12 +57,10 @@ class EditorPanel {
self._deps.fileManager.events.on('currentFileChanged', (file) => {
// we check upstream for "fileChanged"
self._view.editor.style.display = 'block'
self._components.contextView.show()
self._view.mainPanel.style.display = 'none'
})
self.tabProxy.event.on('switchFile', (file) => {
self._view.editor.style.display = 'block'
self._components.contextView.show()
self._view.mainPanel.style.display = 'none'
})
self.tabProxy.event.on('closeFile', (file) => {
@ -185,9 +176,7 @@ class EditorPanel {
self._view.content = yo`
<div class=${css.content}>
${self.tabProxy.renderTabsbar()}
<div class="${css.contextviewcontainer} bg-secondary border-top-0">
${self._components.contextView.render()}
</div>
${self._components.contextView.render()}
${self._view.editor}
${self._view.mainPanel}
${self._view.terminal}

@ -1,78 +0,0 @@
/* global */
import LandingPage from './landing-page'
import Section from './section'
import { defaultWorkspaces } from './workspace'
// var globalRegistry = require('../../../global/registry')
export function homepageProfile () {
return {
displayName: 'Home',
name: 'home',
methods: [],
events: [],
description: ' - ',
icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+',
prefferedLocation: 'mainPanel'
}
}
export function generateHomePage (appManager, appStore) {
/* var actions1 = [
{ label: 'New file',
type: 'callback',
payload: () => {
let fileManager = globalRegistry.get('fileexplorerbrowser').api
fileManager.creatNewFile()
}
},
{label: 'Import from GitHub', type: `callback`, payload: () => { this.alert(`-imported from GitHub-`) }},
{label: 'Import from gist', type: `callback`, payload: () => { this.alert(`-imported from gist-`) }}
] */
var actions3 = [
{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 with 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 actions4 = [
{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`}
]
var actions5 = [
{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`}
]
// var sectionStart = new Section('Start', actions1)
var sectionLearn = new Section('Learn', actions3)
var sectionPlugins = new Section('Plugins', actions4)
var sectionHelp = new Section('Help', actions5)
var sectionsWorkspaces = []
sectionsWorkspaces.push({
label: 'Close All Modules',
type: 'callback',
payload: () => {
appStore.getActives()
.filter(({profile}) => !profile.required)
.forEach(({profile}) => { appManager.deactivateOne(profile.name) })
}})
defaultWorkspaces(appManager).forEach((workspace) => {
sectionsWorkspaces.push({
label: workspace.title,
type: 'callback',
payload: () => { workspace.activate() }
})
})
var sectionWorkspace = new Section('Workspaces', sectionsWorkspaces)
return new LandingPage([sectionWorkspace, /* sectionStart, */sectionLearn, sectionPlugins, sectionHelp])
}

File diff suppressed because one or more lines are too long

@ -1,47 +1,61 @@
var yo = require('yo-yo')
var csjs = require('csjs-inject')
let yo = require('yo-yo')
let csjs = require('csjs-inject')
var css = csjs`
.item {
display : flex;
flex-direction : column;
align-items : center;
width : 400px;
padding : 50px;
font-family : "Lucida Console", Monaco, monospace
}
a:link {
color : black;
.text {
background-color : var(--success);
cursor: pointer;
color: var(--primary);
font-weight: normal;
}
.text:hover {
font-weight: bold;
}
.link {
cursor: pointer;
background-color : var(--primary);
color: var(--success);
font-weight: normal;
text-decoration : none;
}
.link:hover {
color: var(--success);
font-weight: bold;
text-decoration : none;
}
`
class Section {
constructor (title, actions) {
this.title = title
this.actions = actions
this.cardStyle = (this.title === 'Workspaces') ? 'bg-success text-primary' : 'bg-primary text-success border-success'
}
render () {
var sectionLook = yo`
<div class="${css.item}">
<h2> ${this.title} </h2>
let sectionLook = yo`
<div class="card ${this.cardStyle} p-3" style="min-width: 300px;">
<div class="card-header font-weight-bold">${this.title}</div>
<p></p>
</div>
`
for (var i = 0; i < this.actions.length; i++) {
if (this.actions[i].type === `callback`) {
sectionLook.appendChild(yo`
<div>
<span class='text-warning h6' style="cursor:pointer;" onclick= ${this.actions[i].payload} > ${this.actions[i].label} </span>
</div>
`)
<div>
<span class ="${css.text}" onclick=${this.actions[i].payload} >
${this.actions[i].label}
</span>
</div>
`)
} else if (this.actions[i].type === `link`) {
sectionLook.appendChild(yo`
<div>
<a class='text-warning h6' href= ${this.actions[i].payload} target="_blank" > ${this.actions[i].label} </a>
</div>
`)
<div >
<a class="${css.link} text-decoration-none" href=${this.actions[i].payload} target="_blank" >
${this.actions[i].label}
</a>
</div>
`)
}
}

Loading…
Cancel
Save