phpbb · DavidIQ · May 19, 2020 · May 15, 2020 · May 15, 2020 · May 16, 2020
diff --git a/config/services.yml b/config/services.yml
@@ -81,6 +81,11 @@ services:
             - '@controller.helper'
             - '@user_loader'
 
+    phpbb.ideas.twig.extension.ideas_status_icon:
+        class: phpbb\ideas\template\twig\extension\ideas_status_icon
+        tags:
+            - { name: twig.extension }
+
 # ----- Cron tasks -----
     phpbb.ideas.cron.task.prune_orphaned_ideas:
         class: phpbb\ideas\cron\prune_orphaned_ideas

diff --git a/language/en/common.php b/language/en/common.php
@@ -84,14 +84,14 @@
 	'TITLE_TOO_SHORT'		=> 'You must specify a subject when posting a new idea.',
 	'TOP'                   => 'Top',
 	'TOP_IDEAS'				=> 'Top Ideas',
-	'TOTAL_IDEAS'			=> array(
+	'TOTAL_IDEAS'			=> [
 		1	=> '%d idea',
 		2	=> '%d ideas',
-	),
-	'TOTAL_POINTS'			=> array(
+	],
+	'TOTAL_POINTS'			=> [
 		1	=> '%s point.',
 		2	=> '%s points.',
-	),
+	],
 
 	'UPDATED_VOTE'			=> 'Successfully updated vote!',
 

diff --git a/styles/prosilver/template/idea_body.html b/styles/prosilver/template/idea_body.html
@@ -47,17 +47,30 @@
 				</div>
 			</dd>
 			<dt class="idealabel">{{ lang('STATUS') ~ lang('COLON') }}</dt>
-			<dd>
-				<a href="{{ IDEA_STATUS_LINK }}" class="status-badge status-{{ IDEA_STATUS_ID }}">{{ IDEA_STATUS_NAME }}</a>
-				{% if STATUS_ARY %}&nbsp; <select id="status" data-url="{{ U_CHANGE_STATUS }}">
-					<option value="0">{{ lang('CHANGE_STATUS') }}</option>
-					{% for status, id in STATUS_ARY %}<option value="{{ id }}">{{ lang(status) }}</option>{% endfor %}
-				</select>{% endif %}
+			<dd class="status-dropdown-container dropdown-container">
+				<span class="status-badge status-{{ IDEA_STATUS_ID }}">
+					<a href="{{ IDEA_STATUS_LINK }}" id="status-link"><i class="icon fa-fw {{ ideas_status_icon(IDEA_STATUS_ID) }}"></i>{{ IDEA_STATUS_NAME }}</a>
+					{% if STATUS_ARY %}
+						<a href="#" class="dropdown-trigger"><i class="icon fa-fw fa-caret-down"></i></a>
+					{% endif %}
+				</span>
+				{% if STATUS_ARY %}
+					<div class="status-dropdown dropdown">
+						<div class="pointer"><div class="pointer-inner"></div></div>
+						<ul class="dropdown-contents">
+							{% for status, id in STATUS_ARY %}
+								<li>
+									<a href="{{ U_CHANGE_STATUS }}" data-status="{{ id }}" class="change-status"><i class="icon fa-fw {{ ideas_status_icon(id) }}"></i>{{ lang(status) }}</a>
+								</li>
+							{% endfor %}
+						</ul>
+					</div>
+				{% endif %}
 			</dd>
 			{% if IDEA_RFC %}
 				<dt class="idealabel">{{ lang('RFC') ~ lang('COLON') }}</dt>
 				<dd>
-					<a id="rfclink" class="ideamodbtn" href="{{ IDEA_RFC }}"{% if not IDEA_RFC %} style="display:none"{% endif %}>{{ IDEA_RFC }}</a>
+					<a id="rfclink" href="{{ IDEA_RFC }}"{% if not IDEA_RFC %} style="display:none"{% endif %}>{{ IDEA_RFC }}</a>
 					{% if S_CAN_EDIT %}
 						<a href="{{ U_EDIT_RFC }}" id="rfcedit" data-l-add="{{ lang('ADD') }}" data-l-edit="{{ lang('EDIT') }}">{% if IDEA_RFC %}<i class="icon fa-fw fa-pencil"></i>{{ lang('EDIT') }}{% else %}<i class="icon fa-fw fa-plus-circle"></i>{{ lang('ADD') }}{% endif %}</a>
 						<input type="text" id="rfceditinput" class="ideainput" value="{{ IDEA_RFC }}" data-l-err="{{ lang('ERROR') }}" data-l-msg="{{ lang('RFC_ERROR') }}" />
@@ -67,7 +80,7 @@
 			{% if IDEA_TICKET or S_CAN_EDIT %}
 				<dt class="idealabel">{{ lang('TICKET') ~ lang('COLON') }}</dt>
 				<dd>
-					<a id="ticketlink" class="ideamodbtn" {% if IDEA_TICKET %}href="https://tracker.phpbb.com/browse/PHPBB3-{{ IDEA_TICKET }}">PHPBB3-{{ IDEA_TICKET }}{% else %}style="display:none">{% endif %}</a>
+					<a id="ticketlink" {% if IDEA_TICKET %}href="https://tracker.phpbb.com/browse/PHPBB3-{{ IDEA_TICKET }}">PHPBB3-{{ IDEA_TICKET }}{% else %}style="display:none">{% endif %}</a>
 					{% if S_CAN_EDIT %}
 						<a href="{{ U_EDIT_TICKET }}" id="ticketedit" data-l-add="{{ lang('ADD') }}" data-l-edit="{{ lang('EDIT') }}">{% if IDEA_TICKET %}<i class="icon fa-fw fa-pencil"></i>{{ lang('EDIT') }}{% else %}<i class="icon fa-fw fa-plus-circle"></i>{{ lang('ADD') }}{% endif %}</a>
 						<input type="text" id="ticketeditinput" class="ideainput"{% if IDEA_TICKET %} value="PHPBB3-{{ IDEA_TICKET }}"{% endif %} placeholder="PHPBB3-#####" data-l-err="{{ lang('ERROR') }}" data-l-msg="{{ lang('TICKET_ERROR') }}" />
@@ -77,7 +90,7 @@
 			{% if IDEA_DUPLICATE or S_IS_MOD %}
 				<dt class="duplicatetoggle idealabel"{% if IDEA_STATUS_ID != STATUS_ARY.DUPLICATE %} style="display:none"{% endif %}>{{ lang('DUPLICATE') ~ lang('COLON') }}</dt>
 				<dd class="duplicatetoggle" {% if IDEA_STATUS_ID != STATUS_ARY.DUPLICATE %}style="display:none"{% endif %}>
-					<a id="duplicatelink" class="ideamodbtn" data-link="{{ U_IDEA_DUPLICATE }}" data-l-msg="{{ lang('IDEA_NUM') }}" {% if IDEA_DUPLICATE %}href="{{ U_IDEA_DUPLICATE }}">{{ lang('IDEA_NUM') ~ IDEA_DUPLICATE }}{% else %}style="display:none">{% endif %}</a>
+					<a id="duplicatelink" data-link="{{ U_IDEA_DUPLICATE }}" data-l-msg="{{ lang('IDEA_NUM') }}" {% if IDEA_DUPLICATE %}href="{{ U_IDEA_DUPLICATE }}">{{ lang('IDEA_NUM') ~ IDEA_DUPLICATE }}{% else %}style="display:none">{% endif %}</a>
 					{% if S_IS_MOD %}
 						<a href="{{ U_EDIT_DUPLICATE }}" id="duplicateedit" data-l-add="{{ lang('ADD') }}" data-l-edit="{{ lang('EDIT') }}">{% if IDEA_DUPLICATE %}<i class="icon fa-fw fa-pencil"></i>{{ lang('EDIT') }}{% else %}<i class="icon fa-fw fa-plus-circle"></i>{{ lang('ADD') }}{% endif %}</a>
 						<input type="text" id="duplicateeditinput" class="ideainput"{% if IDEA_DUPLICATE %} value="{{ IDEA_DUPLICATE }}"{% endif %} placeholder="###" data-l-err="{{ lang('ERROR') }}" data-l-msg="{{ lang('TICKET_ERROR_DUP') }}" />

diff --git a/styles/prosilver/template/ideas.js b/styles/prosilver/template/ideas.js
@@ -24,7 +24,8 @@
 			implementedVersion: $('#implementedversion'),
 			implementedToggle: $('.implementedtoggle'),
 			removeVote: $('.removevote'),
-			status: $('#status'),
+			status: $('.change-status'),
+			statusLink: $('#status-link'),
 			successVoted: $('.successvoted'),
 			userVoted: $('.user-voted'),
 			votes: $('.votes'),
@@ -110,34 +111,33 @@
 		}).fail(voteFailure).always(hideLoadingIndicator);
 	});
 
-	$obj.status.on('change', function() {
+	$obj.status.on('click', function(e) {
+		e.preventDefault();
+
 		var $this = $(this),
 			data = {
-				mode: 'status',
-				status: $this.val()
+				status: $this.attr('data-status')
 			};
 
 		if (!data.status) {
 			return;
 		}
 
 		showLoadingIndicator();
-		$.get($this.attr('data-url'), data, function(res) {
+		$.get($this.attr('href'), data, function(res) {
 			if (res) {
-				var anchor = $this.prev('a'),
-					href = anchor.attr('href');
-
-				href = href.replace(/status=\d/, 'status=' + data.status);
+				var href = $obj.statusLink.attr('href').replace(/status=\d/, 'status=' + data.status);
 
-				anchor.attr('href', href)
-					.text($this.find(':selected').text())
+				$obj.statusLink.attr('href', href)
+					.html($this.html())
+					.closest('span')
 					.removeClass()
-					.addClass('status-badge status-' + $this.find(':selected').val());
+					.addClass('status-badge status-' + data.status);
 
-				$obj.duplicateToggle.toggle(idea_is_duplicate());
-				$obj.implementedToggle.toggle(idea_is_implemented());
+				$obj.duplicateToggle.toggle(data.status === '4');
+				$obj.implementedToggle.toggle(data.status === '3');
 			}
-		}).always(hideLoadingIndicator);
+		}).always([hideLoadingIndicator, hideStatusDropDown]);
 	});
 
 	$obj.rfcEdit.on('click', function(e) {
@@ -360,20 +360,8 @@
 		})).show();
 	};
 
-	/**
-	 * Returns true if idea is a duplicate. Bit hacky.
-	 */
-	function idea_is_duplicate() {
-		var href = $obj.status.prev('a').attr('href');
-		return href && href.indexOf('status=4') !== -1;
-	}
-
-	/**
-	 * Returns true if idea is implemented. Bit hacky.
-	 */
-	function idea_is_implemented() {
-		var href = $obj.status.prev('a').attr('href');
-		return href && href.indexOf('status=3') !== -1;
+	function hideStatusDropDown() {
+		$('.status-dropdown').hide();
 	}
 
 	function displayVoters(data) {

diff --git a/styles/prosilver/theme/ideas.css b/styles/prosilver/theme/ideas.css
@@ -5,10 +5,6 @@ dd.topics {
 	padding-left: 10px !important;
 }
 
-.ideamodbtn {
-	margin: 0 5px 0 0;
-}
-
 .fa-lightbulb-o {
 	font-weight: 400 !important;
 }
@@ -176,13 +172,26 @@ dd.topics {
 .status-badge {
 	border-radius: 3px;
 	color: #ffffff;
+	display: inline-block;
 	padding: 3px 6px;
 }
 
-.status-badge:hover {
+.status-badge a {
+	color: #ffffff;
+}
+
+.status-badge a:hover {
 	color: #ffffff;
 }
 
+.status-dropdown-container {
+	overflow: visible !important;
+}
+
+.status-dropdown {
+	margin-top: 8px;
+}
+
 .status-1 {
 	background-color: #6495ed;
 }

diff --git a/template/twig/extension/ideas_status_icon.php b/template/twig/extension/ideas_status_icon.php
@@ -0,0 +1,58 @@
+<?php
+/**
+ *
+ * This file is part of the phpBB Forum Software package.
+ *
+ * @copyright (c) phpBB Limited <https://www.phpbb.com>
+ * @license GNU General Public License, version 2 (GPL-2.0)
+ *
+ * For full copyright and license information, please see
+ * the docs/CREDITS.txt file.
+ *
+ */
+
+namespace phpbb\ideas\template\twig\extension;
+
+class ideas_status_icon extends \Twig_Extension
+{
+	/**
+	 * Get the name of this extension
+	 *
+	 * @return string
+	 */
+	public function getName()
+	{
+		return 'ideas_status_icon';
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function getFunctions()
+	{
+		return [
+			new \Twig_SimpleFunction('ideas_status_icon', [$this, 'get_status_icon']),
+		];
+	}
+
+	/**
+	 * Generate a Font Awesome icon class name given an integer input
+	 * representing one of the Ideas Statuses.
+	 *
+	 * @return string Status class name or empty string if no match found.
+	 */
+	public function get_status_icon()
+	{
+		$args = func_get_args();
+
+		$icons = [
+			\phpbb\ideas\factory\ideas::$statuses['NEW']         => 'fa-lightbulb-o',
+			\phpbb\ideas\factory\ideas::$statuses['IN_PROGRESS'] => 'fa-code-fork',
+			\phpbb\ideas\factory\ideas::$statuses['IMPLEMENTED'] => 'fa-check',
+			\phpbb\ideas\factory\ideas::$statuses['DUPLICATE']   => 'fa-files-o',
+			\phpbb\ideas\factory\ideas::$statuses['INVALID']     => 'fa-ban',
+		];
+
+		return isset($icons[$args[0]]) ? $icons[$args[0]] : '';
+	}
+}
diff --git a/tests/ui/ideas_test.php b/tests/ui/ideas_test.php
@@ -10,6 +10,7 @@
 
 namespace phpbb\ideas\tests\ui;
 
+use Facebook\WebDriver\WebDriverBy;
 use Facebook\WebDriver\WebDriverKeys;
 
 /**
@@ -58,13 +59,18 @@ public function test_js_actions()
 
 		// test changing the status
 		$this->assertEquals('New', $this->find_element('className', 'status-badge')->getText());
-		$elements = $this->find_element('cssSelector', 'select#status')
-			->findElements(\Facebook\WebDriver\WebDriverBy::tagName('option'));
-		foreach ($elements as $element)
+		$dropdown_container = $this->find_element('className', 'status-dropdown-container');
+		$dropdown = $dropdown_container->findElement(WebDriverBy::className('dropdown'));
+		$this->assertEmpty($dropdown->getText());
+		$dropdown_container->findElement(WebDriverBy::className('dropdown-toggle'))->click();
+		$this->assertNotNull($dropdown->getText());
+		$statuses = $dropdown->findElements(WebDriverBy::className('change-status'));
+		foreach ($statuses as $status)
 		{
-			if ($element->getText() === 'In Progress')
+			if ($status->getText() === 'In Progress')
 			{
-				$element->click();
+				$status->click();
+				break;
 			}
 		}
 		$this->waitForAjax();