Commit 6576998e authored by yPhil's avatar yPhil
Browse files

Help tour in beg dialog

parent a3d96cc3
Pipeline #391928 passed with stage
in 42 seconds
......@@ -38,7 +38,7 @@ To view the same feeds on your phone, either export / import the `petrolette.con
### Client-side
- [The "folded" flows remain so, considerably speeding up the start-up](https://framagit.org/yphil/petrolette/-/blob/master/public/js/PTL.feed.js#L201)
- [The "folded" feeds remain so, considerably speeding up the start-up](https://framagit.org/yphil/petrolette/-/blob/master/public/js/PTL.feed.js#L201)
- [Configurable search feed engine](https://framagit.org/yphil/petrolette/-/blob/master/public/js/PTL.prefs.js#L105)
- [Scrollable menu, collapsible elements](https://framagit.org/yphil/petrolette/-/blob/master/public/js/PTL.main.js#L52)
- [New themes](https://framagit.org/yphil/petrolette/-/blob/master/public/css/themes/night.css)
......
......@@ -1284,8 +1284,10 @@ div.introjs-helperLayer {
/* IntroJS (help tooltips) */
.introjs-tooltip {
background-color: var(--color-ui-qua) !important;
border: 1px solid var(--color-ui-sep);
border: 1px solid var(--color-ui-oct);
color: var(--color-ui-pri) !important;
width: 360px !important;
max-width: 360px !important;
}
/* Gallery */
......@@ -1390,7 +1392,7 @@ div#logo-title > .logo-title > a:hover {
background-color: var(--color-ui-qua);
border: 1px solid var(--color-ui-oct);
border-radius: 5px;
width: 320px;
width: 360px;
/* height: 220px; */
max-width: 100%;
padding: 2em;
......@@ -1406,7 +1408,7 @@ div#logo-title > .logo-title > a:hover {
}
#beggar > a.ui-button {
margin-top: 1em;
margin: 1em 0 0.5em 0;
}
#beggar > p {
......
......@@ -5,12 +5,12 @@ PTL.dialog = {
$dialog.dialog('destroy');
$('#dialogs').empty();
},
nagUser:function() {
beg:function() {
const $beggar = $('#beggar'),
$beggarH4 = $('#beggar > h4'),
$beggarOkButton = $('#beggar > #beggarOkButton'),
$beggarNoButton = $('#beggar > #beggarNoButton');
$beggarTourButton = $('#beggar > #beggarTourButton');
$beggarOkButton.on('click', function() {
$beggar.fadeOut('fast');
......@@ -21,8 +21,13 @@ PTL.dialog = {
$beggar.fadeOut('fast');
});
$beggarNoButton.on('click', function() {
$beggarTourButton.on('click', function() {
$beggar.fadeOut('fast');
PTL.sideMenu('close');
$('#tabs').tabs('option', 'active', 0);
PTL.util.help('ui');
});
$beggar.fadeIn('fast');
......
......@@ -236,6 +236,9 @@ PTL.i18n.translations = {
"Drag to the bookmark bar" : { fr: "Glisser dans la barre de favoris" , ja: "ブックマークバーにドラッグ", es: "Arrastre a la barra de marcador" },
"This is a feed. More info: %1" : { fr: "Ceci est un flux. Plus d'infos: %1" , ja: "これはソースです 詳細情報:%1", es: "Esta es una fuente. Más info: %1" },
"This is an RSS feed." : { fr: "Ceci est un flux RSS." , ja: "これはソースです 詳細情報", es: "Esta es una fuente." },
"Click this button to add a tab" : { fr: "Cliquez sur ce bouton pour ajouter un onglet" , ja: "グループを追加するには、このボタンをクリックします。", es: "Haga clic en este botón para agregar un grupo" },
"Source code" : { fr: "Code source" , ja: "ソースコード", es: "Código fuente" },
......@@ -243,6 +246,12 @@ PTL.i18n.translations = {
"Click to add a feed" : { fr: "Cliquer pour ajouter un flux" , ja: "ソースを追加するにはクリックしてください", es: "Haga clic para agregar una fuente" },
"Click to add a feed." : { fr: "Cliquer pour ajouter un flux." , ja: "ソースを追加するにはクリックしてください", es: "Haga clic para agregar una fuente." },
"You are in control now" : { fr: "Vous êtes à la barre maintenant" , ja: "あなたは今コントロールしています", es: "Tu tienes el control ahora" },
"Use the menu to configure Pétrolette" : { fr: "Utilisez le menu pour configurer Pétrolette" , ja: "メニューを使用してPétroletteを構成します", es: "Usa el menú para configurar Pétrolette" },
"Refresh / reload this feed" : { fr: "Actualiser / recharger ce flux" , ja: "このソースを更新/再読み込みしてください。", es: "Actualiza / recarga esta fuente" },
"feeds loaded" : { fr: "flux chargés" , ja: "ソースが読み込まれました", es: "fuentes cargadas" },
......@@ -266,6 +275,8 @@ PTL.i18n.translations = {
"Welcome to Pétrolette" : { fr: "Bienvenue dans Pétrolette" , ja: "ペトロレットへようこそ", es: "Bienvenido a Pétrolette" },
"Learn to use it in a few easy steps" : { fr: "Apprenez à l'utiliser en quelques étapes faciles" , ja: "いくつかの簡単なステップでそれを使用することを学ぶ", es: "Aprenda a usarlo en unos sencillos pasos" },
"How does it work?" : { fr: "Comment ça marche ?" , ja: "どのように機能するのですか?", es: "¿Como funciona?" },
"Take the tour" : { fr: "Visite guidée" , ja: "ガイド付き訪問", es: "Visita guiada" },
"Pétrolette uses a time-tested technology" : { fr: "Pétrolette fonctionne sur une technologie éprouvée" , ja: "Pétroletteは時間を守った技術を使用しています", es: "Pétrolette utiliza una tecnología probada" },
......@@ -455,9 +466,13 @@ PTL.i18n.translations = {
"Select this feed (%1)" : { fr: "Sélectionner ce flux (%1)", ja: "RSS(%1)フィードを選択", es: "Selecciona este feed (%1)" },
"Configure this feed" : { fr: "Configurer ce flux." , ja: "このソースを設定します。", es: "Configura esta fuente." },
"Configure this feed" : { fr: "Configurer ce flux" , ja: "このソースを設定します", es: "Configura esta fuente" },
"Configure this feed." : { fr: "Configurer ce flux." , ja: "このソースを設定します。", es: "Configura esta fuente." },
"Delete this feed" : { fr: "Supprimer ce flux" , ja: "このソースを削除してください", es: "Eliminar esta fuente" },
"Delete this feed" : { fr: "Supprimer ce flux." , ja: "このソースを削除してください。", es: "Eliminar esta fuente." },
"Delete this feed." : { fr: "Supprimer ce flux." , ja: "このソースを削除してください。", es: "Eliminar esta fuente." },
"Delete feed" : { fr: "Supprimer flux" , ja: "このソースを削除してください", es: "Eliminar esta fuente" },
......
......@@ -63,7 +63,8 @@ var PTL = (function() {
});
$('body').on('click','.help-button', function() {
PTL.dialog.help();
// PTL.dialog.help();
PTL.dialog.beg();
});
$('body').on('click','.new-feed-button', function() {
......
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
PTL.util = {
nagUser:function() {
beg:function() {
var nextNag = PTL.prefs.readConfig('nextNag');
const dateNow = Date.now();
PTL.util.console(PTL.tr('Pétrolette needs you, nextNag is ' + nextNag), 'success');
// PTL.dialog.nagUser();
// PTL.dialog.beg();
if (nextNag === 0) {
PTL.dialog.nagUser();
PTL.dialog.beg();
console.log('dateNow: %s (%s)', dateNow);
PTL.prefs.writeConfig('nextNag', dateNow + 43200000); // 12 hours
}
......@@ -19,7 +19,7 @@ PTL.util = {
if (dateNow > nextNag) {
console.log('YUP nextNag: %s dateNow: %s (< %s)', nextNag, dateNow, nextNag + 120000 < dateNow);
PTL.prefs.writeConfig('nextNag', dateNow + 43200000);
PTL.dialog.nagUser();
PTL.dialog.beg();
} else {
console.log('NOPE nextNag: %s dateNow: %s (< %s)', nextNag, dateNow, nextNag + 120000 < dateNow);
}
......@@ -207,9 +207,13 @@ PTL.util = {
ui.setOptions({
steps: [
{
title: 'That is what it is all about',
title: PTL.tr('Welcome to Pétrolette'),
intro: PTL.tr('Learn to use it in a few easy steps') + ' 👋'
},
{
title: PTL.tr("That's what it's all about"),
element: 'li.feed',
intro: PTL.tr('This is a feed. ') + '<a class="helpLink" href="https://' + PTL.language + '.wikipedia.org/wiki/RSS"><i class="icon-help"></i></a>'
intro: PTL.tr('This is an RSS feed.') + ' <a class="helpLink" href="https://' + PTL.language + '.wikipedia.org/wiki/RSS"><i class="icon-help"></i></a>'
},
{
title: PTL.tr('Keep everything tidy'),
......@@ -219,32 +223,27 @@ PTL.util = {
{
title: PTL.tr('Well you know how a tab works') + ' 😉',
element: 'li[aria-controls=tab-2]',
intro: PTL.tr('Click on a group tab to display it ; Click the current/selected group tab to change its name and position.')
intro: PTL.tr('Click on a group tab to display it ; Click the current/selected group tab to change its name and position. Drag to sort tabs.')
},
{
title: PTL.tr('Add a new feed.'),
title: PTL.tr('Add a new feed'),
element: 'div#newFeedButton',
intro: PTL.tr('Click to add a feed.')
},
{
title: PTL.tr('Refresh / reload this feed.'),
title: PTL.tr('Refresh / reload this feed'),
element: '.feed-refresh',
intro: PTL.tr('Get the latest articles.')
},
{
title: PTL.tr('Configure this feed.'),
title: PTL.tr('Configure this feed'),
element: '.feed-edit',
intro: PTL.tr('Configure this feed')
intro: PTL.tr('Configure this feed.')
},
{
title: PTL.tr('B-bye!'),
element: '.feed-delete',
intro: PTL.tr('Delete this feed')
},
{
title: PTL.tr('Select this feed (for drag & drop).'),
title: PTL.tr('Keep everything tidy'),
element: '.feed-select',
intro: PTL.tr('Keep everything tidy')
intro: PTL.tr('Select this feed (for drag & drop).')
},
{
title: 'Grip handle',
......@@ -255,6 +254,16 @@ PTL.util = {
title: PTL.tr('Fold / unfold this feed.'),
element: 'div.feed-toggle',
intro: PTL.tr('Folded feeds are not loaded at startup, so as to speed things up.')
},
{
title: PTL.tr('B-bye!'),
element: '.feed-delete',
intro: PTL.tr('Delete this feed.')
},
{
title: PTL.tr('You are in control now'),
element: 'div#menuButton',
intro: PTL.tr('Use the menu to configure Pétrolette')
}
]
});
......@@ -346,10 +355,6 @@ PTL.util = {
dialog.setOption('overlayOpacity', 0);
ui.setOption('overlayOpacity', 0.2);
ui.setOption('hideNext', true);
ui.setOption('hidePrev', true);
ui.setOption('showStepNumbers', false);
dialog.setOption('hideNext', true);
dialog.setOption('hidePrev', true);
......@@ -367,7 +372,7 @@ PTL.util = {
ui.start();
}
$('.introjs-button').button();
// $('.introjs-button').button();
},
translate:function() {
......
......@@ -464,7 +464,7 @@
(function(){
setTimeout(function(){
PTL.util.nagUser();
PTL.util.beg();
}, 60000);
})();
......@@ -486,14 +486,23 @@
Please consider to support the Pétrolette project by sending a donation. Even the smallest amount will help a lot.
</p>
<a id="beggarNoButton" href="https://liberapay.com/yPhil/donate"
<a href="https://liberapay.com/yPhil/donate"
id="beggarOkButton"
class="ui-button ui-corner-all unique translate"
data-title="Donate"
title="Donate"
data-content="Ok">
Ok
data-content="Donate">
Donate
</a>
<button id="beggarTourButton"
class="ui-button ui-corner-all unique translate"
data-title="Take the tour"
title="Take the tour"
data-content="Take the tour">
Take the tour
</button>
</div>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment