! A huge change: dropping the icons from being in the background of the columns and instead using actual icons (from our sprite), as well as gutting how we defined the colours for the backgrounds and whatnot. This may still change but it's still nicer to have the colours defined through additional classes rather than having many classes.

Signed-off-by: Peter Spicer <[email protected]>

Sources/MessageIndex.php

@@ -387,7 +387,7 @@ function MessageIndex()
 			SELECT
 				t.id_topic, t.num_replies, t.locked, t.num_views, t.is_sticky, t.id_poll, t.id_previous_board,
 				' . ($user_info['is_guest'] ? '0' : 'IFNULL(lt.id_msg, IFNULL(lmr.id_msg, -1)) + 1') . ' AS new_from,
-				t.id_last_msg, t.approved, t.unapproved_posts, ml.poster_time AS last_poster_time,
+				t.id_last_msg, t.approved, t.unapproved_posts, ml.poster_time AS last_poster_time, t.id_redirect_topic,
 				ml.id_msg_modified, ml.subject AS last_subject, ml.icon AS last_icon,
 				ml.poster_name AS last_member_name, ml.id_member AS last_id_member, ' . (!empty($settings['avatars_on_indexes']) ? 'meml.avatar,' : '') . '
 				IFNULL(meml.real_name, ml.poster_name) AS last_display_name, t.id_first_msg,
@@ -561,6 +561,7 @@ function MessageIndex()
 				),
 				'is_sticky' => !empty($row['is_sticky']),
 				'is_locked' => !empty($row['locked']),
+				'is_redirect' => !empty($row['id_redirect_topic']),
 				'is_poll' => $modSettings['pollMode'] == '1' && $row['id_poll'] > 0,
 				'is_posted_in' => false,
 				'icon' => $row['first_icon'],

Themes/default/MessageIndex.template.php

@@ -219,21 +219,18 @@ function template_main()
 
 		foreach ($context['topics'] as $topic)
 		{
+			$color_class = 'windowbg';
+
 			// Is this topic pending approval, or does it have any posts pending approval?
 			if ($context['can_approve_posts'] && $topic['unapproved_posts'])
-				$color_class = !$topic['approved'] ? 'approvetbg' : 'approvebg';
-			// We start with locked and sticky topics.
-			elseif ($topic['is_sticky'] && $topic['is_locked'])
-				$color_class = 'stickybg locked_sticky';
+				$color_class = (!$topic['approved'] ? 'approvetopic ' : 'approvepost ') . $color_class;
+
 			// Sticky topics should get a different color, too.
-			elseif ($topic['is_sticky'])
-				$color_class = 'stickybg';
+			if ($topic['is_sticky'])
+				$color_class = 'sticky ' . $color_class;
 			// Locked topics get special treatment as well.
-			elseif ($topic['is_locked'])
-				$color_class = 'lockedbg';
-			// Last, but not least: regular topics.
-			else
-				$color_class = 'windowbg';
+			if ($topic['is_locked'])
+				$color_class = 'locked ' . $color_class;
 
 			// Some columns require a different shade of the color class.
 			$alternate_class = $color_class . '2';
@@ -244,18 +241,37 @@ function template_main()
 					<td class="', $color_class, ' icon2">
 						<div>
 							<img src="', $topic['first_post']['icon_url'], '" alt="" />
-							', $topic['is_posted_in'] ? '<img class="posted" src="'. $settings['images_url']. '/icons/profile_sm.png" alt="" />' : '','
+							', $topic['is_posted_in'] ? '<img class="posted" src="' . $settings['images_url'] . '/icons/profile_sm.png" alt="" />' : '', '
 						</div>
 					</td>
 					<td class="', $alternate_class, ' subject">
-						<div ', (!empty($topic['quick_mod']['modify']) ? 'id="topic_' . $topic['first_post']['id'] . '"  ondblclick="oQuickModifyTopic.modify_topic(\'' . $topic['id'] . '\', \'' . $topic['first_post']['id'] . '\');"' : ''), '>
-							<div class="message_index_title floatleft">
-								', $topic['new'] && $context['user']['is_logged'] ? '<a href="' . $topic['new_href'] . '" id="newicon' . $topic['first_post']['id'] . '" style="display: inline-block; margin: 7px 0 5px 3px;"><span class="new_posts">' . $txt['new'] . '</span></a>' : '', '
+						<div ', (!empty($topic['quick_mod']['modify']) ? 'id="topic_' . $topic['first_post']['id'] . '"  ondblclick="oQuickModifyTopic.modify_topic(\'' . $topic['id'] . '\', \'' . $topic['first_post']['id'] . '\');"' : ''), '>';
+
+			// Now we handle the icons
+			echo '
+							<div class="icons">';
+			if ($topic['is_locked'])
+				echo '
+								<span class="generic_icons lock floatright"></span>';
+			if ($topic['is_sticky'])
+				echo '
+								<span class="generic_icons sticky floatright"></span>';
+			if ($topic['is_redirect'])
+				echo '
+								<span class="generic_icons move floatright"></span>';
+			if ($topic['is_poll'])
+				echo '
+								<span class="generic_icons poll floatright"></span>';
+			echo '
+							</div>';
+			
+			echo '
+							<div class="message_index_title">
+								', $topic['new'] && $context['user']['is_logged'] ? '<a href="' . $topic['new_href'] . '" id="newicon' . $topic['first_post']['id'] . '"><span class="new_posts">' . $txt['new'] . '</span></a>' : '', '
 								<span class="preview', $topic['is_sticky'] ? ' bold_text' : '', '" title="', $topic[(empty($settings['message_index_preview_first']) ? 'last_post' : 'first_post')]['preview'], '">
 									<span id="msg_', $topic['first_post']['id'], '">', $topic['first_post']['link'], ($context['can_approve_posts'] && !$topic['approved'] ? '&nbsp;<em>(' . $txt['awaiting_approval'] . ')</em>' : ''), '</span>
 								</span>
 							</div>
-							<br class="clear" />
 							<p class="floatleft">', $txt['started_by'], ' ', $topic['first_post']['member']['link'], '
 								<small id="pages', $topic['first_post']['id'], '">', $topic['pages'], '</small>
 							</p>

Themes/default/Recent.template.php

@@ -136,20 +136,16 @@ function template_unread()
 
 		foreach ($context['topics'] as $topic)
 		{
-			// We start with locked and sticky topics.
-			if ($topic['is_sticky'] && $topic['is_locked'])
-				$color_class = 'stickybg locked_sticky';
+			$color_class = 'windowbg';
+
 			// Sticky topics should get a different color, too.
-			elseif ($topic['is_sticky'])
-				$color_class = 'stickybg';
+			if ($topic['is_sticky'])
+				$color_class = 'sticky ' . $color_class;
 			// Locked topics get special treatment as well.
-			elseif ($topic['is_locked'])
-				$color_class = 'lockedbg';
-			// Last, but not least: regular topics.
-			else
-				$color_class = 'windowbg';
+			if ($topic['is_locked'])
+				$color_class = 'locked ' . $color_class;
 
-			$color_class2 = !empty($color_class) ? $color_class . '2' : 'windowbg2';
+			$color_class2 = $color_class . '2';
 
 			// [WIP] There is trial code here to hide the topic icon column. Hardly anyone will miss it.
 			// [WIP] Markup can be cleaned up later. CSS can go in the CSS files later.
@@ -164,6 +160,21 @@ function template_unread()
 							<td class="subject ', $color_class2, '">
 								<div>';
 
+			// Now we handle the icons
+			echo '
+							<div class="icons">';
+			if ($topic['is_locked'])
+				echo '
+								<span class="generic_icons lock floatright"></span>';
+			if ($topic['is_sticky'])
+				echo '
+								<span class="generic_icons sticky floatright"></span>';
+			if ($topic['is_poll'])
+				echo '
+								<span class="generic_icons poll floatright"></span>';
+			echo '
+							</div>';
+
 			// [WIP] MEthinks the orange icons look better if they aren't all over the page.
 			echo '
 									<a href="', $topic['new_href'], '" id="newicon', $topic['first_post']['id'], '"><span class="new_posts">' . $txt['new'] . '</span></a>
@@ -284,20 +295,16 @@ function template_replies()
 
 		foreach ($context['topics'] as $topic)
 		{
-			// We start with locked and sticky topics.
-			if ($topic['is_sticky'] && $topic['is_locked'])
-				$color_class = 'stickybg locked_sticky';
+			$color_class = 'windowbg';
+
 			// Sticky topics should get a different color, too.
-			elseif ($topic['is_sticky'])
-				$color_class = 'stickybg';
+			if ($topic['is_sticky'])
+				$color_class = 'sticky ' . $color_class;
 			// Locked topics get special treatment as well.
-			elseif ($topic['is_locked'])
-				$color_class = 'lockedbg';
-			// Last, but not least: regular topics.
-			else
-				$color_class = 'windowbg';
+			if ($topic['is_locked'])
+				$color_class = 'locked ' . $color_class;
 
-			$color_class2 = !empty($color_class) ? $color_class . '2' : '';
+			$color_class2 = $color_class . '2';
 
 			// [WIP] There is trial code here to hide the topic icon column. Hardly anyone will miss it.
 			// [WIP] Markup can be cleaned up later. CSS can go in the CSS files later.
@@ -306,12 +313,27 @@ function template_replies()
 							<td class="', $color_class, ' icon2">
 								<div style="position: relative; width: 40px; margin: auto;">
 									<img src="', $topic['first_post']['icon_url'], '" alt="" />
-									', $topic['is_posted_in'] ? '<img src="'. $settings['images_url']. '/icons/profile_sm.png" alt="" style="position: absolute; z-index: 5; right: 4px; bottom: -3px;" />' : '','
+									', $topic['is_posted_in'] ? '<img class="posted" src="' . $settings['images_url'] . '/icons/profile_sm.png" alt="" />' : '','
 								</div>
 							</td>
 							<td class="subject ', $color_class2, '">
 								<div>';
 
+			// Now we handle the icons
+			echo '
+							<div class="icons">';
+			if ($topic['is_locked'])
+				echo '
+								<span class="generic_icons lock floatright"></span>';
+			if ($topic['is_sticky'])
+				echo '
+								<span class="generic_icons sticky floatright"></span>';
+			if ($topic['is_poll'])
+				echo '
+								<span class="generic_icons poll floatright"></span>';
+			echo '
+							</div>';
+
 			// [WIP] MEthinks the orange icons look better if they aren't all over the page.
 			echo '
 									<a href="', $topic['new_href'], '" id="newicon', $topic['first_post']['id'], '"><span class="new_posts">' . $txt['new'] . '</span></a>

Themes/default/css/index.css

@@ -620,21 +620,40 @@ div.pagesection div.floatright input, div.pagesection div.floatright select {
 	background: linear-gradient(to top, #FFFFFF 1%, #E2E9F3 70%);
 }
 
+/* Nobody wants locked topics to stand out much. */
+.windowbg.locked {
+	background: #e7eaef;
+}
+.windowbg2.locked {
+	background: #e7eaef;
+}
 /* Sticky topics get a different background */
-.stickybg {
+.windowbg.sticky {
 	background: #cfdce8;
 }
-.stickybg2 {
-	background: #d9e7f2;
+.windowbg2.sticky {
+	background: #cfdce8;
 }
-
-/* Plain locked topics just get the icon. */
-/* Nobody wants them to stand out much. */
-.lockedbg {
-	background: #e7eaef;
+/* Locked AND sticky are a bit more technical */
+.windowbg.sticky.locked {
+	background: #e8d8cf;
 }
-.lockedbg2 {
-	background: #f0f4f7;
+.windowbg2.sticky.locked {
+	background: #e8d8cf;
+}
+/* Awaiting approval is a bit special, topics first */
+.windowbg.approvetopic {
+	background: #e4a17c;
+}
+.windowbg2.approvetopic {
+	background: #e4a17c;
+}
+/* Unapproved posts in approved topics */
+.windowbg.approvepost {
+	background: #ffeaea;
+}
+.windowbg2.approvepost {
+	background: #ffeaea;
 }
 
 /* Posts and personal messages displayed throughout the forum. */
@@ -2932,7 +2951,7 @@ tr.titlebg td {
 	vertical-align: middle;
 }
 
-tr.windowbg td, tr.windowbg2 td, tr.approvebg td, tr.highlight2 td {
+tr.windowbg td, tr.windowbg2 td, tr.highlight2 td {
 	padding: 4px 8px;
 }
 #credits p {
@@ -2982,36 +3001,16 @@ tr.windowbg td, tr.windowbg2 td, tr.approvebg td, tr.highlight2 td {
 	padding: 4px 4px 4px 24px;
 }
 
-/* Sticky topics get a different background */
-.topic_table td.stickybg {
-	background: #cfdce8 url(../images/icons/quick_sticky.png) no-repeat 98% 4px;
-}
-.topic_table td.stickybg2 {
-	background: #cfdce8 url(../images/icons/quick_sticky.png) no-repeat 98% 4px;
-}
-.topic_table td.locked_sticky, .topic_table td.stickybglockedbg {
-	background: #e8d8cf url(../images/icons/quick_sticky_lock.png) no-repeat 98% 4px;
-}
-.topic_table td.locked_sticky2, .topic_table td.stickybglockedbg2 {
-	background: #e8d8cf url(../images/icons/quick_sticky_lock.png) no-repeat 98% 4px;
-}
-.message_index_title {
-	margin-right: 40px;
+/* Space those icons out a bit */
+.topic_table .icons span {
+	margin: 2px 0 0 5px;
 }
-
-/* Plain locked topics just get the icon. */
 /* Nobody wants them to stand out much. */
 .topic_table td.lockedbg {
-	background: #e7eaef url(../images/icons/quick_lock.png) no-repeat 98% 4px;
+	background: #e7eaef no-repeat 98% 4px;
 }
 .topic_table td.lockedbg2 {
-	background: #e7eaef url(../images/icons/quick_lock.png) no-repeat 98% 4px;
-}
-
-/* Stop those damned icons popping up in every table cell! */
-.topic_table td.icon1, .topic_table td.icon2, .topic_table td.stats,
-.topic_table td.lastpost, .topic_table td.moderation {
-	background-image: none;
+	background: #e7eaef no-repeat 98% 4px;
 }
 
 .errorfile_table {
@@ -4297,12 +4296,6 @@ div#editlang_desc {
 .topic_details .smalltext {
 	font-size: 0.9em;
 }
-#recent .windowbg2, .windowbg2 {
-	background: /*#eaf1f4;*/#f0f4f7;
-}
-#recent .windowbg, .windowbg {
-	background: /*#e8eff5;*/#f0f4f7;
-}
 #recent .pagesection {
 	padding: 3px 4px;
 	margin: 0 0 -10px 0;
@@ -4415,8 +4408,7 @@ tr.catbg th:last-child {
 .table_grid tr td:last-child, .table_grid td.lastpost, .table_grid td.whos_viewing, .table_grid td.moderation, .table_grid td.qaction_cell {
 	border-right: 1px solid #ccc;
 }
-.table_grid td.windowbg, .table_grid td.windowbg2, .table_grid td.lockedbg, .table_grid td.lockedbg2,
-.table_grid td.stickybg, .table_grid td.stickybg2, .table_grid td.locked_sticky, .table_grid td.locked_sticky2,
+.table_grid td.windowbg, .table_grid td.windowbg2,
 .table_grid td.whos_viewing, .table_grid td.moderation, .table_grid td.qaction_cell, .table_grid tbody {
 	border-bottom: 1px solid #ccc;
 }
@@ -4432,16 +4424,6 @@ tr.catbg th:last-child {
 	color: #222;
 	background: #fff2f2;
 }
-/* Color for background of *topics* requiring approval */
-
-.approvetbg {
-	color: #222;
-	background: #e4a17c;
-}
-.approvetbg2 {
-	color: #222;
-	background: #f3bd9f;
-}
 
 div#manage_boards dl dd textarea[name=desc] {
 	margin-top: 1px;

Themes/default/css/rtl.css

@@ -600,15 +600,6 @@ div#admin_menu {
 }
 /* Styles for generic tables.
 ------------------------------------------------------- */
-.topic_table td.stickybg2 {
-	background: url(../images/icons/quick_sticky.png) no-repeat 2% 4px;
-}
-.topic_table td.lockedbg2 {
-	background: url(../images/icons/quick_lock.png) no-repeat 2% 4px;
-}
-.topic_table td.locked_sticky2 {
-	background: url(../images/icons/quick_sticky_lock.png) no-repeat 2% 4px;
-}
 .topic_table td.lastpost {
 	background: none;
 }