Alt greetings restyle (#2902) * Slight QoL restyle of alternate greetings * Update to new popup * Add visible labels to buttons

75308bfe7ff1e496685e689cb5d8985fafa143d7

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed
Parents: 38660df93f2b8f498bb5e498db1cfc89e464c043
3 files changed, +62 -12Showing whitespace changes
public/index.html+13 -3
@@ -6090,7 +6090,10 @@
60906090 <div class="alternate_grettings flexFlowColumn flex-container">
60916091 <div class="title_restorable">
60926092 <h3><span data-i18n="Alternate Greetings" class="mdhotkey_location">Alternate Greetings</span></h3>
6093- <div title="Add" class="menu_button fa-solid fa-plus add_alternate_greeting" data-i18n="[title]Add"></div>
6093+ <div class="menu_button menu_button_icon add_alternate_greeting">
6094+ <i class="fa-solid fa-plus"></i>
6095+ <span data-i18n="Add">Add</span>
6096+ </div>
60946097 </div>
60956098 <small class="justifyLeft" data-i18n="Alternate_Greetings_desc">
60966099 These will be displayed as swipes on the first message when starting a new chat.
@@ -6106,11 +6109,18 @@
61066109 </div>
61076110 <div id="alternate_greeting_form_template" class="template_element">
61086111 <div class="alternate_greeting">
6112+ <details open>
6113+ <summary>
61096114 <div class="title_restorable">
61106115 <strong><span data-i18n="Alternate Greeting #">Alternate Greeting #</span><span class="greeting_index"></span></strong>
61116116 <div class="menu_button fa-solid fa-trash-altmenu_button_icon delete_alternate_greeting"></div>
6117+ <i class="fa-solid fa-trash-alt"></i>
6118+ <span data-i18n="Delete">Delete</span>
61126119 </div>
6113- <textarea name="alternate_greetings" data-i18n="[placeholder](This will be the first message from the character that starts every chat)" placeholder="(This will be the first message from the character that starts every chat)" class="text_pole textarea_compact alternate_greeting_text mdHotkeys" value="" autocomplete="off" rows="16"></textarea>
6120+ </div>
6121+ </summary>
6122+ <textarea name="alternate_greetings" data-i18n="[placeholder](This will be the first message from the character that starts every chat)" placeholder="(This will be the first message from the character that starts every chat)" class="text_pole textarea_compact alternate_greeting_text mdHotkeys" value="" autocomplete="off" rows="12"></textarea>
6123+ </details>
61146124 </div>
61156125 </div>
61166126
public/script.js+29 -9
@@ -7390,7 +7390,7 @@ function onScenarioOverrideRemoveClick() {
73907390 */
73917391export function callPopup(text, type, inputValue = '', { okButton, rows, wide, wider, large, allowHorizontalScrolling, allowVerticalScrolling, cropAspect } = {}) {
73927392 function getOkButtonText() {
73937393 if (['text', 'alternate_greeting', 'char_not_selected'].includes(popup_type)) {
73947394 $dialoguePopupCancel.css('display', 'none');
73957395 return okButton ?? 'Ok';
73967396 } else if (['delete_extension'].includes(popup_type)) {
@@ -7827,24 +7827,42 @@ function openAlternateGreetings() {
78277827
78287828 const template = $('#alternate_greetings_template .alternate_grettings').clone();
78297829 const getArray = () => menu_type == 'create' ? create_save.alternate_greetings : characters[chid].data.alternate_greetings;
7830+ const popup = new Popup(template, POPUP_TYPE.TEXT, '', {
7831+ wide: true,
7832+ large: true,
7833+ allowVerticalScrolling: true,
7834+ onClose: async () => {
7835+ if (menu_type !== 'create') {
7836+ await createOrEditCharacter();
7837+ }
7838+ }
7839+ });
78307840
78317841 for (let index = 0; index < getArray().length; index++) {
78327842 addAlternateGreeting(template, getArray()[index], index, getArray, popup);
78337843 }
78347844
78357845 template.find('.add_alternate_greeting').on('click', function () {
78367846 const array = getArray();
78377847 const index = array.length;
78387848 array.push('');
78397849 addAlternateGreeting(template, '', index, getArray, popup);
78407850 updateAlternateGreetingsHintVisibility(template);
78417851 });
78427852
78437853 updateAlternateGreetingsHintVisibility(template);
7844- callPopup(template, 'alternate_greeting', '', { wide: true, large: true });
7854+ popup.show();
78457855}
78467856
7847-function addAlternateGreeting(template, greeting, index, getArray) {
7857+/**
7858+ * Adds an alternate greeting to the template.
7859+ * @param {JQuery<HTMLElement>} template
7860+ * @param {string} greeting
7861+ * @param {number} index
7862+ * @param {() => any[]} getArray
7863+ * @param {Popup} popup
7864+ */
7865+function addAlternateGreeting(template, greeting, index, getArray, popup) {
78487866 const greetingBlock = $('#alternate_greeting_form_template .alternate_greeting').clone();
78497867 greetingBlock.find('.alternate_greeting_text').on('input', async function () {
78507868 const value = $(this).val();
@@ -7852,11 +7870,16 @@ function addAlternateGreeting(template, greeting, index, getArray) {
78527870 array[index] = value;
78537871 }).val(greeting);
78547872 greetingBlock.find('.greeting_index').text(index + 1);
78557873 greetingBlock.find('.delete_alternate_greeting').on('click', async function (event) {
7874+ event.preventDefault();
7875+ event.stopPropagation();
7876+
78567877 if (confirm('Are you sure you want to delete this alternate greeting?')) {
78577878 const array = getArray();
78587879 array.splice(index, 1);
7880+
78597881 // We need to reopen the popup to update the index numbers
7882+ await popup.complete(POPUP_RESULT.AFFIRMATIVE);
78607883 openAlternateGreetings();
78617884 }
78627885 });
@@ -9574,9 +9597,6 @@ jQuery(async function () {
95749597 }, 2000);
95759598 }
95769599 }
9577- if (popup_type == 'alternate_greeting' && menu_type !== 'create') {
9578- createOrEditCharacter();
9579- }
95809600
95819601 if (dialogueResolve) {
95829602 if (popup_type == 'input') {
public/style.css+20 -0
@@ -3154,6 +3154,26 @@ grammarly-extension {
31543154 align-items: center;
31553155}
31563156
3157+.alternate_greeting details {
3158+ padding: 2px;
3159+}
3160+
3161+.alternate_greeting summary {
3162+ list-style-position: outside;
3163+ margin-left: 1em;
3164+ padding-left: 1em;
3165+}
3166+
3167+.alternate_greeting textarea {
3168+ field-sizing: content;
3169+ max-height: 50dvh;
3170+}
3171+
3172+.alternate_greeting summary::marker,
3173+.alternate_greeting summary strong {
3174+ cursor: pointer;
3175+}
3176+
31573177#rm_characters_block .form_create_bottom_buttons_block {
31583178 justify-content: space-evenly !important;
31593179 flex-grow: 0;