アーカイブ一覧UI修正

public/css/chat.css

@@ -763,12 +763,10 @@ a.article:hover {
 .inbox_archive {
   float: left;
   overflow: hidden;
-  border-right: 1px solid #c4c4c4;
   width: 100%;
 }
 
 #archive_list {
-  border-bottom: 1px solid #c4c4c4;
   margin: 0;
   padding: 5px 5px 5px;
 }
@@ -788,15 +786,43 @@ a.article:hover {
   float: left;
   padding: 15px;
   width: 80%;
+  line-height: 1.8;
 }
 
-.archive_ib h5 {
-  font-size:1rem;
+.archive_date_font {
+  font: 1rem !important;
   color:#464646;
-  margin:0 0 14px 0;
 }
 
 .archive_date {
   display: inline-flex;
   max-width: 100%;
 }
+
+.type_image {
+  text-align: center;
+  background-color: seagreen;
+  color: white;
+}
+
+.type_movie {
+  text-align: center;
+  background-color: blue;
+  color: white;
+}
+
+.type_sound {
+  text-align: center;
+  background-color: orange;
+  color: white;
+}
+
+.type_document {
+  /* 今回のリリースに文書とその他は含めないため非表示 */
+  display: none;
+}
+
+.type_other {
+  /* 今回のリリースに文書とその他は含めないため非表示 */
+  display: none;
+}

public/index.html

@@ -539,11 +539,11 @@
       </div>
       <div class="archive_ib">
         <div class="row">
-          <div class="col-8">
-            <h5><span class="archive_date">{{time}}</span></h5>
+          <div class="archive_date_font col-10">
+            <span class="archive_date">{{time}}</span>
           </div>
-          <div class="col-4">
-            <span class="text-truncate room-name-font">{{archiveType}}</span>
+          <div class="archive_type">
+            <span class="text-truncate col-2 {{type}}">{{archiveType}}</span>
           </div>
         </div>
         <p class="text-truncate float-left">{{fileName}}</p>

public/js/chat-ui.js

@@ -1244,13 +1244,41 @@ CHAT_UI.refreshArchiveScreen = function() {
 	var archiveList = CHAT_DB.getArchiveList(archiveId);
 
 	archiveList.forEach(function(archive) {
+		var archiveType = '';
+		var type = '';
+		switch(archive.archiveType) {
+			case 0:
+				archiveType = '画像';
+				type = 'type_image';
+				break;
+			case 1:
+				archiveType = '動画';
+				type = 'type_movie';
+				break;
+			case 2:
+				archiveType = '音声';
+				type = 'type_sound';
+				break;
+			case 3:
+				// 今回のリリースに文書とその他は含めないため非表示
+				archiveType = '文書';
+				type = 'type_document';
+				break;
+			default:
+				// 今回のリリースに文書とその他は含めないため非表示
+				archiveType = 'その他';
+				type = 'type_other';
+		}
+
+		// TODO サムネイル画像取得処理
 		archive.thumbnailImagePath = CHAT.getProfileImgUrl(archive.archiveUrl)
 		let html = Mustache.render(archiveTemplate, {
 			id: archive.archiveId,
 			fileName: archive.archiveName,
 			thumbnailImage: archive.thumbnailImagePath,
-            //time: ,
-            archiveType: archive.archiveType
+			time: archive.insertDate,
+			archiveType: archiveType,
+			type: type
 		});
 
 		let obj = $(jQuery.parseHTML(html)).on('click', function(){
@@ -1258,6 +1286,7 @@ CHAT_UI.refreshArchiveScreen = function() {
 		});
 
 		$('#archive_list').append(obj);
+		$('.archive_list').css('border-bottom', '1px solid #c4c4c4');
     })
 
     // loadingIndicatorを非表示