From f1597622ea0b259de3d34e4a3a32575298f09f7e Mon Sep 17 00:00:00 2001
From: rubenwardy <rw@rubenwardy.com>
Date: Thu, 22 Jul 2021 11:38:20 +0100
Subject: [PATCH] Add approval state labels to screenshots and package tiles

---
 app/scss/packages.scss                    | 7 +++++++
 app/templates/base.html                   | 2 +-
 app/templates/macros/packagegridtile.html | 5 +++++
 app/templates/packages/screenshots.html   | 9 +++++++--
 app/templates/packages/view.html          | 3 ++-
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/scss/packages.scss b/app/scss/packages.scss
index e87f4a61..9892850f 100644
--- a/app/scss/packages.scss
+++ b/app/scss/packages.scss
@@ -27,6 +27,13 @@
 	}
 }
 
+.badge-tr {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	color: #ccc !important;;
+}
+
 .screenshot-add {
 	display: block !important;
 	width: 200px;
diff --git a/app/templates/base.html b/app/templates/base.html
index be9c03b1..000c54ce 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
 	<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=27">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=28">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 	<link rel="shortcut icon" href="/favicon-16.png" sizes="16x16">
 	<link rel="icon" href="/favicon-128.png" sizes="128x128">
diff --git a/app/templates/macros/packagegridtile.html b/app/templates/macros/packagegridtile.html
index 725f8ccb..00306c57 100644
--- a/app/templates/macros/packagegridtile.html
+++ b/app/templates/macros/packagegridtile.html
@@ -9,6 +9,11 @@
 				{% if show_author %}<br />
 					<small>{{ package.author.display_name }}</small>
 				{% endif %}
+				{% if not package.approved %}
+					<span class="badge ml-1 {% if package.state == package.state.CHANGES_NEEDED %}bg-danger{% else %}bg-warning{% endif %}">
+						{{ package.state.value }}
+					</span>
+				{% endif %}
 			</h3>
 
 			<p>
diff --git a/app/templates/packages/screenshots.html b/app/templates/packages/screenshots.html
index 645f9ca5..906a7ab3 100644
--- a/app/templates/packages/screenshots.html
+++ b/app/templates/packages/screenshots.html
@@ -30,9 +30,14 @@
 							<img class="img-fluid" style="max-height: 64px;"
 									src="{{ ss.getThumbnailURL() }}" alt="{{ ss.title }}" />
 						</div>
-						<span class="col">
+						<div class="col">
 							{{ ss.title }}
-						</span>
+							{% if not ss.approved %}
+								<div class="text-muted">
+									Awaiting review
+								</div>
+							{%  endif %}
+						</div>
 						<form action="{{ ss.getDeleteURL() }}" method="POST" class="col-auto text-right" role="form">
 							<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 							<a class="btn btn-sm btn-primary" href="{{ ss.getEditURL() }}">
diff --git a/app/templates/packages/view.html b/app/templates/packages/view.html
index 6acee386..b3d5c11e 100644
--- a/app/templates/packages/view.html
+++ b/app/templates/packages/view.html
@@ -219,8 +219,9 @@
 						{% for ss in screenshots %}
 							{% if ss.approved or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
 								<li>
-									<a href="{{ ss.url }}">
+									<a href="{{ ss.url }}" class="position-relative">
 										<img src="{{ ss.getThumbnailURL() }}" alt="{{ ss.title }}" />
+										<span class="badge bg-dark badge-tr">{{ _("Awaiting review") }}</span>
 									</a>
 								</li>
 							{% endif %}