アーカイブ一覧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

@@ -1226,38 +1226,67 @@ CHAT_UI.showUserNamecard = function(shopMemberId) {
 
 CHAT_UI.refreshArchiveScreen = function() {
 	// loadingIndicatorを表示
-    CHAT_UI.showLoadingIndicator();
+	CHAT_UI.showLoadingIndicator();
 
-    //画面タイトル設定
-    let archiveListTitle = getLocalizedString("archiveListTitle");
-    $('.titleRoomName').text(archiveListTitle);
+	//画面タイトル設定
+	let archiveListTitle = getLocalizedString("archiveListTitle");
+	$('.titleRoomName').text(archiveListTitle);
 
-    // 初期化
-    $('#archive_list').html('');
+	// 初期化
+	$('#archive_list').html('');
 	$('#pills-archive-tab').tab('show');
 
-    // アーカイブの様式を読み込む
-    const archiveTemplate = $('#archive-template').html();
+	// アーカイブの様式を読み込む
+	const archiveTemplate = $('#archive-template').html();
 
-    // アーカイブ情報取得＆表示
+	// アーカイブ情報取得＆表示
 	// TODO archiveId取得処理
-    var archiveList = CHAT_DB.getArchiveList(archiveId);
-
-    archiveList.forEach(function(archive) {
-        archive.thumbnailImagePath = CHAT.getProfileImgUrl(archive.archiveUrl)
-        let html = Mustache.render(archiveTemplate, {
-            id: archive.archiveId,
-            fileName: archive.archiveName,
-            thumbnailImage: archive.thumbnailImagePath,
-            //time: ,
-            archiveType: archive.archiveType
-        });
-
-        let obj = $(jQuery.parseHTML(html)).on('click', function(){
-            //TODO アーカイブ詳細画面へ遷移する処理
-        });
+	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';
+		}
 
-        $('#archive_list').append(obj);
+		// TODO サムネイル画像取得処理
+		archive.thumbnailImagePath = CHAT.getProfileImgUrl(archive.archiveUrl)
+		let html = Mustache.render(archiveTemplate, {
+			id: archive.archiveId,
+			fileName: archive.archiveName,
+			thumbnailImage: archive.thumbnailImagePath,
+			time: archive.insertDate,
+			archiveType: archiveType,
+			type: type
+		});
+
+		let obj = $(jQuery.parseHTML(html)).on('click', function(){
+			//TODO アーカイブ詳細画面へ遷移する処理
+		});
+
+		$('#archive_list').append(obj);
+		$('.archive_list').css('border-bottom', '1px solid #c4c4c4');
     })
 
     // loadingIndicatorを非表示