From fec7a9eb4714feea0f07c91a8e151a954625abe6 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Tue, 29 Nov 2016 22:11:26 -0500
Subject: [PATCH] WIP theme stuff for nodebb/nodebb#5232

---
 less/flags.less                            | 15 +++++++
 less/persona.less                          |  1 +
 templates/flags/detail.tpl                 | 47 ++++++++++++++++++++++
 templates/flags/list.tpl                   | 47 ++++++++++++++++++++++
 templates/partials/flags/quick-filters.tpl |  9 +++++
 5 files changed, 119 insertions(+)
 create mode 100644 less/flags.less
 create mode 100644 templates/flags/detail.tpl
 create mode 100644 templates/flags/list.tpl
 create mode 100644 templates/partials/flags/quick-filters.tpl

diff --git a/less/flags.less b/less/flags.less
new file mode 100644
index 0000000..f84218a
--- /dev/null
+++ b/less/flags.less
@@ -0,0 +1,15 @@
+.page-flags {
+    [component="flags/list"] {
+        td {
+            max-width: 300px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        [component="flags/list/description"] {
+            font-style: italic;
+            color: @gray-light;
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/persona.less b/less/persona.less
index 77e5f09..b03543c 100644
--- a/less/persona.less
+++ b/less/persona.less
@@ -17,6 +17,7 @@
 @import "footer";
 @import "posts_list";
 @import "register";
+@import "flags";
 
 @import "mobile";
 
diff --git a/templates/flags/detail.tpl b/templates/flags/detail.tpl
new file mode 100644
index 0000000..56f0d43
--- /dev/null
+++ b/templates/flags/detail.tpl
@@ -0,0 +1,47 @@
+<div class="row">
+	<div class="col-sm-4 col-md-3">
+		<!-- IMPORT partials/flags/quick-filters.tpl -->
+	</div>
+	<div class="col-sm-6 col-md-9">
+		<h2>
+			{target_readable}
+			<small><span class="timeago" title="{datetimeISO}"></span></small>
+		</h2>
+
+		<hr />
+
+		<div class="media">
+			<div class="media-left">
+				<a href="#">
+					<!-- IF target.user.picture -->
+					<img class="media-object avatar avatar-md" src="{target.user.picture}" alt="{target.user.username}" />
+					<!-- ELSE -->
+					<div class="media-object avatar avatar-md" style="background-color: {target.user.icon:bgColor}">{target.user.icon:text}</div>
+					<!-- ENDIF target.user.picture -->
+				</a>
+			</div>
+			<div class="media-body">
+				<h4 class="media-heading"><a href="{config.relative_path}/user/{target.user.userslug}">{target.user.username}</a></h4>
+				{target.content}
+			</div>
+		</div>
+
+		<hr />
+
+		<div class="row">
+			<div class="col-sm-6">
+				<form role="form">
+					<div class="form-group">
+						<label for="state">[[flags:state]]</label>
+						<select class="form-control" name="state">
+							<option value="open">[[flags:state-open]]</option>
+							<option value="wip">[[flags:state-wip]]</option>
+							<option value="resolved">[[flags:state-resolved]]</option>
+							<option value="rejected">[[flags:state-rejected]]</option>
+						</select>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/templates/flags/list.tpl b/templates/flags/list.tpl
new file mode 100644
index 0000000..953c420
--- /dev/null
+++ b/templates/flags/list.tpl
@@ -0,0 +1,47 @@
+<div class="row">
+	<div class="col-sm-4 col-md-3">
+		<!-- IMPORT partials/flags/quick-filters.tpl -->
+	</div>
+	<div class="col-sm-6 col-md-9">
+		<table class="table table-striped table-hover" component="flags/list">
+			<thead>
+				<tr>
+					<th>[[flags:state]]</th>
+					<th></th>
+					<th><span class="hidden-xs">[[flags:reporter]] </span><i class="fa fa-user-plus"></i></th>
+					<th><span class="hidden-xs">[[flags:reported-at]] </span><i class="fa fa-clock-o"></i></th>
+				</tr>
+			</thead>
+			<tbody>
+				<!-- IF !flags.length -->
+				<tr>
+					<td colspan="4">
+						<div class="alert alert-success text-center">
+							[[flags:no-flags]]
+						</div>
+					</td>
+				</tr>
+				<!-- ENDIF !flags.length -->
+				<!-- BEGIN flags -->
+				<tr data-flag-id="{../flagId}">
+					<td><span class="label label-{../labelClass}">{../state}</span></td>
+					<td>
+						<a href="{config.relative_path}/flags/{../flagId}">
+							<strong>{../target_readable}</strong> &mdash; <span component="flags/list/description">{../description}</span>
+						</a>
+					</td>
+					<td>
+						<!-- IF ../reporter.picture -->
+						<img class="avatar avatar-sm" src="{../reporter.picture}" />
+						<!-- ELSE -->
+						<div class="avatar avatar-sm" style="background-color: {../reporter.icon:bgColor};">{../reporter.icon:text}</div>
+						<!-- ENDIF ../reporter.picture -->
+						{../reporter.username}
+					</td>
+					<td><span class="timeago" title="{../datetimeISO}"></span></td>
+				</tr>
+				<!-- END flags -->
+			</tbody>
+		</table>
+	</div>
+</div>
diff --git a/templates/partials/flags/quick-filters.tpl b/templates/partials/flags/quick-filters.tpl
new file mode 100644
index 0000000..d9d6f2b
--- /dev/null
+++ b/templates/partials/flags/quick-filters.tpl
@@ -0,0 +1,9 @@
+<div class="panel panel-default">
+	<div class="panel-heading">
+		<h3 class="panel-title">[[flags:quick-filters]]</h3>
+	</div>
+	<ul>
+		<li>foo</li>
+		<li>bar</li>
+	</ul>
+</div>
\ No newline at end of file