UIUX改善対応

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_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

@@ -24,14 +24,27 @@
   <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-column">
+          <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>
+          <div>
             通話中
           </div>
+        </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>
           <button type="button" name="button" class="btn add_user_btn none"></button>
-          <button type="button" name="button" class="btn menu_btn host_contents"></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 start_pip_btn collaboration_contents document_contents"
             onclick="startPipMode();"></button>
           <!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
@@ -81,55 +94,59 @@
 
   <!-- フッター -->
   <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 class="" id="photo_open_place_holder">
+            <div class="t-icon picture"></div>
           </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 class="" id="penBtn">
+            <!-- ペン -->
+            <div class="t-icon pen disable"></div>
           </div>
         </div>
         <div class="footer_menu_item none">
-          <div class="img_wrap bg_blue">
-            <img src="icon/icon_collabo_place_white.png" alt="場所">
+          <div class="">
+            <!-- ピン -->
+            <div class="t-icon place"></div>
           </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 class="" id="eraserBtn">
+            <!-- 削除 -->
+            <div class="t-icon delete"></div>
           </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 class="">
+            <!-- 進む -->
+            <div class="t-icon rewind"></div>
           </div>
         </div>
         <div class="footer_menu_item">
-          <div class="img_wrap bg_gray">
-            <img src="icon/icon_collabo_forward_white.png" alt="進む">
+          <div class="">
+            <!-- 戻る -->
+            <div class="t-icon forward"></div>
           </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 class="" id="captureBtn">
+            <!-- キャプチャ -->
+            <div class="t-icon capture"></div>
           </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 class="" id="captureRequestBtn">
+            <!-- キャプチャリクエスト -->
+            <div class="t-icon capture"></div>
           </div>
         </div>
       </div>
@@ -139,12 +156,12 @@
   <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;">共有中
     </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">
@@ -12,7 +13,8 @@
               <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">
@@ -21,7 +23,8 @@
               <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">
@@ -30,7 +33,8 @@
               <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">
@@ -39,7 +43,8 @@
               <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">

public_new/contact.html

@@ -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/chat.css

@@ -101,7 +101,7 @@ input[name="tab_item"] {
   padding-left: 0;
   text-align: center;
   position: absolute;
-  right: 0px;
+  right: 15px;
 }
 
 #searchList {
@@ -227,11 +227,11 @@ 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;
+  line-height: 40px;
   background: #c4c4c4;
   padding-left: 10px;
 }
@@ -245,7 +245,7 @@ input[name="tab_item"] {
 }
 .chat_list .category::after {
   position: absolute;
-  top: 0;
+  top: 8px;
   right: 10px;
   content: "\f107";
   font: 25px FontAwesome;
@@ -424,6 +424,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;

public_new/css/collaboration.css

@@ -6,7 +6,7 @@
   top: 0;
   width: 100%;
   padding: 0 10px;
-  background: #1d1d1d;
+  background: #20304c;
   z-index: 10;
 }
 .collabo_nav_l {
@@ -26,11 +26,31 @@
   margin: 0 5px;
 }
 
+.menu-icon {width: 40px;height: 50px;margin: 10px 15px;transform:scale(0.8);padding: 0;cursor: pointer;z-index:20}
+.menu-bar {width: 40px;height: 5px;background: white;position: absolute;transition: all 0.3s;}
+.menu-bar1 {margin-top: 9px}
+.menu-bar2 {margin-top: 23px}
+.menu-bar3 {margin-top: 37px}
+.menu-icon.hover .menu-bar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;}
+.menu-icon.hover .menu-bar2 {opacity: 0}
+.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}
+
+.collabo-label {
+  border: 1px solid #fff;
+  width: fit-content;
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: #fff;
+  color: #20304c;
+  font-size: 12px;
+  font-weight: bold;
+}
+
 /**************************** main *************************/
 #collabo_main {
-  height: calc(100vh - 180px);
+  height: calc(100vh - 140px);
   position: relative;
-  margin-bottom: 120px;
+  margin-bottom: 80px;
 }
 #collabo_main .user_list_wrap,
 #collabo_main .document_wrap,
@@ -88,8 +108,10 @@
   background: url("../icon/icon_host_tag.png");
   position: absolute;
   z-index: 2;
-  width: 64px;
-  height: 64px;
+  width: 50px;
+  height: 50px;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 .user_item {
   width: calc(50% - 20px);
@@ -112,10 +134,11 @@
 .btn {
   background-color: transparent;
   border: none;
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
   background-repeat: no-repeat;
   background-position: center;
+  background-size: contain;
 }
 .btn.menu_btn {
   background-image: url("../icon/icon_collabo_menu.png");
@@ -165,32 +188,111 @@
   height: 100vh;
   z-index: 5;
   width: 100%;
-  margin: 0 auto;
+  margin: 0px auto 80px auto;
+  overflow: scroll;
+}
+#overlay_menu {
+  transition: .7s;
+  position: absolute;
+  top: 60px;
+  right: 0;
+  height: 100vh;
+  z-index: 999;
+}
+#overlay_menu .item01{
+  opacity: 0;
+  animation: fadein .5s ease forwards;
+}
+#overlay_menu .item02{
+  opacity: 0;
+  animation: fadein 1s ease forwards;
+}
+#overlay_menu .item03{
+  opacity: 0;
+  animation: fadein 1.5s ease forwards;
+}
+#overlay_menu .item04{
+  opacity: 0;
+  animation: fadein 2s ease forwards;
+}
+#overlay_menu .item05{
+  opacity: 0;
+  animation: fadein 2.5s ease forwards;
+}
+@keyframes fadein{
+	0%{
+		opacity: 0;
+	}
+	100%{
+		opacity: 1;
+	}
+}
+@keyframes fadeout{
+	0%{
+		opacity: 1;
+	}
+	100%{
+		opacity: 0;
+	}
+}
+/* #overlay_menu.hide {
+  display: none;
+} */
+#overlay_menu .item01.hide,
+#overlay_menu .item02.hide,
+#overlay_menu .item03.hide,
+#overlay_menu .item04.hide,
+#overlay_menu .item05.hide{
+  opacity: 1;
+  animation: fadeout 0.3s ease forwards;
+}
+.item-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 70px;
+  height: 70px;
+  background: #ff8f8f4a;
 }
 
 /* メニュー */
 #overlay_menu .menu_wrap .menu .item {
-  width: 50%;
-  padding: 10px 0;
+  width: 70px;
+  height: 70px;
+  background: #20304c42;
+  position: relative;
+}
+#overlay_menu .menu_wrap .menu .item:hover {
+  background: #20304c4a;
 }
 #overlay_menu .menu_wrap .menu {
-  width: 220px;
+  width: 90px;
 }
 #overlay_menu .menu_wrap .menu .item a {
   text-align: center;
   color: #fff;
 }
+#overlay_menu .menu_wrap .menu .item span{
+  font-size:12px;
+}
 #overlay_menu .img_wrap {
-  width: 80px;
-  height: 80px;
-  line-height: 80px;
-  background: #0070ca;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
   border-radius: 8px;
-  margin: 5px;
+}
+#overlay_menu .img_wrap img {
+  width: 40px;
+  height: 40px;
 }
 #overlay_menu .overlay_menu_wrap {
   height: calc(100vh - 180px);
 }
+.fas.fa-wrench{
+  color: #fff;
+  font-size: 24px;
+  vertical-align: middle;
+}
 
 /* ユーザー追加 */
 #overlay_add_user_list {
@@ -337,9 +439,8 @@
 
 /**************************** footer *************************/
 #collabo_footer {
-  background: #1d1d1d;
-  height: 120px;
-  margin-top: 20px;
+  background: #20304c;
+  height: 80px;
   position: fixed;
   bottom: 0;
   width: 100%;
@@ -355,43 +456,143 @@
   display: inline-block;
 }
 #collabo_footer .img_wrap {
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
-  line-height: 55px;
+  line-height: 45px;
+}
+
+.t-icon{
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  width: 40px;
+  height: 40px;
+  margin: 10px;
+}
+.voice{
+  background-image: url("../icon/icon_voice_white.png");
+}
+.voice.disable{
+  background-image: url("../icon/icon_voice_white_disable.png");
+}
+.pen{
+  background-image: url("../icon/icon_collabo_pen_white.png");
+}
+.pen.disable{
+  background-image: url("../icon/icon_collabo_pen_white_disable.png");
+}
+.picture{
+  background-image: url("../icon/icon_collabo_picture.png");
+}
+.place{
+  background-image: url("../icon/icon_collabo_place_white.png");
+}
+.delete{
+  background-image: url("../icon/icon_collabo_delete_white.png");
+}
+.rewind{
+  background-image: url("../icon/icon_collabo_rewind_white.png");
+}
+.forward{
+  background-image: url("../icon/icon_collabo_forward_white.png");
+}
+.capture{
+  background-image: url("../icon/icon_collabo_capture.png");
+}
+.record{
+  background-image: url("../icon/icon_record.png");
+}
+.record.disable{
+  background-image: url("../icon/icon_record_disable.png");
+}
+.tool{
+  background-image: url("../icon/icon_tool_white.png");
+}
+
+.record.disable {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #DD4545;
+  box-shadow: 0 0 20px #dd4545;
+  cursor: pointer;
+}
+.record.disable::before, .record.disable::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #DD4545;
+  border-radius: 50%;
+  box-sizing: border-box;
+  pointer-events: none;
+  animation: pulsate 2s linear infinite;
+}
+@keyframes pulsate {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+.flash-txt{
+  position: absolute;
+  top: -35px;
+  left: -45px;
+  width: 155px;
+  visibility: hidden;
+}
+.flash-txt.on {
+  -webkit-animation: fade-in-out 2s ease forwards;
+  animation: fade-in-out 2s ease forwards;
+  z-index: 1;
+}
+.flash-txt.on p {
+  font-size: 12px;
+  color: #333;
+  background: #f8f8f8;
+  padding: 5px;
+  border-radius: 5px;
+}
+@-webkit-keyframes fade-in-out {
+  0% {visibility: hidden; opacity: 0;}
+  50% {visibility: visible; opacity: 1;}
+  100% {visibility: hidden; opacity: 0;}
+}
+@keyframes fade-in-out {
+  0% {visibility: hidden; opacity: 0;}
+  50% {visibility: visible; opacity: 1;}
+  100% {visibility: hidden; opacity: 0;}
 }
 
 /**************************** footer-menu *************************/
 #collabo_footer_menu {
   transition: 0.7s;
-  height: 70px;
+  height: 60px;
   position: fixed;
   width: 100%;
   margin: 0;
   border: none;
-  bottom: 120px;
+  bottom: 80px;
   z-index: 3;
-}
-#collabo_footer_menu.hide {
-  transition: 0.7s;
-}
-#collabo_footer_menu .footer_menu_btn {
-  background-color: white;
-  border: 1px solid #7a7a7a;
-  border-radius: 5px 5px 0 0;
-  width: 80px;
-  height: 40px;
-  background-image: url(../icon/icon_arrow_down.png);
-  background-repeat: no-repeat;
-  background-position: center;
-  position: absolute;
-  bottom: 70px;
-}
-#collabo_footer_menu .footer_menu_btn.hide {
-  background-image: url(../icon/icon_arrow_up.png);
+  background: #20304c42;
 }
 #collabo_footer_menu .footer_menu-wrap {
-  background: #1d1d1d;
   height: 40px;
 }
 
@@ -419,6 +620,15 @@
   margin: 0 5px;
   color: #fff;
 }
+#collabo_footer_menu{
+  opacity: 1;
+  animation: fadein 0.5s ease forwards;
+}
+#collabo_footer_menu.hide{
+  opacity: 1;
+  animation: fadeout 0.5s ease forwards;
+}
+#collabo_footer .txt{ font-size: 12px; }
 
 @media screen and (max-width: 768px) {
   #add_user_list .user_item_ttl {
@@ -480,7 +690,6 @@
   overflow: scroll;
 }
 
-@charset "UTF-8";
 /**************************** tab *************************/
 .modal-content .tabs {
   margin-top: 60px;

public_new/css/common.css

@@ -25,7 +25,7 @@ nav {
   width: 100%;
   border-bottom: 1px solid #cdcdcd;
   background: #fff;
-  z-index: 2;
+  z-index: 3;
 }
 main {
   margin-top: 60px;
@@ -135,8 +135,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 +180,9 @@ main {
   width: 100%;
 }
 .profile_modal .modal-header .profile_name span {
-    line-height: 60px;
   font-weight: bold;
   font-size: 20px;
+  padding: 5px;
 }
 
 @media screen and (max-width: 768px) {

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 collaboration_contents picture_contents video_contents board_contents">
+        <a href="javascript:toolToggle();">
+          <div class="d-flex flex-column justify-content-center">
+            <div class="t-icon tool my-0"></div>
+            <span class="text-white txt">ツール</span>
+          </div>
+        </a>
+      </div>
       <div class="footer_item">
         <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">
         <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">
         <a href="javascript:Coview_exitCollaboration(isDocument);">
           <div class="img_wrap bg_red">
-            <img src="icon/icon_tell.png" alt="通話">
+            <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 () {
   // メニューオーバーレイ表示
   $(".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');
   });
 
    // ユーザーリストオーバーレイ表示
@@ -18,28 +15,19 @@ document.addEventListener("DOMContentLoaded", function () {
      $("#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");
-    }
-  });
-
-  // フッターメニュー　アコーディオン
-  $(".footer_menu_btn").click(function () {
-    var h_active = $("#collabo_footer").height();
-    var h_hide = h_active - $("#collabo_footer_menu").height();
-
-    // 非アクティブ時
-    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 });
+//     $('#collabo_main').toggleClass('noscroll');
+//     if($('#overlay_user_list.overlay').hasClass('noscroll')){
+//       $('#overlay_user_list.overlay').removeClass('noscroll');
+//     }else{
+//       $('#overlay_user_list.overlay').addClass('noscroll');
+//     }
+
+     if($(this).hasClass('hide')){
+       return_scroll();
+     }else{
+       scrollTo(0, 0);
+       no_scroll();
      }
    });
 
@@ -88,12 +76,10 @@ document.addEventListener("DOMContentLoaded", function () {
 
   $("#penBtn").click(function () {
     $("#coviewPenCtrBtn").click();
-    if ($("#penBtn").hasClass("bg_red")) {
-      $("#penBtn").removeClass("bg_red");
-      $("#penBtn").addClass("bg_blue");
+    if ($("#penBtn .pen").hasClass("disable")) {
+      $("#penBtn .pen").removeClass("disable");
     } else {
-      $("#penBtn").addClass("bg_red");
-      $("#penBtn").removeClass("bg_blue");
+      $("#penBtn .pen").addClass("disable");
     }
   });
 
@@ -125,9 +111,24 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 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");
+  }
+}
+
+window.onload = no_scroll;
+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();
@@ -649,7 +649,7 @@ function changeCollaboration(changeCollaborationType) {
           coview_api.ChangeCollaboration("audio");
           break;
       }
-      if ($("#micBtn").hasClass("bg_red")) {
+      if ($("#micBtn .voice").hasClass("disable")) {
         micOff();
       } else {
         micOn();
@@ -780,7 +780,7 @@ function Coview_exitCollaboration(isDocument = false) {
       android.exitMeetingRoom();
     }
   }
-  if ($("#recordBtn").hasClass("bg_red")) {
+  if ($("#recordBtn .record").hasClass("disable")) {
     recordStop(Coview_finishCollaboration);
   } else {
     Coview_finishCollaboration();
@@ -1057,20 +1057,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 +1086,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 +1108,7 @@ function recordTogle() {
 }
 
 function recordStop(callback) {
-  if ($("#recordBtn").hasClass("bg_gray")) {
+  if (!$("#recordBtn .record").hasClass("disable")) {
     callback();
     return;
   }

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;height: 100%;width: 100%;left:0;">
             <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">
                 <!-- ユーザー検索 -->
                 <!-- タブ -->
@@ -24,7 +24,7 @@
                     <label class="tab_item" 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;">
+                    <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">
                             <!-- 全グループ -->
@@ -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_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_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">
+<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">
@@ -34,4 +35,5 @@
         </div>
       </div>
     </a>
-</li>
\ No newline at end of file
+  </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">