IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Move step text into progress bar

Browse Source
This commit is contained in:
Robin Ward
2016-09-20 14:04:18 -04:00
parent 9938f9bd67
commit f4f1569e0c
3 changed files with 48 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/wizard/components/wizard-step.js.es6
View File

@@ -52,10 +52,13 @@ export default Ember.Component.extend({
}
},
@computed('step.displayIndex', 'wizard.totalSteps')
@computed('step.index', 'wizard.totalSteps')
barStyle(displayIndex, totalSteps) {
const ratio = parseFloat(displayIndex) / parseFloat(totalSteps) * 100;
return Ember.String.htmlSafe(`width: ${ratio}%`);
let ratio = parseFloat(displayIndex) / parseFloat(totalSteps - 1);
if (ratio < 0) { ratio = 0; }
if (ratio > 1) { ratio = 1; }
return Ember.String.htmlSafe(`width: ${ratio * 200}px`);
},
autoFocus() {

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

@@ -20,11 +20,12 @@
</div>
<div class='wizard-step-footer'>
<div class='wizard-progress'>
<div class='text'>{{bound-i18n "wizard.step" current=step.displayIndex total=wizard.totalSteps}}</div>
<div class='bar-container'>
<div class='bar-contents' style={{barStyle}}></div>
</div>
<div class='white'></div>
<div class='black' style={{barStyle}}></div>
<div class='screen'></div>
<span>{{bound-i18n "wizard.step" current=step.displayIndex total=wizard.totalSteps}}</span>
</div>
<div class='wizard-buttons'>