Skip to content

C
chat_webview
Commit 2f3a97b0 by Lee Munkyeong
Options

連絡先UI作成

parent e26e1370
Showing with 114 additions and 3 deletions
public/css/chat.css
......@@ -389,7 +389,7 @@ a.article:hover {
position:fixed;
width:60px;
height:60px;
bottom:20px;
bottom:60px;
right:18px;
background-color:#095395;
color:#FFF;
......
public/index.html
......@@ -221,6 +221,28 @@
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="inbox_people">
<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="my_info" class="inbox_user row">
</div>
<div id="favorite_list" class="inbox_user row">
</div>
<div id="my_group_list" class="inbox_user row">
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
<div class="inbox_people">
<div class="heading_srch">
......@@ -291,6 +313,12 @@
<i class="fa fa-comments fa-6" aria-hidden="true"></i>
</a>
</li>
<!-- Display None (d-none) contact -->
<li class="nav-item d-none justify-content-center">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">
<i class="fa fa-comments fa-6" aria-hidden="true"></i>
</a>
</li>
<!-- Display None (d-none) chatList -->
<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">
......@@ -326,6 +354,17 @@
</li>
</ul>
</div>
<nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav">
<div class="col-4">
<img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
</div>
<div class="col-4">
<img src="./icon/ic_communication_menu.png" style="width: 35%;" id="chatButton">
</div>
<div class="col-4">
<img src=".//icon/home_common_content_icon_on.png" style="width: 35%;" id="archiveButton">
</div>
</nav>
<script id="message-template" type="text/template">
<div class="incoming_msg">
<div class="incoming_msg_img">
......@@ -385,7 +424,7 @@
<div class="group_list col-12" data-name="{{name}}">
<div class="group_people">
<div class="group_img">
<img src="${chatUrl}images/group-image.png" alt="">
<img src="./images/group-image.png" alt="">
</div>
<div class="group_ib">
<h5>{{name}}</h5>
......
public/js/chat-ui.js
......@@ -4,11 +4,12 @@ var CHAT_UI = {};
$(function() {
let navbarHeight = document.getElementsByClassName("navbar")[0].offsetHeight
let searchBarHeight = document.getElementsByClassName("search-bar-fixed")[0].offsetHeight
let footerHeight = document.getElementsByClassName("footer-nav")[0].offsetHeight
$(".tab-pane").css('padding', `${navbarHeight + 'px'} 0px 0px`)
/* チャットルーム一覧画面スクロール範囲
* 画面の高さ - (画面上部タイトルの高さ + ルーム名検索欄の高さ) */
$(".inbox_chat").css('max-height', `calc(100vh - ${(navbarHeight + searchBarHeight) + 'px'})`)
$(".inbox_chat").css('max-height', `calc(100vh - ${(navbarHeight + searchBarHeight + footerHeight) + 'px'})`)
$('.roomListIcon').hide();
$('#userSelectionDeleteBtn').hide();
......@@ -412,6 +413,17 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
CHAT.globalSelectedUserList = [];
break;
case '#pills-contact':
console.log('#pills-contact');
$('#homeButton').show();
$("#backButton").hide();
$('.titleRoomName').show();
$('#my_info').show();
$('#room_list').hide();
$('#room-search').hide();
break;
case '#pills-user':
$("#backButton").show();
$("#userSelectionDeleteBtn").hide();
......@@ -457,10 +469,20 @@ $('a[data-toggle="pill"]').on('hide.bs.tab', function(e) {
break;
case '#pills-chatlist':
$('#room-search').val('');
$('#room-search').show();
break;
case '#pills-group':
$('#groupListKeyword').val('');
break;
case '#pills-contact':
$('#select_user_list').html('');
$('#selectUserListKeyword').val('');
$('.titleRoomName').show();
$('.user_people').css("paddingLeft", "12%");
$('#my_info').show();
$('#room_list').hide();
$('#room-search').hide();
break;
case '#pills-user':
$('#userListKeyword').val('');
break;
......@@ -739,6 +761,7 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#groupListKeyword").attr("placeholder", getLocalizedString("groupSearch"))
$("#contactListKeyword").attr("placeholder", getLocalizedString("contactSearch"))
$("#room-search").attr("placeholder",$("#room-search").attr("placeholder")+getLocalizedString("room_search_placeholder"));
$("#userListKeyword").attr("placeholder", getLocalizedString("userSearch"))
$("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"))
......@@ -766,6 +789,55 @@ CHAT_UI.waitForLoadingImage = function(div, callback) {
});
}
$('#contactButton').on('click', function(event){
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
$('#pills-contact-tab').tab('show');
//画面タイトル設定
let contactListTitle = getLocalizedString("contactListTitle");
$('.titleRoomName').text(contactListTitle);
// グループの様式を読み込む
const groupTemplate = $('#group-template').html();
// ユーザの様式を読み込む
const userTemplate = $('#user-template').html();
var myInfo = {
"shopMemberId":"1",
"shopMemberName":"Test",
}
myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileImagePath)
//TODO get my Info
let html = Mustache.render(userTemplate, {
id: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click',function(){
//TODO need onClick Action
console.log('myInfoClick');
});
$('#my_info').append(obj);
//TODO get favorite list
//TODO get my group user list
console.log('LOAD DONE CONTACT SCREEN');
CHAT_UI.dismissLoadingIndicator();
});
CHAT_UI.refreshRoomList = function() {
var rooms = CHAT_DB.getRoomList();
CHAT.globalIsInvite = false;
......
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