From 705ca57b38522ce20c6f983966bcf2dfe61cc930 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Fri, 2 Jun 2017 10:54:18 +0200 Subject: [PATCH] Unify modals buttons and alignment Closes #294, Closes #295 --- .../delegateRegistration.less | 5 +-- .../delegateRegistration.pug | 5 ++- src/components/delegates/vote.less | 10 +++--- src/components/delegates/vote.pug | 7 ++-- src/components/login/login.pug | 2 +- src/components/main/secondPass.pug | 2 +- src/components/passphrase/passphrase.js | 14 +++++--- src/components/passphrase/savePassphrase.js | 9 ++++- src/components/passphrase/savePassphrase.pug | 35 +++++++++++++------ src/components/send/send.less | 4 --- src/components/send/send.pug | 7 ++-- src/components/signVerify/signMessage.pug | 4 ++- src/index.less | 14 ++++++++ 13 files changed, 84 insertions(+), 34 deletions(-) diff --git a/src/components/delegateRegistration/delegateRegistration.less b/src/components/delegateRegistration/delegateRegistration.less index db6489d32..4f0bcf681 100644 --- a/src/components/delegateRegistration/delegateRegistration.less +++ b/src/components/delegateRegistration/delegateRegistration.less @@ -31,8 +31,9 @@ color: rgb(221,44,0); } - md-dialog-actions .md-button { - margin-left: -8px; + md-divider { + margin: 0 -24px; + clear: both; } .info-icon-wrapper { diff --git a/src/components/delegateRegistration/delegateRegistration.pug b/src/components/delegateRegistration/delegateRegistration.pug index e1d0d3b92..72299c14f 100644 --- a/src/components/delegateRegistration/delegateRegistration.pug +++ b/src/components/delegateRegistration/delegateRegistration.pug @@ -3,6 +3,9 @@ div.dialog-delegate-registration(aria-label='Vote for delegates') md-toolbar .md-toolbar-tools h2 Delegate Registration + span(flex='') + md-button.md-icon-button(ng-click='$ctrl.cancel(delegateRegistrationForm)', aria-label='Close dialog') + i.material-icons close md-dialog-content .md-dialog-content div @@ -25,6 +28,6 @@ div.dialog-delegate-registration(aria-label='Vote for delegates') md-divider p.error(ng-bind='$ctrl.form.error', ng-if='$ctrl.form.error') md-dialog-actions(layout='row') - md-button.md-raised.md-secondary(ng-disabled='$ctrl.loading', ng-click='$ctrl.cancel(delegateRegistrationForm)') {{ 'Cancel' }} + md-button.md-secondary(ng-disabled='$ctrl.loading', ng-click='$ctrl.cancel(delegateRegistrationForm)') {{ 'Cancel' }} span(flex) md-button.md-raised.md-primary.register-button(ng-disabled='!delegateRegistrationForm.$valid || $ctrl.loading', type='submit') {{ $ctrl.loading ? 'Registering...' : 'Register' }} diff --git a/src/components/delegates/vote.less b/src/components/delegates/vote.less index 6f0de5662..4f89c14b1 100644 --- a/src/components/delegates/vote.less +++ b/src/components/delegates/vote.less @@ -12,12 +12,14 @@ clear: both; } - md-dialog-actions .md-button { - margin-left: -8px; - } - .pull-right { float: right; } + .fee { + font-size: 12px; + line-height: 14px; + color: grey; + } + } diff --git a/src/components/delegates/vote.pug b/src/components/delegates/vote.pug index 47493d773..350b667c6 100644 --- a/src/components/delegates/vote.pug +++ b/src/components/delegates/vote.pug @@ -3,6 +3,9 @@ div.dialog-vote(aria-label='Vote for delegates') md-toolbar .md-toolbar-tools h2 Vote for delegates + span(flex='') + md-button.md-icon-button(ng-click='$ctrl.$mdDialog.cancel()', aria-label='Close dialog') + i.material-icons close md-dialog-content .md-dialog-content div @@ -21,7 +24,7 @@ div.dialog-vote(aria-label='Vote for delegates') md-input-container.md-block(ng-if='$ctrl.account.get().secondSignature') label Second Passphrase input(type='password', ng-model='$ctrl.secondPassphrase') - p.pull-right Fee: 1 LSK + p.pull-right.fee Fee: 1 LSK md-divider div(layout='row') p.info-icon-wrapper @@ -34,4 +37,4 @@ div.dialog-vote(aria-label='Vote for delegates') md-dialog-actions(layout='row') md-button(ng-click="$ctrl.$mdDialog.cancel()") Cancel span(flex) - md-button.md-primary.submit-button(ng-disabled='!$ctrl.canVote()', ng-click="$ctrl.vote()") {{$ctrl.votingInProgress ? 'Voting...' : 'Confirm vote'}} + md-button.md-primary.md-raised.submit-button(ng-disabled='!$ctrl.canVote()', ng-click="$ctrl.vote()") {{$ctrl.votingInProgress ? 'Voting...' : 'Confirm vote'}} diff --git a/src/components/login/login.pug b/src/components/login/login.pug index 4323ee87a..953c88131 100644 --- a/src/components/login/login.pug +++ b/src/components/login/login.pug @@ -21,4 +21,4 @@ md-card // md-button(ng-disabled='$ctrl.generatingNewPassphrase', ng-click='$ctrl.devTestAccount()') Dev Test Account md-button.md-primary.new-account-button(ng-disabled='$ctrl.random || $ctrl.generatingNewPassphrase', ng-click='$ctrl.generatePassphrase()') NEW ACCOUNT md-button.md-raised.md-primary.login-button(md-autofocus, ng-disabled='($ctrl.valid != undefined && $ctrl.valid !== 1) || $root.loggingIn', type='submit') Login - passphrase(ng-if='$ctrl.generatingNewPassphrase', data-on-login='$ctrl.onLogin', data-target='primary-pass') + passphrase(ng-if='$ctrl.generatingNewPassphrase', data-on-login='$ctrl.onLogin', data-target='primary-pass', data-ok-button-label='Login') diff --git a/src/components/main/secondPass.pug b/src/components/main/secondPass.pug index 9402e8ee9..d8b135ad3 100644 --- a/src/components/main/secondPass.pug +++ b/src/components/main/secondPass.pug @@ -3,4 +3,4 @@ md-dialog.dialog-second(aria-label='Generate a second passphrase for your accoun md-toolbar .md-toolbar-tools h2 Generate a second passphrase of your account - passphrase(data-on-login='md.onLogin', data-target='second-pass') \ No newline at end of file + passphrase(data-on-login='md.onLogin', data-target='second-pass', data-ok-button-label='Register') diff --git a/src/components/passphrase/passphrase.js b/src/components/passphrase/passphrase.js index dc173d6b7..a39196f8a 100644 --- a/src/components/passphrase/passphrase.js +++ b/src/components/passphrase/passphrase.js @@ -26,17 +26,23 @@ app.directive('passphrase', ($rootScope, $document, Passphrase, dialog, $mdMedia const generateAndDoubleCheck = (seed) => { const passphrase = Passphrase.generatePassPhrase(seed); - dialog.modal({ controllerAs: '$ctrl', controller: /* @ngInject*/ class save { // eslint-disable-next-line no-shadow - constructor(passphrase) { + constructor(passphrase, okButtonLabel) { this.passphrase = passphrase; + this.okButtonLabel = okButtonLabel; } }, - template: '', - locals: { passphrase }, + template: '' + + '', + locals: { + passphrase, + okButtonLabel: attrs.okButtonLabel, + }, }).then(() => { $timeout(() => { $rootScope.$broadcast('onAfterSignup', { diff --git a/src/components/passphrase/savePassphrase.js b/src/components/passphrase/savePassphrase.js index 467986580..0e5aea4a9 100644 --- a/src/components/passphrase/savePassphrase.js +++ b/src/components/passphrase/savePassphrase.js @@ -4,19 +4,22 @@ app.component('savePassphrase', { template: require('./savePassphrase.pug')(), bindings: { passphrase: '<', + okButtonLabel: '<', }, controller: class savePassphrase { constructor($scope, $state, $mdDialog) { this.$mdDialog = $mdDialog; this.$state = $state; + this.step = 1; + $scope.$watch('$ctrl.missing_input', () => { this.missing_ok = this.missing_input && this.missing_input === this.missing_word; }); } next() { - this.enter = true; + this.step = 2; const words = this.passphrase.split(' '); const missingNumber = parseInt(Math.random() * words.length, 10); @@ -31,6 +34,10 @@ app.component('savePassphrase', { this.$state.reload(); } + back() { + this.step = 1; + } + close() { this.$mdDialog.cancel(); this.$state.reload(); diff --git a/src/components/passphrase/savePassphrase.pug b/src/components/passphrase/savePassphrase.pug index 25e257c14..fe2ac65fd 100644 --- a/src/components/passphrase/savePassphrase.pug +++ b/src/components/passphrase/savePassphrase.pug @@ -1,23 +1,36 @@ -form +form(ng-if='$ctrl.step === 1') md-toolbar .md-toolbar-tools - h2 - span(ng-if="!$ctrl.enter") Save your passphrase in a safe place! - span(ng-if="$ctrl.enter") Enter the missing word to continue + h2 Save your passphrase in a safe place! + span(flex='') + md-button.md-icon-button(ng-click='$ctrl.close()', aria-label='Close dialog') + i.material-icons close md-dialog-content .md-dialog-content - md-input-container.md-block(ng-if="!$ctrl.enter") - textarea.passphrase(ng-bind='$ctrl.passphrase', md-autofocus, readonly) - div(ng-if="$ctrl.enter") + md-input-container.md-block + textarea.passphrase(ng-bind='$ctrl.passphrase', md-autofocus, readonly, aria-label='Passphrase') + md-dialog-actions(layout='row') + md-button.close-button(ng-click="$ctrl.close()") Cancel + span(flex) + md-button.md-raised.md-primary.yes-its-save-button(ng-click="$ctrl.next()") Yes! It's safe! +form(ng-if='$ctrl.step === 2') + md-toolbar + .md-toolbar-tools + h2 Enter the missing word to continue + span(flex='') + md-button.md-icon-button(ng-click='$ctrl.close()', aria-label='Close dialog') + i.material-icons close + md-dialog-content + .md-dialog-content + div p.passphrase span {{ $ctrl.pre }} span.missing ----- span {{ $ctrl.pos }} md-input-container.md-block(md-is-error='!$ctrl.missing_ok') label Enter the missing word - input(ng-model='$ctrl.missing_input') + input(ng-model='$ctrl.missing_input', md-autofocus, aria-label='Enter the missing word') md-dialog-actions(layout='row') - md-button.close-button(ng-click="$ctrl.close()") Close + md-button.back-button(ng-click="$ctrl.back()") Back span(flex) - md-button.yes-its-save-button(ng-click="$ctrl.next()", ng-show='!$ctrl.enter') Yes! It's safe! - md-button.ok-button(ng-click="$ctrl.ok()", ng-show='$ctrl.enter', ng-disabled='!$ctrl.missing_ok') OK + md-button.md-raised.md-primary.ok-button(ng-click="$ctrl.ok()", ng-disabled='!$ctrl.missing_ok', ng-bind='$ctrl.okButtonLabel') diff --git a/src/components/send/send.less b/src/components/send/send.less index 4c4cf7999..abd5b0f38 100644 --- a/src/components/send/send.less +++ b/src/components/send/send.less @@ -34,10 +34,6 @@ send { margin: -8px -14px; } - md-dialog-actions .md-button { - margin-left: -8px; - } - md-menu.max-funds { position: absolute; top: -10px; diff --git a/src/components/send/send.pug b/src/components/send/send.pug index 260906a2b..d63d888f5 100644 --- a/src/components/send/send.pug +++ b/src/components/send/send.pug @@ -3,6 +3,9 @@ div.dialog-send(aria-label='Send funds') md-toolbar .md-toolbar-tools h2 Send + span(flex='') + md-button.md-icon-button(ng-click='$ctrl.$mdDialog.cancel()', aria-label='Close dialog') + i.material-icons close md-dialog-content .md-dialog-content div @@ -21,7 +24,7 @@ div.dialog-send(aria-label='Send funds') div(ng-message='required') Required div(ng-message='pattern') Invalid div(ng-message='max') Insufficient funds - md-menu.max-funds(md-position-mode='target-right target') + md-menu.max-funds(md-position-mode='target-right target', md-offset='4 -15') md-button.md-icon-button(ng-click='$mdOpenMenu()') i.material-icons more_vert md-menu-content(width='4') @@ -33,6 +36,6 @@ div.dialog-send(aria-label='Send funds') label Second Passphrase input(type='password', ng-model='$ctrl.secondPassphrase', required) md-dialog-actions(layout='row') - md-button.md-raised.md-secondary(ng-disabled='$ctrl.loading', ng-click='$ctrl.cancel()') {{ 'Cancel' }} + md-button.md-secondary(ng-disabled='$ctrl.loading', ng-click='$ctrl.cancel()') {{ 'Cancel' }} span(flex) md-button.md-raised.md-primary.submit-button(ng-disabled='!$ctrl.transferForm.$valid || $ctrl.loading', ng-click='$ctrl.send()') {{ $ctrl.loading ? 'Sending...' : 'Send' }} diff --git a/src/components/signVerify/signMessage.pug b/src/components/signVerify/signMessage.pug index 2c9b436e5..968786e57 100644 --- a/src/components/signVerify/signMessage.pug +++ b/src/components/signVerify/signMessage.pug @@ -19,7 +19,9 @@ div label Message textarea.message(name='message', ng-model='$ctrl.message', ng-change='$ctrl.sign()', md-autofocus) div(layout='row', layout-align='center center') - md-button.sign-button(ngclipboard, data-clipboard-text='{{$ctrl.result}}', ng-click='$ctrl.showResult()', ngclipboard-success="$ctrl.dialog.successToast('Result copied to clipboard')", ng-disabled='!$ctrl.result || $ctrl.resultIsShown') Sign and copy result to clipboard + md-button(ng-click="$ctrl.$mdDialog.cancel()") Cancel + span(flex) + md-button.md-raised.md-primary.sign-button(ngclipboard, data-clipboard-text='{{$ctrl.result}}', ng-click='$ctrl.showResult()', ngclipboard-success="$ctrl.dialog.successToast('Result copied to clipboard')", ng-disabled='!$ctrl.result || $ctrl.resultIsShown') Sign and copy result to clipboard div(ng-if='$ctrl.resultIsShown') md-input-container.md-block label Result diff --git a/src/index.less b/src/index.less index cfd50cfcb..edbfb78da 100644 --- a/src/index.less +++ b/src/index.less @@ -65,6 +65,20 @@ body { width: 100%; z-index: 10; } + + md-dialog { + md-dialog-actions { + border: 0; + padding: 24px; + .md-button { + margin: 0px; + } + } + } + + .md-toolbar-tools { + padding: 0 24px; + } } md-toast.lsk-toast-success {