Commit 9345818f authored by yPhil's avatar yPhil

Inline help

parent 6bb27376
......@@ -500,9 +500,9 @@
}
},
"feedrat": {
"version": "0.1.29",
"resolved": "https://registry.npmjs.org/feedrat/-/feedrat-0.1.29.tgz",
"integrity": "sha512-DXKz4nb8ZwxR2nM7OMDl/7IgGrcTaIdC4LXrmO7/l9mAYALIyjt83FU9Pe/ctBz1UNS4lZrPgJwulUgxARWbHQ==",
"version": "0.1.30",
"resolved": "https://registry.npmjs.org/feedrat/-/feedrat-0.1.30.tgz",
"integrity": "sha512-02weAQzLm+M0ar6Q6qjccxwmPEv7mzBVhzsaVBHus3EAkQ45AqXZVk9r3Gc6XWqIRV70VZPE9tym+DAKyfanXA==",
"requires": {
"request": "2.83.0"
}
......
:root {
--main-bg-color: red;
--ui-bg-color: red;
--ui-bg-color-pri: red;
--ui-bg-color-pri: #2B374B;
--ui-bg-color-sec: red;
--ui-color-pri: #eeeeee;
--ui-color-sec: red;
--ui-color-danger: #660000;
}
h1, h2 {
color: var(--ui-color-pri) !important;
}
p.dialog > a:link {
color: var(--ui-color-pri) !important;
}
p.dialog > a:visited {
color: var(--ui-color-pri) !important;
}
select {
width:100%;
height: 30px;
......@@ -44,7 +56,7 @@ p, label {
fieldset,
legend {
background-color: #2B374B !important;
background-color: var(--ui-bg-color-pri) !important;
color: #BFD8D1 !important;
/* font-size:76% !important; */
}
......@@ -161,7 +173,7 @@ button#donate {
}
.logoItem {
flex: 1 1 30%;
flex: 1 1 auto;
}
.tabCloser {
......@@ -189,6 +201,7 @@ button#donate {
#menu > .handle > i {
border: none !important;
line-height: 0 !important;
}
#menu {
......@@ -458,3 +471,9 @@ img.icon-warning {
p.dialog-warning {
font-size:26pt;
}
/* Hacks & workarounds */
button > i {
margin-right: .3em !important;
}
......@@ -3,24 +3,14 @@ MOB.dialog = {
$dialog.dialog('destroy');
$('#mobDialogs').empty();
},
help:function($button) {
help:function() {
var $tabs = $('#tabs');
var $a = $button.prev('a.ui-tabs-anchor');
var tabId = $a.attr('href');
var $selectedTab = $a.parent();
var $selectedPanel = $tabs.find(tabId);
$('#mobDialogs').load('/static/templates/dialogs.html #helpDialog', function() {
var selectedTabIndex = $tabs.tabs('option', 'active');
var previousTabIndex = selectedTabIndex === 0 ? 0 : selectedTabIndex -1;
$('#mobDialogs').load('/static/templates/dialogs.html #killDialog', function() {
var $dialog = $('#killDialog');
var $dialog = $('#helpDialog');
$dialog.dialog({
title: MOB.tr('Tab: Kill'),
title: MOB.tr('Help'),
autoOpen: false,
closeOnEscape: true,
resizable: false,
......@@ -29,24 +19,8 @@ MOB.dialog = {
modal: true,
buttons: [
{
text: MOB.tr('Delete'),
title: MOB.tr('Delete'),
icon: "ui-icon-alert",
class: "dangerous translate",
click: function() {
$selectedTab.remove();
$selectedPanel.remove();
MOB.tab.saveTabs();
MOB.dialog.kill($dialog);
$tabs.tabs('option', 'active', previousTabIndex).tabs('refresh');
}
},
{
text: MOB.tr('Cancel'),
title: MOB.tr('Cancel'),
text: MOB.tr('Ok'),
title: MOB.tr('Ok'),
class: 'translate',
click: function() {
MOB.dialog.kill($dialog);
......@@ -55,12 +29,17 @@ MOB.dialog = {
],
open: function () {
MOB.utilities.translate();
$('button#aide-un').click(function (event) {
event.preventDefault();
MOB.utilities.help('ui');
});
$('.ui-widget-overlay').on('click', function() {
MOB.dialog.kill($dialog);
});
$dialog.children('p').append(MOB.tr('Really delete this tab? (%1, %2 sources)', $a.text(), $selectedPanel.find('li.feed').length));
}
});
......
......@@ -75,6 +75,8 @@ MOB.i18n.translations = {
"Slideshow speed" : { fr: "Vitesse du diaporama" , ja: "スライドショーのスピード", es: "Velocidad de la presentación" },
"Slide transition" : { fr: "Transition image" , ja: "画像の遷移", es: "Transición de imagen" },
"Help" : { fr: "Aide" , ja: "助けて", es: "Ayuda" },
"Petrolette?" : { fr: "Pétrolette ?" , ja: "Petrolette?", es: "¿Petrolette?" },
"English" : { fr: "English" , ja: "English", es: "English" },
"Français" : { fr: "Français" , ja: "Français", es: "Français" },
"日本語" : { fr: "日本語" , ja: "日本語", es: "日本語" },
......@@ -99,6 +101,21 @@ MOB.i18n.translations = {
"Day" : { fr: "Jour" , ja: "", es: "día" },
"Night" : { fr: "Nuit" , ja: "", es: "Noche" },
// Help
"This is a tab. It contains sources." : { fr: "Ceci est un onglet ; un onglet contient des sources." , ja: "これはタブです。 それはソースを含んでいます。", es: "Esta es una pestaña. Contiene fuentes." },
"This is a source." : { fr: "Ceci est une source." , ja: "これはソースです", es: "Esta es una fuente." },
"Click this button to create a new tab." : { fr: "Cliquez sur ce bouton pour créer un nouvel onglet." , ja: "新しいタブを作成するには、このボタンをクリックします。", es: "Haga clic en este botón para crear una nueva pestaña." },
"Click here to add a source." : { fr: "Cliquer ici pour ajouter une source." , ja: "ソースを追加するには、このボタンをクリックします。", es: "Haga clic en este botón para agregar una fuente." },
"What is Petrolette?" : { fr: "Qu'est-ce que Petrolette?" , ja: "Petroletteとは何ですか?", es: "¿Qué es Petrolette?" },
"How do I use it?" : { fr: "Comment ça marche ?" , ja: "どうやって使うの?", es: "¿Como lo uso?" },
"Petrolette is your news reader. Find new sources, sort them in categories, you are on the in-ter-net." : { fr: "Petrolette est un lecteur de sources. Trouver de nouvelles sources, les trier dans les catégories, c'est l'in-ter-net." , ja: "Petroletteはあなたのニュースリーダーです。 新しいソースを見つけ、カテゴリで並べ替え、あなたはインターネット上にいます。", es: "Petrolette es tu lector de noticias. Encuentra nuevas fuentes, clasifícalas en categorías, estás en la red interna." },
"Learn how to use <a id='aide-un' href='#'>the tabs and the sources, and Petrolette in general." : { fr: "Apprenez à utiliser <a id='aide-un' href='#'>les onglets et les sources</a>, et Petrolette en général." , ja: "タブとソース、および一般的なPetroletteの使い方を学んでください。", es: "Aprenda cómo usar <a id='aide-un' href='#'>las pestañas y las fuentes</a>, y Petrolette en general." },
"Learn how to use" : { fr: "Apprenez à utiliser" , ja: "タブとソース、および一般的なPetroletteの使い方を学んでください。", es: "Aprenda cómo usar" },
"and Petrolette in general." : { fr: "et Petrolette en général." , ja: "Petroletteの使い方を学んでください。", es: "y Petrolette en general." },
"the tabs and the sources" : { fr: "les onglets et les sources" , ja: "タブとソース", es: "las pestañas y las fuentes" },
// Profile
"Are you" : { fr: "Es-tu" , ja: "あなたは", es: "¿Eres un" },
......
......@@ -46,7 +46,8 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
$help.click(function (event) {
event.preventDefault();
MOB.utilities.help('menu');
MOB.dialog.help();
// MOB.utilities.help('menu');
// window.open('https://bitbucket.org/yphil/mobylette/wiki/Home', '_blank');
});
......@@ -82,7 +83,7 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
var gallerySlideshowSpeed = MOB.prefs.readConfig('gallerySlideshowSpeed');
var gallerySlideTransition = MOB.prefs.readConfig('gallerySlideTransition');
$.fancybox.defaults.thumbs.autoStart = true;
// $.fancybox.defaults.thumbs.autoStart = true;
$.fancybox.defaults.transitionEffect = gallerySlideTransition;
$.fancybox.defaults.slideShow.speed = gallerySlideshowSpeed;
......
......@@ -34,6 +34,9 @@ MOB.tab = {
$("div#tabs").tabs('option', 'active', 0);
$('li.mobTab').last().addClass('lastTab');
$('li.mobTab').first().addClass('firstTab');
},
all:function() {
var myTabs = [];
......
......@@ -15,8 +15,57 @@ MOB.utilities = {
},
help:function(type) {
var dialog = introJs();
var menu = introJs();
var dialog = introJs(),
menu = introJs(),
ui = introJs();
dialog.setOptions({
steps: [
{
element: 'input#feedGuess',
intro: '<span class="translate" data-content="Enter a website address/URL and click search, then OK, or simply enter the URL of the">' + MOB.tr('Enter a website address/URL and click search, then OK, or simply enter the URL of the') + '</span> <a class="translate rssDocLink" data-content="Feed" href="https://' + MOB.language + '.wikipedia.org/wiki/RSS">' + MOB.tr('feed') + '</a>.'
},
{
element: 'button#feedGuess',
intro: MOB.tr('Find the website\'s RSS feed')
},
{
element: 'div#feedTitle',
intro: MOB.tr('What type of feed? All text, all image, or mixed'),
position: 'left'
},
{
element: 'fieldset#feedLimit',
intro: MOB.tr('How many new items should the feed display at a time?'),
position: 'bottom'
},
{
element: '.button-ok',
intro: MOB.tr('Ok')
}
]
});
ui.setOptions({
steps: [
{
element: 'li.mobTab',
intro: MOB.tr('This is a tab. It contains sources.') + '<div class="wiki ui-corner-all"><a href="https://bitbucket.org/yphil/petrolette/wiki/Home#markdown-header-importexport-tabs"><i class="icon-help-circled"></i></a></div>'
},
{
element: 'li.feed',
intro: MOB.tr('This is a source.') + '<div class="wiki ui-corner-all"><a href="https://bitbucket.org/yphil/petrolette/wiki/Home#markdown-header-how-do-i-use-it"><i class="icon-help-circled"></i></a></div>'
},
{
element: 'li#newTabButton',
intro: MOB.tr('Click this button to create a new tab.') + '<div class="wiki ui-corner-all"><a href="https://bitbucket.org/yphil/petrolette/wiki/Home#markdown-header-how-do-i-use-it"><i class="icon-help-circled"></i></a></div>'
},
{
element: '.handle.newFeed',
intro: MOB.tr('Click here to add a source.') + '<div class="wiki ui-corner-all"><a href="https://bitbucket.org/yphil/petrolette/wiki/Home#markdown-header-how-do-i-use-it"><i class="icon-help-circled"></i></a></div>'
}
]
});
dialog.setOptions({
steps: [
......@@ -49,11 +98,11 @@ MOB.utilities = {
steps: [
{
element: 'button#fileImport',
intro: MOB.tr('Open / import tabs and feeds.') + '<div class="wiki ui-corner-all"><a href="https://bitbucket.org/yphil/mobylette/wiki/Home#markdown-header-importexport-tabs"><i class="icon-help-circled"></i></a></div>'
intro: MOB.tr('Open / import tabs and feeds.') + '<div class="wiki ui-corner-all"><a href="https://bitbucket.org/yphil/petrolette/wiki/Home#markdown-header-importexport-tabs"><i class="icon-help-circled"></i></a></div>'
},
{
element: 'button#saveTabs',
intro: MOB.tr('Save / Export tabs and feeds.') + '<div class="wiki ui-corner-all"><a href="https://bitbucket.org/yphil/mobylette/wiki/Home#markdown-header-how-do-i-use-it"><i class="icon-help-circled"></i></a></div>'
intro: MOB.tr('Save / Export tabs and feeds.') + '<div class="wiki ui-corner-all"><a href="https://bitbucket.org/yphil/petrolette/wiki/Home#markdown-header-how-do-i-use-it"><i class="icon-help-circled"></i></a></div>'
},
{
element: 'label#dropTabLabel',
......@@ -61,7 +110,7 @@ MOB.utilities = {
},
{
element: 'div#themeBox',
intro: MOB.tr('View Mobylette according to the time of day.')
intro: MOB.tr('View Petrolette according to the time of day.')
},
{
element: 'fieldset#galleryBox',
......@@ -69,25 +118,37 @@ MOB.utilities = {
},
{
element: 'button#profile',
intro: MOB.tr('Reset Mobylette according to your political mood of the week.')
intro: MOB.tr('Reset Petrolette according to your political mood of the week.')
},
{
element: 'button#donate',
intro: MOB.tr('Help Mobylette according to your spiritual mood of the day.')
intro: MOB.tr('Help Petrolette according to your spiritual mood of the day.')
}
]
});
dialog.setOption("overlayOpacity", 0);
menu.setOption("overlayOpacity", 0.2);
ui.setOption("overlayOpacity", 0.2);
ui.setOption("showStepNumbers", false);
ui.setOption("nextLabel", '');
ui.setOption("prevLabel", '');
ui.setOption("skipLabel", '...');
ui.setOption("doneLabel", '.');
if (type === 'menu') {
dialog.exit();
menu.start();
$('.introjs-fixParent').css('position', 'absolute');
} else {
} else if (type === 'dialog') {
menu.exit();
dialog.start();
} else {
dialog.exit();
$('#menu > .handle').click();
$('.ui-dialog-titlebar-close').click();
ui.start();
}
},
......
......@@ -10,6 +10,31 @@
</p>
</div>
<div id="helpDialog" title="Petrolette">
<h1 class="translate"
data-title="What is Petrolette?"
data-content="What is Petrolette?">What is Petrolette?</h1>
<p class="translate"
data-title="Petrolette is your news reader. Find new sources, sort them in categories, you are on the in-ter-net."
data-content="Petrolette is your news reader. Find new sources, sort them in categories, you are on the in-ter-net.">
Petrolette is your news reader. Find new sources, sort them in categories, you are on the in-ter-net.
</p>
<h2 class="translate"
data-title="How do I use it?"
data-content="How do I use it?">How do I use it?</h2>
<p>
<span class="dialog translate"
data-content="Learn how to use">Learn how to use</span>
<button id="aide-un"
class="translate"
data-content="the tabs and the sources">
the tabs and the sources
</button>
<span class="dialog translate"
data-content="and Petrolette in general.">and Petrolette in general.</span>
</p>
</div>
<div id="renameTabDialog">
<form>
<fieldset class="prefsForm ui-widget ui-widget-content ui-corner-all">
......
......@@ -163,10 +163,11 @@
<div class="flexBox">
<button id="help"
class="unique icon-motorcycle translate"
data-content="Help"
data-title="Help">
Help
class="unique">
<i class="icon-motorcycle"></i>
<span class="translate"
data-content="Petrolette?"
data-title="Petrolette?">Petrolette?</span>
</button>
<button id="profile"
......
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