From 946c0ba2b08a5c5559f1906c8851ec02740c94d4 Mon Sep 17 00:00:00 2001 From: Dharmesh Patel Date: Fri, 20 Jun 2025 17:02:33 +0530 Subject: [PATCH 01/18] Updated header UI --- assets/css/admin.css | 107 ++++++++++++++++++++++++-- includes/admin/templates/header.php | 82 ++++++++++++-------- includes/admin/templates/settings.php | 15 +--- 3 files changed, 153 insertions(+), 51 deletions(-) diff --git a/assets/css/admin.css b/assets/css/admin.css index 6a50d400..0c8acb19 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -361,9 +361,8 @@ th.mailchimp-connect { #mailchimp-sf-settings-page .wizard-steps { color: rgba(36, 28, 21); - font-size: 13px; + font-size: 14px; line-height: 18px; - margin-top: 4px; } #mailchimp-sf-settings-page .wizard-steps .deselected { @@ -393,14 +392,18 @@ th.mailchimp-connect { } .mailchimp-sf-header { - padding: 14px 12px; + padding: 14px 36px; background: #fff; border-top: 4px solid var(--mailchimp-color-border); - border-bottom: 1px solid rgba(36, 28, 21, 0.15); + border-bottom: 1px solid #D3D0C8; column-gap: 34px; margin-left: -20px; } +.toplevel_page_mailchimp_sf_options .mailchimp-sf-header { + column-gap: unset; +} + .mailchimp-sf-header h3 { font-family: "Means Web", serif; margin-bottom: 0px; @@ -411,7 +414,7 @@ th.mailchimp-connect { } .mailchimp-sf-header .logo { - margin: 2px 0px; + margin: 6px 0px; } .mailchimp-sf-header .mailchimp-sf-create-account-plus { @@ -892,3 +895,97 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { text-decoration: none; } +#mailchimp-sf-settings-page .user-profile-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 0px; + gap: 24px; + margin-left: auto; +} + +#mailchimp-sf-settings-page .user-profile { + display: flex; + flex-direction: row; + align-items: center; + padding: 0px; + gap: 8px; +} + +#mailchimp-sf-settings-page .user-profile-avatar { + height: 40px; + line-height: 1; +} + +#mailchimp-sf-settings-page .user-profile-avatar img { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid #ECF1F4; + box-sizing: border-box; +} + +#mailchimp-sf-settings-page .user-profile-details { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 0px; + gap: 2px; +} + +#mailchimp-sf-settings-page .user-profile-details .user-profile-name { + font-size: 16px; + font-weight: 500; + line-height: 18px; + color: var(--mailchimp-color-text); +} + +#mailchimp-sf-settings-page .user-profile-details .user-profile-email { + font-size: 14px; + font-weight: 400; + line-height: 16px; + color: var(--mailchimp-color-text); +} + +/* Buttons */ +.mailchimp-sf-button { + all: unset; + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: 10px; + padding: 0 18px; + position: relative; + background-color: #f0f4f6; + border-radius: 6px; + font-weight: 400; + color: #21262a; + font-size: 14px; + text-align: center; + letter-spacing: 0; + white-space: nowrap; + cursor: pointer; + text-align: center; + vertical-align: middle; + -ms-transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s; + transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s; + height: 36px; + border: 1px solid transparent; +} + +.mailchimp-sf-button:hover, .mailchimp-sf-button:active { + background-color: #d5dee3 +} + +.mailchimp-sf-button:focus { + border: 1px solid #017e89; + box-shadow: inset 0 0 0 1px #017e89; + outline-width: 0 +} + +.mailchimp-sf-button[disabled] { + pointer-events: none; + opacity: .4; +} diff --git a/includes/admin/templates/header.php b/includes/admin/templates/header.php index a90dc564..d76dc5b2 100644 --- a/includes/admin/templates/header.php +++ b/includes/admin/templates/header.php @@ -5,49 +5,67 @@ * @package Mailchimp */ +$user = get_option( 'mc_user' ); +$is_logged_in = ! ( ! $user || ( ! get_option( 'mc_api_key' ) && ! mailchimp_sf_get_access_token() ) ); ?>
+ + + +
-

-
+
+
- - - - -
+ + + + +
+
- - - - + + + +
-
+ \ No newline at end of file diff --git a/includes/admin/templates/settings.php b/includes/admin/templates/settings.php index 7673c663..4cbf532b 100644 --- a/includes/admin/templates/settings.php +++ b/includes/admin/templates/settings.php @@ -29,21 +29,8 @@ ?>
- - - - - - -

:

- 		-
- - - -
-
Date: Fri, 20 Jun 2025 22:04:00 +0530 Subject: [PATCH 02/18] Add Settings header. --- assets/css/admin.css | 114 +++++++++++++++++++++++++- assets/images/settings-block.png | Bin 0 -> 34865 bytes includes/admin/templates/settings.php | 27 +++++- 3 files changed, 137 insertions(+), 4 deletions(-) create mode 100644 assets/images/settings-block.png diff --git a/assets/css/admin.css b/assets/css/admin.css index 0c8acb19..08bc8b7e 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -425,12 +425,16 @@ th.mailchimp-connect { font-weight: 300; } -body.admin_page_mailchimp_sf_create_account, -body.toplevel_page_mailchimp_sf_options { +body.admin_page_mailchimp_sf_create_account { background-color: #F6F6F4; font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; } +body.toplevel_page_mailchimp_sf_options { + background-color: #fff; + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; +} + body.admin_page_mailchimp_sf_create_account a, body.toplevel_page_mailchimp_sf_options a { color: var(--mailchimp-color-link); @@ -782,7 +786,8 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { } @media screen and (max-width: 782px) { - .mailchimp-sf-header { + .mailchimp-sf-header, + .mailchimp-sf-settings-page-hero-wrapper { margin-left: -10px; } } @@ -949,6 +954,86 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { color: var(--mailchimp-color-text); } +/* Settings Page Hero */ +.mailchimp-sf-settings-page-hero-wrapper { + margin-left: -20px; + background-color: #fff; + border-bottom: 1px solid rgba(36, 28, 21, 0.15); +} + +#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; + padding: 32px 40px; + gap: 32px; +} + +.mailchimp-sf-settings-page-hero-title-wrapper, +.mailchimp-sf-settings-page-hero-content-wrapper { + flex: 1; +} + +.mailchimp-sf-settings-page-hero-title { + font-family: "Means Web", serif; + font-size: 36px; + font-weight: 400; + line-height: 1.1em; + margin-bottom: 24px; + margin-top: 0px; +} + +.mailchimp-sf-settings-page-hero-description { + font-size: 16px; + font-weight: 500; + line-height: 18px; + color: var(--mailchimp-color-text); +} + +.mailchimp-sf-settings-page-hero-content h3 { + font-family: "Means Web", serif; + font-size: 20px; + font-weight: 400; + line-height: 1.25em; +} + +.mailchimp-sf-settings-page-hero-content p { + font-weight: 400; + line-height: 1.35em; + color: var(--mailchimp-color-text); +} + +.mailchimp-sf-settings-page-hero-content-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 0px 24px; + gap: 24px; + background: #EEEEEA; + border-radius: 8px; + box-sizing: border-box; +} + +.mailchimp-sf-settings-page-hero-content, +.mailchimp-sf-settings-page-hero-content-image { + flex: 1; +} + +.mailchimp-sf-settings-page-hero-content-image { + line-height: 0; + margin-top: 24px; + align-self: end; +} + +.mailchimp-sf-settings-page-hero-content-image img { + width: 100%; + height: auto; +} + /* Buttons */ .mailchimp-sf-button { all: unset; @@ -989,3 +1074,26 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { pointer-events: none; opacity: .4; } + + +@media screen and (max-width: 782px) { + #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero { + flex-direction: column; + padding: 32px 20px 32px 30px; + } + + .mailchimp-sf-header { + padding: 14px 20px; + } +} + +@media screen and (max-width: 480px) { + .mailchimp-sf-header { + flex-direction: column; + gap: 8px; + } + + #mailchimp-sf-settings-page .user-profile-wrapper { + margin: 0 auto; + } +} diff --git a/assets/images/settings-block.png b/assets/images/settings-block.png new file mode 100644 index 0000000000000000000000000000000000000000..a5db7cc5ab53c68b6624a8bd97f83990081a591c GIT binary patch literal 34865 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 a+|oug$*}9WRdIrVKSkN+GUZYxLH`#QKtOr` literal 0 HcmV?d00001 diff --git a/includes/admin/templates/settings.php b/includes/admin/templates/settings.php index 4cbf532b..ca80e962 100644 --- a/includes/admin/templates/settings.php +++ b/includes/admin/templates/settings.php @@ -25,8 +25,33 @@ include_once MCSF_DIR . 'includes/admin/templates/login.php'; } else { $user = get_option( 'mc_user' ); - ?> +
+
+
+

+ +

+

+ +

+
+
+
+

+ +

+

+ +

+
+
+ Settings Hero +
+
+
+
+
Date: Tue, 24 Jun 2025 17:46:33 +0530 Subject: [PATCH 03/18] Upadate list select UI --- assets/css/admin.css | 126 +++++++++++++++-- includes/admin/templates/header.php | 2 +- includes/admin/templates/settings-header.php | 33 +++++ includes/admin/templates/settings.php | 134 ++++++++----------- 4 files changed, 207 insertions(+), 88 deletions(-) create mode 100644 includes/admin/templates/settings-header.php diff --git a/assets/css/admin.css b/assets/css/admin.css index 08bc8b7e..181fbeda 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -986,13 +986,19 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { margin-top: 0px; } -.mailchimp-sf-settings-page-hero-description { +.mailchimp-sf-settings-page-hero-description, +.mailchimp-sf-settings-list-note { font-size: 16px; font-weight: 500; line-height: 18px; color: var(--mailchimp-color-text); } +.mailchimp-sf-settings-list-note { + margin-top: 0px; + margin-bottom: 8px; +} + .mailchimp-sf-settings-page-hero-content h3 { font-family: "Means Web", serif; font-size: 20px; @@ -1000,12 +1006,19 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { line-height: 1.25em; } -.mailchimp-sf-settings-page-hero-content p { +.mailchimp-sf-settings-page-hero-content p, +.mailchimp-sf-settings-list-description { font-weight: 400; line-height: 1.35em; color: var(--mailchimp-color-text); } +.mailchimp-sf-settings-list-description { + font-size: 14px; + margin-top: 0px; + color: #757575; +} + .mailchimp-sf-settings-page-hero-content-wrapper { display: flex; flex-direction: row; @@ -1034,6 +1047,14 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { height: auto; } +/* Settings List Select */ +.mailchimp-sf-settings-list-select-wrapper { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; +} + /* Buttons */ .mailchimp-sf-button { all: unset; @@ -1047,17 +1068,20 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { border-radius: 6px; font-weight: 400; color: #21262a; - font-size: 14px; + font-size: 16px; + line-height: 16px; text-align: center; letter-spacing: 0; white-space: nowrap; cursor: pointer; text-align: center; vertical-align: middle; - -ms-transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s; - transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s; - height: 36px; + -ms-transition: all 0.2s; + transition: all 0.2s; + height: 40px; border: 1px solid transparent; + white-space: nowrap; + justify-content: center; } .mailchimp-sf-button:hover, .mailchimp-sf-button:active { @@ -1065,9 +1089,8 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { } .mailchimp-sf-button:focus { - border: 1px solid #017e89; - box-shadow: inset 0 0 0 1px #017e89; - outline-width: 0 + background-color: #d5dee3; + outline: 2px solid #017e89; } .mailchimp-sf-button[disabled] { @@ -1075,6 +1098,70 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { opacity: .4; } +.mailchimp-sf-button.btn-primary { + background-color: #017e89; + color: #fff; +} + +.mailchimp-sf-button.btn-primary:hover, +.mailchimp-sf-button.btn-primary:active { + background-color: #006771; +} + +.mailchimp-sf-button.btn-primary:focus { + background-color: #006771; + outline: 2px solid #006771; +} + +.mailchimp-sf-button.btn-small { + font-size: 14px; + height: 36px; +} + +/* Settings Page */ +.mailchimp-sf-settings-page { + max-width: 1200px; + margin: 0 auto; + padding: 32px 40px; +} + +.mailchimp-sf-settings-list-wrapper { + margin-bottom: 32px; +} + + +/* Input fields */ +#mailchimp-sf-settings-page select { + font-size: 14px; + padding: 10px 32px 10px 10px; + height: 40px; + background-color: #fff; + border-radius: 6px; + border: 1px solid #c3ced5; + color: #21262a; + line-height: 1.2em; + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; + font-weight: 400; + transition: all 0.2s; + min-width: 200px; +} + +#mailchimp-sf-settings-page select:hover { + background-color: #f8fafb; + border-color: #3c4348; +} + +#mailchimp-sf-settings-page select:focus { + background-color: #fff; + border-color: #017e89; + -webkit-box-shadow: none; + box-shadow: none; + outline-offset: -2px; + outline: 2px solid #017e89; +} + + + @media screen and (max-width: 782px) { #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero { @@ -1082,6 +1169,10 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { padding: 32px 20px 32px 30px; } + .mailchimp-sf-settings-page { + padding: 32px 10px; + } + .mailchimp-sf-header { padding: 14px 20px; } @@ -1093,7 +1184,24 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { gap: 8px; } + .mailchimp-sf-settings-list-select-wrapper { + flex-direction: column; + align-items: flex-start; + } + + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select, + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select, + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button, + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button input { + width: 100%; + } + + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select { + max-width: 100%; + } + #mailchimp-sf-settings-page .user-profile-wrapper { margin: 0 auto; } } + diff --git a/includes/admin/templates/header.php b/includes/admin/templates/header.php index d76dc5b2..a7715151 100644 --- a/includes/admin/templates/header.php +++ b/includes/admin/templates/header.php @@ -36,7 +36,7 @@ diff --git a/includes/admin/templates/settings-header.php b/includes/admin/templates/settings-header.php new file mode 100644 index 00000000..e4c3649b --- /dev/null +++ b/includes/admin/templates/settings-header.php @@ -0,0 +1,33 @@ + +
+
+
+

+ +

+

+ +

+
+
+
+

+ +

+

+ +

+
+
+ Settings Hero +
+
+
+
diff --git a/includes/admin/templates/settings.php b/includes/admin/templates/settings.php index ca80e962..c44ead75 100644 --- a/includes/admin/templates/settings.php +++ b/includes/admin/templates/settings.php @@ -25,84 +25,63 @@ include_once MCSF_DIR . 'includes/admin/templates/login.php'; } else { $user = get_option( 'mc_user' ); + + // Settings header. + include_once MCSF_DIR . 'includes/admin/templates/settings-header.php'; ?> -
-
-
-

- -

-

- -

-
-
-
-

- -

-

- -

-
-
- Settings Hero -
-
-
-
-
- -
-

-
-

-

- -
- get( 'lists', 100, array( 'fields' => 'lists.id,lists.name,lists.email_type_option' ) ); - if ( is_wp_error( $lists ) ) { - $msg = sprintf( - /* translators: %s: error message */ - esc_html__( 'Uh-oh, we couldn\'t get your lists from Mailchimp! Error: %s', 'mailchimp' ), - esc_html( $lists->get_error_message() ) - ); - admin_notice_error( $msg ); - } elseif ( isset( $lists['lists'] ) && count( $lists['lists'] ) === 0 ) { - $msg = sprintf( - /* translators: %s: link to Mailchimp */ - esc_html__( 'Uh-oh, you don\'t have any lists defined! Please visit %s, login, and setup a list before using this tool!', 'mailchimp' ), - "Mailchimp" - ); - admin_notice_error( $msg ); - } else { - $lists = $lists['lists']; - $option = get_option( 'mc_list_id' ); - $list_ids = array_map( - function ( $ele ) { - return $ele['id']; - }, - $lists - ); - $is_list_selected = in_array( $option, $list_ids, true ); - ?> - - - - - -
+
+
+
+ +
+

+ +

+

+ +

+ + get( 'lists', 100, array( 'fields' => 'lists.id,lists.name' ) ); + if ( is_wp_error( $lists ) ) { + $msg = sprintf( + /* translators: %s: error message */ + esc_html__( 'Uh-oh, we couldn\'t get your lists from Mailchimp! Error: %s', 'mailchimp' ), + esc_html( $lists->get_error_message() ) + ); + admin_notice_error( $msg ); + } elseif ( isset( $lists['lists'] ) && count( $lists['lists'] ) === 0 ) { + $msg = sprintf( + /* translators: %s: link to Mailchimp */ + esc_html__( 'Uh-oh, you don\'t have any lists defined! Please visit %s, login, and setup a list before using this tool!', 'mailchimp' ), + "Mailchimp" + ); + admin_notice_error( $msg ); + } else { + $lists = $lists['lists']; + $option = get_option( 'mc_list_id' ); + $list_ids = array_map( + function ( $ele ) { + return $ele['id']; + }, + $lists + ); + $is_list_selected = in_array( $option, $list_ids, true ); + ?> +
+
- -
+ +
- -
- -
-
+ +
+
+ + +

From f492572bb8501ac263f68e8e045b4cfcf5841724 Mon Sep 17 00:00:00 2001 From: Dharmesh Patel Date: Thu, 26 Jun 2025 21:59:42 +0530 Subject: [PATCH 04/18] settings form updates. --- assets/css/admin.css | 208 +++++++- includes/admin/templates/settings.php | 43 +- includes/admin/templates/setup-page.php | 605 ++++++++++++++---------- 3 files changed, 574 insertions(+), 282 deletions(-) diff --git a/assets/css/admin.css b/assets/css/admin.css index 181fbeda..f638144c 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -1053,6 +1053,7 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { flex-direction: row; align-items: center; gap: 8px; + margin-bottom: 16px; } /* Buttons */ @@ -1122,13 +1123,95 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { .mailchimp-sf-settings-page { max-width: 1200px; margin: 0 auto; - padding: 32px 40px; + padding: 32px 20px; } .mailchimp-sf-settings-list-wrapper { - margin-bottom: 32px; + margin-bottom: 20px; } +/* Main Settings */ +.mailchimp-sf-main-settings-wrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.mailchimp-sf-main-settings { + max-width: 800px; +} + +table.widefat.mailchimp-sf-settings-table { + margin-top: 16px; + width: 100%; + border-radius: 8px; + border: 1px solid #D3D0C8; +} + +.mailchimp-sf-settings-table thead tr th { + background-color: var(--mailchimp-color-header-bg); + padding: 24px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} + +.mailchimp-sf-settings-table thead tr th h2 { + color: var(--mailchimp-color-text); + font-family: "Means Web", serif; + font-weight: 400; + font-size: 24px; + line-height: 1.25em; + margin: 0; +} + +.mailchimp-sf-settings-table tbody tr th { + padding: 24px 0px 0px 24px; +} + +.mailchimp-sf-settings-table tr th.mailchimp-sf-option-header { + width: 145px; +} + +.mailchimp-sf-settings-table tbody tr:last-child th { + padding-bottom: 24px; +} + +.mailchimp-sf-settings-table tbody tr td { + padding: 24px 24px 0px 24px; +} + +.mailchimp-sf-settings-table tbody tr:last-child td { + padding-bottom: 24px; +} + +.mailchimp-sf-settings-table tbody tr th, +.mailchimp-sf-settings-table tbody tr th label { + font-weight: 500; + font-size: 16px; + line-height: 18px; + color: #21262a; +} + +.mailchimp-sf-settings-table tbody tr td p.description { + font-size: 12px; + font-weight: 400; + line-height: 1.35em; + color: #757575; + margin: 0px; +} + +.mailchimp-sf-settings-table tbody tr td { + font-size: 16px; + font-weight: 400; + line-height: 1.35em; + color: #21262a; +} + +table.widefat.mailchimp-sf-settings-table ul { + margin: 0px; + padding: 0px; +} /* Input fields */ #mailchimp-sf-settings-page select { @@ -1160,8 +1243,129 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { outline: 2px solid #017e89; } +#mailchimp-sf-settings-page input[type="text"] { + font-size: 16px; + padding: 10px 12px; + height: 40px; + background-color: #fff; + border-radius: 4px; + border: 1px solid #D3D0C8; + color: #21262a; + line-height: 1.35em; + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; + font-weight: 400; + transition: all 0.2s; + min-width: 120px; +} +#mailchimp-sf-settings-page input[type="text"]:hover { + background-color: #f8fafb; + border-color: #3c4348; + outline: none; +} + +#mailchimp-sf-settings-page input[type="text"]:focus { + outline-offset: -2px; + outline: 2px solid #017e89; +} + +#mailchimp-sf-settings-page textarea { + font-size: 16px; + padding: 10px 12px; + background-color: #fff; + border-radius: 4px; + border: 1px solid #D3D0C8; + color: #21262a; + line-height: 1.35em; + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; + font-weight: 400; + transition: all 0.2s; + min-width: 200px; +} + +#mailchimp-sf-settings-page textarea:hover { + background-color: #f8fafb; + border-color: #3c4348; + outline: none; +} + +#mailchimp-sf-settings-page textarea:focus { + outline-offset: -2px; + outline: 2px solid #017e89; +} + +.mailchimp-sf-ch-wrapper { + display: inline-block; + margin: 0.5rem; +} + +input[type=checkbox].mailchimp-sf-checkbox { + appearance: none; + width: 24px; + height: 24px; + border: 1px solid #D3D0C8; + border-radius: 6px; + cursor: pointer; + position: relative; + transition: all 0.2s; + box-shadow: none; + margin: 0px; +} + +input[type=checkbox].mailchimp-sf-checkbox:focus { + outline: 2px solid #017e89; +} + +input[type=checkbox].mailchimp-sf-checkbox:checked { + background-color: #017e89; + border-color: #017e89; +} + +input[type=checkbox].mailchimp-sf-checkbox:checked::before { + content: ""; + width: auto; + height: auto; +} + +input[type=checkbox].mailchimp-sf-checkbox:checked:after { + content: ""; + width: 12px; + height: 5px; + border-radius: 0.5px; + transform: rotate(-45deg); + border-left: 2px solid #fff; + border-bottom: 2px solid #fff; + margin: 6px 4px; + display: block; +} + +input[type=checkbox].mailchimp-sf-checkbox[disabled] { + opacity: 0.3; + cursor: not-allowed; +} +#mailchimp-sf-settings-page .input-checkbox-wrapper { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; +} + +#mailchimp-sf-settings-page .input-checkbox-wrapper label { + font-size: 14px; + font-weight: 400; + line-height: 1.35em; + color: #757575; + margin: 0px; +} + +.mailchimp-sf-settings-table tbody tr td.mailchimp-sf-note { + font-size: 12px; + font-weight: 400; + line-height: 1.35em; + color: #757575; + margin: 0px; +} @media screen and (max-width: 782px) { #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero { diff --git a/includes/admin/templates/settings.php b/includes/admin/templates/settings.php index c44ead75..54b93a49 100644 --- a/includes/admin/templates/settings.php +++ b/includes/admin/templates/settings.php @@ -103,40 +103,21 @@ function ( $ele ) {
-
- - __( 'Settings', 'mailchimp' ), - 'user_sync' => __( 'User Sync', 'mailchimp' ), - ) - ?> - - + -
-
-
- - +
+
+ +
+ + - - - - - - +
- - -
- -
+ + + + + + + + + - - - + + - - - - -
+

+
+ + + +

+ +

-
- - -
-
- -
- - - -
+ + + + + + +

+
+ +

+ + + + + + + + + + + + +
+ +
+ + + + + + + + + + + +
+

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+

+
+ + + /> +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+
+
    + +
    • + +
+ 		+ /> +
+ + - - - +
onclick="showMe('mc-custom-styling')"/>
+ + + + + + + + + + +
+

+
+ + + +
+
+ onclick="showMe('mc-custom-styling')"/> +
+ +
+
- - - - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+
+ + +
+
+ /> +
+ +
+
+ + + +

+ px +

+
+ + + # + +

+ # +

+
+ + + # + +

+ # +

+
+ + + # + +

+ # +

+
+
+ + + + - - - - + + + - - + - - + - - - + -
- + +

- - /> - -
- +
+ - - px +
+
+ id="mc_double_optin" class="mailchimp-sf-checkbox" /> +
+ +
- +
+ - # - - # +
+
+ id="mc_update_existing" class="mailchimp-sf-checkbox" /> +
+ +
- + +
+ - # - - # +
+
+ id="mc_use_unsub_link" class="mailchimp-sf-checkbox" /> +
+ +
- - - # - - # +
+ Note: If you haven\'t already, please add your website URL to your Mailchimp Audience account settings so users can properly return to your site after subscribing.', 'mailchimp' ), + 'https://mailchimp.com/help/change-or-update-the-return-to-our-website-button/' + ), + [ + 'a' => [ + 'href' => [], + 'target' => [], + 'rel' => [], + ], + 'strong' => [], + ] + ) + ?>
-
- - - - - - - - - - - - - - - - - - - - - +
id="mc_double_optin" class="code" /> - -
id="mc_update_existing" class="code" /> - -
id="mc_use_unsub_link" class="code" /> - -
- Note: If you haven\'t already, please add your website URL to your Mailchimp Audience account settings so users can properly return to your site after subscribing.', 'mailchimp' ), - 'https://mailchimp.com/help/change-or-update-the-return-to-our-website-button/' - ), - [ - 'a' => [ - 'href' => [], - 'target' => [], - 'rel' => [], - ], - 'strong' => [], - ] - ) - ?> -

- - -
- - - -
-
- -
- - - - - - - - - - - - - - - - - - -
- -
- - - /> - -  —  - -
-
-
- - -
-

-
- - - - - - - - - - - - - - - - - - - -
- - - /> -
-
    - -
    • - -
-
- +
+
+
+ +
+
From 0b140cccb9bd85153279d0d85c1833a928aebde7 Mon Sep 17 00:00:00 2001 From: Dharmesh Patel Date: Mon, 30 Jun 2025 16:31:11 +0530 Subject: [PATCH 05/18] Display save changes button on form changes. --- assets/css/admin.css | 28 ++ assets/js/admin.js | 92 +++++ includes/admin/templates/setup-page.php | 449 +++++++++++++----------- 3 files changed, 360 insertions(+), 209 deletions(-) diff --git a/assets/css/admin.css b/assets/css/admin.css index f638144c..d34cf8c5 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -1119,6 +1119,14 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { height: 36px; } +.mailchimp-sf-section-footer { + text-align: right; +} + +.mailchimp-sf-section-footer .mailchimp-sf-button { + margin: 16px 0px; +} + /* Settings Page */ .mailchimp-sf-settings-page { max-width: 1200px; @@ -1138,6 +1146,22 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { justify-content: space-between; } +.mailchimp-sf-main-setings-wrapper { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + gap: 16px; +} + +.mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings { + flex: 3; +} + +.mailchimp-sf-main-setings-wrapper .mailchimp-sf-settings-form-previewer { + flex: 1; +} + .mailchimp-sf-main-settings { max-width: 800px; } @@ -1156,6 +1180,10 @@ table.widefat.mailchimp-sf-settings-table { border-top-right-radius: 8px; } +.mailchimp-sf-settings-form-previewer .mailchimp-sf-settings-table thead tr th { + background-color: #EEEEEA; +} + .mailchimp-sf-settings-table thead tr th h2 { color: var(--mailchimp-color-text); font-family: "Means Web", serif; diff --git a/assets/js/admin.js b/assets/js/admin.js index bbcba3fa..b596376d 100644 --- a/assets/js/admin.js +++ b/assets/js/admin.js @@ -554,3 +554,95 @@ }); }); })(jQuery); // eslint-disable-line no-undef + +// Form settings. +(function ($) { + /** + * Initialize form settings functionality + */ + function initFormSettings() { + const $form = $('#mailchimp-sf-settings-form'); + const $submitButtons = $('.mailchimp-sf-button-submit'); + const initialValues = {}; + + // Initially hide all submit buttons + $submitButtons.hide(); + + /** + * Store initial form state + */ + function storeInitialState() { + $form.find('input, textarea, select').each(function () { + const $input = $(this); + if ($input.is(':checkbox')) { + initialValues[$input.attr('name')] = $input.is(':checked'); + } else { + initialValues[$input.attr('name')] = $input.val(); + } + }); + } + + /** + * Check if form has changed from initial state + * + * @returns {boolean} True if form has changed + */ + function hasFormChanged() { + let hasChanged = false; + + $form.find('input, textarea, select').each(function () { + const $input = $(this); + const name = $input.attr('name'); + + if (!name) { + return; + } + + if ($input.is(':checkbox')) { + if (initialValues[name] !== $input.is(':checked')) { + hasChanged = true; + return false; // Break the loop + } + } else if (initialValues[name] !== $input.val()) { + hasChanged = true; + return false; // Break the loop + } + }); + + return hasChanged; + } + + /** + * Toggle submit buttons visibility based on form state + * + * @param {jQuery} $changedInput - The input that was changed + */ + function toggleSubmitButtons($changedInput) { + if (hasFormChanged()) { + $changedInput + .closest('.mailchimp-sf-section') + .find('.mailchimp-sf-button-submit') + .fadeIn(); + $changedInput + .closest('.mailchimp-sf-section') + .find('.mailchimp-sf-section-footer') + .slideDown(); + } else { + $submitButtons.fadeOut(); + $('.mailchimp-sf-section-footer').slideUp(); + } + } + + // Store initial state when page loads + storeInitialState(); + + // Watch for changes on all form elements + $form.on('input change', 'input, textarea, select', function () { + const $changedInput = $(this); + toggleSubmitButtons($changedInput); + }); + } + + // Initialize when document is ready + $(document).ready(initFormSettings); +})(jQuery); // eslint-disable-line no-undef diff --git a/includes/admin/templates/setup-page.php b/includes/admin/templates/setup-page.php index 623c7083..6f4d4e1e 100644 --- a/includes/admin/templates/setup-page.php +++ b/includes/admin/templates/setup-page.php @@ -58,13 +58,17 @@ -
+ +
+ +
+
-
+
@@ -83,7 +87,7 @@ -
+
@@ -130,271 +134,298 @@ ?>
-
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+

+
+
    + +
    • + +
+ 		+ /> +
+ +
+ +
+
+ + +
+ - - - - - - + + + - - - - - - - - - -
-

+ 		+

+ + + +
+
+ onclick="showMe('mc-custom-styling')"/> +
+ +
+
-
    - -
    • - -
- 		- /> -
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+
+ + +
+
+ /> +
+ +
+
+ + + +

+ px +

+
+ + + # + +

+ # +

+
+ + + # + +

+ # +

+
+ + + # + +

+ # +

+
+ + - - + - -
-

+

- +
+ - -
-
- onclick="showMe('mc-custom-styling')"/> -
- +
+
+ id="mc_double_optin" class="mailchimp-sf-checkbox" />
+ +
- - - - - - - - - - + - - - - - - - - - - + - - - +
-

-
- +
+ -
-
- /> -
- +
+
+ id="mc_update_existing" class="mailchimp-sf-checkbox" />
+ +
- - - -

- px -

-
- - - # - -

- # -

-
- + +
+ - # - -

- # -

+
+
+ id="mc_use_unsub_link" class="mailchimp-sf-checkbox" /> +
+ +
- - - # - -

- # -

+
+ Note: If you haven\'t already, please add your website URL to your Mailchimp Audience account settings so users can properly return to your site after subscribing.', 'mailchimp' ), + 'https://mailchimp.com/help/change-or-update-the-return-to-our-website-button/' + ), + [ + 'a' => [ + 'href' => [], + 'target' => [], + 'rel' => [], + ], + 'strong' => [], + ] + ) + ?>
-
- - +
+ +
+
+ +
+
+
- - - - - - - - - - - - - + - - -
-

+ 		+

- - -
-
- id="mc_double_optin" class="mailchimp-sf-checkbox" /> -
- -
-
- - -
-
- id="mc_update_existing" class="mailchimp-sf-checkbox" /> -
- -
-
- - -
-
- id="mc_use_unsub_link" class="mailchimp-sf-checkbox" /> +
+
- - -
- Note: If you haven\'t already, please add your website URL to your Mailchimp Audience account settings so users can properly return to your site after subscribing.', 'mailchimp' ), - 'https://mailchimp.com/help/change-or-update-the-return-to-our-website-button/' - ), - [ - 'a' => [ - 'href' => [], - 'target' => [], - 'rel' => [], - ], - 'strong' => [], - ] - ) - ?>
-
-
- -
-
-
-
From 42a2c9f76e97f25ceb04462d40918cc52c42c016 Mon Sep 17 00:00:00 2001 From: Dharmesh Patel Date: Mon, 30 Jun 2025 20:41:02 +0530 Subject: [PATCH 06/18] User sync settings UI updates. --- assets/css/admin.css | 187 +++++++++++++++--- assets/js/admin.js | 4 +- includes/admin/class-mailchimp-user-sync.php | 170 +++++++++------- includes/admin/templates/settings.php | 6 + includes/admin/templates/user-sync.php | 70 +++++-- ...-mailchimp-user-sync-backgroud-process.php | 7 + 6 files changed, 326 insertions(+), 118 deletions(-) diff --git a/assets/css/admin.css b/assets/css/admin.css index d34cf8c5..2e005af4 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -39,29 +39,13 @@ table.mc-user, } /* Sections */ -table.mc-widefat, .mailchimp-sf-user-sync-page table.form-table { +table.mc-widefat { background: var(--mailchimp-color-white); border: 2px solid var(--mailchimp-color-header-bg) !important; border-radius: 6px; margin: 2.75rem 0 2.25rem; } -.mailchimp-sf-user-sync-page table.form-table { - border-collapse: separate; - border-spacing: 0px; -} - -.mailchimp-sf-user-sync-page table.form-table tr:first-child, -table.mc-widefat tr:first-child { - background: var(--mailchimp-color-header-bg); -} - -.mailchimp-sf-user-sync-page table.form-table tr:first-child th, -table.mc-widefat tr:first-child th { - color: var(--mailchimp-color-text); - font-weight: 500; -} - /* Buttons */ #wpbody .button-secondary { border-color: var(--mailchimp-color-link); @@ -189,8 +173,6 @@ table.mc-list-select { } /* Table */ -.mailchimp-sf-user-sync-page table.form-table td, -.mailchimp-sf-user-sync-page table.form-table th, table.mc-widefat td, table.mc-widefat th { padding: 18px; @@ -198,8 +180,6 @@ table.mc-widefat th { text-shadow: none; } -.mailchimp-sf-user-sync-page table.form-table .last-row td, -.mailchimp-sf-user-sync-page table.form-table .last-row th, table.mc-widefat .last-row td, table.mc-widefat .last-row th { border-bottom: none !important; @@ -211,11 +191,6 @@ table.mc-widefat th { width: 130px; } -.mailchimp-sf-user-sync-page table.form-table th { - color: var(--mailchimp-color-text-light); - font-weight: 500; -} - table.mc-widefat td label { display: block; font-size: 0.75rem; @@ -230,7 +205,6 @@ table.mc-widefat td { line-height: 1.125 !important; } -.mailchimp-sf-user-sync-page table.form-table td input, table.mc-widefat td input { display: inline-block; font-style: normal; @@ -404,7 +378,8 @@ th.mailchimp-connect { column-gap: unset; } -.mailchimp-sf-header h3 { +.mailchimp-sf-header h3, +.mailchimp-sf-user-sync-settings-field-label { font-family: "Means Web", serif; margin-bottom: 0px; margin-top: 0px; @@ -413,6 +388,17 @@ th.mailchimp-connect { line-height: 1.2em; } +.mailchimp-sf-user-sync-settings-field-label { + margin-bottom: 24px; + line-height: 1.25em; +} + +.mailchimp-user-sync-subscriber-status .mailchimp-sf-user-sync-settings-field-label, +.mailchimp-user-sync-user-roles .mailchimp-sf-user-sync-settings-field-label { + border-bottom: 1px solid #D3D0C8; + padding-bottom: 20px; +} + .mailchimp-sf-header .logo { margin: 6px 0px; } @@ -837,8 +823,13 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { line-height: 1.4; } -.button.mailchimp-cancel-user-sync-button { +a.mailchimp-sf-button.mailchimp-cancel-user-sync-button { margin-left: auto; + color: #21262a; +} + +a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover { + color: #21262a; } @media screen and (max-width: 480px) { @@ -847,7 +838,7 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { align-items: flex-start; } - .button.mailchimp-cancel-user-sync-button { + .mailchimp-cancel-user-sync-button { margin-left: 0px; margin-top: 10px; } @@ -866,6 +857,8 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { .mailchimp-sf-user-sync-error-action { min-width: 120px; text-align: right; + display: flex; + align-items: center; } .mailchimp-sf-start-user-sync-wrapper { @@ -1103,6 +1096,9 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { background-color: #017e89; color: #fff; } +body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover { + color: #fff; +} .mailchimp-sf-button.btn-primary:hover, .mailchimp-sf-button.btn-primary:active { @@ -1123,6 +1119,11 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { text-align: right; } +.mailchimp-sf-section-footer p.submit { + margin: 0px; + padding: 0px; +} + .mailchimp-sf-section-footer .mailchimp-sf-button { margin: 16px 0px; } @@ -1162,7 +1163,8 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { flex: 1; } -.mailchimp-sf-main-settings { +.mailchimp-sf-main-settings, +.mailchimp-sf-user-sync-page { max-width: 800px; } @@ -1229,18 +1231,31 @@ table.widefat.mailchimp-sf-settings-table { margin: 0px; } -.mailchimp-sf-settings-table tbody tr td { +.mailchimp-sf-settings-table tbody tr td, +p.mailchimp-sf-settings-table-description { font-size: 16px; font-weight: 400; line-height: 1.35em; color: #21262a; } +p.mailchimp-sf-settings-table-description { + padding: 0px; + margin: 0px; + margin-top: 12px; +} + table.widefat.mailchimp-sf-settings-table ul { margin: 0px; padding: 0px; } +.mailchimp-sf-user-sync-settings-fields { + display: flex; + flex-direction: column; + gap: 24px; +} + /* Input fields */ #mailchimp-sf-settings-page select { font-size: 14px; @@ -1372,6 +1387,106 @@ input[type=checkbox].mailchimp-sf-checkbox[disabled] { cursor: not-allowed; } +input[type=radio].mailchimp-sf-radio { + appearance: none; + width: 28px; + height: 28px; + border: 1px solid #D3D0C8; + border-radius: 50%; + cursor: pointer; + position: relative; + box-shadow: none; +} + +input[type=radio].mailchimp-sf-radio:checked { + border: 2px solid #017e89; +} + +input[type=radio].mailchimp-sf-radio:checked:before { + display: none; +} + +input[type=radio].mailchimp-sf-radio:checked:after { + content: ""; + display: block; + width: 16px; + height: 16px; + background-color: #017e89; + border-radius: 50%; + margin: 4px; +} + +.widefat td p.radio-description { + font-size: 16px; + font-weight: 400; + line-height: 1.35em; + color: #757575; + margin-top: 8px; + margin-left: 36px; + margin-bottom: 24px; +} + +.mailchimp-sf-user-sync-user-roles { + display: flex; + flex-wrap: wrap; + gap: 24px; +} + +.mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{ + flex: 1 1 45%; +} + +span.mailchimp-sf-last-sync-time { + vertical-align: middle; + margin-left: 12px; + color: #757575; +} + +.mailchimp-sf-toggle-switch { + position: relative; + display: inline-block; + width: 40px; + height: 24px; +} + +.mailchimp-sf-toggle-switch input[type="checkbox"] { + opacity: 0; + width: 0; + height: 0; +} + +.mailchimp-sf-toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #D3D0C8; + transition: .4s; + border-radius: 24px; +} + +.mailchimp-sf-toggle-slider:before { + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 2px; + bottom: 2px; + background-color: white; + transition: .4s; + border-radius: 50%; +} + +input:checked + .mailchimp-sf-toggle-slider { + background-color: #008080; +} + +input:checked + .mailchimp-sf-toggle-slider:before { + transform: translateX(16px); +} + #mailchimp-sf-settings-page .input-checkbox-wrapper { display: flex; flex-direction: row; @@ -1387,6 +1502,10 @@ input[type=checkbox].mailchimp-sf-checkbox[disabled] { margin: 0px; } +#mailchimp-sf-settings-page .mailchimp-sf-user-sync-settings-fields .input-checkbox-wrapper label { + font-size: 16px; +} + .mailchimp-sf-settings-table tbody tr td.mailchimp-sf-note { font-size: 12px; font-weight: 400; @@ -1435,5 +1554,9 @@ input[type=checkbox].mailchimp-sf-checkbox[disabled] { #mailchimp-sf-settings-page .user-profile-wrapper { margin: 0 auto; } + + .mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{ + flex: 1 1 100%; + } } diff --git a/assets/js/admin.js b/assets/js/admin.js index b596376d..5f37dc71 100644 --- a/assets/js/admin.js +++ b/assets/js/admin.js @@ -561,8 +561,8 @@ * Initialize form settings functionality */ function initFormSettings() { - const $form = $('#mailchimp-sf-settings-form'); - const $submitButtons = $('.mailchimp-sf-button-submit'); + const $form = $('#mailchimp-sf-settings-form, .mailchimp-sf-user-sync-form'); + const $submitButtons = $('input[type="submit"].mailchimp-sf-button-submit'); const initialValues = {}; // Initially hide all submit buttons diff --git a/includes/admin/class-mailchimp-user-sync.php b/includes/admin/class-mailchimp-user-sync.php index cab21f09..adaa42b2 100644 --- a/includes/admin/class-mailchimp-user-sync.php +++ b/includes/admin/class-mailchimp-user-sync.php @@ -107,61 +107,53 @@ public function setup_fields_sections() { $this->option_name ); - add_settings_field( - 'user_sync_title', - __( 'User sync settings', 'mailchimp' ), - '__return_empty_string', - $this->option_name, - $section_id - ); - add_settings_field( 'enable_user_sync', - __( 'Enable auto user sync', 'mailchimp' ), + __( 'Enable Sync', 'mailchimp' ), array( $this, 'enable_user_sync_field' ), $this->option_name, $section_id, [ - 'class' => 'mailchimp-user-sync-enable-user-sync', + 'class' => 'mailchimp-user-sync-settings-field mailchimp-user-sync-enable-user-sync', ] ); add_settings_field( 'existing_contacts_only', - __( 'Sync existing contacts only', 'mailchimp' ), + __( 'Sync Existing Contacts Only', 'mailchimp' ), array( $this, 'existing_contacts_only_field' ), $this->option_name, $section_id, [ - 'class' => 'mailchimp-user-sync-existing-contacts-only', + 'class' => 'mailchimp-user-sync-settings-field mailchimp-user-sync-existing-contacts-only', ] ); add_settings_field( 'subscriber_status', - __( 'Subscriber status', 'mailchimp' ), + __( 'Subscriber Status', 'mailchimp' ), array( $this, 'subscriber_status_field' ), $this->option_name, $section_id, [ - 'class' => 'mailchimp-user-sync-subscriber-status', + 'class' => 'mailchimp-user-sync-settings-field mailchimp-user-sync-subscriber-status', ] ); add_settings_field( 'user_roles', - __( 'Roles to sync', 'mailchimp' ), + __( 'Roles to Sync', 'mailchimp' ), array( $this, 'user_roles_field' ), $this->option_name, $section_id, [ - 'class' => 'mailchimp-user-sync-user-roles', + 'class' => 'mailchimp-user-sync-settings-field mailchimp-user-sync-user-roles', ] ); add_settings_field( 'sync_all_users', - __( 'Sync users', 'mailchimp' ), + '', array( $this, 'sync_all_users_button' ), $this->option_name, $section_id @@ -221,27 +213,32 @@ public function user_roles_field() { $settings = $this->get_user_sync_settings( 'user_roles' ); $user_roles = get_editable_roles(); - foreach ( $user_roles as $role_name => $role_details ) { - $value = $settings[ $role_name ] ?? ''; - - // Render checkbox. - printf( - '

- -

', - esc_attr( $this->option_name . '[user_roles][' . $role_name . ']' ), - esc_attr( $role_name ), - checked( $value, $role_name, false ), - esc_html( $role_details['name'] ) - ); - } ?> -

- -

+
+ $role_details ) { + $value = $settings[ $role_name ] ?? ''; + + // Render checkbox. + printf( + ' +
+
+ +
+ +
+ ', + esc_attr( $this->option_name . '[user_roles][' . $role_name . ']' ), + esc_attr( $role_name ), + checked( $value, $role_name, false ), + esc_html( $role_details['name'] ) + ); + } + ?> +
get_user_sync_settings( 'enable_user_sync' ); ?> - - > -

- -

+
+ + +
get_user_sync_settings( 'subscriber_status' ); ?> -
+
-

- +

+

-
+
-

+

-
+
-

+

-

+

get_users_count(); echo wp_kses( @@ -341,10 +343,21 @@ public function existing_contacts_only_field() { $settings = $this->get_user_sync_settings(); $existing_contacts_only = isset( $settings['existing_contacts_only'] ) ? $settings['existing_contacts_only'] : 0; ?> - /> -

- -

+
+
+ + > +
+ +
- - + + -

- -

+ + + + +

- + @@ -723,7 +751,7 @@ public function render_user_sync_progress() { ); ?> - +
@@ -822,7 +850,7 @@ public function render_user_sync_errors() {

- +
@@ -848,7 +876,7 @@ public function render_user_sync_errors() { diff --git a/includes/admin/templates/settings.php b/includes/admin/templates/settings.php index 54b93a49..555dec05 100644 --- a/includes/admin/templates/settings.php +++ b/includes/admin/templates/settings.php @@ -111,6 +111,12 @@ function ( $ele ) { -
- -
- +
+ +
- +
+ + + + + + + + + + +
+

+

+
+
+ +
+ '; + if ( ! empty( $field['args']['label_for'] ) ) { + echo ''; + } else { + echo '' . esc_html( $field['title'] ) . ''; + } + echo '
'; + + echo '
'; + call_user_func( $field['callback'], $field['args'] ); + echo '
'; + ?> +
+ + +
+ +
+ +
clear_running_sync(); return; @@ -193,6 +196,10 @@ public function run( $item = array() ) { ), 'success' ); + + // Update the last sync time. + update_option( 'mailchimp_sf_last_sync_time', time() ); + $this->clear_running_sync(); return; } From 3be82dddb9970e03d16d1997d4ea43bcf788b55a Mon Sep 17 00:00:00 2001 From: Dharmesh Patel Date: Mon, 30 Jun 2025 22:20:19 +0530 Subject: [PATCH 07/18] Unify the button UI --- assets/css/admin.css | 132 +++++++++++----------- assets/js/admin.js | 80 +++---------- includes/admin/templates/login-button.php | 2 +- includes/admin/templates/login.php | 2 +- 4 files changed, 87 insertions(+), 129 deletions(-) diff --git a/assets/css/admin.css b/assets/css/admin.css index 2e005af4..1971a082 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -3,13 +3,16 @@ @import url('../fonts/graphik/fonts.css'); :root { - --mailchimp-color-text: #241c15; + --mailchimp-color-text: #21262a; + --mailchimp-color-text-gray: #757575; --mailchimp-color-white: #fff; --mailchimp-color-border: #ffe01b; --mailchimp-color-header-bg: #fbeeca; - --mailchimp-color-link: #007c89; + --mailchimp-color-link: #017e89; + --mailchimp-color-link-hover: #006771; --mailchimp-color-text-light: #373737; --mailchimp-color-text-lightest: #5d5c5d; + --mailchimp-border-color: #D3D0C8; --mailchimp-max-width: 56.25rem; /* 900 pixels */ } @@ -369,7 +372,7 @@ th.mailchimp-connect { padding: 14px 36px; background: #fff; border-top: 4px solid var(--mailchimp-color-border); - border-bottom: 1px solid #D3D0C8; + border-bottom: 1px solid var(--mailchimp-border-color); column-gap: 34px; margin-left: -20px; } @@ -395,7 +398,7 @@ th.mailchimp-connect { .mailchimp-user-sync-subscriber-status .mailchimp-sf-user-sync-settings-field-label, .mailchimp-user-sync-user-roles .mailchimp-sf-user-sync-settings-field-label { - border-bottom: 1px solid #D3D0C8; + border-bottom: 1px solid var(--mailchimp-border-color); padding-bottom: 20px; } @@ -428,7 +431,7 @@ body.toplevel_page_mailchimp_sf_options a { body.admin_page_mailchimp_sf_create_account a:hover, body.toplevel_page_mailchimp_sf_options a:hover { - color: #006570; + color: var(--mailchimp-color-link-hover); } body.admin_page_mailchimp_sf_create_account #footer-upgrade, @@ -505,26 +508,6 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { margin-top: 36px; } -.button.mailchimp-sf-button { - all: unset; - box-sizing: border-box; - display: inline-flex; - align-items: center; - gap: 10px; - padding: 12px 32px; - position: relative; - background-color: var(--mailchimp-color-link); - border-radius: 38px; - font-weight: 500; - color: #ffffff; - font-size: 13px; - text-align: center; - letter-spacing: 0; - line-height: 20px; - white-space: nowrap; - cursor: pointer; -} - .button.mailchimp-sf-button.button-secondary { color: var(--mailchimp-color-link); background-color: #fff; @@ -535,12 +518,12 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { .button.mailchimp-sf-button:focus, .button.mailchimp-sf-button:active { color: #ffffff; - background-color: #006570; + background-color: var(--mailchimp-color-link-hover); text-decoration: none; } .button.mailchimp-sf-button:focus { - box-shadow: 0 0 0 1px #fff, 0 0 0 3px #006570; + box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--mailchimp-color-link-hover); } .button.mailchimp-sf-button.button-secondary:hover, @@ -825,11 +808,11 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { a.mailchimp-sf-button.mailchimp-cancel-user-sync-button { margin-left: auto; - color: #21262a; + color: var(--mailchimp-color-text); } a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover { - color: #21262a; + color: var(--mailchimp-color-text); } @media screen and (max-width: 480px) { @@ -920,7 +903,7 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover { width: 40px; height: 40px; border-radius: 50%; - border: 1px solid #ECF1F4; + border: 1px solid var(--mailchimp-border-color); box-sizing: border-box; } @@ -1009,7 +992,7 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover { .mailchimp-sf-settings-list-description { font-size: 14px; margin-top: 0px; - color: #757575; + color: var(--mailchimp-color-text-gray); } .mailchimp-sf-settings-page-hero-content-wrapper { @@ -1050,7 +1033,8 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover { } /* Buttons */ -.mailchimp-sf-button { +.mailchimp-sf-button, +.button.mailchimp-sf-button { all: unset; box-sizing: border-box; display: inline-flex; @@ -1061,7 +1045,7 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover { background-color: #f0f4f6; border-radius: 6px; font-weight: 400; - color: #21262a; + color: var(--mailchimp-color-text); font-size: 16px; line-height: 16px; text-align: center; @@ -1084,7 +1068,7 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover { .mailchimp-sf-button:focus { background-color: #d5dee3; - outline: 2px solid #017e89; + outline: 2px solid var(--mailchimp-color-link); } .mailchimp-sf-button[disabled] { @@ -1092,22 +1076,31 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover { opacity: .4; } +.mailchimp-sf-button.button-primary, .mailchimp-sf-button.btn-primary { - background-color: #017e89; + background-color: var(--mailchimp-color-link); + border-color: var(--mailchimp-color-link); color: #fff; } + +body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.button-primary:hover, body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover { color: #fff; } +.mailchimp-sf-button.button-primary:hover, +.mailchimp-sf-button.button-primary:active, .mailchimp-sf-button.btn-primary:hover, .mailchimp-sf-button.btn-primary:active { - background-color: #006771; + background-color: var(--mailchimp-color-link-hover); } +.mailchimp-sf-button.button-primary:focus, .mailchimp-sf-button.btn-primary:focus { - background-color: #006771; - outline: 2px solid #006771; + background-color: var(--mailchimp-color-link-hover); + border-color: var(--mailchimp-color-link-hover); + outline: 2px solid var(--mailchimp-color-link-hover); + box-shadow: none; } .mailchimp-sf-button.btn-small { @@ -1122,6 +1115,7 @@ body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover .mailchimp-sf-section-footer p.submit { margin: 0px; padding: 0px; + text-align: right; } .mailchimp-sf-section-footer .mailchimp-sf-button { @@ -1172,7 +1166,7 @@ table.widefat.mailchimp-sf-settings-table { margin-top: 16px; width: 100%; border-radius: 8px; - border: 1px solid #D3D0C8; + border: 1px solid var(--mailchimp-border-color); } .mailchimp-sf-settings-table thead tr th { @@ -1220,14 +1214,14 @@ table.widefat.mailchimp-sf-settings-table { font-weight: 500; font-size: 16px; line-height: 18px; - color: #21262a; + color: var(--mailchimp-color-text); } .mailchimp-sf-settings-table tbody tr td p.description { font-size: 12px; font-weight: 400; line-height: 1.35em; - color: #757575; + color: var(--mailchimp-color-text-gray); margin: 0px; } @@ -1236,7 +1230,7 @@ p.mailchimp-sf-settings-table-description { font-size: 16px; font-weight: 400; line-height: 1.35em; - color: #21262a; + color: var(--mailchimp-color-text); } p.mailchimp-sf-settings-table-description { @@ -1264,7 +1258,7 @@ table.widefat.mailchimp-sf-settings-table ul { background-color: #fff; border-radius: 6px; border: 1px solid #c3ced5; - color: #21262a; + color: var(--mailchimp-color-text); line-height: 1.2em; font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; font-weight: 400; @@ -1279,11 +1273,11 @@ table.widefat.mailchimp-sf-settings-table ul { #mailchimp-sf-settings-page select:focus { background-color: #fff; - border-color: #017e89; + border-color: var(--mailchimp-color-link); -webkit-box-shadow: none; box-shadow: none; outline-offset: -2px; - outline: 2px solid #017e89; + outline: 2px solid var(--mailchimp-color-link); } #mailchimp-sf-settings-page input[type="text"] { @@ -1292,8 +1286,8 @@ table.widefat.mailchimp-sf-settings-table ul { height: 40px; background-color: #fff; border-radius: 4px; - border: 1px solid #D3D0C8; - color: #21262a; + border: 1px solid var(--mailchimp-border-color); + color: var(--mailchimp-color-text); line-height: 1.35em; font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; font-weight: 400; @@ -1309,7 +1303,7 @@ table.widefat.mailchimp-sf-settings-table ul { #mailchimp-sf-settings-page input[type="text"]:focus { outline-offset: -2px; - outline: 2px solid #017e89; + outline: 2px solid var(--mailchimp-color-link); } #mailchimp-sf-settings-page textarea { @@ -1317,8 +1311,8 @@ table.widefat.mailchimp-sf-settings-table ul { padding: 10px 12px; background-color: #fff; border-radius: 4px; - border: 1px solid #D3D0C8; - color: #21262a; + border: 1px solid var(--mailchimp-border-color); + color: var(--mailchimp-color-text); line-height: 1.35em; font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; font-weight: 400; @@ -1334,7 +1328,7 @@ table.widefat.mailchimp-sf-settings-table ul { #mailchimp-sf-settings-page textarea:focus { outline-offset: -2px; - outline: 2px solid #017e89; + outline: 2px solid var(--mailchimp-color-link); } .mailchimp-sf-ch-wrapper { @@ -1346,7 +1340,7 @@ input[type=checkbox].mailchimp-sf-checkbox { appearance: none; width: 24px; height: 24px; - border: 1px solid #D3D0C8; + border: 1px solid var(--mailchimp-border-color); border-radius: 6px; cursor: pointer; position: relative; @@ -1356,12 +1350,12 @@ input[type=checkbox].mailchimp-sf-checkbox { } input[type=checkbox].mailchimp-sf-checkbox:focus { - outline: 2px solid #017e89; + outline: 2px solid var(--mailchimp-color-link); } input[type=checkbox].mailchimp-sf-checkbox:checked { - background-color: #017e89; - border-color: #017e89; + background-color: var(--mailchimp-color-link); + border-color: var(--mailchimp-color-link); } input[type=checkbox].mailchimp-sf-checkbox:checked::before { @@ -1391,7 +1385,7 @@ input[type=radio].mailchimp-sf-radio { appearance: none; width: 28px; height: 28px; - border: 1px solid #D3D0C8; + border: 1px solid var(--mailchimp-border-color); border-radius: 50%; cursor: pointer; position: relative; @@ -1399,7 +1393,7 @@ input[type=radio].mailchimp-sf-radio { } input[type=radio].mailchimp-sf-radio:checked { - border: 2px solid #017e89; + border: 2px solid var(--mailchimp-color-link); } input[type=radio].mailchimp-sf-radio:checked:before { @@ -1411,7 +1405,7 @@ input[type=radio].mailchimp-sf-radio:checked:after { display: block; width: 16px; height: 16px; - background-color: #017e89; + background-color: var(--mailchimp-color-link); border-radius: 50%; margin: 4px; } @@ -1420,7 +1414,7 @@ input[type=radio].mailchimp-sf-radio:checked:after { font-size: 16px; font-weight: 400; line-height: 1.35em; - color: #757575; + color: var(--mailchimp-color-text-gray); margin-top: 8px; margin-left: 36px; margin-bottom: 24px; @@ -1439,7 +1433,7 @@ input[type=radio].mailchimp-sf-radio:checked:after { span.mailchimp-sf-last-sync-time { vertical-align: middle; margin-left: 12px; - color: #757575; + color: var(--mailchimp-color-text-gray); } .mailchimp-sf-toggle-switch { @@ -1462,7 +1456,7 @@ span.mailchimp-sf-last-sync-time { left: 0; right: 0; bottom: 0; - background-color: #D3D0C8; + background-color: var(--mailchimp-border-color); transition: .4s; border-radius: 24px; } @@ -1480,7 +1474,7 @@ span.mailchimp-sf-last-sync-time { } input:checked + .mailchimp-sf-toggle-slider { - background-color: #008080; + background-color: var(--mailchimp-color-link); } input:checked + .mailchimp-sf-toggle-slider:before { @@ -1498,7 +1492,7 @@ input:checked + .mailchimp-sf-toggle-slider:before { font-size: 14px; font-weight: 400; line-height: 1.35em; - color: #757575; + color: var(--mailchimp-color-text-gray); margin: 0px; } @@ -1510,10 +1504,20 @@ input:checked + .mailchimp-sf-toggle-slider:before { font-size: 12px; font-weight: 400; line-height: 1.35em; - color: #757575; + color: var(--mailchimp-color-text-gray); margin: 0px; } +@media screen and (max-width: 992px) { + .mailchimp-sf-main-setings-wrapper { + flex-direction: column; + } + + .mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings { + flex: 1; + } +} + @media screen and (max-width: 782px) { #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero { flex-direction: column; diff --git a/assets/js/admin.js b/assets/js/admin.js index 5f37dc71..991bf1e7 100644 --- a/assets/js/admin.js +++ b/assets/js/admin.js @@ -63,7 +63,7 @@ }, { text: params.modal_button_try_again, - class: 'button mailchimp-sf-button', + class: 'button mailchimp-sf-button button-primary', click() { $(this).dialog('close'); setConnectButtonLoading(); @@ -561,86 +561,40 @@ * Initialize form settings functionality */ function initFormSettings() { - const $form = $('#mailchimp-sf-settings-form, .mailchimp-sf-user-sync-form'); + const $form = $('#mailchimp-sf-settings-form'); + const $userSyncForm = $('.mailchimp-sf-user-sync-form'); const $submitButtons = $('input[type="submit"].mailchimp-sf-button-submit'); - const initialValues = {}; // Initially hide all submit buttons $submitButtons.hide(); - /** - * Store initial form state - */ - function storeInitialState() { - $form.find('input, textarea, select').each(function () { - const $input = $(this); - if ($input.is(':checkbox')) { - initialValues[$input.attr('name')] = $input.is(':checked'); - } else { - initialValues[$input.attr('name')] = $input.val(); - } - }); - } - - /** - * Check if form has changed from initial state - * - * @returns {boolean} True if form has changed - */ - function hasFormChanged() { - let hasChanged = false; - - $form.find('input, textarea, select').each(function () { - const $input = $(this); - const name = $input.attr('name'); - - if (!name) { - return; - } - - if ($input.is(':checkbox')) { - if (initialValues[name] !== $input.is(':checked')) { - hasChanged = true; - return false; // Break the loop - } - } else if (initialValues[name] !== $input.val()) { - hasChanged = true; - return false; // Break the loop - } - }); - - return hasChanged; - } - /** * Toggle submit buttons visibility based on form state * * @param {jQuery} $changedInput - The input that was changed */ function toggleSubmitButtons($changedInput) { - if (hasFormChanged()) { - $changedInput - .closest('.mailchimp-sf-section') - .find('.mailchimp-sf-button-submit') - .fadeIn(); - $changedInput - .closest('.mailchimp-sf-section') - .find('.mailchimp-sf-section-footer') - .slideDown(); - } else { - $submitButtons.fadeOut(); - $('.mailchimp-sf-section-footer').slideUp(); - } + $changedInput + .closest('.mailchimp-sf-section') + .find('.mailchimp-sf-button-submit') + .show(); + $changedInput + .closest('.mailchimp-sf-section') + .find('.mailchimp-sf-section-footer') + .slideDown({ duration: 200 }); } - // Store initial state when page loads - storeInitialState(); - // Watch for changes on all form elements $form.on('input change', 'input, textarea, select', function () { const $changedInput = $(this); toggleSubmitButtons($changedInput); }); + + // Watch for changes on user sync form elements + $userSyncForm.on('input change', 'input, textarea, select', function () { + const $changedInput = $(this); + toggleSubmitButtons($changedInput); + }); } // Initialize when document is ready diff --git a/includes/admin/templates/login-button.php b/includes/admin/templates/login-button.php index 4629a45f..971c9664 100644 --- a/includes/admin/templates/login-button.php +++ b/includes/admin/templates/login-button.php @@ -7,7 +7,7 @@ $button_text = $login_button_text ?? __( 'Log in', 'mailchimp' ); ?> -