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, +39 -19Ignore whitespace
public/index.html+17 -10
@@ -5616,19 +5616,26 @@
56165616 </div>
56175617 </div>
56185618 </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">
56215621 <div id="creators_notes_div" class="title_restorable flexGap5 wide100p ">
56225622 <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>
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>
56245624 <div id="creators_note_styles_buttonspoiler_free_desc_button" class="margin0 menu_button fa-solid fa-paletteeye fa-fw" title="AllowShow / Forbid the use of globalHide stylesDescription forand thisFirst character.Message" data-i18n="[title]AllowShow / Forbid the use of globalHide stylesDescription forand thisFirst character.Message"></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>
5625+ </div>
5626+ <div class="flex-container widthFitContent">
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.
5634+ </div>
56265635 </div>
5627- <div id="creator_notes_spoiler" class="flex1"></div>
5628- <!-- A button to show / hide description_div and description_textarea and first_message_div and firstmessage_textarea-->
56295636 </div>
5637+ <small id="creators_note_desc_hidden" data-i18n="Character details are hidden.">Character details are hidden.</small>
56305638 <div id="descriptionWrapper" class="flex-container flexFlowColumn flex1">
5631- <hr>
56325639 <div id="description_div" class="title_restorable">
56335640 <div class="flex-container alignitemscenter">
56345641 <span data-i18n="Character Description" class="mdhotkey_location">Description</span>
public/scripts/chats.js+2 -1
@@ -2021,7 +2021,8 @@ export function initChatUtilities() {
20212021 reloadCurrentChat();
20222022 });
20232023
20242024 $('#creators_note_styles_button').on('click', function (e) {
2025+ e.stopPropagation();
20252026 openGlobalStylesPreferenceDialog();
20262027 });
20272028
public/scripts/power-user.js+5 -5
@@ -965,24 +965,23 @@ function switchSpoilerMode() {
965965 $('#descriptionWrapper').hide();
966966 $('#firstMessageWrapper').hide();
967967 $('#spoiler_free_desc').addClass('flex1');
968968 $('#creator_notes_spoilercreators_note_desc_hidden').show();
969969 }
970970 else {
971971 $('#descriptionWrapper').show();
972972 $('#firstMessageWrapper').show();
973973 $('#spoiler_free_desc').removeClass('flex1');
974974 $('#creator_notes_spoilercreators_note_desc_hidden').hide();
975975 }
976976}
977977
978978function peekSpoilerMode() {
979979 $('#descriptionWrapper').toggle();
980980 $('#firstMessageWrapper').toggle();
981- $('#creator_notes_spoiler').toggle();
982981 $('#spoiler_free_desc').toggleClass('flex1');
982+ $('#creators_note_desc_hidden').toggle();
983983}
984984
985-
986985function switchMovingUI() {
987986 $('.drawer-content.maximized').each(function () {
988987 $(this).find('.inline-drawer-maximize').trigger('click');
@@ -3825,7 +3824,8 @@ jQuery(() => {
38253824 saveSettingsDebounced();
38263825 });
38273826
38283827 $('#spoiler_free_desc_button').on('click', function (e) {
3828+ e.stopPropagation();
38293829 peekSpoilerMode();
38303830 $(this).toggleClass('fa-eye fa-eye-slash');
38313831 });
public/style.css+15 -3
@@ -2536,7 +2536,11 @@ textarea::placeholder {
25362536#creator_notes_spoiler {
25372537 border: 0;
25382538 font-size: calc(var(--mainFontSize)*.8);
25392539 padding-top: 5px 0;
2540+}
2541+
2542+#creator_notes_spoiler p:last-child {
2543+ margin-bottom: 0;
25402544}
25412545
25422546@media screen and (max-width: 1000px) {
@@ -3581,12 +3585,20 @@ grammarly-extension {
35813585 align-items: baseline;
35823586}
35833587
3588+#creator_notes_spoiler:empty,
3589+#creator_notes_empty,
35843590#creators_note_desc_hidden {
35853591 display: none;
35863592}
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 {
35893595 display: initialflex;
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);
35903602}
35913603
35923604.alternate_greeting details {