tutorial with localization added to stopwatch activity

[ksraj123]

fixes #596

• Should display a welcome message to explain the activity (could reuse the help message describing the activity in Sugarizer activities List view)
• Should explain usage of each button in the toolbar
• Should explain usage of each element in the UI
• Should be localized
• Should respect the Sugarizer UI, as explained in tutorial

[Swayamsvk]

I don't think this fix supports other languages.

[ksraj123]

Code for localization has been set up. Native Speakers will translate the messages.

[ksraj123]

Added Scrolling support to the tutorial.

[llaske]

Nice start. See my comments below.

[llaske]

That's fine but something is wrong regarding the font/style used by popup. See for example this comparison with another tutorial:

Plus, could you reorder items in steps array? The idea is too put at first the most important. So I guess it could be: start button, reinit, time laps, counter, remove button, add button, ...

[ksraj123]

Issues fixed based on suggestions

• Font issue in tutorial fixed. Unlike other activities, this one was using bootstrap already and bootstrap.min.css and bootstrap-tour-standalone.min.css had conflicting properties for some classes. I guess this was causing the issue.
• Reordered tutorials popups.
• Pop up for Add Stopwatch button made to appear on top if it has little space below it. The popup overlaps with the button when all stopwatches are removed if it is fixed to top so conditional logic is needed.

Before -
The pop up touching the bottom of the screen does not look alight. Problem specially noticable when the App Stopwatch button is out of view and needs to be scrolled to.

After Changes -

[abhishektanwar]

@ksraj123 I believe the styling problem still persist in the popup .

[ksraj123]

@abhishektanwar I think bootstrap was overriding the line-height of popup title as well, fixed that. Apart from that they look the same to my eyes.

[llaske]

Hmm I suggest to try to use bootstrap-tour.min.css instead of bootstrap-tour-standalone.min.css because the later already include bootstrap.min.css. It could the reason of the conflict.

Could you also solve conflict related to PR merged since your last commit?

[ksraj123]

@llaske suggested changes made and merge conflict resolved. Please review.
Apologies for the delay, had my university exams going on.

boostrap-tour-standalone.css and bootstrap-tour-standalone.js replaced with bootstrap-tour.css and bootstrap-tour.js respectively of the same version of bootstrap tour i.e. v10.2. The bootstrap-tour-standalone used in this project and others which have same styling included v3.1.0 of bootstrap but this project was already using v3.3.4 and this difference in versions of bootstrap is the root cause of all styling issues in tutorial of this activity. Now since bootstrap-tour.css does not have its own appropriate copy of bootstrap issues become apparent again.

Issue fixed by overriding concerned conflicting properties of bootstrap v3.3.4 with their v3.1.0 counterparts in activity.css file.

[llaske]

Nice. The UI issue is now fixed.

BTW the localization doesn't work: the Sugarizer language settings is not used.
It's probably related to the fact that it's not initialized in the activity. See here for more.

[ksraj123]

@llaske Suggested change made, Localisation initialised.