Skip to content

Commit 03d6656

Browse files
LMelaiaLMelaia
committed
Added visibility toggle to controls.
1 parent 748fba2 commit 03d6656

File tree

3 files changed

+116
-9
lines changed

3 files changed

+116
-9
lines changed

‎css/index.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
6161
margin-right: -16px;
6262
padding-top: 5px;
6363
padding-bottom: 5px;
64+
}
65+
66+
/* Misc */
67+
68+
.material-icons {
69+
vertical-align: middle !important;
70+
}
71+
72+
.styleless {
73+
background-color: transparent;
74+
border: 0px;
6475
}

‎index.html‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,17 @@
2424
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2525
<link rel="shortcut icon" href="images/projectcsv-16.png"/>
2626

27-
<!-- css & js -->
27+
<!-- css -->
2828
<link rel="stylesheet" type="text/css" href="css/index.css">
2929

3030
<!-- Bootstrap & jQuery -->
31+
<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
32+
integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
33+
crossorigin="anonymous"></script>
34+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
35+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
36+
crossorigin="anonymous"></script>
37+
3138
<link rel="stylesheet"
3239
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
3340
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
@@ -36,12 +43,10 @@
3643
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
3744
crossorigin="anonymous"></script>
3845

39-
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
40-
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
41-
crossorigin="anonymous"></script>
42-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
43-
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
44-
crossorigin="anonymous"></script>
46+
<!-- Material Icons -->
47+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
48+
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
49+
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
4550
</head>
4651

4752
<body>
@@ -61,12 +66,35 @@
6166
<div class="container">
6267
<div class="row">
6368
<div class="col-md-8 text-center controls">
64-
<p class="basic-cs"><b>Basic CSV Settings</b></p>
69+
<p class="basic-cs">
70+
<button class="styleless" id="basic-controls-toggle">
71+
<b>Basic CSV Settings</b>
72+
<i class="material-icons" id="basic-controls-display">arrow_drop_down</i>
73+
</button>
74+
</p>
75+
76+
<!-- Basic Controls -->
77+
<div id="basic-controls">
78+
79+
</div>
6580
</div>
6681
<div class="col-md-3 text-center controls">
67-
<p class="advanced-cs"><b>Advanced CSV Settings</b></p>
82+
<p class="advanced-cs">
83+
<button class="styleless" id="advanced-controls-toggle">
84+
<b>Advanced CSV Settings</b>
85+
<i class="material-icons" id="advanced-controls-display">arrow_drop_down</i>
86+
</button>
87+
</p>
88+
89+
<!-- Advanced Controls -->
90+
<div id="advanced-controls">
91+
92+
</div>
6893
</div>
6994
</div>
7095
</div>
96+
97+
<!-- index.js -->
98+
<script src="js/index.js"></script>
7199
</body>
72100
</html>

‎js/index.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,71 @@
1414
* You should have received a copy of the GNU General Public License
1515
* along with this program. If not, see <http://www.gnu.org/licenses/>.
1616
*/
17+
18+
/**
19+
* Basic controls toggle button callback.
20+
*/
21+
$("#basic-controls-toggle").click(function() {
22+
toggleBasic();
23+
});
24+
25+
/**
26+
* Hides the basic controls.
27+
*/
28+
function hideBasic(){
29+
$("#basic-controls").hide();
30+
$("#basic-controls-display").html("arrow_drop_up");
31+
}
32+
33+
/**
34+
* Shows the basic controls.
35+
*/
36+
function showBasic(){
37+
$("#basic-controls").show();
38+
$("#basic-controls-display").html("arrow_drop_down");
39+
}
40+
41+
/**
42+
* Toggles the basic controls visibility.
43+
*/
44+
function toggleBasic(){
45+
if ($("#basic-controls").is(":visible")){
46+
hideBasic();
47+
} else {
48+
showBasic();
49+
}
50+
}
51+
52+
/**
53+
* Advanced controls toggle button callback.
54+
*/
55+
$("#advanced-controls-toggle").click(function() {
56+
toggleAdvanced();
57+
});
58+
59+
/**
60+
* Hides the advanced controls.
61+
*/
62+
function hideAdvanced(){
63+
$("#advanced-controls").hide();
64+
$("#advanced-controls-display").html("arrow_drop_up");
65+
}
66+
67+
/**
68+
* Shows the advanced controls.
69+
*/
70+
function showAdvanced(){
71+
$("#advanced-controls").show();
72+
$("#advanced-controls-display").html("arrow_drop_down");
73+
}
74+
75+
/**
76+
* Toggles the advanced controls visibility.
77+
*/
78+
function toggleAdvanced(){
79+
if ($("#advanced-controls").is(":visible")){
80+
hideAdvanced();
81+
} else {
82+
showAdvanced();
83+
}
84+
}

0 commit comments

Comments
 (0)