Skip to content

Commit

Permalink
Merge pull request #191 from Abhinav-ark/main
Browse files Browse the repository at this point in the history 
Fixed codebot chat and variable-watch overlap bug and made chat resizable
  • Loading branch information
@ritwik-m
ritwik-m authored Sep 6, 2024
2 parents f33b2e2 + 68f9091 commit 1293567
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 98 deletions.
47 changes: 31 additions & 16 deletions css/chat.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,13 @@
/*overflow-y: scroll;*/
/*overflow-x: scroll;*/
}
.chat-fixed {
border-top: 2px solid white;
background-color: #f2f5f8;
}
.chat .chat-history {
padding: 30px 30px 20px;
border-bottom: 2px solid white;
/* border-bottom: 2px solid white; */
/*overflow-y: scroll;*/
/*height: 575px;*/
}
Expand All @@ -53,6 +57,9 @@
width: 90%;
position: relative;
}
.chat .chat-history ul {
word-wrap: break-word;
}
.chat .chat-history .message:after {
bottom: 100%;
left: 7%;
Expand All @@ -76,35 +83,43 @@
border-bottom-color: #94c2ed;
left: 93%;
}
.chat .chat-message {
padding: 30px;
.chat-fixed .chat-message {
padding: 10px 30px;
display: flex;
}
.chat .chat-message textarea {
width: 100%;
.chat-fixed .chat-message textarea {
width: 95%;
border: none;
padding: 10px 20px;
font: 14px/22px 'Lato', Arial, sans-serif;
margin-bottom: 10px;
border-radius: 5px;
resize: none;
}
.chat .chat-message .fa-file-o,
.chat .chat-message .fa-file-image-o {
border: 1px solid black;
resize: vertical;
min-height: 40px;
max-height: 80px;
margin: 10px 5px;
}
.chat-fixed .chat-message .fa-file-o,
.chat-fixed .chat-message .fa-file-image-o {
font-size: 16px;
color: gray;
cursor: pointer;
}
.chat .chat-message button {
float: right;
color: #94c2ed;
.chat-fixed .chat-message button {
font-size: 16px;
text-transform: uppercase;
border: none;
cursor: pointer;
font-weight: bold;
background: #f2f5f8;
}
.chat .chat-message button:hover {
background-color: black;
padding: 7px 6px 7px 9px;
border-radius: 50%;
align-items: center;
height: fit-content;
width: fit-content;
margin: 10px 5px;
}
.chat-fixed .chat-message button:hover {
color: #75b1e8;
}
.online,
Expand Down
46 changes: 39 additions & 7 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,21 +87,47 @@ body {
cursor: pointer !important;
}

.chatcol {
width: 35%;
.codeBotSection {
float: right;
height: 60%;
height: 100%;
width: 35%;
display: flex;
flex-direction: column;
overflow: hidden;
}

.chatcol {
width: 100%;
background-color: #343a40;
border-top: 2px solid white;
resize: vertical;
overflow: auto;
min-height: 25%;
max-height: 55%;
}

.variable-watch {
width: 35%;
float: right;
height: 40%;
flex-grow: 1;
width: 100%;
min-height: 20%;
max-height: 75%;
overflow: scroll;
}

.variable-watch thead {
background-color: none;
}

/* Add a resize handle */
.chatcol::after {
content: '';
display: block;
height: 10px;
background: #666;
cursor: row-resize;
margin-top: -5px;
}

#arrayTypeButton {
padding-right: 57%;
}
Expand Down Expand Up @@ -151,11 +177,17 @@ button.close {
}
}

.chatcol h6 {
.chatHeader h6 {
padding: 6px;
color: white;
}

.chatHeader {
height: fit-content;
background-color: #343a40;
border-top: white solid 2px;
}

.chat-nav {
padding: 6px;
}
182 changes: 108 additions & 74 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -359,92 +359,111 @@
<div class="paperColumn">
<div id="myHolder" style="transform-origin: 0 0"></div>
</div>
<div class="chatcol">
<h6 style="float: left">Flowgramming CodeBot</h6>
<div style="float: right" class="chat-nav">
<a
class="chat-zoom"
href="#"
id="chatzoomin"
title="Zoom in"
>
<svg
class="mx-2 bi bi-zoom-in my-auto"
fill="white"
height="1.2em"
viewBox="0 0 16 16"
width="1.5em"
xmlns="http://www.w3.org/2000/svg"
<div class="codeBotSection">
<div class="chatHeader">
<h6 style="float: left">Flowgramming CodeBot</h6>
<div style="float: right" class="chat-nav">
<a
class="chat-zoom"
href="#"
id="chatzoomin"
title="Zoom in"
>
<path
d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
fill-rule="evenodd"
/>
<path
d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"
/>
<path
d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"
fill-rule="evenodd"
/>
</svg>
</a>
<a
class="chat-zoom"
href="#"
id="chatzoomout"
title="Zoom out"
>
<svg
class="mx-2 bi bi-zoom-out my-auto"
fill="white"
height="1.2em"
viewBox="0 0 16 16"
width="1.5em"
xmlns="http://www.w3.org/2000/svg"
<svg
class="mx-2 bi bi-zoom-in my-auto"
fill="white"
height="1.2em"
viewBox="0 0 16 16"
width="1.5em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
fill-rule="evenodd"
/>
<path
d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"
/>
<path
d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"
fill-rule="evenodd"
/>
</svg>
</a>
<a
class="chat-zoom"
href="#"
id="chatzoomout"
title="Zoom out"
>
<path
d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
fill-rule="evenodd"
/>
<path
d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"
/>
<path
d="M3 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"
fill-rule="evenodd"
/>
</svg>
</a>
<svg
class="mx-2 bi bi-zoom-out my-auto"
fill="white"
height="1.2em"
viewBox="0 0 16 16"
width="1.5em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
fill-rule="evenodd"
/>
<path
d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"
/>
<path
d="M3 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"
fill-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
<div class="chat">
<div class="chat-history">
<ul style="list-style-type: none"></ul>
<div class="chatcol">
<div class="chat">
<div class="chat-history">
<ul style="list-style-type: none"></ul>
</div>
<!-- end chat-history -->
</div>
<!-- end chat-history -->
<!-- end chat -->
</div>
<div class="chat-fixed">
<div class="chat-message clearfix">
<textarea
name="message-to-send"
id="message-to-send"
placeholder="Type your message"
rows="2"
placeholder="Type your message..."
class="adaptive-textarea"
rows="1"
></textarea>
<button id="chatsend">Send</button>
<button id="chatsend">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="white"
>
<path
d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"
/>
</svg>
</button>
</div>
<!-- end chat-message -->
</div>
<!-- end chat -->
</div>
<div class="variable-watch">
<table class="table text-center table-sm">
<thead>
<tr>
<th scope="col">Variable Name</th>
<th scope="col">Variable Value</th>
</tr>
</thead>
<tbody id="variable-watch-body"></tbody>
</table>
<div class="variable-watch">
<table class="table text-center table-sm">
<thead>
<tr>
<th scope="col">Variable Name</th>
<th scope="col">Variable Value</th>
</tr>
</thead>
<tbody id="variable-watch-body"></tbody>
</table>
</div>
</div>
</div>

Expand Down Expand Up @@ -656,6 +675,21 @@ <h6 style="float: left">Flowgramming CodeBot</h6>
callback
)
})
$('.adaptive-textarea').on('input', function () {
$(this).css('height', 'auto')
$(this).css(
'height',
Math.min(
this.scrollHeight,
6 * parseFloat($(this).css('font-size'))
) + 'px'
)
})
$('#chatsend').click(function () {
$('.adaptive-textarea').each(function () {
$(this).css('height', 'auto')
})
})
// Let's get hold of the dropdown that controls the speed of flowgram execution
const speedOfExecutionDropdown = $('#speedOfExecution')

Expand Down
4 changes: 3 additions & 1 deletion js/chat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ $textarea = $('#message-to-send')
$chatHistoryList = $chatHistory.find('ul')

function scrollToBottom() {
document.getElementById('message-to-send').scrollIntoView()
document
.querySelector('.chat-history')
.scrollIntoView({ behavior: 'smooth', block: 'end' })
}

function renderUser() {
Expand Down

0 comments on commit 1293567

Please sign in to comment.