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

Add new setting to show / hide articles thumbnails
2024-06-02 05:41:01 +00:00 · 2023-06-17 07:41:39 +02:00 · 2023-06-17 07:41:39 +02:00 · 4b2b078102
parent 2aa18b7b90 619499d455
commit 4b2b078102
20 changed files with 149 additions and 6 deletions
--- a/app/DoctrineMigrations/Version20230613121354.php
+++ b/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');
+    }
+}
--- a/app/Resources/static/themes/material/css/cards.scss
+++ b/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;
--- a/app/config/services.yml
+++ b/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:
--- a/app/config/wallabag.yml
+++ b/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>.
--- a/src/Wallabag/CoreBundle/DataFixtures/ConfigFixtures.php
+++ b/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);

--- a/src/Wallabag/CoreBundle/DependencyInjection/Configuration.php
+++ b/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()
--- a/src/Wallabag/CoreBundle/DependencyInjection/WallabagCoreExtension.php
+++ b/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']);
--- a/src/Wallabag/CoreBundle/Entity/Config.php
+++ b/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
     */
--- a/src/Wallabag/CoreBundle/Form/Type/ConfigType.php
+++ b/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',
--- a/src/Wallabag/CoreBundle/Resources/views/Config/index.html.twig
+++ b/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) }}
--- a/src/Wallabag/CoreBundle/Resources/views/Entry/_card_full_image.html.twig
+++ b/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>
--- a/src/Wallabag/CoreBundle/Resources/views/Entry/_card_list.html.twig
+++ b/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>
--- a/src/Wallabag/CoreBundle/Resources/views/Entry/_card_preview.html.twig
+++ b/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>
--- a/src/Wallabag/UserBundle/EventListener/CreateConfigListener.php
+++ b/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();
--- a/tests/Wallabag/ApiBundle/Controller/ConfigRestControllerTest.php
+++ b/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'));
    }
--- a/tests/Wallabag/CoreBundle/Controller/ConfigControllerTest.php
+++ b/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');
+    }
 }
--- a/tests/Wallabag/UserBundle/EventListener/CreateConfigListenerTest.php
+++ b/tests/Wallabag/UserBundle/EventListener/CreateConfigListenerTest.php
@ -38,6 +38,7 @@ class CreateConfigListenerTest extends TestCase
            1,
            1,
            1,
+            1,
            $session
        );

--- a/translations/messages.en.yml
+++ b/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'
--- a/web/wallassets/material.css
+++ b/web/wallassets/material.css
--- a/web/wallassets/material.css.map
+++ b/web/wallassets/material.css.map