add multi select on tab sort

made all buttons same

api/pages/settings-image-manager.php

@@ -28,7 +28,7 @@ function get_page_settings_image_manager($Organizr)
 <div class="panel bg-org panel-info">
     <div class="panel-heading">
 		<span lang="en">View Images</span>
-        <button type="button" class="btn btn-success btn-circle pull-right popup-with-form m-r-5" href="#new-image-form" data-effect="mfp-3d-unfold"><i class="fa fa-upload"></i> </button>
+        <button type="button" class="btn btn-info btn-circle pull-right popup-with-form m-r-5" href="#new-image-form" data-effect="mfp-3d-unfold"><i class="fa fa-upload"></i> </button>
 	</div>
     <div class="panel-wrapper collapse in" aria-expanded="true">
         <div class="panel-body bg-org" >
@@ -46,4 +46,4 @@ function get_page_settings_image_manager($Organizr)
     <div class="clearfix"></div>
 </form>
 ';
-}
+}

api/pages/settings-tab-editor-categories.php

@@ -82,7 +82,7 @@ let sortable = new Sortable(el, {
 <div class="panel bg-org panel-info">
 	<div class="panel-heading">
 		<span lang="en">Category Editor</span>
-		<button type="button" class="btn btn-success btn-circle pull-right popup-with-form m-r-5" href="#new-category-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>
+		<button type="button" class="btn btn-info btn-circle pull-right popup-with-form m-r-5" href="#new-category-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>
 	</div>
 	<div class="table-responsive">
 		<form id="submit-categories-form" onsubmit="return false;">

api/pages/settings-tab-editor-tabs.php

@@ -81,8 +81,11 @@ function get_page_settings_tab_editor_tabs($Organizr)
 		}
 	});*/
 	let el = document.getElementById(\'tabEditorTable\');
-	let sortable = new Sortable(el, {
+	let tabSorter = new Sortable(el, {
 		handle: ".sort-tabs-handle",
+		ghostClass: "sortable-ghost",
+		multiDrag: true,
+		selectedClass: "multi-selected",
 		onUpdate: function (evt) {
 			$(\'input.order\').each(function(idx) {
 				$(this).val(idx + 1);
@@ -98,9 +101,9 @@ function get_page_settings_tab_editor_tabs($Organizr)
 	<div class="panel bg-org panel-info">
 		<div class="panel-heading">
 			<span lang="en">Tab Editor</span>
-			<button type="button" class="btn btn-info btn-circle pull-right popup-with-form m-r-5" href="#new-tab-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>
-			<button type="button" class="btn btn-info btn-circle pull-right m-r-5 help-modal" data-modal="tabs"><i class="fa fa-question-circle"></i> </button>
-			<button onclick="submitTabOrder(newTabsGlobal)" class="btn btn-sm btn-info btn-rounded waves-effect waves-light pull-right animated loop-animation rubberBand m-r-20 saveTabOrderButton hidden" type="button"><span class="btn-label"><i class="fa fa-save"></i></span><span lang="en">Save Tab Order</span></button>
+			<button type="button" data-toggle="tooltip" title="Add New Tab" data-placement="bottom" class="btn btn-info btn-circle pull-right popup-with-form m-r-5" href="#new-tab-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>
+			<button type="button" data-toggle="tooltip" title="Help" data-placement="bottom" class="btn btn-info btn-circle pull-right m-r-5 help-modal" data-modal="tabs"><i class="fa fa-question-circle"></i> </button>
+			<button onclick="submitTabOrder(newTabsGlobal)" data-toggle="tooltip" title="Save tab Order" data-placement="bottom" class="btn btn-info btn-circle waves-effect waves-light pull-right animated loop-animation rubberBand m-r-5 saveTabOrderButton hidden" type="button"><i class="fa fa-save"></i></button>
 		</div>
 		<div class="table-responsive">
 			<form id="submit-tabs-form" onsubmit="return false;">

api/plugins/bookmark/plugin.php

@@ -719,7 +719,7 @@ class Bookmark extends Organizr
 	<div class="panel bg-org panel-info">
 		<div class="panel-heading">
 			<span lang="en">Bookmark Category Editor</span>
-			<button type="button" class="btn btn-success btn-circle pull-right popup-with-form m-r-5" href="#new-bookmark-category-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>
+			<button type="button" class="btn btn-info btn-circle pull-right popup-with-form m-r-5" href="#new-bookmark-category-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>
 		</div>
 		<div class="table-responsive">
 			<form id="submit-bookmark-categories-form" onsubmit="return false;">

css/organizr.css

@@ -4598,4 +4598,8 @@ td.mouse-grab.sort-tabs-handle {
      max-width: 35px !important;
      padding: 0;
      padding-left: 5px;
+}
+.multi-selected,
+.tabEditor.multi-selected:hover {
+    background: rgba(0,0,0,.25) !important;
 }