ext button to left, stack buttons on mobile
This commit is contained in:
parent
52c07e0895
commit
3f4a62d22c
|
@ -369,6 +369,18 @@
|
|||
top: unset;
|
||||
bottom: unset;
|
||||
}
|
||||
|
||||
|
||||
#leftSendForm,
|
||||
#rightSendForm {
|
||||
width: 1.15em;
|
||||
flex-wrap: wrap;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
#extensionsMenuButton {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*iOS specific*/
|
||||
|
@ -445,4 +457,4 @@
|
|||
#horde_model {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -297,6 +297,10 @@
|
|||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.alignContentCenter {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.overflowHidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
@ -526,4 +530,4 @@ textarea:disabled {
|
|||
height: 30px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
|
@ -4568,14 +4568,18 @@
|
|||
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
|
||||
</div>
|
||||
<form id="send_form" class="no-connection">
|
||||
<div id="options_button" class="fa-solid fa-bars"></div>
|
||||
<textarea id="send_textarea" data-i18n="[placeholder]Not connected to API!" placeholder="Not connected to API!" name="text"></textarea>
|
||||
<div id="send_but_sheld">
|
||||
<div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
|
||||
<i class="fa-solid fa-circle-stop"></i>
|
||||
<div id="nonQRFormItems">
|
||||
<div id="leftSendForm" class="alignContentCenter">
|
||||
<div id="options_button" class="fa-solid fa-bars"></div>
|
||||
</div>
|
||||
<textarea id="send_textarea" data-i18n="[placeholder]Not connected to API!" placeholder="Not connected to API!" name="text"></textarea>
|
||||
<div id="rightSendForm" class="alignContentCenter">
|
||||
<div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
|
||||
<i class="fa-solid fa-circle-stop"></i>
|
||||
</div>
|
||||
<div id="mes_continue" class="fa-fw fa-solid fa-arrow-right displayNone" title="Continue the last message" data-i18n="[title]Continue the last message"></div>
|
||||
<div id="send_but" class="fa-solid fa-paper-plane displayNone" title="Send a message" data-i18n="[title]Send a message"></div>
|
||||
</div>
|
||||
<div id="mes_continue" class="fa-fw fa-solid fa-arrow-right displayNone" title="Continue the last message" data-i18n="[title]Continue the last message"></div>
|
||||
<div id="send_but" class="fa-solid fa-paper-plane displayNone" title="Send a message" data-i18n="[title]Send a message"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -8023,14 +8023,14 @@ jQuery(async function () {
|
|||
return menu.is(':hover') || button.is(':hover');
|
||||
}
|
||||
|
||||
button.on('mouseenter click', function () { showMenu(); });
|
||||
button.on('mouseleave', function () {
|
||||
button.on('click', function () { showMenu(); });
|
||||
button.on('blur', function () {
|
||||
//delay to prevent menu hiding when mouse leaves button into menu
|
||||
setTimeout(() => {
|
||||
if (!isMouseOverButtonOrMenu()) { hideMenu(); }
|
||||
}, 100)
|
||||
});
|
||||
menu.on('mouseleave', function () {
|
||||
menu.on('blur', function () {
|
||||
//delay to prevent menu hide when mouseleaves menu into button
|
||||
setTimeout(() => {
|
||||
if (!isMouseOverButtonOrMenu()) { hideMenu(); }
|
||||
|
|
|
@ -347,14 +347,14 @@ function addExtensionsButtonAndMenu() {
|
|||
|
||||
$(document.body).append(extensionsMenuHTML);
|
||||
|
||||
$('#send_but_sheld').prepend(buttonHTML);
|
||||
$('#leftSendForm').prepend(buttonHTML);
|
||||
|
||||
const button = $('#extensionsMenuButton');
|
||||
const dropdown = $('#extensionsMenu');
|
||||
//dropdown.hide();
|
||||
|
||||
let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
|
||||
placement: 'top-end',
|
||||
placement: 'top-start',
|
||||
});
|
||||
|
||||
$(button).on('click', function () {
|
||||
|
@ -592,7 +592,7 @@ function getModuleInformation() {
|
|||
* Generates the HTML strings for all extensions and displays them in a popup.
|
||||
*/
|
||||
async function showExtensionsDetails() {
|
||||
try{
|
||||
try {
|
||||
showLoader();
|
||||
let htmlDefault = '<h3>Built-in Extensions:</h3>';
|
||||
let htmlExternal = '<h3>Installed Extensions:</h3>';
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
display: none;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
order: 10;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#quickReplies {
|
||||
|
|
|
@ -559,10 +559,9 @@ hr {
|
|||
background-color: var(--crimson70a) !important;
|
||||
}
|
||||
|
||||
#send_but_sheld {
|
||||
#nonQRFormItems {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: var(--bottomFormBlockSize);
|
||||
position: relative;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
|
@ -570,10 +569,28 @@ hr {
|
|||
column-gap: 5px;
|
||||
font-size: var(--bottomFormIconSize);
|
||||
overflow: hidden;
|
||||
order: 1003;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#send_but_sheld>div {
|
||||
#leftSendForm,
|
||||
#rightSendForm {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#leftSendForm {
|
||||
order: 1;
|
||||
padding-left: 2px;
|
||||
|
||||
}
|
||||
|
||||
#rightSendForm {
|
||||
order: 3;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
#send_form>#nonQRFormItems>div>div:not(.mes_stop) {
|
||||
width: var(--bottomFormBlockSize);
|
||||
height: var(--bottomFormBlockSize);
|
||||
margin: 0;
|
||||
|
@ -585,25 +602,26 @@ hr {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
#options_button:hover,
|
||||
#send_but_sheld>div:hover {
|
||||
#send_form>#nonQRFormItems>div>div:hover {
|
||||
opacity: 1;
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
#send_but {
|
||||
order: 99999;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#mes_continue {
|
||||
order: 99998;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#send_but_sheld .mes_stop {
|
||||
#send_form .mes_stop {
|
||||
display: none;
|
||||
order: 99997;
|
||||
order: 2;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
#options_button {
|
||||
|
@ -622,7 +640,7 @@ hr {
|
|||
transition: 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
order: 1001;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.font-family-reset {
|
||||
|
@ -670,7 +688,7 @@ hr {
|
|||
}
|
||||
|
||||
#extensionsMenuButton {
|
||||
order: 100;
|
||||
order: 4;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
|
@ -968,7 +986,7 @@ select {
|
|||
margin: 0;
|
||||
text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
|
||||
flex: 1;
|
||||
order: 1002;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.text_pole::placeholder {
|
||||
|
@ -3742,4 +3760,4 @@ a {
|
|||
height: 100vh;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue