Skip to content

B
baas-ide
Commit 9793b525 authored by ninabreznik's avatar ninabreznik
Browse files
Options

Refactor style-guide and enable it to be exported

parent bfdac7ad
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 55 deletions
package.json
View file @ 9793b525
......@@ -84,21 +84,37 @@
},
"browserify": {
"transform": [
["babelify", {
"plugins": [
["fast-async", {
"runtimePatten": null,
"compiler": {
"promises": true,
"es7": true,
"noRuntime": true,
"wrapAwait": true
}
}], "transform-object-assign"
]
}],
["yo-yoify"],
["babelify", { "presets": ["es2015"] }]
[
"babelify",
{
"plugins": [
[
"fast-async",
{
"runtimePatten": null,
"compiler": {
"promises": true,
"es7": true,
"noRuntime": true,
"wrapAwait": true
}
}
],
"transform-object-assign"
]
}
],
[
"yo-yoify"
],
[
"babelify",
{
"presets": [
"es2015"
]
}
]
]
}
}
src/index.js
View file @ 9793b525
......@@ -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 () {
}
}
}
src/ui/ButtonNavigator.js
View file @ 9793b525
......@@ -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;
}
......
src/ui/TxBrowser.js
View file @ 9793b525
......@@ -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;
}
......
src/ui/styles/style-guide.js
View file @ 9793b525
......@@ -35,44 +35,168 @@ function styleGuide () {
// VIOLET
violet: 'hsla(240, 64%, 68%, 1)'
}
/* --------------------------------------------------------------------------
BUTTONSsss
-------------------------------------------------------------------------- */
var buttons = csjs`
.button {
border-color : transparent;
border-radius : 3px;
border : .3px solid ${colors.veryLightGrey};
cursor : pointer;
min-height : 25px;
max-height : 25px;
padding : 3px;
min-width : 100px;
font-size : 12px;
overflow : hidden;
word-break : normal;
background-color : ${colors.veryLightGrey};
color : ${colors.grey};
margin : 3px;
/* --------------------------------------------------------------------------
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;
`
}
`
var textBoxes = csjs`
.input {
border : 1px solid ${colors.lightGrey}; // light-grey
margin : .3em;
height : 25px;
font-size : 10px;
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;
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,
inputField: textBoxes['input']
titleBox: textBoxes['title-box']
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment