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

Merge pull request #717 from ethereum/movingStyleGuide

Browse Source 
Moved style-guide to remix and refactor browser-solidity accordingly
pull/1/head
yann300 7 years ago committed by GitHub
parent 6bab6b2250 af4e3ff15e
commit 0b75befb3c
15 changed files with 94 additions and 246 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. 2
      src/app.js
  2. 3
      src/app/files/file-explorer.js
  3. 3
      src/app/panels/editor-panel.js
  4. 3
      src/app/panels/file-panel.js
  5. 3
      src/app/panels/righthand-panel.js
  6. 12
      src/app/staticanalysis/staticAnalysisView.js
  7. 9
      src/app/tabs/analysis-tab.js
  8. 23
      src/app/tabs/compile-tab.js
  9. 6
      src/app/tabs/debugger-tab.js
  10. 41
      src/app/tabs/run-tab.js
  11. 9
      src/app/tabs/settings-tab.js
  12. 13
      src/app/tabs/support-tab.js
  13. 3
      src/app/ui/modaldialog.js
  14. 198
      src/style-guide.js
  15. 10
      src/universal-dapp.js

2
src/app.js
Unescape View File

@ -36,7 +36,7 @@ var Web3VMProvider = remix.web3.web3VMProvider
var handleImports = require('./app/compiler/compiler-imports')
var FileManager = require('./app/files/fileManager')
var styleGuide = require('./style-guide')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`

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

@ -7,7 +7,8 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
var EventManager = require('ethereum-remix').lib.EventManager
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`

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

@ -1,7 +1,8 @@
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var EventManager = require('ethereum-remix').lib.EventManager
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var Terminal = require('./terminal')

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

@ -10,7 +10,8 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
var QueryParams = require('../../lib/query-params')
var queryParams = new QueryParams()
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
module.exports = filepanel

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

@ -10,7 +10,8 @@ var supportTab = require('../tabs/support-tab')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`

12
src/app/staticanalysis/staticAnalysisView.js
Unescape View File

@ -5,7 +5,8 @@ var $ = require('jquery')
var utils = require('../../lib/utils')
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`
@ -16,14 +17,17 @@ var css = csjs`
.result {
margin-top: 1%;
}
.buttons extends ${styles.displayBox} {
.buttons {
${styles.displayBox}
display: flex;
align-items: center;
}
.buttonRun extends ${styles.button} {
.buttonRun {
${styles.button}
margin-right: 1%;
}
.analysisModulesContainer extends ${styles.displayBox} {
.analysisModulesContainer {
${styles.displayBox}
margin-bottom: 1%;
line-height: 2em;
display: flex;

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

@ -2,7 +2,8 @@ var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`
@ -12,10 +13,12 @@ var css = csjs`
display: flex;
flex-direction: column;
}
.infoBox extends ${styles.infoTextBox} {
.infoBox {
${styles.infoTextBox}
margin-bottom: 1em;
}
.textBox extends ${styles.textBoxL} {
.textBox {
${styles.textBoxL}
margin-bottom: 1em;
}
`

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

@ -10,7 +10,8 @@ var modalDialog = require('../ui/modaldialog')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`
@ -21,7 +22,8 @@ var css = csjs`
display: block;
margin: 3% 0;
}
.compileContainer extends ${styles.displayBox} {
.compileContainer {
${styles.displayBox}
margin-bottom: 2%;
}
.autocompileContainer {
@ -42,7 +44,7 @@ var css = csjs`
line-height: initial;
}
.warnCompilationSlow {
color: ${styles.colors.orange};
color: ${styles.colors.orange};
margin-left: 1%;
}
.compileButtons {
@ -56,18 +58,21 @@ var css = csjs`
.size {
display: flex;
}
.compileButton extends ${styles.button} {
.compileButton {
${styles.button}
width: 120px;
min-width: 110px;
margin-right: 1%;
font-size: 12px;
}
.container extends ${styles.displayBox} {
.container {
${styles.displayBox}
margin: 0;
display: flex;
align-items: center;
}
.contractNames extends ${styles.dropdown} {
.contractNames {
${styles.dropdown}
margin-right: 5%;
}
.contractButtons {
@ -76,9 +81,11 @@ var css = csjs`
justify-content: center;
text-align: center;
}
.details extends ${styles.button} {
.details {
${styles.button}
}
.publish extends ${styles.button} {
.publish {
${styles.button}
margin-left: 2%;
}
.log {

6
src/app/tabs/debugger-tab.js
Unescape View File

@ -2,14 +2,16 @@ var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`
.debuggerTabView {
padding: 2%;
}
.debugger extends ${styles.displayBox} {
.debugger {
${styles.displayBox}
margin-bottom: 1%;
}
`

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

@ -10,7 +10,8 @@ const copy = require('clipboard-copy')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`
@ -19,7 +20,8 @@ var css = csjs`
display: flex;
flex-direction: column;
}
.settings extends ${styles.displayBox} {
.settings {
${styles.displayBox}
margin-bottom: 2%;
padding: 10px 15px 15px 15px;
}
@ -27,21 +29,25 @@ var css = csjs`
margin-top: .5em;
display: flex;
}
.col1 extends ${styles.titleL} {
.col1 {
${styles.titleL}
width: 30%;
float: left;
align-self: center;
}
.col1_1 extends ${styles.titleM} {
.col1_1 {
${styles.titleM}
font-size: 12px;
width: 25%;
min-width: 75px;
float: left;
align-self: center;
}
.col2 extends ${styles.inputField}{
.col2 {
${styles.inputField}
}
.select extends ${styles.dropdown} {
.select {
${styles.dropdown}
text-align: center;
font-weight: normal;
min-width: 150px;
@ -55,17 +61,20 @@ var css = csjs`
.copyaddress:hover {
color: ${styles.colors.grey};
}
.instanceContainer extends ${styles.displayBox} {
.instanceContainer {
${styles.displayBox}
display: flex;
flex-direction: column;
background-color: ${styles.colors.transparent};
margin-top: 2%;
border: none;
}
.container extends ${styles.displayBox} {
.container {
${styles.displayBox}
margin-top: 2%;
}
.contractNames extends ${styles.dropdown} {
.contractNames {
${styles.dropdown}
}
.buttons {
display: flex;
@ -80,24 +89,28 @@ var css = csjs`
align-items: center;
margin-top: 2%;
}
.atAddress extends ${styles.button} {
.atAddress {
${styles.button}
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: ${styles.colors.lightGreen};
border-color: ${styles.colors.lightGreen};
}
.create extends ${styles.button} {
.create {
${styles.button}
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: ${styles.colors.lightRed};
border-color: ${styles.colors.lightRed};
}
.input extends ${styles.inputField} {
.input {
${styles.inputField}
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-left: 10px;
}
.noInstancesText extends ${styles.displayBox} {
.noInstancesText {
${styles.displayBox}
text-align: center;
color: ${styles.colors.lightGrey};
font-style: italic;
@ -134,6 +147,8 @@ var css = csjs`
border-radius: 3px;
}
`
console.log(styles.displayBox.toString())
console.log(css.settings.toString())
module.exports = runTab

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

@ -5,7 +5,8 @@ var QueryParams = require('../../lib/query-params')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`
@ -13,7 +14,8 @@ var css = csjs`
padding: 2%;
display: flex;
}
.info extends ${styles.infoTextBox} {
.info {
${styles.infoTextBox}
margin-bottom: 2em;
word-break: break-word;
}
@ -21,7 +23,8 @@ var css = csjs`
margin-top: 1em;
display: flex;
}
.select extends ${styles.dropdown} {
.select {
${styles.dropdown}
}
}
`

13
src/app/tabs/support-tab.js
Unescape View File

@ -2,7 +2,8 @@ var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`
@ -14,7 +15,8 @@ var css = csjs`
flex-direction: column;
overflow: hidden;
}
.chat extends ${styles.displayBox} {
.chat {
${styles.displayBox}
display: flex;
flex-direction: column;
align-items: center;
@ -43,14 +45,15 @@ var css = csjs`
.chatTitleText {
opacity: 0.8;
}
.chatIframe extends ${styles.displayBox} {
.chatIframe {
${styles.displayBox}
width: 100%;
height: 100%;
transform: scale(0.9);
padding: 0;
}
.infoBox extends ${styles.infoTextBox}{
.infoBox {
${styles.infoTextBox}
}
`

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

@ -1,6 +1,7 @@
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`

198
src/style-guide.js
Unescape View File

@ -1,198 +0,0 @@
var csjs = require('csjs-inject')
module.exports = styleGuide
function styleGuide () {
/* --------------------------------------------------------------------------
COLORS
-------------------------------------------------------------------------- */
var colors = {
// BASIC COLORS (B&W and transparent)
transparent: 'transparent',
white: 'hsl(0, 0%, 100%)',
black: 'hsl(0, 0%, 0%)',
opacityBlack: 'hsla(0, 0%, 0%, .4)',
// BLUE
blue: 'hsla(229, 75%, 87%, 1)',
lightBlue: 'hsla(229, 75%, 87%, .5)',
backgroundBlue: 'hsla(229, 100%, 97%, 1)',
// GREY
grey: 'hsla(0, 0%, 40%, 1)',
lightGrey: 'hsla(0, 0%, 40%, .5)',
veryLightGrey: 'hsla(0, 0%, 40%, .2)',
// RED
red: 'hsla(0, 82%, 82%, 1)',
lightRed: 'hsla(0, 82%, 82%, .5)',
// GREEN
green: 'hsla(141, 75%, 84%, 1)',
lightGreen: 'hsla(141, 75%, 84%, .5)',
// PINK
pink: 'hsla(300, 69%, 76%, 1)',
lightPink: 'hsla(300, 69%, 76%, .5)',
// YELLOW
orange: 'hsla(44, 100%, 50%, 1)',
lightOrange: 'hsla(44, 100%, 50%, .5)',
// VIOLET
violet: 'hsla(240, 64%, 68%, 1)'
}
/* --------------------------------------------------------------------------
FONTS
-------------------------------------------------------------------------- */
var texts = csjs `
.title-XL {
font-size : 2em;
font-weight : 700;
letter-spacing : .05em;
}
.title-L {
font-size : 1em;
font-weight : 600;
}
.title-M {
font-size : 1em;
font-weight : 400;
}
.title-S {
font-size : .8em;
font-weight : 300;
}
.text {
font-size : .8em;
}
`
/* --------------------------------------------------------------------------
TEXT-BOXES
-------------------------------------------------------------------------- */
var textBoxes = csjs`
.display-box {
font-size : 12px;
padding : 10px 15px;
line-height : 20px;
background : ${colors.white};
border-radius : 3px;
border : 1px solid ${colors.veryLightGrey};
overflow : hidden;
word-break : break-word;
width : 100%;
}
.info-text-box {
background-color : ${colors.white};
line-height : 20px;
border : .2em dotted ${colors.lightGrey};
padding : 8px 15px;
border-radius : 5px;
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
}
.warning-text-box {
background-color : ${colors.lightOrange};
line-height : 20px;
padding : 8px 15px;
border-radius : 5px;
border : .2em dotted ${colors.orange};
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
}
.error-text-box {
background-color : ${colors.lightRed};
line-height : 20px;
padding : 1em 1em .5em 1em;
border-radius : 3px;
box-shadow : rgba(0,0,0,.2) 0 1px 4px;
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
}
.title-box {
margin-bottom : 0.4em;
padding : .3em;
background-color : transparent;
font-weight : bold;
display : flex;
justify-content : space-between;
word-wrap : break-word;
position : relative;
border-radius : 3px;
overflow : hidden;
word-break : normal;
}
.input {
border : 1px solid ${colors.veryLightGrey};
height : 25px;
width : 250px;
font-size : 12px;
border-radius : 3px;
padding : 0 8px;
overflow : hidden;
word-break : normal;
}
`
/* --------------------------------------------------------------------------
BUTTONS
-------------------------------------------------------------------------- */
var buttons = csjs`
.button {
display : flex;
align-items : center;
justify-content : center;
border-color : transparent;
border-radius : 3px;
border : .3px solid ${colors.veryLightGrey};
cursor : pointer;
min-height : 25px;
max-height : 25px;
width : 70px;
min-width : 70px;
font-size : 12px;
overflow : hidden;
word-break : normal;
background-color : #E8E8E8;
}
.button:hover {
opacity : 0.8;
}
.dropdown {
font-size : 12px;
font-weight : bold;
padding : 0 8px;
text-decoration : none;
background-color : ${colors.white};
cursor : pointer;
border : 1px solid ${colors.veryLightGrey};
border-radius : 3px;
height : 25px;
width : 250px;
text-align : center;
overflow : hidden;
word-break : normal;
}
`
return {
textBoxL: textBoxes['display-box-L'],
infoTextBox: textBoxes['info-text-box'],
inputField: textBoxes['input'],
displayBox: textBoxes['display-box'],
warningTextBox: textBoxes['warning-text-box'],
titleL: texts['title-L'],
titleM: texts['title-M'],
dropdown: buttons['dropdown'],
button: buttons['button'],
colors: colors,
titleBox: textBoxes['title-box']
}
}

10
src/universal-dapp.js
Unescape View File

@ -20,7 +20,9 @@ const copy = require('clipboard-copy')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./style-guide')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`
@ -28,7 +30,8 @@ var css = csjs`
display: flex;
align-items: center;
}
.title extends ${styles.dropdown} {
.title {
${styles.dropdown}
width: 400px;
display: flex;
justify-content: space-between;
@ -43,7 +46,8 @@ var css = csjs`
word-break: break-word;
min-width: 230px;
}
.instance extends ${styles.displayBox} {
.instance {
${styles.displayBox}
padding: 10px 15px 6px 15px;
}
.instance .title:before {

Write Preview
Loading…
Cancel
Save