From 7607cb8c9b2584287f39723d00df49a37ec1aa8a Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Wed, 8 Jun 2016 01:27:27 -0300 Subject: [PATCH 01/33] Creating change account modals --- interface/client/templates/layout/browserBar.js | 12 +++++++++++- .../templates/popupWindows/connectAccount.html | 7 +++++++ .../client/templates/popupWindows/connectAccount.js | 13 +++++++++++++ modules/ipcCommunicator.js | 11 +++++++++++ 4 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 interface/client/templates/popupWindows/connectAccount.html create mode 100644 interface/client/templates/popupWindows/connectAccount.js diff --git a/interface/client/templates/layout/browserBar.js b/interface/client/templates/layout/browserBar.js index e757980f7..75566d290 100644 --- a/interface/client/templates/layout/browserBar.js +++ b/interface/client/templates/layout/browserBar.js @@ -146,13 +146,23 @@ Template['layout_browserBar'].events({ @event click app-bar > button, click .app-bar > form */ - 'click .app-bar > button, click .app-bar > form': function(e, template){ + 'click .app-bar > button.dapp-info, click .app-bar > form': function(e, template){ // prevent the slide in, when the url is clicked if($(e.target).hasClass('url-input')) return; template.$('.app-bar').toggleClass('show-bar'); }, + /** + Show connect account popup + + @event click .app-bar > button.accounts' + */ + 'click .app-bar > button.accounts': function(e, template) { + console.log('Connect account popup'); + ipc.send('uiAction_connectAccountPopupWindow'); + }, + /* Hide the app bar diff --git a/interface/client/templates/popupWindows/connectAccount.html b/interface/client/templates/popupWindows/connectAccount.html new file mode 100644 index 000000000..3cfbc4658 --- /dev/null +++ b/interface/client/templates/popupWindows/connectAccount.html @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/interface/client/templates/popupWindows/connectAccount.js b/interface/client/templates/popupWindows/connectAccount.js new file mode 100644 index 000000000..14cec4753 --- /dev/null +++ b/interface/client/templates/popupWindows/connectAccount.js @@ -0,0 +1,13 @@ + + +Template['popupWindows_connectAccount'].onCreated(function() { + +}); + +Template['popupWindows_connectAccount'].helpers({ + +}); + +Template['popupWindows_connectAccount'].events({ + +}); \ No newline at end of file diff --git a/modules/ipcCommunicator.js b/modules/ipcCommunicator.js index 1cd60d59b..c8977c04b 100644 --- a/modules/ipcCommunicator.js +++ b/modules/ipcCommunicator.js @@ -148,6 +148,17 @@ ipc.on('mistAPI_requestAccount', function(e){ }); +ipc.on('uiAction_connectAccountPopupWindow', function(e) { + Windows.createPopup('connectAccount', { + ownerId: e.sender.getId(), + electronOptions: { + width: 460, + height: 460, + alwaysOnTop: true, + }, + }); +}); + const uiLoggers = {}; From 910a7c765e8824fdcef62ea51538170317dbfbba Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Mon, 13 Jun 2016 19:28:44 -0300 Subject: [PATCH 02/33] connect popup --- interface/client/templates/index.js | 3 + .../client/templates/layout/browserBar.js | 12 ++- .../popupWindows/connectAccount.html | 79 +++++++++++++++++++ .../templates/popupWindows/connectAccount.js | 42 ++++++++++ interface/i18n/app.en.i18n.json | 4 +- modules/ipcCommunicator.js | 13 +++ 6 files changed, 151 insertions(+), 2 deletions(-) create mode 100644 interface/client/templates/popupWindows/connectAccount.html create mode 100644 interface/client/templates/popupWindows/connectAccount.js diff --git a/interface/client/templates/index.js b/interface/client/templates/index.js index 9a033442d..3df79083c 100644 --- a/interface/client/templates/index.js +++ b/interface/client/templates/index.js @@ -49,6 +49,9 @@ Template.body.helpers({ // $('title').text(TAPi18n.__('mist.popupWindows.requestAccount.title') return 'popupWindows_sendTransactionConfirmation'; } + if (location.hash === '#connectAccount') { + return 'popupWindows_connectAccount'; + } } }); diff --git a/interface/client/templates/layout/browserBar.js b/interface/client/templates/layout/browserBar.js index e757980f7..200438172 100644 --- a/interface/client/templates/layout/browserBar.js +++ b/interface/client/templates/layout/browserBar.js @@ -146,13 +146,23 @@ Template['layout_browserBar'].events({ @event click app-bar > button, click .app-bar > form */ - 'click .app-bar > button, click .app-bar > form': function(e, template){ + 'click .app-bar > button.dapp-info, click .app-bar > form': function(e, template){ + console.log('App bar open', e.target); // prevent the slide in, when the url is clicked if($(e.target).hasClass('url-input')) return; template.$('.app-bar').toggleClass('show-bar'); }, + /** + Show connect account popup + + @event click .app-bar > button.accounts' + */ + 'click .app-bar > button.accounts': function(e, template) { + ipc.send('uiAction_connectAccountPopupWindow'); + }, + /* Hide the app bar diff --git a/interface/client/templates/popupWindows/connectAccount.html b/interface/client/templates/popupWindows/connectAccount.html new file mode 100644 index 000000000..6771b23c6 --- /dev/null +++ b/interface/client/templates/popupWindows/connectAccount.html @@ -0,0 +1,79 @@ + \ No newline at end of file diff --git a/interface/client/templates/popupWindows/connectAccount.js b/interface/client/templates/popupWindows/connectAccount.js new file mode 100644 index 000000000..b602e6188 --- /dev/null +++ b/interface/client/templates/popupWindows/connectAccount.js @@ -0,0 +1,42 @@ + + +Template['popupWindows_connectAccount'].onCreated(function() { + // this.autorun(function(){ + // // make reeactive to the tab change + // var tab = Tabs.findOne(LocalStore.get('selectedTab'), {fields: {'permissions.accounts': 1}}); + // console.info(tab); + // var accounts = (tab.permissions && tab.permissions.accounts) ? tab.permissions.accounts : []; + + // TemplateVar.set('accounts', accounts); + // }); +}); + +Template['popupWindows_connectAccount'].helpers({ + /** + Returns the current dapp + + @method (dapp) + */ + 'dapp': function(){ + return Tabs.findOne(LocalStore.get('selectedTab')); + }, + /** + Returns dapps current accounts + + @method (dappAccounts) + */ + 'dappAccounts': function(){ + if(this.permissions) + return EthAccounts.find({address: {$in: this.permissions.accounts || []}}); + }, + +}); + +Template['popupWindows_connectAccount'].events({ + + 'click .cancel': function(){ + console.log('Cancel button'); + ipc.send('backendAction_closePopupWindow'); + }, + +}); diff --git a/interface/i18n/app.en.i18n.json b/interface/i18n/app.en.i18n.json index 41a4f118d..ce613759d 100644 --- a/interface/i18n/app.en.i18n.json +++ b/interface/i18n/app.en.i18n.json @@ -19,7 +19,9 @@ "skip": "Skip", "sending": "Sending...", "create": "Create", - "tryToReconnect": "Try to reconnect" + "tryToReconnect": "Try to reconnect", + "stayAnonymous": "Stay anonymous", + "authorize": "Authorize" }, "commonWords": { "you": "You", diff --git a/modules/ipcCommunicator.js b/modules/ipcCommunicator.js index 1cd60d59b..003ac36ff 100644 --- a/modules/ipcCommunicator.js +++ b/modules/ipcCommunicator.js @@ -84,6 +84,19 @@ ipc.on('backendAction_setLanguage', function(e, lang){ } }); + +ipc.on('uiAction_connectAccountPopupWindow', function(e) { + Windows.createPopup('connectAccount', { + ownerId: e.sender.getId(), + electronOptions: { + width: 460, + height: 460, + maximizable: false, + minimizable: false, + }, + }); +}); + // import presale file ipc.on('backendAction_importPresaleFile', function(e, path, pw) { const spawn = require('child_process').spawn; From 8e3bc73f7a15c79365907c22d8972c1d8b225f72 Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Mon, 13 Jun 2016 21:30:35 -0300 Subject: [PATCH 03/33] fixing typo --- interface/client/styles/popupWindows.import.less | 2 +- interface/client/templates/popupWindows/updateAvailable.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/interface/client/styles/popupWindows.import.less b/interface/client/styles/popupWindows.import.less index 1d7bc5ba0..8a1b7aa73 100644 --- a/interface/client/styles/popupWindows.import.less +++ b/interface/client/styles/popupWindows.import.less @@ -25,7 +25,7 @@ font-size: 200%; margin-bottom: 20px; - &.no-upate { + &.no-update { font-size: 180%; } } diff --git a/interface/client/templates/popupWindows/updateAvailable.html b/interface/client/templates/popupWindows/updateAvailable.html index 940767661..6d043daa3 100644 --- a/interface/client/templates/popupWindows/updateAvailable.html +++ b/interface/client/templates/popupWindows/updateAvailable.html @@ -19,7 +19,7 @@

{{/with}} {{else}} -

+

{{i18n "mist.popupWindows.updateAvailable.noUpdateFound" app=appName }}

{{/if}} From 5c1716110a3b2da6318b460354996d038e434325 Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Mon, 13 Jun 2016 22:56:28 -0300 Subject: [PATCH 04/33] connect account popup --- .../client/styles/popupWindows.import.less | 62 ++++++++++++++++++ .../popupWindows/connectAccount.html | 64 ++++--------------- .../templates/popupWindows/connectAccount.js | 21 ++++++ modules/ipcCommunicator.js | 16 ++--- 4 files changed, 99 insertions(+), 64 deletions(-) diff --git a/interface/client/styles/popupWindows.import.less b/interface/client/styles/popupWindows.import.less index 8a1b7aa73..520af5c89 100644 --- a/interface/client/styles/popupWindows.import.less +++ b/interface/client/styles/popupWindows.import.less @@ -175,4 +175,66 @@ } } + + &.connect-account { + text-align: left; + padding: 0 60px; + box-sizing: border-box; + margin: 0 auto; + + .connect-account input[type=password] { + width: 100%; + } + + .account-dapp-user-container { + display: -webkit-flex; + display: flex; + height: 65px; + justify-content: center; + align-items: center; + margin: 30px 0; + .account-dapp-user { + margin: 0 15px; + position: relative; + width: 120px; + height: 65px; + & > * { + position: absolute; + top: 0; + display: inline-block; + width: 65px; + height: 65px; + border-radius: 50%; + &.is-empty { + background-color: #6E6C6F; + content: '?'; + border-radius: 50%; + color: #fff; + } + } + .user-icon { + z-index: 2; + left: 0; + } + .app-icon { + z-index: 1; + left: 55px; + } + } + } + + .dapp-modal-buttons, + .dapp-modal-buttons button:last-of-type + { margin-right: 0; } + + span.account-address, span.dapp-url { + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 100px; + font-size: 14px; + color: #AEAEAE; + } + } } \ No newline at end of file diff --git a/interface/client/templates/popupWindows/connectAccount.html b/interface/client/templates/popupWindows/connectAccount.html index 6771b23c6..7485eefd2 100644 --- a/interface/client/templates/popupWindows/connectAccount.html +++ b/interface/client/templates/popupWindows/connectAccount.html @@ -1,20 +1,20 @@ \ No newline at end of file diff --git a/interface/client/templates/popupWindows/connectAccount.js b/interface/client/templates/popupWindows/connectAccount.js index 001667245..88a601b35 100644 --- a/interface/client/templates/popupWindows/connectAccount.js +++ b/interface/client/templates/popupWindows/connectAccount.js @@ -1,6 +1,9 @@ Template['popupWindows_connectAccount'].onCreated(function() { + + TemplateVar.set('currentActive', 'sharingInfo'); + // this.autorun(function(){ // // make reeactive to the tab change // var tab = Tabs.findOne(LocalStore.get('selectedTab'), {fields: {'permissions.accounts': 1}}); @@ -22,6 +25,15 @@ Template['popupWindows_connectAccount'].helpers({ return Tabs.findOne(LocalStore.get('selectedTab')); }, /** + Returns a more clean version of URL + + @method (dappFriendlyURL) + */ 'dappFriendlyURL': function(){ + return Tabs.findOne(LocalStore.get('selectedTab')).url. + replace(/^https?:\/\/(www\.)?/, ''). + replace(/\/$/, ''); + }, + /** Returns dapps current accounts @method (dappAccounts) @@ -38,9 +50,18 @@ Template['popupWindows_connectAccount'].helpers({ }); Template['popupWindows_connectAccount'].events({ + 'click .chooseAccount': function(){ + TemplateVar.set('currentActive', 'switchAccount'); + }, + 'click .cancel': function(){ console.log('Cancel button'); ipc.send('backendAction_closePopupWindow'); }, + 'click .ok': function(event){ + event.preventDefault(); + console.log('ok clicked'); + ipc.send('backendAction_closePopupWindow'); + } }); diff --git a/modules/ipcCommunicator.js b/modules/ipcCommunicator.js index 8fe1f6388..aee4b5043 100644 --- a/modules/ipcCommunicator.js +++ b/modules/ipcCommunicator.js @@ -89,18 +89,6 @@ ipc.on('backendAction_setLanguage', function(e, lang){ }); -ipc.on('uiAction_connectAccountPopupWindow', function(e) { - Windows.createPopup('connectAccount', { - ownerId: e.sender.getId(), - electronOptions: { - width: 460, - height: 460, - maximizable: false, - minimizable: false, - }, - }); -}); - // import presale file ipc.on('backendAction_importPresaleFile', function(e, path, pw) { const spawn = require('child_process').spawn; @@ -171,12 +159,16 @@ ipc.on('uiAction_connectAccountPopupWindow', function(e) { electronOptions: { width: 460, height: 460, + maximizable: false, + minimizable: false, alwaysOnTop: true, }, }); }); + + const uiLoggers = {}; ipc.on('console_log', function(event, id, logLevel, logItemsStr) { From 79df42b48dac6e674283a047ea46087626614e85 Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Tue, 14 Jun 2016 09:10:13 -0300 Subject: [PATCH 05/33] Straightens checkbox on connect account modal --- interface/client/styles/popupWindows.import.less | 11 +++++++++++ .../client/templates/popupWindows/connectAccount.html | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/interface/client/styles/popupWindows.import.less b/interface/client/styles/popupWindows.import.less index 520af5c89..7ee4bd54b 100644 --- a/interface/client/styles/popupWindows.import.less +++ b/interface/client/styles/popupWindows.import.less @@ -186,6 +186,17 @@ width: 100%; } + .checkbox-container { + display: flex; + input { + margin-right: 6px; + } + label { + color: @colorLinkActive; + font-weight: 500; + } + } + .account-dapp-user-container { display: -webkit-flex; display: flex; diff --git a/interface/client/templates/popupWindows/connectAccount.html b/interface/client/templates/popupWindows/connectAccount.html index 7485eefd2..6d96b913f 100644 --- a/interface/client/templates/popupWindows/connectAccount.html +++ b/interface/client/templates/popupWindows/connectAccount.html @@ -25,7 +25,7 @@ Accepting this will provide them proof that you own the XXXXX (switch) account at this time, and allow them to see any public information, including balances, connected to it.

-
+
From 17e3b71d3a12f85098c51c5692c5b2a9c362758a Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Tue, 14 Jun 2016 17:34:50 -0300 Subject: [PATCH 06/33] Connect account popup interface --- .../client/styles/popupWindows.import.less | 118 ++++++++++++++---- .../popupWindows/connectAccount.html | 64 ++++++++-- .../templates/popupWindows/connectAccount.js | 42 +++---- modules/ipcCommunicator.js | 2 +- 4 files changed, 165 insertions(+), 61 deletions(-) diff --git a/interface/client/styles/popupWindows.import.less b/interface/client/styles/popupWindows.import.less index 7ee4bd54b..8b223a46f 100644 --- a/interface/client/styles/popupWindows.import.less +++ b/interface/client/styles/popupWindows.import.less @@ -178,52 +178,43 @@ &.connect-account { text-align: left; - padding: 0 60px; box-sizing: border-box; margin: 0 auto; - - .connect-account input[type=password] { - width: 100%; - } - - .checkbox-container { - display: flex; - input { - margin-right: 6px; - } - label { - color: @colorLinkActive; - font-weight: 500; - } - } + padding: 0 60px; .account-dapp-user-container { display: -webkit-flex; display: flex; - height: 65px; + height: 64px; justify-content: center; align-items: center; - margin: 30px 0; + margin: 30px 0 15px; .account-dapp-user { - margin: 0 15px; + margin: 0 10px; position: relative; width: 120px; - height: 65px; + height: 64px; & > * { position: absolute; top: 0; display: inline-block; - width: 65px; - height: 65px; + width: 64px; + height: 64px; border-radius: 50%; &.is-empty { background-color: #6E6C6F; - content: '?'; border-radius: 50%; - color: #fff; + &::after { + color: #fff; + content: '?'; + display: block; + text-align: center; + line-height: 64px; + font-size: 2.5em; + } } } - .user-icon { + .user-icon, .simptip-position-left { z-index: 2; left: 0; } @@ -234,6 +225,83 @@ } } + .cards-container { + position: relative; + height: 230px; + margin-bottom: 16px; + > .connect-card, > .switch-card { + opacity: 0; + position: absolute; + top: 20px; + transition: 200ms all ease-out; + z-index: 0; + width: 340px; + transform: scale(0.95); + pointer-events: none; + } + + &.active-connect > .connect-card, + &.active-switch > .switch-card { + top: 0; + opacity: 1; + z-index: 1; + transform: scale(1); + pointer-events: initial; + height: 230px; + } + + .switch-card { + display: flex; + flex-direction: column; + } + + .switch-card ul { + overflow: hidden; + height: 48px *3.5; + overflow: scroll; + &::after { + position: absolute; + content: ''; + display: block; + bottom: 0; + width: 100%; + height: 15px; + pointer-events: none; + background: -webkit-linear-gradient(top, rgba(246,246,246,0), rgba(246,246,246,1)); + } + li { + background-color: #fff; + } + li:last-child { + margin-bottom: 15px; + } + } + .create-account-icon { + background-color: @colorLinkActive; + box-shadow: none; + &:after { + color: #fff; + content: '+'; + display: block; + text-align: center; + line-height: 32px; + font-size: 1.7em; + font-weight: 400; + } + } + } + + .checkbox-container { + display: flex; + input { + margin-right: 6px; + } + label { + color: @colorLinkActive; + font-weight: 500; + } + } + .dapp-modal-buttons, .dapp-modal-buttons button:last-of-type { margin-right: 0; } diff --git a/interface/client/templates/popupWindows/connectAccount.html b/interface/client/templates/popupWindows/connectAccount.html index 6d96b913f..d130dd573 100644 --- a/interface/client/templates/popupWindows/connectAccount.html +++ b/interface/client/templates/popupWindows/connectAccount.html @@ -1,14 +1,26 @@ \ No newline at end of file diff --git a/interface/client/templates/popupWindows/connectAccount.js b/interface/client/templates/popupWindows/connectAccount.js index 88a601b35..feeb43d46 100644 --- a/interface/client/templates/popupWindows/connectAccount.js +++ b/interface/client/templates/popupWindows/connectAccount.js @@ -2,16 +2,14 @@ Template['popupWindows_connectAccount'].onCreated(function() { - TemplateVar.set('currentActive', 'sharingInfo'); + TemplateVar.set('currentActive', 'connect'); - // this.autorun(function(){ - // // make reeactive to the tab change - // var tab = Tabs.findOne(LocalStore.get('selectedTab'), {fields: {'permissions.accounts': 1}}); - // console.info(tab); - // var accounts = (tab.permissions && tab.permissions.accounts) ? tab.permissions.accounts : []; + this.autorun(function(){ + var tab = Tabs.findOne(LocalStore.get('selectedTab'), {fields: {'permissions.accounts': 1}}); + var accounts = (tab && tab.permissions && tab.permissions.accounts) ? tab.permissions.accounts : []; - // TemplateVar.set('accounts', accounts); - // }); + TemplateVar.set('accounts', accounts); + }); }); @@ -25,24 +23,15 @@ Template['popupWindows_connectAccount'].helpers({ return Tabs.findOne(LocalStore.get('selectedTab')); }, /** - Returns a more clean version of URL + Returns a cleaner version of URL @method (dappFriendlyURL) - */ 'dappFriendlyURL': function(){ + */ + 'dappFriendlyURL': function(){ return Tabs.findOne(LocalStore.get('selectedTab')).url. replace(/^https?:\/\/(www\.)?/, ''). replace(/\/$/, ''); }, - /** - Returns dapps current accounts - - @method (dappAccounts) - */ - 'dappAccounts': function(){ - if(this.permissions) - return EthAccounts.find({address: {$in: this.permissions.accounts || []}}); - }, - }); Template['popupWindows_connectAccount'].helpers({ @@ -50,18 +39,21 @@ Template['popupWindows_connectAccount'].helpers({ }); Template['popupWindows_connectAccount'].events({ - 'click .chooseAccount': function(){ - TemplateVar.set('currentActive', 'switchAccount'); + 'click .switch-account': function(){ + TemplateVar.set('currentActive', 'switch'); + }, + + 'click .switch-card': function(event){ + event.preventDefault(); + TemplateVar.set('currentActive', 'connect'); }, 'click .cancel': function(){ - console.log('Cancel button'); ipc.send('backendAction_closePopupWindow'); }, 'click .ok': function(event){ event.preventDefault(); - console.log('ok clicked'); ipc.send('backendAction_closePopupWindow'); - } + }, }); diff --git a/modules/ipcCommunicator.js b/modules/ipcCommunicator.js index aee4b5043..2c3110a5a 100644 --- a/modules/ipcCommunicator.js +++ b/modules/ipcCommunicator.js @@ -161,7 +161,7 @@ ipc.on('uiAction_connectAccountPopupWindow', function(e) { height: 460, maximizable: false, minimizable: false, - alwaysOnTop: true, + // alwaysOnTop: true, }, }); }); From 91d4251f8b403273b62b12676ce152cdc77d6363 Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Tue, 14 Jun 2016 20:42:00 -0300 Subject: [PATCH 07/33] fixing scroll gradient on choose account popup --- interface/client/styles/popupWindows.import.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/interface/client/styles/popupWindows.import.less b/interface/client/styles/popupWindows.import.less index 8b223a46f..30ccc37f8 100644 --- a/interface/client/styles/popupWindows.import.less +++ b/interface/client/styles/popupWindows.import.less @@ -267,7 +267,7 @@ width: 100%; height: 15px; pointer-events: none; - background: -webkit-linear-gradient(top, rgba(246,246,246,0), rgba(246,246,246,1)); + background: -webkit-linear-gradient(top, rgba(241,241,241,0), rgba(241,241,241,1)); } li { background-color: #fff; @@ -316,4 +316,8 @@ color: #AEAEAE; } } +} + +body.app-blur .popup-windows.connect-account .cards-container .switch-card ul::after { + background: -webkit-linear-gradient(top, rgba(246,246,246,0), rgba(246,246,246,1)); } \ No newline at end of file From 14cfdb5f393c4972b8086be9fb5920a71e22392c Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Thu, 16 Jun 2016 17:49:10 -0300 Subject: [PATCH 08/33] Informing account names on connect popup --- .../client/styles/popupWindows.import.less | 60 +++++++++---------- .../popupWindows/connectAccount.html | 6 +- .../templates/popupWindows/connectAccount.js | 12 ++-- 3 files changed, 40 insertions(+), 38 deletions(-) diff --git a/interface/client/styles/popupWindows.import.less b/interface/client/styles/popupWindows.import.less index 30ccc37f8..126f852a9 100644 --- a/interface/client/styles/popupWindows.import.less +++ b/interface/client/styles/popupWindows.import.less @@ -189,39 +189,39 @@ justify-content: center; align-items: center; margin: 30px 0 15px; - .account-dapp-user { - margin: 0 10px; - position: relative; - width: 120px; + } + .account-dapp-user { + margin: 0 10px; + position: relative; + width: 120px; + height: 64px; + & > * { + position: absolute; + top: 0; + display: inline-block; + width: 64px; height: 64px; - & > * { - position: absolute; - top: 0; - display: inline-block; - width: 64px; - height: 64px; + border-radius: 50%; + &.is-empty { + background-color: #6E6C6F; border-radius: 50%; - &.is-empty { - background-color: #6E6C6F; - border-radius: 50%; - &::after { - color: #fff; - content: '?'; - display: block; - text-align: center; - line-height: 64px; - font-size: 2.5em; - } + &::after { + color: #fff; + content: '?'; + display: block; + text-align: center; + line-height: 64px; + font-size: 2.5em; } } - .user-icon, .simptip-position-left { - z-index: 2; - left: 0; - } - .app-icon { - z-index: 1; - left: 55px; - } + } + .user-icon, .simptip-position-left { + z-index: 2; + left: 0; + } + .app-icon { + z-index: 1; + left: 55px; } } @@ -258,7 +258,7 @@ .switch-card ul { overflow: hidden; height: 48px *3.5; - overflow: scroll; + overflow: auto; &::after { position: absolute; content: ''; diff --git a/interface/client/templates/popupWindows/connectAccount.html b/interface/client/templates/popupWindows/connectAccount.html index d130dd573..518359851 100644 --- a/interface/client/templates/popupWindows/connectAccount.html +++ b/interface/client/templates/popupWindows/connectAccount.html @@ -3,8 +3,8 @@
- - + + {{# if accountNumber }} + + {{else}} + + {{/if}}
diff --git a/interface/client/templates/popupWindows/connectAccount.js b/interface/client/templates/popupWindows/connectAccount.js index be88fbd6a..0c1ff907e 100644 --- a/interface/client/templates/popupWindows/connectAccount.js +++ b/interface/client/templates/popupWindows/connectAccount.js @@ -1,5 +1,10 @@ +var pinToSidebar = function() { + +}; + + Template['popupWindows_connectAccount'].onCreated(function() { TemplateVar.set('currentActive', 'connect'); @@ -24,6 +29,7 @@ Template['popupWindows_connectAccount'].helpers({ dapp: function(){ return Tabs.findOne(LocalStore.get('selectedTab')); }, + /** Returns a cleaner version of URL @@ -38,6 +44,34 @@ Template['popupWindows_connectAccount'].helpers({ currentAccount: function(){ return TemplateVar.get('accounts')[0]; }, + + /** + Return the number of accounts this tab has permission for. + + @method accountNumber + @return {Number} + */ + 'accountNumber': function(){ + var accounts = _.pluck(EthAccounts.find().fetch(), 'address'); + + return _.intersection(accounts, TemplateVar.get('accounts')).length; + }, + + 'accountList': function() { + var accounts = _.pluck(EthAccounts.find().fetch(), 'address'); + + return _.intersection(accounts, TemplateVar.get('accounts')); + }, + /** + Return "selected" if the current account is allowed in that dapp. + + @method selected + @return {String} "selected" + */ + 'selected': function(){ + return (_.contains(TemplateVar.get('accounts'), this.address)) ? 'selected' : ''; + // return hasPermission(this.address) ? 'selected' : ''; + }, }); Template['popupWindows_connectAccount'].events({ @@ -45,17 +79,78 @@ Template['popupWindows_connectAccount'].events({ TemplateVar.set('currentActive', 'switch'); }, - 'click .switch-card': function(event){ - event.preventDefault(); - TemplateVar.set('currentActive', 'connect'); + 'click .dapp-account-list button': function(e, template) { + e.preventDefault(); + var accounts = TemplateVar.get('accounts'); + + if(!_.contains(accounts, this.address)) + accounts.push(this.address); + else + accounts = _.without(accounts, this.address); + + TemplateVar.set(template, 'accounts', accounts); }, 'click .cancel': function(){ ipc.send('backendAction_closePopupWindow'); }, - 'click .ok': function(event){ - event.preventDefault(); - ipc.send('backendAction_closePopupWindow'); + 'click .stay-anonymous': function() { + var tabId = LocalStore.get('selectedTab'); + + // removes permissions + Tabs.update(tabId, {$set: { + 'permissions.accounts': [] + }}); + + // reload the webview + console.info(LocalStore.get('selectedTab')); + console.log(typeof Helpers.getWebview(tabId)); + console.info(Helpers.getWebview(tabId)); + Helpers.getWebview(tabId).reload(); + }, + /** + Confirm or cancel the accounts available for this dapp and reload the dapp. + + @event click button.confirm, click button.cancel + */ + 'click .ok': function(e) { + var tabId = LocalStore.get('selectedTab'), + accounts = ($(e.currentTarget).hasClass('confirm')) ? TemplateVar.get('accounts') : [], + tab = Tabs.findOne(tabId, {fields: {'permissions.accounts': 1}}); + + // set new permissions + Tabs.update(tabId, {$set: { + 'permissions.accounts': accounts + }}); + + // reload the webview + Helpers.getWebview(tabId).reload(); + + // hide the sidebar + $('.app-bar').removeClass('show-bar'); + }, + + /** + Create account + + @event click button.create-account + */ + 'click button.create-account': function(e, template){ + mist.requestAccount(function(e, address){ + console.debug('Got new account', address); + + var tabId = LocalStore.get('selectedTab'), + accounts = TemplateVar.get(template, 'accounts'); + + accounts.push(address); + + TemplateVar.set(template, 'accounts', accounts); + + // set new permissions + Tabs.update(tabId, {$set: { + 'permissions.accounts': accounts + }}); + }); }, }); From dc93347bb6f52b1dfcf195127576f7a78a6a8675 Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Wed, 29 Jun 2016 16:44:38 -0300 Subject: [PATCH 11/33] Tweaking URL breakdown to show arrows when necessary --- interface/client/templates/layout/browserBar.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/interface/client/templates/layout/browserBar.js b/interface/client/templates/layout/browserBar.js index 0d8bf2c5a..e25ff9c07 100644 --- a/interface/client/templates/layout/browserBar.js +++ b/interface/client/templates/layout/browserBar.js @@ -26,7 +26,7 @@ Template['layout_browserBar'].helpers({ if(!this || !this.url) return; - var pattern = /([^\:]*)\:\/\/([^\/]*)\/([^\?\.]*)/ + var pattern = /([^\:]*)\:\/\/([^\/]*)\/([^\?\.]*)/; var search = this.url.match(pattern); if(!search) @@ -35,11 +35,10 @@ Template['layout_browserBar'].helpers({ var urlObject = { url: search[0], protocol: search[1], - domain: search[2].split("."), - folders: search[3].split("/"), - } - - var breadcrumb = "" + urlObject.domain.join(".") + " ▸ " + urlObject.folders.join(" ▸ "); + domain: search[2], + folders: search[3].replace(/\/$/g, '').split("/"), + }; + var breadcrumb = "" + urlObject.domain + " ▸ " + urlObject.folders.join(" ▸ "); return new Spacebars.SafeString(breadcrumb); }, From cfedd2ce4afd1b29ac1fab8225044dfe789536cc Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Wed, 29 Jun 2016 18:40:07 -0300 Subject: [PATCH 12/33] Fixing edgy cases on breadcrumb --- interface/client/templates/layout/browserBar.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/interface/client/templates/layout/browserBar.js b/interface/client/templates/layout/browserBar.js index e25ff9c07..d47afd858 100644 --- a/interface/client/templates/layout/browserBar.js +++ b/interface/client/templates/layout/browserBar.js @@ -38,7 +38,12 @@ Template['layout_browserBar'].helpers({ domain: search[2], folders: search[3].replace(/\/$/g, '').split("/"), }; - var breadcrumb = "" + urlObject.domain + " ▸ " + urlObject.folders.join(" ▸ "); + + urlObject.folders = _.reject(urlObject.folders, function(el) { + return el == ''; + }); + + var breadcrumb = _.flatten(["" + urlObject.domain + " ", urlObject.folders]).join(" ▸ "); return new Spacebars.SafeString(breadcrumb); }, From 35ee7d9697261f8259387353063a91abb8bcb746 Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Wed, 29 Jun 2016 18:41:08 -0300 Subject: [PATCH 13/33] Removing browserBar interface --- .../client/styles/browserbar.import.less | 22 +-------- .../client/templates/layout/browserBar.html | 6 +-- .../client/templates/layout/browserBar.js | 45 +++---------------- 3 files changed, 11 insertions(+), 62 deletions(-) diff --git a/interface/client/styles/browserbar.import.less b/interface/client/styles/browserbar.import.less index 2d28d3f47..af305adb8 100644 --- a/interface/client/styles/browserbar.import.less +++ b/interface/client/styles/browserbar.import.less @@ -33,9 +33,6 @@ transition: height 0.25s, box-shadow 0.5s; &.show-bar { - height: @gridHeight * 20; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); - .url-input { opacity: 0.9; transition-duration: 0.3s; @@ -51,21 +48,6 @@ transform: translateX(20px) translateZ(0); word-spacing: -5px; } - - &:after { - display: block; - position: absolute; - left: 5%; - top: 28px; - width: 20px; - height: 20px; - margin-left: -10px; - content: "◢◣"; - color: @colorGrayDark; - font-size: 50%; - letter-spacing: -2px; - transition: left .5s ease-in-out; - } } &.dapp-info { @@ -104,7 +86,8 @@ } } - > button { + > .dapp-info, > button { + color: #6691c2; position: relative; padding-left: 0; margin-top: 1px; @@ -203,7 +186,6 @@ color: @colorLinkBlur; } } - } div.dapp-info, diff --git a/interface/client/templates/layout/browserBar.html b/interface/client/templates/layout/browserBar.html index eb014c780..209af3ced 100644 --- a/interface/client/templates/layout/browserBar.html +++ b/interface/client/templates/layout/browserBar.html @@ -5,15 +5,15 @@
- +
- +
{{breadcrumb}}
diff --git a/interface/client/templates/layout/browserBar.js b/interface/client/templates/layout/browserBar.js index d47afd858..2b8d22803 100644 --- a/interface/client/templates/layout/browserBar.js +++ b/interface/client/templates/layout/browserBar.js @@ -145,19 +145,6 @@ Template['layout_browserBar'].events({ Tabs.remove(tabId); LocalStore.set('selectedTab', 'browser'); }, - /* - Show the app bar - - @event click app-bar > button, click .app-bar > form - */ - 'click .app-bar > button.dapp-info, click .app-bar > form': function(e, template){ - console.log('App bar open', e.target); - // prevent the slide in, when the url is clicked - if($(e.target).hasClass('url-input')) - return; - - template.$('.app-bar').toggleClass('show-bar'); - }, /** Show connect account popup @@ -167,17 +154,13 @@ Template['layout_browserBar'].events({ console.log('Connect account popup'); ipc.send('uiAction_connectAccountPopupWindow'); }, - - /* - Hide the app bar - - @event mouseleave .app-bar + /* + Hide the app bar on input blur + + @event blur */ - 'mouseleave .app-bar': function(e, template){ - var timeoutId = setTimeout(function(){ - template.$('.app-bar').removeClass('show-bar'); - }, 1000); - TemplateVar.set('timeoutId', timeoutId); + 'blur .app-bar > form.url .url-input': function(e, template) { + template.$('.app-bar').removeClass('show-bar'); }, /* Stop hiding the app bar @@ -188,19 +171,6 @@ Template['layout_browserBar'].events({ clearTimeout(TemplateVar.get('timeoutId')); }, /* - Show the sections - - @event click button.accounts, click button.dapp-info, click form.url - */ - 'click button.accounts, click button.dapp-info, click form.url': function(e, template){ - var className = $(e.currentTarget).attr('class'); - - if(TemplateVar.get('browserBarTab') !== className) - template.$('.app-bar').addClass('show-bar'); - - TemplateVar.set('browserBarTab', className); - }, - /* Focus the input @event click form.url @@ -240,8 +210,5 @@ Template['layout_browserBar'].events({ redirect: url }}); LocalStore.set('selectedTab', foundTab); - - // hide the app-bar - template.$('.app-bar').removeClass('show-bar'); } }); From 80490244439677c4dc3383ab5f8c56790317fa11 Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Thu, 30 Jun 2016 18:26:35 -0300 Subject: [PATCH 14/33] Removing browser bar fold-down element --- .../client/styles/browserbar.import.less | 98 +++++------------- .../client/templates/layout/browserBar.html | 29 +----- interface/i18n/mist.en.i18n.json | 3 +- interface/public/images/anonymous-icon.png | Bin 0 -> 3191 bytes 4 files changed, 35 insertions(+), 95 deletions(-) create mode 100644 interface/public/images/anonymous-icon.png diff --git a/interface/client/styles/browserbar.import.less b/interface/client/styles/browserbar.import.less index af305adb8..7f11bb616 100644 --- a/interface/client/styles/browserbar.import.less +++ b/interface/client/styles/browserbar.import.less @@ -32,75 +32,22 @@ // ANIMATION transition: height 0.25s, box-shadow 0.5s; - &.show-bar { - .url-input { - opacity: 0.9; - transition-duration: 0.3s; - transition-delay: 0.1s; - transform: translateX(0) translateZ(0); - } - - .url-breadcrumb { - opacity: 0; - visibility: hidden; - transition-duration: 0.3s; - transition-delay: 0.1s; - transform: translateX(20px) translateZ(0); - word-spacing: -5px; - } - } - - &.dapp-info { - button.dapp-info { - color: @colorGrayDark; - } - - div.dapp-info { - display: flex; - } - } - - &.accounts { - button.accounts { - color: @colorGrayDark; - } - button.dapp-info { - color: @colorLink; - } - - div.accounts { - display: flex; - } - - &:after { - left: 95%; - } - } - - &.url { - &:after { - left: 50%; - } - div.url { - display: flex; - } - } - > .dapp-info, > button { color: #6691c2; position: relative; padding-left: 0; margin-top: 1px; max-width: 33%; - height: @gridHeight; + height: 21px; font-family: @sourceSansPro; font-size: @fontSizeSmall; font-weight: 500; - line-height: @gridHeight; + line-height: 21px; white-space: nowrap; + margin-top: -1px; &.has-icon { - padding-left: @gridWidth*0.75; + padding-left: @gridWidth * 0.84; } &:focus { @@ -117,21 +64,32 @@ .app-icon { position: absolute; - top: 1px; + top: 0; left: 0; - width: 16px; - height: 16px; - border-radius: 8px; + width: 21px; + height: 21px; + border-radius: 50%; } - .icon-key { - display: block; - float: right; - top: 3px; - margin-left: 4px; - position: relative; + .connect-button { + float: left; + margin-right: 8px; + } + .connect-button, .dapp-info span { + line-height: 21px; + display: inline-block; } + span.no-accounts { + background-image: url(/images/anonymous-icon.png); + background-size: cover; + background-position: 50%; + width: 21px; + height: 21px; + display: inline-block; + border-radius: 50%; + box-shadow: 0 0 2px rgba(0,0,0,0.3); + } } > form { @@ -261,8 +219,8 @@ } .app-bar { - margin-left: @gridWidth * 1; - margin-right: 0; + margin-left: @gridWidth /2; + margin-right: @gridWidth /2; } } @@ -374,7 +332,7 @@ .browser-bar .accounts { width: 0; text-overflow: clip; - padding-left: @gridWidth * 0.5; + padding-left: @gridWidth * 0.75; } } diff --git a/interface/client/templates/layout/browserBar.html b/interface/client/templates/layout/browserBar.html index 209af3ced..fd22d4d60 100644 --- a/interface/client/templates/layout/browserBar.html +++ b/interface/client/templates/layout/browserBar.html @@ -9,7 +9,7 @@ {{#if icon}} {{> elements_img src=icon class="app-icon" }} {{/if}} - {{name}} + {{name}}
@@ -23,32 +23,13 @@ {{> dapp_identicon identity=address class="dapp-tiny"}} {{else}} - {{i18n "mist.browserBar.buttons.noAccounts"}} + + {{i18n 'mist.browserBar.buttons.connect'}} + + {{/each}} - - - - -
- {{> layout_browserBar_dappInfo}} -
- -
- {{> layout_browserBar_network}} -
- -
- {{> layout_browserBar_accounts}} -
- - {{#if isBrowser}} - - {{else}} - - {{/if}} - {{/with}} \ No newline at end of file diff --git a/interface/i18n/mist.en.i18n.json b/interface/i18n/mist.en.i18n.json index 83ae5b028..85e25f2e5 100644 --- a/interface/i18n/mist.en.i18n.json +++ b/interface/i18n/mist.en.i18n.json @@ -112,7 +112,8 @@ }, "browserBar": { "buttons": { - "noAccounts": "No accounts set" + "noAccounts": "No accounts set", + "connect": "Connect" } }, "startScreen": { diff --git a/interface/public/images/anonymous-icon.png b/interface/public/images/anonymous-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..2c09c63e272d0b80d154262f6b8089d05aa8dc42 GIT binary patch literal 3191 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 dzpoUk^k3h|Ek(F-avT5v002ovPDHLkV1hs7$ Date: Tue, 5 Jul 2016 13:53:56 -0300 Subject: [PATCH 15/33] Vertical flexbox - window stretches appropriately --- .../client/styles/popupWindows.import.less | 669 ++++++++---------- .../popupWindows/connectAccount.html | 64 +- 2 files changed, 336 insertions(+), 397 deletions(-) diff --git a/interface/client/styles/popupWindows.import.less b/interface/client/styles/popupWindows.import.less index efa84c4c9..3f5842cd4 100644 --- a/interface/client/styles/popupWindows.import.less +++ b/interface/client/styles/popupWindows.import.less @@ -1,369 +1,328 @@ - @-webkit-keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-50%, 0, 0); - } - - to { - -webkit-transform: none; - transform: none; - } + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-50%, 0, 0); + } + to { + -webkit-transform: none; + transform: none; + } } @-webkit-keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(50%, 0, 0); - } - - to { - -webkit-transform: none; - transform: none; - } + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(50%, 0, 0); + } + to { + -webkit-transform: none; + transform: none; + } } @-webkit-keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } - - .popup-windows { - text-align: center; - - a, button { - color: @colorLinkActive; - } - - a:focus { - color: @colorLinkFocus; - } - - img.left-overlay { - position: relative; - top: -40px; - left: -132%; - width: 255%; - } - - &.update-available { - .text { - text-align: left; - } - - h1 { - font-size: 200%; - margin-bottom: 20px; - - &.no-update { - font-size: 180%; - } - } - } - - &.tx-info { - - .transaction-parties { - display : flex; - flex-direction: row; - align-items: center; - justify-content: center; - - > div { - // flex: 1 1 auto; - color: @colorTextSecondary; - } - - // addresses - > div:nth-child(odd) { - position: relative; - padding: 0 @defaultMargin*3; - font-weight: 400; - } - > div:nth-child(1) { - .overlap-icon { - right: 32px; - } - } - > div:nth-child(3) { - .overlap-icon { - left: 32px; - } - } - // amount - > div.amount { - position: relative; - margin-top: -30px; - height: 40px; - font-size: 1.5em; - color: darken(@colorTextSecondary, 8%); - border-bottom: 1px solid @colorTextSecondary; - - &:after { - content: ''; - position: absolute; - bottom: -5px; - right: 0; - border: 5px solid @colorTextSecondary; - border-color: transparent @colorTextSecondary @colorTextSecondary transparent; - .rotate(-45deg); - } - - .unit { - font-size: 0.6em; - font-weight: 400; - } - .execute-function { - display: block; - position: absolute; - bottom: -30px; - left: 0; - right: 0; - font-size: 0.6em; - text-align: center; - font-weight: 600; - } - } - } - - table, - .data, - .info { - width: 420px; - margin: @defaultMargin*2 auto; - } - table { - - td:nth-child(1) { - text-align: left; - } - td:nth-child(2) { - text-align: right; - font-weight: 400; - } - } - - .overlap-icon { - position: absolute; - top: 20px; - font-size: 20px; - } - .circle-icon { - display: inline-block; - background-color: @colorGrayLight; - .border-radius(50%); - font-size: 33px; - padding: @defaultMargin; - - // + span { - // display: inline-block; - // } - } - - .provided-gas { - display: inline; - width: 70px; - padding: 0; - margin: 0; - color: @colorLink; - background-color: transparent; - border: 0; - text-align: right; - border-bottom: 1px dotted @colorLink; - - &:focus { - outline: 0; - } - } - - input[type="password"] { - width: @gridWidth * 12; - } - - .data, - .info { - text-align: left; - padding: 0 @defaultMargin/2; - } - .data { - font-size: 0.9em; - - pre { - margin: 0 -@defaultMargin; - overflow: auto; - height: 90px; - background-color: @colorGrayLight;//lighten(@colorGray, 10%); - color: @colorTextPrimary; - - span.zero { - color: fadeout(@colorTextSecondary, 30%); - } - span.function { - font-weight: 600; - } - } - } - - } - - &.connect-account { - text-align: left; - box-sizing: border-box; - margin: 0 auto; - padding: 0 60px; - - p strong { - font-weight: 500; - } - .account-dapp-user-container { - display: -webkit-flex; - display: flex; - height: 64px; - justify-content: center; - align-items: center; - margin: 30px 0 15px; - } - .account-dapp-user { - margin: 0 10px; - position: relative; - width: 120px; - height: 64px; - & > * { - position: absolute; - top: 0; - display: inline-block; - width: 64px; - height: 64px; - border-radius: 50%; - &.is-empty { - background-color: #6E6C6F; - border-radius: 50%; - &::after { - color: #fff; - content: '?'; - display: block; - text-align: center; - line-height: 64px; - font-size: 2.5em; - } - } - } - .user-icon, .simptip-position-left { - z-index: 2; - left: 0; - animation: .9s cubic-bezier(0, 0, 0.13, 1) slideInRight; - } - .app-icon { - z-index: 1; - left: 55px; - animation: .9s cubic-bezier(0, 0, 0.13, 1) slideInLeft; - } - } - - .cards-container { - position: relative; - height: 230px; - margin-bottom: 16px; - > .connect-card, > .switch-card { - opacity: 0; - position: absolute; - top: 20px; - transition: 200ms all ease-out; - z-index: 0; - width: 340px; - transform: scale(0.95); - pointer-events: none; - } - - &.active-connect > .connect-card, - &.active-switch > .switch-card { - top: 0; - opacity: 1; - z-index: 1; - transform: scale(1); - pointer-events: initial; - height: 230px; - } - - .switch-card { - display: flex; - flex-direction: column; - } - - .switch-card ul { - overflow: hidden; - height: 48px *3.5; - overflow: auto; - &::after { - position: absolute; - content: ''; - display: block; - bottom: 0; - width: 100%; - height: 15px; - pointer-events: none; - background: -webkit-linear-gradient(top, rgba(241,241,241,0), rgba(241,241,241,1)); - } - li { - background-color: #fff; - } - li:last-child { - margin-bottom: 15px; - } - } - .create-account-icon { - background-color: @colorLinkActive; - box-shadow: none; - &:after { - color: #fff; - content: '+'; - display: block; - text-align: center; - line-height: 32px; - font-size: 1.7em; - font-weight: 400; - } - } - } - - .checkbox-container { - display: flex; - input { - margin-right: 6px; - } - label { - color: @colorLinkActive; - font-weight: 500; - } - } - - .dapp-modal-buttons, - .dapp-modal-buttons button:last-of-type - { margin-right: 0; } - - - span.account-address, span.dapp-url { - animation: .9s cubic-bezier(0.74, 0, 1, 0.29) fadeIn; - display: inline-block; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - width: 100px; - font-size: 14px; - color: #AEAEAE; - } - } + text-align: center; + a, + button { + color: @colorLinkActive; + } + a:focus { + color: @colorLinkFocus; + } + img.left-overlay { + position: relative; + top: -40px; + left: -132%; + width: 255%; + } + &.update-available { + .text { + text-align: left; + } + h1 { + font-size: 200%; + margin-bottom: 20px; + &.no-update { + font-size: 180%; + } + } + } + &.tx-info { + .transaction-parties { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + > div { + // flex: 1 1 auto; + color: @colorTextSecondary; + } + // addresses + > div:nth-child(odd) { + position: relative; + padding: 0 @defaultMargin*3; + font-weight: 400; + } + > div:nth-child(1) { + .overlap-icon { + right: 32px; + } + } + > div:nth-child(3) { + .overlap-icon { + left: 32px; + } + } + // amount + > div.amount { + position: relative; + margin-top: -30px; + height: 40px; + font-size: 1.5em; + color: darken(@colorTextSecondary, 8%); + border-bottom: 1px solid @colorTextSecondary; + &:after { + content: ''; + position: absolute; + bottom: -5px; + right: 0; + border: 5px solid @colorTextSecondary; + border-color: transparent @colorTextSecondary @colorTextSecondary transparent; + .rotate(-45deg); + } + .unit { + font-size: 0.6em; + font-weight: 400; + } + .execute-function { + display: block; + position: absolute; + bottom: -30px; + left: 0; + right: 0; + font-size: 0.6em; + text-align: center; + font-weight: 600; + } + } + } + table, + .data, + .info { + width: 420px; + margin: @defaultMargin*2 auto; + } + table { + td:nth-child(1) { + text-align: left; + } + td:nth-child(2) { + text-align: right; + font-weight: 400; + } + } + .overlap-icon { + position: absolute; + top: 20px; + font-size: 20px; + } + .circle-icon { + display: inline-block; + background-color: @colorGrayLight; + .border-radius(50%); + font-size: 33px; + padding: @defaultMargin; + // + span { + // display: inline-block; + // } + } + .provided-gas { + display: inline; + width: 70px; + padding: 0; + margin: 0; + color: @colorLink; + background-color: transparent; + border: 0; + text-align: right; + border-bottom: 1px dotted @colorLink; + &:focus { + outline: 0; + } + } + input[type="password"] { + width: @gridWidth * 12; + } + .data, + .info { + text-align: left; + padding: 0 @defaultMargin/2; + } + .data { + font-size: 0.9em; + pre { + margin: 0 -@defaultMargin; + overflow: auto; + height: 90px; + background-color: @colorGrayLight; //lighten(@colorGray, 10%); + color: @colorTextPrimary; + span.zero { + color: fadeout(@colorTextSecondary, 30%); + } + span.function { + font-weight: 600; + } + } + } + } + &.connect-account { + text-align: left; + box-sizing: border-box; + margin: 0 auto; + padding: 0 60px; + form { + display: -webkit-flex; + display: flex; + flex-direction: column; + align-content: space-between; + height: 100vh; + + > * { + flex: 0; + } + } + p strong { + font-weight: 400; + } + .account-dapp-user-container { + display: -webkit-flex; + display: flex; + height: 64px; + justify-content: center; + align-items: center; + margin: 30px 0 15px; + flex: 0 64px; + } + .account-dapp-user { + margin: 0 10px; + position: relative; + width: 120px; + height: 64px; + & > * { + position: absolute; + top: 0; + display: inline-block; + width: 64px; + height: 64px; + border-radius: 50%; + &.is-empty { + background-color: #6E6C6F; + border-radius: 50%; + &::after { + color: #fff; + content: '?'; + display: block; + text-align: center; + line-height: 64px; + font-size: 2.5em; + } + } + &.no-account { + background-image: url(/images/anonymous-icon.png); + background-size: cover; + background-position: 50%; + } + } + .user-icon, + .simptip-position-left { + z-index: 2; + left: 0; + animation: .9s cubic-bezier(0, 0, 0.13, 1) slideInRight; + } + .app-icon { + z-index: 1; + left: 55px; + animation: .9s cubic-bezier(0, 0, 0.13, 1) slideInLeft; + } + } + .dapp-account-list { + flex-grow: 5; + position: relative; + overflow: auto; + padding: 0; + margin: 0; + &::after { + position: absolute; + content: ''; + display: block; + bottom: 0; + width: 100%; + height: 25px; + pointer-events: none; + background: -webkit-linear-gradient(top, rgba(241, 241, 241, 0), rgba(241, 241, 241, 1)); + } + li { + background-color: #fff; + } + li:last-child { + margin-bottom: 25px; + } + } + .create-account-icon { + background-color: @colorLinkActive; + box-shadow: none; + &:after { + color: #fff; + content: '+'; + display: block; + text-align: center; + line-height: 32px; + font-size: 1.7em; + font-weight: 400; + } + } + .checkbox-container { + display: flex; + flex: 0 50px; + padding: 1em 0; + input { + margin-right: 6px; + } + label { + color: @colorLinkActive; + font-weight: 500; + } + } + .dapp-modal-buttons { + flex: 0 62px; + } + .dapp-modal-buttons, + .dapp-modal-buttons button:last-of-type { + margin-right: 0; + } + span.account-address, + span.dapp-url { + animation: .9s cubic-bezier(0.74, 0, 1, 0.29) fadeIn; + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 100px; + font-size: 14px; + color: #AEAEAE; + } + } } body.app-blur .popup-windows.connect-account .cards-container .switch-card ul::after { - background: -webkit-linear-gradient(top, rgba(246,246,246,0), rgba(246,246,246,1)); + background: -webkit-linear-gradient(top, rgba(246, 246, 246, 0), rgba(246, 246, 246, 1)); } - - diff --git a/interface/client/templates/popupWindows/connectAccount.html b/interface/client/templates/popupWindows/connectAccount.html index 2ba3db69a..3c107daa5 100644 --- a/interface/client/templates/popupWindows/connectAccount.html +++ b/interface/client/templates/popupWindows/connectAccount.html @@ -16,7 +16,7 @@ {{> dapp_identicon identity=address class="dapp-large"}} {{else}} - + {{/each}} {{#if dapp.icon}} @@ -29,47 +29,27 @@ {{dappFriendlyURL}} -
-
-

- You are sharing your identity with {{dapp.name}}. -

-

- Accepting this will provide them proof that you own the - - {{accountNameOrAddress currentAccount}} - - - () - - account at this time, and allow them to see any public information, including balances, connected to it. -

- -
-
-

- Select the accounts to share with {{dapp.name}}. -

- - -
-
+

+ You are sharing your identity with {{dapp.name}}. This allows the app to see any public information, including balances connected to it. +

+ +
From 3dc231b402daf5916819b9836a2aec0bf3fdda1e Mon Sep 17 00:00:00 2001 From: Everton Fraga Date: Tue, 5 Jul 2016 15:44:01 -0300 Subject: [PATCH 16/33] Popup updates --- .../client/styles/popupWindows.import.less | 28 +++--- .../client/templates/layout/browserBar.js | 2 +- .../popupWindows/connectAccount.html | 8 +- .../templates/popupWindows/connectAccount.js | 92 ++++++++++++------- interface/client/templates/views/tab.js | 8 ++ modules/ipcCommunicator.js | 44 +++++---- modules/preloader/mistUI.js | 8 +- 7 files changed, 122 insertions(+), 68 deletions(-) diff --git a/interface/client/styles/popupWindows.import.less b/interface/client/styles/popupWindows.import.less index 3f5842cd4..56d99885d 100644 --- a/interface/client/styles/popupWindows.import.less +++ b/interface/client/styles/popupWindows.import.less @@ -1,22 +1,22 @@ @-webkit-keyframes slideInLeft { from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-50%, 0, 0); + transform: translate3d(50%, 0, 0) rotate(45deg); + opacity: 0; } to { - -webkit-transform: none; - transform: none; + transform: translate3d(0, 0, 0); + opacity: 1; } } @-webkit-keyframes slideInRight { from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(50%, 0, 0); + transform: translate3d(-50%, 0, 0) rotate(-45deg); + opacity: 0; } to { - -webkit-transform: none; transform: none; + opacity: 1; } } @@ -213,7 +213,7 @@ flex: 0 64px; } .account-dapp-user { - margin: 0 10px; + margin: 0 5px; position: relative; width: 120px; height: 64px; @@ -246,12 +246,18 @@ .simptip-position-left { z-index: 2; left: 0; - animation: .9s cubic-bezier(0, 0, 0.13, 1) slideInRight; + animation: .7s cubic-bezier(0, 0, 0.13, 1) slideInLeft; + &:first-child {left: 0px;} + &:nth-of-type(2) { left: 5px; } + &:nth-of-type(3) { left: 10px; } + &:nth-of-type(4) { left: 15px; } + &:nth-of-type(5) { left: 20px; } + &:nth-of-type(6) { left: 25px; } } .app-icon { z-index: 1; left: 55px; - animation: .9s cubic-bezier(0, 0, 0.13, 1) slideInLeft; + animation: .7s cubic-bezier(0, 0, 0.13, 1) slideInRight; } } .dapp-account-list { @@ -262,7 +268,7 @@ margin: 0; &::after { position: absolute; - content: ''; + // content: ''; display: block; bottom: 0; width: 100%; diff --git a/interface/client/templates/layout/browserBar.js b/interface/client/templates/layout/browserBar.js index bc773e44f..4872db9e9 100644 --- a/interface/client/templates/layout/browserBar.js +++ b/interface/client/templates/layout/browserBar.js @@ -153,7 +153,7 @@ Template['layout_browserBar'].events({ */ 'click .app-bar > button.accounts': function(e, template) { console.log('Connect account popup'); - ipc.send('uiAction_connectAccountPopupWindow'); + ipc.send('mistAPI_requestAccount'); }, /* Hide the app bar on input blur diff --git a/interface/client/templates/popupWindows/connectAccount.html b/interface/client/templates/popupWindows/connectAccount.html index 3c107daa5..7f469f6ee 100644 --- a/interface/client/templates/popupWindows/connectAccount.html +++ b/interface/client/templates/popupWindows/connectAccount.html @@ -3,17 +3,17 @@