Commit 18d2183f authored by yann300's avatar yann300

remove most of the old style guide reference and replace by bootstrap

parent fd2fbce7
var yo = require('yo-yo')
var csjs = require('csjs-inject')
// const remixLib = require('remix-lib')
// const styleguide = require('../ui/styles-guide/theme-chooser')
// const styles = styleguide.chooser()
class SwapPanelComponent {
constructor (name, appStore, appManager, opt) {
......
......@@ -38,14 +38,14 @@ document.head.appendChild(yo`
position:absolute;
z-index:20;
background-color: var(--secondary);
opacity: 0.7
opacity: 0.6
}
.highlightreferenceline {
position:absolute;
z-index:20;
background-color: var(--secondary);
opacity: 0.7
opacity: 0.6
}
.highlightcode {
......
'use strict'
const csjs = require('csjs-inject')
const globlalRegistry = require('../../global/registry')
const styleGuide = require('../ui/styles-guide/theme-chooser')
const styles = styleGuide.chooser()
class SourceHighlighter {
constructor (localRegistry) {
......@@ -48,12 +46,12 @@ class SourceHighlighter {
.highlightcode {
position:absolute;
z-index:20;
background-color: ${style || styles.editor.backgroundColor_DebuggerMode};
background-color: ${style || 'var(--text-info)'};
}
.highlightcode_fullLine {
position:absolute;
z-index:20;
background-color: ${style || styles.editor.backgroundColor_DebuggerMode};
background-color: ${style || 'var(--text-info)'};
opacity: 0.5;
}
`
......
var csjs = require('csjs-inject')
var styleGuide = require('../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.contextview {
......@@ -16,7 +14,6 @@ var css = csjs`
text-overflow : ellipsis;
overflow : hidden;
white-space : nowrap;
color : ${styles.editor.text_Primary};
font-size : 11px;
}
.type {
......@@ -29,10 +26,9 @@ var css = csjs`
.jump {
cursor : pointer;
margin : 0 5px;
color : ${styles.editor.icon_Color_Editor};
}
.jump:hover {
color : ${styles.editor.icon_HoverColor_Editor};
color : var(--secondary);
}
.referencesnb {
float : right;
......
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var styleGuide = require('../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.txInfoBox {
${styles.rightPanel.compileTab.box_CompileContainer}; // add askToConfirmTXContainer to Remix and then replace this styling
}
.wrapword {
white-space: pre-wrap; /* Since CSS 2.1 */
......
......@@ -5,8 +5,6 @@ var copyToClipboard = require('../ui/copy-to-clipboard')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
var styleGuide = require('../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var EventManager = require('../../lib/events')
var helper = require('../../lib/helper')
......@@ -26,14 +24,14 @@ var css = csjs`
opacity: 0.8;
}
.arrow {
color: ${styles.terminal.icon_Color_Menu};
color: var(--primary);
font-size: 20px;
cursor: pointer;
display: flex;
margin-left: 10px;
}
.arrow:hover {
color: ${styles.terminal.icon_HoverColor_Menu};
color: var(--secondary);
}
.txLog {
}
......@@ -44,28 +42,27 @@ var css = csjs`
float: left;
}
.succeeded {
color: ${styles.terminal.icon_Color_Log_Succeed};
color: var(--success);
}
.failed {
color: ${styles.terminal.icon_Color_Log_Failed};
color: var(--danger);
}
.notavailable {
}
.call {
font-size: 7px;
background-color: ${styles.terminal.icon_BackgroundColor_Log_Call};
border-radius: 50%;
min-width: 20px;
min-height: 20px;
display: flex;
justify-content: center;
align-items: center;
color: ${styles.terminal.icon_Color_Log_Call};
color: var(--primary);
text-transform: uppercase;
font-weight: bold;
}
.txItem {
color: ${styles.terminal.text_Primary};
color: var(--primary);
margin-right: 5px;
float: left;
}
......@@ -73,7 +70,7 @@ var css = csjs`
font-weight: bold;
}
.tx {
color: ${styles.terminal.text_Title_TransactionLog};
color: var(--primary);
font-weight: bold;
float: left;
margin-right: 10px;
......@@ -83,8 +80,8 @@ var css = csjs`
.td {
border-collapse: collapse;
font-size: 10px;
color: ${styles.terminal.text_Primary};
border: 1px solid ${styles.terminal.text_Secondary};
color: var(--primary);
border: 1px solid var(--secondary);
}
#txTable {
margin-top: 1%;
......@@ -110,7 +107,6 @@ var css = csjs`
margin-left: auto;
}
.debug {
${styles.terminal.button_Log_Debug}
width: 55px;
min-width: 55px;
min-height: 20px;
......@@ -240,7 +236,7 @@ function renderKnownTransaction (self, data) {
${checkTxStatus(data.receipt, txType)}
${context(self, {from, to, data})}
<div class=${css.buttons}>
<div class=${css.debug} onclick=${(e) => debug(e, data, self)}>Debug</div>
<button class="${css.debug} btn" onclick=${(e) => debug(e, data, self)}>Debug</div>
</div>
<i class="${css.arrow} fa fa-angle-down"></i>
</div>
......
......@@ -115,21 +115,17 @@ function filepanel (localRegistry) {
fileExplorer.ensureRoot()
configExplorer.ensureRoot()
self._deps.fileProviders['localhost'].event.register('connecting', (event) => {
tooltip('Connecting to localhost. ' + JSON.stringify(event))
})
self._deps.fileProviders['localhost'].event.register('connected', (event) => {
tooltip('Connected to localhost. ' + JSON.stringify(event))
fileSystemExplorer.show()
})
self._deps.fileProviders['localhost'].event.register('errored', (event) => {
tooltip('localhost connection errored. ' + JSON.stringify(event))
fileSystemExplorer.hide()
})
self._deps.fileProviders['localhost'].event.register('closed', (event) => {
tooltip('localhost connection closed. ' + JSON.stringify(event))
fileSystemExplorer.hide()
})
......
......@@ -6,7 +6,6 @@ var globalRegistry = require('../../global/registry')
var tooltip = require('../ui/tooltip')
var copyToClipboard = require('../ui/copy-to-clipboard')
var styleGuide = require('../ui/styles-guide/theme-chooser')
// var styles = styleGuide.chooser()
var Storage = remixLib.Storage
var EventManager = require('../../lib/events')
......
const csjs = require('csjs-inject')
// const styleGuide = require('../../ui/styles-guide/theme-chooser')
// const styles = styleGuide.chooser()
const css = csjs`
.compilerArticle {
......
var csjs = require('csjs-inject')
var styleGuide = require('../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.settingsTabView {
......@@ -8,7 +6,6 @@ var css = csjs`
display: flex;
}
.info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
margin-bottom: 1em;
word-break: break-word;
}
......@@ -41,7 +38,6 @@ var css = csjs`
.select {
font-weight: bold;
margin-top: 1em;
${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
}
.heading {
margin-bottom: 0;
......@@ -64,7 +60,7 @@ var css = csjs`
vertical-align: top;
}
i.warnIt {
color: ${styles.appProperties.warningText_Color};
color: var(--warning);
}
.icon {
margin-right: .5em;
......
const csjs = require('csjs-inject')
const styles = require('../../ui/styles-guide/theme-chooser').chooser()
const css = csjs`
.supportTabView {
......@@ -12,7 +11,6 @@ const css = csjs`
overflow-y: auto;
}
.chat {
${styles.rightPanel.supportTab.box_IframeContainer}
display: flex;
flex-direction: column;
align-items: center;
......@@ -49,7 +47,6 @@ const css = csjs`
border: none;
}
.infoBox {
${styles.rightPanel.supportTab.box_SupportInfo}
}
.remixdinstallation {
padding: 3px;
......@@ -57,7 +54,6 @@ const css = csjs`
margin-left: 5px;
}
.info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo};
margin-top: 1em;
word-break: break-word;
}
......
const csjs = require('csjs-inject')
const styles = require('../../ui/styles-guide/theme-chooser').chooser()
const css = csjs`
.menu {
display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
list-style: none;
margin: 0;
padding: 0;
}
.active {
background-color: ${styles.rightPanel.backgroundColor_Tab};
color: ${styles.appProperties.mainText_Color}
}
.options {
float: left;
......@@ -23,7 +19,6 @@ const css = csjs`
text-align: center;
}
.optionViews {
background-color: ${styles.rightPanel.backgroundColor_Tab};
overflow: scroll;
height: 100%;
}
......@@ -32,7 +27,6 @@ const css = csjs`
}
.optionViews .pre {
word-wrap: break-word;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
......
var yo = require('yo-yo')
// -------------- copyToClipboard ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.container
{
display: none;
position: fixed;
border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
border: 1px solid var(--primary);
width:150px;
background: ${styles.appProperties.solidBorderBox_BackgroundColor};
border-radius: 2px;
z-index: 1000;
}
......@@ -31,12 +28,12 @@ var css = csjs`
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
color: ${styles.appProperties.solidBorderBox_TextColor};
color: var(--primary);
}
#menuitems :hover
{
background: ${styles.appProperties.highlight_BackgroundColor};
background: $var(--seconday);
border-radius: 2px;
}
`
......
......@@ -4,8 +4,6 @@ const copy = require('clipboard-copy')
var addTooltip = require('./tooltip')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.copyIcon {
......@@ -16,9 +14,6 @@ var css = csjs`
module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-clipboard') {
var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} fa ${icon}" aria-hidden="true"></i>`
copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard
copyIcon.onmouseenter = function (event) { copyIcon.style.color = styles.remix.icon_HoverColor_CopyToClipboard }
copyIcon.onmouseleave = function (event) { copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard }
copyIcon.onclick = (event) => {
event.stopPropagation()
var copiableContent
......
'use strict'
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var styleGuide = require('./styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.containerDraggableModal {
position: absolute;
z-index: 1000;
background-color: ${styles.appProperties.light_BackgroundColor};
text-align: center;
width: 500px;
height: 500px;
border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
overflow-y: hidden;
}
.headerDraggableModal {
cursor: move;
z-index: 10;
color: ${styles.appProperties.mainText_Color};
background-color: ${styles.appProperties.primary_BackgroundColor};
border-bottom: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
text-overflow: ellipsis;
overflow-x: hidden;
}
.modalActions {
float: right;
color: ${styles.appProperties.solidBorderBox_BorderColor};
}
.modalAction {
padding-right: 1px;
padding-left: 1px;
cursor: pointer;
color: ${styles.appProperties.solidBorderBox_BorderColor};
}
`
......
......@@ -82,7 +82,7 @@ module.exports = (title, content, ok, cancel, focusSelector) => {
function html () {
return yo`<div id="modal-dialog" class="${css.modal}">
<div id="modal-background" class="${css['modalBackground']}"> </div>
<div class="${css['modalContent']}">
<div class="${css['modalContent']} bg-warning text-info">
<div class="${css['modalHeader']}">
<h2></h2>
<i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i>
......
var csjs = require('csjs-inject')
var styleGuide = require('../styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.popup {
......@@ -40,11 +38,9 @@ var css = csjs`
margin-left : 20%;
margin-bottom : 32px;
bottom : 0px;
background-color : ${styles.colors.black};
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: animatebottom;
......
var csjs = require('csjs-inject')
var styleGuide = require('../styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.dropdown {
${styles.terminal.dropdown_Filter_MenuBar}
overflow : visible;
position : relative;
display : flex;
......@@ -38,8 +35,7 @@ var css = csjs`
top : 24px;
left : 0;
width : 250px;
background-color : ${styles.appProperties.dropdown_BackgroundColor};
border : 1px solid ${styles.appProperties.dropdown_BorderColor};
border : 1px solid var(--primary);
border-radius : 3px;
border-top : 0;
}
......
var csjs = require('csjs-inject')
var styleGuide = require('../styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.modal {
......@@ -12,47 +10,37 @@ var css = csjs`
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 */
word-wrap: break-word;
}
.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 em {
color: var(--text-info)
}
.modalBody a{
color: ${styles.remix.modalDialog_text_Link};
.modalBody a {
color: color: var(--text-info)
}
.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};
font-size: 14px;
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;
......@@ -62,16 +50,13 @@ var css = csjs`
}
.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;
}
.modalBackground {
......
var csjs = require('csjs-inject')
var styleGuide = require('../styles-guide/theme-chooser')
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};
color: var(--primary)
min-height: 50px;
min-width: 290px;
padding: 16px 24px 12px;
......
......@@ -2,7 +2,7 @@ var yo = require('yo-yo')
var css = require('./styles/tooltip-styles')
module.exports = function addTooltip (tooltipText) {
var tooltip = yo`<div class=${css.tooltip}>${tooltipText}</div>`
var tooltip = yo`<div class="${css.tooltip} bg-primary">${tooltipText}</div>`
document.body.appendChild(tooltip)
setTimeout(function () {
document.body.removeChild(tooltip)
......
const yo = require('yo-yo')
const csjs = require('csjs-inject')
const styleGuide = require('../app/ui/styles-guide/theme-chooser')
const styles = styleGuide.chooser()
const css = csjs`
.dragbar {
......@@ -12,11 +10,11 @@ const css = csjs`
bottom : 0;
cursor : col-resize;
z-index : 999;
border-right : ${styles.leftPanel.dragbarBorderRight};
border-right : var(--primary);
}
.ghostbar {
width : 3px;
background-color : ${styles.colors.lightBlue};
background-color : var(--primary);
opacity : 0.5;
position : absolute;
cursor : col-resize;
......
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