mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
restyle group panel
This commit is contained in:
RossAscends
@ -1642,8 +1642,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
|
||||
<div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
|
||||
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
|
||||
|
||||
<div id="avatar-and-name-block">
|
||||
@ -1720,69 +1719,103 @@
|
||||
<!-- now back to normal divs for display purposes-->
|
||||
</form>
|
||||
</div>
|
||||
<div id="rm_group_chats_block" class="right_menu">
|
||||
<div id="rm_group_top_bar">
|
||||
<div id="rm_button_back_from_group" class="menu_button fa-solid fa-left-long"></div>
|
||||
<div id="rm_group_scenario" class="menu_button fa-solid fa-scroll" title="Set a group chat scenario"></div>
|
||||
<input id="rm_group_chat_name" class="text_pole" type="text" name="chat_name" placeholder="Chat Name (Optional)" maxlength="100" />
|
||||
<div id="group_favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites"></div>
|
||||
<input id="rm_group_fav" type="hidden" />
|
||||
<div id="rm_group_submit" class="menu_button fa-solid fa-check" title="Create"></div>
|
||||
<div id="rm_group_delete" class="menu_button fa-solid fa-trash-can" title="Delete"></div>
|
||||
</div>
|
||||
<div id="rm_group_buttons">
|
||||
<div class="flex1">
|
||||
<h5>
|
||||
Group reply strategy
|
||||
<a href="/notes#replyorderstrategies" class="notes-link" target="_blank">
|
||||
<span class="note-link-span">?</span>
|
||||
</a>
|
||||
</h5>
|
||||
<label class="checkbox_label">
|
||||
<input type="radio" name="rm_group_activation_strategy" value="0" />
|
||||
Natural order
|
||||
</label>
|
||||
<label class="checkbox_label">
|
||||
<input type="radio" name="rm_group_activation_strategy" value="1" />
|
||||
List order
|
||||
</label>
|
||||
|
||||
<div name="Group Chat Edit Panel" id="rm_group_chats_block" class="right_menu flex-container flexNoGap">
|
||||
|
||||
<div class="inline-drawer wide100p flexFlowColumn">
|
||||
<div id="groupControlsToggle" class="inline-drawer-toggle inline-drawer-header">
|
||||
Group Controls
|
||||
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<label class="checkbox_label">
|
||||
<input id="rm_group_allow_self_responses" type="checkbox" />
|
||||
Allow self responses
|
||||
</label>
|
||||
<label id="rm_group_automode_label" class="checkbox_label">
|
||||
<input id="rm_group_automode" type="checkbox" />
|
||||
Auto Mode
|
||||
</label>
|
||||
<div class="inline-drawer-content">
|
||||
<div name="group-metadata-controls" class="marginTopBot5">
|
||||
<input id="rm_group_chat_name" class="text_pole" type="text" name="chat_name" placeholder="Chat Name (Optional)" maxlength="100" />
|
||||
<div id="group_tags_div" class="wide100p">
|
||||
<div class="tag_controls">
|
||||
<input id="groupTagInput" class="text_pole tag_input flex1" placeholder="Search / Create tags" maxlength="25" />
|
||||
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags"></div>
|
||||
</div>
|
||||
<div id="groupTagList" class="tags paddingTopBot5"></div>
|
||||
</div>
|
||||
<div id="rm_group_top_bar">
|
||||
<div name="GroupStragegyAndOrder" id="rm_group_buttons" class="fontsize80p flex-container paddingLeftRight5">
|
||||
<div class="">
|
||||
<div class="flex-container flexnowrap width100p whitespacenowrap">
|
||||
Group reply strategy
|
||||
<a href="/notes#replyorderstrategies" class="notes-link" target="_blank">
|
||||
<span class="note-link-span">?</span>
|
||||
</a>
|
||||
</div>
|
||||
<label class="checkbox_label flexnowrap whitespacenowrap">
|
||||
<input type="radio" name="rm_group_activation_strategy" value="0" />
|
||||
Natural order
|
||||
</label>
|
||||
<label class="checkbox_label flexnowrap whitespacenowrap">
|
||||
<input type="radio" name="rm_group_activation_strategy" value="1" />
|
||||
List order
|
||||
</label>
|
||||
</div>
|
||||
<div class="">
|
||||
<label class="checkbox_label whitespacenowrap">
|
||||
<input id="rm_group_allow_self_responses" type="checkbox" />
|
||||
Allow self responses
|
||||
</label>
|
||||
<label id="rm_group_automode_label" class="checkbox_label whitespacenowrap">
|
||||
<input id="rm_group_automode" type="checkbox" />
|
||||
Auto Mode
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div name="GroupFavDelOkBack" class="flex-container flexGap5 spaceEvenly">
|
||||
<div id="rm_button_back_from_group" class="heightFitContent margin0 menu_button fa-solid fa-left-long"></div>
|
||||
<div id="rm_group_scenario" class="heightFitContent margin0 menu_button fa-solid fa-scroll" title="Set a group chat scenario"></div>
|
||||
<div id="group_favorite_button" class="heightFitContent margin0 menu_button fa-solid fa-star" title="Add to Favorites"></div>
|
||||
<input id="rm_group_fav" type="hidden" />
|
||||
<div id="rm_group_submit" class="heightFitContent margin0 menu_button fa-solid fa-check" title="Create"></div>
|
||||
<div id="rm_group_delete" class="heightFitContent margin0 menu_button fa-solid fa-trash-can" title="Delete"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="group_tags_div" class="wide100p">
|
||||
<div class="tag_controls">
|
||||
<input id="groupTagInput" class="text_pole tag_input flex1" placeholder="Search / Create tags" maxlength="25" />
|
||||
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags"></div>
|
||||
<div class="inline-drawer wide100p flexFlowColumn">
|
||||
<div id="groupAddMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
|
||||
Add Members
|
||||
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
|
||||
</div>
|
||||
<div class="inline-drawer-content">
|
||||
<div name="Unadded Char List" class="flex-container flexFlowColumn overflowYAuto flex1">
|
||||
<div id="rm_group_add_members_header">
|
||||
<input id="rm_group_filter" class="text_pole" type="search" placeholder="Filter..." maxlength="100" />
|
||||
<div id="group_fav_filter" class="menu_button fa-solid fa-ranking-star" title="Show only favorites"></div>
|
||||
</div>
|
||||
<div id="rm_group_add_members" class="overflowYAuto flex-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="groupTagList" class="tags"></div>
|
||||
</div>
|
||||
<div id="rm_group_add_members_header">
|
||||
<h3>Add Members</h3>
|
||||
<input id="rm_group_filter" class="text_pole" type="search" placeholder="Filter..." maxlength="100" />
|
||||
<div id="group_fav_filter" class="menu_button fa-solid fa-ranking-star" title="Show only favorites"></div>
|
||||
</div>
|
||||
<div class="flex-container flexFlowColumn flexNoGap overflowYAuto wide100p flexGrow">
|
||||
<div id="rm_group_add_members"></div>
|
||||
<h3>Current Members</h3>
|
||||
<div id="rm_group_members"></div>
|
||||
<div class="inline-drawer wide100p flexFlowColumn">
|
||||
<div id="groupCurrentMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
|
||||
Current Members
|
||||
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
|
||||
</div>
|
||||
<div class="inline-drawer-content">
|
||||
<div name="Current Group Members" class="flex-container flexFlowColumn overflowYAuto flex1">
|
||||
<div id="rm_group_members" class="overflowYAuto flex-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="rm_character_import" class="right_menu" style="display: none;">
|
||||
<form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
|
||||
<input multiple type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar">
|
||||
<input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
|
||||
</form>
|
||||
</div>
|
||||
<div id="rm_characters_block" class="right_menu">
|
||||
|
||||
<div name="Character List Panel" id="rm_characters_block" class="right_menu">
|
||||
<div id="charListFixedTop">
|
||||
<div class="form_create_bottom_buttons_block">
|
||||
<div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
|
||||
|
||||
@ -3432,6 +3432,10 @@ function selectRightMenuWithAnimation(selectedMenuId) {
|
||||
complete: function () { },
|
||||
});
|
||||
}
|
||||
/* if (selectedMenuId === "rm_group_chats_block") {
|
||||
|
||||
$("#groupCurrentMemberListToggle").click();
|
||||
} */
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -2685,6 +2685,7 @@ body .ui-widget-content li:hover {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
column-gap: 5px;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#rm_button_group_chats h2 {
|
||||
@ -2700,8 +2701,8 @@ body .ui-widget-content li:hover {
|
||||
|
||||
#rm_group_chats_block {
|
||||
display: none;
|
||||
height: calc(100% - 45px);
|
||||
flex-direction: column;
|
||||
/* height: calc(100% - 45px);
|
||||
flex-direction: column; */
|
||||
align-items: flex-start;
|
||||
padding: 0 5px;
|
||||
overflow-y: auto;
|
||||
@ -2714,13 +2715,13 @@ body .ui-widget-content li:hover {
|
||||
}
|
||||
|
||||
#rm_group_buttons {
|
||||
display: flex;
|
||||
/* display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5px;
|
||||
padding: 0 5px; */
|
||||
}
|
||||
|
||||
#rm_group_buttons>div {
|
||||
@ -2751,13 +2752,6 @@ body .ui-widget-content li:hover {
|
||||
#rm_group_add_members {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
max-height: 40%;
|
||||
min-height: 40%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid grey;
|
||||
border-radius: 10px;
|
||||
background-color: var(--black30a);
|
||||
@ -2817,10 +2811,11 @@ body .ui-widget-content li:hover {
|
||||
}
|
||||
|
||||
.group_member_icon {
|
||||
margin: 0 10px;
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.group_member {
|
||||
@ -3403,7 +3398,7 @@ label[for="extensions_autoconnect"] {
|
||||
}
|
||||
|
||||
.inline-drawer {
|
||||
padding-bottom: 10px;
|
||||
/* padding-bottom: 10px; */
|
||||
}
|
||||
|
||||
.code-copy {
|
||||
@ -3454,6 +3449,7 @@ label[for="extensions_autoconnect"] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.inline-drawer-content {
|
||||
@ -3479,7 +3475,7 @@ label[for="extensions_autoconnect"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: var(--sheldWidth);
|
||||
/* max-width: var(--sheldWidth); */
|
||||
margin: 35px auto 0 auto;
|
||||
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
|
||||
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
|
||||
@ -3541,10 +3537,6 @@ toolcool-color-picker {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alignitemscenter {
|
||||
align-items: center;
|
||||
}
|
||||
@ -3904,6 +3896,51 @@ body.waifuMode #avatar_zoom_popup {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.debug-red {
|
||||
border: 1px solid red !important;
|
||||
}
|
||||
|
||||
.debug-yellow {
|
||||
border: 1px solid yellow !important;
|
||||
}
|
||||
|
||||
.debug-green {
|
||||
border: 1px solid green !important;
|
||||
}
|
||||
|
||||
.debug-blue {
|
||||
border: 1px solid blue !important;
|
||||
}
|
||||
|
||||
.debug-purple {
|
||||
border: 1px solid purple !important;
|
||||
}
|
||||
|
||||
.fontsize80p {
|
||||
font-size: calc(var(--mainFontSize) * 0.8) !important;
|
||||
}
|
||||
|
||||
.fontsize60p {
|
||||
font-size: calc(var(--mainFontSize) * 0.6) !important;
|
||||
}
|
||||
|
||||
.paddingTopBot5 {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.paddingLeftRight5 {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.heightFitContent {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.flexGap5 {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- @media queries must always go at the bottom ------------*/
|
||||
|
||||
/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
|
||||
|
||||
Reference in New Issue
Block a user