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

Cleanup browser-solidity.css, minor things left

Browse Source
pull/1/head
ninabreznik 7 years ago committed by yann300
parent 3934ee7e20
commit 5f2b4a481f
10 changed files with 150 additions and 251 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. 231
      assets/css/browser-solidity.css
  2. 15
      src/app.js
  3. 3
      src/app/files/file-explorer.js
  4. 41
      src/app/panels/editor-panel.js
  5. 88
      src/app/panels/righthand-panel.js
  6. 3
      src/app/tabs/analysis-tab.js
  7. 4
      src/app/tabs/compile-tab.js
  8. 2
      src/app/tabs/run-tab.js
  9. 8
      src/app/tabs/settings-tab.js
  10. 6
      src/universal-dapp.js

231
assets/css/browser-solidity.css
Unescape View File

@ -1,223 +1,33 @@
#files .file { #optionViews.settingsView #settingsView {
padding: 0 0.6em;
box-sizing: border-box;
background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
cursor: pointer;
border-right: 0.5em solid white;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
}
#files .file.active {
color: black;
font-weight: bold;
border-bottom: 0 none;
padding-right: 2em;
}
#files .file .remove {
position: absolute;
right: 0;
top: 0;
height: 1.25em;
width: 1.25em;
line-height: 1em;
color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
display: none;
margin: 0.4em;
text-align: center;
}
#files .file input {
background-color: transparent;
border: 0 none;
border-bottom: 1px dotted black;
line-height: 1em;
margin: 0.5em 0;
}
#files .file.active .remove {
display: inline-block;
}
#righthand-panel {
top: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
overflow: hidden;
}
#righthand-panel {
display: flex;
flex-direction: column;
}
#righthand-panel #solIcon {
float: right;
height: 90%;
background-color: white;
padding-right: 5%;
padding-left: 5%;
}
#righthand-panel #menu {
border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/
height: 2em;
font-size: 1em;
margin-top: 0.5em;
box-sizing: content-box;
display: flex;
}
#righthand-panel #options {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
#righthand-panel #options li.active {
background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
}
#righthand-panel #options li a {
color: inherit;
}
#righthand-panel #optionViews {
background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
overflow: scroll;
height: 100%;
}
#righthand-panel #optionViews > div {
display: none;
}
#righthand-panel #optionViews.txView #txView {
display: block; display: block;
} }
#righthand-panel #optionViews.settingsView #settingsView { #optionViews.compileView #compileTabView {
display: block; display: block;
} }
#righthand-panel #optionViews.publishView #publishView { #optionViews.runView #runTabView {
display: block; display: block;
} }
#righthand-panel #optionViews.compileView #compileTabView { #optionViews.debugView #debugView {
display: block; display: block;
} }
#righthand-panel #optionViews.runView #runTabView {
display: block;
}
#righthand-panel #optionViews.debugView #debugView {
display: block;
}
#righthand-panel #optionViews.verificationView #verificationView {
display: block;
}
#righthand-panel #optionViews.staticanalysisView #staticanalysisView { #optionViews.staticanalysisView #staticanalysisView {
display: block; display: block;
} }
#header #optionViews.supportView #supportView { #optionViews.supportView #supportView {
display: block; display: block;
} }
#header #optionViews.txView input,
#header #optionViews.txView select {
max-width: 13em;
padding: 0.3em;
box-sizing: border-box;
border: 1px solid hsl(0, 0%, 0%); /* black in style-guide.js */
border-radius: 3px;
}
#righthand-panel #optionViews .pre {
word-wrap: break-word;
background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
}
#righthand-panel #optionViews .hide {
display: none;
}
#righthand-panel .info {
min-height: 6em;
padding: 0.25em 0;
padding-left: 6em;
}
#settingsView button {
background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
font-size: 12px;
padding: 0.25em;
margin: 3em 1em .5em 0;
color: black;
border:0 none;
border-radius: 3px;
width: 8em;
cursor: pointer;
}
#header .origin {
display: block;
word-wrap: break-word;
padding: 1.5em;
font-weight: bold;
}
#output .udapp {
border: 0 none;
box-shadow: none;
border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
}
.crow {
overflow: auto;
display: block;
clear: both;
margin: .5em .5em 0 .5em;
padding: .5em;
font-weight: bold;
}
.crow #txorigin {
margin-left: 0.5em;
text-decoration: none;
background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
cursor: pointer;
font-size: 12px;
color: black;
border-radius: 3px;
border: 0 none;
}
.contractDetails button {
background-color: transparent;
border: 0 none;
padding: 0;
display: inline-block;
text-decoration: underline;
color: blue;
cursor: pointer;
width: auto;
min-width: 4em;
margin-bottom: 1em;
}
.sol.success, .sol.success,
.sol.error, .sol.error,
@ -268,28 +78,6 @@
border: .2em dotted hsla(141, 40%, 48%, 1); border: .2em dotted hsla(141, 40%, 48%, 1);
} }
#ghostbar {
width: 1px;
background-color: hsla(0, 82%, 82%, 1); /* orange in style-guide.js */
opacity: 0.5;
position: absolute;
cursor: col-resize;
z-index: 9999;
top: 0;
bottom: 0;
}
input[readonly] {
display: block;
width: 100%;
height: 7px;
padding: .8em;
}
input[type="file"] {
display: none;
}
.highlightreference { .highlightreference {
position:absolute; position:absolute;
z-index:20; z-index:20;
@ -310,13 +98,6 @@ input[type="file"] {
background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */ background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
} }
.highlightcode_fullLine {
position:absolute;
z-index:20;
background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
opacity: 0.5;
}
.ace_gutter-cell.ace_breakpoint{ .ace_gutter-cell.ace_breakpoint{
background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */ background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
} }

15
src/app.js
Unescape View File

@ -82,6 +82,17 @@ var css = csjs`
bottom : 0; bottom : 0;
overflow : hidden; overflow : hidden;
} }
.highlightcode {
position:absolute;
z-index:20;
background-color: ${styles.colors.lightOrange};
}
.highlightcode_fullLine {
position:absolute;
z-index:20;
background-color: ${styles.colors.lightOrange};
opacity: 0.5;
}
` `
class App { class App {
@ -576,7 +587,7 @@ function run () {
if (config.get('currentFile') !== this.source) { if (config.get('currentFile') !== this.source) {
fileManager.switchFile(this.source) fileManager.switchFile(this.source)
} }
this.statementMarker = editor.addMarker(lineColumnPos, this.source, 'highlightcode') this.statementMarker = editor.addMarker(lineColumnPos, this.source, css.highlightcode)
editor.scrollToLine(lineColumnPos.start.line, true, true, function () {}) editor.scrollToLine(lineColumnPos.start.line, true, true, function () {})
if (lineColumnPos.start.line === lineColumnPos.end.line) { if (lineColumnPos.start.line === lineColumnPos.end.line) {
this.fullLineMarker = editor.addMarker({ this.fullLineMarker = editor.addMarker({
@ -588,7 +599,7 @@ function run () {
line: lineColumnPos.start.line + 1, line: lineColumnPos.start.line + 1,
column: 0 column: 0
} }
}, this.source, 'highlightcode_fullLine') }, this.source, css.highlightcode_fullLine)
} }
} }
}, },

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

@ -15,6 +15,9 @@ var css = csjs`
.fileexplorer { .fileexplorer {
box-sizing : border-box; box-sizing : border-box;
} }
input[type="file"] {
display: none;
}
.folder, .folder,
.file { .file {
font-size : 14px; font-size : 14px;

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

@ -114,7 +114,6 @@ var css = csjs`
pointer-events : none; pointer-events : none;
transition : .3s opacity ease-in; transition : .3s opacity ease-in;
} }
.content { .content {
position : relative; position : relative;
display : flex; display : flex;
@ -133,6 +132,46 @@ var css = csjs`
right : 20px; right : 20px;
top : 10px; top : 10px;
width : 20em; width : 20em;
#files .file {
padding: 0 0.6em;
box-sizing: border-box;
background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
cursor: pointer;
border-right: 0.5em solid white;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
}
#files .file.active {
color: black;
font-weight: bold;
border-bottom: 0 none;
padding-right: 2em;
}
#files .file .remove {
position: absolute;
right: 0;
top: 0;
height: 1.25em;
width: 1.25em;
line-height: 1em;
color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
display: none;
margin: 0.4em;
text-align: center;
}
#files .file input {
background-color: transparent;
border: 0 none;
border-bottom: 1px dotted black;
line-height: 1em;
margin: 0.5em 0;
}
#files .file.active .remove {
display: inline-block;
} }
` `

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

@ -15,15 +15,60 @@ var styleGuide = remix.ui.styleGuide
var styles = styleGuide() var styles = styleGuide()
var css = csjs` var css = csjs`
#righthand-panel {
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
overflow: hidden;
}
#optionViews {
background-color: ${styles.colors.backgroundBlue};
overflow: scroll;
height: 100%;
}
#optionViews > div {
display: none;
}
#optionViews .pre {
word-wrap: break-word;
background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
}
#optionViews .hide {
display: none;
}
.menu {
display: flex;
}
.options { .options {
float: left; float: left;
padding-top: 0.7em; padding-top: 0.7em;
min-width: 60px; min-width: 60px;
font-size: 0.9em; font-size: 0.9em;
cursor: pointer; cursor: pointer;
background-color: ${styles.colors.transparent}; background-color: ${styles.colors.transparent};
font-size: 1em; font-size: 1em;
text-align: center; text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li:active {
background-color: ${styles.colors.backgroundBlue};
}
.opts_li a {
color: inherit;
}
.opts_li {
display: block;
} }
.dragbar { .dragbar {
position : absolute; position : absolute;
@ -50,6 +95,15 @@ var css = csjs`
.header { .header {
height : 100%; height : 100%;
} }
.solIcon {
margin-left: 10px;
margin-right: 30px;
display: flex;
align-self: center;
height: 20px;
width: 20px;
background-color: white;
}
` `
// ------------------------------------------------------------------ // ------------------------------------------------------------------
@ -64,13 +118,13 @@ function RighthandPanel (appAPI, events, opts) {
var optionViews = yo`<div id="optionViews" class="settingsView"></div>` var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
var options = yo` var options = yo`
<ul id="options"> <ul class=${css.opts}>
<li class="compileView" title="Compile">Compile</li> <li class="${css.opts_li} compileView" title="Compile">Compile</li>
<li class="runView" title="Run">Run</li> <li class="${css.opts_li} runView" title="Run">Run</li>
<li class="settingsView" title="Settings">Settings</li> <li class="${css.opts_li} settingsView" title="Settings">Settings</li>
<li class="debugView" title="Debugger">Debugger</li> <li class="${css.opts_li} debugView" title="Debugger">Debugger</li>
<li class="staticanalysisView" title="Static Analysis">Analysis</li> <li class="${css.opts_li} staticanalysisView" title="Static Analysis">Analysis</li>
<li class="supportView" title="Help and support">Support</li> <li class="${css.opts_li} supportView" title="Help and support">Support</li>
</ul> </ul>
` `
self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>` self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
@ -78,8 +132,8 @@ function RighthandPanel (appAPI, events, opts) {
<div id="righthand-panel" class=${css.panel}> <div id="righthand-panel" class=${css.panel}>
${self._view.dragbar} ${self._view.dragbar}
<div id="header" class=${css.header}> <div id="header" class=${css.header}>
<div id="menu"> <div class=${css.menu}>
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime"> <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}

3
src/app/tabs/analysis-tab.js
Unescape View File

@ -13,6 +13,9 @@ var css = csjs`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#staticanalysisView {
display: block;
}
.infoBox { .infoBox {
${styles.infoTextBox} ${styles.infoTextBox}
margin-bottom: 1em; margin-bottom: 1em;

4
src/app/tabs/compile-tab.js
Unescape View File

@ -291,9 +291,9 @@ function compileTab (container, appAPI, appEvents, opts) {
getContractNames(success, data) getContractNames(success, data)
// hightlight the tab if error // hightlight the tab if error
if (success) { if (success) {
document.querySelector('#righthand-panel #menu .compileView').style.color = '' document.querySelector('.compileView').style.color = ''
} else { } else {
document.querySelector('#righthand-panel #menu .compileView').style.color = styles.colors.red document.querySelector('.compileView').style.color = styles.colors.red
} }
// display warning error if any // display warning error if any
var errorContainer = container.querySelector('.error') var errorContainer = container.querySelector('.error')

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

@ -187,7 +187,7 @@ var css = csjs`
module.exports = runTab module.exports = runTab
var instanceContainer = yo`<div class="${css.instanceContainer}"></div>` var instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
var noInstancesText = yo`<div class="${css.noInstancesText}">No Contract Instances.</div>` var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instances</div>`
var pendingTxsText = yo`<div class="${css.pendingTxsText}"></div>` var pendingTxsText = yo`<div class="${css.pendingTxsText}"></div>`
var pendingTxsContainer = yo`<div class="${css.pendingTxsContainer}">${pendingTxsText}</div>` var pendingTxsContainer = yo`<div class="${css.pendingTxsContainer}">${pendingTxsText}</div>`

8
src/app/tabs/settings-tab.js
Unescape View File

@ -20,12 +20,18 @@ var css = csjs`
word-break: break-word; word-break: break-word;
} }
.crow { .crow {
margin-top: 1em;
display: flex; display: flex;
overflow: auto;
clear: both;
padding: .5em;
font-weight: bold;
} }
.select { .select {
${styles.dropdown} ${styles.dropdown}
} }
input {
margin-right: 3px;
}
} }
` `
module.exports = SettingsTab module.exports = SettingsTab

6
src/universal-dapp.js
Unescape View File

@ -78,6 +78,8 @@ var css = csjs`
} }
.buttonsContainer { .buttonsContainer {
margin-top: 2%; margin-top: 2%;
display: flex;
overflow: hidden;
} }
.contractActions { .contractActions {
display: flex; display: flex;
@ -136,10 +138,10 @@ var css = csjs`
display: none; display: none;
} }
.contractProperty > .value { .contractProperty > .value {
padding: 0 0.4em;
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
min-width: 100%; align-self: center;
color: ${styles.colors.grey};
} }
.hasArgs input { .hasArgs input {
display: block; display: block;

Write Preview
Loading…
Cancel
Save