Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: De-emphasize back/quit buttons in the wizard

This commit is contained in:
Robin Ward 2016-09-15 15:04:25 -04:00
parent 003e13316f
commit 2ff6295f71
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/wizard/templates/components/wizard-step.hbs
View File

@ -22,17 +22,11 @@
<div class='wizard-buttons'> <div class='wizard-buttons'>
{{#if showQuitButton}} {{#if showQuitButton}}
<button class='wizard-btn danger' {{action "quit"}} disabled={{saving}}> <a href {{action "quit"}} class='action-link quit'>{{i18n "wizard.quit"}}</a>
{{fa-icon "chevron-left"}}
{{i18n "wizard.quit"}}
</button>
{{/if}} {{/if}}
{{#if showBackButton}} {{#if showBackButton}}
<button class='wizard-btn back' {{action "backStep"}} disabled={{saving}}> <a href {{action "backStep"}} class='action-link back'>{{i18n "wizard.back"}}</a>
{{fa-icon "chevron-left"}}
{{i18n "wizard.back"}}
</button>
{{/if}} {{/if}}
{{#if showNextButton}} {{#if showNextButton}}

4
app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6
View File

@ -61,10 +61,10 @@ test("Going back and forth in steps", assert => {
assert.ok(!exists('.wizard-btn.next')); assert.ok(!exists('.wizard-btn.next'));
assert.ok(exists('.wizard-btn.done'), 'last step shows a done button'); assert.ok(exists('.wizard-btn.done'), 'last step shows a done button');
assert.ok(exists('.wizard-btn.back'), 'shows the back button'); assert.ok(exists('.action-link.back'), 'shows the back button');
}); });
click('.wizard-btn.back'); click('.action-link.back');
andThen(() => { andThen(() => {
assert.ok(exists('.wizard-step-title')); assert.ok(exists('.wizard-step-title'));
assert.ok(exists('.wizard-btn.next')); assert.ok(exists('.wizard-btn.next'));

6
app/assets/stylesheets/wizard.scss
View File

@ -71,6 +71,12 @@ body.wizard {
} }
} }
.action-link {
margin-right: 1em;
text-decoration: none;
color: #6699ff;
}
.wizard-btn { .wizard-btn {
border-radius: 2px; border-radius: 2px;
font-size: 1.0em; font-size: 1.0em;