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

Merge pull request #884 from ethereum/metropolis_theme

Browse Source 
Metropolis v0.1
pull/1/head
yann300 7 years ago committed by GitHub
parent c6c1b343fd 927fe32f07
commit 803b6fe140
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 114 additions and 125 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 77
      assets/img/remix_logo_512x512.svg
  2. 15
      src/app/editor/editor.js
  3. 11
      src/app/execution/txLogger.js
  4. 3
      src/app/files/file-explorer.js
  5. 3
      src/app/panels/editor-panel.js
  6. 10
      src/app/panels/righthand-panel.js
  7. 36
      src/app/panels/terminal.js
  8. 2
      src/app/tabs/run-tab.js
  9. 3
      src/app/tabs/tabbed-menu.js
  10. 7
      src/app/ui/modaldialog.js
  11. 1
      src/app/ui/renderer.js
  12. 67
      src/universal-dapp.js

77
assets/img/remix_logo_512x512.svg
Unescape View File

@ -1,77 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<path fill="#414042" d="M70.582,428.904c0.811,0,1.622,0.285,2.437,0.853c0.811,0.571,1.218,1.34,1.218,2.314
c0,2.277-1.059,3.496-3.168,3.656c-5.038,0.814-9.381,2.356-13.037,4.63c-3.655,2.276-6.663,5.117-9.016,8.528
c-2.357,3.411-4.104,7.272-5.239,11.575c-1.139,4.307-1.706,8.814-1.706,13.524v32.653c0,2.273-1.139,3.411-3.412,3.411
c-2.277,0-3.412-1.138-3.412-3.411v-74.323c0-2.273,1.135-3.411,3.412-3.411c2.273,0,3.412,1.138,3.412,3.411v15.108
c1.462-2.437,3.206-4.752,5.239-6.945c2.029-2.193,4.264-4.143,6.701-5.848c2.437-1.706,5.076-3.085,7.919-4.143
C64.771,429.433,67.658,428.904,70.582,428.904z"/>
<path fill="#414042" d="M137.773,427.198c5.685,0,10.966,1.181,15.839,3.534c4.874,2.356,9.055,5.482,12.55,9.381
c3.492,3.899,6.214,8.407,8.164,13.524c1.949,5.117,2.924,10.44,2.924,15.961c0,0.976-0.366,1.79-1.097,2.438
c-0.731,0.65-1.583,0.975-2.559,0.975h-67.987c0.487,4.226,1.584,8.285,3.29,12.184c1.706,3.899,3.937,7.312,6.701,10.234
c2.761,2.925,6.008,5.281,9.748,7.067c3.735,1.789,7.877,2.681,12.428,2.681c12.021,0,21.36-4.79,28.023-14.377
c0.647-1.136,1.622-1.706,2.924-1.706c2.273,0,3.412,1.139,3.412,3.412c0,0.163-0.164,0.73-0.487,1.705
c-3.412,6.013-8.205,10.479-14.377,13.402c-6.176,2.924-12.671,4.387-19.495,4.387c-5.689,0-10.928-1.181-15.718-3.533
c-4.793-2.354-8.936-5.483-12.428-9.382c-3.495-3.899-6.214-8.407-8.163-13.524c-1.95-5.118-2.924-10.437-2.924-15.962
c0-5.521,0.975-10.844,2.924-15.961c1.949-5.117,4.668-9.625,8.163-13.524c3.492-3.898,7.634-7.024,12.428-9.381
C126.846,428.379,132.084,427.198,137.773,427.198z M169.94,466.188c-0.328-4.223-1.341-8.285-3.046-12.184
c-1.706-3.899-3.982-7.312-6.823-10.235c-2.844-2.924-6.175-5.277-9.991-7.067c-3.819-1.785-7.92-2.68-12.306-2.68
c-4.55,0-8.692,0.895-12.428,2.68c-3.739,1.79-6.987,4.144-9.748,7.067c-2.764,2.924-4.995,6.336-6.701,10.235
c-1.706,3.898-2.802,7.961-3.29,12.184H169.94z"/>
<path fill="#414042" d="M304.69,427.441c5.034,0,9.504,1.018,13.402,3.047c3.899,2.033,7.189,4.672,9.87,7.92
c2.68,3.251,4.709,7.066,6.092,11.452c1.379,4.387,2.07,8.856,2.07,13.402v43.62c0,0.975-0.365,1.789-1.097,2.438
c-0.73,0.646-1.503,0.975-2.313,0.975c-2.276,0-3.412-1.14-3.412-3.412v-43.62c0-3.571-0.529-7.104-1.584-10.6
c-1.059-3.491-2.602-6.618-4.63-9.382c-2.033-2.761-4.592-4.953-7.677-6.58c-3.088-1.621-6.662-2.436-10.722-2.436
c-5.2,0-9.587,1.218-13.159,3.654c-3.574,2.438-6.457,5.566-8.65,9.382c-2.193,3.819-3.818,8.042-4.874,12.672
c-1.059,4.63-1.584,9.058-1.584,13.28v33.629c0,0.975-0.365,1.789-1.096,2.438c-0.731,0.646-1.505,0.975-2.315,0.975
c-2.276,0-3.411-1.14-3.411-3.412v-43.62c0-3.571-0.53-7.104-1.585-10.6c-1.058-3.491-2.601-6.618-4.629-9.382
c-2.034-2.761-4.592-4.953-7.677-6.58c-3.087-1.621-6.663-2.436-10.722-2.436c-5.037,0-9.344,0.895-12.915,2.68
c-3.575,1.79-6.542,4.266-8.895,7.433c-2.357,3.167-4.063,6.944-5.117,11.331c-1.059,4.386-1.584,9.1-1.584,14.134v3.899v0.243
v32.897c0,2.272-1.138,3.412-3.412,3.412c-2.276,0-3.411-1.14-3.411-3.412v-74.567c0-2.273,1.135-3.411,3.411-3.411
c2.273,0,3.412,1.138,3.412,3.411v12.428c2.924-5.197,6.861-9.382,11.819-12.55c4.954-3.167,10.517-4.752,16.692-4.752
c6.983,0,12.995,1.991,18.032,5.97c5.033,3.983,8.688,9.223,10.966,15.719c2.76-6.336,6.739-11.533,11.94-15.596
C291.125,429.475,297.38,427.441,304.69,427.441z"/>
<path fill="#414042" d="M378.753,429.392c0.811,0,1.584,0.365,2.314,1.097c0.731,0.73,1.097,1.504,1.097,2.314v74.08
c0,0.814-0.365,1.584-1.097,2.315c-0.73,0.73-1.504,1.097-2.314,1.097c-0.975,0-1.79-0.366-2.438-1.097
c-0.65-0.731-0.975-1.501-0.975-2.315v-74.08c0-0.811,0.324-1.584,0.975-2.314C376.963,429.757,377.778,429.392,378.753,429.392z"
/>
<path fill="#414042" d="M473.34,428.66c2.273,0,3.412,1.139,3.412,3.411l-0.487,1.95l-24.368,35.334l24.368,35.577
c0.323,0.976,0.487,1.626,0.487,1.95c0,2.272-1.139,3.412-3.412,3.412c-1.302,0-2.193-0.488-2.68-1.463l-22.906-33.384
l-22.663,33.384c-0.814,0.975-1.79,1.463-2.924,1.463c-2.277,0-3.411-1.14-3.411-3.412c0-0.324,0.159-0.975,0.486-1.95
l24.369-35.577l-24.369-35.334l-0.486-1.95c0-2.272,1.134-3.411,3.411-3.411c1.134,0,2.109,0.487,2.924,1.462l22.663,33.141
l22.906-33.141C471.146,429.147,472.038,428.66,473.34,428.66z"/>
</g>
<g>
<g>
<g opacity="0.45">
<g>
<polygon fill="#010101" points="150.734,196.212 255.969,344.508 255.969,258.387 "/>
</g>
</g>
<g opacity="0.8">
<g>
<polygon fill="#010101" points="255.969,258.387 255.969,344.508 361.267,196.212 "/>
</g>
</g>
<g opacity="0.6">
<g>
<polygon fill="#010101" points="255.969,126.781 150.733,174.611 255.969,236.818 361.204,174.611 "/>
</g>
</g>
<g opacity="0.45">
<g>
<polygon fill="#010101" points="150.734,174.612 255.969,236.818 255.969,126.782 255.969,0.001 "/>
</g>
</g>
<g opacity="0.8">
<g>
<polygon fill="#010101" points="255.969,0 255.969,126.781 255.969,236.818 361.204,174.611 "/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.3 KiB

15
src/app/editor/editor.js
Unescape View File

@ -4,6 +4,7 @@ var EventManager = remixLib.EventManager
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var ace = require('brace') var ace = require('brace')
var Range = ace.acequire('ace/range').Range var Range = ace.acequire('ace/range').Range
require('brace/ext/language_tools') require('brace/ext/language_tools')
require('brace/ext/searchbox') require('brace/ext/searchbox')
@ -12,6 +13,16 @@ require('./mode-solidity.js')
var styleGuide = remixLib.ui.styleGuide var styleGuide = remixLib.ui.styleGuide
var styles = styleGuide() var styles = styleGuide()
function setTheme (cb) {
if (styles.appProperties.aceTheme) {
cb('brace/theme/', styles.appProperties.aceTheme)
}
}
setTheme((path, theme) => {
require('brace/theme/tomorrow_night_blue')
})
var css = csjs` var css = csjs`
.ace-editor { .ace-editor {
background-color : ${styles.editor.backgroundColor_Editor}; background-color : ${styles.editor.backgroundColor_Editor};
@ -54,6 +65,10 @@ function Editor (opts = {}) {
var self = this var self = this
var el = yo`<div id="input"></div>` var el = yo`<div id="input"></div>`
var editor = ace.edit(el) var editor = ace.edit(el)
if (styles.appProperties.aceTheme) {
editor.setTheme('ace/theme/' + styles.appProperties.aceTheme)
}
ace.acequire('ace/ext/language_tools') ace.acequire('ace/ext/language_tools')
editor.setOptions({ editor.setOptions({
enableBasicAutocompletion: true, enableBasicAutocompletion: true,

11
src/app/execution/txLogger.js
Unescape View File

@ -31,7 +31,7 @@ var css = csjs`
.txTable, .tr, .td { .txTable, .tr, .td {
border-collapse: collapse; border-collapse: collapse;
font-size: 10px; font-size: 10px;
color: ${styles.terminal.text_Secondary}; color: ${styles.terminal.text_Primary};
border: 1px solid ${styles.terminal.text_Secondary}; border: 1px solid ${styles.terminal.text_Secondary};
} }
#txTable { #txTable {
@ -50,10 +50,13 @@ var css = csjs`
display: flex; display: flex;
} }
.debug, .details { .debug, .details {
color: ${styles.terminal.link_Debug}; ${styles.terminal.button_Log_Debug}
min-width: 55px;
margin-left: 5px; margin-left: 5px;
cursor: pointer; width: 55px;
min-width: 55px;
min-height: 20px;
max-height: 20px;
font-size: 11px;
} }
` `
/** /**

3
src/app/files/file-explorer.js
Unescape View File

@ -24,6 +24,9 @@ var css = csjs`
font-size : 14px; font-size : 14px;
cursor : pointer; cursor : pointer;
} }
.file {
color : ${styles.leftPanel.text_Teriary};
}
.hasFocus { .hasFocus {
background-color : ${styles.leftPanel.backgroundColor_FileExplorer}; background-color : ${styles.leftPanel.backgroundColor_FileExplorer};
} }

3
src/app/panels/editor-panel.js
Unescape View File

@ -20,7 +20,7 @@ var cssTabs = yo`
display: table-cell; display: table-cell;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
color: ${styles.editor.text_Secondary}; color: ${styles.editor.text_Teriary};
} }
#files .file.active { #files .file.active {
color: ${styles.editor.text_Primary}; color: ${styles.editor.text_Primary};
@ -46,6 +46,7 @@ var cssTabs = yo`
} }
#files .file.active .remove { #files .file.active .remove {
display: inline-block; display: inline-block;
color: ${styles.editor.text_Primary};
} }
</style> </style>
` `

10
src/app/panels/righthand-panel.js
Unescape View File

@ -42,8 +42,12 @@ var css = csjs`
#optionViews .hide { #optionViews .hide {
display: none; display: none;
} }
a {
color: ${styles.rightPanel.text_link};
}
.menu { .menu {
display: flex; display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
} }
.options { .options {
float: left; float: left;
@ -63,10 +67,13 @@ var css = csjs`
.opts_li { .opts_li {
display: block; display: block;
font-weight: bold; font-weight: bold;
color: ${styles.rightPanel.text_Teriary};
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary}; color: ${styles.rightPanel.text_Primary};
} }
.opts_li:hover { .opts_li:hover {
color: ${styles.rightPanel.text_Secondary}; color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
} }
.dragbar { .dragbar {
position : absolute; position : absolute;
@ -131,7 +138,6 @@ function RighthandPanel (appAPI, events, opts) {
${self._view.dragbar} ${self._view.dragbar}
<div id="header" class=${css.header}> <div id="header" class=${css.header}>
<div class=${css.menu}> <div class=${css.menu}>
<img class=${css.solIcon} title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
${options} ${options}
</div> </div>
${optionViews} ${optionViews}

36
src/app/panels/terminal.js
Unescape View File

@ -27,7 +27,6 @@ var css = csjs`
min-height : 1.7em; min-height : 1.7em;
overflow : hidden; overflow : hidden;
} }
.bar { .bar {
display : flex; display : flex;
min-height : 3em; min-height : 3em;
@ -63,7 +62,7 @@ var css = csjs`
.toggleTerminal:hover { .toggleTerminal:hover {
color : ${styles.terminal.icon_HoverColor_TogglePanel}; color : ${styles.terminal.icon_HoverColor_TogglePanel};
} }
.terminal { .terminal_container {
background-color : ${styles.terminal.backgroundColor_Terminal}; background-color : ${styles.terminal.backgroundColor_Terminal};
display : flex; display : flex;
flex-direction : column; flex-direction : column;
@ -74,19 +73,32 @@ var css = csjs`
overflow-y : auto; overflow-y : auto;
font-family : monospace; font-family : monospace;
} }
.terminal::after { .terminal_bg {
content : ""; display : flex;
background-image : url(assets/img/remix_logo_512x512.svg); flex-direction : column;
height : 100%;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 3px;
overflow-y : auto;
font-family : monospace;
background-image : ${styles.terminal.backgroundImage_Terminal};
opacity : 0.1; opacity : 0.1;
top : 15%; top : 15%;
left : 33%; left : 33%;
bottom : 0; bottom : 0;
right : 0; right : 0;
position : absolute; position : absolute;
z-index : -1;
background-repeat : no-repeat; background-repeat : no-repeat;
background-size : 45%; background-size : 45%;
} }
.terminal {
position: relative;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.journal { .journal {
margin-top : auto; margin-top : auto;
font-family : monospace; font-family : monospace;
@ -101,13 +113,17 @@ var css = csjs`
.cli { .cli {
line-height : 1.7em; line-height : 1.7em;
font-family : monospace; font-family : monospace;
background-color : ${styles.terminal.backgroundColor_TerminalCLI};
padding : .4em;
color : ${styles.appProperties.mainText_Color};
border-top : solid 2px ${styles.terminal.bar_Ghost};
} }
.prompt { .prompt {
margin-right : 0.5em; margin-right : 0.5em;
font-family : monospace; font-family : monospace;
font-weight : bold; font-weight : bold;
font-size : large; font-size : large;
color : ${styles.colors.black}; color : ${styles.appProperties.supportText_OppositeColor};
} }
.input { .input {
word-break : break-all; word-break : break-all;
@ -273,10 +289,14 @@ class Terminal {
} }
self._view.term = yo` self._view.term = yo`
<div class=${css.terminal} onscroll=${throttle(reattach, 10)} onclick=${focusinput}> <div class=${css.terminal_container} onscroll=${throttle(reattach, 10)} onclick=${focusinput}>
<div class=${css.terminal_bg}>
</div>
<div class=${css.terminal}>
${self._view.journal} ${self._view.journal}
${self._view.cli} ${self._view.cli}
</div> </div>
</div>
` `
self._view.el = yo` self._view.el = yo`
<div class=${css.panel}> <div class=${css.panel}>

2
src/app/tabs/run-tab.js
Unescape View File

@ -114,7 +114,7 @@ var css = csjs`
font-style: italic; font-style: italic;
} }
.pendingTxsText { .pendingTxsText {
${styles.rightPanel.runTab.box_Instance} ${styles.rightPanel.runTab.borderBox_Instance}
font-style: italic; font-style: italic;
} }
.item { .item {

3
src/app/tabs/tabbed-menu.js
Unescape View File

@ -9,8 +9,9 @@ var styles = styleGuide()
module.exports = tabbedMenu module.exports = tabbedMenu
var css = csjs` var css = csjs`
.active { li.active {
background-color: ${styles.rightPanel.backgroundColor_Tab}; background-color: ${styles.rightPanel.backgroundColor_Tab};
color: ${styles.appProperties.mainText_Color};
} }
` `

7
src/app/ui/modaldialog.js
Unescape View File

@ -26,9 +26,16 @@ var css = csjs`
} }
.modalBody { .modalBody {
background-color: ${styles.remix.modalDialog_BackgroundColor_Primary}; background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
color: ${styles.remix.modalDialog_text_Primary};
padding: 1.5em; padding: 1.5em;
line-height: 1.5em; line-height: 1.5em;
} }
.modalBody em{
color: ${styles.remix.modalDialog_text_Em};
}
.modalBody a{
color: ${styles.remix.modalDialog_text_Link};
}
.modalFooter { .modalFooter {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

1
src/app/ui/renderer.js
Unescape View File

@ -53,7 +53,6 @@ var css = yo`<style>
.sol.warning { .sol.warning {
background-color: ${styles.rightPanel.message_Warning_BackgroundColor}; background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
border: .2em dotted ${styles.rightPanel.message_Warning_BorderColor};
color: ${styles.rightPanel.message_Warning_Color}; color: ${styles.rightPanel.message_Warning_Color};
} }

67
src/universal-dapp.js
Unescape View File

@ -28,14 +28,13 @@ var css = csjs`
align-items: center; align-items: center;
} }
.title { .title {
${styles.rightPanel.runTab.dropdown_RunTab} ${styles.rightPanel.runTab.titlebox_RunTab}
margin-top: 5px;
display: flex; display: flex;
justify-content: end; justify-content: end;
align-items: center; align-items: center;
font-size: 11px; font-size: 11px;
height: 30px; height: 30px;
min-width: 100%; width: 97%;
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
line-height: initial; line-height: initial;
@ -50,10 +49,14 @@ var css = csjs`
word-break: break-word; word-break: break-word;
min-width: 230px; min-width: 230px;
} }
.title .copy {
color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
}
.instance { .instance {
${styles.rightPanel.runTab.box_Instance} ${styles.rightPanel.runTab.box_Instance};
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px 15px 6px 15px; padding: 10px 15px 15px 15px;
} }
.instance .title:before { .instance .title:before {
content: "\\25BE"; content: "\\25BE";
@ -97,36 +100,44 @@ var css = csjs`
width: 75%; width: 75%;
padding: .36em; padding: .36em;
} }
// .call {
// background-color: ${styles.colors.lightRed};
// border-color: ${styles.colors.lightRed};
// }
// .constant .call {
// background-color: ${styles.colors.lightBlue};
// border-color: ${styles.colors.lightBlue};
// width: 25%;
// outline: none;
// }
// .payable .call {
// background-color: ${styles.colors.red};
// border-color: ${styles.colors.red};
// width: 25%;
// }
.contractProperty button { .contractProperty button {
border-radius : 3px; ${styles.rightPanel.runTab.button_Create}
border : .3px solid #dddddd; min-width: 100px;
cursor : pointer; width: 100px;
min-height : 25px; font-size: 10px;
max-height : 25px; margin:0;
padding : 3px; word-break: inherit;
min-width : 100px;
width : 25%;
font-size : 10px;
} }
.contractProperty button:disabled { .contractProperty button:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: white; background-color: white;
border-color: lightgray; border-color: lightgray;
} }
.call { .contractProperty.constant button {
background-color: ${styles.colors.lightRed}; ${styles.rightPanel.runTab.button_Constant}
border-color: ${styles.colors.lightRed}; min-width: 100px;
} width: 100px;
.constant .call { font-size: 10px;
background-color: ${styles.colors.lightBlue}; margin:0;
border-color: ${styles.colors.lightBlue}; word-break: inherit;
width: 25%;
outline: none; outline: none;
} width: inherit;
.payable .call {
background-color: ${styles.colors.red};
border-color: ${styles.colors.red};
width: 25%;
} }
.contractProperty input { .contractProperty input {
display: none; display: none;
@ -135,7 +146,7 @@ var css = csjs`
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
align-self: center; align-self: center;
color: ${styles.colors.grey}; color: ${styles.colors.white};
} }
.hasArgs input { .hasArgs input {
display: block; display: block;

Write Preview
Loading…
Cancel
Save