Skip to content

C
chat_webview
Commit bb64ab0d by Lee Munkyeong
Options

チャット画面UI

parent ed4601f6
Showing with 73 additions and 412 deletions
public_new/chat.html
......@@ -21,7 +21,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>
......@@ -52,388 +52,18 @@
</div>
<!-- タブ -->
<div class="content tabs">
<input id="tab1" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab1">グループ</label>
<input id="tab2" type="radio" name="tab_item">
<label class="tab_item" for="tab2">DM</label>
<input id="tabGroup" type="radio" name="tab_item">
<label class="tab_item" for="tabGroup">グループ</label>
<input id="tabDM" type="radio" name="tab_item" checked>
<label class="tab_item" for="tabDM">DM</label>
<div class="tab_content" id="tab1_content">
<div class="chat_list" id="dmChatList">
<ul id="chatRoomList">
<li class="d-flex align-items-center">
<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>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail3 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>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail2 thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="chat_list" id="groupChatList">
</div>
</div>
<div class="tab_content" id="tab2_content">
<div class="chat_list">
<ul>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<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="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="chat_list" id="dmChatList">
</div>
</div>
</div>
<!-- オーバーレイ -->
<div class="chat_list">
......
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