itdominator
/
Remote-Mouse
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

menus to modals

This commit is contained in:
Maxim Stewart 2020-07-17 04:39:08 -05:00
parent 9bfa74ad50
commit 6575a9f61d
6 changed files with 140 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/pic1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 16 KiB

30
src/core/static/css/main.css
View File

@ -19,6 +19,7 @@ input {
width: 100% !important; width: 100% !important;
margin: 0 auto !important; margin: 0 auto !important;
background-color: #00000000 !important; background-color: #00000000 !important;
height: 2.5em;
} }
@ -50,29 +51,25 @@ input {
border: 2px solid #c3c3c3; border: 2px solid #c3c3c3;
} }
#rightClickBtn { #controlsModalBtn,
border-style: dashed; #typingModalBtn,
border-width: 2px;
overflow: auto;
font-size: 280%;
}
#rightClickBtn:hover {
background-color: rgba(0, 232, 255, 0.5);
cursor: pointer;
}
#sendKeysBtn, #sendKeysBtn,
#pressEnterBtn, #pressEnterBtn,
#scrollToggle, #scrollToggle,
#mouseHoldToggle { #mouseHoldToggle,
#rightClickBtn {
display: inline-block; display: inline-block;
font-size: 280%; font-size: 280%;
width: 100%; width: 100%;
height: 5em;
} }
#scrollToggleContainer, #controlsModalBtn,
#rightClickBtn { #typingModalBtn {
height: 2em;
}
#hideHandler {
display: none; /* Hide button unless screen bigger than media query says it is */ display: none; /* Hide button unless screen bigger than media query says it is */
} }
@ -89,8 +86,7 @@ input {
margin: 0 auto; margin: 0 auto;
} }
#scrollToggleContainer, #hideHandler {
#rightClickBtn {
display: block; display: block;
} }
} }

19
src/core/static/js/events.js
View File

@ -180,6 +180,25 @@ function playClickSound() {
} }
$( "#controlsModalBtn" ).bind( "mouseup", async function(eve) {
$('#controlsModal').modal({"focus": true, "show": true});
});
$( "#typingModalBtn" ).bind( "mouseup", async function(eve) {
$('#typingModal').modal({"focus": true, "show": true});
});
$( "#closeControlsModalBtn" ).bind( "mouseup", async function(eve) {
console.log("here");
$('#controlsModal').modal({"focus": false, "show": false});
});
$( "#closeTypingModalBtn" ).bind( "mouseup", async function(eve) {
console.log("here2");
$('#typingModal').modal({"focus": false, "show": false});
});
document.addEventListener("mousedown", setClickkCheck, true); document.addEventListener("mousedown", setClickkCheck, true);
document.addEventListener("mouseup", resetClickCheckAndModBump, true); document.addEventListener("mouseup", resetClickCheckAndModBump, true);
document.addEventListener("touchstart", touchHandler, true); document.addEventListener("touchstart", touchHandler, true);

15
src/core/templates/body-header.html Normal file
View File

@ -0,0 +1,15 @@
<nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
<div class="col">
<ul class="navbar-nav justify-content-center text-center">
<li class="list-group-item" style="width: 100%;">
<button class="btn btn-success btn-lg" data-toggle="modal"
id="typingModalBtn" data-target="#typingModal">Typing Mode</button>
</li>
<li class="list-group-item" style="width: 100%;">
<button class="btn btn-success btn-lg" data-toggle="modal"
id="controlsModalBtn" data-target="#controlsModal">Controls Toggle</button>
</li>
</ul>
</div>
</nav>

102
src/core/templates/index.html
View File

@ -5,44 +5,98 @@
{% endblock body_header_additional %} {% endblock body_header_additional %}
{% block body_content %} {% block body_content %}
<audio id="clickSound" src="{{url_for('static', filename='click.mp3')}}"></audio> <!-- Typing Modal -->
<div class="container-auto"> <div class="modal fade" id="typingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>Typing</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row"> <div class="row">
<div class="col justify-content-center text-center">
<div class="col">
<div class="row">
<div class="col">
<input type="text" id="sendKeysField" class="form-control" <input type="text" id="sendKeysField" class="form-control"
value="" placeholder="Send keys..." /> value="" placeholder="Send keys..." />
</div> <ul class="navbar-nav justify-content-center text-center">
</div> <li class="list-group-item" style="width: 100%;">
<br/><br/>
<div class="row">
<div class="col">
<div class="col justify-content-center text-center">
<button id="sendKeysBtn" class="btn btn-success btn-lg">Send</button> <button id="sendKeysBtn" class="btn btn-success btn-lg">Send</button>
</div> </li>
</div> <li class="list-group-item" style="width: 100%;">
<div class="col">
<div class="col justify-content-center text-center">
<button id="pressEnterBtn" class="btn btn-success btn-lg">Enter</button> <button id="pressEnterBtn" class="btn btn-success btn-lg">Enter</button>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<br/><br/>
</div>
</div>
<div class="modal-footer">
<button id="closeTypingModalBtn" type="button" data-dismiss="modal" class="btn btn-danger btn-lg">Close</button>
</div>
<div id="bg-alert-zone" class="col">
</div>
</div>
</div>
</div>
<!-- Controls Modal -->
<div class="modal fade" id="controlsModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>Controls</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row"> <div class="row">
<div id="scrollToggleContainer" class="col justify-content-center text-center">
<div class="col">
<ul class="navbar-nav">
<li id="hideHandler" class="list-group-item">
<button id="scrollToggle" class="btn btn-success btn-lg">Scroll Mode: Inactive</button> <button id="scrollToggle" class="btn btn-success btn-lg">Scroll Mode: Inactive</button>
</div> </li>
<div class="col justify-content-center text-center"> <li class="list-group-item">
<button id="mouseHoldToggle" class="btn btn-success btn-lg">Mouse Hold: Inactive</button> <button id="mouseHoldToggle" class="btn btn-success btn-lg">Mouse Hold: Inactive</button>
</div> </li>
</div> <li id="hideHandler" class="list-group-item">
</div> <button id="rightClickBtn" class="btn btn-success btn-lg">
<br/><br/>
<div class="row">
<div id="rightClickBtn" class="col justify-content-center text-center btn btn-success">
Right-Click Right-Click
</button>
</li>
</ul>
</div>
</div> </div>
</div> </div>
<br/><br/>
<div class="modal-footer">
<button id="closeControlsModalBtn" type="button" data-dismiss="modal" class="btn btn-danger btn-lg">Close</button>
</div>
<div id="bg-alert-zone" class="col">
</div>
</div>
</div>
</div>
<audio id="clickSound" src="{{url_for('static', filename='click.mp3')}}"></audio>
<div class="container-auto"> <div class="container-auto">
<div class="row"> <div class="row">
<div id="canvas" class="col justify-content-center text-center"> <div id="canvas" class="col justify-content-center text-center">

2
src/core/templates/layout.html
View File

@ -40,6 +40,8 @@
<!-- <img id="bg" src="{{ url_for('static', filename='imgs/backgrounds/background.jpg')}}" alt="{{title}} Background Logo" /> --> <!-- <img id="bg" src="{{ url_for('static', filename='imgs/backgrounds/background.jpg')}}" alt="{{title}} Background Logo" /> -->
{% block body_header %} {% block body_header %}
{% include "body-header.html" %}
{% block body_header_additional %} {% block body_header_additional %}
{% endblock body_header_additional%} {% endblock body_header_additional%}
{% endblock %} {% endblock %}