Skip to content

C
chat_webview
Commit b65b6b1c by Takatoshi Miura
Options

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

parent c1fc89a1
Showing with 106 additions and 36 deletions
public/css/chat.css
...@@ -836,6 +836,38 @@ a.article:hover { ...@@ -836,6 +836,38 @@ a.article:hover {
width: 100%; width: 100%;
} }
.archive_info {
overflow-y: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
/* TODO */
height: calc(100vh - 600px);
}
.fileName, .insertDate, .chatRoomName, .saveUser, .joinUser { .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 @@ ...@@ -546,46 +546,47 @@
<span class="archive_date">{{insertDate}}</span> <span class="archive_date">{{insertDate}}</span>
</div> </div>
<div class="archive_type"> <div class="archive_type">
<span class="text-truncate col-2 {{archiveTypeCSS}}">{{archiveType}}</span> <span class="text-truncate col-2 {{type}}">{{archiveType}}</span>
</div> </div>
</div> </div>
<p class="text-truncate float-left">{{fileName}}</p> <p class="text-truncate float-left">{{fileName}}</p>
</div> </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>
</div> </div>
</script> </script>
<script id="archive-detail-template" type="text/template"> <script id="archive-detail-template" type="text/template">
<div id="archive_player"> <div id="archive_player">
</div> </div>
<div class="fileName"> <ul class="archive_info">
<h5>ファイル名</h5> <li class="fileName">
<span class="text-truncate">{{fileName}}</span> <h5>ファイル名</h5>
</div> <p class="text-truncate">{{fileName}}</p>
<div class="insertDate"> </li>
<h5>保存日</h5> <li class="insertDate">
<span class="text-truncate">{{insertDate}}</span> <h5>保存日</h5>
</div> <p class="text-truncate">{{insertDate}}</p>
<div class="chatRoomName"> </li>
<h5>チャットルーム名</h5> <li class="chatRoomName">
<span class="text-truncate">{{chatRoomName}}</span> <h5>チャットルーム名</h5>
</div> <p class="text-truncate">{{chatRoomName}}</p>
<div class="saveUser"> </li>
<h5>保存ユーザー</h5> <li class="saveUser">
<h5>保存ユーザー</h5>
</div> <ul class="save_user_list" id="save_user">
<div class="joinUser"> </ul>
<h5>参加ユーザー</h5> </li>
<li class="joinUser">
</div> <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>
<script src="./socket.io/dist/socket.io.js"></script> <script src="./socket.io/dist/socket.io.js"></script>
<script src="./js/libs/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() { ...@@ -1229,7 +1229,6 @@ CHAT_UI.refreshArchiveScreen = function() {
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
//画面タイトル設定 //画面タイトル設定
// TODO タイトル文字定義
let archiveListTitle = getLocalizedString("archiveListTitle"); let archiveListTitle = getLocalizedString("archiveListTitle");
$('.titleRoomName').text(archiveListTitle); $('.titleRoomName').text(archiveListTitle);
...@@ -1317,7 +1316,6 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) { ...@@ -1317,7 +1316,6 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) {
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
//画面タイトル設定 //画面タイトル設定
// TODO タイトル文字定義
let archiveDetailTitle = getLocalizedString("archiveDetailTitle"); let archiveDetailTitle = getLocalizedString("archiveDetailTitle");
$('.titleRoomName').text(archiveDetailTitle); $('.titleRoomName').text(archiveDetailTitle);
...@@ -1358,6 +1356,39 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) { ...@@ -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を非表示 // loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
} }
public/js/language_en.js
...@@ -58,5 +58,7 @@ $.lang.en = { ...@@ -58,5 +58,7 @@ $.lang.en = {
"directMessageChatRoom":"DM", "directMessageChatRoom":"DM",
"favorite":"Favorite List", "favorite":"Favorite List",
"mygroup":"My Group", "mygroup":"My Group",
"groupChatRoom":"Group" "groupChatRoom":"Group",
"archiveListTitle":"Archive",
"archiveDetailTitle":"Detail"
} }
public/js/language_ja.js
...@@ -58,5 +58,7 @@ $.lang.ja = { ...@@ -58,5 +58,7 @@ $.lang.ja = {
"directMessageChatRoom":"DM", "directMessageChatRoom":"DM",
"favorite":"お気に入りリスト", "favorite":"お気に入りリスト",
"mygroup":"マイグループ", "mygroup":"マイグループ",
"groupChatRoom":"グループ" "groupChatRoom":"グループ",
"archiveListTitle":"アーカイブ",
"archiveDetailTitle":"詳細"
} }
public/js/language_ko.js
...@@ -58,5 +58,7 @@ $.lang.ko = { ...@@ -58,5 +58,7 @@ $.lang.ko = {
"directMessageChatRoom":"DM", "directMessageChatRoom":"DM",
"favorite":"즐겨찾기리스트", "favorite":"즐겨찾기리스트",
"mygroup":"마이그룹", "mygroup":"마이그룹",
"groupChatRoom":"그룹" "groupChatRoom":"그룹",
"archiveListTitle":"아카이브",
"archiveDetailTitle":"세부 묘사"
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment