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

settings tab & css changes to body in app.js

Browse Source
pull/3094/head
Rob Stupay 6 years ago committed by yann300
parent 7821c26948
commit 60979770a3
3 changed files with 73 additions and 85 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. 8
      src/app.js
  2. 148
      src/app/tabs/settings-tab.js
  3. 2
      src/app/ui/styles-guide/theme-chooser.js

8
src/app.js
Unescape View File

@ -65,12 +65,8 @@ var css = csjs`
html { box-sizing: border-box; } html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; } *, *:before, *:after { box-sizing: inherit; }
body { body {
font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; /* font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; */
margin : 0; font-size : .8rem;
padding : 0;
font-size : 12px;
color : ${styles.leftPanel.text_Primary};
font-weight : normal;
} }
pre { pre {
overflow-x: auto; overflow-x: auto;

148
src/app/tabs/settings-tab.js
Unescape View File

@ -6,7 +6,7 @@ var globalRegistry = require('../../global/registry')
var tooltip = require('../ui/tooltip') var tooltip = require('../ui/tooltip')
var copyToClipboard = require('../ui/copy-to-clipboard') var copyToClipboard = require('../ui/copy-to-clipboard')
var styleGuide = require('../ui/styles-guide/theme-chooser') var styleGuide = require('../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser() // var styles = styleGuide.chooser()
var Storage = remixLib.Storage var Storage = remixLib.Storage
var EventManager = require('../../lib/events') var EventManager = require('../../lib/events')
@ -52,79 +52,85 @@ module.exports = class SettingsTab {
if (self._view.el) return self._view.el if (self._view.el) return self._view.el
// Gist settings // Gist settings
var gistAccessToken = yo`<input id="gistaccesstoken" type="password">` var gistAccessToken = yo`<input id="gistaccesstoken" type="password" class="form-control mb-2 ${css.inline}" placeholder="Token">`
var token = self._deps.config.get('settings/gist-access-token') var token = self._deps.config.get('settings/gist-access-token')
if (token) gistAccessToken.value = token if (token) gistAccessToken.value = token
var gistAddToken = yo`<input class="${css.savegisttoken}" id="savegisttoken" onclick=${() => { self._deps.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">` var gistAddToken = yo`<input class="${css.savegisttoken} btn btn-sm btn-primary" id="savegisttoken" onclick=${() => { self._deps.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
var gistRemoveToken = yo`<input id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; self._deps.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">` var gistRemoveToken = yo`<input class="btn btn-sm btn-primary" id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; self._deps.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
self._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => self._deps.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>` self._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => self._deps.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>`
// //
self._view.optionVM = yo`<input onchange=${onchangeOption} id="alwaysUseVM" type="checkbox">` self._view.optionVM = yo`<input onchange=${onchangeOption} class="align-middle form-check-input" id="alwaysUseVM" type="checkbox">`
if (self._deps.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '') if (self._deps.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '')
self._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox">` self._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox" class="align-middle form-check-input">`
if (self._deps.config.get('settings/personal-mode')) self._view.personal.setAttribute('checked', '') if (self._deps.config.get('settings/personal-mode')) self._view.personal.setAttribute('checked', '')
var warnText = `Transaction sent over Web3 will use the web3.personal API - be sure the endpoint is opened before enabling it. var warnText = `Transaction sent over Web3 will use the web3.personal API - be sure the endpoint is opened before enabling it.
This mode allows to provide the passphrase in the Remix interface without having to unlock the account. This mode allows to provide the passphrase in the Remix interface without having to unlock the account.
Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...). Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...).
It is not recommended (and also most likely not relevant) to use this mode with an injected provider (Mist, Metamask, ...) or with JavaScript VM. It is not recommended (and also most likely not relevant) to use this mode with an injected provider (Mist, Metamask, ...) or with JavaScript VM.
Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ') Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ')
self._view.warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fa fa-exclamation-triangle" aria-hidden="true"></i>` self._view.warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
self._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" type="checkbox">` self._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" type="checkbox" class="form-check-input">`
if (self._deps.config.get('settings/generate-contract-metadata')) self._view.generateContractMetadata.setAttribute('checked', '') if (self._deps.config.get('settings/generate-contract-metadata')) self._view.generateContractMetadata.setAttribute('checked', '')
self._view.pluginInput = yo`<textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>` self._view.pluginInput = yo`<textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>`
self._view.theme.light = yo`<input onchange=${onswitch2lightTheme} class="${css.col1}" name="theme" id="themeLight" type="radio">` self._view.theme.light = yo`<input onchange=${onswitch2lightTheme} class="align-middle form-check-input" name="theme" id="themeLight" type="radio">`
self._view.theme.dark = yo`<input onchange=${onswitch2darkTheme} class="${css.col1}" name="theme" id="themeDark" type="radio">` self._view.theme.dark = yo`<input onchange=${onswitch2darkTheme} class="align-middle form-check-input" name="theme" id="themeDark" type="radio">`
self._view.theme.clean = yo`<input onchange=${onswitch2cleanTheme} class="${css.col1}" name="theme" id="themeClean" type="radio">` self._view.theme.clean = yo`<input onchange=${onswitch2cleanTheme} class="align-middle form-check-input" name="theme" id="themeClean" type="radio">`
self._view.theme[self.data.currentTheme].setAttribute('checked', 'checked') self._view.theme[self.data.currentTheme].setAttribute('checked', 'checked')
self._view.config.general = yo` self._view.config.general = yo`
<div class="${css.info}"> <div class="${css.info} card">
<div class=${css.title}>General settings</div> <div class="card-body">
<div class="${css.crow}"> <h6 class="${css.title} card-title">General settings</h6>
<div class="form-check ${css.frow}">
<div>${self._view.generateContractMetadata}</div> <div>${self._view.generateContractMetadata}</div>
<span class="${css.checkboxText}">Generate contract metadata. Generate a JSON file in the contract folder. Allows to specify library addresses the contract depends on. If nothing is specified, Remix deploys libraries automatically.</span> <label class="form-check-label align-middle" for="generatecontractmetadata">Generate contract metadata. Generate a JSON file in the contract folder. Allows to specify library addresses the contract depends on. If nothing is specified, Remix deploys libraries automatically.</label>
</div> </div>
<div class="${css.crow}"> <div class="form-check ${css.frow}">
<div>${self._view.optionVM}</div> <div>${self._view.optionVM}</div>
<span class="${css.checkboxText}">Always use Ethereum VM at Load</span> <label class="form-check-label align-middle" for="alwaysUseVM">Always use Ethereum VM at Load</label>
</div> </div>
<div class="${css.crow}"> <div class="form-check ${css.frow}">
<div><input id="editorWrap" type="checkbox" onchange=${function () { self._deps.editor.resize(this.checked) }}></div> <div><input id="editorWrap" class="form-check-input align-middle" type="checkbox" onchange=${function () { self._deps.editor.resize(this.checked) }}></div>
<span class="${css.checkboxText}">Text Wrap</span> <label class="form-check-label align-middle" for="editorWrap">Text Wrap</label>
</div> </div>
<div class="${css.crow}"> <div class="form-check ${css.frow}">
<div>${self._view.personal}></div> <div>${self._view.personal}></div>
<span class="${css.checkboxText}">Enable Personal Mode ${self._view.warnPersonalMode}></span> <label class="form-check-label align-middle" for="personal">Enable Personal Mode ${self._view.warnPersonalMode}></label>
</div> </div>
</div>
</div> </div>
` `
self._view.gistToken = yo` self._view.gistToken = yo`
<div class="${css.info}"> <div class="${css.info} card">
<div class=${css.title}>Gist Access Token</div> <div class="card-body">
<div class="${css.crowNoFlex}">Manage the access token used to publish to Gist and retrieve Github contents.</div> <h6 class="${css.title} card-title">Gist Access Token</h6>
<div class="${css.crowNoFlex}">Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only 'create gist' permission.</div> <p class="">Manage the access token used to publish to Gist and retrieve Github contents.</p>
<div class="${css.crowNoFlex}"><a target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></div> <p class="">Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only 'create gist' permission.</p>
<div class="${css.crowNoFlex}">${self._view.gistToken}</div> <p class="${css.crowNoFlex}"><a target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></p>
<div class="${css.crowNoFlex}">${self._view.gistToken}</div>
</div>
</div>` </div>`
self._view.config.themes = yo` self._view.config.themes = yo`
<div class="${css.info}"> <div class="${css.info} card">
<div class=${css.title}>Themes</div> <div class="card-body">
<div class=${css.attention}> <h6 class="${css.title} card-title">Themes</h6>
<i title="Select the theme" class="${css.icon} fa fa-exclamation-triangle" aria-hidden="true"></i> <div class="card-text">
<span>Selecting a theme will trigger a page reload</span> <div class="${css.frow} form-check ${css.crow}">
</div> ${self._view.theme.light}
<div class="${css.crow}"> <label class="form-check-label" for="themeLight">Light Theme</label>
${self._view.theme.light} </div>
<label for="themeLight">Light Theme</label> <div class="${css.frow} form-check ${css.crow}">
</div> ${self._view.theme.dark}
<div class="${css.crow}"> <label class="form-check-label" for="themeDark">Dark Theme</label>
${self._view.theme.dark} </div>
<label for="themeDark">Dark Theme</label> <div class="${css.frow} form-check ${css.crow}">
</div> ${self._view.theme.clean}
<div class="${css.crow}"> <label class="form-check-label" for="themeClean">Clean Theme</label>
${self._view.theme.clean} </div>
<label for="themeClean">Clean Theme</label> </div>
</div> </div>
</div>` </div>`
self._view.el = yo` self._view.el = yo`
@ -164,20 +170,26 @@ const css = csjs`
padding: 2%; padding: 2%;
} }
.info { .info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo}; margin-bottom: .6rem;
margin-bottom: 1em;
word-break: break-word; word-break: break-word;
font-size: .8rem;
}
.info h7 {
margin-bottom: .5rem;
} }
.title { .title {
font-size: 1.1em; // font-size: 1.1em;
font-weight: bold; // font-weight: bold;
margin-bottom: 1em; // margin-bottom: 1em;
}
.frow {
margin-bottom: .5rem;
} }
.crow { .crow {
display: flex; // display: flex;
overflow: auto; // overflow: auto;
clear: both; // clear: both;
padding: .2em; // padding: .2em;
} }
.checkboxText { .checkboxText {
font-weight: normal; font-weight: normal;
@ -212,27 +224,10 @@ const css = csjs`
.pluginTextArea { .pluginTextArea {
font-family: unset; font-family: unset;
} }
.pluginLoad {
vertical-align: top;
${styles.rightPanel.settingsTab.button_LoadPlugin};
width: inherit;
display: inline-block;
}
.initPlugin {
vertical-align: top;
${styles.rightPanel.settingsTab.button_initPlugin};
width: inherit;
display: block;
max-height: inherit;
padding:7px;
}
.removePlugin { .removePlugin {
cursor: pointer; cursor: pointer;
} }
i.warnIt {
color: ${styles.appProperties.warningText_Color};
}
.icon { .icon {
margin-right: .5em; margin-right: .5em;
} }
@ -250,16 +245,13 @@ const css = csjs`
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
} }
.pluginLoad {
vertical-align: top;
max-height: inherit;
margin: 2px;
}
.removePlugin{ .removePlugin{
padding-left: 7px; padding-left: 7px;
padding-right: 7px; padding-right: 7px;
border-left: 2px solid ${styles.appProperties.primary_BackgroundColor};
margin-left: 10px; margin-left: 10px;
} }
.inline {
display: inline;
width: 50%;
}
` `

2
src/app/ui/styles-guide/theme-chooser.js
Unescape View File

@ -8,7 +8,7 @@ var Storage = require('remix-lib').Storage
const themes = { const themes = {
dark: 'https://bootstrap.themes.guide/darkster/theme.min.css', dark: 'https://bootstrap.themes.guide/darkster/theme.min.css',
light: 'https://bootstrap.themes.guide/herbie/theme.min.css', light: 'https://bootstrap.themes.guide/herbie/theme.min.css',
clean: 'https://bootstrap.themes.guide/signal/theme.min.css' clean: 'https://bootstrap.themes.guide/fresca/theme.min.css'
} }
// Used for the scroll color // Used for the scroll color
const themeVariable = { const themeVariable = {

Write Preview
Loading…
Cancel
Save