Settings On/Off changed to toggle buttons #276

DinoDevs · Sep 14, 2021 · 2255ab0 · 2255ab0
1 parent 74dc403
commit 2255ab0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/source/core/resources/style_gca.css b/source/core/resources/style_gca.css
@@ -1430,6 +1430,17 @@
 		.gca_rtl .language_select .translate-percent {text-align: left;}
 		.gca_rtl .language_select .translated-by {text-align: left;}
 
+		/* Switch Slider */
+		#settings_tab .type-wrapper .switch-slide {float: right;}
+		#settings_tab .type-wrapper .switch-slide {position: relative;display: inline-block;width: 36px;height: 21px;}
+		#settings_tab .type-wrapper .switch-slide input {opacity: 0;width: 0;height: 0;}
+		#settings_tab .type-wrapper .switch-slide .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #d9cea2;-webkit-transition: .4s;transition: .4s;border: 1px solid #9c8959;opacity: 0.5;border-radius: 12px;}
+		#settings_tab .type-wrapper .switch-slide .slider:before {position: absolute;content: "";height: 13px;width: 13px;left: 2px;bottom: 2px;background-color: white;-webkit-transition: .4s;transition: .4s;border: 1px solid #9c8959;border-radius: 7px;}
+		#settings_tab .type-wrapper .switch-slide input:checked + .slider {background-color: #c3ab6f;opacity: 1;}
+		#settings_tab .type-wrapper .switch-slide input:focus + .slider {box-shadow: 0 0 1px #c3ab6f;}
+		#settings_tab .type-wrapper .switch-slide input:checked + .slider:before {-webkit-transform: translateX(15px);-ms-transform: translateX(15px);transform: translateX(15px);}
+		.gca_rtl #settings_tab .type-wrapper .switch-slide {float: left;}
+
 
 
 	/* Accessibility

diff --git a/source/core/source/settings.js b/source/core/source/settings.js
@@ -1789,6 +1789,22 @@ var gca_settings = {
 				typeWrapper.appendChild(title);
 				container.appendChild(typeWrapper);
 
+				var select = document.createElement('label');
+				select.className = "switch-slide";
+
+				item.data.checkbox = document.createElement('input');
+				item.data.checkbox.type = "checkbox";
+				if(scheme.value) item.data.checkbox.checked = true;
+				select.appendChild(item.data.checkbox);
+
+				var slider = document.createElement('span');
+				slider.className = 'slider';
+				select.appendChild(slider);
+
+				//<span class="slider"></span>
+
+
+				/*
 				var select = document.createElement('div');
 				select.className = "switch-field";
 
@@ -1816,6 +1832,7 @@ var gca_settings = {
 
 				if(scheme.value) item.data.true.checked = true;
 				else item.data.false.checked = true;
+				*/
 
 				typeWrapper.appendChild(select);
 
@@ -1824,7 +1841,8 @@ var gca_settings = {
 				typeWrapper.appendChild(clearBoth);
 
 				item.save = function(){
-					var value = item.data.true.checked;
+					//var value = item.data.true.checked;
+					var value = item.data.checkbox.checked;
 
 					if(scheme.data.db == "options"){
 						gca_options.set(scheme.data.category, scheme.data.label, value);