[ticket/11915] Move the uploaded attachment list under the attachments tab.

PHPBB3-11915

phpBB/styles/prosilver/template/posting_attach_body.html

@@ -1,9 +1,9 @@
-<div class="panel bg3" id="attach-panel">
+<div class="panel bg3 panel-container" id="attach-panel">
 	<div class="inner">
 
 	<p>{L_ADD_ATTACHMENT_EXPLAIN}</p>
 	
-	<fieldset class="fields2">
+	<fieldset class="fields2" id="attach-panel-basic">
 	<dl>
 		<dt><label for="fileupload">{L_FILENAME}{L_COLON}</label></dt>
 		<dd>
@@ -17,5 +17,44 @@
 	</dl>
 	</fieldset>
 
+	<div id="attach-panel-multi">
+		<input type="button" class="button2" value="{L_PLUPLOAD_ADD_FILES}" id="add_files" />
+	</div>
+
+	<div class="panel<!-- IF not .attach_row --> hidden<!-- ENDIF -->" id="file-list-container">
+		<div class="inner">
+			<table class="table1 zebra-list">
+				<thead>
+					<tr>
+						<th class="attach-name">{LA_PLUPLOAD_FILENAME}</th>
+						<th class="attach-comment">{L_FILE_COMMENT}</th>
+						<th class="attach-filesize">{L_PLUPLOAD_SIZE}</th>
+						<th class="attach-status">{L_PLUPLOAD_STATUS}</th>
+					</tr>
+				</thead>
+				<tbody id="file-list">
+					<!-- BEGIN attach_row -->
+						<tr class="attach-row" data-attach-id="{attach_row.ATTACH_ID}">
+							<td class="attach-name">
+								<a class="file-name" href="{attach_row.U_VIEW_ATTACHMENT}">{attach_row.FILENAME}</a>
+								<span class="attach-controls">
+									<!-- IF S_INLINE_ATTACHMENT_OPTIONS --><input type="button" value="{L_PLACE_INLINE}" onclick="attach_inline({attach_row.ASSOC_INDEX}, '{attach_row.A_FILENAME}');" class="button2 file-inline-bbcode" />&nbsp; <!-- ENDIF -->
+									<input type="submit" name="delete_file[{attach_row.ASSOC_INDEX}]" value="{L_DELETE_FILE}" class="button2 file-delete" />
+								</span>
+							</td>
+							<td class="attach-comment">
+								<textarea name="comment_list[{attach_row.ASSOC_INDEX}]" rows="1" cols="30" class="inputbox">{attach_row.FILE_COMMENT}</textarea>
+								{attach_row.S_HIDDEN}
+							</td>
+							<td class="attach-filesize file-size">{attach_row.FILESIZE}</td>
+							<td class="attach-status">
+								<span class="file-status file-uploaded"></span>
+							</td>
+						</tr>
+					<!-- END attach_row -->
+				</tbody>
+			</table>
+		</div>
+	</div>
 	</div>
 </div>

phpBB/styles/prosilver/template/posting_editor.html

@@ -149,34 +149,6 @@
 	</div>
 	<!-- ENDIF -->
 
-	<!-- IF S_HAS_ATTACHMENTS -->
-		<div class="panel bg2">
-			<div class="inner">
-			<h3>{L_POSTED_ATTACHMENTS}</h3>
-
-			<fieldset class="fields2">
-
-			<!-- BEGIN attach_row -->
-			<dl>
-
-				<dt><label for="comment_list_{attach_row.ASSOC_INDEX}">{L_FILE_COMMENT}{L_COLON}</label></dt>
-				<dd><textarea name="comment_list[{attach_row.ASSOC_INDEX}]" id="comment_list_{attach_row.ASSOC_INDEX}" rows="1" cols="35" class="inputbox">{attach_row.FILE_COMMENT}</textarea></dd>
-				<dd><a href="{attach_row.U_VIEW_ATTACHMENT}">{attach_row.FILENAME}</a></dd>
-				<dd style="margin-top: 5px;">
-					<!-- IF S_INLINE_ATTACHMENT_OPTIONS --><input type="button" value="{L_PLACE_INLINE}" onclick="attach_inline({attach_row.ASSOC_INDEX}, '{attach_row.A_FILENAME}');" class="button2" />&nbsp; <!-- ENDIF -->
-					<input type="submit" name="delete_file[{attach_row.ASSOC_INDEX}]" value="{L_DELETE_FILE}" class="button2" />
-				</dd>
-			</dl>
-			{attach_row.S_HIDDEN}
-				<!-- IF not attach_row.S_LAST_ROW --><hr class="dashed" /><!-- ENDIF -->
-			<!-- END attach_row -->
-
-			</fieldset>
-
-			</div>
-		</div>
-	<!-- ENDIF -->
-
 	<!-- IF not S_SHOW_DRAFTS and not $SIG_EDIT eq 1 -->
 	<div class="panel bg2">
 		<div class="inner">
@@ -198,7 +170,7 @@
 		<div id="tabs" class="sub-panels" data-show-panel="options-panel">
 			<ul>
 				<li id="options-panel-tab" class="activetab"><a href="#tabs" data-subpanel="options-panel"><span>{L_OPTIONS}</span></a></li>
-				<!-- IF S_SHOW_ATTACH_BOX --><li id="attach-panel-tab"><a href="#tabs" data-subpanel="attach-panel"><span>{L_ADD_ATTACHMENT}</span></a></li><!-- ENDIF -->
+				<!-- IF S_SHOW_ATTACH_BOX --><li id="attach-panel-tab"><a href="#tabs" data-subpanel="attach-panel"><span>{L_ATTACHMENTS}</span></a></li><!-- ENDIF -->
 				<!-- IF S_SHOW_POLL_BOX || S_POLL_DELETE --><li id="poll-panel-tab"><a href="#tabs" data-subpanel="poll-panel"><span>{L_ADD_POLL}</span></a></li><!-- ENDIF -->
 			</ul>
 		</div>

phpBB/styles/prosilver/theme/colours.css

@@ -76,8 +76,14 @@ hr {
 	color: #000000;
 }
 
-.bg1	{ background-color: #ECF3F7; }
+table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd), .bg1 {
-.bg2	{ background-color: #e1ebf2; }
+	background-color: #ECF3F7;
+}
+
+table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even), .bg2 {
+	background-color: #e1ebf2;
+}
+
 .bg3	{ background-color: #cadceb; }
 
 .ucprowbg {

phpBB/styles/prosilver/theme/plupload.css

@@ -1,11 +1,76 @@
-.plupload_filelist li.can_delete:hover {
+#attach-panel-multi {
-	cursor: pointer;
+	display: none;
+	margin-bottom: 1em;
 }
 
-.plupload_filelist li.can_delete:hover a {
+#file-list td {
-	background: url('../../../assets/plupload/jquery.plupload.queue/img/delete.gif');
+	vertical-align: middle;
 }
 
-.plupload_filelist li a.working {
+.attach-name {
+	width: 50%;
+}
+
+.attach-comment {
+	width: 30%;
+}
+
+.attach-filesize {
+	width: 15%;
+}
+
+.attach-status {
+	width: 5%;
+}
+
+.attach-filesize, .attach-status {
+	text-align: center;
+}
+
+.attach-controls {
+	display: inline-block;
+	float: right;
+}
+
+#attach-row-tpl {
+	display: none;
+}
+
+#file-total-progress {
+	height: 2px;
+	display: block;
+	position: relative;
+	margin: 4px -10px -6px -10px;
+}
+
+.file-progress {
+	background-color: #CCCCCC;
+	display:inline-block;
+	height: 8px;
+	width: 50px;
+}
+
+.file-progress-bar, #file-total-progress-bar {
+	background-color: green;
+	display: block;
+	height: 100%;
+	width: 0;
+}
+
+.file-status.file-working {
 	background: url('../../../assets/plupload/jquery.plupload.queue/img/throbber.gif');
 }
+
+.file-status.file-uploaded {
+	background: url('../../../assets/plupload/jquery.plupload.queue/img/done.gif');
+}
+
+.file-status.file-error {
+	background: url('../../../assets/plupload/jquery.plupload.queue/img/error.gif');
+}
+
+.file-status {
+	display: inline-block;
+	height: 16px;
+	width: 16px;
+}