nodebb-theme-persona 12.1.4 → 12.1.6

package/templates/partials/flags/filters.tpl

@@ -1,38 +1,38 @@
 <div class="text-center">
-	<div class="panel panel-default">
-		<div class="panel-body collapse" id="flags-daily-wrapper" aria-expanded="false">
+	<div class="card mb-3">
+		<div class="card-body collapse" id="flags-daily-wrapper" aria-expanded="false">
 			<div><canvas id="flags:daily" height="150"></canvas></div>
 		</div>
-		<div class="panel-footer" data-toggle="collapse" data-target="#flags-daily-wrapper" aria-controls="#flags-daily-wrapper"><small>[[flags:graph-label]]</small>&nbsp;<i class="fa fa-sort"></i></div>
+		<div class="card-footer" data-bs-toggle="collapse" data-bs-target="#flags-daily-wrapper" aria-controls="#flags-daily-wrapper"><small>[[flags:graph-label]]</small>&nbsp;<i class="fa fa-sort"></i></div>
 	</div>
 </div>
 
-<div class="panel panel-default">
-	<div class="panel-heading">
-		<h3 class="panel-title">[[flags:quick-filters]]</h3>
+<div class="card mb-3">
+	<div class="card-header">
+		[[flags:quick-filters]]
 	</div>
-	<div class="panel-body">
+	<div class="card-body">
 		<ul>
 			<li><a href="{config.relative_path}/flags?quick=mine">[[flags:filter-quick-mine]]</a></li>
 		</ul>
 	</div>
 </div>
 
-<div class="panel panel-default">
-	<div class="panel-heading">
-		<h3 class="panel-title">[[flags:filters]]</h3>
+<div class="card mb-3">
+	<div class="card-header">
+		[[flags:filters]]
 	</div>
-	<div class="panel-body">
+	<div class="card-body">
 		<form role="form" component="flags/filters">
 			<fieldset>
-				<div class="form-group">
-					<label for="filter-cid">[[flags:filter-cid]]</label>
+				<div class="mb-3">
+					<label class="form-label" for="filter-cid">[[flags:filter-cid]]</label>
 					<div class="input-group">
 					<!-- IMPORT partials/category-filter.tpl -->
 					</div>
 				</div>
-				<div class="form-group">
-					<label for="sort">[[flags:sort]]</label>
+				<div class="mb-3">
+					<label class="form-label" for="sort">[[flags:sort]]</label>
 					<select class="form-control" id="sort" name="sort">
 						<optgroup label="[[flags:sort-all]]">
 							<option value="newest">[[flags:sort-newest]]</option>
@@ -46,8 +46,8 @@
 						</optgroup>
 					</select>
 				</div>
-				<div class="form-group">
-					<label for="filter-state">[[flags:filter-state]]</label>
+				<div class="mb-3">
+					<label class="form-label" for="filter-state">[[flags:filter-state]]</label>
 					<select class="form-control" id="filter-state" name="state">
 						<option value="">[[flags:state-all]]</option>
 						<option value="open">[[flags:state-open]]</option>
@@ -57,8 +57,8 @@
 					</select>
 				</div>
 
-				<div class="form-group">
-					<label for="filter-type">[[flags:filter-type]]</label>
+				<div class="mb-3">
+					<label class="form-label" for="filter-type">[[flags:filter-type]]</label>
 					<select class="form-control" id="filter-type" name="type">
 						<option value="">[[flags:filter-type-all]]</option>
 						<option value="post">[[flags:filter-type-post]]</option>
@@ -67,29 +67,31 @@
 				</div>
 			</fieldset>
 
-			<fieldset class="collapse{{{ if expanded }}} in{{{ end }}}" id="more-filters" aria-expanded="{expanded}">
-				<div class="form-group">
-					<label for="filter-assignee">[[flags:filter-assignee]]</label>
+			<fieldset class="collapse{{{ if expanded }}} show{{{ end }}}" id="more-filters" aria-expanded="{expanded}">
+				<div class="mb-3">
+					<label class="form-label" for="filter-assignee">[[flags:filter-assignee]]</label>
 					<input type="text" class="form-control" id="filter-assignee" name="assignee" />
 				</div>
 
-				<div class="form-group">
-					<label for="filter-targetUid">[[flags:filter-targetUid]]</label>
+				<div class="mb-3">
+					<label class="form-label" for="filter-targetUid">[[flags:filter-targetUid]]</label>
 					<input type="text" class="form-control" id="filter-targetUid" name="targetUid" />
 				</div>
 
-				<div class="form-group">
-					<label for="filter-reporterId">[[flags:filter-reporterId]]</label>
+				<div class="mb-3">
+					<label class="form-label" for="filter-reporterId">[[flags:filter-reporterId]]</label>
 					<input type="text" class="form-control" id="filter-reporterId" name="reporterId" />
 				</div>
 			</fieldset>
 
-			{{{ if expanded }}}
-			<button type="button" class="btn btn-link btn-block" data-toggle="collapse" data-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:more-filters]] ">[[flags:fewer-filters]]&nbsp;<i class="fa fa-sort"></i></button>
-			{{{ else }}}
-			<button type="button" class="btn btn-link btn-block" data-toggle="collapse" data-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:fewer-filters]] ">[[flags:more-filters]]&nbsp;<i class="fa fa-sort"></i></button>
-			{{{ end }}}
-			<button type="button" id="apply-filters" class="btn btn-primary btn-block">[[flags:apply-filters]]</button>
+			<div class="d-grid gap-2">
+				{{{ if expanded }}}
+				<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:more-filters]] ">[[flags:fewer-filters]]&nbsp;<i class="fa fa-sort"></i></button>
+				{{{ else }}}
+				<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:fewer-filters]] ">[[flags:more-filters]]&nbsp;<i class="fa fa-sort"></i></button>
+				{{{ end }}}
+				<button type="button" id="apply-filters" class="btn btn-primary">[[flags:apply-filters]]</button>
+			  </div>
 		</form>
 	</div>
 </div>

package/templates/partials/groups/admin.tpl

@@ -0,0 +1,195 @@
+<div class="card mb-3">
+	<div class="card-header">
+		<div class="fs-5">
+			<i class="fa fa-clock-o"></i> [[groups:details.pending]]
+			<!-- IF group.pending.length -->
+			<div class="btn-group float-end">
+				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+					[[global:more]] <span class="caret"></span>
+				</button>
+				<ul class="dropdown-menu" role="menu">
+					<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="acceptAll">[[groups:pending.accept_all]]</a></li>
+					<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="rejectAll">[[groups:pending.reject_all]]</a></li>
+				</ul>
+			</div>
+			<!-- ENDIF group.pending.length -->
+		</div>
+	</div>
+	<div class="card-body">
+		<table component="groups/pending" class="table table-striped table-hover">
+			<!-- IF !group.pending.length -->
+			<div class="alert alert-info">[[groups:pending.none]]</div>
+			<!-- ENDIF !group.pending.length -->
+			{{{each group.pending}}}
+			<tr data-uid="{group.pending.uid}">
+				<td class="p-2">
+					<a href="{config.relative_path}/user/{group.pending.userslug}">{buildAvatar(group.pending, "24px", true)}</a>
+				</td>
+				<td class="member-name p-2">
+					<a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a>
+				</td>
+				<td class="p-2">
+					<div class="btn-group float-end">
+						<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+							[[global:more]] <span class="caret"></span>
+						</button>
+						<ul class="dropdown-menu" role="menu">
+							<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="accept">[[groups:pending.accept]]</a></li>
+							<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="reject">[[groups:pending.reject]]</a></li>
+						</ul>
+					</div>
+				</td>
+			</tr>
+			{{{end}}}
+		</table>
+	</div>
+</div>
+<div class="card mb-3">
+	<div class="card-header">
+		<span class="fs-5">
+			<i class="fa fa-gift"></i> [[groups:details.invited]]
+		</span>
+	</div>
+	<div class="card-body">
+		<div class="input-group mb-2">
+			<input class="form-control" type="text" component="groups/members/invite" placeholder="[[groups:invited.search]]"/>
+			<span class="input-group-text search-button"><i class="fa fa-search"></i></span>
+		</div>
+
+		<div class="mb-2">
+			<textarea class="form-control" component="groups/members/bulk-invite" placeholder="[[groups:bulk-invite-instructions]]"></textarea>
+		</div>
+
+		<div class="mb-2 clearfix">
+			<button class="btn btn-outline-secondary btn-sm float-end" component="groups/members/bulk-invite-button">[[groups:bulk-invite]]</button>
+		</div>
+
+		<table component="groups/invited" class="table table-striped table-hover">
+			<!-- IF !group.invited.length -->
+			<div class="alert alert-info">[[groups:invited.none]]</div>
+			<!-- ENDIF !group.invited.length -->
+			{{{each group.invited}}}
+			<tr data-uid="{group.invited.uid}">
+				<td class="p-2">
+					<a href="{config.relative_path}/user/{group.invited.userslug}">{buildAvatar(group.invited, "24px", true)}</a>
+				</td>
+				<td class="member-name p-2">
+					<a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a>
+				</td>
+				<td class="p-2">
+					<div class="btn-group float-end">
+						<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+							[[global:more]] <span class="caret"></span>
+						</button>
+						<ul class="dropdown-menu" role="menu">
+							<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="rescindInvite">[[groups:invited.uninvite]]</a></li>
+						</ul>
+					</div>
+				</td>
+			</tr>
+			{{{end}}}
+		</table>
+	</div>
+</div>
+
+<div class="card mb-3">
+	<div class="card-header pointer" data-bs-toggle="collapse" data-bs-target=".options">
+		<span class="fs-5">
+			<i class="fa fa-caret-down float-end"></i>
+			<i class="fa fa-cogs"></i> [[groups:details.owner_options]]
+		</span>
+	</div>
+
+	<div class="card-body options collapse">
+		<form component="groups/settings" role="form">
+			<div class="mb-3">
+				<label class="form-label" for="name">[[groups:details.group_name]]</label>
+				<input <!-- IF group.system -->readonly<!-- ENDIF group.system --> class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
+			</div>
+			<div class="mb-3">
+				<label class="form-label" for="name">[[groups:details.description]]</label>
+				<textarea class="form-control" name="description" id="description" type="text" maxlength="255">{group.description}</textarea>
+			</div>
+
+			<hr />
+			<div class="mb-3">
+				<label class="form-label" for="memberPostCids">[[groups:details.member-post-cids]]</label>
+				<div class="row">
+					<div class="col-md-6">
+						<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
+					</div>
+					<div class="col-md-6 member-post-cids-selector">
+						<!-- IMPORT partials/category-selector.tpl -->
+					</div>
+				</div>
+			</div>
+
+			<hr />
+
+			<div class="mb-3 user-title-option">
+				<label class="form-label" for="userTitle">[[groups:details.badge_text]]</label>
+				<input component="groups/userTitleOption" class="form-control" name="userTitle" id="userTitle" type="text" maxlength="40" value="{group.userTitleEscaped}"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled --> />
+			</div>
+
+			<div class="mb-3 user-title-option">
+				<label>[[groups:details.badge_preview]]</label><br />
+				<span class="badge rounded-1 text-uppercase text-truncate rounded-1 {{{ if !group.userTitleEnabled }}} hide{{{ end }}}" style="max-width:150px; color: {group.textColor}; background-color: {group.labelColor}"><i class="fa{{{ if group.icon }}} {group.icon}{{{ end }}}"></i> <span class="badge-text">{{{ if group.userTitle }}}{group.userTitle}{{{ else }}}{group.displayName}{{{ end }}}</span></span>
+
+				<hr/>
+				<button component="groups/userTitleOption" type="button" class="btn btn-outline-secondary btn-sm" data-action="icon-select"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled -->>[[groups:details.change_icon]]</button>
+				<div>
+					<label class="form-label" for="labelColor" class="badge-color-label">[[groups:details.change_label_colour]]</label>
+					<input component="groups/userTitleOption" type="color" name="labelColor" value="<!-- IF group.labelColor -->{group.labelColor}<!-- ENDIF group.labelColor -->" />
+				</div>
+				<div>
+					<label class="form-label" for="color" class="badge-color-label">[[groups:details.change_text_colour]]</label>
+					<input component="groups/userTitleOption" type="color" name="textColor" value="<!-- IF group.textColor -->{group.textColor}<!-- ENDIF group.textColor -->" />
+				</div>
+				<input type="hidden" name="icon" value="<!-- IF group.icon -->{group.icon}<!-- ENDIF group.icon -->" />
+
+				<div id="icons" class="hidden">
+					<div class="icon-container">
+						<div class="row nbb-fa-icons">
+							<!-- IMPORT partials/fontawesome.tpl -->
+						</div>
+					</div>
+				</div>
+			</div>
+			<hr />
+			<div class="form-check">
+				<label class="form-check-label">[[groups:details.userTitleEnabled]]</label>
+				<input class="form-check-input" name="userTitleEnabled" type="checkbox"<!-- IF group.userTitleEnabled --> checked<!-- ENDIF group.userTitleEnabled -->>
+			</div>
+			<div class="form-check">
+				<label class="form-check-label">[[groups:details.private]]</label>
+				<input class="form-check-input" name="private" type="checkbox"<!-- IF group.private --> checked<!-- ENDIF group.private -->>
+				<!-- IF !allowPrivateGroups -->
+				<p class="form-text">
+					[[groups:details.private_system_help]]
+				</p>
+				<!-- ENDIF !allowPrivateGroups -->
+				<p class="form-text">
+					[[groups:details.private_help]]
+				</p>
+			</div>
+			<div class="form-check">
+				<label class="form-check-label">[[groups:details.disableJoinRequests]]</label>
+				<input class="form-check-input" name="disableJoinRequests" type="checkbox"<!-- IF group.disableJoinRequests --> checked<!-- ENDIF group.disableJoinRequests -->>
+			</div>
+			<div class="form-check">
+				<label class="form-check-label">[[groups:details.disableLeave]]</label>
+				<input class="form-check-input" name="disableLeave" type="checkbox"{{{if group.disableLeave}}} checked{{{end}}}>
+			</div>
+			<div class="form-check">
+				<label class="form-check-label">[[groups:details.hidden]]</label>
+				<input class="form-check-input" name="hidden" type="checkbox"<!-- IF group.hidden --> checked<!-- ENDIF group.hidden -->>
+				<p class="form-text">
+					[[groups:details.hidden_help]]
+				</p>
+			</div>
+
+			<button class="btn btn-link text-danger float-end" type="button" data-action="delete">[[groups:details.delete_group]]</button>
+			<button class="btn btn-primary" type="button" data-action="update">[[global:save_changes]]</button>
+		</form>
+	</div>
+</div>

package/templates/partials/groups/badge.tpl

@@ -0,0 +1 @@
+<a class="lh-1" href="{config.relative_path}/groups/{./slug}"><small class="badge rounded-1 text-uppercase text-truncate" style="max-width: 150px;color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if ./icon }}}{./icon} me-1{{{else}}}hidden{{{ end }}}"></i><span class="badge-text">{{{ if ./userTitle }}}{./userTitle}{{{ else }}}{./displayName}{{{ end }}}</span></small></a>

package/templates/partials/groups/list.tpl

@@ -1,14 +1,14 @@
 	{{{each groups}}}
-	<div class="col-lg-4 col-md-6 col-sm-12" component="groups/summary" data-slug="{groups.slug}">
-		<div class="panel panel-default">
-			<a href="{config.relative_path}/groups/{groups.slug}" class="panel-heading list-cover" style="<!-- IF groups.cover:thumb:url -->background-image: url({groups.cover:thumb:url});<!-- ENDIF groups.cover:thumb:url -->">
-				<h3 class="panel-title">{groups.displayName} <small>{groups.memberCount}</small></h3>
+	<div class="col-lg-4 col-md-6 col-sm-12 mb-3" component="groups/summary" data-slug="{groups.slug}">
+		<div class="card h-100">
+			<a href="{config.relative_path}/groups/{groups.slug}" class="card-header list-cover" style="<!-- IF groups.cover:thumb:url -->background-image: url({groups.cover:thumb:url});<!-- ENDIF groups.cover:thumb:url -->">
+				<h5 class="card-title">{groups.displayName} <small>{groups.memberCount}</small></h5>
 			</a>
-			<div class="panel-body">
+			<div class="card-body">
 				<ul class="members">
 					{{{each groups.members}}}
 					<li>
-						<a href="{config.relative_path}/user/{groups.members.userslug}">{buildAvatar(groups.members, "sm", true)}</a>
+						<a href="{config.relative_path}/user/{groups.members.userslug}">{buildAvatar(groups.members, "24px", true)}</a>
 					</li>
 					{{{end}}}
 					<!-- IF groups.truncated -->

package/templates/partials/groups/memberlist.tpl

@@ -1,13 +1,13 @@
-<div class="row">
+<div class="d-flex mb-3">
 	<!-- IF group.isOwner -->
-	<div class="col-lg-2">
-		<button component="groups/members/add" type="button" class="btn btn-primary" title="[[groups:details.add-member]]"><i class="fa fa-user-plus"></i></button>
+	<div class="flex-shrink-0">
+		<button component="groups/members/add" type="button" class="btn btn-primary me-3" title="[[groups:details.add-member]]"><i class="fa fa-user-plus"></i></button>
 	</div>
 	<!-- ENDIF group.isOwner -->
-	<div class="<!-- IF group.isOwner -->col-lg-10<!-- ELSE -->col-lg-12<!-- ENDIF group.isOwner -->">
+	<div class="flex-grow-1">
 		<div class="input-group">
 			<input class="form-control" type="text" component="groups/members/search" placeholder="[[global:search]]"/>
-			<span class="input-group-addon search-button"><i class="fa fa-search"></i></span>
+			<span class="input-group-text search-button"><i class="fa fa-search"></i></span>
 		</div>
 	</div>
 </div>
@@ -16,14 +16,15 @@
 	<tbody>
 	{{{each group.members}}}
 	<tr data-uid="{group.members.uid}">
-		<td>
-			<a href="{config.relative_path}/user/{group.members.userslug}">{buildAvatar(group.members, "sm", true)}</a>
+		<td class="p-2">
+			<a href="{config.relative_path}/user/{group.members.userslug}">{buildAvatar(group.members, "24px", true)}</a>
 		</td>
-		<td class="member-name">
-			<a href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a> <i title="[[groups:owner]]" class="fa fa-star text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
+		<td class="member-name p-2">
+			<a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
+			<i title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
 
 			<!-- IF group.isOwner -->
-			<div class="owner-controls btn-group pull-right">
+			<div class="owner-controls btn-group float-end">
 				<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="toggleOwnership" title="[[groups:details.grant]]">
 					<i class="fa fa-star"></i>
 				</a>