From cb180acf0071a60d4ddbce2f41a47de48dfd8556 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 14 Aug 2020 18:27:51 +0100 Subject: [PATCH 01/18] Settings tab checkbox and github token ui changes --- .../src/app/components/side-panel.js | 1 + apps/remix-ide/src/app/tabs/settings-tab.js | 57 ++++++++----------- .../app/tabs/styles/settings-tab-styles.js | 6 ++ 3 files changed, 31 insertions(+), 33 deletions(-) diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index 411b40f416..b68f7430ad 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -26,6 +26,7 @@ const css = csjs` display: flex; align-items: center; padding: 16px 24px 15px; + justify-content: space-between; } .icons i { height: 80%; diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index 8b5ddf7863..dd3af33346 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -69,19 +69,19 @@ module.exports = class SettingsTab extends ViewPlugin { // Gist settings const token = this.config.get('settings/gist-access-token') - const gistAccessToken = yo`` + const gistAccessToken = yo`` 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` saveToken()} value="Save" type="button">` - const gistRemoveToken = yo` removeToken()}" type="button">` - this._view.gistToken = yo`
${gistAccessToken}${gistAddToken}${copyToClipboard(() => gistAccessToken.value)}${gistRemoveToken}
` - this._view.optionVM = yo`` + const gistRemoveToken = yo`` + this._view.gistToken = yo`
${gistAccessToken}
${copyToClipboard(() => gistAccessToken.value)}${gistAddToken}${gistRemoveToken}
` + this._view.optionVM = yo`` 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`` + this._view.personal = yo`` if (this.config.get('settings/personal-mode')) this._view.personal.setAttribute('checked', '') - this._view.generateContractMetadata = yo`` + this._view.generateContractMetadata = yo`` 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` - -
-
-
Have a question?
- -
-
` 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`` this._view.config.general = yo` -
+
General settings
-
-
${this._view.generateContractMetadata}
- +
+ ${this._view.generateContractMetadata} +
-
-
${this._view.optionVM}
- +
+ ${this._view.optionVM} +
-
-
- +
+ +
-
-
${this._view.personal}>
- +
+ ${this._view.personal}> +
` this._view.gistToken = yo` -
+
Github Access Token

Manage the access token used to publish to Gist and retrieve Github contents.

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.

-

https://github.com/settings/tokens

-
${this._view.gistToken}
+

https://github.com/settings/tokens

+
${this._view.gistToken}
` this._view.config.themes = yo` -
+
Themes
${this._view.themesCheckBoxes}
` this._view.el = yo` -
- ${this._view.config.homePage} +
${this._view.config.general} ${this._view.gistToken} ${this._view.config.themes} diff --git a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js index 3d80a30682..2ba10f7a29 100644 --- a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js +++ b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js @@ -70,6 +70,12 @@ const css = csjs` display: inline; width: 32%; } + .customCheckBox::before, .customCheckBox::after { + top: .7em + } + .text { + text-decoration: none; + } ` module.exports = css From db9f4fb9959009fb979bc8cf4586a3b020293d6e Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 18 Aug 2020 04:37:53 +0100 Subject: [PATCH 02/18] Added custom radio button for dark theme --- apps/remix-ide/src/app/tabs/settings-tab.js | 89 ++++++++++++++----- .../app/tabs/styles/settings-tab-styles.js | 7 +- apps/remix-ide/src/app/tabs/theme-module.js | 2 +- 3 files changed, 72 insertions(+), 26 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index dd3af33346..a3f5645bb0 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -34,12 +34,17 @@ module.exports = class SettingsTab extends ViewPlugin { this._view = { /* eslint-disable */ el: null, optionVM: null, + optionVMLabel: null, personal: null, + personalLabel: null, warnPersonalMode: null, generateContractMetadata: null, + generateContractMetadataLabel: null, config: { general: null, themes: null - } + }, + textWrap: null, + textWrapLabel: null } /* eslint-enable */ this.event = new EventManager() } @@ -53,8 +58,8 @@ module.exports = class SettingsTab extends ViewPlugin { return yo`
${themes.map((aTheme) => { let el = yo`
- { onswitchTheme(event, aTheme.name) }} class="align-middle form-check-input" name="theme" id="${aTheme.name}" data-id="settingsTabTheme${aTheme.name}" > - + { onswitchTheme(event, aTheme.name) }} class="align-middle form-check-input custom-control-input" name="theme" id="${aTheme.name}" data-id="settingsTabTheme${aTheme.name}" > +
` if (this._deps.themeModule.active === aTheme.name) el.querySelector('input').setAttribute('checked', 'checked') return el @@ -73,28 +78,48 @@ module.exports = class SettingsTab extends ViewPlugin { 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` saveToken()} value="Save" type="button">` - const gistRemoveToken = yo`` - this._view.gistToken = yo`
${gistAccessToken}
${copyToClipboard(() => gistAccessToken.value)}${gistAddToken}${gistRemoveToken}
` + const gistAddToken = yo` saveToken()} value="Save" type="button">` + const gistRemoveToken = yo`` + this._view.gistToken = yo`
${gistAccessToken}
${copyToClipboard(() => gistAccessToken.value)}${gistAddToken}${gistRemoveToken}
` this._view.optionVM = yo`` + this._view.optionVMLabel = yo`` 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`` - if (this.config.get('settings/personal-mode')) this._view.personal.setAttribute('checked', '') - this._view.generateContractMetadata = yo`` - - if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '') - - this._view.pluginInput = yo`` + if (this.config.get('settings/always-use-vm')) { + this._view.optionVM.setAttribute('checked', '') + this._view.optionVMLabel.classList.remove("text-dark") + } else this._view.optionVMLabel.classList.add("text-dark") - this._view.themes = this._deps.themeModule.getThemes() - this._view.themesCheckBoxes = this.createThemeCheckies() + this._view.textWrap = yo`` + this._view.textWrapLabel = yo`` + if (this.config.get('settings/text-wrap')) { + this._view.textWrap.setAttribute('checked', '') + this._view.textWrapLabel.classList.remove("text-dark") + } else this._view.textWrapLabel.classList.add("text-dark") 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. Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...). Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ') + + this._view.personal = yo`` this._view.warnPersonalMode = yo`` + this._view.personalLabel = yo`` + if (this.config.get('settings/personal-mode')) { + this._view.personal.setAttribute('checked', '') + this._view.personalLabel.classList.remove("text-dark") + } else this._view.personalLabel.classList.add("text-dark") + + this._view.generateContractMetadata = yo`` + this._view.generateContractMetadataLabel = yo`` + if (this.config.get('settings/generate-contract-metadata')) { + this._view.generateContractMetadata.setAttribute('checked', '') + this._view.generateContractMetadataLabel.classList.remove("text-dark") + } else this._view.generateContractMetadataLabel.classList.add("text-dark") + + this._view.pluginInput = yo`` + + this._view.themes = this._deps.themeModule.getThemes() + this._view.themesCheckBoxes = this.createThemeCheckies() this._view.config.general = yo`
@@ -102,19 +127,19 @@ module.exports = class SettingsTab extends ViewPlugin {
General settings
${this._view.generateContractMetadata} - + ${this._view.generateContractMetadataLabel}
${this._view.optionVM} - + ${this._view.optionVMLabel}
- - + ${this._view.textWrap} + ${this._view.textWrapLabel}
${this._view.personal}> - + ${this._view.personalLabel}
@@ -144,13 +169,29 @@ module.exports = class SettingsTab extends ViewPlugin {
` function onchangeGenerateContractMetadata (event) { - self.config.set('settings/generate-contract-metadata', !self.config.get('settings/generate-contract-metadata')) + const isChecked = self.config.get('settings/generate-contract-metadata') + + self.config.set('settings/generate-contract-metadata', !isChecked) + isChecked ? self._view.generateContractMetadataLabel.classList.add("text-dark") : self._view.generateContractMetadataLabel.classList.remove("text-dark") } function onchangeOption (event) { - self.config.set('settings/always-use-vm', !self.config.get('settings/always-use-vm')) + const isChecked = self.config.get('settings/always-use-vm') + + self.config.set('settings/always-use-vm', !isChecked) + isChecked ? self._view.optionVMLabel.classList.add("text-dark") : self._view.optionVMLabel.classList.remove("text-dark") + } + function textWrapEvent (event) { + const isChecked = self.config.get('settings/text-wrap') + + self.config.set('settings/text-wrap', !isChecked) + isChecked ? self._view.textWrapLabel.classList.add("text-dark") : self._view.textWrapLabel.classList.remove("text-dark") + self.editor.resize(!isChecked) } function onchangePersonal (event) { - self.config.set('settings/personal-mode', !self.config.get('settings/personal-mode')) + const isChecked = self.config.get('settings/personal-mode') + + self.config.set('settings/personal-mode', !isChecked) + isChecked ? self._view.personalLabel.classList.add("text-dark") : self._view.personalLabel.classList.remove("text-dark") } this._deps.themeModule.switchTheme() diff --git a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js index 2ba10f7a29..1c5ac85870 100644 --- a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js +++ b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js @@ -73,7 +73,12 @@ const css = csjs` .customCheckBox::before, .customCheckBox::after { top: .7em } - .text { + .customRadio::before, .customRadio::after { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + } + .text, .text:hover { text-decoration: none; } ` diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js index e6adedbc32..e7ba82541c 100644 --- a/apps/remix-ide/src/app/tabs/theme-module.js +++ b/apps/remix-ide/src/app/tabs/theme-module.js @@ -5,7 +5,7 @@ import * as packageJson from '../../../../../package.json' import yo from 'yo-yo' const themes = [ - {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1584965247/remix-dark_tmkdla.css'}, + {name: 'Dark', quality: 'dark', url: './assets/css/dark.css'}, {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/remix/raw/upload/v1594059208/remix-themes/remix-light_csxus2.css'}, {name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'}, From 25eab44ee1a550253ef64286510542d7ad033b70 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 18 Aug 2020 09:56:39 +0100 Subject: [PATCH 03/18] Reset radio style to bootstrap custom radio styling --- apps/remix-ide/src/app/tabs/settings-tab.js | 8 ++++---- apps/remix-ide/src/app/tabs/theme-module.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index a3f5645bb0..4790f30b1a 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -55,11 +55,11 @@ module.exports = class SettingsTab extends ViewPlugin { this._deps.themeModule.switchTheme(name) } if (themes) { - return yo`
+ return yo`
${themes.map((aTheme) => { - let el = yo`
- { onswitchTheme(event, aTheme.name) }} class="align-middle form-check-input custom-control-input" name="theme" id="${aTheme.name}" data-id="settingsTabTheme${aTheme.name}" > - + let el = yo`
+ { onswitchTheme(event, aTheme.name) }} class="align-middle custom-control-input" name="theme" id="${aTheme.name}" data-id="settingsTabTheme${aTheme.name}"> +
` if (this._deps.themeModule.active === aTheme.name) el.querySelector('input').setAttribute('checked', 'checked') return el diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js index e7ba82541c..e6adedbc32 100644 --- a/apps/remix-ide/src/app/tabs/theme-module.js +++ b/apps/remix-ide/src/app/tabs/theme-module.js @@ -5,7 +5,7 @@ import * as packageJson from '../../../../../package.json' import yo from 'yo-yo' const themes = [ - {name: 'Dark', quality: 'dark', url: './assets/css/dark.css'}, + {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1584965247/remix-dark_tmkdla.css'}, {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/remix/raw/upload/v1594059208/remix-themes/remix-light_csxus2.css'}, {name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'}, From fb534b774f09a458bbed8175132178a21d256ada Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 18 Aug 2020 11:31:07 +0100 Subject: [PATCH 04/18] Changed text color and refactored state changed logic. --- apps/remix-ide/src/app/tabs/settings-tab.js | 49 ++++++++++--------- .../app/tabs/styles/settings-tab-styles.js | 8 --- 2 files changed, 25 insertions(+), 32 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index 4790f30b1a..f460dcd977 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -82,19 +82,15 @@ module.exports = class SettingsTab extends ViewPlugin { const gistRemoveToken = yo`` this._view.gistToken = yo`
${gistAccessToken}
${copyToClipboard(() => gistAccessToken.value)}${gistAddToken}${gistRemoveToken}
` this._view.optionVM = yo`` - this._view.optionVMLabel = yo`` + this._view.optionVMLabel = yo`` 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.optionVMLabel.classList.remove("text-dark") - } else this._view.optionVMLabel.classList.add("text-dark") + if (this.config.get('settings/always-use-vm')) this._view.optionVM.setAttribute('checked', '') + elementStateChanged(self._view.optionVMLabel, !this.config.get('settings/always-use-vm')) this._view.textWrap = yo`` - this._view.textWrapLabel = yo`` - if (this.config.get('settings/text-wrap')) { - this._view.textWrap.setAttribute('checked', '') - this._view.textWrapLabel.classList.remove("text-dark") - } else this._view.textWrapLabel.classList.add("text-dark") + this._view.textWrapLabel = yo`` + if (this.config.get('settings/text-wrap')) this._view.textWrap.setAttribute('checked', '') + elementStateChanged(self._view.textWrapLabel, !this.config.get('settings/text-wrap')) 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. @@ -103,18 +99,14 @@ module.exports = class SettingsTab extends ViewPlugin { this._view.personal = yo`` this._view.warnPersonalMode = yo`` - this._view.personalLabel = yo`` - if (this.config.get('settings/personal-mode')) { - this._view.personal.setAttribute('checked', '') - this._view.personalLabel.classList.remove("text-dark") - } else this._view.personalLabel.classList.add("text-dark") + this._view.personalLabel = yo`` + if (this.config.get('settings/personal-mode')) this._view.personal.setAttribute('checked', '') + elementStateChanged(self._view.personalLabel, !this.config.get('settings/personal-mode')) this._view.generateContractMetadata = yo`` - this._view.generateContractMetadataLabel = yo`` - if (this.config.get('settings/generate-contract-metadata')) { - this._view.generateContractMetadata.setAttribute('checked', '') - this._view.generateContractMetadataLabel.classList.remove("text-dark") - } else this._view.generateContractMetadataLabel.classList.add("text-dark") + this._view.generateContractMetadataLabel = yo`` + if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '') + elementStateChanged(self._view.generateContractMetadataLabel, !this.config.get('settings/generate-contract-metadata')) this._view.pluginInput = yo`` @@ -172,26 +164,35 @@ module.exports = class SettingsTab extends ViewPlugin { const isChecked = self.config.get('settings/generate-contract-metadata') self.config.set('settings/generate-contract-metadata', !isChecked) - isChecked ? self._view.generateContractMetadataLabel.classList.add("text-dark") : self._view.generateContractMetadataLabel.classList.remove("text-dark") + elementStateChanged(self._view.generateContractMetadataLabel, isChecked) } function onchangeOption (event) { const isChecked = self.config.get('settings/always-use-vm') self.config.set('settings/always-use-vm', !isChecked) - isChecked ? self._view.optionVMLabel.classList.add("text-dark") : self._view.optionVMLabel.classList.remove("text-dark") + elementStateChanged(self._view.optionVMLabel, isChecked) } function textWrapEvent (event) { const isChecked = self.config.get('settings/text-wrap') self.config.set('settings/text-wrap', !isChecked) - isChecked ? self._view.textWrapLabel.classList.add("text-dark") : self._view.textWrapLabel.classList.remove("text-dark") + elementStateChanged(self._view.textWrapLabel, isChecked) self.editor.resize(!isChecked) } function onchangePersonal (event) { const isChecked = self.config.get('settings/personal-mode') self.config.set('settings/personal-mode', !isChecked) - isChecked ? self._view.personalLabel.classList.add("text-dark") : self._view.personalLabel.classList.remove("text-dark") + elementStateChanged(self._view.personalLabel, isChecked) + } + function elementStateChanged(el, isChanged){ + if (isChanged) { + el.classList.remove("text-dark") + el.classList.add("text-secondary") + } else { + el.classList.add("text-dark") + el.classList.remove("text-secondary") + } } this._deps.themeModule.switchTheme() diff --git a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js index 1c5ac85870..513acbea8b 100644 --- a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js +++ b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js @@ -70,14 +70,6 @@ const css = csjs` display: inline; width: 32%; } - .customCheckBox::before, .customCheckBox::after { - top: .7em - } - .customRadio::before, .customRadio::after { - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; - } .text, .text:hover { text-decoration: none; } From 4dfb59fbc31ca3d2d865c0899194a2122eaba759 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 18 Aug 2020 14:45:28 +0100 Subject: [PATCH 05/18] Added new themes and fixed failing flatly theme click in tests --- apps/remix-ide-e2e/src/helpers/init.ts | 2 +- apps/remix-ide/src/app/tabs/settings-tab.js | 4 ++-- apps/remix-ide/src/app/tabs/theme-module.js | 7 +++++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/apps/remix-ide-e2e/src/helpers/init.ts b/apps/remix-ide-e2e/src/helpers/init.ts index 7740db1f78..fdef47e8e7 100644 --- a/apps/remix-ide-e2e/src/helpers/init.ts +++ b/apps/remix-ide-e2e/src/helpers/init.ts @@ -31,6 +31,6 @@ function initModules (browser: NightwatchBrowser, callback: VoidFunction) { .clickLaunchIcon('settings') .setValue('[data-id="settingsTabGistAccessToken"]', process.env.gist_token) .click('[data-id="settingsTabSaveGistToken"]') - .click('[data-id="settingsTabThemeFlatly"]') // e2e tests were initially developed with Flatly. Some tests are failing with the default one (Dark), because the dark theme put uppercase everywhere. + .click('[data-id="settingsTabThemeLabelFlatly"]') // e2e tests were initially developed with Flatly. Some tests are failing with the default one (Dark), because the dark theme put uppercase everywhere. .perform(() => { callback() }) } diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index f460dcd977..e03899de41 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -55,11 +55,11 @@ module.exports = class SettingsTab extends ViewPlugin { this._deps.themeModule.switchTheme(name) } if (themes) { - return yo`
+ return yo`
${themes.map((aTheme) => { let el = yo`
{ onswitchTheme(event, aTheme.name) }} class="align-middle custom-control-input" name="theme" id="${aTheme.name}" data-id="settingsTabTheme${aTheme.name}"> - +
` if (this._deps.themeModule.active === aTheme.name) el.querySelector('input').setAttribute('checked', 'checked') return el diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js index e6adedbc32..0905c87c71 100644 --- a/apps/remix-ide/src/app/tabs/theme-module.js +++ b/apps/remix-ide/src/app/tabs/theme-module.js @@ -5,8 +5,11 @@ import * as packageJson from '../../../../../package.json' import yo from 'yo-yo' const themes = [ - {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1584965247/remix-dark_tmkdla.css'}, - {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/remix/raw/upload/v1594059208/remix-themes/remix-light_csxus2.css'}, + {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-dark_xbkjf1.css'}, + {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-light_nmjpo9.css'}, + {name: 'Midcentury', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-midcentury_mze7mq.css'}, + {name: 'BackToBlack', quality: 'dark', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-black_fftgak.css'}, + {name: 'Candy', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-candy_xlto9t.css'}, {name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'}, {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'}, From 8ad71667704bd212a6d84d401a0039dd4e6ac3d3 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 18 Aug 2020 15:15:39 +0100 Subject: [PATCH 06/18] Fixed failing editor tests --- apps/remix-ide-e2e/src/tests/editor.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/remix-ide-e2e/src/tests/editor.test.ts b/apps/remix-ide-e2e/src/tests/editor.test.ts index 90cb39e939..928ab7f4ce 100644 --- a/apps/remix-ide-e2e/src/tests/editor.test.ts +++ b/apps/remix-ide-e2e/src/tests/editor.test.ts @@ -64,8 +64,8 @@ module.exports = { 'Should load syntax highlighter for ace dark theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]') .click('*[data-id="verticalIconsKindsettings"]') - .waitForElementVisible('*[data-id="settingsTabThemeDark"]') - .click('*[data-id="settingsTabThemeDark"]') + .waitForElementVisible('*[data-id="settingsTabThemeLabelDark"]') + .click('*[data-id="settingsTabThemeLabelDark"]') .pause(2000) .waitForElementVisible('*[data-id="editorInput"]') /* @todo(#2863) ch for class and not colors From 780588d1021701d8f9aedb91fc4f356959860e25 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 18 Aug 2020 15:18:42 +0100 Subject: [PATCH 07/18] Fixed failing generalSettings tests --- .../src/tests/generalSettings.test.ts | 41 +++++++------------ 1 file changed, 15 insertions(+), 26 deletions(-) diff --git a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts index c60183a1c3..8dde4cfeaa 100644 --- a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts +++ b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts @@ -16,19 +16,8 @@ module.exports = { .waitForElementContainsText('h6[data-id="sidePanelSwapitTitle"]', 'SETTINGS') }, - 'Should open gitter channel in a new tab when `Gitter Channel Button` is clicked': function (browser: NightwatchBrowser) { - const runtimeBrowser = browser.options.desiredCapabilities.browserName - - browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]') - .waitForElementVisible('*[data-id="settingsTabGitterChannelButton"]', 5000) - .click('*[data-id="settingsTabGitterChannelButton"]') - .pause(2000) - .perform((done) => { if (runtimeBrowser === 'chrome') { browser.switchBrowserTab(1).assert.urlContains('https://gitter.im/ethereum/remix') } done() }) - }, - - 'Should activate `generate contract metadata`': function (browser: NightwatchBrowser) { - browser.switchBrowserTab(0) - .waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000) + 'Should activate `generate contract metadata`': function (browser) { + browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000) .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadata"]', 5000) .click('*[data-id="settingsTabGenerateContractMetadata"]') .click('*[data-id="verticalIconsFileExplorerIcons"]') @@ -67,7 +56,7 @@ module.exports = { 'Should load dark theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeDark"]') + .click('*[data-id="settingsTabThemeLabelDark"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.dark.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.dark.secondary) @@ -79,7 +68,7 @@ module.exports = { 'Should load light theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeLight"]') + .click('*[data-id="settingsTabThemeLabelLight"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.light.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.light.secondary) @@ -91,7 +80,7 @@ module.exports = { 'Should load Cerulean theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeCerulean"]') + .click('*[data-id="settingsTabThemeLabelCerulean"]') .pause(5000) .checkElementStyle(':root', '--primary', remixIdeThemes.curelean.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.curelean.secondary) @@ -103,7 +92,7 @@ module.exports = { 'Should load Flatly theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeFlatly"]') + .click('*[data-id="settingsTabThemeLabelFlatly"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.flatly.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.flatly.secondary) @@ -115,7 +104,7 @@ module.exports = { 'Should load Lumen theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeLumen"]') + .click('*[data-id="settingsTabThemeLabelLumen"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.lumen.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.lumen.secondary) @@ -127,7 +116,7 @@ module.exports = { 'Should load Minty theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeMinty"]') + .click('*[data-id="settingsTabThemeLabelMinty"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.minty.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.minty.secondary) @@ -139,7 +128,7 @@ module.exports = { 'Should load Pulse theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemePulse"]') + .click('*[data-id="settingsTabThemeLabelPulse"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.pulse.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.pulse.secondary) @@ -151,7 +140,7 @@ module.exports = { 'Should load Sandstone theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeSandstone"]') + .click('*[data-id="settingsTabThemeLabelSandstone"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.sandstone.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.sandstone.secondary) @@ -163,7 +152,7 @@ module.exports = { 'Should load Spacelab theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeSpacelab"]') + .click('*[data-id="settingsTabThemeLabelSpacelab"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.spacelab.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.spacelab.secondary) @@ -175,7 +164,7 @@ module.exports = { 'Should load Yeti theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeYeti"]') + .click('*[data-id="settingsTabThemeLabelYeti"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.yeti.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.yeti.secondary) @@ -187,7 +176,7 @@ module.exports = { 'Should load Cyborg theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeCyborg"]') + .click('*[data-id="settingsTabThemeLabelCyborg"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.cyborg.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.cyborg.secondary) @@ -199,7 +188,7 @@ module.exports = { 'Should load Darkly theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeDarkly"]') + .click('*[data-id="settingsTabThemeLabelDarkly"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.darkly.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.darkly.secondary) @@ -211,7 +200,7 @@ module.exports = { 'Should load Superhero theme': function (browser: NightwatchBrowser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeSuperhero"]') + .click('*[data-id="settingsTabThemeLabelSuperhero"]') .pause(2000) .checkElementStyle(':root', '--primary', remixIdeThemes.superhero.primary) .checkElementStyle(':root', '--secondary', remixIdeThemes.superhero.secondary) From c03312b096b298bf7f44b3fd7487186beacf2f53 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 18 Aug 2020 15:23:38 +0100 Subject: [PATCH 08/18] Fixed failing libraryDeployment tests --- apps/remix-ide-e2e/src/tests/generalSettings.test.ts | 4 ++-- apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts index 8dde4cfeaa..f0aead507c 100644 --- a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts +++ b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts @@ -18,8 +18,8 @@ module.exports = { 'Should activate `generate contract metadata`': function (browser) { browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000) - .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadata"]', 5000) - .click('*[data-id="settingsTabGenerateContractMetadata"]') + .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadataLabel"]', 5000) + .click('*[data-id="settingsTabGenerateContractMetadataLabel"]') .click('*[data-id="verticalIconsFileExplorerIcons"]') .openFile('browser/3_Ballot.sol') .click('*[data-id="verticalIconsKindsolidity"]') diff --git a/apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts b/apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts index 421b2c6ea8..711f87be3c 100644 --- a/apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts +++ b/apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts @@ -41,7 +41,7 @@ module.exports = { browser.click('*[data-id="deployAndRunClearInstances"]') .pause(5000) .clickLaunchIcon('settings') - .click('#generatecontractmetadata') + .click('*[data-id="settingsTabGenerateContractMetadataLabel"]') .clickLaunchIcon('solidity') .click('#compileTabView button[title="Compile"]') // that should generate the JSON artefact .verifyContracts(['test']) From 28e26d5799ab50e60c4013aec141cc3ce4960a0c Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 18 Aug 2020 15:35:33 +0100 Subject: [PATCH 09/18] Added data-attribute for metadata label --- apps/remix-ide/src/app/tabs/settings-tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index e03899de41..6ff3485a37 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -104,7 +104,7 @@ module.exports = class SettingsTab extends ViewPlugin { elementStateChanged(self._view.personalLabel, !this.config.get('settings/personal-mode')) this._view.generateContractMetadata = yo`` - this._view.generateContractMetadataLabel = yo`` + this._view.generateContractMetadataLabel = yo`` if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '') elementStateChanged(self._view.generateContractMetadataLabel, !this.config.get('settings/generate-contract-metadata')) From bac31ffed5acfcbe3cd05c9058a1dde36da7e488 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 20 Aug 2020 11:40:21 +0100 Subject: [PATCH 10/18] Align checkbox and label --- apps/remix-ide/src/app/panels/terminal.js | 4 ++-- apps/remix-ide/src/app/tabs/settings-tab.js | 10 +++++----- apps/remix-ide/src/app/tabs/theme-module.js | 7 ++----- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js index 95b5b0929b..0bce0577c3 100644 --- a/apps/remix-ide/src/app/panels/terminal.js +++ b/apps/remix-ide/src/app/panels/terminal.js @@ -171,9 +171,9 @@ class Terminal extends Plugin {
${self._view.pendingTxCount}
-
+
${themes.map((aTheme) => { - let el = yo`
+ let el = yo`
{ onswitchTheme(event, aTheme.name) }} class="align-middle custom-control-input" name="theme" id="${aTheme.name}" data-id="settingsTabTheme${aTheme.name}">
` @@ -117,19 +117,19 @@ module.exports = class SettingsTab extends ViewPlugin {
General settings
-
+
${this._view.generateContractMetadata} ${this._view.generateContractMetadataLabel}
-
+
${this._view.optionVM} ${this._view.optionVMLabel}
-
+
${this._view.textWrap} ${this._view.textWrapLabel}
-
+
${this._view.personal}> ${this._view.personalLabel}
diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js index 0905c87c71..f6313f3c04 100644 --- a/apps/remix-ide/src/app/tabs/theme-module.js +++ b/apps/remix-ide/src/app/tabs/theme-module.js @@ -5,11 +5,8 @@ import * as packageJson from '../../../../../package.json' import yo from 'yo-yo' const themes = [ - {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-dark_xbkjf1.css'}, - {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-light_nmjpo9.css'}, - {name: 'Midcentury', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-midcentury_mze7mq.css'}, - {name: 'BackToBlack', quality: 'dark', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-black_fftgak.css'}, - {name: 'Candy', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-candy_xlto9t.css'}, + {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597918237/remix-themes/PR365/remix-dark_tvx1s2.css'}, + {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597918237/remix-themes/PR365/remix-light_powaqg.css'}, {name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'}, {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'}, From 71332784ab6d3cc48f97e74ffb2019064b2f7948 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 20 Aug 2020 15:24:03 +0100 Subject: [PATCH 11/18] Reduce padding and spaces to make themes more visible --- apps/remix-ide/src/app/components/side-panel.js | 3 +-- apps/remix-ide/src/app/tabs/settings-tab.js | 6 +++--- apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js | 1 - 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index b68f7430ad..9ae16dd742 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -25,7 +25,6 @@ const css = csjs` .swapitHeader { display: flex; align-items: center; - padding: 16px 24px 15px; justify-content: space-between; } .icons i { @@ -129,7 +128,7 @@ export class SidePanel extends AbstractPanel { } const header = yo` -
+
${name}
${docLink} ${versionWarning} diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index e2d45c1411..c677efb911 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -115,7 +115,7 @@ module.exports = class SettingsTab extends ViewPlugin { this._view.config.general = yo`
-
+
General settings
${this._view.generateContractMetadata} @@ -138,7 +138,7 @@ module.exports = class SettingsTab extends ViewPlugin { ` this._view.gistToken = yo`
-
+
Github Access Token

Manage the access token used to publish to Gist and retrieve Github contents.

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.

@@ -148,7 +148,7 @@ module.exports = class SettingsTab extends ViewPlugin {
` this._view.config.themes = yo`
-
+
Themes
${this._view.themesCheckBoxes}
diff --git a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js index 513acbea8b..90a4e47069 100644 --- a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js +++ b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js @@ -5,7 +5,6 @@ const css = csjs` padding: 2%; } .info { - margin-bottom: .6rem; word-break: break-word; font-size: .8rem; } From 2e6ca07b5aab8a5ec5dee1e66ca4902e4110725f Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 20 Aug 2020 15:38:36 +0100 Subject: [PATCH 12/18] Reduced margin bottom --- apps/remix-ide/src/app/tabs/settings-tab.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index c677efb911..b96e88d58c 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -140,9 +140,9 @@ module.exports = class SettingsTab extends ViewPlugin {
Github Access Token
-

Manage the access token used to publish to Gist and retrieve Github contents.

+

Manage the access token used to publish to Gist and retrieve Github contents.

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.

-

https://github.com/settings/tokens

+

https://github.com/settings/tokens

${this._view.gistToken}
` From d4d80d7e93526b5b1037a7cc725420c5661bee74 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 20 Aug 2020 15:47:30 +0100 Subject: [PATCH 13/18] Restored left right padding for title --- apps/remix-ide/src/app/components/side-panel.js | 3 ++- apps/remix-ide/src/app/tabs/settings-tab.js | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index 9ae16dd742..b68f7430ad 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -25,6 +25,7 @@ const css = csjs` .swapitHeader { display: flex; align-items: center; + padding: 16px 24px 15px; justify-content: space-between; } .icons i { @@ -128,7 +129,7 @@ export class SidePanel extends AbstractPanel { } const header = yo` -
+
${name}
${docLink} ${versionWarning} diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index b96e88d58c..0c9d0591a6 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -115,7 +115,7 @@ module.exports = class SettingsTab extends ViewPlugin { this._view.config.general = yo`
-
+
General settings
${this._view.generateContractMetadata} @@ -138,7 +138,7 @@ module.exports = class SettingsTab extends ViewPlugin { ` this._view.gistToken = yo`
-
+
Github Access Token

Manage the access token used to publish to Gist and retrieve Github contents.

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.

@@ -148,7 +148,7 @@ module.exports = class SettingsTab extends ViewPlugin {
` this._view.config.themes = yo`
-
+
Themes
${this._view.themesCheckBoxes}
From c6cf5879aceddf77243ec1d882272320758ad1cd Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 21 Aug 2020 15:47:29 +0100 Subject: [PATCH 14/18] Activate generate contract metadata by default --- apps/remix-ide/src/app/tabs/settings-tab.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index 0c9d0591a6..4858b894ab 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -105,8 +105,9 @@ module.exports = class SettingsTab extends ViewPlugin { this._view.generateContractMetadata = yo`` this._view.generateContractMetadataLabel = yo`` + if (this.config.get('settings/generate-contract-metadata') === undefined) this.config.set('settings/generate-contract-metadata', true) if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '') - elementStateChanged(self._view.generateContractMetadataLabel, !this.config.get('settings/generate-contract-metadata')) + elementStateChanged(self._view.generateContractMetadataLabel, !this.config.get('settings/generate-contract-metadata')) this._view.pluginInput = yo`` From 63ff30777942abb08ad3b5d31bf7e5ee4b5de497 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Sun, 23 Aug 2020 17:45:34 +0100 Subject: [PATCH 15/18] Fixed failing test --- apps/remix-ide-e2e/src/tests/generalSettings.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts index f0aead507c..16d977a0c8 100644 --- a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts +++ b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts @@ -19,7 +19,6 @@ module.exports = { 'Should activate `generate contract metadata`': function (browser) { browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000) .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadataLabel"]', 5000) - .click('*[data-id="settingsTabGenerateContractMetadataLabel"]') .click('*[data-id="verticalIconsFileExplorerIcons"]') .openFile('browser/3_Ballot.sol') .click('*[data-id="verticalIconsKindsolidity"]') From ee8091781212d4fe685e8a16dd74cca0474b0999 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 24 Aug 2020 11:19:08 +0100 Subject: [PATCH 16/18] Revert "Fixed failing test" This reverts commit 63ff30777942abb08ad3b5d31bf7e5ee4b5de497. --- apps/remix-ide-e2e/src/tests/generalSettings.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts index 16d977a0c8..f0aead507c 100644 --- a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts +++ b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts @@ -19,6 +19,7 @@ module.exports = { 'Should activate `generate contract metadata`': function (browser) { browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000) .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadataLabel"]', 5000) + .click('*[data-id="settingsTabGenerateContractMetadataLabel"]') .click('*[data-id="verticalIconsFileExplorerIcons"]') .openFile('browser/3_Ballot.sol') .click('*[data-id="verticalIconsKindsolidity"]') From 234bad4bd38a67a8f12bb94dff19fbba6fbad344 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 24 Aug 2020 11:21:00 +0100 Subject: [PATCH 17/18] Fixed failing test --- apps/remix-ide-e2e/src/commands/renameFile.ts | 2 +- apps/remix-ide-e2e/src/helpers/init.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/remix-ide-e2e/src/commands/renameFile.ts b/apps/remix-ide-e2e/src/commands/renameFile.ts index e7c95aaf73..551ea3365c 100644 --- a/apps/remix-ide-e2e/src/commands/renameFile.ts +++ b/apps/remix-ide-e2e/src/commands/renameFile.ts @@ -42,7 +42,7 @@ function renameFile (browser: NightwatchBrowser, path: string, newFileName: stri }) }) .click('body') // blur - .waitForElementVisible('#modal-footer-ok', 10000) + .waitForElementVisible('#modal-footer-ok', 100000) .pause(2000) .click('#modal-footer-ok') .waitForElementNotPresent('[data-path="' + path + '"]') diff --git a/apps/remix-ide-e2e/src/helpers/init.ts b/apps/remix-ide-e2e/src/helpers/init.ts index fdef47e8e7..9bbdc1e39f 100644 --- a/apps/remix-ide-e2e/src/helpers/init.ts +++ b/apps/remix-ide-e2e/src/helpers/init.ts @@ -29,6 +29,7 @@ function initModules (browser: NightwatchBrowser, callback: VoidFunction) { .scrollAndClick('[data-id="pluginManagerComponentActivateButtondebugger"]') .scrollAndClick('[data-id="verticalIconsKindfileExplorers"]') .clickLaunchIcon('settings') + .click('*[data-id="settingsTabGenerateContractMetadataLabel"]') .setValue('[data-id="settingsTabGistAccessToken"]', process.env.gist_token) .click('[data-id="settingsTabSaveGistToken"]') .click('[data-id="settingsTabThemeLabelFlatly"]') // e2e tests were initially developed with Flatly. Some tests are failing with the default one (Dark), because the dark theme put uppercase everywhere. From 4f1abf323d878de15c8442838d2a67a2d82a4538 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 24 Aug 2020 11:37:03 +0100 Subject: [PATCH 18/18] Fixed generalSettings test --- apps/remix-ide-e2e/src/tests/generalSettings.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts index f0aead507c..16d977a0c8 100644 --- a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts +++ b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts @@ -19,7 +19,6 @@ module.exports = { 'Should activate `generate contract metadata`': function (browser) { browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000) .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadataLabel"]', 5000) - .click('*[data-id="settingsTabGenerateContractMetadataLabel"]') .click('*[data-id="verticalIconsFileExplorerIcons"]') .openFile('browser/3_Ballot.sol') .click('*[data-id="verticalIconsKindsolidity"]')