WI Entry restyle; fix colorpicker loc for mobile

This commit is contained in:
RossAscends
2023-07-05 20:55:39 +09:00
parent 9a8e036ff9
commit 26b55d47b4
3 changed files with 171 additions and 157 deletions

View File

@@ -2002,17 +2002,17 @@
</div> </div>
</div> </div>
<div class="flex1 range-block flex-container flexFlowColumn"> <div class="alignitemsflexstart flex1 range-block flex-container flexFlowColumn">
<label title="Entries can activate other entries by mentioning their keywords" class="checkbox_label"> <label title="Entries can activate other entries by mentioning their keywords" class="checkbox_label">
<input id="world_info_recursive" type="checkbox" /> <input id="world_info_recursive" type="checkbox" />
<small> <small>
Recursive scanning Recursive Scan
</small> </small>
</label> </label>
<label title="Lookup for the entry keys in the context will respect the case" class="checkbox_label"> <label title="Lookup for the entry keys in the context will respect the case" class="checkbox_label">
<input id="world_info_case_sensitive" type="checkbox" /> <input id="world_info_case_sensitive" type="checkbox" />
<small> <small>
Case-sensitive keys Case-sensitive
</small> </small>
</label> </label>
<label title="If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label"> <label title="If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label">
@@ -2074,6 +2074,103 @@
<div id="version_display"></div> <div id="version_display"></div>
</div> </div>
<div class="flex-container spaceEvenly"> <div class="flex-container spaceEvenly">
<div id="UI-Theme-Block" class="flex-container flexFlowColumn drawer33pWidth">
<div id="color-picker-block" class="flex-container flexFlowColumn">
<h4><span data-i18n="UI Colors">UI Colors</span></h4>
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<span data-i18n="Main Text">Main Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
<span data-i18n="Italics Text">Italics Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
<span data-i18n="Quote Text">Quote Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
<span data-i18n="Shadow Color">Text Shadow</span>
</div>
<!-- <div class="flex-container">
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
<span data-i18n="FastUI BG">FastUI BG</span>
</div> -->
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="Blur Tint">UI Background</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="user-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="User Message Blur Tint">User Message</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="bot-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="AI Message Blur Tint">AI Message</span>
</div>
<div id="font-blur-UIpresets-block" class="flex-container flexFlowColumn">
<div id="font-scale-block" class="range-block">
<div class="range-block-title" data-i18n="Font Scale">
Font Scale
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="font_scale" id="font_scale_counter">
select
</div>
</div>
</div>
</div>
<div id="blur-strength-block" class="range-block">
<div class="range-block-title" data-i18n="Blur Strength">
Blur Strength
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="blur_strength" id="blur_strength_counter">
select
</div>
</div>
</div>
</div>
<div id="shadow-width-block" class="range-block">
<div class="range-block-title" data-i18n="Text Shadow Width">
Text Shadow Width
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="shadow_width" id="shadow_width_counter">
select
</div>
</div>
</div>
</div>
</div>
<div id="UI-presets-block" class="flex-container flexFlowColumn">
<h4>
<span data-i18n="UI Theme Preset">UI Theme Preset</span>
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<select id="themes" class="margin0 margin-r5">
</select>
<div id="ui-preset-save-button" title="Save changes to a new theme file" class="menu_button padding5 margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
</div>
</div>
</div>
<div name="UI Customization" class="flex-container drawer33pWidth"> <div name="UI Customization" class="flex-container drawer33pWidth">
<div class="ui-settings"> <div class="ui-settings">
<h4><span data-i18n="UI Customization">UI Customization</span></h4> <h4><span data-i18n="UI Customization">UI Customization</span></h4>
@@ -2183,103 +2280,7 @@
</div> </div>
</div> </div>
<div id="UI-Theme-Block" class="flex-container flexFlowColumn drawer33pWidth">
<div id="color-picker-block" class="flex-container flexFlowColumn">
<h4><span data-i18n="UI Colors">UI Colors</span></h4>
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<span data-i18n="Main Text">Main Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
<span data-i18n="Italics Text">Italics Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
<span data-i18n="Quote Text">Quote Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
<span data-i18n="Shadow Color">Text Shadow</span>
</div>
<!-- <div class="flex-container">
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
<span data-i18n="FastUI BG">FastUI BG</span>
</div> -->
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="Blur Tint">UI Background</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="user-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="User Message Blur Tint">User Message</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="bot-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="AI Message Blur Tint">AI Message</span>
</div>
<div id="font-blur-UIpresets-block" class="flex-container flexFlowColumn">
<div id="font-scale-block" class="range-block">
<div class="range-block-title" data-i18n="Font Scale">
Font Scale
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="font_scale" id="font_scale_counter">
select
</div>
</div>
</div>
</div>
<div id="blur-strength-block" class="range-block">
<div class="range-block-title" data-i18n="Blur Strength">
Blur Strength
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="blur_strength" id="blur_strength_counter">
select
</div>
</div>
</div>
</div>
<div id="shadow-width-block" class="range-block">
<div class="range-block-title" data-i18n="Text Shadow Width">
Text Shadow Width
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="shadow_width" id="shadow_width_counter">
select
</div>
</div>
</div>
</div>
</div>
<div id="UI-presets-block" class="flex-container flexFlowColumn">
<h4>
<span data-i18n="UI Theme Preset">UI Theme Preset</span>
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<select id="themes" class="margin0 margin-r5">
</select>
<div id="ui-preset-save-button" title="Save changes to a new theme file" class="menu_button padding5 margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
</div>
</div>
</div>
<div id="power-user-options-block" class="flex-container drawer33pWidth"> <div id="power-user-options-block" class="flex-container drawer33pWidth">
<div id="power-user-option-checkboxes"> <div id="power-user-option-checkboxes">
<h4 data-i18n="Power User Options">Power User Options</h4> <h4 data-i18n="Power User Options">Power User Options</h4>
@@ -3094,14 +3095,18 @@
<span data-i18n="Keywords"> <span data-i18n="Keywords">
Keywords Keywords
</span> </span>
<span>(UID:&nbsp;
<span class="world_entry_form_uid_value"></span>
)
</span>
</small> </small>
<small class="displayNone"> <small class="displayNone">
<span data-i18n="Separate with commas"> <span data-i18n="Comma separated (required)">
Separate with commas Comma separated (required)
</span> </span>
</small> </small>
</label> </label>
<textarea class="text_pole keyprimarytextpole" name="key" rows="1" placeholder="Separate with commas" maxlength="1000"></textarea> <textarea class="text_pole keyprimarytextpole" name="key" rows="1" placeholder="Comma separated (required)" maxlength="1000"></textarea>
</div> </div>
<div class="world_entry_form_control keysecondary"> <div class="world_entry_form_control keysecondary">
<label for="keysecondary"> <label for="keysecondary">
@@ -3111,12 +3116,12 @@
</span> </span>
</small> </small>
<small class="displayNone"> <small class="displayNone">
<span data-i18n="Separate with commas"> <span data-i18n="Comma seperated (ignored if empty)">
Separate with commas Comma seperated (ignored if empty)
</span> </span>
</small> </small>
</label> </label>
<textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" placeholder="Separate with commas" maxlength="1000"></textarea> <textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" placeholder="Comma separated (ignored if empty)" maxlength="1000"></textarea>
</div> </div>
</div> </div>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div> <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
@@ -3129,6 +3134,10 @@
<small> <small>
<span data-i18n="Content"> <span data-i18n="Content">
Content Content
<span>(Tokens:&nbsp;
<span class="world_entry_form_token_counter">0</span>
)
</span>
</span> </span>
</small> </small>
<small class="displayNone"> <small class="displayNone">
@@ -3164,6 +3173,10 @@
<input type="checkbox" name="constant" /> <input type="checkbox" name="constant" />
<span data-i18n="Constant">Constant</span> <span data-i18n="Constant">Constant</span>
</label> </label>
<label class="checkbox flex-container alignitemscenter">
<input type="checkbox" name="disable" />
<span data-i18n="Disable">Disable</span>
</label>
<label class="checkbox flex-container"> <label class="checkbox flex-container">
<input type="checkbox" name="selective" /> <input type="checkbox" name="selective" />
<span data-i18n="Selective">Selective</span> <span data-i18n="Selective">Selective</span>
@@ -3178,62 +3191,53 @@
</label> </label>
</div> </div>
<div class="world_entry_form_control world_entry_form_radios wi-enter-footer-text ">
<small>Placement</small> <!-- <div name="injectioStratBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text ">
<div> <label for="injectionStrat">Injection:</label>
<label><input type="radio" name="position" value="0"> <small>
<span data-i18n="Before Char">Before Char</span> <select name="injectionStrat">
</label> <option value="0">Normal</option>
</div> <option value="1">Constant</option>
<div> <option value="2">Disabled</option>
<label><input type="radio" name="position" value="1"> </select>
<span data-i18n="After Char">After Char</span> </small>
</label> </div> -->
</div>
<div> <div name="PositionBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text ">
<label><input type="radio" name="position" value="2"> <label for="position">Position:</label>
<span data-i18n="Author's Note">Author's Note Top</span> <small>
</label> <select name="position">
</div> <option value="0">Before Char Defs</option>
<div> <option value="1">After Char Defs</option>
<label><input type="radio" name="position" value="3"> <option value="2">Before AN</option>
<span data-i18n="Author's Note">Author's Note Bottom</span> <option value="3">After AN</option>
</label> </select>
</div> </small>
</div> </div>
<div class="container flexFlowColumn flexNoGap"> <div class="flex-container flexnowrap">
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap "> <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap ">
Insertion Order <label for="order">Order</label>
<input class="text_pole wideMax100px" type="number" name="order" placeholder="" /> <input class="text_pole wideMax100px" type="number" name="order" placeholder="" />
</div> </div>
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap probabilityContainer"> <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap probabilityContainer">
Probability (%) <label for="probability"></label>Probability</label>
<input class="text_pole wideMax100px" type="number" name="probability" placeholder="" min="0" max="100" /> <input class="text_pole wideMax100px" type="number" name="probability" placeholder="" min="0" max="100" />
</div> </div>
</div> </div>
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text "> <div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text ">
<div class="world_entry_form_uid">
UID:
&nbsp;
<span class="world_entry_form_uid_value"></span>
</div>
<div class="world_entry_form_tokens">
Tokens:
&nbsp;
<span class="world_entry_form_token_counter">0</span>
</div>
</div> </div>
<div class="wi-enter-footer-text"> <div class="wi-enter-footer-text">
<label class="checkbox flex-container alignitemscenter">
<input type="checkbox" name="disable" />
<span data-i18n="Disable">Disable</span>
</label>
<label class="checkbox flex-container alignitemscenter"> <label class="checkbox flex-container alignitemscenter">
<input type="checkbox" name="exclude_recursion" /> <input type="checkbox" name="exclude_recursion" />
<span data-i18n="Exclude from recursion">Exclude from recursion</span> <span data-i18n="Exclude from recursion">
Non-recursable
</span>
</label> </label>
</div> </div>
<input class="menu_button delete_entry_button" type="submit" value="Delete Entry" /> <input class="menu_button delete_entry_button" type="submit" value="Delete Entry" />
@@ -3556,4 +3560,4 @@
</script> </script>
</body> </body>
</html> </html>

View File

@@ -408,7 +408,8 @@ function appendWorldEntry(name, data, entry) {
}); });
commentInput.val(entry.comment).trigger("input"); commentInput.val(entry.comment).trigger("input");
commentToggle.prop("checked", entry.addMemo).trigger("input"); commentToggle.prop("checked", true /* entry.addMemo */).trigger("input");
commentToggle.parent().hide()
// content // content
const countTokensDebounced = debounce(function (that, value) { const countTokensDebounced = debounce(function (that, value) {
@@ -464,7 +465,8 @@ function appendWorldEntry(name, data, entry) {
value ? keysecondary.show() : keysecondary.hide(); value ? keysecondary.show() : keysecondary.hide();
}); });
selectiveInput.prop("checked", entry.selective).trigger("input"); selectiveInput.prop("checked", true /* entry.selective */).trigger("input");
selectiveInput.parent().hide();
// constant // constant
@@ -537,7 +539,7 @@ function appendWorldEntry(name, data, entry) {
value ? probabilityContainer.show() : probabilityContainer.hide(); value ? probabilityContainer.show() : probabilityContainer.hide();
if (value && data.entries[uid].probability === null) { if (value && data.entries[uid].probability === null) {
data.entries[uid].probability = 50; data.entries[uid].probability = 100;
} }
if (!value) { if (!value) {
@@ -546,14 +548,15 @@ function appendWorldEntry(name, data, entry) {
probabilityInput.val(data.entries[uid].probability).trigger("input"); probabilityInput.val(data.entries[uid].probability).trigger("input");
}); });
probabilityToggle.prop("checked", entry.useProbability).trigger("input"); probabilityToggle.prop("checked", true /* entry.useProbability */).trigger("input");
probabilityToggle.parent().hide();
// position // position
if (entry.position === undefined) { if (entry.position === undefined) {
entry.position = 0; entry.position = 0;
} }
const positionInput = template.find('input[name="position"]'); const positionInput = template.find('select[name="position"]');
positionInput.data("uid", entry.uid); positionInput.data("uid", entry.uid);
positionInput.on("input", function () { positionInput.on("input", function () {
const uid = $(this).data("uid"); const uid = $(this).data("uid");
@@ -565,9 +568,10 @@ function appendWorldEntry(name, data, entry) {
setOriginalDataValue(data, uid, "extensions.position", data.entries[uid].position); setOriginalDataValue(data, uid, "extensions.position", data.entries[uid].position);
saveWorldInfo(name, data); saveWorldInfo(name, data);
}); });
template template
.find(`input[name="position"][value=${entry.position}]`) .find(`select[name="position"] option[value=${entry.position}]`)
.prop("checked", true) .prop("selected", true)
.trigger("input"); .trigger("input");
// display uid // display uid

View File

@@ -2149,7 +2149,7 @@ grammarly-extension {
} }
.delete_entry_button { .delete_entry_button {
align-self: center; height: min-content;
} }
.world_entry_form_control.world_entry_form_horizontal { .world_entry_form_control.world_entry_form_horizontal {
@@ -4659,9 +4659,15 @@ body.waifuMode .zoomed_avatar {
align-items: start; align-items: start;
align-content: start; align-content: start;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden
} }
.mes_buttons {
font-size: calc(var(--mainFontSize)*1.2)
}
;
.drag-grabber, .drag-grabber,
.pull-tab { .pull-tab {
display: none !important; display: none !important;
@@ -5052,4 +5058,4 @@ body.waifuMode .zoomed_avatar {
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeBlurTintColor);
text-align: center; text-align: center;
line-height: 14px; line-height: 14px;
} }