[permissionmanager] Tweak style, fix role filtering (and make it AND), minor cleanups

15 files changed, 184 insertions, 276 deletions

diff --git a/modules-available/permissionmanager/clientscript.js b/modules-available/permissionmanager/clientscript.js
index 4770fa6a..90d66688 100644
--- a/modules-available/permissionmanager/clientscript.js
+++ b/modules-available/permissionmanager/clientscript.js
@@ -10,36 +10,21 @@ document.addEventListener("DOMContentLoaded", function() {
 			plugins: ["remove_button"]
 		})[0].selectize;
 
-		// If Site gets refreshed, all data-selectizeCounts will be reset to 0, so delete the filters from the selectize
-		selectize.clear();
-
-		selectize.on("item_add", function (value, $item) {
-			// When first item gets added the filter isn't empty anymore, so hide all rows
-			if (selectize.items.length === 1) {
-				$(".dataTable tbody").find("tr").hide();
-			}
-			// Find all rows which shall be shown and increase their counter by 1
-			$(".roleid-" + value).closest("tr").each(function () {
-				$(this).data("selectizeCount", $(this).data("selectizeCount") + 1);
-				$(this).show();
-			});
-		});
-
-		selectize.on("item_remove", function (value, $item) {
-			// When no items in the filter, show all rows again
-			if (selectize.items.length === 0) {
-				$(".dataTable tbody").find("tr").show();
+		var $body = $(".dataTable tbody");
+		var filterFunc = function(value) {
+			var selected = selectize.getValue();
+			if (!selected || !selected.length) {
+				$body.find("tr").show();
 			} else {
-				// Find all rows which have the delete role, decrease their counter by 1
-				$(".roleid-" + value).closest("tr").each(function () {
-					$(this).data("selectizeCount", $(this).data("selectizeCount") - 1);
-					// If counter is 0, hide the row (no filter given to show the row anymore)
-					if ($(this).data("selectizeCount") === 0) {
-						$(this).closest("tr").hide();
-					}
-				});
+				$body.find("tr").hide();
+				var str = 'tr.roleid-' + selected.join('.roleid-');
+				$body.find(str).show();
 			}
-		});
+		};
+
+		selectize.on("item_add", filterFunc);
+
+		selectize.on("item_remove",filterFunc);
 	}
 
 	$("tr").on("click", function(e) {
@@ -47,8 +32,4 @@ document.addEventListener("DOMContentLoaded", function() {
 			$(this).find("input[type=checkbox]").trigger("click");
 		}
 	});
-
-	$("form input").keydown(function(e) {
-		if (e.keyCode === 13) e.preventDefault();
-	});
 });
\ No newline at end of file
diff --git a/modules-available/permissionmanager/config.json b/modules-available/permissionmanager/config.json
index c92e917a..d2071984 100644
--- a/modules-available/permissionmanager/config.json
+++ b/modules-available/permissionmanager/config.json
@@ -1,4 +1,4 @@
 {
 	"category":"main.content",
-	"dependencies": [ "locations", "js_stupidtable", "bootstrap_switch", "js_selectize" ]
+	"dependencies": [ "locations", "js_stupidtable", "js_selectize" ]
 }
diff --git a/modules-available/permissionmanager/lang/de/template-tags.json b/modules-available/permissionmanager/lang/de/template-tags.json
index 71bd4075..2ec25b37 100644
--- a/modules-available/permissionmanager/lang/de/template-tags.json
+++ b/modules-available/permissionmanager/lang/de/template-tags.json
@@ -1,24 +1,18 @@
 {
-    "lang_roles": "Rollen",
-    "lang_users": "Nutzer",
-    "lang_locations": "Räume",
     "lang_addRole": "Rollen erteilen",
-    "lang_removeRole": "Rollen entziehen",
-    "lang_newRole": "Rolle anlegen",
-    "lang_selected": "Ausgewählt",
-    "lang_edit": "Bearbeiten",
-    "lang_delete": "Löschen",
-    "lang_removeCheck": "Sind Sie sich sicher, dass Sie diese Rolle entfernen wollen?",
-    "lang_deleteCheck": "Sind Sie sich sicher, dass Sie diese Rolle löschen wollen?",
-    "lang_emptyNameWarning": "Der Name der Rolle darf nicht leer sein!",
+    "lang_addRoleHeading": "Neue Rolle hinzuf\u00fcgen",
+    "lang_deleteCheck": "Sind Sie sich sicher, dass Sie diese Rolle l\u00f6schen wollen?",
+    "lang_editRoleHeading": "Rolle bearbeiten",
+    "lang_locationAwareDesc": "Berechtigungen mit diesem Symbol k\u00f6nnen auf bestimmte R\u00e4ume\/Orte beschr\u00e4nkt werden. Alle anderen Berechtigungen sind unabh\u00e4ngig von den f\u00fcr diese Rolle ausgew\u00e4hlten Orten.",
+    "lang_locations": "R\u00e4ume",
+    "lang_moduleName": "Rechtemanager",
     "lang_name": "Name",
-    "lang_cancel": "Abbrechen",
-    "lang_save": "Speichern",
-    "lang_all": "alle",
-    "lang_selected": "ausgewählte",
+    "lang_newRole": "Rolle anlegen",
     "lang_permissions": "Rechte",
-    "lang_selectizePlaceholder": "Nach Rollen filtern...",
+    "lang_removeRole": "Rollen entziehen",
+    "lang_roles": "Rollen",
     "lang_searchPlaceholder": "Nach Rollen suchen...",
-    "lang_moduleName": "Rechtemanager",
-    "lang_roleEditor": "Rollen Editor"
+    "lang_selected": "ausgew\u00e4hlte",
+    "lang_selectizePlaceholder": "Nach Rollen filtern...",
+    "lang_users": "Nutzer"
 }
\ No newline at end of file
diff --git a/modules-available/permissionmanager/lang/en/template-tags.json b/modules-available/permissionmanager/lang/en/template-tags.json
index 2d31b294..cef23422 100644
--- a/modules-available/permissionmanager/lang/en/template-tags.json
+++ b/modules-available/permissionmanager/lang/en/template-tags.json
@@ -1,24 +1,18 @@
 {
-    "lang_roles": "Roles",
-    "lang_users": "Users",
-    "lang_locations": "Locations",
     "lang_addRole": "Grant Roles",
-    "lang_removeRole": "Revoke Roles",
-    "lang_newRole": "New Role",
-    "lang_selected": "Selected",
-    "lang_edit": "Edit",
-    "lang_delete": "Delete",
-    "lang_removeCheck": "Are you sure you want to remove this role?",
+    "lang_addRoleHeading": "Add new role",
     "lang_deleteCheck": "Are you sure you want to delete this role?",
-    "lang_emptyNameWarning": "Role name can not be empty!",
+    "lang_editRoleHeading": "Edit role",
+    "lang_locationAwareDesc": "Permissions with this symbol can be restricted to certain locations. All other permissions are independent of the locations selected for this role.",
+    "lang_locations": "Locations",
+    "lang_moduleName": "Permission Manager",
     "lang_name": "Name",
-    "lang_cancel": "Cancel",
-    "lang_save": "Save",
-    "lang_all": "all",
-    "lang_selected": "selected",
+    "lang_newRole": "New Role",
     "lang_permissions": "Permissions",
-    "lang_selectizePlaceholder": "Filter for roles...",
+    "lang_removeRole": "Revoke Roles",
+    "lang_roles": "Roles",
     "lang_searchPlaceholder": "Search for roles...",
-    "lang_moduleName": "Permission Manager",
-    "lang_roleEditor": "Role Editor"
+    "lang_selected": "selected",
+    "lang_selectizePlaceholder": "Filter for roles...",
+    "lang_users": "Users"
 }
\ No newline at end of file
diff --git a/modules-available/permissionmanager/page.inc.php b/modules-available/permissionmanager/page.inc.php
index bb8482af..4b961632 100644
--- a/modules-available/permissionmanager/page.inc.php
+++ b/modules-available/permissionmanager/page.inc.php
@@ -34,6 +34,9 @@ class Page_PermissionManager extends Page
 			$permissions = self::processPermissions(Request::post("permissions"));
 			PermissionDbUpdate::saveRole($rolename, $locations, $permissions, $roleID);
 		}
+		if (Request::isPost()) {
+			Util::redirect('?do=permissionmanager&show=' . Request::get("show", "roles"));
+		}
 	}
 
 	/**
@@ -44,32 +47,35 @@ class Page_PermissionManager extends Page
 		$show = Request::get("show", "roles");
 
 		// switch between tables, but always show menu to switch tables
-		if ( $show === 'roles' || $show === 'users' || $show === 'locations' ) {
-			// get menu button colors
-			$buttonColors = array();
-			$buttonColors['rolesButtonClass'] = $show === 'roles' ? 'active' : '';
-			$buttonColors['usersButtonClass'] = $show === 'users' ? 'active' : '';
-			$buttonColors['locationsButtonClass'] = $show === 'locations' ? 'active' : '';
-
-			Render::addtemplate('_page', $buttonColors);
-
-			if ($show === "roles") {
-				$data = array("roles" => GetPermissionData::getRoles());
-				Render::addTemplate('rolestable', $data);
-			} elseif ($show === "users") {
-				$data = array("user" => GetPermissionData::getUserData(), "roles" => GetPermissionData::getRoles());
-				Render::addTemplate('userstable', $data);
-			} elseif ($show === "locations") {
-				$data = array("location" => GetPermissionData::getLocationData(), "allroles" => GetPermissionData::getRoles());
-				Render::addTemplate('locationstable', $data);
-			}
+		// get menu button colors
+		$buttonColors = array();
+		if ($show === "roleEditor") {
+			$buttonColors['groupClass'] = 'slx-fade';
+			$buttonColors['rolesButtonClass'] = 'active';
+		} else {
+			$buttonColors[$show . 'ButtonClass'] = 'active';
+		}
+
+		Render::addtemplate('header-menu', $buttonColors);
+
+		if ($show === "roles") {
+			$data = array("roles" => GetPermissionData::getRoles());
+			Render::addTemplate('rolestable', $data);
+		} elseif ($show === "users") {
+			$data = array("user" => GetPermissionData::getUserData(), "allroles" => GetPermissionData::getRoles());
+			Render::addTemplate('role-filter-selectize', $data);
+			Render::addTemplate('userstable', $data);
+		} elseif ($show === "locations") {
+			$data = array("location" => GetPermissionData::getLocationData(), "allroles" => GetPermissionData::getRoles());
+			Render::addTemplate('role-filter-selectize', $data);
+			Render::addTemplate('locationstable', $data);
 		} elseif ($show === "roleEditor") {
 			$data = array("cancelShow" => Request::get("cancel", "roles"));
 
 			$selectedPermissions = array();
 			$selectedLocations = array();
-			$roleid = Request::get("roleid", false);
-			if ($roleid) {
+			$roleid = Request::get("roleid", false, 'int');
+			if ($roleid !== false) {
 				$roleData = GetPermissionData::getRoleData($roleid);
 				$data["roleid"] = $roleid;
 				$data["rolename"] = $roleData["rolename"];
@@ -81,7 +87,6 @@ class Page_PermissionManager extends Page
 			$data["locationHTML"] = self::generateLocationHTML(Location::getTree(), $selectedLocations);
 
 			Render::addTemplate('roleeditor', $data);
-
 		}
 	}
 
diff --git a/modules-available/permissionmanager/style.css b/modules-available/permissionmanager/style.css
index 9c39af64..8285fdd2 100644
--- a/modules-available/permissionmanager/style.css
+++ b/modules-available/permissionmanager/style.css
@@ -1,58 +1,21 @@
-#switchForm {
-    text-align: center;
-    margin-bottom: 50px;
-}
-
-#saveButton {
-    margin-left: 10px;
-}
-
-#rolename {
-    width: 200px;
-    display: inline-block;
-    margin-left: 10px;
-}
-
-.missingInput {
-    border-color: rgba(255, 0, 0, 0.8);
-    box-shadow: 0 1px 1px rgba(255, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.6);
-}
-
 .table {
     margin-top: 20px;
 }
 
-.table > tbody > tr > td {
-    vertical-align: middle;
-    height: 50px;
-}
-
 .scrollingTable {
     height: 500px;
     overflow: auto;
 }
 
-.customSpanMargin {
+/* vcenter .label in table cell */
+td > .label {
     display: inline-block;
-    margin-top: 2px;
-    margin-bottom: 2px;
+    margin: 2px 0;
 }
 
-.panel-primary > .panel-heading {
-    background-image: none;
-}
-
-.panel{
-    margin-bottom: 20px;
-}
-
-.selectize-input {
-    overflow: visible;
-}
-
-
-.tree-container .selected {
-    background-color: rgba(0, 182, 41, 0.23);
+/* lists in tree view: hide bullet points, first entry bold, ... */
+.tree-container ul {
+    list-style-type: none;
 }
 
 .tree-container > ul {
@@ -65,6 +28,7 @@
     font-weight: bold;
 }
 
+/* number of columns in tree view depending on screen size */
 .tree-container {
     -moz-column-gap: 20px;
     -webkit-column-gap: 20px;
@@ -91,7 +55,3 @@
         column-count: 3;
     }
 }
-
-ul {
-    list-style-type: none;
-}
\ No newline at end of file
diff --git a/modules-available/permissionmanager/templates/_page.html b/modules-available/permissionmanager/templates/_page.html
deleted file mode 100644
index 4140ce78..00000000
--- a/modules-available/permissionmanager/templates/_page.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div class="row">
-	<div class="col-md-12" style="margin-bottom: 0;">
-		<div class='page-header'>
-			<div class='pull-right'>
-				<form id="switchForm" method="GET" action="?do=permissionmanager">
-					<input type="hidden" name="do" value="permissionmanager">
-
-					<div class="btn-group">
-						<button class="btn btn-default {{rolesButtonClass}}" type="submit" name="show" value="roles">
-							<span class="glyphicon glyphicon-education"></span>
-							{{lang_roles}}
-						</button>
-
-						<button class="btn btn-default {{usersButtonClass}}" type="submit" name="show" value="users">
-							<span class="glyphicon glyphicon-user"></span>
-							{{lang_users}}
-						</button>
-
-						<button class="btn btn-default {{locationsButtonClass}}" type="submit" name="show" value="locations">
-							<span class="glyphicon glyphicon-home"></span>
-							{{lang_locations}}
-						</button>
-					</div>
-				</form>
-			</div>
-			<h1>{{lang_moduleName}}</h1>
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/modules-available/permissionmanager/templates/header-menu.html b/modules-available/permissionmanager/templates/header-menu.html
new file mode 100644
index 00000000..ce31d237
--- /dev/null
+++ b/modules-available/permissionmanager/templates/header-menu.html
@@ -0,0 +1,25 @@
+<div class='page-header'>
+	<div class='pull-right'>
+		<form method="GET">
+			<input type="hidden" name="do" value="permissionmanager">
+
+			<div class="btn-group {{groupClass}}">
+				<button class="btn btn-default {{rolesButtonClass}}" type="submit" name="show" value="roles">
+					<span class="glyphicon glyphicon-education"></span>
+					{{lang_roles}}
+				</button>
+
+				<button class="btn btn-default {{usersButtonClass}}" type="submit" name="show" value="users">
+					<span class="glyphicon glyphicon-user"></span>
+					{{lang_users}}
+				</button>
+
+				<button class="btn btn-default {{locationsButtonClass}}" type="submit" name="show" value="locations">
+					<span class="glyphicon glyphicon-home"></span>
+					{{lang_locations}}
+				</button>
+			</div>
+		</form>
+	</div>
+	<h1>{{lang_moduleName}}</h1>
+</div>
\ No newline at end of file
diff --git a/modules-available/permissionmanager/templates/locationstable.html b/modules-available/permissionmanager/templates/locationstable.html
index 153258fe..35058387 100644
--- a/modules-available/permissionmanager/templates/locationstable.html
+++ b/modules-available/permissionmanager/templates/locationstable.html
@@ -1,37 +1,21 @@
-<div class="row">
-	<div class="col-md-4"></div>
-	<div class="col-md-4">
-		<select multiple name="roles[]" id="select-role">
-			<option value>{{lang_selectizePlaceholder}}</option>
-			{{#allroles}}
-			<option value="{{roleid}}">{{rolename}}</option>
-			{{/allroles}}
-		</select>
-	</div>
-</div>
+<table id="locationsTable" class="table table-condensed table-hover dataTable">
+	<thead>
+		<tr>
+			<th>{{lang_locations}}</th>
+			<th class="slx-smallcol">{{lang_roles}}</th>
+		</tr>
+	</thead>
 
-<div class="row">
-	<div class="col-md-12">
-		<table id="locationsTable" class="table table-condensed table-hover stupidtable dataTable">
-			<thead>
-				<tr>
-					<th data-sort="string">{{lang_locations}}</th>
-					<th>{{lang_roles}}</th>
-				</tr>
-			</thead>
-
-			<tbody>
-			{{#location}}
-				<tr data-selectizeCount='0'>
-					<td>{{locationpad}} {{locationname}}</td>
-					<td>
-						{{#roles}}
-						<a href="?do=permissionmanager&show=roleEditor&cancel=locations&roleid={{roleid}}" class="label label-default customSpanMargin roleid-{{roleid}}">{{rolename}}</a>
-						{{/roles}}
-					</td>
-				</tr>
-			{{/location}}
-			</tbody>
-		</table>
-	</div>
-</div>
\ No newline at end of file
+	<tbody>
+	{{#location}}
+		<tr class="{{#roles}}roleid-{{roleid}} {{/roles}}">
+			<td>{{locationpad}} {{locationname}}</td>
+			<td class="slx-smallcol">
+				{{#roles}}
+				<a href="?do=permissionmanager&show=roleEditor&cancel=locations&roleid={{roleid}}" class="label label-default customSpanMargin">{{rolename}}</a>
+				{{/roles}}
+			</td>
+		</tr>
+	{{/location}}
+	</tbody>
+</table>
\ No newline at end of file
diff --git a/modules-available/permissionmanager/templates/role-filter-selectize.html b/modules-available/permissionmanager/templates/role-filter-selectize.html
new file mode 100644
index 00000000..ceadec75
--- /dev/null
+++ b/modules-available/permissionmanager/templates/role-filter-selectize.html
@@ -0,0 +1,6 @@
+<select multiple id="select-role">
+	<option value>{{lang_selectizePlaceholder}}</option>
+	{{#allroles}}
+		<option value="{{roleid}}">{{rolename}}</option>
+	{{/allroles}}
+</select>
\ No newline at end of file
diff --git a/modules-available/permissionmanager/templates/roleeditor.html b/modules-available/permissionmanager/templates/roleeditor.html
index eadce027..d50f2145 100644
--- a/modules-available/permissionmanager/templates/roleeditor.html
+++ b/modules-available/permissionmanager/templates/roleeditor.html
@@ -1,24 +1,42 @@
-<h1>{{lang_roleEditor}}</h1>
+<h2>
+	{{#roleid}}
+		{{lang_editRoleHeading}}
+	{{/roleid}}
+	{{^roleid}}
+		{{lang_addRoleHeading}}
+	{{/roleid}}
+</h2>
+
 <form method="post" action="?do=permissionmanager">
 	<input type="hidden" name="action" value="saveRole">
 	<input type="hidden" name="token" value="{{token}}">
 	<input type="hidden" name="roleid" value="{{roleid}}">
 
+	<div class="input-group">
+	<span class="input-group-addon">
+		<label for="rolename">{{lang_name}}</label>
+	</span>
+		<input id="rolename" name="rolename" value="{{rolename}}" type="text" class="form-control" required>
+	</div>
+	<br>
+
+	<div class="pull-right">
+		<a href="?do=permissionmanager&amp;show={{cancelShow}}" class="btn btn-default">{{lang_cancel}}</a>
+		<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}}</button>
+	</div>
 	<ul class="nav nav-tabs text-center" role="tablist">
 		<li role="presentation" class="active"><a href="#permissions" role="tab" data-toggle="tab">{{lang_permissions}}</a></li>
 		<li role="presentation"><a href="#locations" role="tab" data-toggle="tab">{{lang_locations}}</a></li>
-		<li style="float: none; display: inline-block">
-			<label for="rolename">{{lang_name}}:</label>
-			<input id="rolename" name="rolename" value="{{rolename}}" type="text" class="form-control">
-		</li>
-		<li style="float: right;">
-			<span><a href="?do=permissionmanager&show={{cancelShow}}" id="cancelButton" class="btn btn-default">{{lang_cancel}}</a></span>
-			<button type="submit" id="saveButton" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}}</button>
-		</li>
 	</ul>
 	<div class="tab-content">
 		<div role="tabpanel" class="tab-pane active" id="permissions">
 			{{{permissionHTML}}}
+			<div class="panel panel-default">
+				<div class="panel-body">
+					<span class="glyphicon glyphicon-home text-muted"></span>&emsp;
+					{{lang_locationAwareDesc}}
+				</div>
+			</div>
 		</div>
 		<div role="tabpanel" class="tab-pane" id="locations">
 			{{{locationHTML}}}
@@ -31,31 +49,17 @@
 
 	document.addEventListener("DOMContentLoaded", function () {
 
-		$(".tree-panel input[type=checkbox]").change(function () {
-			var checked = $(this).prop("checked");
-			var parent = $(this).parent().parent();
-			if (parent.hasClass("panel-heading")) parent = parent.parent();
-
-			var checkboxes = parent.find("input[type=checkbox]");
-			if (checked) {
-				checkboxes.prop("checked", true);
-			} else {
-				checkboxes.prop("checked", false);
-				while (!parent.hasClass("tree-panel")) {
-					parent = parent.parent().parent();
-					if (parent.hasClass("tree-container")) parent = parent.parent().parent();
-					parent.find("input[type=checkbox]:first").prop("checked", false);
-				}
-			}
+		$(".tree-container input[type=checkbox]").change(function () {
+			// (Un)Mark all sub-elements when changing a checkbox in the panel body
+			var $this = $(this);
+			var checked = $this.prop("checked");
+			$this.closest('li').find("input[type=checkbox]").prop("checked", checked);
 		});
-
-		$('form').submit(function () {
-			var input = $("#rolename");
-			var name = $.trim(input.val());
-			if (!name) {
-				input.addClass("missingInput");
-				return false;
-			}
+		$("input.master-checkbox").change(function () {
+			// (Un)Mark everything within the panel when the master checkbox on top is clicked
+			var $this = $(this);
+			var checked = $this.prop("checked");
+			$this.closest('.tree-panel').find("input[type=checkbox]").prop("checked", checked);
 		});
 
 		$('[data-toggle="tooltip"]').tooltip({
diff --git a/modules-available/permissionmanager/templates/rolestable.html b/modules-available/permissionmanager/templates/rolestable.html
index b121a9e0..944ab3ae 100644
--- a/modules-available/permissionmanager/templates/rolestable.html
+++ b/modules-available/permissionmanager/templates/rolestable.html
@@ -1,15 +1,8 @@
 <form method="post" action="?do=permissionmanager">
 	<input type="hidden" name="token" value="{{token}}">
 
-	<div class="row">
-		<div class="col-md-4">
-		</div>
-		<div class="col-md-4">
-			<input type="text" class="form-control" id="roleNameSearchField" onkeyup="searchFieldFunction()" placeholder="{{lang_searchPlaceholder}}">
-		</div>
-		<div class="col-md-4 text-right">
-			<a href="?do=permissionmanager&show=roleEditor" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span> {{lang_newRole}}</a>
-		</div>
+	<div>
+		<input type="text" class="form-control" id="roleNameSearchField" onkeyup="searchFieldFunction()" placeholder="{{lang_searchPlaceholder}}">
 	</div>
 
 	<div class="row">
@@ -18,8 +11,8 @@
 				<thead>
 					<tr>
 						<th data-sort="string">{{lang_roles}}</th>
-						<th class="text-center">{{lang_edit}}</th>
-						<th class="text-center">{{lang_delete}}</th>
+						<th class="text-center slx-smallcol">{{lang_edit}}</th>
+						<th class="text-center slx-smallcol">{{lang_delete}}</th>
 					</tr>
 				</thead>
 
@@ -40,7 +33,6 @@
 		</div>
 	</div>
 
-
 	<!-- Modals -->
 	<div class ="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 		<div class="modal-dialog" role="document">
@@ -63,6 +55,10 @@
 
 </form>
 
+<div class="text-right">
+	<a href="?do=permissionmanager&show=roleEditor" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span> {{lang_newRole}}</a>
+</div>
+
 <script>
 	function deleteRole($roleid) {
 		$(".modal-footer #deleteId").val($roleid);
diff --git a/modules-available/permissionmanager/templates/treenode.html b/modules-available/permissionmanager/templates/treenode.html
index 43509237..a4a3d7b5 100644
--- a/modules-available/permissionmanager/templates/treenode.html
+++ b/modules-available/permissionmanager/templates/treenode.html
@@ -1,7 +1,7 @@
 {{#toplevel}}<ul>{{/toplevel}}
-<li title="{{description}}" data-toggle="tooltip" data-placement="left">
+<li {{#description}}title="{{description}}" data-toggle="tooltip" data-placement="left"{{/description}}>
 	<div class='checkbox'>
-		<input id="{{id}}" name="{{checkboxname}}[]" value="{{id}}" type="checkbox" class="form-control" {{#selected}}checked{{/selected}}>
+		<input id="{{id}}" name="{{checkboxname}}[]" value="{{id}}" type="checkbox" {{#selected}}checked{{/selected}}>
 		<label for="{{id}}">
 			{{name}}
 			{{#location-aware}}<span class="glyphicon glyphicon-home text-muted"></span>{{/location-aware}}
diff --git a/modules-available/permissionmanager/templates/treepanel.html b/modules-available/permissionmanager/templates/treepanel.html
index 8b510407..cda848a0 100644
--- a/modules-available/permissionmanager/templates/treepanel.html
+++ b/modules-available/permissionmanager/templates/treepanel.html
@@ -1,7 +1,7 @@
 <div class="panel panel-primary tree-panel">
 	<div class="panel-heading">
 		<div class="checkbox">
-			<input id="{{id}}" name="{{checkboxname}}[]" value="{{id}}" type="checkbox" class="form-control" {{#selected}}checked{{/selected}}>
+			<input id="{{id}}" name="{{checkboxname}}[]" value="{{id}}" type="checkbox" class="master-checkbox" {{#selected}}checked{{/selected}}>
 			<label for="{{id}}">{{name}}</label>
 		</div>
 	</div>
diff --git a/modules-available/permissionmanager/templates/userstable.html b/modules-available/permissionmanager/templates/userstable.html
index bb0e228e..4cda2b1b 100644
--- a/modules-available/permissionmanager/templates/userstable.html
+++ b/modules-available/permissionmanager/templates/userstable.html
@@ -2,40 +2,23 @@
 	<input type="hidden" name="token" value="{{token}}">
 
 	<div class="row">
-		<div class="col-md-4">
-		</div>
-		<div class="col-md-4">
-			<select multiple name="roles[]" id="select-role">
-				<option value>{{lang_selectizePlaceholder}}</option>
-				{{#roles}}
-				<option value="{{roleid}}">{{rolename}}</option>
-				{{/roles}}
-			</select>
-		</div>
-		<div class="col-md-4 text-right">
-			<button class="roleButtons btn btn-success" type="button" data-toggle="modal" data-target="#addRoleToUserModal" disabled><span class="glyphicon glyphicon-share-alt"></span> {{lang_addRole}}</button>
-			<button class="roleButtons btn btn-danger" type="button" data-toggle="modal" data-target="#removeRoleFromUserModal" disabled><span class="glyphicon glyphicon-remove-circle"></span> {{lang_removeRole}}</button>
-		</div>
-	</div>
-
-	<div class="row">
 		<div class="col-md-12">
 			<table id="usersTable" class="table table-condensed table-hover stupidtable dataTable">
 				<thead>
 					<tr>
 						<th data-sort="string">{{lang_users}}</th>
-						<th>{{lang_roles}}</th>
-						<th data-sort="int" data-sort-default="desc">{{lang_selected}}</th>
+						<th class="slx-smallcol">{{lang_roles}}</th>
+						<th class="slx-smallcol" data-sort="int" data-sort-default="desc">{{lang_selected}}</th>
 					</tr>
 				</thead>
 
 				<tbody>
 				{{#user}}
-					<tr data-selectizeCount='0'>
+					<tr class="{{#roles}}roleid-{{roleid}} {{/roles}}">
 						<td>{{username}}</td>
-						<td>
+						<td class="slx-smallcol">
 							{{#roles}}
-							<a href="?do=permissionmanager&show=roleEditor&cancel=users&roleid={{roleid}}" class="label label-default customSpanMargin roleid-{{roleid}}">{{rolename}}</a>
+							<a href="?do=permissionmanager&show=roleEditor&cancel=users&roleid={{roleid}}" class="label label-default customSpanMargin">{{rolename}}</a>
 							{{/roles}}
 						</td>
 						<td data-sort-value="0">
@@ -71,7 +54,7 @@
 								</thead>
 
 								<tbody>
-								{{#roles}}
+								{{#allroles}}
 									<tr>
 										<td>{{rolename}}</td>
 										<td data-sort-value="0">
@@ -81,7 +64,7 @@
 											</div>
 										</td>
 									</tr>
-								{{/roles}}
+								{{/allroles}}
 								</tbody>
 							</table>
 						</div>
@@ -114,7 +97,7 @@
 								</thead>
 
 								<tbody>
-								{{#roles}}
+								{{#allroles}}
 									<tr>
 										<td>{{rolename}}</td>
 										<td data-sort-value="0">
@@ -124,7 +107,7 @@
 											</div>
 										</td>
 									</tr>
-								{{/roles}}
+								{{/allroles}}
 								</tbody>
 							</table>
 						</div>
@@ -139,6 +122,11 @@
 	</div>
 </form>
 
+<div class="text-right">
+	<button class="roleButtons btn btn-success" type="button" data-toggle="modal" data-target="#addRoleToUserModal" disabled><span class="glyphicon glyphicon-share-alt"></span> {{lang_addRole}}</button>
+	<button class="roleButtons btn btn-danger" type="button" data-toggle="modal" data-target="#removeRoleFromUserModal" disabled><span class="glyphicon glyphicon-remove-circle"></span> {{lang_removeRole}}</button>
+</div>
+
 <script>
 	selectedUsersCounter = 0;
 	selectedAddRolesCounter = 0;