Fix preloader

api/functions/organizr-functions.php

@@ -181,7 +181,8 @@ function getCustomizeAppearance(){
                     'name' => 'headerColor',
                     'label' => 'Nav Bar Color',
                     'value' => $GLOBALS['headerColor'],
-                    'class' => 'colorpicker'
+                    'class' => 'colorpicker',
+                    'disabled' => true
                 )
             ),
             'database' => array(

css/colors/blue-dark.css

@@ -378,16 +378,30 @@ body.stop-scrolling {
   background-color: #3a7b98;
 }
 .asColorPicker-wrap {
-    position: relative;
-    display: block;
-    width: calc(100% - 35px);
+  position: relative;
+  display: block;
+  width: calc(100% - 35px);
+}
+.asColorPicker-trigger {
+  position: absolute;
+  top: 0;
+  right: -32px;
+  height: 38px;
+  width: 37px;
+  border: 0;
+  border-radius: 0 4px 4px 0;
+}
+.asColorPicker-trigger span {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  border-radius: 0 4px 4px 0;
 }
-
 .top-left-part {
-    width: auto;
-    max-width: 220px;
-    float: left;
-    border-right: transparent;
+  width: auto;
+  max-width: 220px;
+  float: left;
+  border-right: transparent;
 }
 .table-hover>tbody>tr:hover, .table-striped>tbody>tr:nth-of-type(odd), .table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
   background-color: #1f1f1f!important;

index.php

@@ -20,6 +20,7 @@
 	<link href="plugins/bower_components/sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
 	<link href="plugins/bower_components/switchery/dist/switchery.min.css" rel="stylesheet" />
 	<link href="plugins/bower_components/jquery-asColorPicker-master/css/asColorPicker.css" rel="stylesheet">
+	<link href="plugins/bower_components/dropzone-master/dist/dropzone.css" rel="stylesheet" type="text/css" />
 	<link href="css/style.css?v=<?php echo $GLOBALS['installedVersion']; ?>" rel="stylesheet">
 	<link href="css/colors/blue-dark.css?v=<?php echo $GLOBALS['installedVersion']; ?>" id="theme" rel="stylesheet">
 	<!--[if lt IE 9]>
@@ -120,6 +121,7 @@
 	<script src="plugins/bower_components/switchery/dist/switchery.min.js"></script>
 	<script src="plugins/bower_components/jquery-asColorPicker-master/libs/jquery-asColor.js"></script>
     <script src="plugins/bower_components/jquery-asColorPicker-master/dist/jquery-asColorPicker.min.js"></script>
+	<script src="plugins/bower_components/dropzone-master/dist/dropzone.js"></script>
 	<script src="js/functions.js?v=<?php echo $GLOBALS['installedVersion']; ?>"></script>
 	<script src="js/custom.js?v=<?php echo $GLOBALS['installedVersion']; ?>"></script>
 </body>

js/custom.js

@@ -73,7 +73,11 @@ function pageLoad(){
         $('#side-menu').metisMenu();
     });
     $(".colorpicker").asColorPicker({
-        mode: 'simple'
+        mode: 'complex',
+        color: {
+            format: false,
+            alphaConvert: false
+        }
     });
 
 

js/functions.js

@@ -457,14 +457,15 @@ function buildFormItem(item){
 	var value = (item.value) ? ' value="'+item.value+'"' : '';
 	var name = (item.name) ? ' name="'+item.name+'"' : '';
 	var extraClass = (item.class) ? ' '+item.class : '';
+	var disabled = (item.disabled) ? ' disabled' : '';
 	//+tof(item.value,'c')+`
 	switch (item.type) {
 		case 'input':
-			return '<input data-changed="false" lang=en" type="text" class="form-control'+extraClass+'"'+placeholder+value+id+name+' />';
+			return '<input data-changed="false" lang=en" type="text" class="form-control'+extraClass+'"'+placeholder+value+id+name+disabled+' />';
 			break;
 		case 'switch':
 		case 'checkbox':
-			return '<input data-changed="false" type="checkbox" class="js-switch'+extraClass+'" data-size="small" data-color="#99d683" data-secondary-color="#f96262"'+name+value+tof(item.value,'c')+' /><input data-changed="false" type="hidden"'+name+'value="false">';
+			return '<input data-changed="false" type="checkbox" class="js-switch'+extraClass+'" data-size="small" data-color="#99d683" data-secondary-color="#f96262"'+name+value+tof(item.value,'c')+id+disabled+' /><input data-changed="false" type="hidden"'+name+'value="false">';
 			break;
 		default:
 			return false;
@@ -782,6 +783,7 @@ function buildLogin(){
 	$("#preloader").fadeOut();
 }
 function buildLockscreen(){
+	$("#preloader").fadeIn();
 	closeSideMenu();
 	organizrConnect('api/?v1/lockscreen').success(function(data) {
 		var json = JSON.parse(data);
@@ -790,6 +792,7 @@ function buildLockscreen(){
 	}).fail(function(xhr) {
 		console.error("Organizr Function: Lockscreen Connection Failed");
 	});
+	$("#preloader").fadeOut();
 }
 function buildUserGroupSelect(array, userID, groupID){
 	var groupSelect = '';
@@ -1263,8 +1266,10 @@ function buildWizard(){
 	}).fail(function(xhr) {
 		console.error("Organizr Function: Wizard Connection Failed");
 	});
+	$("#preloader").fadeOut();
 }
 function buildDependencyCheck(orgdata){
+
 	organizrConnect('api/?v1/dependencies_page').success(function(data) {
 		var json = JSON.parse(data);
 		console.log("Organizr Function: Starting Dependencies Check");
@@ -1275,6 +1280,7 @@ function buildDependencyCheck(orgdata){
 	}).fail(function(xhr) {
 		console.error("Organizr Function: Dependencies Connection Failed");
 	});
+	$("#preloader").fadeOut();
 }
 function buildDependencyInfo(arrayItems){
 	var listing = '';