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

rhp: inline styles

Browse Source
pull/1/head
serapath 7 years ago committed by yann300
parent 79af837a44
commit e48f8507f6
2 changed files with 100 additions and 103 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. 101
      src/app/panels/righthand-panel.js
  2. 102
      src/app/panels/styles/righthand-panel-styles.js

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

@ -1,6 +1,8 @@
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject')
var remixLib = require('remix-lib') var remixLib = require('remix-lib')
var styleguide = require('../ui/styles-guide/theme-chooser')
var PluginManager = require('../plugin/pluginManager') var PluginManager = require('../plugin/pluginManager')
var TabbedMenu = require('../tabs/tabbed-menu') var TabbedMenu = require('../tabs/tabbed-menu')
var CompileTab = require('../tabs/compile-tab') var CompileTab = require('../tabs/compile-tab')
@ -13,7 +15,7 @@ var TestTab = require('../tabs/test-tab')
var RunTab = require('../tabs/run-tab') var RunTab = require('../tabs/run-tab')
var EventManager = remixLib.EventManager var EventManager = remixLib.EventManager
var css = require('./styles/righthand-panel-styles') var styles = styleguide.chooser()
module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) { module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
var self = this var self = this
@ -122,3 +124,100 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
} }
} }
} }
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.rightPanel.backgroundColor_Tab};
overflow: scroll;
height: 100%;
}
#optionViews > div {
display: none;
}
#optionViews .pre {
word-wrap: break-word;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
}
#optionViews .hide {
display: none;
}
a {
color: ${styles.rightPanel.text_link};
}
.menu {
display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
}
.options {
float: left;
padding-top: 0.7em;
min-width: 60px;
font-size: 0.9em;
cursor: pointer;
font-size: 1em;
text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li {
display: block;
font-weight: bold;
color: ${styles.rightPanel.text_Teriary};
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary};
}
.opts_li:hover {
color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
}
.dragbar {
position : absolute;
width : 0.5em;
top : 3em;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-left : 2px solid ${styles.rightPanel.bar_Dragging};
}
.ghostbar {
width : 3px;
background-color : ${styles.rightPanel.bar_Ghost};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
.panel {
height : 100%;
}
.header {
height : 100%;
}
.solIcon {
margin-left: 10px;
margin-right: 30px;
display: flex;
align-self: center;
height: 29px;
width: 20px;
background-color: ${styles.colors.transparent};
}
`

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

@ -1,102 +0,0 @@
var csjs = require('csjs-inject')
var styleGuide = require('../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
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.rightPanel.backgroundColor_Tab};
overflow: scroll;
height: 100%;
}
#optionViews > div {
display: none;
}
#optionViews .pre {
word-wrap: break-word;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
}
#optionViews .hide {
display: none;
}
a {
color: ${styles.rightPanel.text_link};
}
.menu {
display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
}
.options {
float: left;
padding-top: 0.7em;
min-width: 60px;
font-size: 0.9em;
cursor: pointer;
font-size: 1em;
text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li {
display: block;
font-weight: bold;
color: ${styles.rightPanel.text_Teriary};
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary};
}
.opts_li:hover {
color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
}
.dragbar {
position : absolute;
width : 0.5em;
top : 3em;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-left : 2px solid ${styles.rightPanel.bar_Dragging};
}
.ghostbar {
width : 3px;
background-color : ${styles.rightPanel.bar_Ghost};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
.panel {
height : 100%;
}
.header {
height : 100%;
}
.solIcon {
margin-left: 10px;
margin-right: 30px;
display: flex;
align-self: center;
height: 29px;
width: 20px;
background-color: ${styles.colors.transparent};
}
`
module.exports = css
Write Preview
Loading…
Cancel
Save