diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index e8bce3f24d..1913ebdacf 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -1,57 +1,9 @@
'use strict'
var yo = require('yo-yo')
-var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.themeChooser
-var styles = styleGuide.chooser()
var SourceMappingDecoder = remixLib.SourceMappingDecoder
-var css = csjs`
- .contextview {
- opacity : 0.8;
- }
- .container {
- padding : 1px 15px;
- }
- .line {
- display : flex;
- justify-content : flex-end;
- align-items : center;
- text-overflow : ellipsis;
- overflow : hidden;
- white-space : nowrap;
- color : ${styles.editor.text_Primary};
- font-size : 11px;
- }
- .type {
- font-style : italic;
- margin-right : 5px;
- }
- .name {
- font-weight : bold;
- }
- .jump {
- cursor : pointer;
- margin : 0 5px;
- color : ${styles.editor.icon_Color_Editor};
- }
- .jump:hover {
- color : ${styles.editor.icon_HoverColor_Editor};
- }
- .referencesnb {
- float : right;
- margin-left : 15px;
- }
- .gasEstimation {
- margin-left: 15px;
- display: flex;
- align-items: center;
- }
- .gasStationIcon {
- height: 13px;
- margin-right: 5px;
- }
-`
+var css = require('./styles/contextView-styles')
/*
Display information about the current focused code:
diff --git a/src/app/editor/styles/contextView-styles.js b/src/app/editor/styles/contextView-styles.js
new file mode 100644
index 0000000000..faf1158515
--- /dev/null
+++ b/src/app/editor/styles/contextView-styles.js
@@ -0,0 +1,53 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+ .contextview {
+ opacity : 0.8;
+ }
+ .container {
+ padding : 1px 15px;
+ }
+ .line {
+ display : flex;
+ justify-content : flex-end;
+ align-items : center;
+ text-overflow : ellipsis;
+ overflow : hidden;
+ white-space : nowrap;
+ color : ${styles.editor.text_Primary};
+ font-size : 11px;
+ }
+ .type {
+ font-style : italic;
+ margin-right : 5px;
+ }
+ .name {
+ font-weight : bold;
+ }
+ .jump {
+ cursor : pointer;
+ margin : 0 5px;
+ color : ${styles.editor.icon_Color_Editor};
+ }
+ .jump:hover {
+ color : ${styles.editor.icon_HoverColor_Editor};
+ }
+ .referencesnb {
+ float : right;
+ margin-left : 15px;
+ }
+ .gasEstimation {
+ margin-left: 15px;
+ display: flex;
+ align-items: center;
+ }
+ .gasStationIcon {
+ height: 13px;
+ margin-right: 5px;
+ }
+`
+
+module.exports = css
diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
index b66c568ab5..e7eb5cee01 100644
--- a/src/app/files/file-explorer.js
+++ b/src/app/files/file-explorer.js
@@ -1,5 +1,4 @@
var yo = require('yo-yo')
-var csjs = require('csjs-inject')
var Treeview = require('remix-debugger').ui.TreeView
var modalDialog = require('../ui/modaldialog')
var modalDialogCustom = require('../ui/modal-dialog-custom')
@@ -9,49 +8,7 @@ var contextMenu = require('../ui/contextMenu')
var addTooltip = require('../ui/tooltip')
var helper = require('../../lib/helper')
-var styleGuide = remixLib.ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
- .fileexplorer {
- box-sizing : border-box;
- }
- input[type="file"] {
- display: none;
- }
- .folder,
- .file {
- font-size : 14px;
- cursor : pointer;
- }
- .file {
- color : ${styles.leftPanel.text_Teriary};
- }
- .hasFocus {
- background-color : ${styles.leftPanel.backgroundColor_FileExplorer};
- }
- .rename {
- background-color : ${styles.leftPanel.backgroundColor_Panel};
- }
- .remove {
- margin-left : auto;
- padding-left : 5px;
- padding-right : 5px;
- }
- .activeMode {
- display : flex;
- width : 100%;
- margin-right : 10px;
- padding-right : 19px;
- }
- .activeMode > div {
- min-width : 10px;
- }
- ul {
- padding : 0;
- }
-`
-module.exports = fileExplorer
+var css = require('./styles/file-explorer-styles')
function fileExplorer (appAPI, files) {
var self = this
@@ -291,3 +248,5 @@ fileExplorer.prototype.ensureRoot = function (cb) {
if (cb) cb()
})
}
+
+module.exports = fileExplorer
diff --git a/src/app/files/styles/file-explorer-styles.js b/src/app/files/styles/file-explorer-styles.js
new file mode 100644
index 0000000000..86557b0e25
--- /dev/null
+++ b/src/app/files/styles/file-explorer-styles.js
@@ -0,0 +1,46 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+ .fileexplorer {
+ box-sizing : border-box;
+ }
+ input[type="file"] {
+ display: none;
+ }
+ .folder,
+ .file {
+ font-size : 14px;
+ cursor : pointer;
+ }
+ .file {
+ color : ${styles.leftPanel.text_Teriary};
+ }
+ .hasFocus {
+ background-color : ${styles.leftPanel.backgroundColor_FileExplorer};
+ }
+ .rename {
+ background-color : ${styles.leftPanel.backgroundColor_Panel};
+ }
+ .remove {
+ margin-left : auto;
+ padding-left : 5px;
+ padding-right : 5px;
+ }
+ .activeMode {
+ display : flex;
+ width : 100%;
+ margin-right : 10px;
+ padding-right : 19px;
+ }
+ .activeMode > div {
+ min-width : 10px;
+ }
+ ul {
+ padding : 0;
+ }
+`
+
+module.exports = css
diff --git a/src/app/staticanalysis/staticAnalysisView.js b/src/app/staticanalysis/staticAnalysisView.js
index 508958e589..447fe7dcb4 100644
--- a/src/app/staticanalysis/staticAnalysisView.js
+++ b/src/app/staticanalysis/staticAnalysisView.js
@@ -4,42 +4,13 @@ var yo = require('yo-yo')
var $ = require('jquery')
var remixLib = require('remix-lib')
var utils = remixLib.util
-var csjs = require('csjs-inject')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
-var EventManager = remixLib.EventManager
+var css = require('./styles/staticAnalysisView-styles')
-var css = csjs`
- .analysis {
- display: flex;
- flex-direction: column;
- }
- .result {
- margin-top: 1%;
- }
- .buttons {
- ${styles.rightPanel.analysisTab.box_AnalysisContainer}
- display: flex;
- align-items: center;
- }
- .buttonRun {
- ${styles.rightPanel.analysisTab.button_Run_AnalysisTab}
- margin-right: 1%;
- }
- .analysisModulesContainer {
- ${styles.rightPanel.analysisTab.box_AnalysisContainer}
- margin-bottom: 1%;
- line-height: 2em;
- display: flex;
- flex-direction: column;
- }
- .label {
- display: flex;
- align-items: center;
- }
-`
+var EventManager = remixLib.EventManager
function staticAnalysisView (appAPI, compilerEvent) {
this.event = new EventManager()
diff --git a/src/app/staticanalysis/styles/staticAnalysisView-styles.js b/src/app/staticanalysis/styles/staticAnalysisView-styles.js
new file mode 100644
index 0000000000..ca5652da7e
--- /dev/null
+++ b/src/app/staticanalysis/styles/staticAnalysisView-styles.js
@@ -0,0 +1,37 @@
+var remixLib = require('remix-lib')
+var csjs = require('csjs-inject')
+
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+ .analysis {
+ display: flex;
+ flex-direction: column;
+ }
+ .result {
+ margin-top: 1%;
+ }
+ .buttons {
+ ${styles.rightPanel.analysisTab.box_AnalysisContainer}
+ display: flex;
+ align-items: center;
+ }
+ .buttonRun {
+ ${styles.rightPanel.analysisTab.button_Run_AnalysisTab}
+ margin-right: 1%;
+ }
+ .analysisModulesContainer {
+ ${styles.rightPanel.analysisTab.box_AnalysisContainer}
+ margin-bottom: 1%;
+ line-height: 2em;
+ display: flex;
+ flex-direction: column;
+ }
+ .label {
+ display: flex;
+ align-items: center;
+ }
+`
+
+module.exports = css
diff --git a/src/app/ui/dropdown.js b/src/app/ui/dropdown.js
index 6aaa065925..3afbfc4ff9 100644
--- a/src/app/ui/dropdown.js
+++ b/src/app/ui/dropdown.js
@@ -2,54 +2,9 @@ var yo = require('yo-yo')
var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager
// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = remixLib.ui.themeChooser
-var styles = styleGuide.chooser()
-var css = csjs`
- .dropdown {
- ${styles.terminal.dropdown_Filter_MenuBar}
- overflow : visible;
- position : relative;
- display : flex;
- flex-direction : column;
- margin-right : 10px;
- }
- .selectbox {
- display : flex;
- align-items : center;
- margin : 3px;
- cursor : pointer;
- }
- .selected {
- display : inline-block;
- min-width : 30ch;
- max-width : 30ch;
- white-space : nowrap;
- text-overflow : ellipsis;
- overflow : hidden;
- padding : 3px;
- }
- .icon {
- padding : 0px 5px;
- }
- .options {
- position : absolute;
- display : flex;
- flex-direction : column;
- align-items : end;
- top : 24px;
- left : 0;
- width : 250px;
- background-color : ${styles.appProperties.dropdown_BackgroundColor};
- border : 1px solid ${styles.appProperties.dropdown_BorderColor};
- border-radius : 3px;
- border-top : 0;
- }
- .option {
- margin: 0;
- }
-`
+var css = require('./styles/dropdown-styles')
+
/* USAGE:
var dropdown = new Dropdown({
diff --git a/src/app/ui/modal-dialog-custom.js b/src/app/ui/modal-dialog-custom.js
index 192dae5a97..470b4343e7 100644
--- a/src/app/ui/modal-dialog-custom.js
+++ b/src/app/ui/modal-dialog-custom.js
@@ -1,12 +1,7 @@
var modal = require('./modaldialog.js')
var yo = require('yo-yo')
-var csjs = require('csjs-inject')
+var css = require('./styles/modal-dialog-custom-styles')
-var css = csjs`
- .prompt_text {
- width: 300px;
- }
-`
module.exports = {
alert: function (text) {
modal('', yo`${text}
`, null, { label: null })
diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js
index 5417e2bd83..880c52b114 100644
--- a/src/app/ui/modaldialog.js
+++ b/src/app/ui/modaldialog.js
@@ -1,88 +1,5 @@
var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
- .modal {
- display: none; /* Hidden by default */
- position: fixed; /* Stay in place */
- z-index: 1000; /* Sit on top of everything including the dragbar */
- left: 0;
- top: 0;
- width: 100%; /* Full width */
- height: 100%; /* Full height */
- overflow: auto; /* Enable scroll if needed */
- background-color: ${styles.colors.black}; /* Fallback color */
- background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
- }
- .modalHeader {
- padding: 2px 16px;
- background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
- color: ${styles.remix.modalDialog_Header_Footer_Color};
- display: flex;
- justify-content: space-between;
- }
- .modalBody {
- background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
- color: ${styles.remix.modalDialog_text_Primary};
- padding: 1.5em;
- line-height: 1.5em;
- }
- .modalBody em{
- color: ${styles.remix.modalDialog_text_Em};
- }
- .modalBody a{
- color: ${styles.remix.modalDialog_text_Link};
- }
- .modalFooter {
- display: flex;
- justify-content: flex-end;
- padding: 10px 30px;
- background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
- color: ${styles.remix.modalDialog_Header_Footer_Color};
- text-align: right;
- font-weight: 700;
- cursor: pointer;
- }
- .modalContent {
- position: relative;
- background-color: ${styles.colors.black};
- margin: auto;
- padding: 0;
- line-height: 18px;
- font-size: 12px;
- border: 1px solid ${styles.colors.grey};
- width: 50%;
- box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
- -webkit-animation-name: animatetop;
- -webkit-animation-duration: 0.4s;
- animation-name: animatetop;
- animation-duration: 0.4s
- }
- .modalFooterOk {
- cursor: pointer;
- color: ${styles.remix.modalDialog_Header_Footer_Color};
- }
- .modalFooterCancel {
- margin-left: 1em;
- cursor: pointer;
- color: ${styles.remix.modalDialog_Header_Footer_Color};
- }
- .modalClose {
- margin: auto 0;
- color: ${styles.remix.modalDialog_Header_Footer_Color};
- cursor: pointer;
- }
- @-webkit-keyframes animatetop {
- from {top: -300px; opacity: 0}
- to {top: 0; opacity: 1}
- }
- @keyframes animatetop {
- from {top: -300px; opacity: 0}
- to {top: 0; opacity: 1}
- }
-`
+var css = require('./styles/modaldialog-styles')
module.exports = (title, content, ok, cancel) => {
var container = document.querySelector(`.${css.modal}`)
diff --git a/src/app/ui/renderer.js b/src/app/ui/renderer.js
index 2a16993557..dc28f8b686 100644
--- a/src/app/ui/renderer.js
+++ b/src/app/ui/renderer.js
@@ -2,64 +2,7 @@
var $ = require('jquery')
var yo = require('yo-yo')
-
-// -------------- styling ----------------------
-// var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = yo``
+var css = require('./styles/renderer-styles')
/**
* After refactor, the renderer is only used to render error/warning
diff --git a/src/app/ui/styles/dropdown-styles.js b/src/app/ui/styles/dropdown-styles.js
new file mode 100644
index 0000000000..7a98d5f02e
--- /dev/null
+++ b/src/app/ui/styles/dropdown-styles.js
@@ -0,0 +1,51 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+ .dropdown {
+ ${styles.terminal.dropdown_Filter_MenuBar}
+ overflow : visible;
+ position : relative;
+ display : flex;
+ flex-direction : column;
+ margin-right : 10px;
+ }
+ .selectbox {
+ display : flex;
+ align-items : center;
+ margin : 3px;
+ cursor : pointer;
+ }
+ .selected {
+ display : inline-block;
+ min-width : 30ch;
+ max-width : 30ch;
+ white-space : nowrap;
+ text-overflow : ellipsis;
+ overflow : hidden;
+ padding : 3px;
+ }
+ .icon {
+ padding : 0px 5px;
+ }
+ .options {
+ position : absolute;
+ display : flex;
+ flex-direction : column;
+ align-items : end;
+ top : 24px;
+ left : 0;
+ width : 250px;
+ background-color : ${styles.appProperties.dropdown_BackgroundColor};
+ border : 1px solid ${styles.appProperties.dropdown_BorderColor};
+ border-radius : 3px;
+ border-top : 0;
+ }
+ .option {
+ margin: 0;
+ }
+`
+
+module.exports = css
diff --git a/src/app/ui/styles/modal-dialog-custom-styles.js b/src/app/ui/styles/modal-dialog-custom-styles.js
new file mode 100644
index 0000000000..70209f8d44
--- /dev/null
+++ b/src/app/ui/styles/modal-dialog-custom-styles.js
@@ -0,0 +1,9 @@
+var csjs = require('csjs-inject')
+
+var css = csjs`
+ .prompt_text {
+ width: 300px;
+ }
+`
+
+module.exports = css
diff --git a/src/app/ui/styles/modaldialog-styles.js b/src/app/ui/styles/modaldialog-styles.js
new file mode 100644
index 0000000000..b1a8913c60
--- /dev/null
+++ b/src/app/ui/styles/modaldialog-styles.js
@@ -0,0 +1,86 @@
+var csjs = require('csjs-inject')
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+ .modal {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 1000; /* Sit on top of everything including the dragbar */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: ${styles.colors.black}; /* Fallback color */
+ background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
+ }
+ .modalHeader {
+ padding: 2px 16px;
+ background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
+ color: ${styles.remix.modalDialog_Header_Footer_Color};
+ display: flex;
+ justify-content: space-between;
+ }
+ .modalBody {
+ background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
+ color: ${styles.remix.modalDialog_text_Primary};
+ padding: 1.5em;
+ line-height: 1.5em;
+ }
+ .modalBody em{
+ color: ${styles.remix.modalDialog_text_Em};
+ }
+ .modalBody a{
+ color: ${styles.remix.modalDialog_text_Link};
+ }
+ .modalFooter {
+ display: flex;
+ justify-content: flex-end;
+ padding: 10px 30px;
+ background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
+ color: ${styles.remix.modalDialog_Header_Footer_Color};
+ text-align: right;
+ font-weight: 700;
+ cursor: pointer;
+ }
+ .modalContent {
+ position: relative;
+ background-color: ${styles.colors.black};
+ margin: auto;
+ padding: 0;
+ line-height: 18px;
+ font-size: 12px;
+ border: 1px solid ${styles.colors.grey};
+ width: 50%;
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+ -webkit-animation-name: animatetop;
+ -webkit-animation-duration: 0.4s;
+ animation-name: animatetop;
+ animation-duration: 0.4s
+ }
+ .modalFooterOk {
+ cursor: pointer;
+ color: ${styles.remix.modalDialog_Header_Footer_Color};
+ }
+ .modalFooterCancel {
+ margin-left: 1em;
+ cursor: pointer;
+ color: ${styles.remix.modalDialog_Header_Footer_Color};
+ }
+ .modalClose {
+ margin: auto 0;
+ color: ${styles.remix.modalDialog_Header_Footer_Color};
+ cursor: pointer;
+ }
+ @-webkit-keyframes animatetop {
+ from {top: -300px; opacity: 0}
+ to {top: 0; opacity: 1}
+ }
+ @keyframes animatetop {
+ from {top: -300px; opacity: 0}
+ to {top: 0; opacity: 1}
+ }
+`
+
+module.exports = css
diff --git a/src/app/ui/styles/renderer-styles.js b/src/app/ui/styles/renderer-styles.js
new file mode 100644
index 0000000000..c6b1cf0df7
--- /dev/null
+++ b/src/app/ui/styles/renderer-styles.js
@@ -0,0 +1,59 @@
+var yo = require('yo-yo')
+
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = yo``
+
+module.exports = css
diff --git a/src/app/ui/styles/tooltip-styles.js b/src/app/ui/styles/tooltip-styles.js
new file mode 100644
index 0000000000..523e22df4d
--- /dev/null
+++ b/src/app/ui/styles/tooltip-styles.js
@@ -0,0 +1,39 @@
+var csjs = require('csjs-inject')
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+ .tooltip {
+ z-index: 1001;
+ display: inline-block;
+ position: fixed;
+ background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor};
+ color: ${styles.remix.tooltip_CopyToClipboard_Color};
+ min-height: 50px;
+ min-width: 290px;
+ padding: 16px 24px 12px;
+ border-radius: 3px;
+ bottom: -300;
+ left: 40%;
+ font-size: 12px;
+ text-align: center;
+ -webkit-animation-name: animatebottom;
+ -webkit-animation-duration: 6s;
+ animation-name: animatebottom;
+ animation-duration: 6s
+ }
+ @-webkit-keyframes animatebottom {
+ 0% {bottom: -300px}
+ 20% {bottom: 0}
+ 50% {bottom: 0}
+ 100% {bottom: -300px}
+ }
+ @keyframes animatebottom {
+ 0% {bottom: -300px}
+ 20% {bottom: 0}
+ 50% {bottom: 0}
+ 100% {bottom: -300px}
+ }
+`
+
+module.exports = css
diff --git a/src/app/ui/tooltip.js b/src/app/ui/tooltip.js
index 402b90450c..9e5d99922d 100644
--- a/src/app/ui/tooltip.js
+++ b/src/app/ui/tooltip.js
@@ -1,42 +1,5 @@
var yo = require('yo-yo')
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
- .tooltip {
- z-index: 1001;
- display: inline-block;
- position: fixed;
- background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor};
- color: ${styles.remix.tooltip_CopyToClipboard_Color};
- min-height: 50px;
- min-width: 290px;
- padding: 16px 24px 12px;
- border-radius: 3px;
- bottom: -300;
- left: 40%;
- font-size: 12px;
- text-align: center;
- -webkit-animation-name: animatebottom;
- -webkit-animation-duration: 6s;
- animation-name: animatebottom;
- animation-duration: 6s
- }
- @-webkit-keyframes animatebottom {
- 0% {bottom: -300px}
- 20% {bottom: 0}
- 50% {bottom: 0}
- 100% {bottom: -300px}
- }
- @keyframes animatebottom {
- 0% {bottom: -300px}
- 20% {bottom: 0}
- 50% {bottom: 0}
- 100% {bottom: -300px}
- }
-`
+var css = require('./styles/tooltip-styles')
module.exports = function addTooltip (tooltipText) {
var tooltip = yo`${tooltipText}
`