Skip to content

C
chat_webview
Commit e265b0d0 by Takatoshi Miura
Options

アーカイブ詳細 新デザイン適用

parent 5bd8f0ba
Showing with 78 additions and 217 deletions
public/css/chat.css
......@@ -1274,84 +1274,7 @@ input:checked + .tab_class + .content_class {
/* --------------------------------------------------- */
/* Archive STYLE */
/* --------------------------------------------------- */
.inbox_archive {
width: 100%;
}
#archive_list {
margin: 0;
padding: 5px 5px 5px;
overflow-y: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
height: calc(100vh - 200px);
}
.archive_data {
overflow-y: scroll;
clear: both;
}
.archive_img {
float: left;
padding: 10px;
width: 20%;
}
.archive_img img {
height: 80px;
}
.archive_ib {
float: left;
padding: 15px;
width: 80%;
line-height: 1.8;
}
.archive_date_font {
font: 1rem !important;
color:#464646;
}
.archive_date {
display: inline-flex;
max-width: 100%;
}
.archive_file_name {
overflow-x: hidden;
}
.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;
}
/**************************** archive list *************************/
.player {
background-color: black;
text-align : center;
......@@ -1367,44 +1290,6 @@ input:checked + .tab_class + .content_class {
width: 100%;
}
.archive_info {
overflow-y: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
height: calc(50vh - 50px);
}
.fileName, .insertDate, .chatRoomName, .saveUser, .joinUser {
padding: 10px;
padding-left: 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;
overflow: hidden;
}
/**************************** archive *************************/
.archive_list ul {
padding: 0;
overflow-y: scroll;
......
public/index.html
......@@ -783,37 +783,41 @@
<script id="archive-detail-template" type="text/template">
<div id="archive_player" class="player">
</div>
<ul class="archive_info">
<li class="fileName">
<h5>{{fileNameTitle}}</h5>
<p class="text-truncate">{{fileName}}</p>
</li>
<li class="insertDate">
<h5>{{saveDateTitle}}</h5>
<p class="text-truncate">{{insertDate}}</p>
</li>
<li class="chatRoomName">
<h5>{{roomNameTitle}}</h5>
<p class="text-truncate">{{chatRoomName}}
<input type="button" value="＞" id="joinChatRoom">
</p>
</li>
<li class="saveUser">
<h5>{{saveUserTitle}}</h5>
<ul class="save_user_list" id="save_user">
</ul>
</li>
<li class="joinUser">
<h5>{{attendUserTitle}}</h5>
<ul class="join_user_list" id="join_user">
<div class="archive_detail_desc">
<div class="archive_detail_fl_nm item">
<h2 class="ttl" id="archiveFileName">FileName</h2>
<span>{{fileName}}</span>
</div>
<div class="archive_detail_sv_date item">
<h2 class="ttl" id="archiveInsertDate">InsertDate</h2>
<span>{{insertDate}}</span>
</div>
<div class="archive_detail_room_nm item">
<h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
<span>{{chatRoomName}}</span>
</div>
<div class="archive_detail_sv_user item">
<h2 class="ttl" id="archiveSaveUser">SaveUser</h2>
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<img src="{{profileImage}}" alt="プロフィール画像">
<span>{{userName}}</span>
</div>
</div>
</div>
<div class="archive_detail_user_list item">
<h2 class="ttl" id="archiveAttendUser">AttendUser</h2>
<ul class="d-flex flex-row" id="attendUser">
</ul>
</li>
</ul>
</div>
</div>
</script>
<script id="archive-user-template" type="text/template">
<li class="archive_user">
<img src="{{profileImage}}" alt="">
<p>{{userName}}</p>
<li>
<div class="d-flex flex-column attendUser">
<img src="{{profileImage}}" alt="プロフィール画像">
<span>{{userName}}</span>
</div>
</li>
</script>
<script src="./socket.io/dist/socket.io.js"></script>
......
public/js/chat-ui.js
......@@ -894,6 +894,12 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#coviewCapture").text(getLocalizedString("coviewCapture"))
$("#archiveCancel").text(getLocalizedString("archiveCancel"))
$("#archiveCancel").text(getLocalizedString("archiveCancel"))
$("#archiveFileName").text(getLocalizedString("archiveFileName"))
$("#archiveInsertDate").text(getLocalizedString("archiveInsertDate"))
$("#archiveRoomName").text(getLocalizedString("archiveRoomName"))
$("#archiveSaveUser").text(getLocalizedString("archiveSaveUser"))
$("#archiveAttendUser").text(getLocalizedString("archiveAttendUser"))
}
// 画像の読み込みが全て終わったタイミングでコールバック実行
......@@ -1331,7 +1337,6 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
if (IS_ONLINE == 'true') {
CHAT_DB.updateArchiveDetail(archiveId);
}
// アーカイブ詳細取得
var archive = CHAT_DB.getArchiveDetail(archiveId);
......@@ -1340,17 +1345,14 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
var roomId = archive.roomId;
var roomInfo = CHAT_DB.getChatRoomInfo(roomId);
// アーカイブ情報を表示
let html = Mustache.render(archiveDetailTemplate, {
fileNameTitle: getLocalizedString("fileNameTitle"),
fileName: archive.archiveName,
saveDateTitle: getLocalizedString("saveDateTitle"),
insertDate: archive.archiveDate,
roomNameTitle: getLocalizedString("roomNameTitle"),
chatRoomName: roomInfo.chatRoomName,
saveUserTitle: getLocalizedString("saveUserTitle"),
attendUserTitle: getLocalizedString("attendUserTitle")
});
// アーカイブ情報を表示
let html = Mustache.render(archiveDetailTemplate, {
fileName: archive.archiveName,
insertDate: archive.archiveDate,
chatRoomName: roomInfo.chatRoomName,
profileImage: "",
userName: archive.userName
});
let obj = $(jQuery.parseHTML(html));
$('#archive_detail').append(obj);
......@@ -1364,7 +1366,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
break;
case 2: // 音声
$('#archive_player').prepend('<audio class="archive_audio_player" src=' + archive.archiveUrl + ' controls></audio>');
$('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' </img>');
$('#archive_player').prepend('<img class="archive_player" src=' + "./images/capture.png" + ' </img>');
break;
case 3: // 文書
// リリースに文書とその他は含めないため今回は非表示
......@@ -1373,35 +1375,9 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// リリースに文書とその他は含めないため今回は非表示
}
// チャットルームへのリンク付け
document.getElementById('joinChatRoom').onclick = function() {
socket.emit('joinRoom', roomId, roomInfo.chatRoomName, function () {
$('#archive_detail').html('');
$('#messages').html('');
$('.titleRoomName').text(roomInfo.chatRoomName).data('roomName', roomInfo.chatRoomName);
$('#pills-chat-tab').tab('show');
});
}
// ユーザの様式を読み込む
const archiveUserTemplate = $('#archive-user-template').html();
// 保存ユーザ情報を表示
let saveUserList = archive.saveUserId;
saveUserList.forEach(function(user) {
// TODO ユーザIDからユーザ情報を取得
let html = Mustache.render(archiveUserTemplate, {
profileImage: "プロフィール画像",
userName: "ユーザ名"
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
//TODO ネームカードのポップアップを出す処理
});
$('#save_user').append(obj);
})
// 参加ユーザ情報を表示
let attendUserList = archive.attendUserId;
attendUserList.forEach(function(user) {
......@@ -1415,8 +1391,19 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
//TODO ポップアップを出す処理
});
$('#save_user').append(obj);
$('#attendUser').append(obj);
})
CHAT_UI.htmlElementTextInitialize(navigator.language);
// チャットルームへのリンク付け
document.getElementById('joinChatRoom').onclick = function() {
socket.emit('joinRoom', roomId, roomInfo.chatRoomName, function () {
$('#archive_detail').html('');
$('#messages').html('');
$('.titleRoomName').text(roomInfo.chatRoomName).data('roomName', roomInfo.chatRoomName);
$('#pills-chat-tab').tab('show');
});
}
// loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator();
......
public/js/language_en.js
......@@ -76,16 +76,11 @@ $.lang.en = {
"collaborationAllGroup":"All Group",
"coviewCapture":"Capture",
"archiveListTitle":"Archive",
"archiveTypeImage":"Image",
"archiveTypeMovie":"Movie",
"archiveTypeSound":"Sound",
"archiveTypeDocument":"Document",
"archiveTypeOther":"Other",
"archiveDetailTitle":"Detail",
"fileNameTitle":"File Name",
"saveDateTitle":"Save Date",
"roomNameTitle":"ChatRoom Name",
"saveUserTitle":"Save User",
"attendUserTitle":"Attend User",
"archiveCancel":"Cancel"
"archiveCancel":"Cancel",
"archiveFileName":"File Name",
"archiveInsertDate":"Insert Date",
"archiveRoomName":"ChatRoom Name",
"archiveSaveUser":"Save User",
"archiveAttendUser":"Attend User"
}
public/js/language_ja.js
......@@ -76,16 +76,11 @@ $.lang.ja = {
"collaborationAllGroup":"全グループ",
"coviewCapture":"キャプチャ",
"archiveListTitle":"アーカイブ",
"archiveTypeImage":"画像",
"archiveTypeMovie":"動画",
"archiveTypeSound":"音声",
"archiveTypeDocument":"文書",
"archiveTypeOther":"その他",
"archiveDetailTitle":"詳細",
"fileNameTitle":"ファイル名",
"saveDateTitle":"保存日",
"roomNameTitle":"チャットルーム名",
"saveUserTitle":"保存ユーザー",
"attendUserTitle":"参加ユーザー",
"archiveCancel":"キャンセル"
"archiveCancel":"キャンセル",
"archiveFileName":"ファイル名",
"archiveInsertDate":"保存日",
"archiveRoomName":"チャットルーム名",
"archiveSaveUser":"保存ユーザー",
"archiveAttendUser":"参加ユーザー"
}
public/js/language_ko.js
......@@ -76,16 +76,11 @@ $.lang.ko = {
"collaborationAllGroup":"전체그룹",
"coviewCapture":"캡처",
"archiveListTitle":"아카이브",
"archiveTypeImage":"이미지",
"archiveTypeMovie":"동영상",
"archiveTypeSound":"음성",
"archiveTypeDocument":"문서",
"archiveTypeOther":"기타",
"archiveDetailTitle":"세부 묘사",
"fileNameTitle":"파일 이름",
"saveDateTitle":"저장 일",
"roomNameTitle":"대화방 이름",
"saveUserTitle":"저장 사용자",
"attendUserTitle":"참여 사용자",
"archiveCancel":"취소"
"archiveCancel":"취소",
"archiveFileName":"파일 이름",
"archiveInsertDate":"저장 일",
"archiveRoomName":"대화방 이름",
"archiveSaveUser":"저장 사용자",
"archiveAttendUser":"참여 사용자"
}
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