Spaces:
Running
Running
Alfredo Villegas
commited on
Commit
•
325d2d4
1
Parent(s):
42d365f
DEV: prueba de switch button
Browse files- static/css/app.css +3 -1
- static/css/switch.css +58 -0
- static/js/windowHandler.js +10 -1
- static/main.html +4 -0
static/css/app.css
CHANGED
@@ -1,3 +1,5 @@
|
|
|
|
|
|
1 |
html,
|
2 |
body {
|
3 |
margin: 0;
|
@@ -212,4 +214,4 @@ button{
|
|
212 |
|
213 |
#message-template{
|
214 |
display: none;
|
215 |
-
}
|
|
|
1 |
+
@import "switch.css";
|
2 |
+
|
3 |
html,
|
4 |
body {
|
5 |
margin: 0;
|
|
|
214 |
|
215 |
#message-template{
|
216 |
display: none;
|
217 |
+
}
|
static/css/switch.css
ADDED
@@ -0,0 +1,58 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.switch {
|
2 |
+
position: relative;
|
3 |
+
display: inline-block;
|
4 |
+
width: 60px;
|
5 |
+
height: 34px;
|
6 |
+
}
|
7 |
+
|
8 |
+
.switch input {
|
9 |
+
opacity: 0;
|
10 |
+
width: 0;
|
11 |
+
height: 0;
|
12 |
+
}
|
13 |
+
|
14 |
+
.slider {
|
15 |
+
position: absolute;
|
16 |
+
cursor: pointer;
|
17 |
+
top: 0;
|
18 |
+
left: 0;
|
19 |
+
right: 0;
|
20 |
+
bottom: 0;
|
21 |
+
background-color: #ccc;
|
22 |
+
-webkit-transition: .4s;
|
23 |
+
transition: .4s;
|
24 |
+
}
|
25 |
+
|
26 |
+
.slider:before {
|
27 |
+
position: absolute;
|
28 |
+
content: "";
|
29 |
+
height: 26px;
|
30 |
+
width: 26px;
|
31 |
+
left: 4px;
|
32 |
+
bottom: 4px;
|
33 |
+
background-color: white;
|
34 |
+
-webkit-transition: .4s;
|
35 |
+
transition: .4s;
|
36 |
+
}
|
37 |
+
|
38 |
+
input:checked+.slider {
|
39 |
+
background-color: #2196F3;
|
40 |
+
}
|
41 |
+
|
42 |
+
input:focus+.slider {
|
43 |
+
box-shadow: 0 0 1px #2196F3;
|
44 |
+
}
|
45 |
+
|
46 |
+
input:checked+.slider:before {
|
47 |
+
-webkit-transform: translateX(26px);
|
48 |
+
-ms-transform: translateX(26px);
|
49 |
+
transform: translateX(26px);
|
50 |
+
}
|
51 |
+
|
52 |
+
.slider.round {
|
53 |
+
border-radius: 34px;
|
54 |
+
}
|
55 |
+
|
56 |
+
.slider.round:before {
|
57 |
+
border-radius: 50%;
|
58 |
+
}
|
static/js/windowHandler.js
CHANGED
@@ -36,10 +36,19 @@ class WindowHandler{
|
|
36 |
}
|
37 |
|
38 |
limpiarChat(){
|
|
|
39 |
$("#input-text").val("");
|
40 |
this.recalcularTextarea();
|
41 |
$("#chat").html("");
|
42 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
43 |
|
44 |
manejadorEnviar(){
|
45 |
let mensaje = $("#input-text").val();
|
@@ -154,4 +163,4 @@ class WindowHandler{
|
|
154 |
|
155 |
|
156 |
|
157 |
-
}
|
|
|
36 |
}
|
37 |
|
38 |
limpiarChat(){
|
39 |
+
// Hola
|
40 |
$("#input-text").val("");
|
41 |
this.recalcularTextarea();
|
42 |
$("#chat").html("");
|
43 |
}
|
44 |
+
toggleSwitch() {
|
45 |
+
let checkBox = document.querySelector(".switch input[type='checkbox']");
|
46 |
+
if (checkBox.checked) {
|
47 |
+
console.log("Switch is turned on.");
|
48 |
+
} else {
|
49 |
+
console.log("Switch is turned off.");
|
50 |
+
}
|
51 |
+
}
|
52 |
|
53 |
manejadorEnviar(){
|
54 |
let mensaje = $("#input-text").val();
|
|
|
163 |
|
164 |
|
165 |
|
166 |
+
}
|
static/main.html
CHANGED
@@ -18,6 +18,10 @@
|
|
18 |
<div class='input-box'>
|
19 |
<textarea class='input-text' id='input-text' placeholder="Type something" type="text" autofocus=""></textarea>
|
20 |
<button class='input-send' id='input-send' ></button>
|
|
|
|
|
|
|
|
|
21 |
<button class='input-delete' id='input-delete' ></button>
|
22 |
</div>
|
23 |
</div>
|
|
|
18 |
<div class='input-box'>
|
19 |
<textarea class='input-text' id='input-text' placeholder="Type something" type="text" autofocus=""></textarea>
|
20 |
<button class='input-send' id='input-send' ></button>
|
21 |
+
<label class="switch">
|
22 |
+
<input type="checkbox" onchange="toggleSwitch()">
|
23 |
+
<span class="slider round"></span>
|
24 |
+
</label>
|
25 |
<button class='input-delete' id='input-delete' ></button>
|
26 |
</div>
|
27 |
</div>
|