From 4f6b57735c06f17ce421b4d0206e7d04c961ae09 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 f759d7dbe460683b263f9f4427d8bf52767ee638 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 f9c77ea189390e9aac67a41a2ac1e4c2c0c73759 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 0b157d45f172aadf2aeb6620082e219eafb4a7f7 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 4d542800a27b73613f51be433b51207886edc321 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 33db4ba8738d105eff23823241487be04a32cf88 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 3005467eeec24b5a319b47ee2ccba33948481a20 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 5c3a350857f263045ccba07cbef15e884e1e765f 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 bb194c8f654d4cab9e6f599408cb75e5d8e7b455 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 04da429e624d0bee9944d0f9684b044859bfb235 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 6c8673ed5a9b6c27283d9d5325e27252d0781db8 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 303b92bd358865abe13a1271041897b89412c660 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 beecb7c4dcc3a2b18294441361e9305d914f3c01 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 d14e24c5c0ad603966d96e8360db64d6640912a2 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 f2bc724ac875f70e04e1d204c8e9b98299fe2359 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 8b53e2c9370e2b32e70f1c438e7259912721c4bc 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 f2bc724ac875f70e04e1d204c8e9b98299fe2359. --- 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 568b722ce548f3b964d4eadba67bbee0877b1b10 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 1653237fd5335ffc1bac66a068437088020aa4fa 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"]')