From 0ad61c53aeb83085300dbaba7bb0399a89fb5c8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Wed, 31 Aug 2022 14:30:55 -0400
Subject: [PATCH] privileges

---
 public/scss/admin/admin.scss                  |  2 +-
 public/scss/admin/manage/categories.scss      | 20 ----------
 public/scss/admin/manage/privileges.scss      | 36 ++++++++++++++++++
 src/views/admin/manage/privileges.tpl         | 36 +++++++++---------
 .../admin/partials/privileges/category.tpl    | 38 ++++++++++---------
 .../admin/partials/privileges/global.tpl      | 30 ++++++++-------
 6 files changed, 92 insertions(+), 70 deletions(-)
 create mode 100644 public/scss/admin/manage/privileges.scss

diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss
index 8f1900e0f8..5106c22f06 100644
--- a/public/scss/admin/admin.scss
+++ b/public/scss/admin/admin.scss
@@ -8,7 +8,7 @@
 @import "./general/dashboard";
 @import "./general/navigation";
 @import "./manage/categories";
-// @import "./manage/privileges";
+@import "./manage/privileges";
 // @import "./manage/tags";
 // @import "./manage/groups";
 // @import "./manage/registration";
diff --git a/public/scss/admin/manage/categories.scss b/public/scss/admin/manage/categories.scss
index 51da87d4a4..ff0650691e 100644
--- a/public/scss/admin/manage/categories.scss
+++ b/public/scss/admin/manage/categories.scss
@@ -111,25 +111,5 @@ div.categories {
 		tr > th:first-child {
 			min-width: 150px;
 		}
-
-		.privilege-table-header {
-			background: white;
-
-			th {
-				text-align: center;
-				border-top: 0;
-				text-transform: uppercase;
-				font-size: 9px;
-				vertical-align: bottom;
-			}
-
-			.arrowed:after {
-				border-bottom: 1px dashed #ccc;
-				content: "";
-				width: 100%;
-				display: block;
-				padding-top: 5px;
-			}
-		}
 	}
 }
\ No newline at end of file
diff --git a/public/scss/admin/manage/privileges.scss b/public/scss/admin/manage/privileges.scss
new file mode 100644
index 0000000000..84e0571008
--- /dev/null
+++ b/public/scss/admin/manage/privileges.scss
@@ -0,0 +1,36 @@
+.page-admin-privileges {
+	@keyframes fadeOut {
+		0% {background-color: $primary;}
+		100% {background-color: white;}
+	}
+
+	[data-group-name].selected, [data-uid].selected {
+		animation-name: fadeOut;
+		animation-duration: 5s;
+		animation-fill-mode: both;
+		animation-timing-function: ease-out;
+	}
+
+	.privilege-table {
+		td:first-child {
+			white-space: nowrap;
+		}
+
+		td[data-delta="true"] > input {
+			&:after {
+				border-color: $success;
+				background-color: $success;
+			}
+		}
+
+		td[data-delta="false"] > input {
+			&:after {
+				border-color: $danger;
+			}
+
+			&:indeterminate:after {
+				background-color: $danger;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/views/admin/manage/privileges.tpl b/src/views/admin/manage/privileges.tpl
index 3bc1dccc7b..9402c05fee 100644
--- a/src/views/admin/manage/privileges.tpl
+++ b/src/views/admin/manage/privileges.tpl
@@ -1,24 +1,26 @@
 <div class="row">
-	<form role="form" class="category">
-		<div class="">
-			<p>
-				[[admin/manage/categories:privileges.description]]
-			</p>
+	<div class="col-12">
+		<form role="form" class="category">
+			<div class="">
+				<p>
+					[[admin/manage/categories:privileges.description]]
+				</p>
 
-			<div class="lead">
-				[[admin/manage/categories:privileges.category-selector]]
-				<!-- IMPORT partials/category-selector.tpl -->
-			</div>
+				<div class="lead">
+					[[admin/manage/categories:privileges.category-selector]]
+					<!-- IMPORT partials/category-selector.tpl -->
+				</div>
 
-			<div class="privilege-table-container">
-				{{{ if cid }}}
-				<!-- IMPORT admin/partials/privileges/category.tpl -->
-				{{{ else }}}
-				<!-- IMPORT admin/partials/privileges/global.tpl -->
-				{{{ end }}}
+				<div class="privilege-table-container">
+					{{{ if cid }}}
+					<!-- IMPORT admin/partials/privileges/category.tpl -->
+					{{{ else }}}
+					<!-- IMPORT admin/partials/privileges/global.tpl -->
+					{{{ end }}}
+				</div>
 			</div>
-		</div>
-	</form>
+		</form>
+	</div>
 </div>
 
 <div class="floating-button">
diff --git a/src/views/admin/partials/privileges/category.tpl b/src/views/admin/partials/privileges/category.tpl
index 5385c05181..e47a4a739f 100644
--- a/src/views/admin/partials/privileges/category.tpl
+++ b/src/views/admin/partials/privileges/category.tpl
@@ -4,11 +4,11 @@
 							<tr class="privilege-table-header">
 								<th class="privilege-filters btn-toolbar" colspan="100">
 									<!-- IF privileges.columnCountGroupOther -->
-									<button type="button" data-filter="19,99" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-other]]</button>
+									<button type="button" data-filter="19,99" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-other]]</button>
 									<!-- END -->
-									<button type="button" data-filter="16,18" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-moderation]]</button>
-									<button type="button" data-filter="6,15" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-posting]]</button>
-									<button type="button" data-filter="3,5" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-viewing]]</button>
+									<button type="button" data-filter="16,18" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-moderation]]</button>
+									<button type="button" data-filter="6,15" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-posting]]</button>
+									<button type="button" data-filter="3,5" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-viewing]]</button>
 								</th>
 							</tr><tr><!-- zebrastripe reset --></tr>
 							<tr>
@@ -36,7 +36,7 @@
 								</td>
 								<td>
 									<div class="dropdown">
-										<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+										<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 											<i class="fa fa-copy"></i>
 										</button>
 										<ul class="dropdown-menu">
@@ -55,20 +55,20 @@
 							<tr>
 								<td colspan="3"></td>
 								<td colspan="{privileges.keys.groups.length}">
-									<div class="btn-toolbar">
-										<button type="button" class="btn btn-default pull-right" data-ajaxify="false" data-action="search.group">
+									<div class="btn-toolbar justify-content-end">
+										<button type="button" class="btn btn-outline-secondary pull-right" data-ajaxify="false" data-action="search.group">
 											<i class="fa fa-users"></i>
 											[[admin/manage/categories:privileges.search-group]]
 										</button>
-										<button type="button" class="btn btn-default pull-right" data-ajaxify="false" data-action="copyPrivilegesFrom">
+										<button type="button" class="btn btn-outline-secondary pull-right" data-ajaxify="false" data-action="copyPrivilegesFrom">
 											<i class="fa fa-copy"></i>
 											[[admin/manage/categories:privileges.copy-from-category]]
 										</button>
-										<button type="button" class="btn btn-default pull-right" data-ajaxify="false" data-action="copyToChildren">
+										<button type="button" class="btn btn-outline-secondary pull-right" data-ajaxify="false" data-action="copyToChildren">
 											<i class="fa fa-copy"></i>
 											[[admin/manage/categories:privileges.copy-to-children]]
 										</button>
-										<button type="button" class="btn btn-default pull-right" data-ajaxify="false" data-action="copyToAll">
+										<button type="button" class="btn btn-outline-secondary pull-right" data-ajaxify="false" data-action="copyToAll">
 											<i class="fa fa-copy"></i>
 											[[admin/manage/categories:privileges.copy-privileges-to-all-categories]]
 										</button>
@@ -87,11 +87,11 @@
 							<tr class="privilege-table-header">
 								<th class="privilege-filters btn-toolbar" colspan="100">
 									<!-- IF privileges.columnCountUserOther -->
-									<button type="button" data-filter="19,99" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-other]]</button>
+									<button type="button" data-filter="19,99" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-other]]</button>
 									<!-- END -->
-									<button type="button" data-filter="16,18" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-moderation]]</button>
-									<button type="button" data-filter="6,15" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-posting]]</button>
-									<button type="button" data-filter="3,5" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-viewing]]</button>
+									<button type="button" data-filter="16,18" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-moderation]]</button>
+									<button type="button" data-filter="6,15" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-posting]]</button>
+									<button type="button" data-filter="3,5" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-viewing]]</button>
 								</th>
 							</tr><tr><!-- zebrastripe reset --></tr>
 							<tr>
@@ -127,10 +127,12 @@
 							<tr>
 								<td colspan="3"></td>
 								<td colspan="{privileges.keys.users.length}">
-									<button type="button" class="btn btn-default pull-right" data-ajaxify="false" data-action="search.user">
-										<i class="fa fa-user"></i>
-										[[admin/manage/categories:privileges.search-user]]
-									</button>
+									<div class="btn-toolbar justify-content-end"></div>
+										<button type="button" class="btn btn-outline-secondary pull-right" data-ajaxify="false" data-action="search.user">
+											<i class="fa fa-user"></i>
+											[[admin/manage/categories:privileges.search-user]]
+										</button>
+									</td>
 								</td>
 							</tr>
 						</tfoot>
diff --git a/src/views/admin/partials/privileges/global.tpl b/src/views/admin/partials/privileges/global.tpl
index db656ccf18..2196e2f813 100644
--- a/src/views/admin/partials/privileges/global.tpl
+++ b/src/views/admin/partials/privileges/global.tpl
@@ -5,11 +5,11 @@
 							<tr class="privilege-table-header">
 								<th class="privilege-filters btn-toolbar" colspan="100">
 									<!-- IF privileges.columnCountGroupOther -->
-									<button type="button" data-filter="19,99" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-other]]</button>
+									<button type="button" data-filter="19,99" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-other]]</button>
 									<!-- END -->
-									<button type="button" data-filter="16,18" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-moderation]]</button>
-									<button type="button" data-filter="3,8" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-posting]]</button>
-									<button type="button" data-filter="9,15" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-viewing]]</button>
+									<button type="button" data-filter="16,18" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-moderation]]</button>
+									<button type="button" data-filter="3,8" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-posting]]</button>
+									<button type="button" data-filter="9,15" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-viewing]]</button>
 								</th>
 							</tr><tr><!-- zebrastripe reset --></tr>
 							{{{ end }}}
@@ -46,8 +46,8 @@
 							<tr>
 								<td colspan="3"></td>
 								<td colspan="{privileges.keys.groups.length}">
-									<div class="btn-toolbar">
-										<button type="button" class="btn btn-default pull-right" data-ajaxify="false" data-action="search.group">
+									<div class="btn-toolbar justify-content-end">
+										<button type="button" class="btn btn-outline-secondary pull-right" data-ajaxify="false" data-action="search.group">
 											<i class="fa fa-users"></i>
 											[[admin/manage/categories:privileges.search-group]]
 										</button>
@@ -67,11 +67,11 @@
 							<tr class="privilege-table-header">
 								<th class="privilege-filters btn-toolbar" colspan="100">
 									<!-- IF privileges.columnCountUserOther -->
-									<button type="button" data-filter="19,99" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-other]]</button>
+									<button type="button" data-filter="19,99" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-other]]</button>
 									<!-- END -->
-									<button type="button" data-filter="16,18" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-moderation]]</button>
-									<button type="button" data-filter="3,8" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-posting]]</button>
-									<button type="button" data-filter="9,15" class="btn btn-default pull-right">[[admin/manage/categories:privileges.section-viewing]]</button>
+									<button type="button" data-filter="16,18" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-moderation]]</button>
+									<button type="button" data-filter="3,8" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-posting]]</button>
+									<button type="button" data-filter="9,15" class="btn btn-outline-secondary pull-right">[[admin/manage/categories:privileges.section-viewing]]</button>
 								</th>
 							</tr><tr><!-- zebrastripe reset --></tr>
 							{{{ end }}}
@@ -108,10 +108,12 @@
 							<tr>
 								<td colspan="3"></td>
 								<td colspan="{privileges.keys.users.length}">
-									<button type="button" class="btn btn-default pull-right" data-ajaxify="false" data-action="search.user">
-										<i class="fa fa-user"></i>
-										[[admin/manage/categories:privileges.search-user]]
-									</button>
+									<div class="btn-toolbar justify-content-end">
+										<button type="button" class="btn btn-outline-secondary pull-right" data-ajaxify="false" data-action="search.user">
+											<i class="fa fa-user"></i>
+											[[admin/manage/categories:privileges.search-user]]
+										</button>
+									</div>
 								</td>
 							</tr>
 						</tfoot>