Implemented a short tour.

app/Http/Controllers/JsonController.php

@@ -24,6 +24,61 @@ use Steam;
 class JsonController extends Controller
 {
 
+    /**
+     *
+     */
+    public function tour()
+    {
+        $headers = [
+            'main-content',
+            'sidebar-toggle',
+            'account-menu',
+            'budget-menu',
+            'report-menu',
+            'transaction-menu',
+            'option-menu',
+            'main-content-end'
+        ];
+        $steps   = [];
+        foreach ($headers as $header) {
+            $steps[] = [
+                'element' => "#" . $header,
+                'title'   => trans('help.' . $header . '-title'),
+                'content' => trans('help.' . $header . '-text'),
+            ];
+        }
+
+        // orphan and backdrop for first element.
+        $steps[0]['orphan']   = true;
+        $steps[0]['backdrop'] = true;
+
+        // sidebar position left:
+        $steps[1]['placement'] = 'left';
+
+        // final in the center again.
+        $steps[7]['orphan']   = true;
+        $steps[7]['backdrop'] = true;
+
+        $template ='<div class="popover" role="tooltip">
+          <div class="arrow"></div>
+          <h3 class="popover-title"></h3>
+          <div class="popover-content"></div>
+          <div class="popover-navigation">
+            <div class="btn-group">
+              <button class="btn btn-sm btn-default" data-role="prev">&laquo; '.trans('firefly.prev').'</button>
+              <button class="btn btn-sm btn-default" data-role="next">'.trans('firefly.next').' &raquo;</button>
+              <button class="btn btn-sm btn-default"
+                      data-role="pause-resume"
+                      data-pause-text="Pause"
+                      data-resume-text="Resume">'.trans('firefly.pause').'</button>
+            </div>
+            <button class="btn btn-sm btn-default" data-role="end">'.trans('firefly.end-tour').'</button>
+          </div>
+        </div>';
+
+
+        return Response::json(['steps' => $steps, 'template' => $template]);
+    }
 
     /**
      * @param BillRepositoryInterface    $repository

app/Http/routes.php

@@ -296,6 +296,7 @@ Route::group(
     Route::get('/json/revenue-accounts', ['uses' => 'JsonController@revenueAccounts', 'as' => 'json.revenue-accounts']);
     Route::get('/json/categories', ['uses' => 'JsonController@categories', 'as' => 'json.categories']);
     Route::get('/json/tags', ['uses' => 'JsonController@tags', 'as' => 'json.tags']);
+    Route::get('/json/tour', ['uses' => 'JsonController@tour', 'as' => 'json.tour']);
     Route::get('/json/box/in', ['uses' => 'JsonController@boxIn', 'as' => 'json.box.in']);
     Route::get('/json/box/out', ['uses' => 'JsonController@boxOut', 'as' => 'json.box.out']);
     Route::get('/json/box/bills-unpaid', ['uses' => 'JsonController@boxBillsUnpaid', 'as' => 'json.box.paid']);

public/js/index.js

@@ -9,6 +9,16 @@ $(function () {
         // do chart JS stuff.
         drawChart();
     }
+
+    $.getJSON('json/tour').success(function (data) {
+        var tour = new Tour({steps: data.steps, template: data.template});
+        // Initialize the tour
+        tour.init();
+        // Start the tour
+        tour.start();
+    });
+
+
 });
 
 function drawChart() {

resources/lang/en/firefly.php

@@ -19,6 +19,12 @@ return [
     'never'                            => 'Never',
     'search_results_for'               => 'Search results for ":query"',
 
+    // tour:
+    'prev' => 'Prev',
+    'next' => 'Next',
+    'end-tour' => 'End tour',
+    'pause' => 'Pause',
+
     // transaction index
     'title_expenses'                   => 'Expenses',
     'title_withdrawal'                 => 'Expenses',

resources/lang/en/help.php

@@ -1,5 +1,25 @@
 <?php
 return [
+
+    // tour!
+    'main-content-title'      => 'Welcome to Firefly III',
+    'main-content-text'       => 'Do yourself a favor and follow this short guide to make sure you know your way around.',
+    'sidebar-toggle-title'    => 'Sidebar to create stuff',
+    'sidebar-toggle-text'     => 'Hidden under the plus icon are all the buttons to create new stuff. Accounts, transactions, everything!',
+    'account-menu-title'      => 'All your accounts',
+    'account-menu-text'       => 'Here you can find all the accounts you\'ve made.',
+    'budget-menu-title'       => 'Budgets',
+    'budget-menu-text'        => 'Use this page to organise your finances and limit spending.',
+    'report-menu-title'       => 'Reports',
+    'report-menu-text'        => 'Check this out when you want a solid overview of your fiances.',
+    'transaction-menu-title'  => 'Transactions',
+    'transaction-menu-text'   => 'All transactions you\'ve created can be found here.',
+    'option-menu-title'       => 'Options',
+    'option-menu-text'        => 'This is pretty self-explanatory.',
+    'main-content-end-title'  => 'The end!',
+    'main-content-end-text'   => 'Remember that every page has a small question mark at the right top. Click it to get help about the page you\'re on.',
+
+
     'register'                => 'register',
     'index'                   => 'The main index',
     'home'                    => 'home',

resources/lang/nl/firefly.php

@@ -19,6 +19,12 @@ return [
     'never'                            => 'Nooit',
     'search_results_for'               => 'Zoekresultaten voor ":query"',
 
+    // tour:
+    'prev'                             => 'Vorige',
+    'next'                             => 'Volgende',
+    'end-tour'                         => 'Einde',
+    'pause'                            => 'Pauze',
+
     // transaction index
     'title_expenses'                   => 'Uitgaven',
     'title_withdrawal'                 => 'Uitgaven',

resources/twig/layout/default.twig

@@ -70,7 +70,7 @@
                             <span class="hidden-xs">{{ Auth.user.email }}</span>
                         </a>
                     </li>
-                    <li>
+                    <li id="sidebar-toggle">
                         <a href="#" data-toggle="control-sidebar"><i class="fa fa-plus-circle"></i></a>
                     </li>
                 </ul>

resources/twig/partials/menu-sidebar.twig

@@ -5,7 +5,7 @@
             <span>{{ 'dashboard'|_ }}</span></a>
     </li>
     <!-- accounts -->
-    <li class="{{ activeRoutePartial('accounts') }} treeview">
+    <li class="{{ activeRoutePartial('accounts') }} treeview" id="account-menu">
         <a href="#">
             <i class="fa fa-credit-card fa-fw"></i>
             <span>{{ 'accounts'|_ }}</span>
@@ -31,7 +31,7 @@
         </ul>
     </li>
     <!-- budgets-->
-    <li class="{{ activeRoutePartial('budgets') }}">
+    <li class="{{ activeRoutePartial('budgets') }}" id="budget-menu">
         <a href="{{ route('budgets.index') }}">
             <i class="fa fa-tasks fa-fw"></i>
             <span>{{ 'budgets'|_ }}</span>
@@ -53,7 +53,7 @@
     </li>
 
     <!-- reports -->
-    <li class="{{ activeRoutePartial('reports') }}">
+    <li class="{{ activeRoutePartial('reports') }}" id="report-menu">
         <a href="{{ route('reports.index') }}">
             <i class="fa fa-line-chart fa-fw"></i>
             <span>{{ 'reports'|_ }}</span>
@@ -61,7 +61,7 @@
     </li>
 
     <!-- transactions -->
-    <li class="{{ activeRoutePartial('transactions') }} treeview">
+    <li class="{{ activeRoutePartial('transactions') }} treeview" id="transaction-menu">
         <a href="#">
             <i class="fa fa-repeat fa-fw"></i>
             <span>
@@ -106,7 +106,7 @@
     </li>
 
     <!-- options and preferences -->
-    <li class="{{ activeRoutePartial('profile') }} {{ activeRoutePartial('preferences') }} {{ activeRoutePartial('currency') }} treeview">
+    <li id="option-menu" class="{{ activeRoutePartial('profile') }} {{ activeRoutePartial('preferences') }} {{ activeRoutePartial('currency') }} treeview">
         <a href="#">
             <i class="fa fa-gears fa-fw"></i>
             <span>{{ 'options'|_ }}</span>

resources/twig/partials/menu.twig

@@ -1,180 +0,0 @@
-<!-- Navigation -->
-
-<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
-    <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-            <span class="sr-only">{{ 'toggleNavigation'|_ }}</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="{{ route('index') }}">Firefly</a>
-    </div>
-
-    <!-- /.navbar-header -->
-    <ul class="nav navbar-top-links navbar-right hidden-xs">
-        <!-- /.dropdown -->
-        <!-- new stuff create button -->
-        <li class="dropdown">
-            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                <i class="fa fa-plus-circle fa-fw"></i> <i class="fa fa-caret-down"></i>
-            </a>
-            <ul class="dropdown-menu" role="menu">
-                <li><a href="{{ route('transactions.create','withdrawal') }}"><i class="fa fa-long-arrow-left fa-fw"></i> {{ 'create_new_withdrawal'|_ }}</a>
-                </li>
-                <li><a href="{{ route('transactions.create','deposit') }}"><i class="fa fa-long-arrow-right fa-fw"></i> {{ 'create_new_deposit'|_ }}</a></li>
-                <li><a href="{{ route('transactions.create','transfer') }}"><i class="fa fa-exchange fa-fw"></i> {{ 'create_new_transfer'|_ }}</a></li>
-                <li class="divider"></li>
-                <li><a href="{{ route('accounts.create','asset') }}"><i class="fa fa-money fa-fw"></i> {{ 'create_new_asset'|_ }}</a></li>
-                <li><a href="{{ route('accounts.create','expense') }}"><i class="fa fa-shopping-cart fa-fw"></i> {{ 'create_new_expense'|_ }}</a></li>
-                <li><a href="{{ route('accounts.create','revenue') }}"><i class="fa fa-download fa-fw"></i> {{ 'create_new_revenue'|_ }}</a></li>
-                <li class="divider"></li>
-                <li><a href="{{ route('piggy-banks.create') }}"><i class="fa fa-sort-amount-asc fa-fw"></i> {{ 'create_new_piggy_bank'|_ }}</a></li>
-                <li><a href="{{ route('bills.create') }}"><i class="fa fa-calendar-o fa-fw"></i> {{ 'create_new_bill'|_ }}</a></li>
-            </ul>
-        </li>
-
-
-        <!-- menu -->
-        <li class="dropdown">
-            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
-            </a>
-            <ul class="dropdown-menu dropdown-user">
-                <li><a href="{{ route('profile') }}"><i class="fa fa-user fa-fw"></i> {{ Auth.user.email }}</a></li>
-                <li><a href="{{ route('preferences') }}"><i class="fa fa-gear fa-fw"></i> {{ 'preferences'|_ }}</a></li>
-                <li><a href="{{ route('currency.index') }}"><i class="fa fa-usd fa-fw"></i> {{ 'currency'|_ }}</a></li>
-                <li class="divider"></li>
-                <li><a href="{{ route('logout') }}"><i class="fa fa-sign-out fa-fw"></i> {{ 'logout'|_ }}</a></li>
-            </ul>
-            <!-- /.dropdown-user -->
-        </li>
-
-    </ul>
-    <!-- date -->
-    <p class="navbar-text navbar-right hidden-xs" id="daterange"><span>&nbsp;</span> <b class="caret"></b></p>
-
-    <!-- new stuff -->
-
-
-    <!-- /.navbar-top-links -->
-    <div class="navbar-default sidebar" role="navigation">
-        <div class="sidebar-nav navbar-collapse">
-            <ul class="nav" id="side-menu">
-                <li class="sidebar-search hidden-xs">
-                    <form action="{{ route('search') }}" method="GET" class="form-inline">
-                        <div class="input-group custom-search-form">
-                            <input type="text" name="q" class="form-control" value="{% if Input.get('q') %}{{ Input.get('q') }}{% endif %}"
-                                   placeholder="{{ 'searchPlaceholder'|_ }}">
-                            <span class="input-group-btn">
-                                <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
-                            </span>
-                        </div>
-                    </form>
-                    <!-- /input-group -->
-                </li>
-                <li>
-                    <a class="{{ activeRouteStrict('index') }}" href="{{ route('index') }}"><i class="fa fa-dashboard fa-fw"></i> {{ 'dashboard'|_ }}</a>
-                </li>
-                <li class="{{ activeRoutePartial('accounts') }}">
-                    <a href="#"><i class="fa fa-credit-card fa-fw"></i> {{ 'accounts'|_ }} <span class="fa arrow"></span></a>
-                    <ul class="nav nav-second-level">
-                        <li>
-                            <a class="{{ activeRoutePartialWhat('accounts', 'asset') }}" href="{{ route('accounts.index','asset') }}">
-                                <i class="fa fa-money fa-fw"></i> {{ 'asset_accounts'|_ }}</a>
-                        </li>
-                        <li>
-                            <a class="{{ activeRoutePartialWhat('accounts', 'expense') }}" href="{{ route('accounts.index','expense') }}">
-                                <i class="fa fa-shopping-cart fa-fw"></i> {{ 'expense_accounts'|_ }}</a>
-                        </li>
-                        <li>
-                            <a class="{{ activeRoutePartialWhat('accounts', 'revenue') }}" href="{{ route('accounts.index','revenue') }}">
-                                <i class="fa fa-download fa-fw"></i> {{ 'revenue_accounts'|_ }}</a>
-                        </li>
-                    </ul>
-                    <!-- /.nav-second-level -->
-                </li>
-                <li>
-                    <a class="{{ activeRoutePartial('budgets') }}" href="{{ route('budgets.index') }}"><i class="fa fa-tasks fa-fw"></i> {{ 'budgets'|_ }}</a>
-                </li>
-                <li>
-                    <a class="{{ activeRoutePartial('categories') }}" href="{{ route('categories.index') }}"><i
-                                class="fa fa-bar-chart fa-fw"></i> {{ 'categories'|_ }}</a>
-                </li>
-                <li>
-                    <a class="{{ activeRoutePartial('tags') }}" href="{{ route('tags.index') }}"><i class="fa fa-tags fa-fw"></i> {{ 'tags'|_ }}</a>
-                </li>
-                <li>
-                    <a class="{{ activeRoutePartial('reports') }}" href="{{ route('reports.index') }}"><i class="fa fa-line-chart fa-fw"></i> {{ 'reports'|_ }}
-                    </a>
-                </li>
-                <li class="{{ activeRoutePartial('transactions') }}">
-                    <a href="#"><i class="fa fa-repeat fa-fw"></i> {{ 'transactions'|_ }}<span class="fa arrow"></span></a>
-                    <ul class="nav nav-second-level">
-                        <li>
-                            <a class="{{ activeRoutePartialWhat('transactions','withdrawal') }}" href="{{ route('transactions.index','withdrawal') }}">
-                                <i class="fa fa-long-arrow-left fa-fw"></i> {{ 'expenses'|_ }}</a>
-                        </li>
-                        <li>
-                            <a class="{{ activeRoutePartialWhat('transactions','deposit') }}" href="{{ route('transactions.index','deposit') }}"><i
-                                        class="fa fa-long-arrow-right fa-fw"></i> {{ 'income'|_ }}</a>
-                        </li>
-                        <li>
-                            <a class="{{ activeRoutePartialWhat('transactions','transfers') }}" href="{{ route('transactions.index','transfers') }}">
-                                <i class="fa fa-fw fa-exchange"></i> {{ 'transfers'|_ }}</a>
-                        </li>
-                    </ul>
-
-                </li>
-                <li class="{{ activeRoutePartial('bills') }} {{ activeRoutePartial('piggy-banks') }}">
-                    <a href="#"><i class="fa fa-euro fa-fw"></i> {{ 'moneyManagement'|_ }}<span class="fa arrow"></span></a>
-                    <ul class="nav nav-second-level">
-                        <li>
-                            <a class="{{ activeRoutePartial('piggy-banks') }}" href="{{ route('piggy-banks.index') }}">
-                                <i class="fa fa-sort-amount-asc fa-fw"></i> {{ 'piggyBanks'|_ }}</a>
-                        </li>
-                        <li>
-                            <a class="{{ activeRoutePartial('bills') }}" href="{{ route('bills.index') }}">
-                                <i class="fa fa-calendar-o fa-fw"></i> {{ 'bills'|_ }}</a>
-                        </li>
-                    </ul>
-                    <!-- /.nav-second-level -->
-                </li>
-                <!--
-                <li>
-                    <a href="#"><i class="fa fa-plus fa-fw"></i> {{ 'createNew'|_ }} <span class="fa arrow"></span></a>
-                    <ul class="nav nav-second-level">
-                        <li>
-                            <a href="{{ route('transactions.create','withdrawal') }}"><i class="fa fa-long-arrow-left fa-fw"></i> {{ 'withdrawal'|_ }}</a>
-                        </li>
-                        <li>
-                            <a href="{{ route('transactions.create','deposit') }}"><i class="fa fa-long-arrow-right fa-fw"></i> {{ 'deposit'|_ }}</a>
-                        </li>
-                        <li>
-                            <a href="{{ route('transactions.create','transfer') }}"><i class="fa fa-fw fa-exchange"></i> {{ 'transfer'|_ }}</a>
-                        </li>
-                    </ul>
-                </li>
-                -->
-                <!-- top menu again -->
-                <li class="hidden-sm hidden-md hidden-lg">
-                    <a class="{{ activeRouteStrict('profile') }}" href="{{ route('profile') }}"><i class="fa fa-user fa-fw"></i> {{ Auth.user.email }}</a>
-                </li>
-
-                <li class="hidden-sm hidden-md hidden-lg">
-                    <a class="{{ activeRouteStrict('preferences') }}" href="{{ route('preferences') }}"><i class="fa fa-gear fa-fw"></i> {{ 'preferences'|_ }}
-                    </a>
-                </li>
-                <li class="hidden-sm hidden-md hidden-lg">
-                    <a class="{{ activeRoutePartial('currency') }}" href="{{ route('currency.index') }}"><i class="fa fa-usd fa-fw"></i> {{ 'currency'|_ }}</a>
-                </li>
-                <li class="hidden-sm hidden-md hidden-lg">
-                    <a href="{{ route('logout') }}"><i class="fa fa-sign-out fa-fw"></i> {{ 'logout'|_ }}</a>
-                </li>
-
-            </ul>
-        </div>
-        <!-- /.sidebar-collapse -->
-    </div>
-    <!-- /.navbar-static-side -->
-</nav>