rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Big avatars style

Browse Source
This commit is contained in:
SillyLossy
2023-04-01 01:59:43 +03:00
parent 2a03e7879d
commit a82c9af78e
4 changed files with 104 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/index.html
View File

@ -194,9 +194,10 @@
<input id="your_name" name="your_name" class="text_pole" maxlength="35" value="" autocomplete="off"><br>
<input id="your_name_button" class="menu_button" type="submit" title="Click to set a new User Name (reloads page)" value="Change Name">
</form>
<div class="ui-settings">
<div class="range-block">
<div class="range-block-title">
<h4>Fast UI Mode (no background blur)</h4>
<h4>Fast UI Mode<br>(no background blur)</h4>
</div>
<div class="range-block-range">
<label for="fast_ui_mode" class="checkbox_label">
@ -205,6 +206,22 @@
</label>
</div>
</div>
<div id="avatars-style" class="range-block">
<div class="range-block-title">
<h4>Avatars Style</h4>
</div>
<div class="range-block-range">
<label>
<input name="avatar_style" type="radio" value="0" />
Round
</label>
<label>
<input name="avatar_style" type="radio" value="1" />
Rectangular
</label>
</div>
</div>
</div>
<div id="power-user-options-block">
<h3>Power User Options</h3>
<div id="power-user-option-checkboxes">

23
public/scripts/power-user.js
View File

@ -21,6 +21,7 @@ let disable_personality_formatting = false;
let always_force_name2 = false;
let fast_ui_mode = false;
let multigen = false;
let avatar_style = 0;
let custom_chat_separator = '';
const storage_keys = {
@ -34,6 +35,7 @@ const storage_keys = {
custom_chat_separator: "TavernAI_custom_chat_separator",
fast_ui_mode: "TavernAI_fast_ui_mode",
multigen: "TavernAI_multigen",
avatar_style: "TavernAI_avatar_style",
};
function collapseNewlines(x) {
@ -50,6 +52,19 @@ function switchUiMode() {
}
}
function applyAvatarStyle() {
avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? 0);
switch (avatar_style) {
case 0:
$("body").removeClass("big-avatars");
break;
case 1:
$("body").addClass("big-avatars");
break;
}
}
applyAvatarStyle();
switchUiMode();
function loadPowerUserSettings() {
@ -63,6 +78,7 @@ function loadPowerUserSettings() {
custom_chat_separator = localStorage.getItem(storage_keys.custom_chat_separator);
fast_ui_mode = localStorage.getItem(storage_keys.fast_ui_mode) == "true";
multigen = localStorage.getItem(storage_keys.multigen) == "true";
avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? 0);
$("#force-pygmalion-formatting-checkbox").prop("checked", force_pygmalion_formatting);
$("#collapse-newlines-checkbox").prop("checked", collapse_newlines);
@ -74,6 +90,7 @@ function loadPowerUserSettings() {
$("#custom_chat_separator").val(custom_chat_separator);
$("#fast_ui_mode").prop("checked", fast_ui_mode);
$("#multigen").prop("checked", multigen);
$(`input[name="avatar_style"][value="${avatar_style}"]`).prop("checked", true);
}
$(document).ready(() => {
@ -130,4 +147,10 @@ $(document).ready(() => {
multigen = $(this).prop("checked");
localStorage.setItem(storage_keys.multigen, multigen);
});
$(`input[name="avatar_style"]`).on('input', function (e) {
avatar_style = Number(e.target.value);
localStorage.setItem(storage_keys.avatar_style, avatar_style);
applyAvatarStyle();
});
});

57
public/style.css
View File

@ -402,6 +402,22 @@ margin-top:5px;
align-items: flex-end;
}
.ui-settings {
display: flex;
flex-direction: row;
align-items: flex-end;
column-gap: 10px;
}
.ui-settings > div {
flex: 1;
}
#avatars-style .range-block-range {
display: flex;
flex-direction: column;
}
.avatar {
width: 50px;
height: 50px;
@ -418,6 +434,43 @@ margin-top:5px;
box-shadow: 0 0 5px var(--black50a);
}
body.big-avatars .avatar {
width: 60px;
height: 90px;
border-style: none;
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
border-radius: 5px;
box-shadow: 0 0 5px var(--black50a);
}
body.big-avatars #user_avatar_block .avatar {
height: 90px;
width: 60px;
border-radius: 5px;
}
body.big-avatars #user_avatar_block .avatar img {
height: 90px;
width: 60px;
}
body.big-avatars .last_mes {
grid-template-rows: [avatar-NameMesText-edit] 80px [swipes] auto;
grid-template-columns: [checkbox] fit-content(60px) [avatar-leftswipe] fit-content(60px) [name-mestext] auto [edit-rightswipe] 30px !important;
}
body.big-avatars .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border: 1px solid var(--black30a);
border-radius: 10px;
}
.mes_block {
padding-top: 0;
padding-left: 10px;
@ -1552,12 +1605,12 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after
cursor: pointer;
width: 64px;
height: 64px;
border: 2px solid rgba(255,255,255,0.7);
outline: 2px solid rgba(255,255,255,0.7);
border-radius: 50%;
}
#user_avatar_block .avatar:not(.selected) {
border: 2px solid transparent;
outline: 2px solid transparent;
}
#user_avatar_block .avatar img {

2
server.js
View File

@ -1702,7 +1702,7 @@ async function generateThumbnail(type, file) {
return null;
}
const imageSizes = { 'bg': [160, 90], 'avatar': [96, 96] };
const imageSizes = { 'bg': [160, 90], 'avatar': [96, 144] };
const mySize = imageSizes[type];
const image = await jimp.read(pathToOriginalFile);