Refactor : change trix field show (#3359)

* Change trix CSS, change show_component for trix field, add new js controller for trix body, add new locales in every language * fix bugs * normalize i18n and fix specs * Fix specs * fix specs and optymalize code * Fix request changes * add tests for `always_show` --------- Co-authored-by: Paul Bob <[email protected]> Co-authored-by: Paul Bob <[email protected]>
avo-hq · Nov 11, 2024 · 917065c · 917065c
1 parent 68f8e3b
commit 917065c
Show file tree

Hide file tree

Showing 24 changed files with 125 additions and 10 deletions.
diff --git a/app/assets/stylesheets/css/fields/trix.css b/app/assets/stylesheets/css/fields/trix.css
@@ -1,5 +1,14 @@
 @import './../../../../../node_modules/trix/dist/trix.css';
 
+.trix-content.hidden {
+  display: block !important;
+  clip-path: inset(0 0 calc(100% - 50px) 0);
+  -webkit-mask-image: linear-gradient(to bottom, black 30px, transparent 50px);
+  mask-image: linear-gradient(to bottom, black 30px, transparent 50px);
+  max-height: 50px;
+  min-height: 0px;
+}
+
 .trix-content h1 {
   @apply text-xl font-bold mb-2;
 }

diff --git a/app/components/avo/fields/trix_field/show_component.html.erb b/app/components/avo/fields/trix_field/show_component.html.erb
@@ -2,13 +2,19 @@
   <%
     content_classes = 'trix-content py-2 max-w-4xl'
     content_classes << ' hidden' unless @field.always_show
+    button_classes = 'font-bold inline-block pt-3'
   %>
-  <div data-controller="hidden-input">
-    <% unless @field.always_show %>
-      <%= link_to t('avo.show_content'), 'javascript:void(0);', class: 'font-bold inline-block', data: { action: 'click->hidden-input#showContent' } %>
-    <% end %>
-    <div class="<%= content_classes %> " data-hidden-input-target="content">
+  <div data-controller="trix-body">
+    <div class="<%= content_classes %>" data-trix-body-target="content">
       <%= sanitize @field.value.to_s %>
     </div>
+    <% unless @field.always_show %>
+      <div class="hidden" data-trix-body-target="moreContentButton">
+        <%= link_to t('avo.more_content'), 'javascript:void(0);', class: button_classes, data: { action: 'click->trix-body#toggleContent' } %>
+      </div>
+      <div class="hidden" data-trix-body-target="lessContentButton">
+        <%= link_to t('avo.less_content'), 'javascript:void(0);', class: button_classes, data: { action: 'click->trix-body#toggleContent' } %>
+      </div>
+    <% end %>
   </div>
 <% end %>
diff --git a/app/javascript/js/controllers.js b/app/javascript/js/controllers.js
@@ -45,6 +45,7 @@ import TextFilterController from './controllers/text_filter_controller'
 import TippyController from './controllers/tippy_controller'
 import TiptapFieldController from './controllers/fields/tiptap_field_controller'
 import ToggleController from './controllers/toggle_controller'
+import TrixBodyController from './controllers/trix_body_controller'
 import TrixFieldController from './controllers/fields/trix_field_controller'
 
 application.register('action', ActionController)
@@ -83,6 +84,7 @@ application.register('table-row', TableRowController)
 application.register('text-filter', TextFilterController)
 application.register('tippy', TippyController)
 application.register('toggle', ToggleController)
+application.register('trix-body', TrixBodyController)
 
 // Field controllers
 application.register('belongs-to-field', BelongsToFieldController)

diff --git a/app/javascript/js/controllers/trix_body_controller.js b/app/javascript/js/controllers/trix_body_controller.js
@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['content', 'moreContentButton', 'lessContentButton']
+
+  connect() {
+    this.checkContentHeight()
+  }
+
+  checkContentHeight() {
+    const contentHeight = this.contentTarget.scrollHeight
+
+    if (contentHeight > 50) {
+      this.moreContentButtonTarget.classList.remove('hidden')
+    }
+  }
+
+  toggleContent() {
+    this.contentTarget.classList.toggle('hidden')
+    this.toggleButtons()
+  }
+
+  toggleButtons() {
+    this.moreContentButtonTarget.classList.toggle('hidden')
+    this.lessContentButtonTarget.classList.toggle('hidden')
+  }
+}
diff --git a/lib/generators/avo/templates/locales/avo.ar.yml b/lib/generators/avo/templates/locales/avo.ar.yml
@@ -67,9 +67,11 @@ ar:
       key: المفتاح
       reorder_row: إعادة ترتيب الصف
       value: القيمة
+    less_content: محتوى أقل
     list_is_empty: القائمة فارغة
     loading: جاري التحميل
     more: المزيد
+    more_content: المزيد من المحتوى
     new: جديد
     next_page: الصفحة التالية
     no_cancel: لا، إلغاء

diff --git a/lib/generators/avo/templates/locales/avo.de.yml b/lib/generators/avo/templates/locales/avo.de.yml
@@ -98,6 +98,8 @@ de:
     select_all_matching: Alle übereinstimmenden auswählen
     select_item: Eintrag auswählen
     show_content: Inhalt anzeigen
+    more_content: Mehr Inhalt
+    less_content: Weniger Inhalt
     sign_out: Abmelden
     switch_to_view: Wechseln zur %{view_type}-Ansicht
     table_view: Tabellenansicht

diff --git a/lib/generators/avo/templates/locales/avo.en.yml b/lib/generators/avo/templates/locales/avo.en.yml
@@ -57,9 +57,11 @@ en:
       key: Key
       reorder_row: Reorder row
       value: Value
+    less_content: Less content
     list_is_empty: List is empty
     loading: Loading
     more: More
+    more_content: More content
     new: new
     next_page: Next page
     no_cancel: No, cancel

diff --git a/lib/generators/avo/templates/locales/avo.es.yml b/lib/generators/avo/templates/locales/avo.es.yml
@@ -59,9 +59,11 @@ es:
       key: Clave
       reorder_row: Reordenar fila
       value: Valor
+    less_content: Menos contenido
     list_is_empty: La lista está vacía
     loading: Cargando
     more: Más
+    more_content: Más contenido
     new: nuevo/a
     next_page: Página siguiente
     no_cancel: No, cancelar

diff --git a/lib/generators/avo/templates/locales/avo.fr.yml b/lib/generators/avo/templates/locales/avo.fr.yml
@@ -59,9 +59,11 @@ fr:
       key: Clé
       reorder_row: Réorganiser la ligne
       value: Valeur
+    less_content: Moins de contenu
     list_is_empty: La liste est vide
     loading: Chargement
     more: Plus
+    more_content: Plus de contenu
     new: Nouveau
     next_page: Page suivante
     no_cancel: Non, annuler

diff --git a/lib/generators/avo/templates/locales/avo.it.yml b/lib/generators/avo/templates/locales/avo.it.yml
@@ -98,6 +98,8 @@ it:
     select_all_matching: Seleziona tutto corrispondente
     select_item: Seleziona elemento
     show_content: Mostra contenuto
+    more_content: Più contenuti
+    less_content: Meno contenuti
     sign_out: Esci
     switch_to_view: Passa a vista %{view_type}
     table_view: Vista tabella

diff --git a/lib/generators/avo/templates/locales/avo.ja.yml b/lib/generators/avo/templates/locales/avo.ja.yml
@@ -59,9 +59,11 @@ ja:
       key: キー
       reorder_row: 行の並べ替え
       value: 値
+    less_content: コンテンツが少ない
     list_is_empty: リストは空です
     loading: 読み込み中
     more: もっと
+    more_content: さらなるコンテンツ
     new: 新規
     next_page: 次のページ
     no_cancel: いいえ、キャンセル

diff --git a/lib/generators/avo/templates/locales/avo.nb.yml b/lib/generators/avo/templates/locales/avo.nb.yml
@@ -59,9 +59,11 @@ nb:
       key: Nøkkel
       reorder_row: Omorganiser rad
       value: Verdi
+    less_content: Mindre innhold
     list_is_empty: Listen er tom
     loading: Laster
     more: Mer
+    more_content: Mer innhold
     new: ny
     next_page: Neste side
     no_cancel: Nei, avbryt

diff --git a/lib/generators/avo/templates/locales/avo.nl.yml b/lib/generators/avo/templates/locales/avo.nl.yml
@@ -98,6 +98,8 @@ nl:
     select_all_matching: Alles selecteren wat overeenkomt
     select_item: Item selecteren
     show_content: Inhoud tonen
+    more_content: Meer inhoud
+    less_content: Minder inhoud
     sign_out: Afmelden
     switch_to_view: Schakelen naar %{view_type}-weergave
     table_view: Tabelweergave

diff --git a/lib/generators/avo/templates/locales/avo.nn.yml b/lib/generators/avo/templates/locales/avo.nn.yml
@@ -59,9 +59,11 @@ nn:
       key: Nøkkel
       reorder_row: Omorganiser rad
       value: Verdi
+    less_content: Mindre innhold
     list_is_empty: Lista er tom
     loading: Lastar
     more: Meir
+    more_content: Mer innhold
     new: ny
     next_page: Neste side
     no_cancel: Nei, avbryt

diff --git a/lib/generators/avo/templates/locales/avo.pl.yml b/lib/generators/avo/templates/locales/avo.pl.yml
@@ -100,6 +100,8 @@ pl:
     select_all_matching: Zaznacz wszystkie pasujące
     select_item: Wybierz element
     show_content: Pokaż zawartość
+    more_content: Pokaż wiecej
+    less_content: Pokaż mniej
     sign_out: Wyloguj się
     switch_to_view: Przełącz na widok %{view_type}
     table_view: Widok tabelaryczny

diff --git a/lib/generators/avo/templates/locales/avo.pt-BR.yml b/lib/generators/avo/templates/locales/avo.pt-BR.yml
@@ -59,9 +59,11 @@ pt-BR:
       key: Chave
       reorder_row: Reordenar linha
       value: Valor
+    less_content: Menos conteúdo
     list_is_empty: Lista vazia
     loading: Carregando
     more: Mais
+    more_content: Mais conteúdo
     new: novo
     next_page: Próxima página
     no_cancel: Não, cancelar

diff --git a/lib/generators/avo/templates/locales/avo.pt.yml b/lib/generators/avo/templates/locales/avo.pt.yml
@@ -59,9 +59,11 @@ pt:
       key: Chave
       reorder_row: Reordenar linha
       value: Valor
+    less_content: Menos conteúdo
     list_is_empty: Lista vazia
     loading: A carregar
     more: Mais
+    more_content: Mais conteúdo
     new: novo
     next_page: Próxima página
     no_cancel: Não, cancelar

diff --git a/lib/generators/avo/templates/locales/avo.ro.yml b/lib/generators/avo/templates/locales/avo.ro.yml
@@ -61,9 +61,11 @@ ro:
       key: Cheie
       reorder_row: Reordonează rând
       value: Valoare
+    less_content: Mai puțin conținut
     list_is_empty: Lista este goală
     loading: Se incarcă
     more: Mai multe
+    more_content: Mai mult conținut
     new: nou
     next_page: Pagina următoare
     no_cancel: Nu, anulează

diff --git a/lib/generators/avo/templates/locales/avo.ru.yml b/lib/generators/avo/templates/locales/avo.ru.yml
@@ -100,6 +100,8 @@ ru:
     select_all_matching: Выбрать все совпадающие
     select_item: Выбрать элемент
     show_content: Показать содержимое
+    more_content: Больше контента
+    less_content: Меньше контента
     sign_out: Выйти
     switch_to_view: Переключиться на вид %{view_type}
     table_view: Таблица

diff --git a/lib/generators/avo/templates/locales/avo.tr.yml b/lib/generators/avo/templates/locales/avo.tr.yml
@@ -59,9 +59,11 @@ tr:
       key: Anahtar
       reorder_row: Satırı yeniden sırala
       value: Değer
+    less_content: Daha az içerik
     list_is_empty: Boş liste
     loading: Yükleniyor
     more: Daha fazla
+    more_content: Daha fazla içerik
     new: yeni
     next_page: Sonraki sayfa
     no_cancel: Hayır, iptal et

diff --git a/lib/generators/avo/templates/locales/avo.uk.yml b/lib/generators/avo/templates/locales/avo.uk.yml
@@ -100,6 +100,8 @@ uk:
     select_all_matching: Вибрати всі відповідні
     select_item: Вибрати елемент
     show_content: Показати вміст
+    more_content: Більше вмісту
+    less_content: Менше вмісту
     sign_out: Вийти
     switch_to_view: Перейти до виду %{view_type}
     table_view: Таблиця

diff --git a/lib/generators/avo/templates/locales/avo.zh.yml b/lib/generators/avo/templates/locales/avo.zh.yml
@@ -98,6 +98,8 @@ zh:
     select_all_matching: 选择所有匹配项
     select_item: 选择项目
     show_content: 显示内容
+    more_content: 更多内容
+    less_content: 内容较少
     sign_out: 登出
     switch_to_view: 切换到 %{view_type} 视图
     table_view: 表格视图

diff --git a/spec/dummy/config/locales/avo.en.yml b/spec/dummy/config/locales/avo.en.yml
@@ -99,6 +99,8 @@ en:
     select_all_matching: Select all matching
     select_item: Select item
     show_content: Show content
+    more_content: More content
+    less_content: Less content
     sign_out: Sign out
     switch_to_view: Switch to %{view_type} view
     table_view: Table view

diff --git a/spec/system/avo/trix_field_spec.rb b/spec/system/avo/trix_field_spec.rb
@@ -31,8 +31,6 @@
 
         save
 
-        click_on "Show content"
-
         expect(find_field_value_element("body")).to have_text "Works for us!!!"
       end
 
@@ -59,10 +57,46 @@
       it "displays the posts body" do
         visit "/admin/resources/posts/#{post.id}"
 
-        click_on "Show content"
-
+        expect(page).not_to have_link("More content", href: "javascript:void(0);")
         expect(find_field_value_element("body")).to have_text ActionView::Base.full_sanitizer.sanitize(body)
       end
+
+      context "when body has more then 1 line" do
+        let!(:body) do
+          <<~HTML
+            <div>test1</div>
+            <div>test2</div>
+            <div>test3</div>
+            <div>test4</div>
+            <div>test5</div>
+          HTML
+        end
+
+        it "displays correct button" do
+          visit "/admin/resources/posts/#{post.id}"
+
+          expect(page).to have_link("More content", href: "javascript:void(0);")
+
+          click_on "More content"
+
+          expect(page).to have_link("Less content", href: "javascript:void(0);")
+
+          click_on "Less content"
+        end
+
+        it "always_show" do
+          Avo::Resources::Post.with_temporary_items do
+            field :body, as: :trix, always_show: true
+          end
+
+          visit "/admin/resources/posts/#{post.id}"
+
+          expect(page).not_to have_link("More content", href: "javascript:void(0);")
+          expect(page).not_to have_link("Less content", href: "javascript:void(0);")
+
+          Avo::Resources::Post.restore_items_from_backup
+        end
+      end
     end
 
     context "edit" do
@@ -86,7 +120,6 @@
         fill_in_trix_editor "trix_post_body", with: "New example!"
 
         save
-        click_on "Show content"
 
         expect(find_field_value_element("body")).to have_text "New example!"
       end