From 1cb5f592967b60a347c6de719a6a2cc202b4e2a0 Mon Sep 17 00:00:00 2001 From: Mohammad Zubair Ali Date: Tue, 5 Mar 2024 15:28:15 +0530 Subject: [PATCH] update result page UI --- css/qsm-admin.css | 30 ++++++++---- js/qsm-admin.js | 54 ++++++++++++++++----- mlw_quizmaster2.php | 1 + php/admin/options-page-email-tab.php | 2 +- php/admin/options-page-results-page-tab.php | 2 +- 5 files changed, 65 insertions(+), 24 deletions(-) diff --git a/css/qsm-admin.css b/css/qsm-admin.css index d26466f60..f95280ae3 100644 --- a/css/qsm-admin.css +++ b/css/qsm-admin.css @@ -510,7 +510,7 @@ span.qsm-quiz-name { margin-bottom: 15px; border-radius: 2px; background: #fff; - padding: 15px; + padding: 25px 20px; position: relative; border: 1px solid #dfd4d4; } @@ -520,6 +520,7 @@ span.qsm-quiz-name { display: block; font-weight: 500; margin-bottom: 3px; + color: #959494; } .qsm-result-condition-mode, .qsm-email-condition-mode { @@ -3355,12 +3356,12 @@ input#preferred-date-format-custom { top: calc( 100% - 18px); } .mce-container .qsm-autocomplete .qsm-autocomplete-item-group { - font-weight: 600; + font-weight: 500; padding: 10px; - font-size: 14px; + font-size: 11px; text-transform: uppercase; - background: #2271b1; - color: #fff; + color: #a2a2a2; + border-top: 1px solid #dfd4d4; } .mce-container .qsm-autocomplete .qsm-autocomplete-item { padding: 10px 15px; @@ -3372,7 +3373,8 @@ input#preferred-date-format-custom { justify-content: space-between; column-gap: 20px; } -.mce-container .qsm-autocomplete .qsm-autocomplete-item:hover { +.mce-container .qsm-autocomplete .qsm-autocomplete-item:hover, +.mce-container .qsm-autocomplete .qsm-autocomplete-item-active { background-color: #f0f0f0; } .mce-container .qsm-autocomplete .qsm-autocomplete-item .qsm-autocomplete-item-description { @@ -3384,10 +3386,20 @@ input#preferred-date-format-custom { float: right; } .qsm-hightlight-text{ - color: #ffffff; + font-size: 11px; + margin-right: 2px; +} +.qsm-hightlight-text, +.mce-qsm-variables-editor-btn button{ background: #187FFA; - padding: 1px 3px 4px 5px; border-radius: 2px; - margin-right: 2px; + display: inline-block; + text-align: center; + border: none; +} +.qsm-hightlight-text, +.mce-qsm-variables-editor-btn button span.mce-txt{ + color: #ffffff; + padding: 0px 7px; } /*TinyMCE Text-editor : end */ \ No newline at end of file diff --git a/js/qsm-admin.js b/js/qsm-admin.js index 70880fff5..175d35787 100644 --- a/js/qsm-admin.js +++ b/js/qsm-admin.js @@ -1187,10 +1187,11 @@ function qsm_is_substring_in_array( text, array ) { //Add stylesheet editor.settings.extended_valid_elements = 'qsmvariabletag'; editor.settings.custom_elements = '~qsmvariabletag'; - editor.settings.content_style = 'qsmvariabletag { color: #ffffff; background: #187FFA; padding: 2px 5px; border-radius: 2px; }'; + editor.settings.content_style = 'qsmvariabletag { color: #ffffff; background: #187FFA; padding: 5px 8px; border-radius: 2px;font-family: Arial, Helvetica, sans-serif;font-size: 12px; font-weight: 600; }'; editor.addButton('qsm_slash_command', { - text: '/' +qsm_admin_messages.slash_command, + text: '/ ' +qsm_admin_messages.variables, tooltip: qsm_admin_messages.insert_variable, + classes: 'qsm-variables-editor-btn', onclick: function () { editor.insertContent('/'); showAutocomplete( editor, true ); @@ -1239,7 +1240,8 @@ function qsm_is_substring_in_array( text, array ) { if ( 0 < newCommand.length ) { let var_group = []; - newCommand.forEach( function( command ) { + newCommand.forEach(function (command, key) { + console.log(key); //Add Group Name if ( -1 == var_group.indexOf( command.group ) ) { var_group.push( command.group ); @@ -1250,6 +1252,9 @@ function qsm_is_substring_in_array( text, array ) { } //Add Item var item = document.createElement('div'); + if (0 == key) { + item.classList.add('qsm-autocomplete-item-active'); + } item.classList.add('qsm-autocomplete-item'); item.setAttribute('title', command.description); item.innerHTML = "/" + command.name + "" + command.description + ""; @@ -1337,8 +1342,34 @@ function qsm_is_substring_in_array( text, array ) { showAutocomplete(editor); } + } + if (40 === e.keyCode) { + let active_item = jQuery('.qsm-autocomplete-item-active'); + jQuery('.qsm-autocomplete-item').removeClass('qsm-autocomplete-item-active'); + if (active_item.length) { + active_item.next('.qsm-autocomplete-item').addClass('qsm-autocomplete-item-active'); + } else { + jQuery('.qsm-autocomplete-item:first').addClass('qsm-autocomplete-item-active'); + } + e.preventDefault(); + } - } + if (38 === e.keyCode) { + let active_item = jQuery('.qsm-autocomplete-item-active'); + jQuery('.qsm-autocomplete-item').removeClass('qsm-autocomplete-item-active'); + if (active_item.length) { + active_item.prev('.qsm-autocomplete-item').addClass('qsm-autocomplete-item-active'); + } else { + jQuery('.qsm-autocomplete-item:last').addClass('qsm-autocomplete-item-active'); + } + e.preventDefault(); + } + if ( 13 == e.keyCode ) { + if (jQuery('.qsm-autocomplete-item-active').length) { + jQuery('.qsm-autocomplete-item-active').click(); + e.preventDefault(); + } + } } }); @@ -1762,13 +1793,10 @@ var QSMContact; var settings = { mediaButtons: true, tinymce: { - plugins: ["qsmslashcommands"], + plugins: "qsmslashcommands link image lists charmap colorpicker textcolor hr fullscreen wordpress", forced_root_block: '', - toolbar1: 'formatselect,bold,italic,underline,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,wp_more,fullscreen,wp_adv, qsm_slash_command', - toolbar2: 'strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help,wp_code', - setup: function (editor) { - - } + toolbar1: 'formatselect,bold,italic,underline,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,qsm_slash_command,wp_adv', + toolbar2: 'strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help,wp_code,fullscreen', }, quicktags: true, }; @@ -3784,10 +3812,10 @@ var import_button; var settings = { mediaButtons: true, tinymce: { - plugins: ["qsmslashcommands"], + plugins: "qsmslashcommands link image lists charmap colorpicker textcolor hr fullscreen wordpress", forced_root_block: '', - toolbar1: 'formatselect,bold,italic,underline,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,wp_more,fullscreen,wp_adv, qsm_slash_command', - toolbar2: 'strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help,wp_code' + toolbar1: 'formatselect,bold,italic,underline,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,qsm_slash_command,wp_adv', + toolbar2: 'strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help,wp_code,fullscreen', }, quicktags: true, }; diff --git a/mlw_quizmaster2.php b/mlw_quizmaster2.php index 7ef9b6dca..23f66f76e 100644 --- a/mlw_quizmaster2.php +++ b/mlw_quizmaster2.php @@ -465,6 +465,7 @@ public function qsm_admin_scripts_style( $hook ) { 'qsm_variables_name' => $qsm_variables_name, 'no_variables' => __("No Variable Found", 'quiz-master-next'), 'slash_command' => __("slash command", 'quiz-master-next'), + 'variables' => __("Variables", 'quiz-master-next'), 'insert_variable' => __("Insert QSM variables", 'quiz-master-next'), ); $qsm_admin_messages = apply_filters( 'qsm_admin_messages_after', $qsm_admin_messages ); diff --git a/php/admin/options-page-email-tab.php b/php/admin/options-page-email-tab.php index cf1d3995e..945e90aef 100644 --- a/php/admin/options-page-email-tab.php +++ b/php/admin/options-page-email-tab.php @@ -237,7 +237,7 @@ function qsm_options_emails_tab_template() {