Skip to content

B
baas-ide
Commit cb180acf authored by ioedeveloper's avatar ioedeveloper
Browse files
Options

Settings tab checkbox and github token ui changes

parent 83251c82
Hide whitespace changes
Inline Side-by-side
Showing with 31 additions and 33 deletions
apps/remix-ide/src/app/components/side-panel.js
View file @ cb180acf
......@@ -26,6 +26,7 @@ const css = csjs`
display: flex;
align-items: center;
padding: 16px 24px 15px;
justify-content: space-between;
}
.icons i {
height: 80%;
......
apps/remix-ide/src/app/tabs/settings-tab.js
View file @ cb180acf
......@@ -69,19 +69,19 @@ module.exports = class SettingsTab extends ViewPlugin {
// Gist settings
const token = this.config.get('settings/gist-access-token')
const gistAccessToken = yo`<input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" class="form-control border form-control-sm mb-2 ${css.inline}" placeholder="Token">`
const gistAccessToken = yo`<input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" class="form-control">`
if (token) gistAccessToken.value = token
const removeToken = () => { self.config.set('settings/gist-access-token', ''); gistAccessToken.value = ''; tooltip('Access token removed') }
const saveToken = () => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }
const gistAddToken = yo`<input class="btn btn-sm btn-primary" id="savegisttoken" data-id="settingsTabSaveGistToken" onclick=${() => saveToken()} value="Save" type="button">`
const gistRemoveToken = yo`<i class="mx-1 fas fa-trash-alt" id="removegisttoken" data-id="settingsTabRemoveGistToken" title="Delete Github access token" onclick=${() => removeToken()}" type="button"></i>`
this._view.gistToken = yo`<div class="text-secondary mb-0 h6">${gistAccessToken}${gistAddToken}${copyToClipboard(() => gistAccessToken.value)}${gistRemoveToken}</div>`
this._view.optionVM = yo`<input onchange=${onchangeOption} class="align-middle form-check-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox">`
const gistRemoveToken = yo`<button class="btn btn-secondary" id="removegisttoken" data-id="settingsTabRemoveGistToken" title="Delete Github access token" onclick=${() => removeToken()}>Remove</button>`
this._view.gistToken = yo`<div class="text-secondary mb-0 h6">${gistAccessToken}<div class="d-flex justify-content-end">${copyToClipboard(() => gistAccessToken.value)}${gistAddToken}${gistRemoveToken}</div></div>`
this._view.optionVM = yo`<input onchange=${onchangeOption} class="custom-control-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox">`
if (this.config.get('settings/always-use-vm') === undefined) this.config.set('settings/always-use-vm', true)
if (this.config.get('settings/always-use-vm')) this._view.optionVM.setAttribute('checked', '')
this._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox" class="align-middle form-check-input">`
this._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox" class="custom-control-input">`
if (this.config.get('settings/personal-mode')) this._view.personal.setAttribute('checked', '')
this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" class="form-check-input">`
this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" class="custom-control-input">`
if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '')
......@@ -89,14 +89,6 @@ module.exports = class SettingsTab extends ViewPlugin {
this._view.themes = this._deps.themeModule.getThemes()
this._view.themesCheckBoxes = this.createThemeCheckies()
this._view.config.homePage = yo`
<div class="${css.info} card">
<div class="card-body">
<h6 class="${css.title} card-title">Have a question?</h6>
<button class="btn btn-primary sm-1" data-id="settingsTabGitterChannelButton" onclick="${() => { window.open('https://gitter.im/ethereum/remix') }}">Gitter Channel</button>
</div>
</div>`
const 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.
......@@ -105,48 +97,47 @@ module.exports = class SettingsTab extends ViewPlugin {
this._view.warnPersonalMode = yo`<i class="${css.icon} fas fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
this._view.config.general = yo`
<div class="${css.info} card">
<div class="${css.info} border-top">
<div class="card-body">
<h6 class="${css.title} card-title">General settings</h6>
<div class="form-check ${css.frow}">
<div>${this._view.generateContractMetadata}</div>
<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 class="mt-2 custom-control custom-checkbox ${css.frow}">
${this._view.generateContractMetadata}
<label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" 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 class="form-check ${css.frow}">
<div>${this._view.optionVM}</div>
<label class="form-check-label align-middle" for="alwaysUseVM">Always use Ethereum VM at Load</label>
<div class="fmt-2 custom-control custom-checkbox ${css.frow}">
${this._view.optionVM}
<label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" for="alwaysUseVM">Always use Ethereum VM at Load</label>
</div>
<div class="form-check ${css.frow}">
<div><input id="editorWrap" class="form-check-input align-middle" type="checkbox" onchange=${function () { this.editor.resize(this.checked) }}></div>
<label class="form-check-label align-middle" for="editorWrap">Text Wrap</label>
<div class="mt-2 custom-control custom-checkbox ${css.frow}">
<input id="editorWrap" class="custom-control-input" type="checkbox" onchange=${function () { this.editor.resize(this.checked) }}>
<label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" for="editorWrap">Text Wrap</label>
</div>
<div class="form-check ${css.frow}">
<div>${this._view.personal}></div>
<label class="form-check-label align-middle" for="personal"> ${this._view.warnPersonalMode} Enable Personal Mode for web3 provider. ${warnText}></label>
<div class="custom-control custom-checkbox ${css.frow}">
${this._view.personal}>
<label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" for="personal"> ${this._view.warnPersonalMode} Enable Personal Mode for web3 provider. ${warnText}></label>
</div>
</div>
</div>
`
this._view.gistToken = yo`
<div class="${css.info} card">
<div class="${css.info} border-top">
<div class="card-body">
<h6 class="${css.title} card-title">Github Access Token</h6>
<p class="">Manage the access token used to publish to Gist and retrieve Github contents.</p>
<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>
<p class="${css.crowNoFlex}"><a target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></p>
<div class="${css.crowNoFlex}">${this._view.gistToken}</div>
<p class="${css.crowNoFlex}"><a class="text-primary ${css.text}" target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></p>
<div class="${css.crowNoFlex}"><label>TOKEN:</label>${this._view.gistToken}</div>
</div>
</div>`
this._view.config.themes = yo`
<div class="${css.info} card">
<div class="${css.info} border-top">
<div class="card-body">
<h6 class="${css.title} card-title">Themes</h6>
${this._view.themesCheckBoxes}
</div>
</div>`
this._view.el = yo`
<div class="${css.settingsTabView}" id="settingsView" data-id="settingsTabSettingsView">
${this._view.config.homePage}
<div id="settingsView" data-id="settingsTabSettingsView">
${this._view.config.general}
${this._view.gistToken}
${this._view.config.themes}
......
apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js
View file @ cb180acf
......@@ -70,6 +70,12 @@ const css = csjs`
display: inline;
width: 32%;
}
.customCheckBox::before, .customCheckBox::after {
top: .7em
}
.text {
text-decoration: none;
}
`
module.exports = css
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