Merge branch 'origin/develop_createRoom_UI' into origin/develop_apply_design_chat

# Conflicts: # public/css/chat.css # public/js/chat-db.js # public/js/chat-ui.js # public/js/language_en.js # public/js/language_ja.js # public/js/language_ko.js # public_new/archive.html # public_new/archive_detail.html # public_new/chat.html # public_new/chat_add_user.html # public_new/chat_add_user_confirm.html # public_new/chat_change_room_name.html # public_new/chat_make_room.html # public_new/chat_make_room_confirm.html # public_new/chat_room.html # public_new/collaboration_overlay_add_user_list.html # public_new/contact.html # public_new/css/archive.css # public_new/css/chat.css # public_new/css/collaboration.css # public_new/css/common.css # public_new/js/archive.js # public_new/js/chat-db.js # public_new/js/chat-ui.js # public_new/js/chat-websocket.js # public_new/js/chat.js # public_new/js/common.js # public_new/js/constant.js # public_new/js/contact.js # public_new/js/language_en.js # public_new/js/language_ja.js # public_new/js/language_ko.js # public_new/js/loading.js # public_new/loading.html # public_new/modal_chat_profile.html # public_new/modal_collabo_profile.html # public_new/modal_collabo_profile2.html # public_new/search_message_user_list.html # public_new/template/template_group_list.html # public_new/template/template_group_user_list.html # public_new/template/template_my_message.html # public_new/template/template_my_name_card.html # public_new/template/template_room_list.html # public_new/template/template_user_list.html # public_new/template/template_user_message.html # public_new/template/template_user_name_card.html

Merge branch 'origin/develop_createRoom_UI' into origin/develop_apply_design_chat
# Conflicts: # public/css/chat.css # public/js/chat-db.js # public/js/chat-ui.js # public/js/language_en.js # public/js/language_ja.js # public/js/language_ko.js # public_new/archive.html # public_new/archive_detail.html # public_new/chat.html # public_new/chat_add_user.html # public_new/chat_add_user_confirm.html # public_new/chat_change_room_name.html # public_new/chat_make_room.html # public_new/chat_make_room_confirm.html # public_new/chat_room.html # public_new/collaboration_overlay_add_user_list.html # public_new/contact.html # public_new/css/archive.css # public_new/css/chat.css # public_new/css/collaboration.css # public_new/css/common.css # public_new/js/archive.js # public_new/js/chat-db.js # public_new/js/chat-ui.js # public_new/js/chat-websocket.js # public_new/js/chat.js # public_new/js/common.js # public_new/js/constant.js # public_new/js/contact.js # public_new/js/language_en.js # public_new/js/language_ja.js # public_new/js/language_ko.js # public_new/js/loading.js # public_new/loading.html # public_new/modal_chat_profile.html # public_new/modal_collabo_profile.html # public_new/modal_collabo_profile2.html # public_new/search_message_user_list.html # public_new/template/template_group_list.html # public_new/template/template_group_user_list.html # public_new/template/template_my_message.html # public_new/template/template_my_name_card.html # public_new/template/template_room_list.html # public_new/template/template_user_list.html # public_new/template/template_user_message.html # public_new/template/template_user_name_card.html
bbe64164 · Kang Donghun · c74665ad · ce671c08 · bbe64164 · bbe64164
Commit bbe64164 authored Apr 01, 2021 by Kang Donghun
28 changed files
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -98,6 +98,7 @@ img {
  float: left;
  padding: 0 0 0 15px;
  width: 85%;
+  padding-top: 6px;
 }
 #room_list, #group_list, #user_list, #select_user_list {
@@ -506,7 +507,7 @@ a.article:hover {
  padding-left: 12%;
 }
 .userCheckBox{
-  margin-left: -12%;
+  margin-left: 80%;
 }
 .nav-item .dropdown-toggle::after{
@@ -710,7 +711,7 @@ a.article:hover {
 }
 .chat-list-type-btn {
-  width: 30%;
+  width: 40%;
 }
 #my_info > div > div {
  padding-left: 5%;
@@ -724,6 +725,10 @@ a.article:hover {
  padding-left: 5%;
 }
+#my_group_list > div > div {
+  padding-left: 5%;
+}
 .contact-seperator {
  width: 100%;
  background-color: #095395!important;
@@ -741,9 +746,6 @@ a.article:hover {
  min-height: 250px;
  top: 20%;
  background: #F7FFF4;
-}
-#namecard {
  z-index: 10051;
 }
@@ -760,6 +762,44 @@ a.article:hover {
  text-align: center;
 }
+<<<<<<< HEAD
+=======
+.border-bottom-gray {
+  border-bottom: 1px solid #c4c4c4;
+}
+#childGroupList  > div > div {
+  padding-left: 5%;
+}
+#userInGroupList  > div > div {
+  padding-left: 5%;
+}
+.group-navigater {
+  margin-right: 10px;
+}
+.namecard-action-area {
+  display: -webkit-box;
+}
+.namecard-action-btn {
+  text-align: center;
+}
+.name-chat {
+ background-color: yellow;
+}
+.name-voice {
+ background-color: green;
+}
+.name-favorite {
+ background-color: blue;
+}
+>>>>>>> origin/develop_createRoom_UI
 .inbox_archive {
  width: 100%;
 }
@@ -888,3 +928,7 @@ a.article:hover {
  text-align: center;
  overflow: hidden;
 }
+<<<<<<< HEAD
+=======
+>>>>>>> origin/develop_apply_design_chat
+>>>>>>> origin/develop_createRoom_UI
--- a/public/index.html
+++ b/public/index.html
@@ -221,7 +221,7 @@
    </div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
-      <div class="inbox_people">
+      <div class="inbox_people" >
        <div class="heading_srch">
          <div class="srch_bar">
            <div class="stylish-input-group">
@@ -232,15 +232,49 @@
            </div>
          </div>
        </div>
+        <div id="groupButtonArea" class="text-center border-bottom-gray">
+          <button type="button" class="btn btn-primary chat-list-type-btn" id="myGroupBtn"></button>
+          <button type="button" class="btn btn-primary chat-list-type-btn" id="allGroupBtn"></button>
+        </div>
+        <div id="myGroupArea">
          <div id="my_info" class="inbox_user row">
          </div>
          <label class="contact-seperator" id="favorite-seperator">Favorite</label>
          <div id="favorite_list" class="inbox_user row">
          </div>
          <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
          <div id="my_group_list" class="inbox_user row">
          </div>
+        </div>
+        <div id="allGroupArea">
+          <label class="contact-seperator" id="groupPathSeperator">GROUP PATH</label>
+          <div id="groupPathArea" style="float:left;">
+          </div>
+          <label class="contact-seperator" id="moveBtnSeperator">MOVE BUTTON</label>
+          <div id="groupBtnArea">
+            <div class="user_list col-12" id="rootGroupBtn">
+              <div class="user_people">
+                <div class="user_ib">
+                  <h5>MOVE TO ROOT GROUP</h5>
+                </div>
+              </div>
+            </div>
+            <div class="user_list col-12" id="parentGroupBtn">
+              <div class="user_people">
+                <div class="user_ib">
+                  <h5>MOVE TO PARENTS GROUP</h5>
+                </div>
+              </div>
+            </div>
+          </div>
+          <label class="contact-seperator" id="childGroupSeperator">CHILD GROUP</label>
+          <div id="childGroupList" class="inbox_user row group-search-list">
+          </div>
+          <label class="contact-seperator" id="groupUserSeperator">USERS IN GROUP</label>
+          <div id="userInGroupList" class="inbox_user row group-search-list">
+          </div>
+        </div>
      </div>
@@ -384,8 +418,9 @@
  </ul>
 </div>
+<div class="popup" id="myNamecard"></div>
+<div class="popup" id="userNamecard"></div>
-<div class="popup" id="namecard"></div>
 <nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav">
  <div class="col-4">
    <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
@@ -398,7 +433,7 @@
  </div>
 </nav>
 <script id="my-namecard-template" type="text/template">
-  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
+  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('myNamecard');"></i></div>
  <div class="namecard_img">
    <img src="./images/user-profile.png" alt>
    <div class="namedard-img-upload" >Upload</div>
@@ -411,7 +446,7 @@
  </div>
 </script>
 <script id="namecard-template" type="text/template">
-  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
+  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('userNamecard');"></i></div>
  <div class="namecard_img">
    <img src="./images/user-profile.png" alt>
    <div class="namecard-login-id">{{name}}</div>
@@ -421,11 +456,22 @@
    <li><b>{{.}}</b></li>
    {{/groupPathList}}
  </div>
+  <div class="text-center">
+    <button type="button" class="btn btn-primary" id="nameCardChatBtn" onclick="CHAT_UI.startChat('{{loginId}}','{{name}}');">{{chat}}</button>
+    <button type="button" class="btn btn-primary" id="nameCardVoiceBtn" onclick="CHAT_UI.startVoice();">{{voice}}</button>
+    {{#isFavorite}}
+    <button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
+    {{/isFavorite}}
+    {{^isFavotire}}
+    <button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
+    {{/isFavorite}}
+  </div>
 </script>
 <script id="message-template" type="text/template">
  <div class="incoming_msg">
    <div class="incoming_msg_img">
-      <img src={{{profileImage}}} alt="">
+      <img src={{{profileImage}}} alt="" onclick="CHAT_UI.makeNameCard({{shopMemberId}});" >
    </div>
    <div class="received_msg">
      <div class="received_withd_msg">
@@ -478,7 +524,7 @@
  </div>
 </script>
 <script id="group-template" type="text/template">
-  <div class="group_list col-12" data-name="{{name}}">
+  <div class="group_list col-12" data-name="{{name}}" data-id="{{id}}">
    <div class="group_people">
      <div class="group_img">
        <img src="./images/group-image.png" alt="">
@@ -512,6 +558,9 @@
    </div>
  </div>
 </script>
+<script id="group-navigater-template" type="text/template">
+  <label class="group-navigater" data-name="{{name}}" data-id="{{id}}">{{name}}</label>
+</script>
 <script id="favorite-user-template" type="text/template">
  <div class="user_list col-12" data-name="{{name}}">
    <div class="user_people">

--- a/public/js/chat-db.js
+++ b/public/js/chat-db.js
@@ -14,11 +14,14 @@ CHAT_DB.getRoomList = function(roomType) {
 //ロカールDBからログインしたユーザのデータを取得する。
 CHAT_DB.getMyInfo = function(input) {
+    var result = JSON.parse(android.getMyInfo());
+    CHAT.globalLoginParameter.shopMemberId =  result.shopMemberId;
+    console.log(CHAT.globalLoginParameter.shopMemberId);
    if (CHAT_UTIL.isIOS()) {
        //TODO IOS処理追加必要
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
-    	return JSON.parse(android.getMyInfo());
+    	return result;
    }
 };
@@ -58,6 +61,26 @@ CHAT_DB.getMyGroupUsers = function() {
    }
 };
+<<<<<<< HEAD
+=======
+CHAT_DB.getGroupInfo = function(groupId) {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getGroupInfo(groupId));
+    }
+};
+CHAT_DB.getNameCardData = function(shopMemberId) {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getNameCardData(shopMemberId));
+    }
+};
+>>>>>>> origin/develop_createRoom_UI
 CHAT_DB.getArchiveList = function() {
 	if (CHAT_UTIL.isIOS()) {
 		// String形式をJsonに変更してReturn
@@ -123,4 +146,7 @@ CHAT_DB.updateChatRoomInfo = function(roomId) {
 		//TODO Android処理追加必要
 	}
 };
+<<<<<<< HEAD
+=======
+>>>>>>> origin/develop_createRoom_UI
--- a/public/js/chat-ui.js
+++ b/public/js/chat-ui.js
--- a/public/js/chat-websocket.js
+++ b/public/js/chat-websocket.js
@@ -365,23 +365,20 @@ function setSocketAction () {
        $('#pills-group-tab').tab('show');
        $('#backButton').show();
        if (isInvite) {
-            $('.titleRoomName').text(memberSelectTitle);
            $('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
            $('#userSelectionConfirmBtn').show();
            $("#userSelectionConfirmBtn").off().on('click', function(){
                CHAT_UI.setConfirmButtonEvent(isInvite);
            });
        } else {
-            $('.titleRoomName').text(memberSelectTitle);
            $('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
            $('#userSelectionConfirmBtn').show();
            $("#userSelectionConfirmBtn").off().on('click', function(){
                CHAT_UI.setConfirmButtonEvent(isInvite);
            });
        }
+//
        if (CHAT.globalSelectedUserList.length > 0) {
            $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
        } else {

--- a/public/js/constant.js
+++ b/public/js/constant.js
@@ -25,3 +25,8 @@ const chatRoomType = {
    DM : "1",
    GROUP : "0"
 }
+const nameCardAreaId = {
+    MY : "myNamecard",
+    USER : "userNamecard"
+}
\ No newline at end of file
--- a/public/js/language_en.js
+++ b/public/js/language_en.js
@@ -59,6 +59,20 @@ $.lang.en = {
    "favorite":"Favorite List",
    "mygroup":"My Group",
    "groupChatRoom":"Group",
+<<<<<<< HEAD
+=======
+    "myGroup":"My Group",
+    "allGroup":"All Group",
+    "returnToRootGroup":"Return to Root Group",
+    "returnToParentGroup":"Return to Parent Group",
+    "quickBtn":"Quick Button",
+    "groupPath":"Group Path",
+    "childGroup":"Minor Group",
+    "groupUser":" Member List",
+    "chat":"Chat",
+    "voice":"Call",
+    "addFavorite":"Add Favorite"
+>>>>>>> origin/develop_createRoom_UI
    "archiveListTitle":"Archive",
    "archiveTypeImage":"Image",
    "archiveTypeMovie":"Movie",

--- a/public/js/language_ja.js
+++ b/public/js/language_ja.js
@@ -59,6 +59,20 @@ $.lang.ja = {
    "favorite":"お気に入りリスト",
    "mygroup":"マイグループ",
    "groupChatRoom":"グループ",
+<<<<<<< HEAD
+=======
+    "myGroup":"マイグループ",
+    "allGroup":"全グループ",
+    "returnToRootGroup":"トップグループに戻る",
+    "returnToParentGroup":"上位グループに戻る",
+    "quickBtn":"クイックボタン",
+    "groupPath":"グループパンクズ",
+    "childGroup":"下位グループ",
+    "groupUser":"所属ユーザ",
+    "chat":"チャット",
+    "voice":"通話",
+    "addFavorite":"お気に入り追加"
+>>>>>>> origin/develop_createRoom_UI
    "archiveListTitle":"アーカイブ",
    "archiveTypeImage":"画像",
    "archiveTypeMovie":"動画",

--- a/public/js/language_ko.js
+++ b/public/js/language_ko.js
@@ -59,6 +59,20 @@ $.lang.ko = {
    "favorite":"즐겨찾기리스트",
    "mygroup":"마이그룹",
    "groupChatRoom":"그룹",
+<<<<<<< HEAD
+=======
+    "myGroup":"내그룹",
+    "allGroup":"전그룹",
+    "returnToRootGroup":"최상위그룹으로 돌아가기",
+    "returnToParentGroup":"상위그룹으로 돌아가기",
+    "quickBtn":"퀵버튼",
+    "groupPath":"그룹 경로",
+    "childGroup":"하위 그룹",
+    "groupUser":"소속 사용자",
+    "chat":"채팅",
+    "voice":"통화",
+    "addFavorite":"즐겨찾기추가"
+>>>>>>> origin/develop_createRoom_UI
    "archiveListTitle":"아카이브",
    "archiveTypeImage":"이미지",
    "archiveTypeMovie":"동영상",

--- a/public_new/archive.html
+++ b/public_new/archive.html
@@ -64,7 +64,6 @@
      </ul>
    </div>
  </main>
  <!-- フッター -->
  <footer>
    <div class="footer-wrap">

--- a/public_new/chat.html
+++ b/public_new/chat.html
@@ -68,8 +68,6 @@
    <!-- オーバーレイ -->
    <div class="chat_list">
      <ul class="overlay_src_msg">
      </ul>
    </div>
  </main>

--- a/public_new/chat_add_user_confirm.html
+++ b/public_new/chat_add_user_confirm.html
@@ -78,8 +78,7 @@
          <li class="d-flex align-items-center">
            <div class="chat_item d-flex flex-row align-items-center w-100">
              <div class="chat_item_l">
-                <div class="thumbnail">
+                <div class="thumbnail"><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">
@@ -94,8 +93,7 @@
          <li class="d-flex align-items-center">
            <div class="chat_item d-flex flex-row align-items-center w-100">
              <div class="chat_item_l">
-                <div class="thumbnail">
+                <div class="thumbnail"><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">
@@ -110,8 +108,7 @@
          <li class="d-flex align-items-center">
            <div class="chat_item d-flex flex-row align-items-center w-100">
              <div class="chat_item_l">
-                <div class="thumbnail">
+                <div class="thumbnail"><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">
@@ -126,8 +123,7 @@
          <li class="d-flex align-items-center">
            <div class="chat_item d-flex flex-row align-items-center w-100">
              <div class="chat_item_l">
-                <div class="thumbnail">
+                <div class="thumbnail"><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">
@@ -142,8 +138,7 @@
          <li class="d-flex align-items-center">
            <div class="chat_item d-flex flex-row align-items-center w-100">
              <div class="chat_item_l">
-                <div class="thumbnail">
+                <div class="thumbnail"><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">
@@ -158,8 +153,7 @@
          <li class="d-flex align-items-center">
            <div class="chat_item d-flex flex-row align-items-center w-100">
              <div class="chat_item_l">
-                <div class="thumbnail">
+                <div class="thumbnail"><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">
@@ -174,8 +168,7 @@
          <li class="d-flex align-items-center">
            <div class="chat_item d-flex flex-row align-items-center w-100">
              <div class="chat_item_l">
-                <div class="thumbnail">
+                <div class="thumbnail"><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">

--- a/public_new/chat_make_room.html
+++ b/public_new/chat_make_room.html
--- a/public_new/chat_make_room_confirm.html
+++ b/public_new/chat_make_room_confirm.html
@@ -19,8 +19,8 @@
    <div class="row h-100 align-items-center">
      <div class="col-4 pr-0">
        <div class="nav-item">
-          <div class="nav_prev">
+          <div class="nav_prev" id="prevBtn">
-            <a href="chat_make_room.html"><span>ルーム開設</span></a>
+            <a href="chat_make_room.html"><span style="font-size: 13px;">ルーム開設</span></a>
          </div>
        </div>
      </div>
@@ -41,163 +41,19 @@
    <form action="chat_room.html" method="post">
      <!-- ルーム名入力 -->
      <div class="room_name">
-        <label for="room_name"><h2>ルーム名</h2></label>
+        <label><h2>ルーム名</h2></label>
-        <input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
+        <input type="text" class="input_name_room" name="room_name" id="newRoomName" placeholder="ルーム名を入力してください">
      </div>
      <!-- 参加者一覧 -->
      <div class="chat_list">
        <h2>参加者</h2>
        <ul class="p-0 chat_make_room_list">
-          <li class="d-flex align-items-center">
+          <div id="selectedUserList"></div>
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <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>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <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>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <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>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <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>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <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>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <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>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <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>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <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>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <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>
-              </div>
-            </div>
-          </li>
        </ul>
      </div>
      <!-- ルーム解説ボタン -->
-      <div class="make_room_btn">
+      <div class="make_room_btn" id="makeRoomBtn">
        <button type="button" name="button">
          チャット開始</button>
      </div>
@@ -205,10 +61,46 @@
  </main>
-<script src="./js/libs/jquery-3.3.1.min.js"></script>
+  <script src="./js/libs/jquery-3.3.1.min.js"></script>
-<script src="./js/libs/moment.js"></script>
+  <script src="./js/libs/moment.js"></script>
-<script src="./js/libs/bootstrap.min.js"></script>
+  <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
-<script src="./js/libs/jquery.mark.min.js"></script>
+  <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
-<script src="./js/chat.js"></script>
+  <script src="./js/libs/mustache.min.js"></script>
+  <script src="./js/libs/bootstrap.min.js"></script>
+  <script src="./js/libs/jquery.mark.min.js"></script>
+  <script src="./js/common.js"></script>
+  <script src="./js/loading.js"></script>
+  <script src="./js/language.js"></script>
+  <script src="./js/language_ko.js" charset="UTF-8"></script>
+  <script src="./js/language_ja.js" charset="UTF-8"></script>
+  <script src="./js/language_en.js" charset="UTF-8"></script>
+  <script src="./js/constant.js"></script>
+  <script src="./js/chat.js"></script>
+  <script src="./js/chat-ui.js"></script>
+  <script src="./js/chat-util.js"></script>
+  <script src="./js/chat-db.js"></script>
+  <script>
+    String.prototype.replaceAll = function(org, dest) {
+      return this.split(org).join(dest);
+    }
+    let CHAT_SERVER_URL = '';
+    let CMS_SERVER_URL = '';
+    let ASSET_PATH = './';
+    let PLATFORM = '';
+    let IS_MOBILE = true;
+    let IS_ONLINE = false;
+    android.getLoginParameter();
+    android.getGlobalParameter();
+    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
+      CHAT_SERVER_URL = chatServerUrl;
+      CMS_SERVER_URL = cmsServerUrl;
+      PLATFORM = platform;
+      IS_MOBILE = isMobile;
+      IS_ONLINE = isOnline;
+      CHAT_UI.showMakeRoomConfirmView();
+    };
+  </script>
 </body>
 </html>
--- a/public_new/chat_room.html
+++ b/public_new/chat_room.html
@@ -54,10 +54,7 @@
    <!-- フィルター -->
-    <div id="filter" class="user_list filter d-flex flex-row none">
+    <div id="filter" class="user_list filter d-flex flex-row none"></div>
-    </div>
    <div class="chat_list">
      <ul class="overlay_src_msg">
      </ul>
@@ -178,7 +175,6 @@
    android.getLoginParameter();
    android.getGlobalParameter();
    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
      CHAT_SERVER_URL = chatServerUrl;
      CMS_SERVER_URL = cmsServerUrl;

--- a/public_new/collaboration_overlay_add_user_list.html
+++ b/public_new/collaboration_overlay_add_user_list.html
@@ -61,8 +61,7 @@
              </div>
            </div>
            <div class="user_item_l">
-              <div class="thumbnail">
+<div class="thumbnail"><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="user_item_m">
@@ -85,8 +84,7 @@
              </div>
            </div>
            <div class="user_item_l">
-              <div class="thumbnail">
+<div class="thumbnail"><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="user_item_m">
@@ -109,8 +107,7 @@
              </div>
            </div>
            <div class="user_item_l">
-              <div class="thumbnail">
+<div class="thumbnail"><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="user_item_m">
@@ -133,8 +130,7 @@
              </div>
            </div>
            <div class="user_item_l">
-              <div class="thumbnail">
+<div class="thumbnail"><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="user_item_m">
@@ -157,8 +153,7 @@
              </div>
            </div>
            <div class="user_item_l">
-              <div class="thumbnail">
+<div class="thumbnail"><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="user_item_m">
@@ -181,8 +176,7 @@
              </div>
            </div>
            <div class="user_item_l">
-              <div class="thumbnail">
+<div class="thumbnail"><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="user_item_m">

--- a/public_new/css/chat.css
+++ b/public_new/css/chat.css
@@ -35,8 +35,8 @@ input[name="tab_item"] {
  clear: both;
  overflow: hidden;
 }
-#tab1:checked ~ #tab1_content,
+#tabMyGroupOnMakeRoom:checked ~ #tab1_content,
-#tab2:checked ~ #tab2_content{
+#tabAllGroupOnMakeRoom:checked ~ #tab2_content{
  display: block;
 }
@@ -96,48 +96,80 @@ input[name="tab_item"] {
  background: aliceblue;
 }
 /* サムネイル画像 */
+<<<<<<< HEAD
 .chat_item_l .thumbnail {
+=======
+.chat_item_l .thubnail {
+>>>>>>> origin/develop_createRoom_UI
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
 }
+<<<<<<< HEAD
 .chat_item_l .thumbnail img{
  width: 50px;
  height: 50px;
 }
 .chat_item_l .thumbnail4 img {
+=======
+.chat_item_l .thubnail img{
+  width: 50px;
+  height: 50px;
+}
+.chat_item_l .thubnail4 img {
+>>>>>>> origin/develop_createRoom_UI
  width: 25px;
  height: 25px;
  float: left;
 }
+<<<<<<< HEAD
 .chat_item_l .thumbnail3 .img_wrap:nth-child(1) {
+=======
+.chat_item_l .thubnail3 .img_wrap:nth-child(1) {
+>>>>>>> origin/develop_createRoom_UI
    width: 25px;
    height: 50px;
    position: relative;
    overflow: hidden;
    float: left;
 }
+<<<<<<< HEAD
 .chat_item_l .thumbnail3 .img_wrap:nth-child(1) img {
+=======
+.chat_item_l .thubnail3 .img_wrap:nth-child(1) img {
+>>>>>>> origin/develop_createRoom_UI
    width: 50px;
    height: 50px;
    position: absolute;
    left: -12px;
 }
+<<<<<<< HEAD
 .chat_item_l .thumbnail3 .img_wrap:nth-child(2) {
+=======
+.chat_item_l .thubnail3 .img_wrap:nth-child(2) {
+>>>>>>> origin/develop_createRoom_UI
    width: 25px;
    height: 25px;
    position: relative;
    overflow: hidden;
    float: left;
 }
+<<<<<<< HEAD
 .chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img {
    width: 25px;
    height: 30px;
 }
 .chat_item_l .thumbnail3 .img_wrap:nth-child(3) {
+=======
+.chat_item_l .thubnail3 .img_wrap:nth-child(2) img, .chat_item_l .thubnail3 .img_wrap:nth-child(3) img {
+    width: 25px;
+    height: 30px;
+}
+.chat_item_l .thubnail3 .img_wrap:nth-child(3) {
+>>>>>>> origin/develop_createRoom_UI
    width: 25px;
    height: 25px;
    position: relative;
@@ -145,20 +177,32 @@ input[name="tab_item"] {
    float: left;
 }
+<<<<<<< HEAD
 .chat_item_l .thumbnail2 .img_wrap:nth-child(1) {
+=======
+.chat_item_l .thubnail2 .img_wrap:nth-child(1) {
+>>>>>>> origin/develop_createRoom_UI
    width: 25px;
    height: 50px;
    position: relative;
    overflow: hidden;
    float: left;
 }
+<<<<<<< HEAD
 .chat_item_l .thumbnail2 .img_wrap:nth-child(2) {
+=======
+.chat_item_l .thubnail2 .img_wrap:nth-child(2) {
+>>>>>>> origin/develop_createRoom_UI
    width: 25px;
    height: 50px;
    position: relative;
    overflow: hidden;
 }
+<<<<<<< HEAD
 .chat_item_l .thumbnail2 .img_wrap img {
+=======
+.chat_item_l .thubnail2 .img_wrap img {
+>>>>>>> origin/develop_createRoom_UI
    width: 50px;
    height: 50px;
    position: absolute;

--- a/public_new/js/chat-db.js
+++ b/public_new/js/chat-db.js
@@ -82,6 +82,16 @@ CHAT_DB.getGroupInfo = function(groupId) {
    }
 };
+CHAT_DB.loadSelectedUsers = function() {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+        console.log(JSON.parse(android.getSelectedUserList()));
+    	return JSON.parse(android.getSelectedUserList());
+    }
+}
 CHAT_DB.getNameCardData = function(shopMemberId) {
    if (CHAT_UTIL.isIOS()) {
        //TODO IOS処理追加必要

--- a/public_new/js/chat-ui.js
+++ b/public_new/js/chat-ui.js
--- a/public_new/js/chatMakeRoom.js
+++ b/public_new/js/chatMakeRoom.js
+$(function() {
+  // メンバー検索
+  $('#chatMakeRoom .search_form input[type="search"]').keyup(function(){
+    var isAllGroup = $('#tabAllGroupOnMakeRoom').is(':checked');
+    $('.overlay_src_msg').empty();
+    //全グループ検索画面
+    if (isAllGroup) {
+        var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
+        if (keyword == '') {
+            return;
+        }
+        //グループデータ検索
+        var groupList = CHAT_DB.getGroupByName(keyword);
+        var groupTemplate;
+        $.get({ url: "./template/template_make_room_group_list.html", async: false }
+            , function(text) {
+                groupTemplate = text;
+        });
+        groupList.forEach(function(group) {
+            let html = Mustache.render(groupTemplate, {
+                name: group.groupName,
+                id: group.groupId,
+            });
+            let obj = jQuery.parseHTML(html);
+            $('.overlay_src_msg').append(obj);
+        })
+        //ユーザデータ検索
+        var userList = CHAT_DB.getAllGroupShopMemberByName(keyword);
+        var userTemplate;
+        $.get({ url: "./template/template_make_room_user_list.html", async: false }
+            , function(text) {
+                userTemplate = text;
+        });
+        userList.forEach(function(user) {
+            user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+            let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+                return shopMemberId == user.shopMemberId;
+            })
+            if (findObj) {
+                user.checked = 'checked';
+            }
+        });
+        let html = Mustache.render(userTemplate, {
+            userList: userList
+        });
+        let obj = jQuery.parseHTML(html);
+        $('.overlay_src_msg').append(obj);
+　　//連絡先画面
+    } else {
+        var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
+        if (keyword == '') {
+            return;
+        }
+        var userList = CHAT_DB.getMyGroupShopMemberByName(keyword);
+        var userTemplate;
+        $.get({ url: "./template/template_make_room_user_list.html", async: false }
+            , function(text) {
+                userTemplate = text;
+        });
+        userList.forEach(function(user) {
+            user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+            let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+                return shopMemberId == user.shopMemberId;
+            })
+            if (findObj) {
+                user.checked = 'checked';
+            }
+        });
+        let html = Mustache.render(userTemplate, {
+            userList: userList
+        });
+        let obj = jQuery.parseHTML(html);
+        $('.overlay_src_msg').html(obj);
+    }
+  });
+});
--- a/public_new/js/constant.js
+++ b/public_new/js/constant.js
--- a/public_new/js/loading.js
+++ b/public_new/js/loading.js
-$(window).load(function () { //読み込み完了したら実行する
+$(window).on('load',function () { //読み込み完了したら実行する
  $('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す
  $('#loader').delay(600).fadeOut(300);
 });

--- a/public_new/template/template_make_room_confirm_user_list.html
+++ b/public_new/template/template_make_room_confirm_user_list.html
+<ul class="p-0 chat_make_room_list">
+    <li class="d-flex align-items-center">
+        <div class="chat_item d-flex flex-row align-items-center w-100">
+            <div class="chat_item_l">
+                <div class="thubnail">
+                    <div class="img_wrap"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/></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">{{name}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+</ul>
\ No newline at end of file
--- a/public_new/template/template_make_room_group_list.html
+++ b/public_new/template/template_make_room_group_list.html
+<li class="d-flex align-items-center">
+    <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});">
+        <div class="chat_item d-flex flex-row align-items-center">
+            <div class="chat_item_l">
+                <div class="thubnail">
+                    <img src="icon/icon_folder.png" alt="フォルダ" />
+                </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">{{name}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </a>
+</li>
\ No newline at end of file
--- a/public_new/template/template_make_room_group_path.html
+++ b/public_new/template/template_make_room_group_path.html
+<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});"><span>{{name}}</span></a>
\ No newline at end of file
--- a/public_new/template/template_make_room_group_user_list.html
+++ b/public_new/template/template_make_room_group_user_list.html
+<div class="category"><div class="category_name"><span>{{groupName}}</span></div></div>
+<ul class="p-0 chat_make_room_list">
+    {{#groupUserList}}
+    <li class="d-flex align-items-center">
+        <div class="chat_item d-flex flex-row align-items-center w-100">
+            <div class="chat_item_l_chk">
+                <div class="checkbox">
+                    <label>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <span class="checkbox-parts"></span>
+                    </label>
+                </div>
+            </div>
+            <div class="chat_item_l">
+                <div class="thubnail">
+                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
+                </div>
+            </div>
+            <div class="chat_item_m">
+                <div class="d-flex flex-column">
+                    <div class="chat_item_t">
+                        <span class="chat_item_ttl">{{shopMemberName}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+    {{/groupUserList}}
+</ul>
\ No newline at end of file
--- a/public_new/template/template_make_room_user_list.html
+++ b/public_new/template/template_make_room_user_list.html
+<ul class="p-0 chat_make_room_list">
+    {{#userList}}
+    <li class="d-flex align-items-center">
+        <div class="chat_item d-flex flex-row align-items-center w-100">
+            <div class="chat_item_l_chk">
+                <div class="checkbox">
+                    <label>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}"  name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <span class="checkbox-parts"></span>
+                    </label>
+                </div>
+            </div>
+            <div class="chat_item_l">
+                <div class="thubnail">
+                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
+                </div>
+            </div>
+            <div class="chat_item_m">
+                <div class="d-flex flex-column">
+                    <div class="chat_item_t">
+                        <span class="chat_item_ttl">{{shopMemberName}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+    {{/userList}}
+</ul>
\ No newline at end of file
--- a/public_new/template/template_user_list.html
+++ b/public_new/template/template_user_list.html