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
4 files changed, +36 -16Showing whitespace changes
public/index.html+14 -7
@@ -5616,19 +5616,26 @@
5616 </div>5616 </div>
5617 </div>5617 </div>
5618 </div>5618 </div>
5619 <hr>5619 <div id="spoiler_free_desc" class="inline-drawer flex-container flexFlowColumn flexNoGap">
5620 <div id="spoiler_free_desc" class="flex-container flexFlowColumn flex1 flexNoGap">5620 <div class="inline-drawer-toggle inline-drawer-header padding0 gap5px standoutHeader">
5621 <div id="creators_notes_div" class="title_restorable flexGap5">5621 <div id="creators_notes_div" class="title_restorable flexGap5 wide100p ">
5622 <span class="flex1" data-i18n="Creator's Notes">Creator's Notes</span>5622 <span class="flex1" data-i18n="Creator's Notes">Creator's Notes</span>
5623 <small id="creators_note_desc_hidden" data-i18n="Character details are hidden.">Character details are hidden.</small>
5624 <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>5623 <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>
5625 <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>5624 <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>
5626 </div>5625 </div>
5627 <div id="creator_notes_spoiler" class="flex1"></div>5626 <div class="flex-container widthFitContent">
5628 <!-- A button to show / hide description_div and description_textarea and first_message_div and firstmessage_textarea-->5627 <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down interactable"></div>
5628 </div>
5629 </div>
5630 <div class="inline-drawer-content">
5631 <div id="creator_notes_spoiler"></div>
5632 <div id="creator_notes_empty" data-i18n="No Creator's Notes provided.">
5633 No Creator's Notes provided.
5629 </div>5634 </div>
5635 </div>
5636 </div>
5637 <small id="creators_note_desc_hidden" data-i18n="Character details are hidden.">Character details are hidden.</small>
5630 <div id="descriptionWrapper" class="flex-container flexFlowColumn flex1">5638 <div id="descriptionWrapper" class="flex-container flexFlowColumn flex1">
5631 <hr>
5632 <div id="description_div" class="title_restorable">5639 <div id="description_div" class="title_restorable">
5633 <div class="flex-container alignitemscenter">5640 <div class="flex-container alignitemscenter">
5634 <span data-i18n="Character Description" class="mdhotkey_location">Description</span>5641 <span data-i18n="Character Description" class="mdhotkey_location">Description</span>
public/scripts/chats.js+2 -1
@@ -2021,7 +2021,8 @@ export function initChatUtilities() {
2021 reloadCurrentChat();2021 reloadCurrentChat();
2022 });2022 });
20232023
2024 $('#creators_note_styles_button').on('click', function () {2024 $('#creators_note_styles_button').on('click', function (e) {
2025 e.stopPropagation();
2025 openGlobalStylesPreferenceDialog();2026 openGlobalStylesPreferenceDialog();
2026 });2027 });
20272028
public/scripts/power-user.js+5 -5
@@ -965,24 +965,23 @@ function switchSpoilerMode() {
965 $('#descriptionWrapper').hide();965 $('#descriptionWrapper').hide();
966 $('#firstMessageWrapper').hide();966 $('#firstMessageWrapper').hide();
967 $('#spoiler_free_desc').addClass('flex1');967 $('#spoiler_free_desc').addClass('flex1');
968 $('#creator_notes_spoiler').show();968 $('#creators_note_desc_hidden').show();
969 }969 }
970 else {970 else {
971 $('#descriptionWrapper').show();971 $('#descriptionWrapper').show();
972 $('#firstMessageWrapper').show();972 $('#firstMessageWrapper').show();
973 $('#spoiler_free_desc').removeClass('flex1');973 $('#spoiler_free_desc').removeClass('flex1');
974 $('#creator_notes_spoiler').hide();974 $('#creators_note_desc_hidden').hide();
975 }975 }
976}976}
977977
978function peekSpoilerMode() {978function peekSpoilerMode() {
979 $('#descriptionWrapper').toggle();979 $('#descriptionWrapper').toggle();
980 $('#firstMessageWrapper').toggle();980 $('#firstMessageWrapper').toggle();
981 $('#creator_notes_spoiler').toggle();
982 $('#spoiler_free_desc').toggleClass('flex1');981 $('#spoiler_free_desc').toggleClass('flex1');
982 $('#creators_note_desc_hidden').toggle();
983}983}
984984
985
986function switchMovingUI() {985function switchMovingUI() {
987 $('.drawer-content.maximized').each(function () {986 $('.drawer-content.maximized').each(function () {
988 $(this).find('.inline-drawer-maximize').trigger('click');987 $(this).find('.inline-drawer-maximize').trigger('click');
@@ -3825,7 +3824,8 @@ jQuery(() => {
3825 saveSettingsDebounced();3824 saveSettingsDebounced();
3826 });3825 });
38273826
3828 $('#spoiler_free_desc_button').on('click', function () {3827 $('#spoiler_free_desc_button').on('click', function (e) {
3828 e.stopPropagation();
3829 peekSpoilerMode();3829 peekSpoilerMode();
3830 $(this).toggleClass('fa-eye fa-eye-slash');3830 $(this).toggleClass('fa-eye fa-eye-slash');
3831 });3831 });
public/style.css+15 -3
@@ -2536,7 +2536,11 @@ textarea::placeholder {
2536#creator_notes_spoiler {2536#creator_notes_spoiler {
2537 border: 0;2537 border: 0;
2538 font-size: calc(var(--mainFontSize)*.8);2538 font-size: calc(var(--mainFontSize)*.8);
2539 padding-top: 5px;2539 padding: 5px 0;
2540}
2541
2542#creator_notes_spoiler p:last-child {
2543 margin-bottom: 0;
2540}2544}
25412545
2542@media screen and (max-width: 1000px) {2546@media screen and (max-width: 1000px) {
@@ -3581,12 +3585,20 @@ grammarly-extension {
3581 align-items: baseline;3585 align-items: baseline;
3582}3586}
35833587
3588#creator_notes_spoiler:empty,
3589#creator_notes_empty,
3584#creators_note_desc_hidden {3590#creators_note_desc_hidden {
3585 display: none;3591 display: none;
3586}3592}
35873593
3588#creators_notes_div:has(#spoiler_free_desc_button.fa-eye-slash) #creators_note_desc_hidden {3594#creator_notes_spoiler:empty~#creator_notes_empty {
3589 display: initial;3595 display: flex;
3596 justify-content: center;
3597 align-items: center;
3598 width: 100%;
3599 height: 100%;
3600 font-size: calc(var(--mainFontSize) * 0.9);
3601 color: var(--SmartThemeEmColor);
3590}3602}
35913603
3592.alternate_greeting details {3604.alternate_greeting details {