Merge pull request #6609 from wallabag/add-setting-display-thumbnails

Add new setting to show / hide articles thumbnails

app/DoctrineMigrations/Version20230613121354.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Application\Migrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Wallabag\CoreBundle\Doctrine\WallabagMigration;
+
+/**
+ * Added a new setting to display or not thumbnails.
+ */
+final class Version20230613121354 extends WallabagMigration
+{
+    public function up(Schema $schema): void
+    {
+        $configTable = $schema->getTable($this->getTable('config'));
+
+        $this->skipIf($configTable->hasColumn('display_thumbnails'), 'It seems that you already played this migration.');
+
+        $configTable->addColumn('display_thumbnails', 'integer', [
+            'default' => 1,
+            'notnull' => false,
+        ]);
+    }
+
+    public function down(Schema $schema): void
+    {
+        $configTable = $schema->getTable($this->getTable('config'));
+        $configTable->dropColumn('display_thumbnails');
+    }
+}

app/Resources/static/themes/material/css/cards.scss

@@ -315,6 +315,15 @@ a.original:not(.waves-effect) {
   padding-bottom: 15px;
 }
 
+.settings .settings-checkbox-col {
+  padding: 0;
+}
+
+.settings .settings-checkbox-label {
+  margin-bottom: 20px;
+  height: 3rem;
+}
+
 .entries-row {
   display: grid;
   margin: 0.4rem 0 0;

app/config/services.yml

@@ -300,6 +300,7 @@ services:
             $readingSpeed: "%wallabag_core.reading_speed%"
             $actionMarkAsRead: "%wallabag_core.action_mark_as_read%"
             $listMode: "%wallabag_core.list_mode%"
+            $displayThumbnails: "%wallabag_core.display_thumbnails%"
 
     Wallabag\UserBundle\EventListener\AuthenticationFailureListener:
         tags:

app/config/wallabag.yml

@@ -30,6 +30,7 @@ wallabag_core:
     cache_lifetime: 10
     action_mark_as_read: 1
     list_mode: 0
+    display_thumbnails: 1
     fetching_error_message_title: 'No title found'
     fetching_error_message: |
         wallabag can't retrieve contents for this article. Please <a href="https://doc.wallabag.org/en/user/errors_during_fetching.html#how-can-i-help-to-fix-that">troubleshoot this issue</a>.

src/Wallabag/CoreBundle/DataFixtures/ConfigFixtures.php

@@ -23,6 +23,7 @@ class ConfigFixtures extends Fixture implements DependentFixtureInterface
         $adminConfig->setPocketConsumerKey('xxxxx');
         $adminConfig->setActionMarkAsRead(0);
         $adminConfig->setListMode(0);
+        $adminConfig->setDisplayThumbnails(0);
 
         $manager->persist($adminConfig);
 
@@ -35,6 +36,7 @@ class ConfigFixtures extends Fixture implements DependentFixtureInterface
         $bobConfig->setPocketConsumerKey(null);
         $bobConfig->setActionMarkAsRead(1);
         $bobConfig->setListMode(1);
+        $bobConfig->setDisplayThumbnails(1);
 
         $manager->persist($bobConfig);
 
@@ -47,6 +49,7 @@ class ConfigFixtures extends Fixture implements DependentFixtureInterface
         $emptyConfig->setPocketConsumerKey(null);
         $emptyConfig->setActionMarkAsRead(0);
         $emptyConfig->setListMode(0);
+        $emptyConfig->setDisplayThumbnails(0);
 
         $manager->persist($emptyConfig);
 

src/Wallabag/CoreBundle/DependencyInjection/Configuration.php

@@ -46,6 +46,9 @@ class Configuration implements ConfigurationInterface
                 ->scalarNode('list_mode')
                     ->defaultValue(1)
                 ->end()
+                ->scalarNode('display_thumbnails')
+                    ->defaultValue(1)
+                ->end()
                 ->scalarNode('api_limit_mass_actions')
                     ->defaultValue(10)
                 ->end()

src/Wallabag/CoreBundle/DependencyInjection/WallabagCoreExtension.php

@@ -22,6 +22,7 @@ class WallabagCoreExtension extends Extension
         $container->setParameter('wallabag_core.cache_lifetime', $config['cache_lifetime']);
         $container->setParameter('wallabag_core.action_mark_as_read', $config['action_mark_as_read']);
         $container->setParameter('wallabag_core.list_mode', $config['list_mode']);
+        $container->setParameter('wallabag_core.display_thumbnails', $config['display_thumbnails']);
         $container->setParameter('wallabag_core.fetching_error_message', $config['fetching_error_message']);
         $container->setParameter('wallabag_core.fetching_error_message_title', $config['fetching_error_message_title']);
         $container->setParameter('wallabag_core.api_limit_mass_actions', $config['api_limit_mass_actions']);

src/Wallabag/CoreBundle/Entity/Config.php

@@ -117,6 +117,15 @@ class Config
      */
     private $listMode;
 
+    /**
+     * @var int
+     *
+     * @ORM\Column(name="display_thumbnails", type="integer", nullable=true, options={"default" = 1})
+     *
+     * @Groups({"config_api"})
+     */
+    private $displayThumbnails;
+
     /**
      * @ORM\OneToOne(targetEntity="Wallabag\UserBundle\Entity\User", inversedBy="config")
      */
@@ -362,6 +371,24 @@ class Config
         return $this;
     }
 
+    /**
+     * @return bool
+     */
+    public function getDisplayThumbnails(): ?bool
+    {
+        return $this->displayThumbnails;
+    }
+
+    /**
+     * @return Config
+     */
+    public function setDisplayThumbnails(bool $displayThumbnails)
+    {
+        $this->displayThumbnails = $displayThumbnails;
+
+        return $this;
+    }
+
     /**
      * @return Config
      */

src/Wallabag/CoreBundle/Form/Type/ConfigType.php

@@ -3,6 +3,7 @@
 namespace Wallabag\CoreBundle\Form\Type;
 
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\Form\Extension\Core\Type\IntegerType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
@@ -29,6 +30,11 @@ class ConfigType extends AbstractType
                 'label' => 'config.form_settings.items_per_page_label',
                 'property_path' => 'itemsPerPage',
             ])
+            ->add('display_thumbnails', CheckboxType::class, [
+                'label' => 'config.form_settings.display_thumbnails_label',
+                'property_path' => 'displayThumbnails',
+                'required' => false,
+            ])
             ->add('reading_speed', IntegerType::class, [
                 'label' => 'config.form_settings.reading_speed.label',
                 'property_path' => 'readingSpeed',

src/Wallabag/CoreBundle/Resources/views/Config/index.html.twig

@@ -38,6 +38,19 @@
                                 </div>
                             </div>
 
+                        <div class="row">
+                            <div class="input-field col s11 settings-checkbox-col">
+                                {{ form_errors(form.config.display_thumbnails) }}
+                                {{ form_widget(form.config.display_thumbnails) }}
+                                {{ form_label(form.config.display_thumbnails, null, {'label_attr': {'class': 'settings-checkbox-label'}}) }}
+                            </div>
+                            <div class="input-field col s1">
+                                <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_display_thumbnails'|trans }}">
+                                    <i class="material-icons">live_help</i>
+                                </a>
+                            </div>
+                        </div>
+
                             <div class="row">
                                 <div class="input-field col s11">
                                     {{ form_errors(form.config.reading_speed) }}
@@ -56,7 +69,7 @@
                             </div>
 
                             <div class="row">
-                                <div class="input-field col s12">
+                                <div class="input-field col s11">
                                     {{ form_errors(form.config.action_mark_as_read) }}
                                     {{ form_widget(form.config.action_mark_as_read) }}
                                     {{ form_label(form.config.action_mark_as_read) }}

src/Wallabag/CoreBundle/Resources/views/Entry/_card_full_image.html.twig

@@ -6,9 +6,11 @@
                 <li title="{{ tag.label }}"><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
             {% endfor %}
             </ul>
+            {% if app.user.config.displayThumbnails %}
             <a href="{{ path('view', {'id': entry.id}) }}">
                 <span class="preview" style="background-image: url({{ entry.previewPicture }})"></span>
             </a>
+            {% endif %}
         </div>
         {% include "@WallabagCore/Entry/Card/_content.html.twig" with {'entry': entry} only %}
     </div>

src/Wallabag/CoreBundle/Resources/views/Entry/_card_list.html.twig

@@ -1,11 +1,13 @@
 <div class="card-stacked{% if currentRoute in routes and entry.isArchived %} archived{% endif %}">
     {% include "@WallabagCore/Entry/Card/_mass_checkbox.html.twig" with {'entry': entry} only %}
+    {% if app.user.config.displayThumbnails %}
     <div class="card-preview">
         <a href="{{ path('view', {'id': entry.id}) }}">
             {% set preview_class_modifier = entry.previewPicture ? '' : ' preview--default' %}
             <span class="preview{{ preview_class_modifier }}" style="background-image: url({{ entry.previewPicture|default(asset('img/logo-square.svg')) }})"></span>
         </a>
     </div>
+    {% endif %}
     {% include "@WallabagCore/Entry/Card/_content.html.twig" with {'entry': entry, 'withMetadata': true, 'subClass': 'metadata'} only %}
     <ul class="tools-list hide-on-small-only">
         <li>

src/Wallabag/CoreBundle/Resources/views/Entry/_card_preview.html.twig

@@ -1,16 +1,18 @@
 <div class="card entry-card{% if currentRoute in routes and entry.isArchived %} archived{% endif %}">
     <div class="card-body">
-        <div class="card-image waves-effect waves-block waves-light">
+        <div class="{% if app.user.config.displayThumbnails %}card-image{% endif %} waves-effect waves-block waves-light">
             {% include "@WallabagCore/Entry/Card/_mass_checkbox.html.twig" with {'entry': entry} only %}
             <ul class="card-entry-labels">
             {% for tag in entry.tags|slice(0, 3) %}
                 <li title="{{ tag.label }}"><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
             {% endfor %}
             </ul>
+            {% if app.user.config.displayThumbnails %}
             <a href="{{ path('view', {'id': entry.id}) }}">
                 {% set preview_class_modifier = entry.previewPicture ? '' : ' preview--default' %}
                 <span class="preview{{ preview_class_modifier }}" style="background-image: url({{ entry.previewPicture|default(asset('img/logo-square.svg')) }})"></span>
             </a>
+            {% endif %}
         </div>
         {% include "@WallabagCore/Entry/Card/_content.html.twig" with {'entry': entry, 'withPreview': true} only %}
     </div>

src/Wallabag/UserBundle/EventListener/CreateConfigListener.php

@@ -23,8 +23,9 @@ class CreateConfigListener implements EventSubscriberInterface
     private $actionMarkAsRead;
     private $listMode;
     private $session;
+    private $displayThumbnails;
 
-    public function __construct(EntityManagerInterface $em, $itemsOnPage, $feedLimit, $language, $readingSpeed, $actionMarkAsRead, $listMode, SessionInterface $session)
+    public function __construct(EntityManagerInterface $em, $itemsOnPage, $feedLimit, $language, $readingSpeed, $actionMarkAsRead, $listMode, $displayThumbnails, SessionInterface $session)
     {
         $this->em = $em;
         $this->itemsOnPage = $itemsOnPage;
@@ -34,6 +35,7 @@ class CreateConfigListener implements EventSubscriberInterface
         $this->actionMarkAsRead = $actionMarkAsRead;
         $this->listMode = $listMode;
         $this->session = $session;
+        $this->displayThumbnails = $displayThumbnails;
     }
 
     public static function getSubscribedEvents()
@@ -56,6 +58,7 @@ class CreateConfigListener implements EventSubscriberInterface
         $config->setReadingSpeed($this->readingSpeed);
         $config->setActionMarkAsRead($this->actionMarkAsRead);
         $config->setListMode($this->listMode);
+        $config->setDisplayThumbnails($this->displayThumbnails);
 
         $this->em->persist($config);
         $this->em->flush();

tests/Wallabag/ApiBundle/Controller/ConfigRestControllerTest.php

@@ -19,11 +19,12 @@ class ConfigRestControllerTest extends WallabagApiTestCase
         $this->assertArrayHasKey('reading_speed', $config);
         $this->assertArrayHasKey('action_mark_as_read', $config);
         $this->assertArrayHasKey('list_mode', $config);
+        $this->assertArrayHasKey('display_thumbnails', $config);
 
         $this->assertSame(200.0, $config['reading_speed']);
         $this->assertSame('en', $config['language']);
 
-        $this->assertCount(6, $config);
+        $this->assertCount(7, $config);
 
         $this->assertSame('application/json', $this->client->getResponse()->headers->get('Content-Type'));
     }

tests/Wallabag/CoreBundle/Controller/ConfigControllerTest.php

@@ -1354,4 +1354,40 @@ class ConfigControllerTest extends WallabagCoreTestCase
         $this->assertCount(5, $taggingRules);
         $this->assertSame('title matches "football"', $taggingRules[4]->getRule());
     }
+
+    public function testSwitchDisplayThumbnails()
+    {
+        $this->logInAs('admin');
+        $client = $this->getTestClient();
+
+        // Change configuration to show thumbnails
+        $crawler = $client->request('GET', '/config');
+        $this->assertSame(200, $client->getResponse()->getStatusCode());
+        $form = $crawler->filter('button[id=config_save]')->form();
+        $data = [
+            'config[display_thumbnails]' => true,
+        ];
+        $client->submit($form, $data);
+        $client->followRedirect();
+
+        $client->request('GET', '/unread/list');
+
+        $this->assertStringContainsString('class="preview"', $client->getResponse()->getContent());
+
+        // Change configuration to hide thumbnails
+        $crawler = $client->request('GET', '/config');
+        $this->assertSame(200, $client->getResponse()->getStatusCode());
+        $form = $crawler->filter('button[id=config_save]')->form();
+        $data = [
+            'config[display_thumbnails]' => false,
+        ];
+        $client->submit($form, $data);
+        $client->followRedirect();
+
+        $client->request('GET', '/unread/list');
+
+        $this->assertStringNotContainsString('class="preview"', $client->getResponse()->getContent());
+
+        $client->request('GET', '/config/view-mode');
+    }
 }

tests/Wallabag/UserBundle/EventListener/CreateConfigListenerTest.php

@@ -38,6 +38,7 @@ class CreateConfigListenerTest extends TestCase
             1,
             1,
             1,
+            1,
             $session
         );
 

translations/messages.en.yml

@@ -88,6 +88,8 @@ config:
         help_reading_speed: wallabag calculates a reading time for each article. You can define here, thanks to this list, if you are a fast or a slow reader. wallabag will recalculate the reading time for each article.
         help_language: You can change the language of wallabag interface.
         help_pocket_consumer_key: Required for Pocket import. You can create it in your Pocket account.
+        help_display_thumbnails: You can decide if you want to display or not articles thumbnails. Useful for slow connections.
+        display_thumbnails_label: Display articles thumbnails (useful for slow connections).
     form_feed:
         description: 'Atom feeds provided by wallabag allow you to read your saved articles with your favourite Atom reader. You need to generate a token first.'
         token_label: 'Feed token'