Cleaned up Past Chats view

- normalized borders
- character name at the top of popup
- added grey border
This commit is contained in:
RossAsscends
2023-03-24 12:49:31 +09:00
parent a1f16f470b
commit bd7e7c6379
3 changed files with 51 additions and 37 deletions

View File

@@ -1246,15 +1246,14 @@
</div>
<div id="shadow_select_chat_popup">
<div id="select_chat_popup">
<div id="select_chat_popup_text">
<img id="select_chat_cross" src="img/cross.png" alt="Close">
</div>
<div id="select_chat_import"> <!-- import chat popup header -->
<div id="chat_import_button" class="right_menu_button">
<img alt="" class="svg_icon" src="img/cloud-arrow-up-solid.svg" />
<div id="chat_import_button" class="menu_button">
<img alt="" class="svg_icon" src="img/file-arrow-up-solid.svg" />
</div>
<div>
<div id="selectChatPopupHeaderText" class="TxtLrgBoldCenter">
<span id="ChatHistoryCharName"></span>
<br>
Chat History
<a href="/notes/10" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</div>
<form id="form_import_chat" action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
@@ -1263,6 +1262,7 @@
<input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
<input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
</form>
<img id="select_chat_cross" src="img/cross.png" alt="Close">
</div>
<div id="select_chat_div">

View File

@@ -2303,7 +2303,7 @@ async function getAllCharaChats() {
a["file_name"].localeCompare(b["file_name"])
);
data = data.reverse();
$("#ChatHistoryCharName").html(characters[this_chid].name);
for (const key in data) {
let strlen = 300;
let mes = data[key]["mes"];
@@ -3561,7 +3561,7 @@ $(document).ready(function () {
if (id == "option_select_chat") {
if (selected_group) {
// will open a chat selection screen
openNavToggle();
/* openNavToggle(); */
$("#rm_button_characters").trigger("click");
return;
}
@@ -3580,7 +3580,7 @@ $(document).ready(function () {
else if (id == "option_start_new_chat") {
if (selected_group) {
// will open a group creation screen
openNavToggle();
/* openNavToggle(); */
$("#rm_button_group_chats").trigger("click");
return;
}

View File

@@ -1148,7 +1148,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
cursor: pointer;
}
.avatar_div .menu_button, .form_create_bottom_buttons_block .menu_button {
.avatar_div .menu_button,
.form_create_bottom_buttons_block .menu_button,
#select_chat_popup .menu_button {
font-weight: bold;
color: var(--white70);
background-color: var(--black50a);
@@ -1156,7 +1158,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
border-radius: 10px;
padding: 3px;
cursor: pointer;
margin: 10px 0;
margin: 0;
transition: 0.3s;
font-size: 22px;
min-width:40px;
@@ -1720,6 +1722,12 @@ input[type="range"]{
/*Notes '?' links*/
.notes-link {
margin-left: 3px;
position: absolute;
}
.note-link-span {
color: var(--sienna);
border: 1px solid var(--sienna);
@@ -1733,6 +1741,7 @@ input[type="range"]{
display: inline-block;
opacity: 0.7;
margin: 0 5px;
text-align: initial;
}
@@ -1971,10 +1980,11 @@ input[type="range"]{
}
#select_chat_popup {
display: block;
grid-template-rows: 50px 100px 100px auto 45px;
display: grid;
grid-template-rows: auto auto;
max-width: 800px;
max-height: 70vh;
height: min-content;
max-height: calc(100vh - 55px);
min-height: 100px;
position: absolute;
z-index: 2066;
@@ -1982,12 +1992,23 @@ input[type="range"]{
margin-right: auto;
left: 0;
right: 0;
margin-top: 6vh;
box-shadow: 0px 0px 20px var(--black30a);
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
/* margin-top: 40px; */
box-shadow: 0px 0px 20px black;
padding: 10px;
background-color: var(--black70a);
background-color: var(--black50a);
border-radius: 20px;
overflow-y: scroll;
overflow-y: auto;
border: 1px solid var(--grey30);
}
.TxtLrgBoldCenter {
text-align: center;
font-size: large;
font-weight: 600;
}
#export_div {
@@ -2006,13 +2027,12 @@ input[type="range"]{
}
#select_chat_div {
margin-left: 5px;
margin-top: 30px;
overflow-x: hidden;
overflow-y: scroll;
/* margin-left: 5px; */
/* margin-top: 30px; */
/* overflow-x: hidden;
overflow-y: scroll; */
padding: 0;
height: min-content;
max-height: 100%;
}
#select_chat_div hr {
@@ -2024,14 +2044,13 @@ input[type="range"]{
grid-template-columns: min-content auto;
align-items: center;
grid-gap: 10px;
margin-left: 15px;
margin-top: 15px;
margin-bottom: 10px;
}
.select_chat_block {
border-radius: 5px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 10px;
/* margin-right: 10px; */
margin-top: 10px;
border: 1px solid var(--white30a);
padding: 10px;
display: grid;
@@ -2058,19 +2077,13 @@ input[type="range"]{
}
.select_chat_block_mes {
margin-right: 6px;
font-size: 0.75rem;
}
.select_chat_block .avatar {
/*height:30px;
width:30px;*/
}
#select_chat_cross {
position: absolute;
right: 15px;
top:14px;
top:15px;
width: 20px;
height: 20px;
cursor: pointer;
@@ -2500,6 +2513,7 @@ h2 {
a {
color: orange;
text-decoration: none;
}