Add button to trigger onboarding.
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue Tue May 02 14:03:27 2017 +0200
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue Tue May 02 14:22:34 2017 +0200
@@ -61,12 +61,18 @@
</div>
<div class="controls" v-show="loaded">
<div class="controls-left">
- <button data-intro="Visualisez toutes les annotations" data-position="top" @click="toggleReadonly" type="button" class="btn"
+ <button
+ data-intro="Visualisez toutes les annotations"
+ data-position="top"
+ @click="toggleReadonly" type="button" class="btn"
v-bind:class="{ 'active': readonly }"
v-show="isAuthenticated">
<i class="fa fa-eye"></i>
</button>
- <button data-intro="Changez de mode" data-position="top" @click="toggleReadonly" type="button" class="btn"
+ <button
+ data-intro="Changez de mode"
+ data-position="top"
+ @click="toggleReadonly" type="button" class="btn"
v-show="isAuthenticated">
<i v-show="readonly" class="fa fa-toggle-on" style="transform: rotate(180deg)"></i>
<i v-show="!readonly" class="fa fa-toggle-on"></i>
@@ -109,7 +115,9 @@
</button>
</div>
</div>
-
+ <div class="help">
+ <a href="#" class="btn btn-default" v-on:click.stop.prevent="showOnboarding"><i class="fa fa-question-circle"></i></a>
+ </div>
</div>
</template>
@@ -245,17 +253,7 @@
if (!onboarding) {
setTimeout(() => {
- var intro = introJs.introJs();
- intro.setOptions({
- nextLabel: 'Suivant',
- prevLabel: 'Précédent',
- skipLabel: 'J\'ai compris',
- doneLabel: 'Terminé'
- })
- intro.onexit(function() {
- Cookies.set('__iconolab_onboarding', 'true', { expires: 365 });
- })
- intro.start()
+ this.startOnboarding();
}, 1000);
}
},
@@ -597,6 +595,25 @@
});
});
+ },
+
+ showOnboarding: function(e) {
+ this.startOnboarding();
+ },
+
+ startOnboarding: function() {
+ const intro = introJs.introJs();
+
+ intro.setOptions({
+ nextLabel: 'Suivant',
+ prevLabel: 'Précédent',
+ skipLabel: 'J\'ai compris',
+ doneLabel: 'Terminé'
+ })
+ intro.onexit(function() {
+ Cookies.set('__iconolab_onboarding', 'true', { expires: 365 });
+ })
+ intro.start()
}
}
}
@@ -667,4 +684,10 @@
border-bottom-right-radius: 4px;
}
+.help {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+
</style>