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

Refactor style-guide and enable it to be exported

Browse Source
pull/7/head
ninabreznik 7 years ago
parent bfdac7ad42
commit 9793b52578
5 changed files with 201 additions and 55 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. 28
      package.json
  2. 5
      src/index.js
  3. 6
      src/ui/ButtonNavigator.js
  4. 9
      src/ui/TxBrowser.js
  5. 166
      src/ui/styles/style-guide.js

28
package.json
Unescape View File

@ -84,9 +84,13 @@
},
"browserify": {
"transform": [
["babelify", {
[
"babelify",
{
"plugins": [
["fast-async", {
[
"fast-async",
{
"runtimePatten": null,
"compiler": {
"promises": true,
@ -94,11 +98,23 @@
"noRuntime": true,
"wrapAwait": true
}
}], "transform-object-assign"
}
],
"transform-object-assign"
]
}
],
[
"yo-yoify"
],
[
"babelify",
{
"presets": [
"es2015"
]
}
]
}],
["yo-yoify"],
["babelify", { "presets": ["es2015"] }]
]
}
}

5
src/index.js
Unescape View File

@ -15,6 +15,7 @@ var astHelper = require('./solidity/astHelper')
var EventManager = require('./lib/eventManager')
var codeUtil = require('./helpers/util')
var web3VMProvider = require('./web3Provider/web3VmProvider')
var styleGuide = require('./ui/styles/style-guide')
if (typeof (module) !== 'undefined' && typeof (module.exports) !== 'undefined') {
module.exports = modules()
@ -38,7 +39,8 @@ function modules () {
Debugger: Debugger,
VMdebugger: VMDebugger,
BasicPanel: BasicPanel,
TreeView: TreeView
TreeView: TreeView,
styleGuide: styleGuide
},
util: {
SourceMappingDecoder: SourceMappingDecoder,
@ -58,4 +60,3 @@ function modules () {
}
}
}

6
src/ui/ButtonNavigator.js
Unescape View File

@ -18,7 +18,8 @@ var css = csjs`
display: flex;
justify-content: center
}
.stepButton extends ${styles.button} {
.stepButton {
${styles.button}
width: 25%;
min-width: 30px;
}
@ -27,7 +28,8 @@ var css = csjs`
display: flex;
justify-content: center
}
.jumpButton extends ${styles.button} {
.jumpButton {
${styles.button}
width: 33%;
min-width: 30px;
}

9
src/ui/TxBrowser.js
Unescape View File

@ -9,6 +9,8 @@ var style = require('./styles/basicStyles')
var csjs = require('csjs-inject')
var styleGuide = require('./styles/style-guide')
var styles = styleGuide()
var styles = styleGuide()
var styles = styleGuide()
var css = csjs`
.container {
@ -24,8 +26,8 @@ var css = csjs`
display: flex;
justify-content: center;
}
.txinput extends ${styles.inputField} {
width: 50%;
.txinput {
${styles.inputField}
min-width: 30px;
margin: 3px;
}
@ -34,7 +36,8 @@ var css = csjs`
display: flex;
justify-content: center;
}
.txbutton extends ${styles.button} {
.txbutton {
${styles.button}
width: 50%;
min-width: 30px;
}

166
src/ui/styles/style-guide.js
Unescape View File

@ -35,44 +35,168 @@ function styleGuide () {
// VIOLET
violet: 'hsla(240, 64%, 68%, 1)'
}
/* --------------------------------------------------------------------------
BUTTONSsss
-------------------------------------------------------------------------- */
var buttons = csjs`
.button {
/* --------------------------------------------------------------------------
FONTS
-------------------------------------------------------------------------- */
var texts = {
'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 = {
'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;
border-radius : 3px;
padding : 0 8px;
overflow : hidden;
word-break : normal;
`
}
/* --------------------------------------------------------------------------
BUTTONS
-------------------------------------------------------------------------- */
var buttons = {
'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;
padding : 3px;
min-width : 100px;
width : 70px;
min-width : 70px;
font-size : 12px;
overflow : hidden;
word-break : normal;
background-color : ${colors.veryLightGrey};
color : ${colors.grey};
margin : 3px;
}
`
background-color : #E8E8E8;
`,
var textBoxes = csjs`
.input {
border : 1px solid ${colors.lightGrey}; // light-grey
margin : .3em;
height : 25px;
font-size : 10px;
border-radius : 3px;
'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,
inputField: textBoxes['input']
titleBox: textBoxes['title-box']
}
}

Write Preview
Loading…
Cancel
Save