10 files changed, 253 insertions, 69 deletions

diff --git a/src/Wallabag/CoreBundle/Filter/EntryFilterType.php b/src/Wallabag/CoreBundle/Filter/EntryFilterType.php
index 636ba324..2fa2f8a0 100644
--- a/src/Wallabag/CoreBundle/Filter/EntryFilterType.php
+++ b/src/Wallabag/CoreBundle/Filter/EntryFilterType.php
@@ -10,7 +10,21 @@ class EntryFilterType extends AbstractType
 {
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
-        $builder->add('readingTime', 'filter_number_range');
+        $builder
+            ->add('readingTime', 'filter_number_range')
+            ->add('createdAt', 'filter_date_range', array(
+                    'left_date_options' => array(
+                        'attr' => array(
+                            'placeholder' => 'dd/mm/yyyy'),
+                        'format' => 'dd/MM/yyyy',
+                        'widget' => 'single_text'
+                    ),
+                    'right_date_options' => array(
+                        'attr' => array(
+                            'placeholder' => 'dd/mm/yyyy'),
+                        'format' => 'dd/MM/yyyy',
+                        'widget' => 'single_text'
+                    )));
     }
 
     public function getName()
diff --git a/src/Wallabag/CoreBundle/Resources/views/Entry/entries.html.twig b/src/Wallabag/CoreBundle/Resources/views/Entry/entries.html.twig
index 539c035f..a794df0e 100644
--- a/src/Wallabag/CoreBundle/Resources/views/Entry/entries.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/Entry/entries.html.twig
@@ -10,7 +10,7 @@
             <div class="pagination">
                 {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
                     <li>
-                        <a href="{{ path(app.request.attributes.get('_route'), {'page': p}) }}" class="{{ currentPage == p ? 'current':''}}" >{{ p }}</a>
+                        <a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': p})) }}" class="{{ currentPage == p ? 'current':''}}" >{{ p }}</a>
                     </li>
                 {% endfor %}
             </div>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
index 7777dc7f..d6dd7c37 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
@@ -15,51 +15,82 @@
 
 {% block content %}
     {% block pager %}
-    {% if entries is not empty %}
-        <div class="results clearfix">
-            <div class="nb-results left">{{ entries.count }} {% trans %}entries{% endtrans %}</div>
-            <div class="left"><form>{{ form_rest(form) }}<button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">Filter</button></form></div>
-            <ul class="pagination right">
-                {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
-                    <li class="{{ currentPage == p ? 'active':'waves-effect'}}">
-                        <a href="{{ path(app.request.attributes.get('_route'), {'page': p}) }}"  >{{ p }}</a>
-                    </li>
-                {% endfor %}
-            </div>
+    <div class="results clearfix">
+        <div class="nb-results left">{% transchoice entries.count %}{0} There is no entry.|{1} There is one entry.|]1,Inf[ There are %count% entries.{% endtranschoice %}</div>
+        <ul class="pagination right">
+            {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
+                <li class="{{ currentPage == p ? 'active':'waves-effect'}}">
+                    <a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': p})) }}">{{ p }}</a>
+                </li>
+            {% endfor %}
         </div>
-    {% endif %}
+    </div>
     {% endblock %}
-<br>
-    {% if entries is empty %}
-        <div class="messages warning"><p>{% trans %}No articles found.{% endtrans %}</p></div>
-    {% else %}
-        <ul class="row data">
-            {% for entry in entries %}
-                <li id="entry-{{ entry.id|e }}" class="col l4 m6 s12">
-                    <div class="card">
-                        <div class="card-content">
-                            <span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw }}</a></span>
-                            {% if entry.readingTime > 0 %}
-                                <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} {{ entry.readingTime }} min</span></div>
-                            {% else %}
-                                <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} <small class="inferieur">&lt;</small> 1 min</span></div>
-                            {% endif %}
-                            <p>{{ entry.content|striptags|slice(0, 300) }}...</p>
-                        </div>
-                        <div class="card-action">
-                            <span class="bold"><a href="{{ entry.url|e }}" target="_blank" title="{% trans %}original{% endtrans %}: {{ entry.title|e }}" class="tool original grey-text"><span>{{ entry.domainName }}</span></a></bold>
+    <br />
+    <ul class="row data">
+        {% for entry in entries %}
+            <li id="entry-{{ entry.id|e }}" class="col l4 m6 s12">
+                <div class="card">
+                    <div class="card-content">
+                        <span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw }}</a></span>
+                        {% if entry.readingTime > 0 %}
+                            <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} {{ entry.readingTime }} min</span></div>
+                        {% else %}
+                            <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} <small class="inferieur">&lt;</small> 1 min</span></div>
+                        {% endif %}
+                        <p>{{ entry.content|striptags|slice(0, 300) }}...</p>
+                    </div>
+                    <div class="card-action">
+                        <span class="bold"><a href="{{ entry.url|e }}" target="_blank" title="{% trans %}original{% endtrans %}: {{ entry.title|e }}" class="tool original grey-text"><span>{{ entry.domainName }}</span></a></bold>
 
-                            <ul class="tools links right">
-                                <li>
-                                    <a title="{% trans %}Toggle mark as read{% endtrans %}" class="tool grey-text {% if entry.isArchived == 0 %}mdi-action-done{% else %}mdi-content-redo{% endif %}" href="{{ path('archive_entry', { 'id': entry.id }) }}"></a>
-                                    <a title="{% trans %}toggle favorite{% endtrans %}" class="tool grey-text {% if entry.isStarred == 0 %}mdi-action-favorite-outline{% else %}mdi-action-favorite{% endif %}" href="{{ path('star_entry', { 'id': entry.id }) }}"></a>
-                                    <a title="{% trans %}delete{% endtrans %}" class="tool grey-text delete mdi-action-delete " href="{{ path('delete_entry', { 'id': entry.id }) }}"></a>
-                                </li>
-                            </ul>
-                        </div>
+                        <ul class="tools links right">
+                            <li>
+                                <a title="{% trans %}Toggle mark as read{% endtrans %}" class="tool grey-text {% if entry.isArchived == 0 %}mdi-action-done{% else %}mdi-content-redo{% endif %}" href="{{ path('archive_entry', { 'id': entry.id }) }}"></a>
+                                <a title="{% trans %}toggle favorite{% endtrans %}" class="tool grey-text {% if entry.isStarred == 0 %}mdi-action-favorite-outline{% else %}mdi-action-favorite{% endif %}" href="{{ path('star_entry', { 'id': entry.id }) }}"></a>
+                                <a title="{% trans %}delete{% endtrans %}" class="tool grey-text delete mdi-action-delete " href="{{ path('delete_entry', { 'id': entry.id }) }}"></a>
+                            </li>
+                        </ul>
                     </div>
-                </li>
-            {% endfor %}
-        </ul>
-    {% endif %}
+                </div>
+            </li>
+        {% endfor %}
+    </ul>
+
+
+    <!-- Filters -->
+    <div id="filters" class="side-nav fixed right-aligned">
+        <form>
+
+            <h4 class="center">{% trans %}Filters{% endtrans %}</h1>
+
+            <div class="row">
+
+                <div class="col s12">
+                    <label>{% trans %}Reading time in minutes{% endtrans %}</label>
+                </div>
+                <div class="input-field col s6">
+                    {{ form_widget(form.readingTime.left_number, {'type': 'number'}) }}
+                    <label for="entry_filter_readingTime_left_number">{% trans %}from{% endtrans %}</label>
+                </div>
+                <div class="input-field col s6">
+                    {{ form_widget(form.readingTime.right_number, {'type': 'number'}) }}
+                    <label for="entry_filter_readingTime_right_number">{% trans %}to{% endtrans %}</label>
+                </div>
+
+                <div class="col s12">
+                    <label>{% trans %}Create at{% endtrans %}</label>
+                </div>
+
+                <div class="col s6">
+                    <a href="#!" class="center waves-effect waves-green btn-flat" id="clear_form_filters">{% trans %}Clear{% endtrans %}</a>
+                </div>
+
+                <div class="col s6">
+                    <button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">{% trans %}Filter{% endtrans %}</button>
+                </div>
+
+            </div>
+
+        </form>
+    </div>
 {% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
index 4b0e1a7b..b92c41b6 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
@@ -3,6 +3,9 @@
 {% block title %}{{ entry.title|raw }} ({{ entry.domainName }}){% endblock %}
 
 {% block menu %}
+    <div class="progress">
+        <div class="determinate"></div>
+    </div>
     <nav class="hide-on-large-only">
         <div class="nav-wrapper cyan darken-1">
             <ul>
@@ -40,6 +43,14 @@
             <div class="collapsible-body"></div>
         </li>
 
+        <li class="bold border-bottom hide-on-med-and-down">
+            <a class="waves-effect collapsible-header" href="{{ entry.url|e }}">
+                <i class="mdi-content-link small"></i>
+                <span>{% trans %}original article{% endtrans %}</span>
+            </a>
+            <div class="collapsible-body"></div>
+        </li>
+
         <li class="bold hide-on-med-and-down">
             <a class="waves-effect collapsible-header" title="{% trans %}Mark as read{% endtrans %}" href="{{ path('archive_entry', { 'id': entry.id }) }}" id="markAsRead">
                 <i class="{% if entry.isArchived == 0 %}mdi-action-done{% else %}mdi-content-redo{% endif %} small"></i>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig
index 1a3ab86d..fda53e5b 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig
@@ -8,7 +8,7 @@
             <span class="black-text">{{ form_errors(form.url) }}</span>
         {% endif %}
 
-        {{ form_widget(form.url) }}
+        {{ form_widget(form.url, { 'attr': {'autocomplete': 'off'} }) }}
 
     <div class="hidden">{{ form_rest(form) }}</div>
 </form>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig
index 73abc3f8..2c513ffe 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig
@@ -23,19 +23,23 @@
                             <span class="black-text"><p>{{ flashMessage }}</p></span>
                         {% endfor %}
 
-                        <div class="input-field s12">
-                            <label for="username">{% trans %}Username{% endtrans %}</label>
-                            <input type="text" id="username" name="_username" value="{{ last_username }}" />
-                        </div>
+                        <div class="row">
 
-                        <div class="input-field s12">
-                            <label for="password">{% trans %}Password{% endtrans %}</label>
-                            <input type="password" id="password" name="_password" />
-                        </div>
+                            <div class="input-field col s12">
+                                <label for="username">{% trans %}Username{% endtrans %}</label>
+                                <input type="text" id="username" name="_username" value="{{ last_username }}" />
+                            </div>
+
+                            <div class="input-field col s12">
+                                <label for="password">{% trans %}Password{% endtrans %}</label>
+                                <input type="password" id="password" name="_password" />
+                            </div>
+
+                            <div class="input-field col s12">
+                                <input type="checkbox" id="remember_me" name="_remember_me" checked />
+                                <label for="remember_me">{% trans %}Keep me logged in{% endtrans %}</label>
+                            </div>
 
-                        <div class="input-field s12">
-                            <input type="checkbox" id="remember_me" name="_remember_me" checked />
-                            <label for="remember_me">{% trans %}Keep me logged in{% endtrans %}</label>
                         </div>
 
                     </div>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
index 17136566..554865d7 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
@@ -57,6 +57,7 @@
                 <ul>
                     <li class="bold"><a class="waves-effect" href="{{ path('new') }}" id="nav-btn-add"><i class="mdi-content-add"></i></a></li>
                     <li><a class="waves-effect" href="javascript: void(null);" id="nav-btn-search"><i class="mdi-action-search"></i></a>
+                    <li id="button_filters"><a href="#" data-activates="filters" class="nav-panel-menu button-collapse-right"><i class="mdi-content-filter-list"></i></a></li>
                 </ul>
             </div>
             <form method="get" action="index.php">
@@ -68,16 +69,9 @@
             </form>
             <div class="input-field nav-panel-add" style="display: none">
                 {{ render(controller( "WallabagCoreBundle:Entry:addEntryForm" )) }}
-                <label for="add"><i class="mdi-content-add"></i></label>
+                <label for="add" class="active"><i class="mdi-content-add"></i></label>
                 <i class="mdi-navigation-close"></i>
             </div>
-            <!--<form name="entry" method="post" action="{{ path('new_entry') }}">
-                <div class="input-field nav-panel-add" style="display: none">
-                    <input id="add entry_url" name="entry[url]" type="search" required placeholder="{% trans %}Enter your link here{% endtrans %}">
-                    <label for="add"><i class="mdi-content-add"></i></label>
-                    <i class="mdi-navigation-close"></i>
-                </div>
-            </form>-->
         </div>
     </nav>
 {% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
index bf7e667e..81ea598c 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
@@ -48,6 +48,16 @@ nav, main, footer {
     margin-bottom: 0;
 }
 
+.pagination li {
+    padding: 0;
+}
+
+.pagination a {
+    padding: 0px 10px;
+    height: 30px;
+    display: block;
+}
+
 .page-footer .footer-copyright p {
     display: inline;
 }
@@ -56,10 +66,18 @@ nav, main, footer {
     display: none;
 }
 
+.picker__date-display {
+    display: none;
+}
+
 /* ==========================================================================
    1 = Nav
    ========================================================================== */
 
+nav input {
+    color: #aaa;
+}
+
 .nav-wrapper .button-collapse {
     padding: 0px 15px;
 }
@@ -96,6 +114,38 @@ nav, main, footer {
     white-space: nowrap;
 }
 
+.nav-panels .input-field input {
+    display: block;
+    line-height: inherit;
+    padding-left: 4rem !important;
+    width: calc(100% - 8rem);
+}
+
+.nav-panels .input-field input:focus {
+    background-color: #fff;
+    border: 0;
+    box-shadow: none;
+    color: #444;
+}
+
+.input-field.nav-panel-add label {
+    left: 1rem;
+}
+
+.input-field.nav-panel-add .mdi-navigation-close {
+    position: absolute;
+    top: 0;
+    right: 1rem;
+    color: transparent;
+    cursor: pointer;
+    font-size: 2rem;
+    transition: .3s color;
+}
+
+#button_filters {
+    display: none;
+}
+
 /* ==========================================================================
    2 = Side-nav
    ========================================================================== */
@@ -133,6 +183,21 @@ nav, main, footer {
 }
 
 /* ==========================================================================
+ * 3 = Filters slider
+ * ========================================================================== */
+
+#filters button {
+    padding: 0px;
+    width: 100%;
+}
+
+.side-nav.fixed.right-aligned {
+    right: -250px;
+    left: auto !important;
+    overflow-y: visible;
+}
+
+/* ==========================================================================
    3 = Cards
    ========================================================================== */
 
@@ -200,6 +265,15 @@ main ul.row {
     width: 240px !important;
 }
 
+.reader-mode .collapsible-body {
+    height: 0;
+    overflow: hidden;
+}
+
+.reader-mode:hover .collapsible-body {
+    height: auto;
+}
+
 .reader-mode span {
     opacity: 0;
     transition: opacity 0.2s ease;
@@ -209,6 +283,14 @@ main ul.row {
     opacity: 1;
 }
 
+.progress {
+    position:fixed;
+    top:0px;
+    width: 100%;
+    height: 3px;
+    margin: 0;
+    z-index: 9999;
+}
 /* ==========================================================================
    6 = Media queries
    ========================================================================== */
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
index 9341cb5a..c0700c2c 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
@@ -1,3 +1,15 @@
+function init_filters() {
+    // no display if filters not aviable
+    if ($("div").is("#filters")) {
+        $('#button_filters').show();
+        $('.button-collapse-right').sideNav({ edge: 'right' });
+        $('#clear_form_filters').on('click', function(){
+            $('#filters input').val('');
+            return false;
+        });
+    }
+}
+
 $(document).ready(function(){
     // sideNav
     $('.button-collapse').sideNav();
@@ -5,18 +17,25 @@ $(document).ready(function(){
     $('.collapsible').collapsible({
         accordion : false
     });
+    $('.datepicker').pickadate({
+        selectMonths: true,
+        selectYears: 15,
+        formatSubmit: 'dd/mm/yyyy',
+        hiddenName: true,
+        format: 'dd/mm/yyyy',
+    });
+    init_filters();
 
-    $('#nav-btn-add').click(function(){
+    $('#nav-btn-add').on('click', function(){
        $(".nav-panel-buttom").hide(100);
        $(".nav-panel-add").show(100);
-       $(".nav-panel-menu").hide(100);
        $(".nav-panels .action").hide(100);
        $(".nav-panel-menu").addClass('hidden');
        $(".nav-panels").css('background', 'white');
        $("#entry_url").focus();
        return false;
     });
-    $('#nav-btn-search').click(function(){
+    $('#nav-btn-search').on('click', function(){
         $(".nav-panel-buttom").hide(100);
         $(".nav-panel-search").show(100);
         $(".nav-panels .action").hide(100);
@@ -25,7 +44,7 @@ $(document).ready(function(){
         $("#searchfield").focus();
         return false;
     });
-    $('.mdi-navigation-close').click(function(){
+    $('.mdi-navigation-close').on('click', function(){
         $(".nav-panel-add").hide(100);
         $(".nav-panel-search").hide(100);
         $(".nav-panel-buttom").show(100);
@@ -34,4 +53,11 @@ $(document).ready(function(){
         $(".nav-panels").css('background', 'transparent');
         return false;
     });
+    $(window).scroll(function () {
+        var s = $(window).scrollTop(),
+        d = $(document).height(),
+        c = $(window).height();
+        var scrollPercent = (s / (d-c)) * 100;
+        $(".progress .determinate").css('width', scrollPercent+'%');
+    });
 });
diff --git a/src/Wallabag/CoreBundle/Tests/Controller/EntryControllerTest.php b/src/Wallabag/CoreBundle/Tests/Controller/EntryControllerTest.php
index 24848eb2..0bd18c44 100644
--- a/src/Wallabag/CoreBundle/Tests/Controller/EntryControllerTest.php
+++ b/src/Wallabag/CoreBundle/Tests/Controller/EntryControllerTest.php
@@ -259,4 +259,26 @@ class EntryControllerTest extends WallabagCoreTestCase
 
         $this->assertCount(1, $crawler->filter('div[class=entry]'));
     }
+
+    public function testPaginationWithFilter()
+    {
+        $this->logInAs('admin');
+        $client = $this->getClient();
+
+        $crawler = $client->request('GET', '/config');
+
+        $form = $crawler->filter('button[id=config_save]')->form();
+
+        $data = array(
+            'config[items_per_page]' => '1',
+        );
+
+        $client->submit($form, $data);
+
+        $parameters = '?entry_filter%5BreadingTime%5D%5Bleft_number%5D=&amp;entry_filter%5BreadingTime%5D%5Bright_number%5D=';
+
+        $crawler = $client->request('GET', 'unread/list'.$parameters);
+
+        $this->assertContains($parameters, $client->getResponse()->getContent());
+    }
 }