Alfredo Villegas commited on
Commit
325d2d4
1 Parent(s): 42d365f

DEV: prueba de switch button

Browse files
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>