Redesign Creator's Note block (#4298) * Restyle creator's notes block * Creator Notes to standoutHeader styling, allows for viewing Note without hiding chardefs * Fix closing tag * Remove stray close tag * Adjust spoiler-free mode toggle * Make the whole toggle area clickable * Remove redundant comment * Add empty state for creator's notes * Adjust paddings * Update public/index.html Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --------- Co-authored-by: RossAscends <124905043+RossAscends@users.noreply.github.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

afa32617467b374e942b01c327298071f7c01919

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

Signed

Parents: 9698c787258c4cbda192f083f5e326776f914004

public/index.html+14 -7 Viewed

                                     </div>
                                 </div>
                             </div>
 -                            <hr>
 +                            <div id="spoiler_free_desc" class="inline-drawer flex-container flexFlowColumn flexNoGap">
 -                            <div id="spoiler_free_desc" class="flex-container flexFlowColumn flex1 flexNoGap">
 +                                <div class="inline-drawer-toggle inline-drawer-header padding0 gap5px standoutHeader">
                                                                     <div id="creators_notes_div" class="title_restorable flexGap5 wide100p ">
                                         <span class="flex1" data-i18n="Creator's Notes">Creator's Notes</span>
 -                                    <small id="creators_note_desc_hidden" data-i18n="Character details are hidden.">Character details are hidden.</small>
                                         <div id="creators_note_styles_button" class="margin0 menu_button fa-solid fa-palette fa-fw" title="Allow / Forbid the use of global styles for this character." data-i18n="[title]Allow / Forbid the use of global styles for this character."></div>
                                         <div id="spoiler_free_desc_button" class="margin0 menu_button fa-solid fa-eye fa-fw" title="Show / Hide Description and First Message" data-i18n="[title]Show / Hide Description and First Message"></div>
                                     </div>
 -                                <div id="creator_notes_spoiler" class="flex1"></div>
 +                                    <div class="flex-container widthFitContent">
 -                                <!-- A button to show / hide description_div and description_textarea and first_message_div and firstmessage_textarea-->
 +                                        <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down interactable"></div>
 +                                    </div>
 +                                </div>
 +                                <div class="inline-drawer-content">
 +                                    <div id="creator_notes_spoiler"></div>
 +                                    <div id="creator_notes_empty" data-i18n="No Creator's Notes provided.">
 +                                        No Creator's Notes provided.
                                     </div>
 +                                </div>
 +                            </div>
 +                            <small id="creators_note_desc_hidden" data-i18n="Character details are hidden.">Character details are hidden.</small>
                             <div id="descriptionWrapper" class="flex-container flexFlowColumn flex1">
 -                                <hr>
                                 <div id="description_div" class="title_restorable">
                                     <div class="flex-container alignitemscenter">
                                         <span data-i18n="Character Description" class="mdhotkey_location">Description</span>

public/scripts/chats.js+2 -1 Viewed

         reloadCurrentChat();
     });
     $('#creators_note_styles_button').on('click', function (e) {
 +        e.stopPropagation();
         openGlobalStylesPreferenceDialog();
     });

public/scripts/power-user.js+5 -5 Viewed

         $('#descriptionWrapper').hide();
         $('#firstMessageWrapper').hide();
         $('#spoiler_free_desc').addClass('flex1');
         $('#creator_notes_spoilercreators_note_desc_hidden').show();
+    }
     else {
         $('#descriptionWrapper').show();
         $('#firstMessageWrapper').show();
         $('#spoiler_free_desc').removeClass('flex1');
         $('#creator_notes_spoilercreators_note_desc_hidden').hide();
+    }
+}
 function peekSpoilerMode() {
     $('#descriptionWrapper').toggle();
     $('#firstMessageWrapper').toggle();
 -    $('#creator_notes_spoiler').toggle();
     $('#spoiler_free_desc').toggleClass('flex1');
 +    $('#creators_note_desc_hidden').toggle();
+}
+-
 function switchMovingUI() {
     $('.drawer-content.maximized').each(function () {
         $(this).find('.inline-drawer-maximize').trigger('click');

         saveSettingsDebounced();
     });
     $('#spoiler_free_desc_button').on('click', function (e) {
 +        e.stopPropagation();
         peekSpoilerMode();
         $(this).toggleClass('fa-eye fa-eye-slash');
     });

public/style.css+15 -3 Viewed

 #creator_notes_spoiler {
     border: 0;
     font-size: calc(var(--mainFontSize)*.8);
     padding-top: 5px 0;
 +}
++
 +#creator_notes_spoiler p:last-child {
 +    margin-bottom: 0;
+}
 @media screen and (max-width: 1000px) {

     align-items: baseline;
+}
 +#creator_notes_spoiler:empty,
 +#creator_notes_empty,
 #creators_note_desc_hidden {
     display: none;
+}
 -#creators_notes_div:has(#spoiler_free_desc_button.fa-eye-slash) #creators_note_desc_hidden {
 +#creator_notes_spoiler:empty~#creator_notes_empty {
     display: initialflex;
 +    justify-content: center;
 +    align-items: center;
 +    width: 100%;
 +    height: 100%;
 +    font-size: calc(var(--mainFontSize) * 0.9);
 +    color: var(--SmartThemeEmColor);
+}
 .alternate_greeting details {