Skip to content

B
baas-ide
Unverified Commit 9ba7e5c0 authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #1050 from ethereum/refactor/move_styles

separate styles
parents 4bf5f682 9d5b1a8f
Hide whitespace changes
Inline Side-by-side
Showing with 392 additions and 357 deletions
src/app/editor/contextView.js
View file @ 9ba7e5c0
'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:
......
src/app/editor/styles/contextView-styles.js 0 → 100644
View file @ 9ba7e5c0
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
src/app/files/file-explorer.js
View file @ 9ba7e5c0
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
src/app/files/styles/file-explorer-styles.js 0 → 100644
View file @ 9ba7e5c0
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
src/app/staticanalysis/staticAnalysisView.js
View file @ 9ba7e5c0
......@@ -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()
......
src/app/staticanalysis/styles/staticAnalysisView-styles.js 0 → 100644
View file @ 9ba7e5c0
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
src/app/ui/dropdown.js
View file @ 9ba7e5c0
......@@ -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({
......
src/app/ui/modal-dialog-custom.js
View file @ 9ba7e5c0
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`<div>${text}</div>`, null, { label: null })
......
src/app/ui/modaldialog.js
View file @ 9ba7e5c0
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}`)
......
src/app/ui/renderer.js
View file @ 9ba7e5c0
......@@ -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`<style>
.sol.success,
.sol.error,
.sol.warning {
word-wrap: break-word;
cursor: pointer;
position: relative;
margin: 0.5em 0 1em 0;
border-radius: 5px;
line-height: 20px;
padding: 8px 15px;
}
.sol.success pre,
.sol.error pre,
.sol.warning pre {
overflow-y: hidden;
background-color: transparent;
margin: 0;
font-size: 12px;
border: 0 none;
padding: 0;
border-radius: 0;
}
.sol.success .close,
.sol.error .close,
.sol.warning .close {
font-weight: bold;
position: absolute;
color: hsl(0, 0%, 0%); /* black in style-guide.js */
top: 0;
right: 0;
padding: 0.5em;
}
.sol.error {
background-color: ${styles.rightPanel.message_Error_BackgroundColor};
border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
color: ${styles.rightPanel.message_Error_Color};
}
.sol.warning {
background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
color: ${styles.rightPanel.message_Warning_Color};
}
.sol.success {
background-color: ${styles.rightPanel.message_Success_BackgroundColor};
border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
color: ${styles.rightPanel.message_Success_Color};
}</style>`
var css = require('./styles/renderer-styles')
/**
* After refactor, the renderer is only used to render error/warning
......
src/app/ui/styles/dropdown-styles.js 0 → 100644
View file @ 9ba7e5c0
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
src/app/ui/styles/modal-dialog-custom-styles.js 0 → 100644
View file @ 9ba7e5c0
var csjs = require('csjs-inject')
var css = csjs`
.prompt_text {
width: 300px;
}
`
module.exports = css
src/app/ui/styles/modaldialog-styles.js 0 → 100644
View file @ 9ba7e5c0
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
src/app/ui/styles/renderer-styles.js 0 → 100644
View file @ 9ba7e5c0
var yo = require('yo-yo')
var styleGuide = require('remix-lib').ui.themeChooser
var styles = styleGuide.chooser()
var css = yo`<style>
.sol.success,
.sol.error,
.sol.warning {
word-wrap: break-word;
cursor: pointer;
position: relative;
margin: 0.5em 0 1em 0;
border-radius: 5px;
line-height: 20px;
padding: 8px 15px;
}
.sol.success pre,
.sol.error pre,
.sol.warning pre {
overflow-y: hidden;
background-color: transparent;
margin: 0;
font-size: 12px;
border: 0 none;
padding: 0;
border-radius: 0;
}
.sol.success .close,
.sol.error .close,
.sol.warning .close {
font-weight: bold;
position: absolute;
color: hsl(0, 0%, 0%); /* black in style-guide.js */
top: 0;
right: 0;
padding: 0.5em;
}
.sol.error {
background-color: ${styles.rightPanel.message_Error_BackgroundColor};
border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
color: ${styles.rightPanel.message_Error_Color};
}
.sol.warning {
background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
color: ${styles.rightPanel.message_Warning_Color};
}
.sol.success {
background-color: ${styles.rightPanel.message_Success_BackgroundColor};
border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
color: ${styles.rightPanel.message_Success_Color};
}</style>`
module.exports = css
src/app/ui/styles/tooltip-styles.js 0 → 100644
View file @ 9ba7e5c0
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
src/app/ui/tooltip.js
View file @ 9ba7e5c0
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`<div class=${css.tooltip}>${tooltipText}</div>`
......
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