Merge branch 'design/playground' into 'develop'

Design/playground

See merge request !191

public_new/archive.html

@@ -66,7 +66,7 @@
     </div>
   </main>
   <!-- フッター -->
-  <footer>
+  <footer id="footer-main">
     <div class="footer-wrap">
       <div class="d-flex justify-content-around h-100">
         <div class="footer_item">

public_new/archive_detail.html

@@ -135,7 +135,7 @@
           <div class="modal-header border-0">
             <div class="profile_desc d-flex flex-row">
               <img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/>
-              <div class="profile_name"><span>{{name}}</span></div>
+              <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
             </div>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>

public_new/chat.html

@@ -54,9 +54,9 @@
     <!-- タブ -->
     <div class="content tabs">
       <input id="tabGroup" type="radio" name="tab_item">
-      <label class="tab_item" for="tabGroup">グループ</label>
+      <label class="tab_item m-0" for="tabGroup">グループ</label>
       <input id="tabDM" type="radio" name="tab_item">
-      <label class="tab_item" for="tabDM">DM</label>
+      <label class="tab_item m-0" for="tabDM">DM</label>
       <div class="tab_content" id="tab1_content">
         <div class="chat_list" id="groupChatList">
         </div>
@@ -73,7 +73,7 @@
     </div>
   </main>
   <!-- フッター -->
-  <footer>
+  <footer id="footer-main">
     <div class="footer-wrap">
       <div class="d-flex justify-content-around h-100">
         <div class="footer_item">

public_new/chat_add_user.html

@@ -54,9 +54,9 @@
     <!-- タブ -->
     <div class="content tabs">
       <input id="tabMyGroupOnAddUser" type="radio" name="tab_item" checked>
-      <label class="tab_item" for="tabMyGroupOnAddUser">マイグループ</label>
+      <label class="tab_item m-0" for="tabMyGroupOnAddUser">マイグループ</label>
       <input id="tabAllGroupOnAddUser" type="radio" name="tab_item">
-      <label class="tab_item" for="tabAllGroupOnAddUser">全グループ</label>
+      <label class="tab_item m-0" for="tabAllGroupOnAddUser">全グループ</label>
       <div class="tab_content" id="tab1_content">
         <div class="chat_list">
           <!-- お気に入りグループ -->
@@ -74,7 +74,7 @@
               <a href="#" class="w-100" id="rootGroupBtnForAddUser">
                 <div class="chat_item d-flex flex-row align-items-center">
                   <div class="chat_item_l">
-                    <div class="thumbnail">
+                    <div class="thumbnail-icon">
                       <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
                     </div>
                   </div>
@@ -92,7 +92,7 @@
               <a href="#" class="w-100" id="parentGroupBtnForAddUser">
                 <div class="chat_item d-flex flex-row align-items-center">
                   <div class="chat_item_l">
-                    <div class="thumbnail">
+                    <div class="thumbnail-icon">
                       <img src="icon/icon_prev.png" alt="上位グループに戻る" />
                     </div>
                   </div>

public_new/chat_make_room.html

@@ -44,7 +44,7 @@
   <main id="chatMakeRoom">
     <form id="makeRoomForm" action="chat_make_room_confirm.html" method="post">
       <!-- ユーザー検索 -->
-      <div class="search_form my-2">
+      <div class="search_form">
         <input type="search" name="search" placeholder="ユーザー検索" maxlength="30">
         <span class="src_icon"></span>
         <a href="#" class="cancel none">キャンセル</a>
@@ -54,9 +54,9 @@
       <!-- タブ -->
       <div class="content tabs">
         <input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item" checked>
-        <label class="tab_item" for="tabMyGroupOnMakeRoom">マイグループ</label>
+        <label class="tab_item m-0" for="tabMyGroupOnMakeRoom">マイグループ</label>
         <input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item">
-        <label class="tab_item" for="tabAllGroupOnMakeRoom">全グループ</label>
+        <label class="tab_item m-0" for="tabAllGroupOnMakeRoom">全グループ</label>
         <div class="tab_content" id="tab1_content">
           <div class="chat_list">
             <!-- お気に入りグループ -->

public_new/chat_room.html

@@ -43,8 +43,8 @@
       </div>
       <div class="col-4 pl-0">
         <div class="nav-item text-right">
-          <a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a>
-          <a href="#" data-toggle="modal" data-target="#menuModalCenter" id="roomMenu" class="none"><img
+          <a href="#" class="search_menu mx-2"><img src="icon/icon_search.png" alt="検索"></a>
+          <a href="#" data-toggle="modal" data-target="#menuModalCenter" id="roomMenu" class="none mx-1"><img
               src="icon/icon_room_menu.png" alt="メニュー"></a>
         </div>
       </div><!-- .col -->

public_new/collaboration.html

@@ -11,6 +11,8 @@
   <link href="./fontawesome/css/all.css" rel="stylesheet">
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/common.css">
+  <link rel="stylesheet" href="./css/contact.css">
+  <link rel="stylesheet" href="./css/chat.css">
   <link rel="stylesheet" href="./css/collaboration.css">
   <link rel="stylesheet" href="./css/footer.css">
   <link rel="stylesheet" href="./css/font-awesome.css">
@@ -24,16 +26,26 @@
   <header id="collabo_header">
     <div class="d-flex align-items-center h-100">
       <div class="collabo_nav_l text-left w-100">
-        通話中
+        <div class="d-flex flex-row">
+          <span class="collabo-label collaboration_contents voice_contents">音声</span>
+          <span class="collabo-label collaboration_contents video_contents">動画</span>
+          <span class="collabo-label collaboration_contents picture_contents">写真</span>
+          <span class="collabo-label collaboration_contents document_contents">文書</span>
+          <span class="collabo-label collaboration_contents board_contents">ボード</span>
+          <span class="mx-3 host_contents">司会者</span>
+          <span class="mx-3 none">参加者</span>
+        </div>
       </div>
       <div class="collabo_nav_r">
         <div class="text-right d-flex align-items-center">
           <button type="button" name="button"
-            class="btn user_btn collaboration_contents picture_contents video_contents board_contents"></button>
+            class="btn user_btn"></button>
           <button type="button" name="button" class="btn add_user_btn none"></button>
-          <button type="button" name="button" class="btn menu_btn host_contents"></button>
-          <button type="button" name="button" class="btn start_pip_btn collaboration_contents document_contents"
-            onclick="startPipMode();"></button>
+          <div class="menu-icon menu_btn host_contents" onclick="this.classList.toggle('hover');">
+            <div class="menu-bar menu-bar1"></div>
+            <div class="menu-bar menu-bar2"></div>
+            <div class="menu-bar menu-bar3"></div>
+          </div>
           <!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
         </div>
       </div>
@@ -45,6 +57,24 @@
   <!-- コンテンツ -->
   <main id="collabo_main" class="none">
     <div class="document_wrap">
+       <!-- 音声共有 -->
+       <div class="talking_area icon_talking_wrap d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents voice_contents none">
+        <div class="talking_img_wrap">
+          <img src="icon/icon_talking_white.png" alt="通話中">
+        </div>
+        <span class="text-white mt-4">通話中</span>
+      </div>
+      <!-- 文書共有 -->
+      
+        <div class="start_pip_area d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents document_contents none">
+          <div class="start_pip_img_wrap">
+            <a href="javascript:startPipMode();">
+              <img src="icon/icon_start_pip.png" alt="文書共有">
+            </a>
+          </div>
+          <span class="text-white mt-2">共有する</span>
+        </div>
+
       <div class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
       </div>
     </div>
@@ -80,71 +110,17 @@
   <div id="modal_collabo_host_request"></div>
 
   <!-- フッター -->
-  <footer id="collabo_footer_menu" class="active">
-    <button type="button" name="button" class="footer_menu_btn"></button>
-    <div class="footer_menu-wrap d-flex justify-content-around h-100">
-      <div class="d-flex align-items-center h-100">
-        <div class="footer_menu_item photo_select_button collaboration_contents picture_contents">
-          <div class="img_wrap bg_blue" id="photo_open_place_holder">
-            <img src="icon/icon_collabo_picture.png" alt="写真">
-          </div>
-        </div>
-        <div class="footer_menu_item">
-          <div class="img_wrap bg_red" id="penBtn">
-            <img src="icon/icon_collabo_pen_white.png" alt="ペン">
-          </div>
-        </div>
-        <div class="footer_menu_item none">
-          <div class="img_wrap bg_blue">
-            <img src="icon/icon_collabo_place_white.png" alt="場所">
-          </div>
-        </div>
-        <div class="footer_menu_item">
-          <div class="img_wrap bg_blue" id="eraserBtn">
-            <img src="icon/icon_collabo_delete_white.png" alt="削除">
-          </div>
-        </div>
-      </div>
-      <div class="d-flex align-items-center h-100 none">
-        <div class="footer_menu_item">
-          <div class="img_wrap bg_gray">
-            <img src="icon/icon_collabo_rewind_white.png" alt="戻る">
-          </div>
-        </div>
-        <div class="footer_menu_item">
-          <div class="img_wrap bg_gray">
-            <img src="icon/icon_collabo_forward_white.png" alt="進む">
-          </div>
-        </div>
-      </div>
-      <div class="d-flex align-items-center h-100 collaboration_contents video_contents_host">
-        <div class="footer_menu_item">
-          <div class="img_wrap wide bg_blue" id="captureBtn">
-            <img src="icon/icon_collabo_capture.png" alt="キャプチャ">
-            <span>キャプチャ</span>
-          </div>
-        </div>
-      </div>
-      <div class="d-flex align-items-center h-100 collaboration_contents video_contents_user">
-        <div class="footer_menu_item">
-          <div class="img_wrap wide bg_blue" id="captureRequestBtn">
-            <img src="icon/icon_collabo_capture.png" alt="キャプチャ">
-            <span>キャプチャリクエスト</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </footer>
-  <!-- フッター -->
   <div id="footer_collabo"></div>
   <div id="loadingArea"></div>
   <div class="pip_indicator none" onclick="finishPipMode();">
-    <div style="vertical-align: middle;display: table-cell;">協業中
+    <div style="vertical-align: middle;display: table-cell;">
+      <img src="icon/icon_end_pip.png" alt="文書共有" style="width: 30px;height: 30px;">
+      <span style="font-size: 20px;vertical-align: middle;">戻る</span>
     </div>
   </div>
   <div class="before_loading_indicator">
     <div id="page_loader" class="before_loading_indicator">
-      <i class="fa fa-circle-o-notch fa-spin fa-1x fa-fw"></i>
+      <div class="sp sp-circle"></div>
     </div>
   </div>
   <script src="./js/libs/jquery-3.3.1.min.js"></script>

public_new/collaboration_overlay_menu.html

-<div id="overlay_menu" class="overlay fixed" style="z-index: 6 !important;">
+<div id="overlay_menu" class="fixed hide">
   <div class="overlay_menu_wrap">
-    <div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
+    <div class="overlay_menu d-flex justify-content-center align-items-center">
       <div class="menu_wrap">
-        <div class="menu d-flex flex-row flex-wrap">
-          <div class="item collaboration_contents picture_contents document_contents board_contents video_contents">
+        <div class="menu">
+          <div class="item hide rounded-circle shadow m-2 item01">
+            <span class="item-overlay rounded-circle collaboration_contents voice_contents"></span>
             <a href="javascript:changeCollaboration(COLLABORATION_TYPE.AUDIO);"
                class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_headset.png" alt="音声共有">
               </div>
-              <span>音声共有</span>
+              <span>音声</span>
             </a>
           </div>
-          <div class="item collaboration_contents picture_contents voice_contents document_contents board_contents">
+          <div class="item hide rounded-circle shadow m-2 item02">
+            <span class="item-overlay rounded-circle collaboration_contents video_contents"></span>
             <a href="javascript:changeCollaboration(COLLABORATION_TYPE.VIDEO);"
                class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_videocam.png" alt="動画共有">
               </div>
-              <span>動画共有</span>
+              <span>動画</span>
             </a>
           </div>
-          <div class="item collaboration_contents video_contents voice_contents document_contents board_contents">
+          <div class="item hide rounded-circle shadow m-2 item03">
+            <span class="item-overlay rounded-circle collaboration_contents picture_contents"></span>
             <a href="javascript:changeCollaboration(COLLABORATION_TYPE.CAMERA);"
                class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_picture.png" alt="写真共有">
               </div>
-              <span>写真共有</span>
+              <span>写真</span>
             </a>
           </div>
-          <div class="item collaboration_contents video_contents voice_contents picture_contents board_contents">
+          <div class="item hide rounded-circle shadow m-2 item04">
+            <span class="item-overlay rounded-circle collaboration_contents document_contents"></span>
             <a href="javascript:changeCollaboration(COLLABORATION_TYPE.DOCUMENT);"
                class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_document.png" alt="文書共有">
               </div>
-              <span>文書共有</span>
+              <span>文書</span>
             </a>
           </div>
-          <div class="item collaboration_contents video_contents voice_contents picture_contents document_contents">
+          <div class="item hide rounded-circle shadow m-2 item05">
+            <span class="item-overlay rounded-circle collaboration_contents board_contents"></span>
             <a href="javascript:changeCollaboration(COLLABORATION_TYPE.BOARD);"
                class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_whiteboard.png" alt="落書き">
               </div>
-              <span>落書き</span>
+              <span>ボード</span>
             </a>
           </div>
         </div>

public_new/collaboration_video.html

@@ -27,7 +27,11 @@
         <div class="text-right d-flex align-items-center">
           <button type="button" name="button" class="btn user_btn"></button>
           <button type="button" name="button" class="btn add_user_btn none"></button>
-          <button type="button" name="button" class="btn menu_btn"></button>
+          <div class="menu-icon menu_btn" onclick="this.classList.toggle('hover');">
+            <div class="menu-bar menu-bar1"></div>
+            <div class="menu-bar menu-bar2"></div>
+            <div class="menu-bar menu-bar3"></div>
+          </div>
           <!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
         </div>
       </div>
@@ -75,7 +79,6 @@
 
   <!-- フッター -->
   <footer id="collabo_footer_menu" class="active">
-    <button type="button" name="button" class="footer_menu_btn"></button>
     <div class="footer_menu-wrap d-flex justify-content-around h-100">
       <div class="d-flex align-items-center h-100">
         <div class="footer_menu_item">

public_new/collaboration_video_overlay_menu.html

-<div id="overlay_menu" class="overlay fixed">
+<div id="overlay_menu" class="fixed hide">
   <div class="overlay_menu_wrap">
-    <div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
+    <div class="overlay_menu d-flex justify-content-center align-items-center">
       <div class="menu_wrap">
-        <div class="menu d-flex flex-row flex-wrap">
-          <div class="item">
+        <div class="menu">
+          <div class="item rounded-circle shadow m-2 item01">
             <a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_headset.png" alt="音声共有">
@@ -11,7 +11,7 @@
               <span>音声共有</span>
             </a>
           </div>
-          <div class="item">
+          <div class="item rounded-circle shadow m-2 item02">
             <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_picture.png" alt="写真共有">
@@ -19,7 +19,7 @@
               <span>写真共有</span>
             </a>
           </div>
-          <div class="item">
+          <div class="item rounded-circle shadow m-2 item03">
             <a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_document.png" alt="文書共有">
@@ -27,7 +27,7 @@
               <span>文書共有</span>
             </a>
           </div>
-          <div class="item">
+          <div class="item rounded-circle shadow m-2 item04">
             <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_whiteboard.png" alt="落書き">

public_new/collaboration_voice_overlay_menu.html

-<div id="overlay_menu" class="overlay fixed">
+<div id="overlay_menu" class="fixed hide">
   <div class="overlay_menu_wrap">
-    <div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
+    <div class="overlay_menu d-flex justify-content-center align-items-center">
       <div class="menu_wrap">
-        <div class="menu d-flex flex-row flex-wrap">
-          <div class="item">
+        <div class="menu">
+          <div class="item rounded-circle shadow m-2 item01">
             <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_picture.png" alt="写真共有">
@@ -11,7 +11,7 @@
               <span>写真共有</span>
             </a>
           </div>
-          <div class="item">
+          <div class="item rounded-circle shadow m-2 item02">
             <a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_videocam.png" alt="動画共有">
@@ -19,7 +19,7 @@
               <span>動画共有</span>
             </a>
           </div>
-          <div class="item">
+          <div class="item rounded-circle shadow m-2 item03">
             <a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_document.png" alt="文書共有">
@@ -27,7 +27,7 @@
               <span>文書共有</span>
             </a>
           </div>
-          <div class="item">
+          <div class="item rounded-circle shadow m-2 item04">
             <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
               <div class="img_wrap">
                 <img src="icon/icon_collabo_whiteboard.png" alt="落書き">

public_new/contact.html

@@ -52,14 +52,14 @@
 
     <div class="content tabs">
       <input id="tabMyGroup" type="radio" name="tab_item" checked>
-      <label class="tab_item" for="tabMyGroup">マイグループ</label>
+      <label class="tab_item m-0" for="tabMyGroup">マイグループ</label>
       <input id="tabAllGroup" type="radio" name="tab_item">
-      <label class="tab_item" for="tabAllGroup">全グループ</label>
+      <label class="tab_item m-0" for="tabAllGroup">全グループ</label>
 
       <!-- タブ -->
       <div class="tab_content" id="tab1_content">
         <div class="content chat_list my_info_sell">
-          <ul class="p-0 chat_make_room_list">
+          <ul class="p-0 chat_make_room_list m-0">
             <li class="d-flex align-items-center">
               <a href="#" style="width: 100%;">
                 <div class="chat_item d-flex flex-row align-items-center" style="background: none !important;">
@@ -89,15 +89,15 @@
         </div>
       </div>
       <div class="tab_content" id="tab2_content">
-        <div class="breadcrumb" id="groupPathArea"></div>
+        <div class="breadcrumb m-0" id="groupPathArea"></div>
         <div class="chat_list">
           <!-- 全グループ -->
-          <ul class="p-0 chat_make_room_list">
+          <ul class="p-0 chat_make_room_list m-0">
             <li class="d-flex align-items-center" id="rootGroupArea">
               <a href="#" class="w-100" id="rootGroupBtn">
                 <div class="chat_item d-flex flex-row align-items-center">
                   <div class="chat_item_l">
-                    <div class="thumbnail">
+                    <div class="thumbnail-icon">
                       <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
                     </div>
                   </div>
@@ -115,7 +115,7 @@
               <a href="#" class="w-100" id="parentGroupBtn">
                 <div class="chat_item d-flex flex-row align-items-center">
                   <div class="chat_item_l">
-                    <div class="thumbnail">
+                    <div class="thumbnail-icon">
                       <img src="icon/icon_prev.png" alt="上位グループに戻る" />
                     </div>
                   </div>
@@ -143,7 +143,7 @@
   </main>
 
   <!-- フッター -->
-  <footer>
+  <footer id="footer-main">
     <div class="footer-wrap">
       <div class="d-flex justify-content-around h-100">
         <div class="footer_item">

public_new/css/archive.css

@@ -79,6 +79,8 @@
 .archive_detail .ttl{
   font-size: 18px;
   font-weight: bold;
+  background: #0070ca2b;
+  padding: 10px;
 }
 .archive_detail .item {
   margin-bottom: 20px;
@@ -97,7 +99,7 @@
   margin: 0 5px;
 }
 .archive_detail_desc {
-  margin: 0 10px;
+  margin: 20px;
 }
 .archive_detail .archive_detail_desc .archive_detail_user_list span,
 .archive_detail .archive_detail_desc .archive_detail_sv_user span {

public_new/css/chat.css

@@ -18,6 +18,7 @@
   text-align: center;
   font-weight: bold;
   transition: all 0.2s ease;
+  border-radius: 5px 5px 0 0;
 }
 .msg_notification {
    display: none;
@@ -80,9 +81,6 @@ input[name="tab_item"] {
   border-bottom: 1px solid #e2e8f0;
   position: relative;
 }
-.chat_list ul li:first-child {
-  border-top: 1px solid #e2e8f0;
-}
 .chat_list .chat_item_t,
 .chat_list .chat_item_desc {
   white-space: nowrap;
@@ -101,7 +99,7 @@ input[name="tab_item"] {
   padding-left: 0;
   text-align: center;
   position: absolute;
-  right: 0px;
+  right: 15px;
 }
 
 #searchList {
@@ -120,7 +118,18 @@ input[name="tab_item"] {
   overflow: hidden;
   margin: 0 auto;
 }
-
+.chat_item_l .thumbnail-icon {
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.chat_item_l .thumbnail-icon img{
+  width: 35px;
+  height: 35px;
+}
 .chat_item_l .thumbnail img{
   width: 50px;
   height: 50px;
@@ -227,13 +236,15 @@ input[name="tab_item"] {
 .chat_list .category {
   text-align: left;
   font-size: 1.4rem;
-  height: 30px;
+  height: 40px;
   font-size: 16px;
   cursor: pointer;
   position: relative;
-  line-height: 30px;
-  background: #c4c4c4;
+  line-height: 40px;
+  background: #0070ca2b;
   padding-left: 10px;
+  border-top: 1px solid #0070ca21;
+  border-bottom: 1px solid #0070ca21;
 }
 .category_name {
   white-space: nowrap;
@@ -245,7 +256,7 @@ input[name="tab_item"] {
 }
 .chat_list .category::after {
   position: absolute;
-  top: 0;
+  top: 8px;
   right: 10px;
   content: "\f107";
   font: 25px FontAwesome;
@@ -424,6 +435,11 @@ input[name="tab_item"] {
   width: 100%;
   overflow-x: scroll;
   z-index: 2;
+  border-bottom: 1px solid #dee2e6;
+  transition: 0.5s;
+}
+.user_list.hide{
+  transform: translateY(-100%);
 }
 .user_list .user_item {
   margin: 10px;
@@ -789,10 +805,10 @@ input[name="tab_item"] {
 }
 .menu_modal .modal-body ul li {
   border-bottom: 1px solid #c6c6c6;
-  height: 40px;
+  height: 50px;
 }
 .menu_modal .modal-body ul li a {
-  line-height: 40px;
+  line-height: 50px;
   display: block;
   color: #323743;
 }
@@ -816,6 +832,7 @@ input[name="tab_item"] {
 
 .chat_make_room_list {
   margin-top: 0px !important;
+  margin-bottom: 0px !important;
 }
 
 #favoriteListForMakeRoom > ul > li:nth-child(1) {

public_new/css/common.css

@@ -25,13 +25,14 @@ nav {
   width: 100%;
   border-bottom: 1px solid #cdcdcd;
   background: #fff;
-  z-index: 2;
+  z-index: 3;
 }
 main {
   margin-top: 60px;
 }
 .nav-item {
   padding: 0 10px;
+  white-space: nowrap;
 }
 .nav-ttl {
   text-align: center;
@@ -135,8 +136,8 @@ main {
 .profile_modal .modal-footer button {
   color: #fff;
   border-radius: 10px;
-  min-width: 100px;
-  font-size: 14px;
+  min-width: 90px;
+  font-size: 11px;
 }
 .profile_modal .modal-footer button img {
   width: 30px;
@@ -180,9 +181,9 @@ main {
   width: 100%;
 }
 .profile_modal .modal-header .profile_name span {
-    line-height: 60px;
-    font-weight: bold;
-    font-size: 20px;
+  font-weight: bold;
+  font-size: 20px;
+  padding: 5px;
 }
 
 @media screen and (max-width: 768px) {

public_new/css/contact.css

@@ -5,7 +5,7 @@
   white-space: nowrap;
   overflow-x: scroll;
   display: block;
-  margin-bottom: 10px;
+  background: #0070ca2b;
 }
 .breadcrumb_item:not(:last-child):after {
   content: ">";

public_new/css/footer.css

@@ -2,7 +2,6 @@
 
 /**************************** footer *************************/
 footer {
-  background: #f9f9f9;
   height: 70px;
   margin-top: 20px;
   border-top: 1px solid #cccccc;
@@ -10,6 +9,9 @@ footer {
   bottom: 0;
   width: 100%;
 }
+#footer-main{
+  background: #F9F9F9;
+}
 footer .footer-wrap {
   margin: 0 auto;
   height: 100%;

public_new/css/loading.css

 @charset "UTF-8";
 
 /**************************** loading *************************/
-#loader-bg {
-  display: none;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  left: 0px;
-  background: rgb(255, 255, 255, 0.5);
-  z-index: 99;
+.sp {
+  width: 25px;
+  height: 25px;
+  clear: both;
 }
-#loader {
-  display: none;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 200px;
-  height: 200px;
-  margin-top: -100px;
-  margin-left: -100px;
-  text-align: center;
-  color: #fff;
-  z-index: 999;
+.sp-circle {
+  width: 40px;
+  height: 40px;
+  margin: auto;
+  border: 5px rgba(0, 0, 0, 0.25) solid;
+  border-top: 5px black solid;
+  border-radius: 50%;
+  -webkit-animation: spCircRot .6s infinite linear;
+  animation: spCircRot .6s infinite linear;
 }
-.fa.fa-circle-o-notch {
-  color: #707070;
+@-webkit-keyframes spCircRot {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+  }
+}
+@keyframes spCircRot {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
 }

public_new/footer_collabo.html

 <footer id="collabo_footer">
   <div class="footer-wrap">
     <div class="d-flex justify-content-around h-100">
-      <div class="footer_item">
+      <div class="footer_item mx-md-3 photo_select_button collaboration_contents picture_contents">
+        <a href="javascript:photo_open_place_holderToggle();">
+          <div class="d-flex flex-column justify-content-center" id="photo_open_place_holder">
+            <div class="t-icon picture my-0"></div>
+            <span class="text-white txt">ピクチャ</span>
+          </div>
+        </a>
+      </div>
+      <div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
+        <a href="javascript:penToggle();">
+          <div class="d-flex flex-column justify-content-center" id="penBtn">
+            <div class="t-icon pen disable my-0"></div>
+            <span class="text-white txt">ペン</span>
+          </div>
+        </a>
+      </div>
+      <div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
+        <a href="javascript:eraserToggle();">
+          <div class="d-flex flex-column justify-content-center"　id="eraserBtn">
+            <div class="t-icon delete my-0"></div>
+            <span class="text-white txt">削除</span>
+          </div>
+        </a>
+      </div>
+      <div class="footer_item mx-md-3 collaboration_contents video_contents_host">
+        <a href="javascript:captureToggle();">
+          <div class="d-flex flex-column justify-content-center" id="captureBtn">
+            <div class="t-icon capture my-0"></div>
+            <span class="text-white txt">キャプチャ</span>
+          </div>
+        </a>
+      </div>
+      <div class="footer_item mx-md-3 collaboration_contents video_contents_user">
+        <a href="javascript:captureRequestToggle();">
+          <div class="d-flex flex-column justify-content-center" id="captureRequestBtn">
+            <div class="t-icon capture my-0"></div>
+            <span class="text-white txt">キャプチャリクエスト</span>
+          </div>
+        </a>
+      </div>
+      <div class="footer_item mx-md-3">
         <a href="javascript:micTogle();">
-          <div class="img_wrap bg_red" id="micBtn">
-            <img src="icon/icon_voice_gray.png" alt="音声">
+          <div class="d-flex flex-column justify-content-center" id="micBtn">
+            <div class="t-icon voice my-0"></div>
+            <span class="text-white txt">マイク</span>
           </div>
         </a>
       </div>
-      <div class="footer_item none host_contents">
+      <div class="footer_item mx-md-3 none host_contents">
         <a href="javascript:recordTogle();">
-          <div class="img_wrap bg_gray" id="recordBtn">
-            <img src="icon/icon_record.png" alt="録音">
+          <div class="d-flex flex-column justify-content-center" id="recordBtn">
+            <div class="t-icon record my-0"></div>
+            <span class="text-white txt">録音</span>
+            <div class="flash-txt"><p>録音を開始しました</p></div>
           </div>
         </a>
       </div>
-      <div class="footer_item">
+      <div class="footer_item mx-md-3">
         <a href="javascript:Coview_exitCollaboration(isDocument);">
-          <div class="img_wrap bg_red">
-            <img src="icon/icon_tell.png" alt="通話">
+          <div class="img_wrap bg_red mx-1">
+            <img src="icon/icon_close_white.png" alt="閉じる">
           </div>
         </a>
       </div>

public_new/js/chat.js

@@ -774,3 +774,17 @@ CHAT.searchMessage = function (keyword, workVal) {
     jQueryMessages.append(noResultMsg);
   }
 };
+
+// 下スクロールでユーザーリストを非表示
+var startPos = 0,winScrollTop = 0;
+$(window).on('scroll',function(){
+    winScrollTop = $(this).scrollTop();
+    if (winScrollTop >= startPos) {
+        if(winScrollTop >= 200){
+            $('#chat_room .user_list').addClass('hide');
+        }
+    } else {
+        $('#chat_room .user_list').removeClass('hide');
+    }
+    startPos = winScrollTop;
+});

public_new/js/collaboration.js

-document.addEventListener("DOMContentLoaded", function () {
+ document.addEventListener("DOMContentLoaded", function () {
+
+  no_scroll();
+
   // メニューオーバーレイ表示
   $(".menu_btn").click(function () {
     var w = $(this).width();
 
     $(this).toggleClass("hide");
-    $("#overlay_menu.overlay")
-      .toggleClass("slidein")
-      .css({ transform: "translateX(" & -w & ")" });
-    $("#collabo_main").toggleClass("noscroll");
+    $('#overlay_menu .item').toggleClass('hide');
   });
 
-  // ユーザーリストオーバーレイ表示
-  $(".user_btn").click(function () {
-    var w = $(this).width();
-
-    $(this).toggleClass("hide");
-    $("#overlay_user_list.overlay")
-      .toggleClass("slidein")
-      .css({ transform: "translateX(" & -w & ")" });
-    $("#collabo_main").toggleClass("noscroll");
-
-    if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
-      $("#overlay_user_list.overlay").removeClass("noscroll");
-    } else {
-      $("#overlay_user_list.overlay").addClass("noscroll");
-    }
-  });
+   // ユーザーリストオーバーレイ表示
+   $(".user_btn").click(function () {
+     var w = $(this).width();
 
-  // フッターメニュー　アコーディオン
-  $(".footer_menu_btn").click(function () {
-    var h_active = $("#collabo_footer").height();
-    var h_hide = h_active - $("#collabo_footer_menu").height();
+     $(this).toggleClass("hide");
+     $("#overlay_user_list.overlay")
+       .toggleClass("slidein")
+       .css({ transform: "translateX(" & -w & ")" });
 
-    // 非アクティブ時
-    if ($(this).hasClass("hide")) {
-      $(this).removeClass("hide");
-      $("#collabo_footer_menu").css({ bottom: h_active });
-      // アクティブ時
-    } else {
-      $(this).addClass("hide");
-      $("#collabo_footer_menu").css({ bottom: h_hide });
-    }
-  });
+     if($(this).hasClass('hide')){
+       return_scroll();
+     }else{
+       scrollTo(0, 0);
+       no_scroll();
+     }
+   });
 
   // モーダルonモーダル（前のモーダルを非表示に）
   // ホスト変更ボタン押下イベント
@@ -59,6 +43,7 @@ document.addEventListener("DOMContentLoaded", function () {
   // 閉じるイベント
   $(".close_btn").click(function () {
     $("#overlay_add_user_list").addClass("none");
+    no_scroll();
   });
 
   // ユーザー追加イベント
@@ -68,6 +53,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // ユーザー招待メンバー検索
   $(".add_user_btn").click(function () {
+    return_scroll();
     CHAT_UI.showLoadingIndicator();
     CHAT.globalSelectedUserList = [];
     CHAT_UI.refreshMyGroupForAddUserInCollaboration();
@@ -85,49 +71,26 @@ document.addEventListener("DOMContentLoaded", function () {
         CHAT_UI.confirmInviteUserListInCollaboration();
       });
   });
-
-  $("#penBtn").click(function () {
-    $("#coviewPenCtrBtn").click();
-    if ($("#penBtn").hasClass("bg_red")) {
-      $("#penBtn").removeClass("bg_red");
-      $("#penBtn").addClass("bg_blue");
-    } else {
-      $("#penBtn").addClass("bg_red");
-      $("#penBtn").removeClass("bg_blue");
-    }
-  });
-
-  $("#photo_open_place_holder").click(function () {
-    $("#open_file_upload").trigger("click");
-  });
-
-  $("#eraserBtn").click(function () {
-    $("#coviewEraserCtrBtn").click();
-  });
-
-  $("#captureBtn").click(function () {
-    if ($("#recordBtn").hasClass("bg_red")) {
-      screenLock();
-      recordStop(function () {
-        $("#screenLock").remove();
-        coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
-      });
-    } else {
-      coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
-    }
-  });
-
-  $("#captureRequestBtn").click(function () {
-    fw.sendToMsg("others", "CAPTURE_REQUEST", {
-      name: CHAT.globalLoginParameter.loginId,
-    });
-  });
 });
 
 function penOff() {
-  if ($("#penBtn").hasClass("bg_blue")) {
+  if (!$("#penBtn .pen").hasClass("disable")) {
     $("#coviewPenCtrBtn").click();
-    $("#penBtn").addClass("bg_red");
-    $("#penBtn").removeClass("bg_blue");
+    $("#penBtn .pen").addClass("disable");
   }
 }
+
+function no_scroll() {
+  document.addEventListener("mousewheel", scroll_control, { passive: false });
+  document.addEventListener("touchmove", scroll_control, { passive: false });
+}
+// スクロール禁止解除
+function return_scroll() {
+  document.removeEventListener("mousewheel", scroll_control, { passive: false });
+  document.removeEventListener('touchmove', scroll_control, { passive: false });
+}
+function scroll_control(event) {
+  if(event.cancelable){
+    event.preventDefault();
+  }
+}
\ No newline at end of file

public_new/js/share.js

@@ -193,7 +193,7 @@ document.addEventListener("DOMContentLoaded", function () {
         if (
           confirm(data.payload.name + getLocalizedString("request_capture"))
         ) {
-          if ($("#recordBtn").hasClass("bg_red")) {
+          if ($("#recordBtn .record").hasClass("disable")) {
             screenLock();
             recordStop(function () {
               $("#screenLock").remove();
@@ -246,12 +246,12 @@ document.addEventListener("DOMContentLoaded", function () {
         }
       } else if (data.type === "API_SEND_OWNER_CHANGE_COMPLETE") {
         penOff();
-        if ($("#recordBtn").hasClass("bg_red")) {
+        if ($("#recordBtn .record").hasClass("disable")) {
           recordStop(function () {
             console.log("ホスト変更によりレコードを終了しました");
           });
         }
-        if ($("#micBtn").hasClass("bg_red")) {
+        if ($("#micBtn .voice").hasClass("disable")) {
           micOff();
         } else {
           micOn();
@@ -599,6 +599,12 @@ function Coview_moveToVideoShareArea() {
   $("#collabo_main").removeClass("none");
 }
 
+function Coview_moveToAudioShareArea() {
+  $(".coview_share_area").addClass("none");
+  $("#collabo_main").removeClass("none");
+  $(".talking_area").removeClass("none");
+}
+
 function changeCollaboration(changeCollaborationType) {
   recordStop(function () {
     var newMeetingId = 0;
@@ -649,7 +655,7 @@ function changeCollaboration(changeCollaborationType) {
           coview_api.ChangeCollaboration("audio");
           break;
       }
-      if ($("#micBtn").hasClass("bg_red")) {
+      if ($("#micBtn .voice").hasClass("disable")) {
         micOff();
       } else {
         micOn();
@@ -717,17 +723,6 @@ async function initCollaborationUI(changeCollaborationType) {
     case COLLABORATION_TYPE.AUDIO:
       $(".collaboration_contents").addClass("none");
       $(".voice_contents").removeClass("none");
-      var w = $(".user_btn").width();
-      $(".user_btn").toggleClass("hide");
-      $("#overlay_user_list.overlay")
-        .toggleClass("slidein")
-        .css({ transform: "translateX(" & -w & ")" });
-      $("#collabo_main").toggleClass("noscroll");
-      if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
-        $("#overlay_user_list.overlay").removeClass("noscroll");
-      } else {
-        $("#overlay_user_list.overlay").addClass("noscroll");
-      }
       break;
 
     case COLLABORATION_TYPE.CAMERA:
@@ -743,17 +738,6 @@ async function initCollaborationUI(changeCollaborationType) {
     case COLLABORATION_TYPE.DOCUMENT:
       $(".collaboration_contents").addClass("none");
       $(".document_contents").removeClass("none");
-      var w = $(".user_btn").width();
-      $(".user_btn").toggleClass("hide");
-      $("#overlay_user_list.overlay")
-        .toggleClass("slidein")
-        .css({ transform: "translateX(" & -w & ")" });
-      $("#collabo_main").toggleClass("noscroll");
-      if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
-        $("#overlay_user_list.overlay").removeClass("noscroll");
-      } else {
-        $("#overlay_user_list.overlay").addClass("noscroll");
-      }
       break;
 
     case COLLABORATION_TYPE.BOARD:
@@ -780,7 +764,7 @@ function Coview_exitCollaboration(isDocument = false) {
       android.exitMeetingRoom();
     }
   }
-  if ($("#recordBtn").hasClass("bg_red")) {
+  if ($("#recordBtn .record").hasClass("disable")) {
     recordStop(Coview_finishCollaboration);
   } else {
     Coview_finishCollaboration();
@@ -872,7 +856,7 @@ function Coview_connect_audio_collaboration() {
   coview_api.deleteRoom(globalUserInfo.roomId);
   coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
   Coview_moveToVideoShareArea();
-
+  Coview_moveToAudioShareArea();
   $(".coview_share_title_name").text("音声通話");
 }
 
@@ -1057,20 +1041,26 @@ function captureAndShareImage(urls, changeHostName) {
   });
 }
 
+function toolToggle(){
+  if($("#collabo_footer_menu").hasClass('hide')){
+    $("#collabo_footer_menu").removeClass('hide');
+  }else{
+    $("#collabo_footer_menu").addClass('hide');
+  }
+}
+
 function micOn() {
   coview_api.MicMuteControl("off");
-  $("#micBtn").addClass("bg_blue");
-  $("#micBtn").removeClass("bg_red");
+  $("#micBtn .voice").removeClass("disable");
 }
 
 function micOff() {
   coview_api.MicMuteControl("on");
-  $("#micBtn").removeClass("bg_blue");
-  $("#micBtn").addClass("bg_red");
+  $("#micBtn .voice").addClass("disable");
 }
 
 function micTogle() {
-  if ($("#micBtn").hasClass("bg_red")) {
+  if ($("#micBtn .voice").hasClass("disable")) {
     micOn();
   } else {
     micOff();
@@ -1080,19 +1070,19 @@ function micTogle() {
 function recordStart() {
   console.log("レコードを開始しました");
   MainManRecord("on");
-  $("#recordBtn").removeClass("bg_gray");
-  $("#recordBtn").addClass("bg_red");
+  $("#recordBtn .record").addClass("disable");
+  $('.flash-txt').addClass('on');
 }
 
 function recordFinished() {
-  $("#recordBtn").addClass("bg_gray");
-  $("#recordBtn").removeClass("bg_red");
+  $("#recordBtn .record").removeClass("disable");
+  $('.flash-txt').removeClass('on');
   // ロック画面の削除
   delete_dom_obj("screenLock");
 }
 
 function recordTogle() {
-  if ($("#recordBtn").hasClass("bg_gray")) {
+  if (!$("#recordBtn .record").hasClass("disable")) {
     recordStart();
   } else {
     recordStop(function () {
@@ -1102,7 +1092,7 @@ function recordTogle() {
 }
 
 function recordStop(callback) {
-  if ($("#recordBtn").hasClass("bg_gray")) {
+  if (!$("#recordBtn .record").hasClass("disable")) {
     callback();
     return;
   }
@@ -1205,3 +1195,34 @@ function requestCollaborationFinish() {
 async function waitMillisecond(millesecond) {
   await new Promise(done => setTimeout(() => done(), millesecond));
 }
+
+function penToggle() {
+  $("#coviewPenCtrBtn").click();
+  if ($("#penBtn .pen").hasClass("disable")) {
+    $("#penBtn .pen").removeClass("disable");
+  } else {
+    $("#penBtn .pen").addClass("disable");
+  }
+}
+function photo_open_place_holderToggle() {
+  $("#open_file_upload").trigger("click");
+}
+function eraserToggle() {
+  $("#coviewEraserCtrBtn").click();
+}
+function captureToggle() {
+  if ($("#recordBtn").hasClass("bg_red")) {
+    screenLock();
+    recordStop(function () {
+      $("#screenLock").remove();
+      coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
+    });
+  } else {
+    coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
+  }
+}
+function captureRequestToggle() {
+  fw.sendToMsg("others", "CAPTURE_REQUEST", {
+    name: CHAT.globalLoginParameter.loginId,
+  });
+}
\ No newline at end of file

public_new/loading.html

 <div id="loader-bg" class="loading-indicator">
   <div id="loader" class="loading-indicator">
-    <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
+    <div class="sp sp-circle"></div>
   </div>
 </div>
\ No newline at end of file

public_new/modal_add_user_confirm.html

 <div class="modal fade add_user_confirm_modal" id="modalAddUserConfirm" tabindex="-1" role="dialog"
      aria-labelledby="modalAddUserConfirm" aria-hidden="true" style="position: fixed;">
     <div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document">
-        <div class="modal-content" style="position: fixed;height: 600px;width: 86%;">
+        <div class="modal-content" style="position: fixed;top: 0;height: 100%;width: 100%;left:0;right: 0;margin: 0 auto;">
             <div class="modal-header border-0 pb-0">
                 <span>ユーザー招待</span>
             </div>

public_new/modal_add_user_list.html

 <!-- コンテンツ -->
 <div class="modal fade add_user_modal" id="addUserInCollaboration" tabindex="-1" role="dialog" aria-labelledby="addUserInCollaboration" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document">
-        <div class="modal-content" style="position: fixed;width: 75.5%;top: 0px;">
+        <div class="modal-content" style="position: fixed;width: 100%;height:100%;top: 0px;left:0;">
             <form id="addUserFormInCollaboration" action="chat_add_user_confirm.html" method="post">
                 <!-- ユーザー検索 -->
                 <!-- タブ -->
@@ -21,10 +21,10 @@
                 </nav><!-- nav -->
                 <div class="content tabs">
                     <input id="tabMyGroupOnAddUserInCollaboration" type="radio" name="tab_item" checked onclick="CHAT_UI.refreshMyGroupForAddUserInCollaboration();">
-                    <label class="tab_item" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label>
+                    <label class="tab_item m-0" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label>
                     <input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration('0');">
-                    <label class="tab_item" for="tabAllGroupOnAddUserInCollaboration">全グループ</label>
-                    <div class="tab_content" id="tab1_content" style="height: 340px; overflow:scroll;">
+                    <label class="tab_item m-0" for="tabAllGroupOnAddUserInCollaboration">全グループ</label>
+                    <div class="tab_content" id="tab1_content" style="height: 100vh; overflow:scroll;">
                         <div class="chat_list">
                             <!-- お気に入りグループ -->
                             <div class="category" onclick="CHAT_UI.toggleCategory(this);"><div class="category_name"><span>お気に入り</span></div></div>
@@ -32,7 +32,7 @@
                             <div id="myGroupListForAddUserInCollaboration"></div>
                         </div>
                     </div>
-                    <div class="tab_content" id="tab2_content" style="height: 340px; overflow:scroll;">
+                    <div class="tab_content" id="tab2_content" style="height: 100vh; overflow:scroll;">
                         <div class="breadcrumb" id="groupPathAreaForAddUserInCollaboration"></div>
                         <div class="chat_list">
                             <!-- 全グループ -->
@@ -41,7 +41,7 @@
                                     <a href="#" class="w-100" id="rootGroupBtnForAddUserInCollaboration">
                                         <div class="chat_item d-flex flex-row align-items-center">
                                             <div class="chat_item_l">
-                                                <div class="thumbnail">
+                                                <div class="thumbnail-icon">
                                                     <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
                                                 </div>
                                             </div>
@@ -59,7 +59,7 @@
                                     <a href="#" class="w-100" id="parentGroupBtnForAddUserInCollaboration">
                                         <div class="chat_item d-flex flex-row align-items-center">
                                             <div class="chat_item_l">
-                                                <div class="thumbnail">
+                                                <div class="thumbnail-icon">
                                                     <img src="icon/icon_prev.png" alt="上位グループに戻る" />
                                                 </div>
                                             </div>
@@ -81,7 +81,7 @@
                 </div>
                 <!-- ルーム解説ボタン -->
                 <div class="add_user_confirm_btn content" id="addUserConfirmBtnInCollaboration" style="position: fixed;">
-                    <button type="button" name="button" id="buttonAddUser" style="top: 455px; width: 75.3%;">
+                    <button type="button" name="button" id="buttonAddUser" style="bottom: 0; width: 100%;">
                         確認<br>
                         <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
                 </div>

public_new/modal_chat_menu.html

@@ -8,7 +8,7 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <div class="modal-body">
+      <div class="modal-body pt-0">
         <ul>
           <li><a id="room_name_change_button" href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a>
           </li>

public_new/modal_chat_profile.html

@@ -5,7 +5,7 @@
       <div class="modal-header border-0">
         <div class="profile_desc d-flex flex-row">
           <img src="img/noImage.png" alt="プロフィール画像">
-          <div class="profile_name"><span>名前　名前</span></div>
+          <div class="prifile_name"><span>名前　名前</span></div>
         </div>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>

public_new/modal_collabo_profile.html

@@ -8,7 +8,7 @@
         </button>
         <div class="profile_desc_ d-flex flex-row">
           <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
-          <div class="profile_name"><span>{{name}}</span></div>
+          <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
         </div>
       </div>
       <div class="modal-body">

public_new/template/template_add_user_group_list.html

@@ -2,7 +2,7 @@
     <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForAddUser({{id}});">
         <div class="chat_item d-flex flex-row align-items-center">
             <div class="chat_item_l">
-                <div class="thumbnail">
+                <div class="thumbnail-icon">
                     <img src="icon/icon_folder.png" alt="フォルダ" />
                 </div>
             </div>

public_new/template/template_add_user_group_list_in_collaboration.html

@@ -2,7 +2,7 @@
     <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration({{id}});">
         <div class="chat_item d-flex flex-row align-items-center">
             <div class="chat_item_l">
-                <div class="thumbnail">
+                <div class="thumbnail-icon">
                     <img src="icon/icon_folder.png" alt="フォルダ" />
                 </div>
             </div>

public_new/template/template_group_list.html

@@ -2,7 +2,7 @@
   <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="thumbnail">
+        <div class="thumbnail-icon">
           <img src="icon/icon_folder.png" alt="フォルダ" />
         </div>
       </div>

public_new/template/template_make_room_group_list.html

@@ -2,7 +2,7 @@
     <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="thumbnail">
+                <div class="thumbnail-icon">
                     <img src="icon/icon_folder.png" alt="フォルダ" />
                 </div>
             </div>

public_new/template/template_my_name_card.html

@@ -4,7 +4,7 @@
       <div class="modal-header border-0">
         <div class="profile_desc d-flex flex-row">
           <img src="{{profileImage}}" onError="this.src='./img/noImage.png'">
-          <div class="profile_name"><span>{{name}}</span></div>
+          <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
         </div>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>

public_new/template/template_room_list.html

-<li class="d-flex align-items-center">
-  <a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');">
-    <div class="chat_item d-flex flex-row align-items-center">
-      <div class="chat_item_l">
-        <div class="thumbnail{{thumbnailCount}} thumbnail">
-          {{#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}}
+<ul class="m-0">
+  <li class="d-flex align-items-center">
+    <a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');">
+      <div class="chat_item d-flex flex-row align-items-center">
+        <div class="chat_item_l">
+          <div class="thumbnail{{thumbnailCount}} thumbnail">
+            {{#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>
-      <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">{{roomName}}</span>
+        <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">{{roomName}}</span>
+              </div>
+              <span class="chat_item_num">({{userCnt}})</span>
+            </div>
+            <div class="chat_item_desc">
+              {{lastMessage}}
             </div>
-            <span class="chat_item_num">({{userCnt}})</span>
-          </div>
-          <div class="chat_item_desc">
-            {{lastMessage}}
           </div>
         </div>
-      </div>
-      <div class="chat_item_r">
-        <div class="d-flex flex-column">
-          <span class="chat_item_time">{{time}}</span>
-          {{#unreadMsgCnt}}
-          <span class="chat_item_unread room-{{roomId}}-unread">{{unreadMsgCnt}}</span>
-          {{/unreadMsgCnt}}
+        <div class="chat_item_r">
+          <div class="d-flex flex-column">
+            <span class="chat_item_time">{{time}}</span>
+            {{#unreadMsgCnt}}
+            <span class="chat_item_unread room-{{roomId}}-unread">{{unreadMsgCnt}}</span>
+            {{/unreadMsgCnt}}
+          </div>
         </div>
       </div>
-    </div>
-  </a>
-</li>
\ No newline at end of file
+    </a>
+  </li>
+</ul>
\ No newline at end of file

public_new/template/template_user_name_card.html

@@ -7,7 +7,7 @@
         </button>
         <div class="profile_desc_ d-flex flex-row">
           <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
-          <div class="profile_name"><span>{{name}}</span></div>
+          <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
         </div>
       </div>
       <div class="modal-body" id="userNameCard-scroll">