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

Settings tab checkbox and github token ui changes

Browse Source
pull/5370/head
ioedeveloper 4 years ago
parent c24860b190
commit 4f6b57735c
3 changed files with 31 additions and 33 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. 1
      apps/remix-ide/src/app/components/side-panel.js
  2. 57
      apps/remix-ide/src/app/tabs/settings-tab.js
  3. 6
      apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js

1
apps/remix-ide/src/app/components/side-panel.js
Unescape View File

@ -26,6 +26,7 @@ const css = csjs`
display: flex; display: flex;
align-items: center; align-items: center;
padding: 16px 24px 15px; padding: 16px 24px 15px;
justify-content: space-between;
} }
.icons i { .icons i {
height: 80%; height: 80%;

57
apps/remix-ide/src/app/tabs/settings-tab.js
Unescape View File

@ -69,19 +69,19 @@ module.exports = class SettingsTab extends ViewPlugin {
// Gist settings // Gist settings
const token = this.config.get('settings/gist-access-token') 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 if (token) gistAccessToken.value = token
const removeToken = () => { self.config.set('settings/gist-access-token', ''); gistAccessToken.value = ''; tooltip('Access token removed') } 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 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 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>` 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}${gistAddToken}${copyToClipboard(() => gistAccessToken.value)}${gistRemoveToken}</div>` 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="align-middle form-check-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox">` 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') === undefined) this.config.set('settings/always-use-vm', true)
if (this.config.get('settings/always-use-vm')) this._view.optionVM.setAttribute('checked', '') 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', '') 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', '') 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.themes = this._deps.themeModule.getThemes()
this._view.themesCheckBoxes = this.createThemeCheckies() 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. 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. 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.warnPersonalMode = yo`<i class="${css.icon} fas fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
this._view.config.general = yo` this._view.config.general = yo`
<div class="${css.info} card"> <div class="${css.info} border-top">
<div class="card-body"> <div class="card-body">
<h6 class="${css.title} card-title">General settings</h6> <h6 class="${css.title} card-title">General settings</h6>
<div class="form-check ${css.frow}"> <div class="mt-2 custom-control custom-checkbox ${css.frow}">
<div>${this._view.generateContractMetadata}</div> ${this._view.generateContractMetadata}
<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> <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>
<div class="form-check ${css.frow}"> <div class="fmt-2 custom-control custom-checkbox ${css.frow}">
<div>${this._view.optionVM}</div> ${this._view.optionVM}
<label class="form-check-label align-middle" for="alwaysUseVM">Always use Ethereum VM at Load</label> <label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" for="alwaysUseVM">Always use Ethereum VM at Load</label>
</div> </div>
<div class="form-check ${css.frow}"> <div class="mt-2 custom-control custom-checkbox ${css.frow}">
<div><input id="editorWrap" class="form-check-input align-middle" type="checkbox" onchange=${function () { this.editor.resize(this.checked) }}></div> <input id="editorWrap" class="custom-control-input" type="checkbox" onchange=${function () { this.editor.resize(this.checked) }}>
<label class="form-check-label align-middle" for="editorWrap">Text Wrap</label> <label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" for="editorWrap">Text Wrap</label>
</div> </div>
<div class="form-check ${css.frow}"> <div class="custom-control custom-checkbox ${css.frow}">
<div>${this._view.personal}></div> ${this._view.personal}>
<label class="form-check-label align-middle" for="personal"> ${this._view.warnPersonalMode} Enable Personal Mode for web3 provider. ${warnText}></label> <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> </div>
</div> </div>
` `
this._view.gistToken = yo` this._view.gistToken = yo`
<div class="${css.info} card"> <div class="${css.info} border-top">
<div class="card-body"> <div class="card-body">
<h6 class="${css.title} card-title">Github Access Token</h6> <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="">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="">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> <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}">${this._view.gistToken}</div> <div class="${css.crowNoFlex}"><label>TOKEN:</label>${this._view.gistToken}</div>
</div> </div>
</div>` </div>`
this._view.config.themes = yo` this._view.config.themes = yo`
<div class="${css.info} card"> <div class="${css.info} border-top">
<div class="card-body"> <div class="card-body">
<h6 class="${css.title} card-title">Themes</h6> <h6 class="${css.title} card-title">Themes</h6>
${this._view.themesCheckBoxes} ${this._view.themesCheckBoxes}
</div> </div>
</div>` </div>`
this._view.el = yo` this._view.el = yo`
<div class="${css.settingsTabView}" id="settingsView" data-id="settingsTabSettingsView"> <div id="settingsView" data-id="settingsTabSettingsView">
${this._view.config.homePage}
${this._view.config.general} ${this._view.config.general}
${this._view.gistToken} ${this._view.gistToken}
${this._view.config.themes} ${this._view.config.themes}

6
apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js
Unescape View File

@ -70,6 +70,12 @@ const css = csjs`
display: inline; display: inline;
width: 32%; width: 32%;
} }
.customCheckBox::before, .customCheckBox::after {
top: .7em
}
.text {
text-decoration: none;
}
` `
module.exports = css module.exports = css

Write Preview
Loading…
Cancel
Save