Skip to content

C
chat_webview
Commit a8d13870 by Takatoshi Miura
Options

Merge branch 'origin/develop_apply_design_archive' into 'release_sp3' 

Origin/develop apply design archive

See merge request !7
parents 9ca6a036 17b5062e
Showing with 224 additions and 223 deletions
public/css/chat.css
...@@ -1274,132 +1274,157 @@ input:checked + .tab_class + .content_class { ...@@ -1274,132 +1274,157 @@ input:checked + .tab_class + .content_class {
/* --------------------------------------------------- */ /* --------------------------------------------------- */
/* Archive STYLE */ /* Archive STYLE */
/* --------------------------------------------------- */ /* --------------------------------------------------- */
/**************************** archive list *************************/
.player {
background-color: black;
text-align : center;
}
.inbox_archive { .archive_player {
width: auto;
max-width: 100%;
max-height: 50vh;
}
.archive_audio_player {
width: 100%; width: 100%;
} }
#archive_list { .archive_list ul {
margin: 0; padding: 0;
padding: 5px 5px 5px;
overflow-y: scroll; overflow-y: scroll;
white-space: nowrap; height: calc(100vh - 195px);
-webkit-overflow-scrolling: touch;
height: calc(100vh - 200px);
} }
.archive_data { .arhive_img .img_wrap {
overflow-y: scroll; width: 50px;
clear: both; height: 50px;
border-radius: 50%;
text-align: center;
line-height: 46px;
} }
.archive_img { .arhive_img img {
float: left; width: 40px;
height: 40px;
}
.archive_list ul li {
list-style: none;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.archive_row {
padding: 10px; padding: 10px;
width: 20%; color: #323743;
} }
.archive_img img { .archive_row:hover {
height: 80px; background: aliceblue;
} }
.archive_ib { .bg_blue {
float: left; background: #0070ca;
padding: 15px;
width: 80%;
line-height: 1.8;
} }
.archive_date_font { .bg_green {
font: 1rem !important; background: #4dca00;
color:#464646;
} }
.archive_date { .bg_orange {
display: inline-flex; background: #ca6d00;
max-width: 100%;
} }
.archive_file_name { .archive_list ul li:first-child {
overflow-x: hidden; border-top: 1px solid #e2e8f0;
} }
.type_image { .archive_desc {
text-align: center; padding-left: 10px;
background-color: seagreen; position: relative;
color: white; width: calc(100% - 100px);
overflow: hidden;
white-space: nowrap;
} }
.type_movie { .archive_date span {
text-align: center; color: #323743;
background-color: blue; font-size: 14px;
color: white;
} }
.type_sound { .archive_name span {
text-align: center; color: #323743;
background-color: orange; font-size: 16px;
color: white; font-weight: 500;
} }
.type_document { .archive_name {
/* 今回のリリースに文書とその他は含めないため非表示 */ white-space: nowrap;
display: none; overflow: hidden;
text-overflow: ellipsis;
} }
.type_other { /**************************** archive detail *************************/
/* 今回のリリースに文書とその他は含めないため非表示 */ .archive_detail .ttl {
display: none; font-size: 18px;
font-weight: bold;
} }
.player { .archive_detail .item {
background-color: black; margin-bottom: 20px;
text-align : center;
} }
.archive_player { .archive_detail .archive_detail_desc img, .attendUser img {
width: auto; width: 80px;
max-width: 100%; height: 80px;
max-height: 50vh; border-radius: 50%;
} }
.archive_audio_player { .archive_detail .archive_detail_desc .archive_detail_user_list ul {
width: 100%; padding-left: 0;
overflow-x: scroll;
} }
.archive_info { .archive_detail .archive_detail_desc .archive_detail_user_list ul li {
overflow-y: auto; list-style: none;
white-space: nowrap; margin: 0 5px;
-webkit-overflow-scrolling: touch;
height: calc(50vh - 50px);
} }
.fileName, .insertDate, .chatRoomName, .saveUser, .joinUser { .archive_detail_desc {
padding: 10px; margin: 0 10px;
padding-left: 10px;
display: inline;
} }
.save_user_list, .join_user_list { .archive_detail .archive_detail_desc .archive_detail_user_list span,
overflow-x: auto; .archive_detail .archive_detail_desc .archive_detail_sv_user span {
text-align: center;
white-space: nowrap; white-space: nowrap;
-webkit-overflow-scrolling: touch; overflow: hidden;
text-overflow: ellipsis;
width: 90px;
} }
.archive_user { #joinChatRoom {
display: inline-block; -webkit-appearance: none;
width: 100px; border: none;
margin: 10px; width: 24px;
height: 24px;
padding: 0;
} }
.archive_user img { #joinChatRoom img {
border-radius: 50%; width: 24px;
width: 100px; height: 24px;
height: 100px;
object-fit: cover;
} }
.archive_user p { @media screen and (max-width: 768px) {
text-align: center; .archive_name {
overflow: hidden; font-size: 14px;
}
.archive_detail .ttl {
font-size: 16px;
}
.archive_detail_desc span {
font-size: 14px;
}
} }
public/index.html
...@@ -388,20 +388,23 @@ ...@@ -388,20 +388,23 @@
</div> </div>
<div class="tab-pane fade" id="pills-archive" role="tabpanel" aria-labelledby="pills-archive-tab"> <div class="tab-pane fade" id="pills-archive" role="tabpanel" aria-labelledby="pills-archive-tab">
<div class="inbox_archive"> <main id="archive">
<div class="heading_srch"> <div class="search_form">
<div class="srch_bar"> <form>
<div class="stylish-input-group"> <input type="search" name="search" placeholder="Search">
<input id="contactListKeyword" type="text" class="search-bar" placeholder="Search"> <span class="src_icon"></span>
<span class="input-group-addon"> <a href="#" class="cancel none" id="archiveCancel">Cancel</a>
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button> </form>
</span>
</div>
</div>
</div> </div>
<div id="archive_list" class="inbox_archive row"> <div class="archive_list content">
<ul id="archiveListUl">
</ul>
</div> </div>
<div class="archive_list">
<ul class="overlay_src_msg">
</ul>
</div> </div>
</main>
</div> </div>
<div id="archive_detail" class="archive_detail" > <div id="archive_detail" class="archive_detail" >
...@@ -757,59 +760,67 @@ ...@@ -757,59 +760,67 @@
</div> </div>
</script> </script>
<script id="archive-template" type="text/template"> <script id="archive-template" type="text/template">
<div class="archive_list col-12"> <li class="d-flex align-items-center">
<div class="archive_data"> <div class="w-100 archive_row">
<div class="archive_img"> <div class="archive_item d-flex flex-row align-items-center w-100">
<img src={{thumbnailImage}} alt=""> <div class="arhive_img">
<div class="img_wrap bg_blue">
<img src={{typeImage}} alt="" />
</div> </div>
<div class="archive_ib">
<div class="row">
<div class="archive_date_font col-10">
<span class="archive_date">{{insertDate}}</span>
</div> </div>
<div class="archive_type"> <div class="archive_desc">
<span class="text-truncate col-2 {{type}}">{{archiveType}}</span> <div class="archive_name">
<span>{{fileName}}</span>
</div> </div>
<div class="archive_date">
<span>{{insertDate}}</span>
</div> </div>
<p class="archive_file_name text-truncate">{{fileName}}</p>
</div> </div>
</div> </div>
</div> </div>
</li>
</script> </script>
<script id="archive-detail-template" type="text/template"> <script id="archive-detail-template" type="text/template">
<div id="archive_player" class="player"> <div id="archive_player" class="player">
</div> </div>
<ul class="archive_info"> <div class="archive_detail_desc">
<li class="fileName"> <div class="archive_detail_fl_nm item">
<h5>{{fileNameTitle}}</h5> <h2 class="ttl" id="archiveFileName">FileName</h2>
<p class="text-truncate">{{fileName}}</p> <span>{{fileName}}</span>
</li> </div>
<li class="insertDate"> <div class="archive_detail_sv_date item">
<h5>{{saveDateTitle}}</h5> <h2 class="ttl" id="archiveInsertDate">InsertDate</h2>
<p class="text-truncate">{{insertDate}}</p> <span>{{insertDate}}</span>
</li> </div>
<li class="chatRoomName"> <div class="archive_detail_room_nm item">
<h5>{{roomNameTitle}}</h5> <h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
<p class="text-truncate">{{chatRoomName}} <span>{{chatRoomName}}</span>
<input type="button" value="＞" id="joinChatRoom"> <button id="joinChatRoom">
</p> <img src="./icon/icon_archive_joinRoom.png" alt="">
</li> </button>
<li class="saveUser"> </div>
<h5>{{saveUserTitle}}</h5> <div class="archive_detail_sv_user item">
<ul class="save_user_list" id="save_user"> <h2 class="ttl" id="archiveSaveUser">SaveUser</h2>
</ul> <div class="d-flex flex-row">
</li> <div class="d-flex flex-column">
<li class="joinUser"> <img src="{{profileImage}}" alt="プロフィール画像">
<h5>{{attendUserTitle}}</h5> <span>{{userName}}</span>
<ul class="join_user_list" id="join_user"> </div>
</ul> </div>
</li> </div>
<div class="archive_detail_user_list item">
<h2 class="ttl" id="archiveAttendUser">AttendUser</h2>
<ul class="d-flex flex-row" id="attendUser">
</ul> </ul>
</div>
</div>
</script> </script>
<script id="archive-user-template" type="text/template"> <script id="archive-user-template" type="text/template">
<li class="archive_user"> <li>
<img src="{{profileImage}}" alt=""> <div class="d-flex flex-column attendUser">
<p>{{userName}}</p> <img src="{{profileImage}}" alt="プロフィール画像">
<span>{{userName}}</span>
</div>
</li> </li>
</script> </script>
<script src="./socket.io/dist/socket.io.js"></script> <script src="./socket.io/dist/socket.io.js"></script>
......
public/js/chat-ui.js
...@@ -892,6 +892,14 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) { ...@@ -892,6 +892,14 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#collaborationAllGroup").text(getLocalizedString("collaborationAllGroup")) $("#collaborationAllGroup").text(getLocalizedString("collaborationAllGroup"))
$("#collaborationFavorite").text(getLocalizedString("collaborationFavorite")) $("#collaborationFavorite").text(getLocalizedString("collaborationFavorite"))
$("#coviewCapture").text(getLocalizedString("coviewCapture")) $("#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"))
} }
// 画像の読み込みが全て終わったタイミングでコールバック実行 // 画像の読み込みが全て終わったタイミングでコールバック実行
...@@ -1246,7 +1254,7 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1246,7 +1254,7 @@ CHAT_UI.refreshArchiveScreen = function() {
$('.titleRoomName').text(archiveListTitle); $('.titleRoomName').text(archiveListTitle);
// 初期化 // 初期化
$('#archive_list').html(''); $('#archiveListUl').html('');
$('#pills-archive-tab').tab('show'); $('#pills-archive-tab').tab('show');
// アーカイブの様式を読み込む // アーカイブの様式を読み込む
...@@ -1258,50 +1266,39 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1258,50 +1266,39 @@ CHAT_UI.refreshArchiveScreen = function() {
// アーカイブ一覧取得＆表示 // アーカイブ一覧取得＆表示
var archiveList = CHAT_DB.getArchiveList(); var archiveList = CHAT_DB.getArchiveList();
archiveList.forEach(function(archive) { archiveList.forEach(function(archive) {
var archiveType = ''; var typeImage = "";
var css = '';
switch(archive.archiveType) { switch(archive.archiveType) {
case 0: case 0: // 画像
archiveType = getLocalizedString("archiveTypeImage"); typeImage = "./icon/icon_collabo_picture.png";
css = 'type_image';
break; break;
case 1: case 1: // 動画
archiveType = getLocalizedString("archiveTypeMovie"); typeImage = "./icon/icon_collabo_videocam.png";
css = 'type_movie';
break; break;
case 2: case 2: // 音声
archiveType = getLocalizedString("archiveTypeSound"); typeImage = "./icon/icon_collabo_headset.png";
css = 'type_sound';
break; break;
case 3: case 3: // 文書
// 今回のリリースに文書とその他は含めないため非表示 typeImage = "./icon/icon_collabo_document.png";
archiveType = getLocalizedString("archiveTypeDocument");
css = 'type_document';
break; break;
default: default: // その他
// 今回のリリースに文書とその他は含めないため非表示 typeImage = "";
archiveType = getLocalizedString("archiveTypeOther");
css = 'type_other';
} }
let html = Mustache.render(archiveTemplate, { let html = Mustache.render(archiveTemplate, {
id: archive.archiveId,
fileName: archive.archiveName, fileName: archive.archiveName,
thumbnailImage: archive.archiveUrl,
insertDate: archive.archiveDate, insertDate: archive.archiveDate,
archiveType: archiveType, typeImage: typeImage
archiveTypeCSS: css
}); });
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = $(jQuery.parseHTML(html)).on('click', function() {
// アーカイブ詳細画面へ遷移 // アーカイブ詳細画面へ遷移
$('#homeButton').hide(); $('#homeButton').hide();
$('.titleRoomName').show(); $('.titleRoomName').show();
$('#archive_list').hide(); $('#pills-archive').hide();
$('#archive_detail').show(); $('#archive_detail').show();
$('#bottomNav').hide(); $('#bottomNav').hide();
$("#backButton").show(); $("#backButton").show();
$('#backButton').off().on('click', function() { $('#backButton').off().on('click', function() {
// アーカイブ一覧に戻る // アーカイブ一覧に戻る
...@@ -1309,16 +1306,15 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1309,16 +1306,15 @@ CHAT_UI.refreshArchiveScreen = function() {
$("#backButton").hide(); $("#backButton").hide();
$('.titleRoomName').show(); $('.titleRoomName').show();
$('#archive_detail').hide(); $('#archive_detail').hide();
$('#archive_list').show(); $('#pills-archive').show();
$('#bottomNav').show(); $('#bottomNav').show();
}); });
// データの受け渡し // データの受け渡し
CHAT_UI.refreshArchiveDetailScreen(archive.archiveId); CHAT_UI.refreshArchiveDetailScreen(archive.archiveId);
}); });
$('#archive_list').append(obj); $('#archiveListUl').append(obj);
$('.archive_list').css('border-bottom', '1px solid #c4c4c4'); });
})
// loadingIndicatorを非表示 // loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
...@@ -1341,7 +1337,6 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1341,7 +1337,6 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
CHAT_DB.updateArchiveDetail(archiveId); CHAT_DB.updateArchiveDetail(archiveId);
} }
// アーカイブ詳細取得 // アーカイブ詳細取得
var archive = CHAT_DB.getArchiveDetail(archiveId); var archive = CHAT_DB.getArchiveDetail(archiveId);
...@@ -1352,14 +1347,11 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1352,14 +1347,11 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// アーカイブ情報を表示 // アーカイブ情報を表示
let html = Mustache.render(archiveDetailTemplate, { let html = Mustache.render(archiveDetailTemplate, {
fileNameTitle: getLocalizedString("fileNameTitle"),
fileName: archive.archiveName, fileName: archive.archiveName,
saveDateTitle: getLocalizedString("saveDateTitle"),
insertDate: archive.archiveDate, insertDate: archive.archiveDate,
roomNameTitle: getLocalizedString("roomNameTitle"),
chatRoomName: roomInfo.chatRoomName, chatRoomName: roomInfo.chatRoomName,
saveUserTitle: getLocalizedString("saveUserTitle"), profileImage: "",
attendUserTitle: getLocalizedString("attendUserTitle") userName: archive.userName
}); });
let obj = $(jQuery.parseHTML(html)); let obj = $(jQuery.parseHTML(html));
$('#archive_detail').append(obj); $('#archive_detail').append(obj);
...@@ -1374,7 +1366,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1374,7 +1366,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
break; break;
case 2: // 音声 case 2: // 音声
$('#archive_player').prepend('<audio class="archive_audio_player" src=' + archive.archiveUrl + ' controls></audio>'); $('#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" + '>');
break; break;
case 3: // 文書 case 3: // 文書
// リリースに文書とその他は含めないため今回は非表示 // リリースに文書とその他は含めないため今回は非表示
...@@ -1383,35 +1375,9 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1383,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(); 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; let attendUserList = archive.attendUserId;
attendUserList.forEach(function(user) { attendUserList.forEach(function(user) {
...@@ -1425,8 +1391,19 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1425,8 +1391,19 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
//TODO ポップアップを出す処理 //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を非表示 // loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
......
public/js/language_en.js
...@@ -76,15 +76,11 @@ $.lang.en = { ...@@ -76,15 +76,11 @@ $.lang.en = {
"collaborationAllGroup":"All Group", "collaborationAllGroup":"All Group",
"coviewCapture":"Capture", "coviewCapture":"Capture",
"archiveListTitle":"Archive", "archiveListTitle":"Archive",
"archiveTypeImage":"Image",
"archiveTypeMovie":"Movie",
"archiveTypeSound":"Sound",
"archiveTypeDocument":"Document",
"archiveTypeOther":"Other",
"archiveDetailTitle":"Detail", "archiveDetailTitle":"Detail",
"fileNameTitle":"File Name", "archiveCancel":"Cancel",
"saveDateTitle":"Save Date", "archiveFileName":"File Name",
"roomNameTitle":"ChatRoom Name", "archiveInsertDate":"Insert Date",
"saveUserTitle":"Save User", "archiveRoomName":"ChatRoom Name",
"attendUserTitle":"Attend User" "archiveSaveUser":"Save User",
"archiveAttendUser":"Attend User"
} }
public/js/language_ja.js
...@@ -76,15 +76,11 @@ $.lang.ja = { ...@@ -76,15 +76,11 @@ $.lang.ja = {
"collaborationAllGroup":"全グループ", "collaborationAllGroup":"全グループ",
"coviewCapture":"キャプチャ", "coviewCapture":"キャプチャ",
"archiveListTitle":"アーカイブ", "archiveListTitle":"アーカイブ",
"archiveTypeImage":"画像",
"archiveTypeMovie":"動画",
"archiveTypeSound":"音声",
"archiveTypeDocument":"文書",
"archiveTypeOther":"その他",
"archiveDetailTitle":"詳細", "archiveDetailTitle":"詳細",
"fileNameTitle":"ファイル名", "archiveCancel":"キャンセル",
"saveDateTitle":"保存日", "archiveFileName":"ファイル名",
"roomNameTitle":"チャットルーム名", "archiveInsertDate":"保存日",
"saveUserTitle":"保存ユーザー", "archiveRoomName":"チャットルーム名",
"attendUserTitle":"参加ユーザー" "archiveSaveUser":"保存ユーザー",
"archiveAttendUser":"参加ユーザー"
} }
public/js/language_ko.js
...@@ -76,15 +76,11 @@ $.lang.ko = { ...@@ -76,15 +76,11 @@ $.lang.ko = {
"collaborationAllGroup":"전체그룹", "collaborationAllGroup":"전체그룹",
"coviewCapture":"캡처", "coviewCapture":"캡처",
"archiveListTitle":"아카이브", "archiveListTitle":"아카이브",
"archiveTypeImage":"이미지",
"archiveTypeMovie":"동영상",
"archiveTypeSound":"음성",
"archiveTypeDocument":"문서",
"archiveTypeOther":"기타",
"archiveDetailTitle":"세부 묘사", "archiveDetailTitle":"세부 묘사",
"fileNameTitle":"파일 이름", "archiveCancel":"취소",
"saveDateTitle":"저장 일", "archiveFileName":"파일 이름",
"roomNameTitle":"대화방 이름", "archiveInsertDate":"저장 일",
"saveUserTitle":"저장 사용자", "archiveRoomName":"대화방 이름",
"attendUserTitle":"참여 사용자" "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