restyle group panel

public/index.html

@@ -1642,8 +1642,7 @@
                     </div>
                 </div>
 
-
+                <div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
-                <div 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 name="Group Chat Edit Panel" id="rm_group_chats_block" class="right_menu flex-container flexNoGap">
-                        <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>
+                    <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="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_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>
-                        <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>
-                    </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>
-                        <div id="groupTagList" class="tags"></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 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">
-                        <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" class="overflowYAuto flex-container"></div>
-                        <div id="rm_group_add_members"></div>
-                        <h3>Current Members</h3>
-                        <div id="rm_group_members"></div>
                             </div>
                         </div>
+                    </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>

public/script.js

@@ -3432,6 +3432,10 @@ function selectRightMenuWithAnimation(selectedMenuId) {
                 complete: function () { },
             });
         }
+        /*         if (selectedMenuId === "rm_group_chats_block") {
+        
+                    $("#groupCurrentMemberListToggle").click();
+                } */
     })
 }
 

public/style.css

@@ -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);
+    /*     height: calc(100% - 45px);
-    flex-direction: column;
+    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)*/