diff --git a/admin_pages/messages/Messages_Admin_Page.core.php b/admin_pages/messages/Messages_Admin_Page.core.php index 8c03283c028..e07ead82fae 100644 --- a/admin_pages/messages/Messages_Admin_Page.core.php +++ b/admin_pages/messages/Messages_Admin_Page.core.php @@ -58,8 +58,6 @@ class Messages_Admin_Page extends EE_Admin_Page protected $_current_message_meta_box_object; - protected $_context_switcher; - protected $_shortcodes = []; protected $_active_messengers = []; @@ -1800,18 +1798,6 @@ protected function _edit_message_template() . ''; - // setup context switcher - $this->_set_context_switcher( - $message_template_group, - [ - 'page' => 'espresso_messages', - 'action' => 'edit_message_template', - 'id' => $GRP_ID, - 'evt_id' => $EVT_ID, - 'context' => $context, - 'extra' => $preview_button, - ] - ); // main box @@ -1825,15 +1811,27 @@ protected function _edit_message_template() $this->_template_args['before_admin_page_content'] = '
'; + $this->_template_args['before_admin_page_content'] .= $this->headerFormStart(); $this->_template_args['before_admin_page_content'] .= $this->add_active_context_element( $message_template_group, $context, $context_label ); - $this->_template_args['before_admin_page_content'] .= $this->add_context_switcher(); + $this->_template_args['before_admin_page_content'] .= $this->add_context_switcher( + $message_template_group, + [ + 'page' => 'espresso_messages', + 'action' => 'edit_message_template', + 'id' => $GRP_ID, + 'evt_id' => $EVT_ID, + 'context' => $context, + 'extra' => $preview_button, + ] + ); + $this->_template_args['before_admin_page_content'] .= $this->formEnd(); $this->_template_args['before_admin_page_content'] .= '
'; - $this->_template_args['before_admin_page_content'] .= $this->_add_form_element_before(); - $this->_template_args['after_admin_page_content'] = $this->_add_form_element_after(); + $this->_template_args['before_admin_page_content'] .= $this->editMessageFormStart(); + $this->_template_args['after_admin_page_content'] = $this->formEnd(); $this->_template_path = $this->_template_args['GRP_ID'] ? EE_MSG_TEMPLATE_PATH . 'ee_msg_details_main_edit_meta_box.template.php' @@ -1868,12 +1866,6 @@ public function filter_tinymce_init($mceInit, $editor_id) } - public function add_context_switcher() - { - return $this->_context_switcher; - } - - /** * Adds the activation/deactivation toggle for the message template context. * @@ -1890,20 +1882,42 @@ protected function add_active_context_element( EE_Message_Template_Group $message_template_group, $context, $context_label - ) { - $template_args = [ - 'context' => $context, - 'nonce' => wp_create_nonce('activate_' . $context . '_toggle_nonce'), - 'is_active' => $message_template_group->is_context_active($context), - 'on_off_action' => $message_template_group->is_context_active($context) - ? 'context-off' - : 'context-on', - 'context_label' => str_replace(['(', ')'], '', $context_label), - 'message_template_group_id' => $message_template_group->ID(), - ]; + ): string { return EEH_Template::display_template( EE_MSG_TEMPLATE_PATH . 'ee_msg_editor_active_context_element.template.php', - $template_args, + [ + 'context' => $context, + 'nonce' => wp_create_nonce('activate_' . $context . '_toggle_nonce'), + 'is_active' => $message_template_group->is_context_active($context), + 'on_off_action' => $message_template_group->is_context_active($context) + ? 'context-off' + : 'context-on', + 'context_label' => str_replace(['(', ')'], '', $context_label), + 'message_template_group_id' => $message_template_group->ID(), + ], + true + ); + } + + + /** + * sets up a context switcher for edit forms + * + * @access protected + * @param EE_Message_Template_Group $template_group_object the template group object being displayed on the form + * @param array $args various things the context switcher needs. + * @throws EE_Error + */ + protected function add_context_switcher(EE_Message_Template_Group $template_group_object, array $args): string + { + return EEH_Template::display_template( + EE_MSG_TEMPLATE_PATH . 'ee_msg_editor_context_switcher.template.php', + [ + 'args' => $args, + 'context_details' => $template_group_object->contexts_config(), + 'context_label' => $template_group_object->context_label(), + 'context_templates' => $template_group_object->context_templates(), + ], true ); } @@ -1985,15 +1999,21 @@ public function toggle_context_template() } - public function _add_form_element_before() + public function headerFormStart(): string + { + $action = esc_url_raw(EE_MSG_ADMIN_URL); + return "
"; + } + + + public function editMessageFormStart(): string { - return ''; + $action = $this->_template_args['edit_message_template_form_url']; + return ""; } - public function _add_form_element_after() + public function formEnd(): string { return '
'; } @@ -2646,71 +2666,6 @@ protected function _set_message_template_group() $this->_variation = $this->_message_template_group->get_template_pack_variation(); } - - /** - * sets up a context switcher for edit forms - * - * @access protected - * @param EE_Message_Template_Group $template_group_object the template group object being displayed on the form - * @param array $args various things the context switcher needs. - * @throws EE_Error - */ - protected function _set_context_switcher(EE_Message_Template_Group $template_group_object, $args) - { - $context_details = $template_group_object->contexts_config(); - $context_label = $template_group_object->context_label(); - ob_start(); - ?> -
-
- $value) { - if ($name === 'context' || empty($value) || $name === 'extra') { - continue; - } - ?> - - - - - - -
- -
- _context_switcher = ob_get_clean(); - } - - /** * @param bool $new * @throws EE_Error diff --git a/admin_pages/messages/assets/ee_message_admin.css b/admin_pages/messages/assets/ee_message_admin.css index 14fa0a1cfa3..6f1bf7cc6df 100644 --- a/admin_pages/messages/assets/ee_message_admin.css +++ b/admin_pages/messages/assets/ee_message_admin.css @@ -59,16 +59,70 @@ padding-block: 1rem; } +#ee-msg-context-switcher-frm { + display: flex; + flex-flow: row wrap; + width: 100%; + --ee-active-control-container-width: 42rem; +} + +/** context toggle **/ +/*.context-active-control-container {*/ +.activate_context_on_off_toggle_container { + align-items: center; + background: white; + box-sizing: border-box; + display: flex; + flex-flow: row wrap; + padding: 1rem; + width: 100%; + --ee-switch-size: 1.5rem; + --ee-switch-size-btn: calc(var(--ee-switch-size) * .75); + --ee-switch-size-width: calc(var(--ee-switch-size) * 2); +} + +.activate_context_on_off_toggle_container .ee-switch { + width: calc(100% - 36px); +} + + +.activate_context_on_off_toggle_container .spinner { + margin: 0; +} + + +.activate_context_on_off_toggle_container .ee-on-off-toggle-label { + margin-inline-end: 1rem; +} + +.activate_context_on_off_toggle_container #ee-on-off-toggle-primary_attendee { + display: none; +} + + .ee-msg-switcher-container { align-items: center; + box-sizing: border-box; display: flex; flex-flow: row wrap; margin: 0; + width: 100%; } + .ee-msg-switcher-container select { width: 16rem; } + +@media screen and (min-width: 1367px) { + .activate_context_on_off_toggle_container { + width: clamp(300px, var(--ee-active-control-container-width), 100%); + } + .ee-msg-switcher-container { + width: clamp(300px, calc(100% - var(--ee-active-control-container-width)), 100%); + } +} + #mtp_valid_shortcodes .shortcode-field-table { margin-top: 12px; } @@ -78,10 +132,6 @@ overflow: auto; } -#ee-msg-context-switcher-frm { - display: flex; - flex-flow: row wrap; -} #ee-recipient-select { width: 15rem; } @@ -426,34 +476,6 @@ h4 + .ee-messages-shortcodes-chooser-wrap { width: calc(100% - (5rem - 4px) - var(--ee-button-height)); } -/** context toggle **/ - .context-active-control-container { - align-items: center; - background: white; - display: flex; - /* grid-area: msg-header-1; */ - padding: 1rem 0 1rem 1rem; - width: 40rem; - --ee-switch-size: 1.5rem; - --ee-switch-size-btn: calc(var(--ee-switch-size) * .75); - --ee-switch-size-width: calc(var(--ee-switch-size) * 2); -} - .context-active-control-container .spinner { - margin: 0; - margin-inline: 1rem; -} -.activate_context_on_off_toggle_container { - align-items: center; - display: flex; - width: 100%; -} -.activate_context_on_off_toggle_container .ee-on-off-toggle-label { - /* width: 24rem; */ - margin-inline-end: 1rem; -} -.activate_context_on_off_toggle_container #ee-on-off-toggle-primary_attendee { - display: none; -} .espresso-admin.wp-core-ui .messages .mce-statusbar.mce-container.mce-panel.mce-stack-layout-item { border-block-end-width: 2px !important; diff --git a/admin_pages/messages/assets/ee_message_editor.js b/admin_pages/messages/assets/ee_message_editor.js index a507ff09796..1ef97117fef 100644 --- a/admin_pages/messages/assets/ee_message_editor.js +++ b/admin_pages/messages/assets/ee_message_editor.js @@ -53,7 +53,7 @@ jQuery(document).ready(function($) { switchLabel = status === 'on' ? $('.js-data .ee-active-message').html() : $('.js-data .ee-inactive-message').html(); - $( '.context-active-control-container .spinner' ).addClass( 'is-active' ); + $( '.activate_context_on_off_toggle_container .spinner' ).addClass( 'is-active' ); $.ajax({ type: "POST", @@ -65,7 +65,7 @@ jQuery(document).ready(function($) { where: '#ajax-notices-container', what: 'clear' }; - $( '.context-active-control-container .spinner' ).removeClass( 'is-active' ); + $( '.activate_context_on_off_toggle_container .spinner' ).removeClass( 'is-active' ); if (ct.indexOf('html') > -1) { event.preventDefault(); MessageEditorHelper.display_content(response, setup.where, setup.what); @@ -84,7 +84,7 @@ jQuery(document).ready(function($) { }, error: function() { - $( '.context-active-control-container .spinner' ).removeClass( 'is-active' ); + $( '.activate_context_on_off_toggle_container .spinner' ).removeClass( 'is-active' ); event.preventDefault(); MessageEditorHelper.handle_ajax_errors(eei18n.server_error, setup.where); } @@ -146,7 +146,7 @@ jQuery(document).ready(function($) { /** * Context Template Activation/Deactivation */ - $('.activate_context_on_off_toggle_container').on('click', '.ee-on-off-toggle', function(e){ + $('.activate_context_on_off_toggle_container').on('click', '.ee-switch__input', function(e){ var context = $(this).attr('id').replace('ee-on-off-toggle-', ''), status = $(this).prop('checked') ? 'on' : 'off', message_template_group_id = $(this).data('grpid'); diff --git a/admin_pages/messages/templates/ee_msg_editor_active_context_element.template.php b/admin_pages/messages/templates/ee_msg_editor_active_context_element.template.php index 66c862a1041..38b8197ebc4 100644 --- a/admin_pages/messages/templates/ee_msg_editor_active_context_element.template.php +++ b/admin_pages/messages/templates/ee_msg_editor_active_context_element.template.php @@ -36,33 +36,31 @@ $context = esc_attr($context); ?> -
-
- - -
- - - data-grpid="" - id="ee-on-off-toggle-" - type="checkbox" - value="" - /> - -
- - - - - - -
+
+ + +
+ + + data-grpid="" + id="ee-on-off-toggle-" + type="checkbox" + value="" + /> + +
+ + + + + +
-
+
diff --git a/admin_pages/messages/templates/ee_msg_editor_context_switcher.template.php b/admin_pages/messages/templates/ee_msg_editor_context_switcher.template.php new file mode 100644 index 00000000000..565ea04f7bb --- /dev/null +++ b/admin_pages/messages/templates/ee_msg_editor_context_switcher.template.php @@ -0,0 +1,56 @@ + + +
+ $value) { + if ($name === 'context' || empty($value) || $name === 'extra') { + continue; + } + ?> + + + + + + + +
diff --git a/core/admin/assets/admin-menu-styles.css b/core/admin/assets/admin-menu-styles.css index aa7a6af1415..e017b766640 100644 --- a/core/admin/assets/admin-menu-styles.css +++ b/core/admin/assets/admin-menu-styles.css @@ -896,7 +896,7 @@ div.TB-ee-frame a { .ee-switch { align-items: center; display: flex; - height: var(--ee-switch-height); + min-height: var(--ee-switch-height); justify-content: flex-start; width: 100%; } @@ -973,6 +973,7 @@ input.ee-toggle-round-flat:checked + label:after { } .ee-switch .ee-switch__label > span { + display: inline-block; font-weight: 600; position: absolute; inset-inline-start: 1rem;