From 5d4b9d5a0d0dd79172fa806499b0c8a72168a4d1 Mon Sep 17 00:00:00 2001 From: Bola Ahmed Buari Date: Thu, 1 Jul 2021 09:03:41 +0000 Subject: [PATCH] Fixes #3359 - Some macros are hidden in the drag & drop overview with a small screen size --- .../batch_overlay_macro.jst.eco | 3 +- app/assets/stylesheets/zammad.scss | 27 +++-- spec/support/capybara/browser_test_helper.rb | 16 +++ spec/system/ticket/view_spec.rb | 113 ++++++++++++++++++ 4 files changed, 147 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/app/views/ticket_overview/batch_overlay_macro.jst.eco b/app/assets/javascripts/app/views/ticket_overview/batch_overlay_macro.jst.eco index 47aca99bd..7846fa82f 100644 --- a/app/assets/javascripts/app/views/ticket_overview/batch_overlay_macro.jst.eco +++ b/app/assets/javascripts/app/views/ticket_overview/batch_overlay_macro.jst.eco @@ -1,6 +1,7 @@
+<% isSmall = @macros.length > 20 %> <% for macro in @macros: %> -
+
<%= macro.name %>
<% end %> diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 0c121c860..eb608cadb 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -11588,11 +11588,7 @@ output { bottom: -50px; // extra space for bounce animation .batch-overlay-box-inner { - max-height: 310px; - - @media screen and (min-height: 1000px) { - max-height: 465px; - } + max-height: 40vh; } &-group { @@ -11657,12 +11653,8 @@ output { top: -50px; // extra space for bounce animation .batch-overlay-box-inner { - max-height: 146px; + max-height: 55vh; margin: 24px 12px; - - @media screen and (min-height: 800px) { - max-height: 292px; - } } &-entry { @@ -11682,6 +11674,14 @@ output { border-color: $highlight-color; transform: scale(1.05); } + + &.small { + @include small-desktop { + height: 80px; + width: 80px; + padding: 11px 11px 8px; + } + } } } } @@ -11712,7 +11712,7 @@ output { color: inherit; } - td { + td:not(:first-child) { display: block; padding: 0 12px; white-space: nowrap; @@ -11728,6 +11728,11 @@ output { display: none; } } + + .checkbox-replacement > .icon, + .radio-replacement > .icon { + fill: none; + } } &-counter { diff --git a/spec/support/capybara/browser_test_helper.rb b/spec/support/capybara/browser_test_helper.rb index 50cfbaa44..4ba739c04 100644 --- a/spec/support/capybara/browser_test_helper.rb +++ b/spec/support/capybara/browser_test_helper.rb @@ -107,6 +107,22 @@ module BrowserTestHelper page.driver.browser.action.click_and_hold(element).perform end + # Clicks and hold (without releasing) in the middle of the given element + # and moves it to the top left of the page to show marcos batches in + # overview section. + # + # @example + # display_macro_batches(ticket) + # display_macro_batches(tr[data-id='1']) + # + def display_macro_batches(element) + click_and_hold(element) + # move element to y -ticket.location.y + move_mouse_by(0, -element.location.y + 5) + # move a bit to the left to display macro batches + move_mouse_by(-250, 0) + end + # Releases the depressed left mouse button at the current mouse location. # # @example diff --git a/spec/system/ticket/view_spec.rb b/spec/system/ticket/view_spec.rb index 611245501..26e14dc62 100644 --- a/spec/system/ticket/view_spec.rb +++ b/spec/system/ticket/view_spec.rb @@ -117,6 +117,119 @@ RSpec.describe 'Ticket views', type: :system do end.not_to raise_error end end + + context 'with macro batch overlay' do + shared_examples "adding 'small' class to macro element" do + it 'adds a "small" class to the macro element' do + within(:active_content) do + + ticket = page.find(:table_row, Ticket.first.id).native + + display_macro_batches(ticket) + + expect(page).to have_selector('.batch-overlay-macro-entry.small', wait: 10) + + release_mouse + end + end + end + + shared_examples "not adding 'small' class to macro element" do + it 'does not add a "small" class to the macro element' do + within(:active_content) do + + ticket = page.find(:table_row, Ticket.first.id).native + + display_macro_batches(ticket) + + expect(page).to have_no_selector('.batch-overlay-macro-entry.small', wait: 10) + + release_mouse + end + end + end + + shared_examples 'showing all macros' do + it 'shows all macros' do + within(:active_content) do + + ticket = page.find(:table_row, Ticket.first.id).native + + display_macro_batches(ticket) + + expect(page).to have_selector('.batch-overlay-macro-entry', count: all, wait: 10) + + release_mouse + end + end + end + + shared_examples 'showing some macros' do |count| + it 'shows all macros' do + within(:active_content) do + + ticket = page.find(:table_row, Ticket.first.id).native + + display_macro_batches(ticket) + + expect(page).to have_selector('.batch-overlay-macro-entry', count: count, wait: 10) + + release_mouse + end + end + end + + shared_examples 'show macros batch overlay' do + before do + Macro.destroy_all && (create_list :macro, all) + refresh + page.current_window.resize_to(width, height) + visit '#ticket/view/all_open' + end + + context 'with few macros' do + let(:all) { 15 } + + context 'when on large screen' do + let(:width) { 1520 } + let(:height) { 1040 } + + it_behaves_like 'showing all macros' + it_behaves_like "not adding 'small' class to macro element" + end + + context 'when on small screen' do + let(:width) { 1020 } + let(:height) { 1040 } + + it_behaves_like 'showing all macros' + it_behaves_like "not adding 'small' class to macro element" + end + + end + + context 'with many macros' do + let(:all) { 50 } + + context 'when on large screen' do + let(:width) { 1520 } + let(:height) { 1040 } + + it_behaves_like 'showing some macros', 32 + end + + context 'when on small screen' do + let(:width) { 1020 } + let(:height) { 1040 } + + it_behaves_like 'showing some macros', 30 + it_behaves_like "adding 'small' class to macro element" + end + end + end + + include_examples 'show macros batch overlay' + end end context 'bulk note', authenticated_as: :user do