Skip to content

B
baas-ide
Commit af4e3ff1 authored by ninabreznik's avatar ninabreznik Committed by yann300
Browse files
Options

Moved style-guide to remix and refactor browser-solidity accordingly

parent 2dcb41a8
Show whitespace changes
Inline Side-by-side
Showing with 92 additions and 244 deletions
src/app.js
View file @ af4e3ff1
......@@ -35,7 +35,7 @@ var EventsDecoder = require('./app/execution/eventsDecoder')
var Web3VMProvider = remix.web3.web3VMProvider
var handleImports = require('./app/compiler/compiler-imports')
var styleGuide = require('./style-guide')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs`
......
src/app/files/file-explorer.js
View file @ af4e3ff1
......@@ -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`
......
src/app/panels/editor-panel.js
View file @ af4e3ff1
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')
......
src/app/panels/file-panel.js
View file @ af4e3ff1
......@@ -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
......
src/app/panels/righthand-panel.js
View file @ af4e3ff1
......@@ -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`
......
src/app/staticanalysis/staticAnalysisView.js
View file @ af4e3ff1
......@@ -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;
......
src/app/tabs/analysis-tab.js
View file @ af4e3ff1
......@@ -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;
}
`
......
src/app/tabs/compile-tab.js
View file @ af4e3ff1
......@@ -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 {
......@@ -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 {
......
src/app/tabs/debugger-tab.js
View file @ af4e3ff1
......@@ -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%;
}
`
......
src/app/tabs/run-tab.js
View file @ af4e3ff1
......@@ -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
......
src/app/tabs/settings-tab.js
View file @ af4e3ff1
......@@ -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}
}
}
`
......
src/app/tabs/support-tab.js
View file @ af4e3ff1
......@@ -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}
}
`
......
src/app/ui/modaldialog.js
View file @ af4e3ff1
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`
......
src/style-guide.js deleted 100644 → 0
View file @ 2dcb41a8
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']
}
}
src/universal-dapp.js
View file @ af4e3ff1
......@@ -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 {
......
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