Skip to content

C
chat_webview
Commit bb64ab0d by Lee Munkyeong
Options

チャット画面UI

parent ed4601f6
Showing with 65 additions and 34 deletions
public_new/contact.html
......@@ -22,7 +22,7 @@
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev">
<a href="#"><span>ホーム</span></a>
<a href="#" class="home_btn"><span>ホーム</span></a>
</div>
</div>
</div>
......@@ -55,7 +55,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img id="myImg" src="img/noImage.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img id="myImg" src="img/noImage.png" onError="this.src='./img/noImage.png'" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......
public_new/css/chat.css
......@@ -42,6 +42,11 @@ input[name="tab_item"] {
display: block;
}
#tabGroup:checked ~ #tab1_content,
#tabDM:checked ~ #tab2_content{
display: block;
}
.tabs input:checked + .tab_item {
background-color: #0070CA;
color: #fff;
......@@ -127,7 +132,7 @@ input[name="tab_item"] {
}
.chat_item_l .thubnail3 .img_wrap:nth-child(2) img, .chat_item_l .thubnail3 .img_wrap:nth-child(3) img {
width: 25px;
height: 25px;
height: 30px;
}
.chat_item_l .thubnail3 .img_wrap:nth-child(3) {
width: 25px;
......
public_new/js/chat-ui.js
......@@ -1003,6 +1003,12 @@ CHAT_UI.refreshContactScreen = function() {
}
CHAT_UI.refreshRoomList = function(roomType) {
if (roomType == chatRoomType.DM) {
$('#tabDM').prop('checked', true);
} else {
$('#tabGroup').prop('checked', true);
}
if (IS_ONLINE == 'true') {
android.updateRoomList();
}
......@@ -1011,19 +1017,23 @@ CHAT_UI.refreshRoomList = function(roomType) {
activeRoomId = null;
console.log(rooms);
// #36146に対応
$('.chat_list').empty();
$('#groupChatList').empty();
$('#dmChatList').empty();
let roomListTitle = getLocalizedString("roomListTitle");
$('#chatTitle').text(roomListTitle);
if (rooms.length === 0) {
console.log('noRoom')
// 検索結果がない場合のメッセージを追加
if (!keywordSearchMode) {
let emptyListString = getLocalizedString("roomListEmptyString")
$('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
} else {
let emptyListString = getLocalizedString("searchRoomListEmptyString")
$('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
}
let emptyListString = getLocalizedString("roomListEmptyString")
switch(roomType) {
case chatRoomType.GROUP:
$('#groupChatList').append(`<center class="text-secondary">${emptyListString}</center>`);
break;
case chatRoomType.DM:
$('#dmChatList').append(`<center class="text-secondary">${emptyListString}</center>`);
break;
default:
}
}
var template;
......@@ -1031,6 +1041,7 @@ CHAT_UI.refreshRoomList = function(roomType) {
, function(text) {
template = text;
});
console.log(rooms);
rooms.forEach(function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) {
......@@ -1042,14 +1053,25 @@ CHAT_UI.refreshRoomList = function(roomType) {
//TODO 協業の場合処理追加必要
if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
var attendUserName = [];
room.attendUsers.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
attendUserName.push(user.shopMemberName);
});
var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
if (room.chatRoomName == "") {
room.chatRoomName = attendUserName.join(', ');
}
let html = Mustache.render(template, {
thumbnailCount: thumbnailCount,
roomName: room.chatRoomName,
roomId: room.chatRoomId,
profileImage: room.profileImagePath,
lastMessage: displayMsg ,
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
userCnt: room.userCount
userCnt: room.attendUsers.length + 1,
attendUsers: room.attendUsers
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() {
......@@ -1058,13 +1080,15 @@ CHAT_UI.refreshRoomList = function(roomType) {
CHAT_UI.joinRoom(roomId,roomName);*/
//TODO ルームに入る処理追加必要
});
console.log(obj);
// ルームグループごとに追加。
switch(roomType) {
case chatRoomType.GROUP:
console.log(roomType);
$('#groupChatList').append(obj);
break;
case chatRoomType.DM:
console.log(roomType);
$('#dmChatList').append(obj);
break;
default:
......@@ -1155,21 +1179,20 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) {
};
$('#dmBtn').on('click', function(e) {
$('#tabDM').on('click', function(e) {
CHAT_UI.refreshRoomList(chatRoomType.DM);
});
$('#groupBtn').on('click', function(e) {
$('#tabGroup').on('click', function(e) {
CHAT_UI.refreshRoomList(chatRoomType.GROUP);
});
$('#myGroupBtn').on('click', function(e) {
$('#myGroupArea').show();
$('#allGroupArea').hide();
$('#tabAllGroup').on('click', function(e) {
CHAT_UI.refreshAllGroupSearch('0');
});
$('#tabAllGroup').on('click', function(e) {
CHAT_UI.refesshAllGroupSearch('0')
$('#tabMyGroup').on('click', function(e) {
CHAT_UI.refreshContactScreen();
});
CHAT_UI.favoriteUserChange = function(shopMemberId, star) {
......@@ -1217,7 +1240,7 @@ CHAT_UI.insertFavoriteGroup = function(groupId) {
};
//全グループ検索画面表示。
CHAT_UI.refesshAllGroupSearch = function(groupId) {
CHAT_UI.refreshAllGroupSearch = function(groupId) {
$('.cancel').addClass('none');
$('.search_form input').removeClass('focus');
......@@ -1246,12 +1269,12 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
//上位グループ、トップグループ遷移ボタンのイベント追加。
if (typeof result.parentGroupId !== 'undefined') {
$('#parentGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
CHAT_UI.refreshAllGroupSearch(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== 'undefined') {
$('#rootGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.rootGroupId);
CHAT_UI.refreshAllGroupSearch(result.rootGroupId);
});
}
......
public_new/js/common.js
// アコーディオン
$('.category').on('click',function () {
$('.category').on('click', function() {
$(this).toggleClass("open");
$(this).next().slideToggle();
});
$('.home_btn').on('click', function() {
android.goHome();
});
$(function() {
var h = $(window).height(); //画面の高さを取得
......
public_new/template/template_group_list.html
<li class="d-flex align-items-center">
<a href="#" class="w-100" onclick="CHAT_UI.refesshAllGroupSearch({{id}});">
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupSearch({{id}});">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
......
public_new/template/template_group_path.html
<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refesshAllGroupSearch({{id}});"><span>{{name}}</span></a>
\ No newline at end of file
<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refreshAllGroupSearch({{id}});"><span>{{name}}</span></a>
\ No newline at end of file
public_new/template/template_room_list.html
......@@ -2,11 +2,13 @@
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail4 thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thubnail{{thumbnailCount}} thubnail">
{{#attendUsers}}
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
{{/attendUsers}}
{{^attendUsers}}
<div class="img_wrap"><img src='./img/noImage.png'/></div>
{{/attendUsers}}
</div>
</div>
<div class="chat_item_m px-0">
......@@ -15,9 +17,7 @@
<div class="chat_item_t ">
<span class="chat_item_ttl">{{roomName}}</span>
</div>
<span class="chat_item_num">({{userCnt}})</span>
</div>
<div class="chat_item_desc">
{{lastMessage}}
......
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