diff --git a/.history/package_20190318184257.json b/.history/package_20190318184257.json new file mode 100644 index 0000000000..69c0b6b90c --- /dev/null +++ b/.history/package_20190318184257.json @@ -0,0 +1,184 @@ +{ + "name": "remix-ide", + "version": "v0.7.5", + "description": "Minimalistic browser-based Solidity IDE", + "devDependencies": { + "ace-mode-solidity": "^0.1.0", + "async": "^2.1.2", + "babel-eslint": "^7.1.1", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-yo-yoify": "^0.3.3", + "babel-polyfill": "^6.22.0", + "babel-preset-env": "^1.6.1", + "babel-preset-es2015": "^6.24.0", + "babel-preset-es2017": "^6.24.1", + "babel-preset-stage-0": "^6.24.1", + "babelify": "^7.3.0", + "brace": "^0.8.0", + "browserify-reload": "^1.0.3", + "component-type": "^1.2.1", + "copy-text-to-clipboard": "^1.0.4", + "csjs-inject": "^1.0.1", + "csslint": "^1.0.2", + "deep-equal": "^1.0.1", + "ethereumjs-util": "^5.1.2", + "execr": "^1.0.1", + "exorcist": "^0.4.0", + "fast-async": "6.3.1", + "fast-levenshtein": "^2.0.6", + "gists": "^1.0.1", + "javascript-serialize": "^1.6.1", + "jquery": "^3.3.1", + "js-base64": "^2.1.9", + "js-beautify": "1.6.14", + "minixhr": "^3.2.2", + "mkdirp": "^0.5.1", + "nightwatch": "^0.9.20", + "notify-error": "^1.2.0", + "npm-link-local": "^1.1.0", + "npm-run-all": "^4.0.2", + "onchange": "^3.2.1", + "remix-debug": "0.3.1", + "remix-analyzer": "0.3.1", + "remix-lib": "0.4.1", + "remix-solidity": "0.3.1", + "remix-tests": "0.1.1", + "remixd": "0.1.8-alpha.6", + "request": "^2.83.0", + "rimraf": "^2.6.1", + "selenium-standalone": "^6.0.1", + "solc": "^0.5.0", + "standard": "^8.5.0", + "swarmgw": "^0.3.1", + "tape": "^4.5.1", + "uglify-js": "^2.8.16", + "vm-browserify": "0.0.4", + "watchify": "^3.9.0", + "web3": "1.0.0-beta.27", + "webworkify": "^1.2.1", + "yo-yo": "^1.2.2", + "yo-yoify": "^3.7.3" + }, + "dependencies": { + "http-server": "0.9.0", + "remixd": "0.1.8-alpha.6" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ethereum/remix-ide.git" + }, + "keywords": [ + "ethereum", + "solidity", + "compiler" + ], + "author": "chriseth", + "license": "MIT", + "bugs": { + "url": "https://github.com/ethereum/remix-ide/issues" + }, + "homepage": "https://github.com/ethereum/remix-ide#readme", + "standard": { + "ignore": [ + "build/", + "src/app/editor/mode-solidity.js", + "soljson.js" + ], + "parser": "babel-eslint" + }, + "babel": { + "plugins": [ + "transform-es2015-template-literals", + "transform-es2015-literals", + "transform-es2015-function-name", + "transform-es2015-arrow-functions", + "transform-es2015-block-scoped-functions", + "transform-es2015-classes", + "transform-es2015-object-super", + "transform-es2015-shorthand-properties", + "transform-es2015-duplicate-keys", + "transform-es2015-computed-properties", + "transform-es2015-for-of", + "transform-es2015-sticky-regex", + "transform-es2015-unicode-regex", + "check-es2015-constants", + "transform-es2015-spread", + "transform-es2015-parameters", + "transform-es2015-destructuring", + "transform-es2015-block-scoping" + ] + }, + "browserify": { + "transform": [ + [ + "babelify", + { + "sourceMapsAbsolute": false, + "sourceMaps": true, + "plugins": [ + [ + "fast-async", + { + "runtimePattern": null, + "compiler": { + "es7": true, + "noRuntime": true, + "promises": true, + "wrapAwait": true + } + } + ], + [ + "yo-yoify" + ], + [ + "transform-object-assign" + ] + ], + "presets": [ + "es2015" + ] + } + ] + ] + }, + "bin": { + "remix-ide": "./bin/remix-ide" + }, + "scripts": { + "setupremix": "npm run linkremixlib && npm run linkremixsolidity && npm run linkremixsimulator && npm run linkremixtests", + "pullremix": "git clone https://github.com/ethereum/remix", + "linkremixlib": "cd node_modules && rm -rf remix-lib && ln -s ../../remix/remix-lib remix-lib && cd ..", + "linkremixsolidity": "cd node_modules && rm -rf remix-solidity && ln -s ../../remix/remix-solidity remix-solidity && cd ..", + "linkremixsimulator": "cd node_modules && rm -rf remix-simulator && ln -s ../../remix/remix-simulator remix-simulator && cd ..", + "linkremixtests": "cd node_modules && rm -rf remix-tests && ln -s ../../remix/remix-tests remix-tests && cd ..", + "build": "browserify src/index.js -o build/app.js --exclude solc", + "build_debugger": "browserify src/app/debugger/remix-debugger/index.js -o src/app/debugger/remix-debugger/build/app.js", + "browsertest": "sleep 5 && npm run nightwatch_local", + "csslint": "csslint --ignore=order-alphabetical --errors='errors,duplicate-properties,empty-rules' --exclude-list='assets/css/font-awesome.min.css' assets/css/", + "downloadsolc_root": "wget --no-check-certificate https://solc-bin.ethereum.org/bin/soljson-v0.5.1+commit.c8a2cb62.js -O soljson.js", + "lint": "standard | notify-error", + "make-mock-compiler": "node ci/makeMockCompiler.js", + "minify": "uglifyjs --in-source-map inline --source-map-inline -c warnings=false", + "nightwatch_local": "nightwatch --config nightwatch.js --env local", + "nightwatch_local_debugger": "nightwatch --config nightwatch_debugger.js --env local", + "nightwatch_remote_chrome": "nightwatch --config nightwatch.js --env chrome", + "nightwatch_remote_firefox": "nightwatch --config nightwatch.js --env default", + "nightwatch_remote_ie": "nightwatch --config nightwatch.js --env ie", + "nightwatch_remote_parallel": "nightwatch --config nightwatch.js --env safari,chrome,default", + "nightwatch_remote_safari": "nightwatch --config nightwatch.js --env safari", + "nightwatch_remote_debugger_parallel": "nightwatch --config nightwatch_debugger.js --env safari,chrome,default", + "onchange": "onchange build/app.js -- npm-run-all lint", + "prepublish": "mkdirp build; npm-run-all -ls downloadsolc_root build", + "remixd": "./node_modules/remixd/bin/remixd -s ./contracts --remix-ide http://127.0.0.1:8080", + "selenium": "execr --silent selenium-standalone start", + "selenium-install": "selenium-standalone install", + "serve": "execr --silent http-server .", + "serve_debugger": "execr --silent http-server src/app/debugger/remix-debugger", + "sourcemap": "exorcist --root ../ build/app.js.map > build/app.js", + "start": "npm-run-all -lpr serve watch onchange remixd", + "test": "npm run csslint; standard && node test/index.js", + "test-browser": "npm-run-all -lpr selenium downloadsolc_root make-mock-compiler serve browsertest", + "watch": "watchify src/index.js -dv -p browserify-reload -o build/app.js --exclude solc" + } +} diff --git a/.history/package_20190318191219.json b/.history/package_20190318191219.json new file mode 100644 index 0000000000..6df9dc8437 --- /dev/null +++ b/.history/package_20190318191219.json @@ -0,0 +1,184 @@ +{ + "name": "remix-ide", + "version": "v0.7.5", + "description": "Minimalistic browser-based Solidity IDE", + "devDependencies": { + "ace-mode-solidity": "^0.1.0", + "async": "^2.1.2", + "babel-eslint": "^7.1.1", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-yo-yoify": "^0.3.3", + "babel-polyfill": "^6.22.0", + "babel-preset-env": "^1.6.1", + "babel-preset-es2015": "^6.24.0", + "babel-preset-es2017": "^6.24.1", + "babel-preset-stage-0": "^6.24.1", + "babelify": "^7.3.0", + "brace": "^0.8.0", + "browserify-reload": "^1.0.3", + "component-type": "^1.2.1", + "copy-text-to-clipboard": "^1.0.4", + "csjs-inject": "^1.0.1", + "csslint": "^1.0.2", + "deep-equal": "^1.0.1", + "ethereumjs-util": "^5.1.2", + "execr": "^1.0.1", + "exorcist": "^0.4.0", + "fast-async": "6.3.1", + "fast-levenshtein": "^2.0.6", + "gists": "^1.0.1", + "javascript-serialize": "^1.6.1", + "jquery": "^3.3.1", + "js-base64": "^2.1.9", + "js-beautify": "1.6.14", + "minixhr": "^3.2.2", + "mkdirp": "^0.5.1", + "nightwatch": "^0.9.20", + "notify-error": "^1.2.0", + "npm-link-local": "^1.1.0", + "npm-run-all": "^4.0.2", + "onchange": "^3.2.1", + "remix-debug": "0.3.1", + "remix-analyzer": "0.3.1", + "remix-lib": "0.4.1", + "remix-solidity": "0.3.1", + "remix-tests": "0.1.1", + "remixd": "0.1.8-alpha.6", + "request": "^2.83.0", + "rimraf": "^2.6.1", + "selenium-standalone": "^6.0.1", + "solc": "^0.5.0", + "standard": "^8.5.0", + "swarmgw": "^0.3.1", + "tape": "^4.5.1", + "uglify-js": "^2.8.16", + "vm-browserify": "0.0.4", + "watchify": "^3.9.0", + "web3": "1.0.0-beta.27", + "webworkify": "^1.2.1", + "yo-yo": "^1.2.2", + "yo-yoify": "^3.7.3" + }, + "dependencies": { + "http-server": "0.9.0", + "remixd": "0.1.8-alpha.6" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ethereum/remix-ide.git" + }, + "keywords": [ + "ethereum", + "solidity", + "compiler" + ], + "author": "chriseth", + "license": "MIT", + "bugs": { + "url": "https://github.com/ethereum/remix-ide/issues" + }, + "homepage": "https://github.com/ethereum/remix-ide#readme", + "standard": { + "ignore": [ + "build/", + "src/app/editor/mode-solidity.js", + "soljson.js" + ], + "parser": "babel-eslint" + }, + "babel": { + "plugins": [ + "transform-es2015-template-literals", + "transform-es2015-literals", + "transform-es2015-function-name", + "transform-es2015-arrow-functions", + "transform-es2015-block-scoped-functions", + "transform-es2015-classes", + "transform-es2015-object-super", + "transform-es2015-shorthand-properties", + "transform-es2015-duplicate-keys", + "transform-es2015-computed-properties", + "transform-es2015-for-of", + "transform-es2015-sticky-regex", + "transform-es2015-unicode-regex", + "check-es2015-constants", + "transform-es2015-spread", + "transform-es2015-parameters", + "transform-es2015-destructuring", + "transform-es2015-block-scoping" + ] + }, + "browserify": { + "transform": [ + [ + "babelify", + { + "sourceMapsAbsolute": false, + "sourceMaps": true, + "plugins": [ + [ + "fast-async", + { + "runtimePattern": null, + "compiler": { + "es7": true, + "noRuntime": true, + "promises": true, + "wrapAwait": true + } + } + ], + [ + "yo-yoify" + ], + [ + "transform-object-assign" + ] + ], + "presets": [ + "es2015" + ] + } + ] + ] + }, + "bin": { + "remix-ide": "./bin/remix-ide" + }, + "scripts": { + "setupremix": "npm run linkremixlib && npm run linkremixsolidity && npm run linkremixsimulator && npm run linkremixtests", + "pullremix": "git clone https://github.com/ethereum/remix", + "linkremixlib": "cd node_modules && rm -rf remix-lib && ln -s ../../remix/remix-lib remix-lib && cd ..", + "linkremixsolidity": "cd node_modules && rm -rf remix-solidity && ln -s ../../remix/remix-solidity remix-solidity && cd ..", + "linkremixsimulator": "cd node_modules && rm -rf remix-simulator && ln -s ../../remix/remix-simulator remix-simulator && cd ..", + "linkremixtests": "cd node_modules && rm -rf remix-tests && ln -s ../../remix/remix-tests remix-tests && cd ..", + "build": "browserify src/index.js -o build/app.js --exclude solc", + "build_debugger": "browserify src/app/debugger/remix-debugger/index.js -o src/app/debugger/remix-debugger/build/app.js", + "browsertest": "sleep 5 && npm run nightwatch_local", + "csslint": "csslint --ignore=order-alphabetical --errors='errors,duplicate-properties,empty-rules' --exclude-list='assets/css/font-awesome.min.css' assets/css/", + "downloadsolc_root": "wget --no-check-certificate https://solc-bin.ethereum.org/bin/soljson-v0.5.1+commit.c8a2cb62.js -O soljson.js", + "lint": "standard | notify-error", + "make-mock-compiler": "node ci/makeMockCompiler.js", + "minify": "uglifyjs --in-source-map inline --source-map-inline -c warnings=false", + "nightwatch_local": "nightwatch --config nightwatch.js --env local", + "nightwatch_local_debugger": "nightwatch --config nightwatch_debugger.js --env local", + "nightwatch_remote_chrome": "nightwatch --config nightwatch.js --env chrome", + "nightwatch_remote_firefox": "nightwatch --config nightwatch.js --env default", + "nightwatch_remote_ie": "nightwatch --config nightwatch.js --env ie", + "nightwatch_remote_parallel": "nightwatch --config nightwatch.js --env safari,chrome,default", + "nightwatch_remote_safari": "nightwatch --config nightwatch.js --env safari", + "nightwatch_remote_debugger_parallel": "nightwatch --config nightwatch_debugger.js --env safari,chrome,default", + "onchange": "onchange build/app.js -- npm-run-all lint", + "prepublish": "mkdirp build; npm-run-all -ls downloadsolc_root build", + "remixd": "./node_modules/remixd/bin/remixd -s ./contracts --remix-ide http://127.0.0.1:8080", + "selenium": "execr --silent selenium-standalone start", + "selenium-install": "selenium-standalone install", + "serve": " http-server .", + "serve_debugger": "execr --silent http-server src/app/debugger/remix-debugger", + "sourcemap": "exorcist --root ../ build/app.js.map > build/app.js", + "start": "npm-run-all -lpr serve watch onchange remixd", + "test": "npm run csslint; standard && node test/index.js", + "test-browser": "npm-run-all -lpr selenium downloadsolc_root make-mock-compiler serve browsertest", + "watch": "watchify src/index.js -dv -p browserify-reload -o build/app.js --exclude solc" + } +} diff --git a/.history/package_20190318191220.json b/.history/package_20190318191220.json new file mode 100644 index 0000000000..bf6687f2f7 --- /dev/null +++ b/.history/package_20190318191220.json @@ -0,0 +1,184 @@ +{ + "name": "remix-ide", + "version": "v0.7.5", + "description": "Minimalistic browser-based Solidity IDE", + "devDependencies": { + "ace-mode-solidity": "^0.1.0", + "async": "^2.1.2", + "babel-eslint": "^7.1.1", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-yo-yoify": "^0.3.3", + "babel-polyfill": "^6.22.0", + "babel-preset-env": "^1.6.1", + "babel-preset-es2015": "^6.24.0", + "babel-preset-es2017": "^6.24.1", + "babel-preset-stage-0": "^6.24.1", + "babelify": "^7.3.0", + "brace": "^0.8.0", + "browserify-reload": "^1.0.3", + "component-type": "^1.2.1", + "copy-text-to-clipboard": "^1.0.4", + "csjs-inject": "^1.0.1", + "csslint": "^1.0.2", + "deep-equal": "^1.0.1", + "ethereumjs-util": "^5.1.2", + "execr": "^1.0.1", + "exorcist": "^0.4.0", + "fast-async": "6.3.1", + "fast-levenshtein": "^2.0.6", + "gists": "^1.0.1", + "javascript-serialize": "^1.6.1", + "jquery": "^3.3.1", + "js-base64": "^2.1.9", + "js-beautify": "1.6.14", + "minixhr": "^3.2.2", + "mkdirp": "^0.5.1", + "nightwatch": "^0.9.20", + "notify-error": "^1.2.0", + "npm-link-local": "^1.1.0", + "npm-run-all": "^4.0.2", + "onchange": "^3.2.1", + "remix-debug": "0.3.1", + "remix-analyzer": "0.3.1", + "remix-lib": "0.4.1", + "remix-solidity": "0.3.1", + "remix-tests": "0.1.1", + "remixd": "0.1.8-alpha.6", + "request": "^2.83.0", + "rimraf": "^2.6.1", + "selenium-standalone": "^6.0.1", + "solc": "^0.5.0", + "standard": "^8.5.0", + "swarmgw": "^0.3.1", + "tape": "^4.5.1", + "uglify-js": "^2.8.16", + "vm-browserify": "0.0.4", + "watchify": "^3.9.0", + "web3": "1.0.0-beta.27", + "webworkify": "^1.2.1", + "yo-yo": "^1.2.2", + "yo-yoify": "^3.7.3" + }, + "dependencies": { + "http-server": "0.9.0", + "remixd": "0.1.8-alpha.6" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ethereum/remix-ide.git" + }, + "keywords": [ + "ethereum", + "solidity", + "compiler" + ], + "author": "chriseth", + "license": "MIT", + "bugs": { + "url": "https://github.com/ethereum/remix-ide/issues" + }, + "homepage": "https://github.com/ethereum/remix-ide#readme", + "standard": { + "ignore": [ + "build/", + "src/app/editor/mode-solidity.js", + "soljson.js" + ], + "parser": "babel-eslint" + }, + "babel": { + "plugins": [ + "transform-es2015-template-literals", + "transform-es2015-literals", + "transform-es2015-function-name", + "transform-es2015-arrow-functions", + "transform-es2015-block-scoped-functions", + "transform-es2015-classes", + "transform-es2015-object-super", + "transform-es2015-shorthand-properties", + "transform-es2015-duplicate-keys", + "transform-es2015-computed-properties", + "transform-es2015-for-of", + "transform-es2015-sticky-regex", + "transform-es2015-unicode-regex", + "check-es2015-constants", + "transform-es2015-spread", + "transform-es2015-parameters", + "transform-es2015-destructuring", + "transform-es2015-block-scoping" + ] + }, + "browserify": { + "transform": [ + [ + "babelify", + { + "sourceMapsAbsolute": false, + "sourceMaps": true, + "plugins": [ + [ + "fast-async", + { + "runtimePattern": null, + "compiler": { + "es7": true, + "noRuntime": true, + "promises": true, + "wrapAwait": true + } + } + ], + [ + "yo-yoify" + ], + [ + "transform-object-assign" + ] + ], + "presets": [ + "es2015" + ] + } + ] + ] + }, + "bin": { + "remix-ide": "./bin/remix-ide" + }, + "scripts": { + "setupremix": "npm run linkremixlib && npm run linkremixsolidity && npm run linkremixsimulator && npm run linkremixtests", + "pullremix": "git clone https://github.com/ethereum/remix", + "linkremixlib": "cd node_modules && rm -rf remix-lib && ln -s ../../remix/remix-lib remix-lib && cd ..", + "linkremixsolidity": "cd node_modules && rm -rf remix-solidity && ln -s ../../remix/remix-solidity remix-solidity && cd ..", + "linkremixsimulator": "cd node_modules && rm -rf remix-simulator && ln -s ../../remix/remix-simulator remix-simulator && cd ..", + "linkremixtests": "cd node_modules && rm -rf remix-tests && ln -s ../../remix/remix-tests remix-tests && cd ..", + "build": "browserify src/index.js -o build/app.js --exclude solc", + "build_debugger": "browserify src/app/debugger/remix-debugger/index.js -o src/app/debugger/remix-debugger/build/app.js", + "browsertest": "sleep 5 && npm run nightwatch_local", + "csslint": "csslint --ignore=order-alphabetical --errors='errors,duplicate-properties,empty-rules' --exclude-list='assets/css/font-awesome.min.css' assets/css/", + "downloadsolc_root": "wget --no-check-certificate https://solc-bin.ethereum.org/bin/soljson-v0.5.1+commit.c8a2cb62.js -O soljson.js", + "lint": "standard | notify-error", + "make-mock-compiler": "node ci/makeMockCompiler.js", + "minify": "uglifyjs --in-source-map inline --source-map-inline -c warnings=false", + "nightwatch_local": "nightwatch --config nightwatch.js --env local", + "nightwatch_local_debugger": "nightwatch --config nightwatch_debugger.js --env local", + "nightwatch_remote_chrome": "nightwatch --config nightwatch.js --env chrome", + "nightwatch_remote_firefox": "nightwatch --config nightwatch.js --env default", + "nightwatch_remote_ie": "nightwatch --config nightwatch.js --env ie", + "nightwatch_remote_parallel": "nightwatch --config nightwatch.js --env safari,chrome,default", + "nightwatch_remote_safari": "nightwatch --config nightwatch.js --env safari", + "nightwatch_remote_debugger_parallel": "nightwatch --config nightwatch_debugger.js --env safari,chrome,default", + "onchange": "onchange build/app.js -- npm-run-all lint", + "prepublish": "mkdirp build; npm-run-all -ls downloadsolc_root build", + "remixd": "./node_modules/remixd/bin/remixd -s ./contracts --remix-ide http://127.0.0.1:8080", + "selenium": "execr --silent selenium-standalone start", + "selenium-install": "selenium-standalone install", + "serve": "http-server .", + "serve_debugger": "execr --silent http-server src/app/debugger/remix-debugger", + "sourcemap": "exorcist --root ../ build/app.js.map > build/app.js", + "start": "npm-run-all -lpr serve watch onchange remixd", + "test": "npm run csslint; standard && node test/index.js", + "test-browser": "npm-run-all -lpr selenium downloadsolc_root make-mock-compiler serve browsertest", + "watch": "watchify src/index.js -dv -p browserify-reload -o build/app.js --exclude solc" + } +} diff --git a/.history/src/app/ui/contextMenu_20190318184257.js b/.history/src/app/ui/contextMenu_20190318184257.js new file mode 100644 index 0000000000..613111ac61 --- /dev/null +++ b/.history/src/app/ui/contextMenu_20190318184257.js @@ -0,0 +1,75 @@ +var yo = require('yo-yo') +// -------------- copyToClipboard ---------------------- +var csjs = require('csjs-inject') +var styleGuide = require('./styles-guide/theme-chooser') +var styles = styleGuide.chooser() + +var css = csjs` + .container + { + display: none; + position: fixed; + border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor}; + width:150px; + background: ${styles.appProperties.solidBorderBox_BackgroundColor}; + border-radius: 2px; + z-index: 1000; + background-color: var(--light) + } + + .liitem + { + padding: 3px; + padding-left: 10px; + cursor: pointer; + } + + #menuitems + { + list-style: none; + margin: 0px; + margin-top: 4px; + padding-left: 5px; + padding-right: 5px; + padding-bottom: 3px; + color: ${styles.appProperties.solidBorderBox_TextColor}; + } + + #menuitems :hover + { +<<<<<<< HEAD + background: ${styles.appProperties.highlight_BackgroundColor}; +======= + background-color: var(--secondary); +>>>>>>> 712ea4fa... fixed context menu style + border-radius: 2px; + } +` + +module.exports = (event, items) => { + event.preventDefault() + + function hide (event, force) { + if (container && container.parentElement && (force || (event.target !== container))) { + container.parentElement.removeChild(container) + } + window.removeEventListener('click', hide) + } + + var menu = Object.keys(items).map((item, index) => { + var current = yo`` + current.onclick = () => { hide(null, true); items[item]() } + return current + }) + var container = yo`
` + container.style.left = event.pageX + 'px' + container.style.top = event.pageY + 'px' + container.style.display = 'block' + + document.querySelector('body').appendChild(container) + setTimeout(() => { + window.addEventListener('click', hide) + }, 500) + + return { hide } +} diff --git a/.history/src/app/ui/contextMenu_20190318184607.js b/.history/src/app/ui/contextMenu_20190318184607.js new file mode 100644 index 0000000000..806b65a2a3 --- /dev/null +++ b/.history/src/app/ui/contextMenu_20190318184607.js @@ -0,0 +1,71 @@ +var yo = require('yo-yo') +// -------------- copyToClipboard ---------------------- +var csjs = require('csjs-inject') +var styleGuide = require('./styles-guide/theme-chooser') +var styles = styleGuide.chooser() + +var css = csjs` + .container + { + display: none; + position: fixed; + border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor}; + width:150px; + background: ${styles.appProperties.solidBorderBox_BackgroundColor}; + border-radius: 2px; + z-index: 1000; + background-color: var(--light) + } + + .liitem + { + padding: 3px; + padding-left: 10px; + cursor: pointer; + } + + #menuitems + { + list-style: none; + margin: 0px; + margin-top: 4px; + padding-left: 5px; + padding-right: 5px; + padding-bottom: 3px; + color: ${styles.appProperties.solidBorderBox_TextColor}; + } + + #menuitems :hover + { + background: ${styles.appProperties.highlight_BackgroundColor}; + border-radius: 2px; + } +` + +module.exports = (event, items) => { + event.preventDefault() + + function hide (event, force) { + if (container && container.parentElement && (force || (event.target !== container))) { + container.parentElement.removeChild(container) + } + window.removeEventListener('click', hide) + } + + var menu = Object.keys(items).map((item, index) => { + var current = yo`` + current.onclick = () => { hide(null, true); items[item]() } + return current + }) + var container = yo`
` + container.style.left = event.pageX + 'px' + container.style.top = event.pageY + 'px' + container.style.display = 'block' + + document.querySelector('body').appendChild(container) + setTimeout(() => { + window.addEventListener('click', hide) + }, 500) + + return { hide } +} diff --git a/.history/src/app/ui/landing-page/landing-page_20190318191506.js b/.history/src/app/ui/landing-page/landing-page_20190318191506.js new file mode 100644 index 0000000000..2f976631d4 --- /dev/null +++ b/.history/src/app/ui/landing-page/landing-page_20190318191506.js @@ -0,0 +1,153 @@ +var yo = require('yo-yo') +var csjs = require('csjs-inject') + +var css = csjs` + .container { + position : static; + box-sizing : border-box; + display : flex; + flex-direction : column; + flex-wrap : wrap; + justify-content : unset; + align-items : center; + align-content : space-around; +<<<<<<< HEAD +======= + border : 2px solid black; +>>>>>>> 4191fba9... landing page styleing + width : 400px; + padding : 20px; + background-color: var(--primary); + font-family : "Lucida Console", Monaco, monospace; + font-size : 16px; + } + + .section { + z-index : 10; + } + .span { + font-size : 16px; + cursor : pointer; +<<<<<<< HEAD + color: var(--secondary) +======= +>>>>>>> 4191fba9... landing page styleing + } + .im { + display : inline-block; + max-width : 150px; + max-height : 160px; + width : 100%; + height : 100%; + padding : 20px; + background-color: var(--primary); + } +<<<<<<< HEAD + .im:hover { + } +======= +>>>>>>> 4191fba9... landing page styleing +} +` + +import { defaultWorkspaces } from './workspace' +import { ApiFactory } from 'remix-plugin' +import Section from './section' + +export class LandingPage extends ApiFactory { + + constructor (appManager, appStore) { + super() + this.sections = [] + /* 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) + + this.sections.push(sectionWorkspace) + this.sections.push(sectionLearn) + this.sections.push(sectionPlugins) + this.sections.push(sectionHelp) + } + + get profile () { + return { + displayName: 'home', + name: 'home', + methods: [], + events: [], + description: ' - ', + icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+', + location: 'mainPanel' + } + } + + render () { + let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03MC41ODIsNDI4LjkwNGMwLjgxMSwwLDEuNjIyLDAuMjg1LDIuNDM3LDAuODUzYzAuODExLDAuNTcxLDEuMjE4LDEuMzQsMS4yMTgsMi4zMTQNCgkJYzAsMi4yNzctMS4wNTksMy40OTYtMy4xNjgsMy42NTZjLTUuMDM4LDAuODE0LTkuMzgxLDIuMzU2LTEzLjAzNyw0LjYzYy0zLjY1NSwyLjI3Ni02LjY2Myw1LjExNy05LjAxNiw4LjUyOA0KCQljLTIuMzU3LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM5LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDYsOC44MTQtMS43MDYsMTMuNTI0djMyLjY1M2MwLDIuMjczLTEuMTM5LDMuNDExLTMuNDEyLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIzYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzMsMCwzLjQxMiwxLjEzOCwzLjQxMiwzLjQxMXYxNS4xMDgNCgkJYzEuNDYyLTIuNDM3LDMuMjA2LTQuNzUyLDUuMjM5LTYuOTQ1YzIuMDI5LTIuMTkzLDQuMjY0LTQuMTQzLDYuNzAxLTUuODQ4YzIuNDM3LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM2NC43NzEsNDI5LjQzMyw2Ny42NTgsNDI4LjkwNCw3MC41ODIsNDI4LjkwNHoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMTM3Ljc3Myw0MjcuMTk4YzUuNjg1LDAsMTAuOTY2LDEuMTgxLDE1LjgzOSwzLjUzNGM0Ljg3NCwyLjM1Niw5LjA1NSw1LjQ4MiwxMi41NSw5LjM4MQ0KCQljMy40OTIsMy44OTksNi4yMTQsOC40MDcsOC4xNjQsMTMuNTI0YzEuOTQ5LDUuMTE3LDIuOTI0LDEwLjQ0LDIuOTI0LDE1Ljk2MWMwLDAuOTc2LTAuMzY2LDEuNzktMS4wOTcsMi40MzgNCgkJYy0wLjczMSwwLjY1LTEuNTgzLDAuOTc1LTIuNTU5LDAuOTc1aC02Ny45ODdjMC40ODcsNC4yMjYsMS41ODQsOC4yODUsMy4yOSwxMi4xODRjMS43MDYsMy44OTksMy45MzcsNy4zMTIsNi43MDEsMTAuMjM0DQoJCWMyLjc2MSwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ny0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDEyYzAsMC4xNjMtMC4xNjQsMC43My0wLjQ4NywxLjcwNQ0KCQljLTMuNDEyLDYuMDEzLTguMjA1LDEwLjQ3OS0xNC4zNzcsMTMuNDAyYy02LjE3NiwyLjkyNC0xMi42NzEsNC4zODctMTkuNDk1LDQuMzg3Yy01LjY4OSwwLTEwLjkyOC0xLjE4MS0xNS43MTgtMy41MzMNCgkJYy00Ljc5My0yLjM1NC04LjkzNi01LjQ4My0xMi40MjgtOS4zODJjLTMuNDk1LTMuODk5LTYuMjE0LTguNDA3LTguMTYzLTEzLjUyNGMtMS45NS01LjExOC0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFjMS45NDktNS4xMTcsNC42NjgtOS42MjUsOC4xNjMtMTMuNTI0YzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOC05LjM4MQ0KCQlDMTI2Ljg0Niw0MjguMzc5LDEzMi4wODQsNDI3LjE5OCwxMzcuNzczLDQyNy4xOTh6IE0xNjkuOTQsNDY2LjE4OGMtMC4zMjgtNC4yMjMtMS4zNDEtOC4yODUtMy4wNDYtMTIuMTg0DQoJCWMtMS43MDYtMy44OTktMy45ODItNy4zMTItNi44MjMtMTAuMjM1Yy0yLjg0NC0yLjkyNC02LjE3NS01LjI3Ny05Ljk5MS03LjA2N2MtMy44MTktMS43ODUtNy45Mi0yLjY4LTEyLjMwNi0yLjY4DQoJCWMtNC41NSwwLTguNjkyLDAuODk1LTEyLjQyOCwyLjY4Yy0zLjczOSwxLjc5LTYuOTg3LDQuMTQ0LTkuNzQ4LDcuMDY3Yy0yLjc2NCwyLjkyNC00Ljk5NSw2LjMzNi02LjcwMSwxMC4yMzUNCgkJYy0xLjcwNiwzLjg5OC0yLjgwMiw3Ljk2MS0zLjI5LDEyLjE4NEgxNjkuOTR6Ii8+DQoJPHBhdGggZmlsbD0iIzQxNDA0MiIgZD0iTTMwNC42OSw0MjcuNDQxYzUuMDM0LDAsOS41MDQsMS4wMTgsMTMuNDAyLDMuMDQ3YzMuODk5LDIuMDMzLDcuMTg5LDQuNjcyLDkuODcsNy45Mg0KCQljMi42OCwzLjI1MSw0LjcwOSw3LjA2Niw2LjA5MiwxMS40NTJjMS4zNzksNC4zODcsMi4wNyw4Ljg1NiwyLjA3LDEzLjQwMnY0My42MmMwLDAuOTc1LTAuMzY1LDEuNzg5LTEuMDk3LDIuNDM4DQoJCWMtMC43MywwLjY0Ni0xLjUwMywwLjk3NS0yLjMxMywwLjk3NWMtMi4yNzYsMC0zLjQxMi0xLjE0LTMuNDEyLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTI5LTcuMTA0LTEuNTg0LTEwLjYNCgkJYy0xLjA1OS0zLjQ5MS0yLjYwMi02LjYxOC00LjYzLTkuMzgyYy0yLjAzMy0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4OC0xLjYyMS02LjY2Mi0yLjQzNi0xMC43MjItMi40MzYNCgkJYy01LjIsMC05LjU4NywxLjIxOC0xMy4xNTksMy42NTRjLTMuNTc0LDIuNDM4LTYuNDU3LDUuNTY2LTguNjUsOS4zODJjLTIuMTkzLDMuODE5LTMuODE4LDguMDQyLTQuODc0LDEyLjY3Mg0KCQljLTEuMDU5LDQuNjMtMS41ODQsOS4wNTgtMS41ODQsMTMuMjh2MzMuNjI5YzAsMC45NzUtMC4zNjUsMS43ODktMS4wOTYsMi40MzhjLTAuNzMxLDAuNjQ2LTEuNTA1LDAuOTc1LTIuMzE1LDAuOTc1DQoJCWMtMi4yNzYsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTMtNy4xMDQtMS41ODUtMTAuNmMtMS4wNTgtMy40OTEtMi42MDEtNi42MTgtNC42MjktOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNi0xMC43MjItMi40MzZjLTUuMDM3LDAtOS4zNDQsMC44OTUtMTIuOTE1LDIuNjgNCgkJYy0zLjU3NSwxLjc5LTYuNTQyLDQuMjY2LTguODk1LDcuNDMzYy0yLjM1NywzLjE2Ny00LjA2Myw2Ljk0NC01LjExNywxMS4zMzFjLTEuMDU5LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5N2MwLDIuMjcyLTEuMTM4LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTc0LjU2N2MwLTIuMjczLDEuMTM1LTMuNDExLDMuNDExLTMuNDExDQoJCWMyLjI3MywwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2MS05LjM4MiwxMS44MTktMTIuNTVjNC45NTQtMy4xNjcsMTAuNTE3LTQuNzUyLDE2LjY5Mi00Ljc1Mg0KCQljNi45ODMsMCwxMi45OTUsMS45OTEsMTguMDMyLDUuOTdjNS4wMzMsMy45ODMsOC42ODgsOS4yMjMsMTAuOTY2LDE1LjcxOWMyLjc2LTYuMzM2LDYuNzM5LTExLjUzMywxMS45NC0xNS41OTYNCgkJQzI5MS4xMjUsNDI5LjQ3NSwyOTcuMzgsNDI3LjQ0MSwzMDQuNjksNDI3LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMzc4Ljc1Myw0MjkuMzkyYzAuODExLDAsMS41ODQsMC4zNjUsMi4zMTQsMS4wOTdjMC43MzEsMC43MywxLjA5NywxLjUwNCwxLjA5NywyLjMxNHY3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5NywyLjMxNWMtMC43MywwLjczLTEuNTA0LDEuMDk3LTIuMzE0LDEuMDk3Yy0wLjk3NSwwLTEuNzktMC4zNjYtMi40MzgtMS4wOTcNCgkJYy0wLjY1LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzE0QzM3Ni45NjMsNDI5Ljc1NywzNzcuNzc4LDQyOS4zOTIsMzc4Ljc1Myw0MjkuMzkyeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDczLjM0LDQyOC42NmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDExbC0wLjQ4NywxLjk1bC0yNC4zNjgsMzUuMzM0bDI0LjM2OCwzNS41NzcNCgkJYzAuMzIzLDAuOTc2LDAuNDg3LDEuNjI2LDAuNDg3LDEuOTVjMCwyLjI3Mi0xLjEzOSwzLjQxMi0zLjQxMiwzLjQxMmMtMS4zMDIsMC0yLjE5My0wLjQ4OC0yLjY4LTEuNDYzbC0yMi45MDYtMzMuMzg0DQoJCWwtMjIuNjYzLDMzLjM4NGMtMC44MTQsMC45NzUtMS43OSwxLjQ2My0yLjkyNCwxLjQ2M2MtMi4yNzcsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEyYzAtMC4zMjQsMC4xNTktMC45NzUsMC40ODYtMS45NQ0KCQlsMjQuMzY5LTM1LjU3N2wtMjQuMzY5LTM1LjMzNGwtMC40ODYtMS45NWMwLTIuMjcyLDEuMTM0LTMuNDExLDMuNDExLTMuNDExYzEuMTM0LDAsMi4xMDksMC40ODcsMi45MjQsMS40NjJsMjIuNjYzLDMzLjE0MQ0KCQlsMjIuOTA2LTMzLjE0MUM0NzEuMTQ2LDQyOS4xNDcsNDcyLjAzOCw0MjguNjYsNDczLjM0LDQyOC42NnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMTUwLjczNCwxOTYuMjEyIDI1NS45NjksMzQ0LjUwOCAyNTUuOTY5LDI1OC4zODcgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI1NS45NjksMjU4LjM4NyAyNTUuOTY5LDM0NC41MDggMzYxLjI2NywxOTYuMjEyIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDEyNi43ODEgMTUwLjczMywxNzQuNjExIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIxNTAuNzM0LDE3NC42MTIgMjU1Ljk2OSwyMzYuODE4IDI1NS45NjksMTI2Ljc4MiAyNTUuOTY5LDAuMDAxIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjgiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDAgMjU1Ljk2OSwxMjYuNzgxIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=' + let totalLook = yo` +
+ +
+ ` + for (let i = 0; i < this.sections.length; i++) { + totalLook.appendChild(yo` +
+ ${this.sections[i].render()} +
+ `) + } + return totalLook + } +} diff --git a/.history/src/app/ui/landing-page/landing-page_20190318191554.js b/.history/src/app/ui/landing-page/landing-page_20190318191554.js new file mode 100644 index 0000000000..c2db4c43ad --- /dev/null +++ b/.history/src/app/ui/landing-page/landing-page_20190318191554.js @@ -0,0 +1,143 @@ +var yo = require('yo-yo') +var csjs = require('csjs-inject') + +var css = csjs` + .container { + position : static; + box-sizing : border-box; + display : flex; + flex-direction : column; + flex-wrap : wrap; + justify-content : unset; + align-items : center; + align-content : space-around; + width : 400px; + padding : 20px; + background-color: var(--primary); + font-family : "Lucida Console", Monaco, monospace; + font-size : 16px; + } + + .section { + z-index : 10; + } + .span { + font-size : 16px; + cursor : pointer; + color: var(--secondary) + } + .im { + display : inline-block; + max-width : 150px; + max-height : 160px; + width : 100%; + height : 100%; + padding : 20px; + background-color: var(--primary); + } + .im:hover { + } +} +` + +import { defaultWorkspaces } from './workspace' +import { ApiFactory } from 'remix-plugin' +import Section from './section' + +export class LandingPage extends ApiFactory { + + constructor (appManager, appStore) { + super() + this.sections = [] + /* 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) + + this.sections.push(sectionWorkspace) + this.sections.push(sectionLearn) + this.sections.push(sectionPlugins) + this.sections.push(sectionHelp) + } + + get profile () { + return { + displayName: 'home', + name: 'home', + methods: [], + events: [], + description: ' - ', + icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+', + location: 'mainPanel' + } + } + + render () { + let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03MC41ODIsNDI4LjkwNGMwLjgxMSwwLDEuNjIyLDAuMjg1LDIuNDM3LDAuODUzYzAuODExLDAuNTcxLDEuMjE4LDEuMzQsMS4yMTgsMi4zMTQNCgkJYzAsMi4yNzctMS4wNTksMy40OTYtMy4xNjgsMy42NTZjLTUuMDM4LDAuODE0LTkuMzgxLDIuMzU2LTEzLjAzNyw0LjYzYy0zLjY1NSwyLjI3Ni02LjY2Myw1LjExNy05LjAxNiw4LjUyOA0KCQljLTIuMzU3LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM5LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDYsOC44MTQtMS43MDYsMTMuNTI0djMyLjY1M2MwLDIuMjczLTEuMTM5LDMuNDExLTMuNDEyLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIzYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzMsMCwzLjQxMiwxLjEzOCwzLjQxMiwzLjQxMXYxNS4xMDgNCgkJYzEuNDYyLTIuNDM3LDMuMjA2LTQuNzUyLDUuMjM5LTYuOTQ1YzIuMDI5LTIuMTkzLDQuMjY0LTQuMTQzLDYuNzAxLTUuODQ4YzIuNDM3LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM2NC43NzEsNDI5LjQzMyw2Ny42NTgsNDI4LjkwNCw3MC41ODIsNDI4LjkwNHoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMTM3Ljc3Myw0MjcuMTk4YzUuNjg1LDAsMTAuOTY2LDEuMTgxLDE1LjgzOSwzLjUzNGM0Ljg3NCwyLjM1Niw5LjA1NSw1LjQ4MiwxMi41NSw5LjM4MQ0KCQljMy40OTIsMy44OTksNi4yMTQsOC40MDcsOC4xNjQsMTMuNTI0YzEuOTQ5LDUuMTE3LDIuOTI0LDEwLjQ0LDIuOTI0LDE1Ljk2MWMwLDAuOTc2LTAuMzY2LDEuNzktMS4wOTcsMi40MzgNCgkJYy0wLjczMSwwLjY1LTEuNTgzLDAuOTc1LTIuNTU5LDAuOTc1aC02Ny45ODdjMC40ODcsNC4yMjYsMS41ODQsOC4yODUsMy4yOSwxMi4xODRjMS43MDYsMy44OTksMy45MzcsNy4zMTIsNi43MDEsMTAuMjM0DQoJCWMyLjc2MSwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ny0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDEyYzAsMC4xNjMtMC4xNjQsMC43My0wLjQ4NywxLjcwNQ0KCQljLTMuNDEyLDYuMDEzLTguMjA1LDEwLjQ3OS0xNC4zNzcsMTMuNDAyYy02LjE3NiwyLjkyNC0xMi42NzEsNC4zODctMTkuNDk1LDQuMzg3Yy01LjY4OSwwLTEwLjkyOC0xLjE4MS0xNS43MTgtMy41MzMNCgkJYy00Ljc5My0yLjM1NC04LjkzNi01LjQ4My0xMi40MjgtOS4zODJjLTMuNDk1LTMuODk5LTYuMjE0LTguNDA3LTguMTYzLTEzLjUyNGMtMS45NS01LjExOC0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFjMS45NDktNS4xMTcsNC42NjgtOS42MjUsOC4xNjMtMTMuNTI0YzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOC05LjM4MQ0KCQlDMTI2Ljg0Niw0MjguMzc5LDEzMi4wODQsNDI3LjE5OCwxMzcuNzczLDQyNy4xOTh6IE0xNjkuOTQsNDY2LjE4OGMtMC4zMjgtNC4yMjMtMS4zNDEtOC4yODUtMy4wNDYtMTIuMTg0DQoJCWMtMS43MDYtMy44OTktMy45ODItNy4zMTItNi44MjMtMTAuMjM1Yy0yLjg0NC0yLjkyNC02LjE3NS01LjI3Ny05Ljk5MS03LjA2N2MtMy44MTktMS43ODUtNy45Mi0yLjY4LTEyLjMwNi0yLjY4DQoJCWMtNC41NSwwLTguNjkyLDAuODk1LTEyLjQyOCwyLjY4Yy0zLjczOSwxLjc5LTYuOTg3LDQuMTQ0LTkuNzQ4LDcuMDY3Yy0yLjc2NCwyLjkyNC00Ljk5NSw2LjMzNi02LjcwMSwxMC4yMzUNCgkJYy0xLjcwNiwzLjg5OC0yLjgwMiw3Ljk2MS0zLjI5LDEyLjE4NEgxNjkuOTR6Ii8+DQoJPHBhdGggZmlsbD0iIzQxNDA0MiIgZD0iTTMwNC42OSw0MjcuNDQxYzUuMDM0LDAsOS41MDQsMS4wMTgsMTMuNDAyLDMuMDQ3YzMuODk5LDIuMDMzLDcuMTg5LDQuNjcyLDkuODcsNy45Mg0KCQljMi42OCwzLjI1MSw0LjcwOSw3LjA2Niw2LjA5MiwxMS40NTJjMS4zNzksNC4zODcsMi4wNyw4Ljg1NiwyLjA3LDEzLjQwMnY0My42MmMwLDAuOTc1LTAuMzY1LDEuNzg5LTEuMDk3LDIuNDM4DQoJCWMtMC43MywwLjY0Ni0xLjUwMywwLjk3NS0yLjMxMywwLjk3NWMtMi4yNzYsMC0zLjQxMi0xLjE0LTMuNDEyLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTI5LTcuMTA0LTEuNTg0LTEwLjYNCgkJYy0xLjA1OS0zLjQ5MS0yLjYwMi02LjYxOC00LjYzLTkuMzgyYy0yLjAzMy0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4OC0xLjYyMS02LjY2Mi0yLjQzNi0xMC43MjItMi40MzYNCgkJYy01LjIsMC05LjU4NywxLjIxOC0xMy4xNTksMy42NTRjLTMuNTc0LDIuNDM4LTYuNDU3LDUuNTY2LTguNjUsOS4zODJjLTIuMTkzLDMuODE5LTMuODE4LDguMDQyLTQuODc0LDEyLjY3Mg0KCQljLTEuMDU5LDQuNjMtMS41ODQsOS4wNTgtMS41ODQsMTMuMjh2MzMuNjI5YzAsMC45NzUtMC4zNjUsMS43ODktMS4wOTYsMi40MzhjLTAuNzMxLDAuNjQ2LTEuNTA1LDAuOTc1LTIuMzE1LDAuOTc1DQoJCWMtMi4yNzYsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTMtNy4xMDQtMS41ODUtMTAuNmMtMS4wNTgtMy40OTEtMi42MDEtNi42MTgtNC42MjktOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNi0xMC43MjItMi40MzZjLTUuMDM3LDAtOS4zNDQsMC44OTUtMTIuOTE1LDIuNjgNCgkJYy0zLjU3NSwxLjc5LTYuNTQyLDQuMjY2LTguODk1LDcuNDMzYy0yLjM1NywzLjE2Ny00LjA2Myw2Ljk0NC01LjExNywxMS4zMzFjLTEuMDU5LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5N2MwLDIuMjcyLTEuMTM4LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTc0LjU2N2MwLTIuMjczLDEuMTM1LTMuNDExLDMuNDExLTMuNDExDQoJCWMyLjI3MywwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2MS05LjM4MiwxMS44MTktMTIuNTVjNC45NTQtMy4xNjcsMTAuNTE3LTQuNzUyLDE2LjY5Mi00Ljc1Mg0KCQljNi45ODMsMCwxMi45OTUsMS45OTEsMTguMDMyLDUuOTdjNS4wMzMsMy45ODMsOC42ODgsOS4yMjMsMTAuOTY2LDE1LjcxOWMyLjc2LTYuMzM2LDYuNzM5LTExLjUzMywxMS45NC0xNS41OTYNCgkJQzI5MS4xMjUsNDI5LjQ3NSwyOTcuMzgsNDI3LjQ0MSwzMDQuNjksNDI3LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMzc4Ljc1Myw0MjkuMzkyYzAuODExLDAsMS41ODQsMC4zNjUsMi4zMTQsMS4wOTdjMC43MzEsMC43MywxLjA5NywxLjUwNCwxLjA5NywyLjMxNHY3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5NywyLjMxNWMtMC43MywwLjczLTEuNTA0LDEuMDk3LTIuMzE0LDEuMDk3Yy0wLjk3NSwwLTEuNzktMC4zNjYtMi40MzgtMS4wOTcNCgkJYy0wLjY1LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzE0QzM3Ni45NjMsNDI5Ljc1NywzNzcuNzc4LDQyOS4zOTIsMzc4Ljc1Myw0MjkuMzkyeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDczLjM0LDQyOC42NmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDExbC0wLjQ4NywxLjk1bC0yNC4zNjgsMzUuMzM0bDI0LjM2OCwzNS41NzcNCgkJYzAuMzIzLDAuOTc2LDAuNDg3LDEuNjI2LDAuNDg3LDEuOTVjMCwyLjI3Mi0xLjEzOSwzLjQxMi0zLjQxMiwzLjQxMmMtMS4zMDIsMC0yLjE5My0wLjQ4OC0yLjY4LTEuNDYzbC0yMi45MDYtMzMuMzg0DQoJCWwtMjIuNjYzLDMzLjM4NGMtMC44MTQsMC45NzUtMS43OSwxLjQ2My0yLjkyNCwxLjQ2M2MtMi4yNzcsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEyYzAtMC4zMjQsMC4xNTktMC45NzUsMC40ODYtMS45NQ0KCQlsMjQuMzY5LTM1LjU3N2wtMjQuMzY5LTM1LjMzNGwtMC40ODYtMS45NWMwLTIuMjcyLDEuMTM0LTMuNDExLDMuNDExLTMuNDExYzEuMTM0LDAsMi4xMDksMC40ODcsMi45MjQsMS40NjJsMjIuNjYzLDMzLjE0MQ0KCQlsMjIuOTA2LTMzLjE0MUM0NzEuMTQ2LDQyOS4xNDcsNDcyLjAzOCw0MjguNjYsNDczLjM0LDQyOC42NnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMTUwLjczNCwxOTYuMjEyIDI1NS45NjksMzQ0LjUwOCAyNTUuOTY5LDI1OC4zODcgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI1NS45NjksMjU4LjM4NyAyNTUuOTY5LDM0NC41MDggMzYxLjI2NywxOTYuMjEyIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDEyNi43ODEgMTUwLjczMywxNzQuNjExIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIxNTAuNzM0LDE3NC42MTIgMjU1Ljk2OSwyMzYuODE4IDI1NS45NjksMTI2Ljc4MiAyNTUuOTY5LDAuMDAxIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjgiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDAgMjU1Ljk2OSwxMjYuNzgxIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=' + let totalLook = yo` +
+ +
+ ` + for (let i = 0; i < this.sections.length; i++) { + totalLook.appendChild(yo` +
+ ${this.sections[i].render()} +
+ `) + } + return totalLook + } +} diff --git a/.history/src/app/ui/landing-page/landing-page_20190319085038.js b/.history/src/app/ui/landing-page/landing-page_20190319085038.js new file mode 100644 index 0000000000..c2db4c43ad --- /dev/null +++ b/.history/src/app/ui/landing-page/landing-page_20190319085038.js @@ -0,0 +1,143 @@ +var yo = require('yo-yo') +var csjs = require('csjs-inject') + +var css = csjs` + .container { + position : static; + box-sizing : border-box; + display : flex; + flex-direction : column; + flex-wrap : wrap; + justify-content : unset; + align-items : center; + align-content : space-around; + width : 400px; + padding : 20px; + background-color: var(--primary); + font-family : "Lucida Console", Monaco, monospace; + font-size : 16px; + } + + .section { + z-index : 10; + } + .span { + font-size : 16px; + cursor : pointer; + color: var(--secondary) + } + .im { + display : inline-block; + max-width : 150px; + max-height : 160px; + width : 100%; + height : 100%; + padding : 20px; + background-color: var(--primary); + } + .im:hover { + } +} +` + +import { defaultWorkspaces } from './workspace' +import { ApiFactory } from 'remix-plugin' +import Section from './section' + +export class LandingPage extends ApiFactory { + + constructor (appManager, appStore) { + super() + this.sections = [] + /* 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) + + this.sections.push(sectionWorkspace) + this.sections.push(sectionLearn) + this.sections.push(sectionPlugins) + this.sections.push(sectionHelp) + } + + get profile () { + return { + displayName: 'home', + name: 'home', + methods: [], + events: [], + description: ' - ', + icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+', + location: 'mainPanel' + } + } + + render () { + let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03MC41ODIsNDI4LjkwNGMwLjgxMSwwLDEuNjIyLDAuMjg1LDIuNDM3LDAuODUzYzAuODExLDAuNTcxLDEuMjE4LDEuMzQsMS4yMTgsMi4zMTQNCgkJYzAsMi4yNzctMS4wNTksMy40OTYtMy4xNjgsMy42NTZjLTUuMDM4LDAuODE0LTkuMzgxLDIuMzU2LTEzLjAzNyw0LjYzYy0zLjY1NSwyLjI3Ni02LjY2Myw1LjExNy05LjAxNiw4LjUyOA0KCQljLTIuMzU3LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM5LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDYsOC44MTQtMS43MDYsMTMuNTI0djMyLjY1M2MwLDIuMjczLTEuMTM5LDMuNDExLTMuNDEyLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIzYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzMsMCwzLjQxMiwxLjEzOCwzLjQxMiwzLjQxMXYxNS4xMDgNCgkJYzEuNDYyLTIuNDM3LDMuMjA2LTQuNzUyLDUuMjM5LTYuOTQ1YzIuMDI5LTIuMTkzLDQuMjY0LTQuMTQzLDYuNzAxLTUuODQ4YzIuNDM3LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM2NC43NzEsNDI5LjQzMyw2Ny42NTgsNDI4LjkwNCw3MC41ODIsNDI4LjkwNHoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMTM3Ljc3Myw0MjcuMTk4YzUuNjg1LDAsMTAuOTY2LDEuMTgxLDE1LjgzOSwzLjUzNGM0Ljg3NCwyLjM1Niw5LjA1NSw1LjQ4MiwxMi41NSw5LjM4MQ0KCQljMy40OTIsMy44OTksNi4yMTQsOC40MDcsOC4xNjQsMTMuNTI0YzEuOTQ5LDUuMTE3LDIuOTI0LDEwLjQ0LDIuOTI0LDE1Ljk2MWMwLDAuOTc2LTAuMzY2LDEuNzktMS4wOTcsMi40MzgNCgkJYy0wLjczMSwwLjY1LTEuNTgzLDAuOTc1LTIuNTU5LDAuOTc1aC02Ny45ODdjMC40ODcsNC4yMjYsMS41ODQsOC4yODUsMy4yOSwxMi4xODRjMS43MDYsMy44OTksMy45MzcsNy4zMTIsNi43MDEsMTAuMjM0DQoJCWMyLjc2MSwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ny0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDEyYzAsMC4xNjMtMC4xNjQsMC43My0wLjQ4NywxLjcwNQ0KCQljLTMuNDEyLDYuMDEzLTguMjA1LDEwLjQ3OS0xNC4zNzcsMTMuNDAyYy02LjE3NiwyLjkyNC0xMi42NzEsNC4zODctMTkuNDk1LDQuMzg3Yy01LjY4OSwwLTEwLjkyOC0xLjE4MS0xNS43MTgtMy41MzMNCgkJYy00Ljc5My0yLjM1NC04LjkzNi01LjQ4My0xMi40MjgtOS4zODJjLTMuNDk1LTMuODk5LTYuMjE0LTguNDA3LTguMTYzLTEzLjUyNGMtMS45NS01LjExOC0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFjMS45NDktNS4xMTcsNC42NjgtOS42MjUsOC4xNjMtMTMuNTI0YzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOC05LjM4MQ0KCQlDMTI2Ljg0Niw0MjguMzc5LDEzMi4wODQsNDI3LjE5OCwxMzcuNzczLDQyNy4xOTh6IE0xNjkuOTQsNDY2LjE4OGMtMC4zMjgtNC4yMjMtMS4zNDEtOC4yODUtMy4wNDYtMTIuMTg0DQoJCWMtMS43MDYtMy44OTktMy45ODItNy4zMTItNi44MjMtMTAuMjM1Yy0yLjg0NC0yLjkyNC02LjE3NS01LjI3Ny05Ljk5MS03LjA2N2MtMy44MTktMS43ODUtNy45Mi0yLjY4LTEyLjMwNi0yLjY4DQoJCWMtNC41NSwwLTguNjkyLDAuODk1LTEyLjQyOCwyLjY4Yy0zLjczOSwxLjc5LTYuOTg3LDQuMTQ0LTkuNzQ4LDcuMDY3Yy0yLjc2NCwyLjkyNC00Ljk5NSw2LjMzNi02LjcwMSwxMC4yMzUNCgkJYy0xLjcwNiwzLjg5OC0yLjgwMiw3Ljk2MS0zLjI5LDEyLjE4NEgxNjkuOTR6Ii8+DQoJPHBhdGggZmlsbD0iIzQxNDA0MiIgZD0iTTMwNC42OSw0MjcuNDQxYzUuMDM0LDAsOS41MDQsMS4wMTgsMTMuNDAyLDMuMDQ3YzMuODk5LDIuMDMzLDcuMTg5LDQuNjcyLDkuODcsNy45Mg0KCQljMi42OCwzLjI1MSw0LjcwOSw3LjA2Niw2LjA5MiwxMS40NTJjMS4zNzksNC4zODcsMi4wNyw4Ljg1NiwyLjA3LDEzLjQwMnY0My42MmMwLDAuOTc1LTAuMzY1LDEuNzg5LTEuMDk3LDIuNDM4DQoJCWMtMC43MywwLjY0Ni0xLjUwMywwLjk3NS0yLjMxMywwLjk3NWMtMi4yNzYsMC0zLjQxMi0xLjE0LTMuNDEyLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTI5LTcuMTA0LTEuNTg0LTEwLjYNCgkJYy0xLjA1OS0zLjQ5MS0yLjYwMi02LjYxOC00LjYzLTkuMzgyYy0yLjAzMy0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4OC0xLjYyMS02LjY2Mi0yLjQzNi0xMC43MjItMi40MzYNCgkJYy01LjIsMC05LjU4NywxLjIxOC0xMy4xNTksMy42NTRjLTMuNTc0LDIuNDM4LTYuNDU3LDUuNTY2LTguNjUsOS4zODJjLTIuMTkzLDMuODE5LTMuODE4LDguMDQyLTQuODc0LDEyLjY3Mg0KCQljLTEuMDU5LDQuNjMtMS41ODQsOS4wNTgtMS41ODQsMTMuMjh2MzMuNjI5YzAsMC45NzUtMC4zNjUsMS43ODktMS4wOTYsMi40MzhjLTAuNzMxLDAuNjQ2LTEuNTA1LDAuOTc1LTIuMzE1LDAuOTc1DQoJCWMtMi4yNzYsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTMtNy4xMDQtMS41ODUtMTAuNmMtMS4wNTgtMy40OTEtMi42MDEtNi42MTgtNC42MjktOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNi0xMC43MjItMi40MzZjLTUuMDM3LDAtOS4zNDQsMC44OTUtMTIuOTE1LDIuNjgNCgkJYy0zLjU3NSwxLjc5LTYuNTQyLDQuMjY2LTguODk1LDcuNDMzYy0yLjM1NywzLjE2Ny00LjA2Myw2Ljk0NC01LjExNywxMS4zMzFjLTEuMDU5LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5N2MwLDIuMjcyLTEuMTM4LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTc0LjU2N2MwLTIuMjczLDEuMTM1LTMuNDExLDMuNDExLTMuNDExDQoJCWMyLjI3MywwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2MS05LjM4MiwxMS44MTktMTIuNTVjNC45NTQtMy4xNjcsMTAuNTE3LTQuNzUyLDE2LjY5Mi00Ljc1Mg0KCQljNi45ODMsMCwxMi45OTUsMS45OTEsMTguMDMyLDUuOTdjNS4wMzMsMy45ODMsOC42ODgsOS4yMjMsMTAuOTY2LDE1LjcxOWMyLjc2LTYuMzM2LDYuNzM5LTExLjUzMywxMS45NC0xNS41OTYNCgkJQzI5MS4xMjUsNDI5LjQ3NSwyOTcuMzgsNDI3LjQ0MSwzMDQuNjksNDI3LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMzc4Ljc1Myw0MjkuMzkyYzAuODExLDAsMS41ODQsMC4zNjUsMi4zMTQsMS4wOTdjMC43MzEsMC43MywxLjA5NywxLjUwNCwxLjA5NywyLjMxNHY3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5NywyLjMxNWMtMC43MywwLjczLTEuNTA0LDEuMDk3LTIuMzE0LDEuMDk3Yy0wLjk3NSwwLTEuNzktMC4zNjYtMi40MzgtMS4wOTcNCgkJYy0wLjY1LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzE0QzM3Ni45NjMsNDI5Ljc1NywzNzcuNzc4LDQyOS4zOTIsMzc4Ljc1Myw0MjkuMzkyeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDczLjM0LDQyOC42NmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDExbC0wLjQ4NywxLjk1bC0yNC4zNjgsMzUuMzM0bDI0LjM2OCwzNS41NzcNCgkJYzAuMzIzLDAuOTc2LDAuNDg3LDEuNjI2LDAuNDg3LDEuOTVjMCwyLjI3Mi0xLjEzOSwzLjQxMi0zLjQxMiwzLjQxMmMtMS4zMDIsMC0yLjE5My0wLjQ4OC0yLjY4LTEuNDYzbC0yMi45MDYtMzMuMzg0DQoJCWwtMjIuNjYzLDMzLjM4NGMtMC44MTQsMC45NzUtMS43OSwxLjQ2My0yLjkyNCwxLjQ2M2MtMi4yNzcsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEyYzAtMC4zMjQsMC4xNTktMC45NzUsMC40ODYtMS45NQ0KCQlsMjQuMzY5LTM1LjU3N2wtMjQuMzY5LTM1LjMzNGwtMC40ODYtMS45NWMwLTIuMjcyLDEuMTM0LTMuNDExLDMuNDExLTMuNDExYzEuMTM0LDAsMi4xMDksMC40ODcsMi45MjQsMS40NjJsMjIuNjYzLDMzLjE0MQ0KCQlsMjIuOTA2LTMzLjE0MUM0NzEuMTQ2LDQyOS4xNDcsNDcyLjAzOCw0MjguNjYsNDczLjM0LDQyOC42NnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMTUwLjczNCwxOTYuMjEyIDI1NS45NjksMzQ0LjUwOCAyNTUuOTY5LDI1OC4zODcgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI1NS45NjksMjU4LjM4NyAyNTUuOTY5LDM0NC41MDggMzYxLjI2NywxOTYuMjEyIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDEyNi43ODEgMTUwLjczMywxNzQuNjExIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIxNTAuNzM0LDE3NC42MTIgMjU1Ljk2OSwyMzYuODE4IDI1NS45NjksMTI2Ljc4MiAyNTUuOTY5LDAuMDAxIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjgiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDAgMjU1Ljk2OSwxMjYuNzgxIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=' + let totalLook = yo` +
+ +
+ ` + for (let i = 0; i < this.sections.length; i++) { + totalLook.appendChild(yo` +
+ ${this.sections[i].render()} +
+ `) + } + return totalLook + } +} diff --git a/.history/src/app/ui/modaldialog_20190318184820.js b/.history/src/app/ui/modaldialog_20190318184820.js new file mode 100644 index 0000000000..3518c05dc3 --- /dev/null +++ b/.history/src/app/ui/modaldialog_20190318184820.js @@ -0,0 +1,142 @@ +var yo = require('yo-yo') +var css = require('./styles/modaldialog-styles') + +<<<<<<< HEAD +module.exports = (title, content, ok, cancel, focusSelector) => { +======= +module.exports = (title, content, ok, cancel, focusSelector, opts) => { + let agreed = true + opts = opts || {} +>>>>>>> 863b9543... added key-navigation to modaldialog + var container = document.querySelector(`.${css.modal}`) + if (!container) { + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + + var closeDiv = document.getElementById('modal-close') + + var okDiv = document.getElementById('modal-footer-ok') + okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' + + var cancelDiv = document.getElementById('modal-footer-cancel') + cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' + + var modal = document.querySelector(`.${css.modalBody}`) + var modalTitle = document.querySelector(`.${css.modalHeader} h2`) + + modalTitle.innerHTML = '' + if (title) modalTitle.innerHTML = title + + modal.innerHTML = '' + if (content) modal.appendChild(content) + + show() + + function setFocusOn (btn) { + var okDiv = document.getElementById('modal-footer-ok') + var cancelDiv = document.getElementById('modal-footer-cancel') + if (btn === 'ok') { + agreed = true + okDiv.style.backgroundColor = 'var(--dark)' + okDiv.style.color = 'var(--light)' + cancelDiv.style.backgroundColor = 'var(--light)' + cancelDiv.style.color = 'var(--dark)' + } else { + agreed = false + okDiv.style.backgroundColor = 'var(--light)' + okDiv.style.color = 'var(--dark)' + cancelDiv.style.backgroundColor = 'var(--dark)' + cancelDiv.style.color = 'var(--light)' + } + } + + function okListener () { + removeEventListener() + hide() + if (ok && ok.fn && agreed) ok.fn() + } + + function cancelListener () { + removeEventListener() + hide() + if (cancel && cancel.fn) cancel.fn() + } + + function modalKeyEvent (e) { + if (e.keyCode === 27) { + cancelListener() + } else if (e.keyCode === 13) { + e.preventDefault() + okListener() + } else if (e.keyCode === 37) { + e.preventDefault() + setFocusOn('ok') + } else if (e.keyCode === 39) { + e.preventDefault() + setFocusOn('cancel') + } + } + + function hide () { + container.style.display = 'none' + } + + function show () { + container.style.display = 'block' + if (focusSelector) { + const focusTarget = document.querySelector(`.${css.modal} ${focusSelector}`) + if (focusTarget) { + focusTarget.focus() + if (typeof focusTarget.setSelectionRange === 'function') { + focusTarget.setSelectionRange(0, focusTarget.value.length) + } + } + } + } + + function removeEventListener () { + okDiv.removeEventListener('click', okListener) + cancelDiv.removeEventListener('click', cancelListener) + closeDiv.removeEventListener('click', cancelListener) + document.removeEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').removeEventListener('click', cancelListener) + } + okDiv.addEventListener('click', okListener) + cancelDiv.addEventListener('click', cancelListener) + closeDiv.addEventListener('click', cancelListener) + document.addEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').addEventListener('click', cancelListener) +} + +function html () { + return yo`` +} diff --git a/.history/src/app/ui/modaldialog_20190318184943.js b/.history/src/app/ui/modaldialog_20190318184943.js new file mode 100644 index 0000000000..28ce419e18 --- /dev/null +++ b/.history/src/app/ui/modaldialog_20190318184943.js @@ -0,0 +1,128 @@ +var yo = require('yo-yo') +var css = require('./styles/modaldialog-styles') + +<<<<<<< HEAD +module.exports = (title, content, ok, cancel, focusSelector) => { +======= +module.exports = (title, content, ok, cancel, focusSelector, opts) => { + let agreed = true + opts = opts || {} +>>>>>>> 863b9543... added key-navigation to modaldialog + var container = document.querySelector(`.${css.modal}`) + if (!container) { + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + + var closeDiv = document.getElementById('modal-close') + + var okDiv = document.getElementById('modal-footer-ok') + okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' + + var cancelDiv = document.getElementById('modal-footer-cancel') + cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' + + var modal = document.querySelector(`.${css.modalBody}`) + var modalTitle = document.querySelector(`.${css.modalHeader} h2`) + + modalTitle.innerHTML = '' + if (title) modalTitle.innerHTML = title + + modal.innerHTML = '' + if (content) modal.appendChild(content) + + show() + + function setFocusOn (btn) { + var okDiv = document.getElementById('modal-footer-ok') + var cancelDiv = document.getElementById('modal-footer-cancel') + if (btn === 'ok') { + agreed = true + okDiv.style.backgroundColor = 'var(--dark)' + okDiv.style.color = 'var(--light)' + cancelDiv.style.backgroundColor = 'var(--light)' + cancelDiv.style.color = 'var(--dark)' + } else { + agreed = false + okDiv.style.backgroundColor = 'var(--light)' + okDiv.style.color = 'var(--dark)' + cancelDiv.style.backgroundColor = 'var(--dark)' + cancelDiv.style.color = 'var(--light)' + } + } + + function okListener () { + removeEventListener() + hide() + if (ok && ok.fn && agreed) ok.fn() + } + + function cancelListener () { + removeEventListener() + hide() + if (cancel && cancel.fn) cancel.fn() + } + + function modalKeyEvent (e) { + if (e.keyCode === 27) { + cancelListener() + } else if (e.keyCode === 13) { + e.preventDefault() + okListener() + } else if (e.keyCode === 37) { + e.preventDefault() + setFocusOn('ok') + } else if (e.keyCode === 39) { + e.preventDefault() + setFocusOn('cancel') + } + } + + function hide () { + container.style.display = 'none' + } + + function show () { + container.style.display = 'block' + if (focusSelector) { + const focusTarget = document.querySelector(`.${css.modal} ${focusSelector}`) + if (focusTarget) { + focusTarget.focus() + if (typeof focusTarget.setSelectionRange === 'function') { + focusTarget.setSelectionRange(0, focusTarget.value.length) + } + } + } + } + + function removeEventListener () { + okDiv.removeEventListener('click', okListener) + cancelDiv.removeEventListener('click', cancelListener) + closeDiv.removeEventListener('click', cancelListener) + document.removeEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').removeEventListener('click', cancelListener) + } + okDiv.addEventListener('click', okListener) + cancelDiv.addEventListener('click', cancelListener) + closeDiv.addEventListener('click', cancelListener) + document.addEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').addEventListener('click', cancelListener) +} + +function html () { + return yo`` +} diff --git a/.history/src/app/ui/modaldialog_20190318185131.js b/.history/src/app/ui/modaldialog_20190318185131.js new file mode 100644 index 0000000000..168a36e33e --- /dev/null +++ b/.history/src/app/ui/modaldialog_20190318185131.js @@ -0,0 +1,123 @@ +var yo = require('yo-yo') +var css = require('./styles/modaldialog-styles') + +module.exports = (title, content, ok, cancel, focusSelector, opts) => { + let agreed = true + opts = opts || {} + var container = document.querySelector(`.${css.modal}`) + if (!container) { + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + + var closeDiv = document.getElementById('modal-close') + + var okDiv = document.getElementById('modal-footer-ok') + okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' + + var cancelDiv = document.getElementById('modal-footer-cancel') + cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' + + var modal = document.querySelector(`.${css.modalBody}`) + var modalTitle = document.querySelector(`.${css.modalHeader} h2`) + + modalTitle.innerHTML = '' + if (title) modalTitle.innerHTML = title + + modal.innerHTML = '' + if (content) modal.appendChild(content) + + setFocusOn('ok') + + show() + + function setFocusOn (btn) { + var okDiv = document.getElementById('modal-footer-ok') + var cancelDiv = document.getElementById('modal-footer-cancel') + if (btn === 'ok') { + okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') + } else { + cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') + } + } + + function okListener () { + removeEventListener() + hide() + if (ok && ok.fn && agreed) ok.fn() + } + + function cancelListener () { + removeEventListener() + hide() + if (cancel && cancel.fn) cancel.fn() + } + + function modalKeyEvent (e) { + if (e.keyCode === 27) { + cancelListener() + } else if (e.keyCode === 13) { + e.preventDefault() + okListener() + } else if (e.keyCode === 37) { + e.preventDefault() + agreed = true + setFocusOn('ok') + } else if (e.keyCode === 39) { + e.preventDefault() + agreed = false + setFocusOn('cancel') + } + } + + function hide () { + container.style.display = 'none' + } + + function show () { + container.style.display = 'block' + if (focusSelector) { + const focusTarget = document.querySelector(`.${css.modal} ${focusSelector}`) + if (focusTarget) { + focusTarget.focus() + if (typeof focusTarget.setSelectionRange === 'function') { + focusTarget.setSelectionRange(0, focusTarget.value.length) + } + } + } + } + + function removeEventListener () { + okDiv.removeEventListener('click', okListener) + cancelDiv.removeEventListener('click', cancelListener) + closeDiv.removeEventListener('click', cancelListener) + document.removeEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').removeEventListener('click', cancelListener) + } + okDiv.addEventListener('click', okListener) + cancelDiv.addEventListener('click', cancelListener) + closeDiv.addEventListener('click', cancelListener) + document.addEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').addEventListener('click', cancelListener) +} + +function html () { + return yo`` +} + diff --git a/.history/src/app/ui/modaldialog_20190318190546.js b/.history/src/app/ui/modaldialog_20190318190546.js new file mode 100644 index 0000000000..e9816b9cfb --- /dev/null +++ b/.history/src/app/ui/modaldialog_20190318190546.js @@ -0,0 +1,122 @@ +var yo = require('yo-yo') +var css = require('./styles/modaldialog-styles') + +module.exports = (title, content, ok, cancel, focusSelector) => { + let agreed = true + var container = document.querySelector(`.${css.modal}`) + if (!container) { + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + + var closeDiv = document.getElementById('modal-close') + + var okDiv = document.getElementById('modal-footer-ok') + okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' + + var cancelDiv = document.getElementById('modal-footer-cancel') + cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' + + var modal = document.querySelector(`.${css.modalBody}`) + var modalTitle = document.querySelector(`.${css.modalHeader} h2`) + + modalTitle.innerHTML = '' + if (title) modalTitle.innerHTML = title + + modal.innerHTML = '' + if (content) modal.appendChild(content) + + setFocusOn('ok') + + show() + + function setFocusOn (btn) { + var okDiv = document.getElementById('modal-footer-ok') + var cancelDiv = document.getElementById('modal-footer-cancel') + if (btn === 'ok') { + okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') + } else { + cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') + } + } + + function okListener () { + removeEventListener() + hide() + if (ok && ok.fn && agreed) ok.fn() + } + + function cancelListener () { + removeEventListener() + hide() + if (cancel && cancel.fn) cancel.fn() + } + + function modalKeyEvent (e) { + if (e.keyCode === 27) { + cancelListener() + } else if (e.keyCode === 13) { + e.preventDefault() + okListener() + } else if (e.keyCode === 37) { + e.preventDefault() + agreed = true + setFocusOn('ok') + } else if (e.keyCode === 39) { + e.preventDefault() + agreed = false + setFocusOn('cancel') + } + } + + function hide () { + container.style.display = 'none' + } + + function show () { + container.style.display = 'block' + if (focusSelector) { + const focusTarget = document.querySelector(`.${css.modal} ${focusSelector}`) + if (focusTarget) { + focusTarget.focus() + if (typeof focusTarget.setSelectionRange === 'function') { + focusTarget.setSelectionRange(0, focusTarget.value.length) + } + } + } + } + + function removeEventListener () { + okDiv.removeEventListener('click', okListener) + cancelDiv.removeEventListener('click', cancelListener) + closeDiv.removeEventListener('click', cancelListener) + document.removeEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').removeEventListener('click', cancelListener) + } + okDiv.addEventListener('click', okListener) + cancelDiv.addEventListener('click', cancelListener) + closeDiv.addEventListener('click', cancelListener) + document.addEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').addEventListener('click', cancelListener) +} + +function html () { + return yo`` +} + diff --git a/.history/src/app/ui/modaldialog_20190318190640.js b/.history/src/app/ui/modaldialog_20190318190640.js new file mode 100644 index 0000000000..44ba50d8dc --- /dev/null +++ b/.history/src/app/ui/modaldialog_20190318190640.js @@ -0,0 +1,122 @@ +var yo = require('yo-yo') +var css = require('./styles/modaldialog-styles') + +module.exports = (title, content, ok, cancel, focusSelector) => { + let agreed = true + var container = document.querySelector(`.${css.modal}`) + if (!container) { + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + + var closeDiv = document.getElementById('modal-close') + + var okDiv = document.getElementById('modal-footer-ok') + okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' + + var cancelDiv = document.getElementById('modal-footer-cancel') + cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' + + var modal = document.querySelector(`.${css.modalBody}`) + var modalTitle = document.querySelector(`.${css.modalHeader} h2`) + + modalTitle.innerHTML = '' + if (title) modalTitle.innerHTML = title + + modal.innerHTML = '' + if (content) modal.appendChild(content) + + setFocusOn('ok') + + show() + + function setFocusOn (btn) { + var okDiv = document.getElementById('modal-footer-ok') + var cancelDiv = document.getElementById('modal-footer-cancel') + if (btn === 'ok') { + okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') + } else { + cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') + } + } + + function okListener () { + removeEventListener() + hide() + if (ok && ok.fn && agreed) ok.fn() + } + + function cancelListener () { + removeEventListener() + hide() + if (cancel && cancel.fn) cancel.fn() + } + + function modalKeyEvent (e) { + if (e.keyCode === 27) { + cancelListener() + } else if (e.keyCode === 13) { + e.preventDefault() + okListener() + } else if (e.keyCode === 37) { + e.preventDefault() + agreed = true + setFocusOn('ok') + } else if (e.keyCode === 39) { + e.preventDefault() + agreed = false + setFocusOn('cancel') + } + } + + function hide () { + container.style.display = 'none' + } + + function show () { + container.style.display = 'block' + if (focusSelector) { + const focusTarget = document.querySelector(`.${css.modal} ${focusSelector}`) + if (focusTarget) { + focusTarget.focus() + if (typeof focusTarget.setSelectionRange === 'function') { + focusTarget.setSelectionRange(0, focusTarget.value.length) + } + } + } + } + + function removeEventListener () { + okDiv.removeEventListener('click', okListener) + cancelDiv.removeEventListener('click', cancelListener) + closeDiv.removeEventListener('click', cancelListener) + document.removeEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').removeEventListener('click', cancelListener) + } + okDiv.addEventListener('click', okListener) + cancelDiv.addEventListener('click', cancelListener) + closeDiv.addEventListener('click', cancelListener) + document.addEventListener('keydown', modalKeyEvent) + document.getElementById('modal-background').addEventListener('click', cancelListener) +} + +function html () { + return yo`` +} + diff --git a/ii b/ii new file mode 100644 index 0000000000..9c1ea7796c --- /dev/null +++ b/ii @@ -0,0 +1,137 @@ +var yo = require('yo-yo') +var css = require('./styles/modaldialog-styles') + +module.exports = (title, content, ok, cancel, focusSelector, opts) => { + let agreed = true + opts = opts || {} + var container = document.querySelector(`.${css.modal}`) + if (!container) { + document.querySelector('body').appendChild(html(opts)) + container = document.querySelector(`.${css.modal}`) + } + + var closeDiv = document.getElementById('modal-close') + if (opts.hideClose) closeDiv.style.display = 'none' + + var okDiv = document.getElementById('modal-footer-ok') + okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' + okDiv.style.display = okDiv.innerHTML === '' ? 'none' : 'inline-block' + + var cancelDiv = document.getElementById('modal-footer-cancel') + cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' + cancelDiv.style.display = cancelDiv.innerHTML === '' ? 'none' : 'inline-block' + + var modal = document.querySelector(`.${css.modalBody}`) + var modalTitle = document.querySelector(`.${css.modalHeader} h3`) + + modalTitle.innerHTML = '' + if (title) modalTitle.innerHTML = title + + modal.innerHTML = '' + if (content) modal.appendChild(content) + + setFocusOn('ok') + + show() + + function setFocusOn (btn) { + var okDiv = document.getElementById('modal-footer-ok') + var cancelDiv = document.getElementById('modal-footer-cancel') + if (btn === 'ok') { + okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') + } else { + cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') + okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') + } + } + + function okListener () { + removeEventListener() + hide() + if (ok && ok.fn && agreed) ok.fn() + } + + function cancelListener () { + removeEventListener() + hide() + if (cancel && cancel.fn) cancel.fn() + if (container) { + container.class = css.modal + container = null + } + } + + function modalKeyEvent (e) { + if (e.keyCode === 27) { + cancelListener() + } else if (e.keyCode === 13) { + e.preventDefault() + okListener() + } else if (e.keyCode === 37) { + e.preventDefault() + agreed = true + setFocusOn('ok') + } else if (e.keyCode === 39) { + e.preventDefault() + agreed = false + setFocusOn('cancel') + } + } + + function hide () { + if (container) container.style.display = 'none' + } + + function show () { + if (!container) return + container.style.display = 'block' + if (focusSelector) { + const focusTarget = document.querySelector(`.${css.modal} ${focusSelector}`) + if (focusTarget) { + focusTarget.focus() + if (typeof focusTarget.setSelectionRange === 'function') { + focusTarget.setSelectionRange(0, focusTarget.value.length) + } + } + } + } + + function removeEventListener () { + okDiv.removeEventListener('click', okListener) + cancelDiv.removeEventListener('click', cancelListener) + closeDiv.removeEventListener('click', cancelListener) + document.removeEventListener('keydown', modalKeyEvent) + if (document.getElementById('modal-background')) { + document.getElementById('modal-background').removeEventListener('click', cancelListener) + } + } + okDiv.addEventListener('click', okListener) + cancelDiv.addEventListener('click', cancelListener) + closeDiv.addEventListener('click', cancelListener) + document.addEventListener('keydown', modalKeyEvent) + if (document.getElementById('modal-background')) { + document.getElementById('modal-background').addEventListener('click', cancelListener) + } + return { container, okListener, cancelListener } +} + +function html (opts) { + return yo`` +} + + diff --git a/src/app/ui/landing-page/generate.js b/src/app/ui/landing-page/generate.js index 98b3d6767a..bb85e4f8a5 100644 --- a/src/app/ui/landing-page/generate.js +++ b/src/app/ui/landing-page/generate.js @@ -16,7 +16,6 @@ export function homepageProfile () { } } -export function generateHomePage (appManager, appStore) { /* var actions1 = [ { label: 'New file', type: 'callback', @@ -76,3 +75,4 @@ export function generateHomePage (appManager, appStore) { return new LandingPage([sectionWorkspace, /* sectionStart, */sectionLearn, sectionPlugins, sectionHelp]) } + diff --git a/src/app/ui/landing-page/section.js b/src/app/ui/landing-page/section.js index cb95b99b49..5cd119ae40 100644 --- a/src/app/ui/landing-page/section.js +++ b/src/app/ui/landing-page/section.js @@ -1,18 +1,31 @@ -var yo = require('yo-yo') -var csjs = require('csjs-inject') +let yo = require('yo-yo') +let csjs = require('csjs-inject') var css = csjs` - .item { + .item { display : flex; flex-direction : column; align-items : center; width : 400px; - padding : 50px; - font-family : "Lucida Console", Monaco, monospace - } - a:link { - color : black; + height : 160px; + padding : 20px; + background-color: var(--primary); + font-family : "Lucida Console", Monaco, monospace; + font-size : 12px; + } + span { + cursor: pointer; + font-size: 12px; + } + span:hover { + font-size: 14px; + } + a:link { text-decoration : none; + font-size: 12px; + } + a:hover { + font-size: 14px; } ` @@ -24,7 +37,7 @@ class Section { } render () { - var sectionLook = yo` + let sectionLook = yo`

${this.title}

@@ -32,16 +45,20 @@ class Section { for (var i = 0; i < this.actions.length; i++) { if (this.actions[i].type === `callback`) { sectionLook.appendChild(yo` -
- ${this.actions[i].label} -
- `) +
+ + ${this.actions[i].label} + +
+ `) } else if (this.actions[i].type === `link`) { sectionLook.appendChild(yo` -
- ${this.actions[i].label} -
- `) +
+ + ${this.actions[i].label} + +
+ `) } }