From 9b6ca37a070dda377e520ad72a7dfa4225dc19d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Mon, 12 Oct 2020 12:53:16 +0200
Subject: [PATCH] Hide some listing actions on mobile devices

[MAILPOET-2780]
---
 assets/css/src/generic/_helpers.scss                  |  6 ++++++
 assets/js/src/forms/list.jsx                          |  3 +++
 assets/js/src/listing/listing_item.jsx                | 11 +++++++----
 .../js/src/newsletters/automatic_emails/listings.jsx  |  3 +++
 assets/js/src/newsletters/listings/notification.jsx   |  3 +++
 .../src/newsletters/listings/notification_history.jsx |  1 +
 assets/js/src/newsletters/listings/standard.jsx       |  3 +++
 assets/js/src/newsletters/listings/welcome.jsx        |  3 +++
 assets/js/src/segments/dynamic_segments_list.jsx      |  2 ++
 assets/js/src/segments/list.jsx                       |  5 +++++
 assets/js/src/subscribers/list.jsx                    |  2 ++
 11 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/assets/css/src/generic/_helpers.scss b/assets/css/src/generic/_helpers.scss
index 92a5f480ed..d8e353df15 100644
--- a/assets/css/src/generic/_helpers.scss
+++ b/assets/css/src/generic/_helpers.scss
@@ -43,6 +43,12 @@ span.mailpoet-gap-half {
   touch-action: none;
 }
 
+.mailpoet-hide-on-mobile {
+  @include respond-to(small-screen) {
+    display: none !important;
+  }
+}
+
 // Media query helpers
 .small-screen {
   display: none;
diff --git a/assets/js/src/forms/list.jsx b/assets/js/src/forms/list.jsx
index 4a421a811c..8bbf2abd44 100644
--- a/assets/js/src/forms/list.jsx
+++ b/assets/js/src/forms/list.jsx
@@ -115,6 +115,7 @@ function getFormPlacement(settings) {
 const itemActions = [
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('edit'),
     link: function link(item) {
       return (
@@ -124,6 +125,7 @@ const itemActions = [
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: function onClick(item, refresh) {
       return MailPoet.Ajax.post({
@@ -151,6 +153,7 @@ const itemActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 
diff --git a/assets/js/src/listing/listing_item.jsx b/assets/js/src/listing/listing_item.jsx
index 19e51171c7..35a591c33c 100644
--- a/assets/js/src/listing/listing_item.jsx
+++ b/assets/js/src/listing/listing_item.jsx
@@ -76,7 +76,10 @@ class ListingItem extends React.Component {
 
           if (action.name === 'trash') {
             customAction = (
-              <span key={`action-${action.name}`} className="trash">
+              <span
+                key={`action-${action.name}`}
+                className={classNames(action.name, action.className)}
+              >
                 <a
                   type="button"
                   href="#"
@@ -94,7 +97,7 @@ class ListingItem extends React.Component {
               <span
                 onClick={this.props.onRefreshItems}
                 key={`action-${action.name}`}
-                className={action.name}
+                className={classNames(action.name, action.className)}
                 role="button"
                 tabIndex={index}
                 onKeyDown={(event) => {
@@ -112,7 +115,7 @@ class ListingItem extends React.Component {
             customAction = (
               <span
                 key={`action-${action.name}`}
-                className={action.name}
+                className={classNames(action.name, action.className)}
               >
                 { action.link(this.props.item, this.props.location) }
               </span>
@@ -121,7 +124,7 @@ class ListingItem extends React.Component {
             customAction = (
               <span
                 key={`action-${action.name}`}
-                className={action.name}
+                className={classNames(action.name, action.className)}
               >
                 <a
                   href="#"
diff --git a/assets/js/src/newsletters/automatic_emails/listings.jsx b/assets/js/src/newsletters/automatic_emails/listings.jsx
index 452b9af5f3..2138fab1f9 100644
--- a/assets/js/src/newsletters/automatic_emails/listings.jsx
+++ b/assets/js/src/newsletters/automatic_emails/listings.jsx
@@ -114,6 +114,7 @@ const newsletterActions = [
   },
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: function link(newsletter) {
       return (
         <a href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}>
@@ -124,6 +125,7 @@ const newsletterActions = [
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: (newsletter, refresh) => MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
@@ -146,6 +148,7 @@ const newsletterActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 
diff --git a/assets/js/src/newsletters/listings/notification.jsx b/assets/js/src/newsletters/listings/notification.jsx
index a47e995c26..73c6534382 100644
--- a/assets/js/src/newsletters/listings/notification.jsx
+++ b/assets/js/src/newsletters/listings/notification.jsx
@@ -122,6 +122,7 @@ const newsletterActions = [
   },
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: function link(newsletter) {
       return (
         <a href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}>
@@ -132,6 +133,7 @@ const newsletterActions = [
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: function onClick(newsletter, refresh) {
       return MailPoet.Ajax.post({
@@ -160,6 +162,7 @@ const newsletterActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 
diff --git a/assets/js/src/newsletters/listings/notification_history.jsx b/assets/js/src/newsletters/listings/notification_history.jsx
index f78a91b97b..cf2ccbb719 100644
--- a/assets/js/src/newsletters/listings/notification_history.jsx
+++ b/assets/js/src/newsletters/listings/notification_history.jsx
@@ -110,6 +110,7 @@ const newsletterActions = addStatsCTAAction([
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ]);
 
diff --git a/assets/js/src/newsletters/listings/standard.jsx b/assets/js/src/newsletters/listings/standard.jsx
index 9d476b31d5..f602fdb029 100644
--- a/assets/js/src/newsletters/listings/standard.jsx
+++ b/assets/js/src/newsletters/listings/standard.jsx
@@ -133,11 +133,13 @@ let newsletterActions = [
   },
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('edit'),
     onClick: confirmEdit,
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: function onClick(newsletter, refresh) {
       return MailPoet.Ajax.post({
@@ -166,6 +168,7 @@ let newsletterActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 newsletterActions = addStatsCTAAction(newsletterActions);
diff --git a/assets/js/src/newsletters/listings/welcome.jsx b/assets/js/src/newsletters/listings/welcome.jsx
index f125e11c2b..094759db9e 100644
--- a/assets/js/src/newsletters/listings/welcome.jsx
+++ b/assets/js/src/newsletters/listings/welcome.jsx
@@ -120,6 +120,7 @@ let newsletterActions = [
   },
   {
     name: 'duplicate',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: (newsletter, refresh) => MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
@@ -142,6 +143,7 @@ let newsletterActions = [
   },
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: function link(newsletter) {
       return (
         <a href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}>
@@ -152,6 +154,7 @@ let newsletterActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 newsletterActions = addStatsCTAAction(newsletterActions);
diff --git a/assets/js/src/segments/dynamic_segments_list.jsx b/assets/js/src/segments/dynamic_segments_list.jsx
index 063866226b..0e8ded1874 100644
--- a/assets/js/src/segments/dynamic_segments_list.jsx
+++ b/assets/js/src/segments/dynamic_segments_list.jsx
@@ -85,6 +85,7 @@ const messages = {
 const itemActions = [
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: (item) => (
       <Link to={`/edit-segment/${item.id}`}>
         {MailPoet.I18n.t('edit')}
@@ -101,6 +102,7 @@ const itemActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];
 
diff --git a/assets/js/src/segments/list.jsx b/assets/js/src/segments/list.jsx
index b935c39a29..786da4e932 100644
--- a/assets/js/src/segments/list.jsx
+++ b/assets/js/src/segments/list.jsx
@@ -108,6 +108,7 @@ const bulkActions = [
 const itemActions = [
   {
     name: 'edit',
+    className: 'mailpoet-hide-on-mobile',
     link: function link(item) {
       return (
         <Link to={`/edit/${item.id}`}>{MailPoet.I18n.t('edit')}</Link>
@@ -119,6 +120,7 @@ const itemActions = [
   },
   {
     name: 'duplicate_segment',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('duplicate'),
     onClick: (item, refresh) => MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
@@ -144,6 +146,7 @@ const itemActions = [
   },
   {
     name: 'read_more',
+    className: 'mailpoet-hide-on-mobile',
     link: function link() {
       return (
         <a
@@ -203,12 +206,14 @@ const itemActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
     display: function display(segment) {
       return !isSpecialSegment(segment) && segment.automated_emails_subjects.length === 0;
     },
   },
   {
     name: 'delete',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('moveToTrash'),
     onClick: function onClick(segment) {
       MailPoet.Notice.error(
diff --git a/assets/js/src/subscribers/list.jsx b/assets/js/src/subscribers/list.jsx
index 91bef44f44..d02558dbe0 100644
--- a/assets/js/src/subscribers/list.jsx
+++ b/assets/js/src/subscribers/list.jsx
@@ -266,6 +266,7 @@ const itemActions = [
   },
   {
     name: 'sendConfirmationEmail',
+    className: 'mailpoet-hide-on-mobile',
     label: MailPoet.I18n.t('resendConfirmationEmail'),
     display: function display(subscriber) {
       return subscriber.status === 'unconfirmed' && subscriber.count_confirmations < window.mailpoet_max_confirmation_emails;
@@ -285,6 +286,7 @@ const itemActions = [
   },
   {
     name: 'trash',
+    className: 'mailpoet-hide-on-mobile',
   },
 ];