アーカイブ詳細画面のユーザー表示

public/css/chat.css

@@ -836,6 +836,38 @@ a.article:hover {
   width: 100%;
 }
 
+.archive_info {
+  overflow-y: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  /* TODO */
+  height: calc(100vh - 600px);
+}
+
 .fileName, .insertDate, .chatRoomName, .saveUser, .joinUser {
-  padding: 15px;
+  padding: 10px;
+  display: inline;
+}
+
+.save_user_list, .join_user_list {
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.archive_user {
+  display: inline-block;
+  width: 100px;
+  margin: 10px;
+}
+
+.archive_user img {
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+}
+
+.archive_user p {
+  text-align: center;
 }

public/index.html

@@ -546,46 +546,47 @@
             <span class="archive_date">{{insertDate}}</span>
           </div>
           <div class="archive_type">
-            <span class="text-truncate col-2 {{archiveTypeCSS}}">{{archiveType}}</span>
+            <span class="text-truncate col-2 {{type}}">{{archiveType}}</span>
           </div>
         </div>
         <p class="text-truncate float-left">{{fileName}}</p>
       </div>
-      <div class="squareBox deleteBox" data-id="{{id}}">
-        <div class="squareBoxContent">
-          <div>
-            <span>
-              <i class="fa fa-trash"></i>
-            </span>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </script>
 <script id="archive-detail-template" type="text/template">
   <div id="archive_player">
   </div>
-  <div class="fileName">
-    <h5>ファイル名</h5>
-    <span class="text-truncate">{{fileName}}</span>
-  </div>
-  <div class="insertDate">
-    <h5>保存日</h5>
-    <span class="text-truncate">{{insertDate}}</span>
-  </div>
-  <div class="chatRoomName">
-    <h5>チャットルーム名</h5>
-    <span class="text-truncate">{{chatRoomName}}</span>
-  </div>
-  <div class="saveUser">
-    <h5>保存ユーザー</h5>
-
-  </div>
-  <div class="joinUser">
-    <h5>参加ユーザー</h5>
-
-  </div>
+  <ul class="archive_info">
+    <li class="fileName">
+      <h5>ファイル名</h5>
+      <p class="text-truncate">{{fileName}}</p>
+    </li>
+    <li class="insertDate">
+      <h5>保存日</h5>
+      <p class="text-truncate">{{insertDate}}</p>
+    </li>
+    <li class="chatRoomName">
+      <h5>チャットルーム名</h5>
+      <p class="text-truncate">{{chatRoomName}}</p>
+    </li>
+    <li class="saveUser">
+      <h5>保存ユーザー</h5>
+      <ul class="save_user_list" id="save_user">
+      </ul>
+    </li>
+    <li class="joinUser">
+      <h5>参加ユーザー</h5>
+      <ul class="join_user_list" id="join_user">
+      </ul>
+    </li>
+  </ul>
+</script>
+<script id="archive-user-template" type="text/template">
+  <li class="archive_user">
+    <img src="{{profileImage}}" alt="">
+    <p>{{userName}}</p>
+  </li>
 </script>
 <script src="./socket.io/dist/socket.io.js"></script>
 <script src="./js/libs/socket.io.js"></script>

public/js/chat-ui.js

@@ -1229,7 +1229,6 @@ CHAT_UI.refreshArchiveScreen = function() {
 	CHAT_UI.showLoadingIndicator();
 
 	//画面タイトル設定
-	// TODO タイトル文字定義
 	let archiveListTitle = getLocalizedString("archiveListTitle");
 	$('.titleRoomName').text(archiveListTitle);
 
@@ -1317,7 +1316,6 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) {
 	CHAT_UI.showLoadingIndicator();
 
 	//画面タイトル設定
-	// TODO タイトル文字定義
 	let archiveDetailTitle = getLocalizedString("archiveDetailTitle");
 	$('.titleRoomName').text(archiveDetailTitle);
 
@@ -1358,6 +1356,39 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) {
 			// リリースに文書とその他は含めないため今回は非表示
 	}
 
+	// ユーザの様式を読み込む
+	const archiveUserTemplate = $('#archive-user-template').html();
+
+	// 保存ユーザ情報を表示
+	// TODO 保存ユーザリストを取得
+	saveUserList.forEach(function(archive) {
+		let html = Mustache.render(archiveUserTemplate, {
+ 			profileImage: "プロフィール画像",
+ 			userName: "ユーザ名"
+ 		});
+
+ 		let obj = $(jQuery.parseHTML(html)).on('click', function() {
+			//TODO ポップアップを出す処理
+		});
+
+		$('#save_user').append(obj);
+	})
+
+	// 参加ユーザ情報を表示
+	// TODO 保存ユーザリストを取得
+	joinUserList.forEach(function(archive) {
+		let html = Mustache.render(archiveUserTemplate, {
+ 			profileImage: "プロフィール画像",
+ 			userName: "ユーザ名"
+ 		});
+
+ 		let obj = $(jQuery.parseHTML(html)).on('click', function() {
+			//TODO ポップアップを出す処理
+		});
+
+		$('#save_user').append(obj);
+	})
+
 	// loadingIndicatorを非表示
 	CHAT_UI.dismissLoadingIndicator();
 }

public/js/language_en.js

@@ -58,5 +58,7 @@ $.lang.en = {
     "directMessageChatRoom":"DM",
     "favorite":"Favorite List",
     "mygroup":"My Group",
-    "groupChatRoom":"Group"
+    "groupChatRoom":"Group",
+    "archiveListTitle":"Archive",
+    "archiveDetailTitle":"Detail"
 }

public/js/language_ja.js

@@ -58,5 +58,7 @@ $.lang.ja = {
     "directMessageChatRoom":"DM",
     "favorite":"お気に入りリスト",
     "mygroup":"マイグループ",
-    "groupChatRoom":"グループ"
+    "groupChatRoom":"グループ",
+    "archiveListTitle":"アーカイブ",
+    "archiveDetailTitle":"詳細"
 }

public/js/language_ko.js

@@ -58,5 +58,7 @@ $.lang.ko = {
     "directMessageChatRoom":"DM",
     "favorite":"즐겨찾기리스트",
     "mygroup":"마이그룹",
-    "groupChatRoom":"그룹"
+    "groupChatRoom":"그룹",
+    "archiveListTitle":"아카이브",
+    "archiveDetailTitle":"세부 묘사"
 }