Skip to content

C
chat_webview
Commit 7e7bb511 by Takatoshi Miura
Options

アーカイブUI作成

parent f2274453
Showing with 163 additions and 3 deletions
public/css/chat.css
...@@ -759,3 +759,44 @@ a.article:hover { ...@@ -759,3 +759,44 @@ a.article:hover {
color: white; color: white;
text-align: center; text-align: center;
} }
.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;
}
.archive_data {
overflow:hidden;
clear:both;
}
.archive_img {
float: left;
padding: 10px;
width: 20%;
}
.archive_ib {
float: left;
padding: 15px;
width: 80%;
}
.archive_ib h5 {
font-size:1rem;
color:#464646;
margin:0 0 14px 0;
}
.archive_date {
display: inline-flex;
max-width: 100%;
}
public/index.html
...@@ -246,6 +246,23 @@ ...@@ -246,6 +246,23 @@
</div> </div>
</div> </div>
<div class="tab-pane fade" id="pills-archive" role="tabpanel" aria-labelledby="pills-archive-tab">
<div class="inbox_archive">
<div class="heading_srch">
<div class="srch_bar">
<div class="stylish-input-group">
<input id="contactListKeyword" type="text" class="search-bar" placeholder="Search">
<span class="input-group-addon">
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</span>
</div>
</div>
</div>
<div id="archive_list" class="inbox_archive row">
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab"> <div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
<div class="inbox_people"> <div class="inbox_people">
<div class="heading_srch"> <div class="heading_srch">
...@@ -322,6 +339,12 @@ ...@@ -322,6 +339,12 @@
<i class="fa fa-comments fa-6" aria-hidden="true"></i> <i class="fa fa-comments fa-6" aria-hidden="true"></i>
</a> </a>
</li> </li>
<!-- Display None (d-none) archive -->
<li class="nav-item d-none justify-content-center">
<a class="nav-link" id="pills-archive-tab" data-toggle="pill" href="#pills-archive" role="tab" aria-controls="pills-archive" aria-selected="false">
<i class="fa fa-comments fa-6" aria-hidden="true"></i>
</a>
</li>
<!-- Display None (d-none) chatList --> <!-- Display None (d-none) chatList -->
<li class="nav-item d-none justify-content-center"> <li class="nav-item d-none justify-content-center">
<a class="nav-link" id="pills-group-tab" data-toggle="pill" href="#pills-group" role="tab" aria-controls="pills-group" aria-selected="false"> <a class="nav-link" id="pills-group-tab" data-toggle="pill" href="#pills-group" role="tab" aria-controls="pills-group" aria-selected="false">
...@@ -508,6 +531,35 @@ ...@@ -508,6 +531,35 @@
</div> </div>
</div> </div>
</script> </script>
<script id="archive-template" type="text/template">
<div class="archive_list col-12" archive-name="{{fileName}}" archive-id="{{id}}">
<div class="archive_data">
<div class="archive_img">
<img src={{thumbnailImage}} alt="">
</div>
<div class="archive_ib">
<div class="row">
<div class="col-8">
<h5><span class="archive_date">{{time}}</span></h5>
</div>
<div class="col-4">
<span class="text-truncate room-name-font">{{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 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>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
......
public/js/chat-db.js
...@@ -56,4 +56,18 @@ CHAT_DB.getMyGroupUsers = function() { ...@@ -56,4 +56,18 @@ CHAT_DB.getMyGroupUsers = function() {
//String形式をJsonに変更してReturn //String形式をJsonに変更してReturn
return JSON.parse(android.getMyGroupUsers()); return JSON.parse(android.getMyGroupUsers());
} }
}; };
\ No newline at end of file
CHAT_DB.getArchiveList = function(archiveId) {
if (CHAT_UTIL.isIOS()) {
// String形式をJsonに変更してReturn
webkit.messageHandlers.getArchiveList.postMessage(archiveId);
return JSON.parse(iosArchiveList);
} else if (CHAT_UTIL.isAndroid()) {
//TODO Android処理追加必要
}
};
var iosArchiveList;
getIosArchiveList = function(archiveList) {
iosArchiveList = archiveList;
};
public/js/chat-ui.js
...@@ -473,7 +473,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) { ...@@ -473,7 +473,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
CHAT.globalSelectedUserList = []; CHAT.globalSelectedUserList = [];
break; break;
case '#pills-contact': case '#pills-contact':
$('#namecard').html(''); $('#namecard').html('');
$('#homeButton').show(); $('#homeButton').show();
...@@ -483,6 +483,14 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) { ...@@ -483,6 +483,14 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
$('#bottomNav').show(); $('#bottomNav').show();
break; break;
case '#pills-archive':
$('#homeButton').show();
$("#backButton").hide();
$('.titleRoomName').show();
$('#archive_list').show();
$('#bottomNav').show();
break;
case '#pills-user': case '#pills-user':
$("#backButton").show(); $("#backButton").show();
$("#userSelectionDeleteBtn").hide(); $("#userSelectionDeleteBtn").hide();
...@@ -539,6 +547,8 @@ $('a[data-toggle="pill"]').on('hide.bs.tab', function(e) { ...@@ -539,6 +547,8 @@ $('a[data-toggle="pill"]').on('hide.bs.tab', function(e) {
break; break;
case '#pills-contact': case '#pills-contact':
break; break;
case '#pills-archive':
break;
case '#pills-user': case '#pills-user':
$('#userListKeyword').val(''); $('#userListKeyword').val('');
break; break;
...@@ -903,6 +913,10 @@ $('#chatButton').on('click', function(event){ ...@@ -903,6 +913,10 @@ $('#chatButton').on('click', function(event){
CHAT_UI.refreshRoomList(chatRoomType.DM); CHAT_UI.refreshRoomList(chatRoomType.DM);
}); });
$('#archiveButton').on('click', function(event){
CHAT_UI.refreshArchiveScreen();
});
CHAT_UI.refreshContactScreen = function() { CHAT_UI.refreshContactScreen = function() {
//loadingIndicatorを表示 //loadingIndicatorを表示
$('#my_info').html(''); $('#my_info').html('');
...@@ -1209,3 +1223,43 @@ CHAT_UI.showUserNamecard = function(shopMemberId) { ...@@ -1209,3 +1223,43 @@ CHAT_UI.showUserNamecard = function(shopMemberId) {
// keyboard: false // keyboard: false
// }) // })
} }
CHAT_UI.refreshArchiveScreen = function() {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
//画面タイトル設定
let archiveListTitle = getLocalizedString("archiveListTitle");
$('.titleRoomName').text(archiveListTitle);
// 初期化
$('#archive_list').html('');
$('#pills-archive-tab').tab('show');
// アーカイブの様式を読み込む
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 アーカイブ詳細画面へ遷移する処理
});
$('#archive_list').append(obj);
})
// loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator();
}
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