Commit 5884a8bd authored by yPhil's avatar yPhil
Browse files

New help section

- Menu items help tour
- Warranted a structure change
- New RTFM class for help /doc links
- CSS Cleanup
parent 63abde24
{
"name": "petrolette",
"description": "The news reader that doesn't know you",
"version": "v1.3.3",
"version": "v1.3.4",
"private": true,
"license": "GPL-3.0-only",
"HTTP_PORT": 8000,
......
......@@ -437,10 +437,6 @@ h1.rs-big-headline {
word-break: normal !important;
}
h3 {
margin-top: 0;
}
h1 {
color: var(--color-ui-sec);
margin-top: 0;
......@@ -853,13 +849,16 @@ li.feed {
width: 100%;
}
.introjs-tooltipReferenceLayer *,
.introjs-button,
.rs-widget,
.ui-widget {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}
.introjs-tooltipReferenceLayer *,
.introjs-button {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.introjs-button {
border: unset;
text-shadow: unset;
......@@ -1252,23 +1251,6 @@ th {
font-weight: bold;
}
.dialog button.help-button {
background-color: var(--color-ui-success);
color: var(--color-ui-pri);
padding: 0.4em;
}
#helpMiniButton {
font-size: 9pt;
font-weight: bold;
height: 20px;
padding: 1px;
position: absolute;
right: 2.8em;
top: 8px;
width: 120px;
}
li.ui-tabs-tab {
margin: 0 0 0 0 !important;
border-radius: 0 !important;
......@@ -1406,3 +1388,8 @@ button.ui-state-success {
.helpIcon:hover {
color: var(--color-ui-success);
}
code {
font-family: monospace !important;
color: var(--color-ui-sep);
}
......@@ -205,8 +205,6 @@ PTL.dialog = {
PTL.dialog.kill($dialog);
});
$(this).find('.help-button').button();
$(this).find('.helpBookmarklet')
.attr('href', 'javascript:void(window.open("' + window.location.href + '?add=" + window.location.href))');
......@@ -346,7 +344,6 @@ PTL.dialog = {
$okButton = $('.ui-dialog-buttonpane').find('.button-ok'),
$killFeedFieldset = $('fieldset#killFeedFieldset'),
$killFeedLegend = $('legend#killFeedLegend'),
$helpMiniButton = $('<button>'),
oldUrl = $dataStore.data('url'),
oldName = $dataStore.data('name'),
oldType = $dataStore.data('type'),
......
......@@ -334,10 +334,18 @@ PTL.i18n.translations = {
"Empty feed" : { fr: "Source vide" , ja: "空のソース", es: "fuente vacía" },
"View Pétrolette according to the time of day." : { fr: "Voir Pétrolette selon l'heure de la journée." , ja: "時刻に応じてPétroletteを表示する", es: "Ver Pétrolette según la hora del día." },
"Load / import a feeds file" : { fr: "Charger / importer un fichier de flux" , ja: "ソースファイルをロード/インポートします", es: "Cargar / Importar un archivo de fuentes" },
"Save / export a feeds file" : { fr: "Sauver / exporter un fichier de flux" , ja: "ソースファイルを保存/エクスポートします", es: "Guardar / exportar un archivo de fuentes" },
"Reset Pétrolette with the default feeds" : { fr: "Réinitialiser Pétrolette avec les flux par défaut" , ja: "デフォルトフィードでPétroletteをリセットします", es: "Restablecer Pétrolette con las fuentes predeterminadas" },
"Connection to the cloud to synchronize tabs and feeds on all your devices" : { fr: "Connexion au cloud pour synchroniser onglets et flux sur plusieurs appareils" , ja: "すべてのデバイスでタブとソースを同期させるためのクラウドへの接続", es: "Conexión a la nube para sincronizar las pestañas y las fuentes en todos sus dispositivos" },
"Preferred Search engine for building search feeds" : { fr: "Moteur de recherche préféré pour la construction de sources de recherche" , ja: "検索ソースを構築するための好ましい検索エンジン", es: "Motor de búsqueda preferido para la construcción de fuentes de búsqueda" },
"When you click an image, you can view it in a gallery, and start a slideshow." : { fr: "Un clic sur une image l'affiche dans une galerie." , ja: "イメージをクリックすると、ギャラリーでそのイメージを表示し、スライドショーを開始できます", es: "Cuando hace clic en una imagen, puede verla en una galería." },
"Help Pétrolette according to your spiritual mood of the day." : { fr: "Aider (en vrai) Pétrolette." , ja: "あなたの精神的な日の気分に応じてPétroletteを助けてください", es: "Ayuda a Pétrolette de acuerdo con tu estado de ánimo espiritual del día." },
"Loading of [%1] OK" : { fr: "Lecture de [%1] OK" , ja: "[%1]をロードしました。OK", es: "Cargado [%1] bien" },
"Connected to remote storage" : { fr: "Connecté au stockage distant" , ja: "リモートストレージに接続", es: "Conectado al almacenamiento remoto" },
......
......@@ -80,11 +80,29 @@ var PTL = (function() {
event.preventDefault();
});
$('nav#sideMenu .sideMenuTitleToggleDiv').click(function() {
$('nav#sideMenu .menuTourItem').each(function() {
const step = $(this).data('step');
$(this)
.parent()
.parent()
.append($('<i>')
.attr('class', 'icon-help helpIcon')
.attr('title', step)
.on('click', function() {
PTL.util.help('menu', step);
}));
});
$('nav#sideMenu .sideMenuSectionToggle').click(function() {
$(this).children('i').toggleClass('unfold');
$(this).next().toggle();
$(this).parent().next().toggle();
});
// $('nav#sideMenu .sideMenuTitleToggleDiv').click(function() {
// $(this).children('i').toggleClass('unfold');
// $(this).next().toggle();
// });
$('#ptlSearch i').click(function() {
$(this).prev('input').val('');
$('.results').removeClass('results');
......@@ -121,12 +139,10 @@ var PTL = (function() {
$('body').on('click','#menuButton', function() {
PTL.sideMenu('toggle');
// PTL.dialog.beg();
});
$('body').on('click','button#help', function() {
$('body').on('click','.helpLink', function() {
PTL.dialog.help();
// PTL.dialog.beg();
});
$('body').on('click','.newFeedButton', function() {
......
......@@ -235,11 +235,9 @@ PTL.util = {
},
help:function(type, step) {
PTL.sideMenu('close');
const dialog = introJs(step),
const dialog = introJs(),
menu = introJs(),
ui = introJs(step);
ui = introJs();
ui.setOptions({
steps: [
......@@ -360,24 +358,14 @@ PTL.util = {
menu.setOptions({
steps: [
{
element: 'button#fileImport',
intro: PTL.tr('Open / import tabs and feeds.')
},
{
element: 'button#saveTabs',
intro: PTL.tr('Save / Export tabs and feeds.')
},
{
element: 'div#themeBox',
intro: PTL.tr('View Pétrolette according to the time of day.')
},
{
element: 'fieldset#galleryBox',
intro: PTL.tr('When you click an image, you can view it in a gallery, and start a slideshow.')
title: PTL.tr('Feeds'),
element: 'fieldset.feedsMenuForm',
intro: '<h4>' + PTL.tr('Open') + '</h4>' + PTL.tr('Load / import a feeds file') + '<h4>' + PTL.tr('Save') + '</h4>' + PTL.tr('Save / export a feeds file') + '<h4>' + PTL.tr('Reset') + '</h4>' + PTL.tr('Reset Pétrolette with the default feeds') + '<h4>' + PTL.tr('Connection to storage') + '</h4>' + PTL.tr('Connection to the cloud to synchronize tabs and feeds on all your devices')
},
{
element: 'button#donate',
intro: PTL.tr('Help Pétrolette according to your spiritual mood of the day.')
title: PTL.tr('Search prefix'),
element: 'fieldset.searchPrefixFieldset',
intro: '<h4>' + PTL.tr('Search prefix') + '</h4>' + PTL.tr('Preferred Search engine for building search feeds') + '<h4>' + PTL.tr('Restore default') + '</h4>' + PTL.tr('Restore default search prefix') + ', currently <code>' + PTL.prefs.readConfig('searchPrefixDefault') + '</code>'
}
]
});
......@@ -392,24 +380,36 @@ PTL.util = {
dialog.setOption('skipLabel', 'x');
dialog.setOption('doneLabel', PTL.tr('Got it!'));
menu.setOption('prevLabel', PTL.tr('Prev'));
menu.setOption('nextLabel', PTL.tr('Next'));
menu.setOption('skipLabel', 'x');
menu.setOption('doneLabel', PTL.tr('Got it!'));
dialog.setOption('overlayOpacity', 0);
ui.setOption('overlayOpacity', 0.2);
dialog.setOption('hideNext', true);
dialog.setOption('hidePrev', true);
if (step) {
dialog.goToStepNumber(step).start();
} else if (type === 'menu') {
dialog.exit();
menu.start();
$('.introjs-fixParent').css('position', 'absolute');
} else if (type === 'dialog') {
menu.exit();
dialog.start();
if (type === 'dialog') {
PTL.sideMenu('close');
ui.exit();
menu.exit();
dialog.goToStepNumber(step).start();
}
if (type === 'menu') {
ui.exit();
dialog.exit();
menu.goToStepNumber(step).start();
}
} else {
PTL.sideMenu('close');
dialog.exit();
menu.exit();
$('#menu > .handle').click();
$('#tabs').tabs('option', 'active', 0);
$('.feed').first().find('.collapsible').show('fade', 'fast');
......
......@@ -155,9 +155,12 @@
<nav style="display:none;" id="sideMenu" class="menu">
<div class="sideMenuTitleToggleDiv ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Language">Language
<span class="sideMenuSectionToggle">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Language">
Language
</span>
</span>
</div>
<fieldset class="menuForm flexBox">
......@@ -191,16 +194,17 @@
</fieldset>
<div class="sideMenuTitleToggleDiv ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Help">
Help
<span class="sideMenuSectionToggle">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Help">
Help
</span>
</span>
</div>
<fieldset class="menuForm">
<div class="flexBox">
<button id="help"
class="grow translate help-button left"
<button class="grow translate left helpLink"
data-title="Documentation"
data-content="Help"
title="Documentation">
......@@ -218,10 +222,13 @@
</fieldset>
<div class="sideMenuTitleToggleDiv ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Feeds">
Feeds
<span class="sideMenuSectionToggle">
<i class="icon-right rotate unfold"></i>
<span class="translate menuTourItem"
data-step="1"
data-content="Feeds">
Feeds
</span>
</span>
</div>
<fieldset class="feedsMenuForm">
......@@ -262,10 +269,12 @@
</fieldset>
<div class="sideMenuTitleToggleDiv ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Theme">
Theme
<span class="sideMenuSectionToggle">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Theme">
Theme
</span>
</span>
</div>
<fieldset class="menuForm">
......@@ -275,9 +284,12 @@
</fieldset>
<div class="sideMenuTitleToggleDiv ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Media preloading">Media preloading
<span class="sideMenuSectionToggle">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Media preloading">
Media preloading
</span>
</span>
</div>
<fieldset class="menuForm">
......@@ -287,9 +299,12 @@
</fieldset>
<div class="sideMenuTitleToggleDiv ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Image gallery">Image gallery
<span class="sideMenuSectionToggle">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Image gallery">
Image gallery
</span>
</span>
</div>
<fieldset id="galleryBox"
......@@ -342,12 +357,16 @@
</fieldset>
<div class="sideMenuTitleToggleDiv ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Search prefix">Search prefix
<span class="sideMenuSectionToggle">
<i class="icon-right rotate unfold"></i>
<span class="translate menuTourItem"
data-step="2"
data-content="Search prefix">
Search prefix
</span>
</span>
</div>
<fieldset class="menuForm">
</div>
<fieldset class="menuForm searchPrefixFieldset">
<div class="flexBox">
<input name="searchPrefix"
id="searchPrefixInput"
......@@ -404,9 +423,12 @@
</fieldset>
<div class="sideMenuTitleToggleDiv ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Support">Support
<span class="sideMenuSectionToggle">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Support">
Support
</span>
</span>
</div>
<fieldset>
......@@ -420,10 +442,14 @@
</div>
</fieldset>
<div class="sideMenuTitleToggleDiv ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Console">Console
<span class="sideMenuSectionToggle">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Console">
Console
</span>
</span>
</div>
<fieldset>
......
Supports Markdown
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