Skip to content

C
chat_webview
Commit 8abc5293 by 藤川諒
Options

UIUX改善対応

parent fb49ca8c
Showing with 503 additions and 224 deletions
public_new/archive.html
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</main> </main>
<!-- フッター --> <!-- フッター -->
<footer> <footer id="footer-main">
<div class="footer-wrap"> <div class="footer-wrap">
<div class="d-flex justify-content-around h-100"> <div class="d-flex justify-content-around h-100">
<div class="footer_item"> <div class="footer_item">
......
public_new/archive_detail.html
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
<div class="modal-header border-0"> <div class="modal-header border-0">
<div class="profile_desc d-flex flex-row"> <div class="profile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/> <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> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
......
public_new/chat.html
...@@ -54,9 +54,9 @@ ...@@ -54,9 +54,9 @@
<!-- タブ --> <!-- タブ -->
<div class="content tabs"> <div class="content tabs">
<input id="tabGroup" type="radio" name="tab_item"> <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"> <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="tab_content" id="tab1_content">
<div class="chat_list" id="groupChatList"> <div class="chat_list" id="groupChatList">
</div> </div>
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
</div> </div>
</main> </main>
<!-- フッター --> <!-- フッター -->
<footer> <footer id="footer-main">
<div class="footer-wrap"> <div class="footer-wrap">
<div class="d-flex justify-content-around h-100"> <div class="d-flex justify-content-around h-100">
<div class="footer_item"> <div class="footer_item">
......
public_new/chat_room.html
...@@ -43,8 +43,8 @@ ...@@ -43,8 +43,8 @@
</div> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
<div class="nav-item text-right"> <div class="nav-item text-right">
<a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a> <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"><img <a href="#" data-toggle="modal" data-target="#menuModalCenter" id="roomMenu" class="none mx-1"><img
src="icon/icon_room_menu.png" alt="メニュー"></a> src="icon/icon_room_menu.png" alt="メニュー"></a>
</div> </div>
</div><!-- .col --> </div><!-- .col -->
......
public_new/collaboration.html
...@@ -24,14 +24,27 @@ ...@@ -24,14 +24,27 @@
<header id="collabo_header"> <header id="collabo_header">
<div class="d-flex align-items-center h-100"> <div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-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>
<div class="collabo_nav_r"> <div class="collabo_nav_r">
<div class="text-right d-flex align-items-center"> <div class="text-right d-flex align-items-center">
<button type="button" name="button" <button type="button" name="button"
class="btn user_btn collaboration_contents picture_contents video_contents board_contents"></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 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" <button type="button" name="button" class="btn start_pip_btn collaboration_contents document_contents"
onclick="startPipMode();"></button> onclick="startPipMode();"></button>
<!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> --> <!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
...@@ -81,55 +94,59 @@ ...@@ -81,55 +94,59 @@
<!-- フッター --> <!-- フッター -->
<footer id="collabo_footer_menu" class="active"> <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="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center 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="footer_menu_item photo_select_button collaboration_contents picture_contents">
<div class="img_wrap bg_blue" id="photo_open_place_holder"> <div class="" id="photo_open_place_holder">
<img src="icon/icon_collabo_picture.png" alt="写真"> <div class="t-icon picture"></div>
</div> </div>
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<div class="img_wrap bg_red" id="penBtn"> <div class="" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン"> <!-- ペン -->
<div class="t-icon pen disable"></div>
</div> </div>
</div> </div>
<div class="footer_menu_item none"> <div class="footer_menu_item none">
<div class="img_wrap bg_blue"> <div class="">
<img src="icon/icon_collabo_place_white.png" alt="場所"> <!-- ピン -->
<div class="t-icon place"></div>
</div> </div>
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<div class="img_wrap bg_blue" id="eraserBtn"> <div class="" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除"> <!-- 削除 -->
<div class="t-icon delete"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex align-items-center h-100 none"> <div class="d-flex align-items-center h-100 none">
<div class="footer_menu_item"> <div class="footer_menu_item">
<div class="img_wrap bg_gray"> <div class="">
<img src="icon/icon_collabo_rewind_white.png" alt="戻る"> <!-- 進む -->
<div class="t-icon rewind"></div>
</div> </div>
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<div class="img_wrap bg_gray"> <div class="">
<img src="icon/icon_collabo_forward_white.png" alt="進む"> <!-- 戻る -->
<div class="t-icon forward"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex align-items-center h-100 collaboration_contents video_contents_host"> <div class="d-flex align-items-center h-100 collaboration_contents video_contents_host">
<div class="footer_menu_item"> <div class="footer_menu_item">
<div class="img_wrap wide bg_blue" id="captureBtn"> <div class="" id="captureBtn">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ"> <!-- キャプチャ -->
<span>キャプチャ</span> <div class="t-icon capture"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex align-items-center h-100 collaboration_contents video_contents_user"> <div class="d-flex align-items-center h-100 collaboration_contents video_contents_user">
<div class="footer_menu_item"> <div class="footer_menu_item">
<div class="img_wrap wide bg_blue" id="captureRequestBtn"> <div class="" id="captureRequestBtn">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ"> <!-- キャプチャリクエスト -->
<span>キャプチャリクエスト</span> <div class="t-icon capture"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -139,12 +156,12 @@ ...@@ -139,12 +156,12 @@
<div id="footer_collabo"></div> <div id="footer_collabo"></div>
<div id="loadingArea"></div> <div id="loadingArea"></div>
<div class="pip_indicator none" onclick="finishPipMode();"> <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> </div>
<div class="before_loading_indicator"> <div class="before_loading_indicator">
<div id="page_loader" 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>
</div> </div>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <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_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_wrap">
<div class="menu d-flex flex-row flex-wrap"> <div class="menu">
<div class="item collaboration_contents picture_contents document_contents board_contents video_contents"> <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);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.AUDIO);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
...@@ -12,7 +13,8 @@ ...@@ -12,7 +13,8 @@
<span>音声共有</span> <span>音声共有</span>
</a> </a>
</div> </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);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.VIDEO);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
...@@ -21,7 +23,8 @@ ...@@ -21,7 +23,8 @@
<span>動画共有</span> <span>動画共有</span>
</a> </a>
</div> </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);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.CAMERA);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
...@@ -30,7 +33,8 @@ ...@@ -30,7 +33,8 @@
<span>写真共有</span> <span>写真共有</span>
</a> </a>
</div> </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);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.DOCUMENT);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
...@@ -39,7 +43,8 @@ ...@@ -39,7 +43,8 @@
<span>文書共有</span> <span>文書共有</span>
</a> </a>
</div> </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);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.BOARD);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
......
public_new/contact.html
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
</main> </main>
<!-- フッター --> <!-- フッター -->
<footer> <footer id="footer-main">
<div class="footer-wrap"> <div class="footer-wrap">
<div class="d-flex justify-content-around h-100"> <div class="d-flex justify-content-around h-100">
<div class="footer_item"> <div class="footer_item">
......
public_new/css/chat.css
...@@ -101,7 +101,7 @@ input[name="tab_item"] { ...@@ -101,7 +101,7 @@ input[name="tab_item"] {
padding-left: 0; padding-left: 0;
text-align: center; text-align: center;
position: absolute; position: absolute;
right: 0px; right: 15px;
} }
#searchList { #searchList {
...@@ -227,11 +227,11 @@ input[name="tab_item"] { ...@@ -227,11 +227,11 @@ input[name="tab_item"] {
.chat_list .category { .chat_list .category {
text-align: left; text-align: left;
font-size: 1.4rem; font-size: 1.4rem;
height: 30px; height: 40px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
line-height: 30px; line-height: 40px;
background: #c4c4c4; background: #c4c4c4;
padding-left: 10px; padding-left: 10px;
} }
...@@ -245,7 +245,7 @@ input[name="tab_item"] { ...@@ -245,7 +245,7 @@ input[name="tab_item"] {
} }
.chat_list .category::after { .chat_list .category::after {
position: absolute; position: absolute;
top: 0; top: 8px;
right: 10px; right: 10px;
content: "\f107"; content: "\f107";
font: 25px FontAwesome; font: 25px FontAwesome;
...@@ -424,6 +424,11 @@ input[name="tab_item"] { ...@@ -424,6 +424,11 @@ input[name="tab_item"] {
width: 100%; width: 100%;
overflow-x: scroll; overflow-x: scroll;
z-index: 2; z-index: 2;
border-bottom: 1px solid #dee2e6;
transition: 0.5s;
}
.user_list.hide{
transform: translateY(-100%);
} }
.user_list .user_item { .user_list .user_item {
margin: 10px; margin: 10px;
......
public_new/css/collaboration.css
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
top: 0; top: 0;
width: 100%; width: 100%;
padding: 0 10px; padding: 0 10px;
background: #1d1d1d; background: #20304c;
z-index: 10; z-index: 10;
} }
.collabo_nav_l { .collabo_nav_l {
...@@ -26,11 +26,31 @@ ...@@ -26,11 +26,31 @@
margin: 0 5px; 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 *************************/ /**************************** main *************************/
#collabo_main { #collabo_main {
height: calc(100vh - 180px); height: calc(100vh - 140px);
position: relative; position: relative;
margin-bottom: 120px; margin-bottom: 80px;
} }
#collabo_main .user_list_wrap, #collabo_main .user_list_wrap,
#collabo_main .document_wrap, #collabo_main .document_wrap,
...@@ -88,8 +108,10 @@ ...@@ -88,8 +108,10 @@
background: url("../icon/icon_host_tag.png"); background: url("../icon/icon_host_tag.png");
position: absolute; position: absolute;
z-index: 2; z-index: 2;
width: 64px; width: 50px;
height: 64px; height: 50px;
background-repeat: no-repeat;
background-position: center;
} }
.user_item { .user_item {
width: calc(50% - 20px); width: calc(50% - 20px);
...@@ -112,10 +134,11 @@ ...@@ -112,10 +134,11 @@
.btn { .btn {
background-color: transparent; background-color: transparent;
border: none; border: none;
width: 60px; width: 50px;
height: 60px; height: 50px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain;
} }
.btn.menu_btn { .btn.menu_btn {
background-image: url("../icon/icon_collabo_menu.png"); background-image: url("../icon/icon_collabo_menu.png");
...@@ -165,32 +188,111 @@ ...@@ -165,32 +188,111 @@
height: 100vh; height: 100vh;
z-index: 5; z-index: 5;
width: 100%; 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 { #overlay_menu .menu_wrap .menu .item {
width: 50%; width: 70px;
padding: 10px 0; height: 70px;
background: #20304c42;
position: relative;
}
#overlay_menu .menu_wrap .menu .item:hover {
background: #20304c4a;
} }
#overlay_menu .menu_wrap .menu { #overlay_menu .menu_wrap .menu {
width: 220px; width: 90px;
} }
#overlay_menu .menu_wrap .menu .item a { #overlay_menu .menu_wrap .menu .item a {
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
#overlay_menu .menu_wrap .menu .item span{
font-size:12px;
}
#overlay_menu .img_wrap { #overlay_menu .img_wrap {
width: 80px; width: 40px;
height: 80px; height: 40px;
line-height: 80px; line-height: 40px;
background: #0070ca;
border-radius: 8px; border-radius: 8px;
margin: 5px; }
#overlay_menu .img_wrap img {
width: 40px;
height: 40px;
} }
#overlay_menu .overlay_menu_wrap { #overlay_menu .overlay_menu_wrap {
height: calc(100vh - 180px); height: calc(100vh - 180px);
} }
.fas.fa-wrench{
color: #fff;
font-size: 24px;
vertical-align: middle;
}
/* ユーザー追加 */ /* ユーザー追加 */
#overlay_add_user_list { #overlay_add_user_list {
...@@ -337,9 +439,8 @@ ...@@ -337,9 +439,8 @@
/**************************** footer *************************/ /**************************** footer *************************/
#collabo_footer { #collabo_footer {
background: #1d1d1d; background: #20304c;
height: 120px; height: 80px;
margin-top: 20px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
...@@ -355,43 +456,143 @@ ...@@ -355,43 +456,143 @@
display: inline-block; display: inline-block;
} }
#collabo_footer .img_wrap { #collabo_footer .img_wrap {
width: 60px; width: 50px;
height: 60px; height: 50px;
border-radius: 50%; 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 *************************/ /**************************** footer-menu *************************/
#collabo_footer_menu { #collabo_footer_menu {
transition: 0.7s; transition: 0.7s;
height: 70px; height: 60px;
position: fixed; position: fixed;
width: 100%; width: 100%;
margin: 0; margin: 0;
border: none; border: none;
bottom: 120px; bottom: 80px;
z-index: 3; z-index: 3;
} background: #20304c42;
#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);
} }
#collabo_footer_menu .footer_menu-wrap { #collabo_footer_menu .footer_menu-wrap {
background: #1d1d1d;
height: 40px; height: 40px;
} }
...@@ -419,6 +620,15 @@ ...@@ -419,6 +620,15 @@
margin: 0 5px; margin: 0 5px;
color: #fff; 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) { @media screen and (max-width: 768px) {
#add_user_list .user_item_ttl { #add_user_list .user_item_ttl {
...@@ -480,7 +690,6 @@ ...@@ -480,7 +690,6 @@
overflow: scroll; overflow: scroll;
} }
@charset "UTF-8";
/**************************** tab *************************/ /**************************** tab *************************/
.modal-content .tabs { .modal-content .tabs {
margin-top: 60px; margin-top: 60px;
......
public_new/css/common.css
...@@ -25,7 +25,7 @@ nav { ...@@ -25,7 +25,7 @@ nav {
width: 100%; width: 100%;
border-bottom: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd;
background: #fff; background: #fff;
z-index: 2; z-index: 3;
} }
main { main {
margin-top: 60px; margin-top: 60px;
...@@ -135,8 +135,8 @@ main { ...@@ -135,8 +135,8 @@ main {
.profile_modal .modal-footer button { .profile_modal .modal-footer button {
color: #fff; color: #fff;
border-radius: 10px; border-radius: 10px;
min-width: 100px; min-width: 90px;
font-size: 14px; font-size: 11px;
} }
.profile_modal .modal-footer button img { .profile_modal .modal-footer button img {
width: 30px; width: 30px;
...@@ -180,9 +180,9 @@ main { ...@@ -180,9 +180,9 @@ main {
width: 100%; width: 100%;
} }
.profile_modal .modal-header .profile_name span { .profile_modal .modal-header .profile_name span {
line-height: 60px; font-weight: bold;
font-weight: bold; font-size: 20px;
font-size: 20px; padding: 5px;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
......
public_new/css/footer.css
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
/**************************** footer *************************/ /**************************** footer *************************/
footer { footer {
background: #f9f9f9;
height: 70px; height: 70px;
margin-top: 20px; margin-top: 20px;
border-top: 1px solid #cccccc; border-top: 1px solid #cccccc;
...@@ -10,6 +9,9 @@ footer { ...@@ -10,6 +9,9 @@ footer {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
#footer-main{
background: #F9F9F9;
}
footer .footer-wrap { footer .footer-wrap {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
......
public_new/css/loading.css
@charset "UTF-8"; @charset "UTF-8";
/**************************** loading *************************/ /**************************** loading *************************/
#loader-bg { .sp {
display: none; width: 25px;
position: fixed; height: 25px;
width: 100%; clear: both;
height: 100%;
top: 0px;
left: 0px;
background: rgb(255, 255, 255, 0.5);
z-index: 99;
} }
#loader { .sp-circle {
display: none; width: 40px;
position: fixed; height: 40px;
top: 50%; margin: auto;
left: 50%; border: 5px rgba(0, 0, 0, 0.25) solid;
width: 200px; border-top: 5px black solid;
height: 200px; border-radius: 50%;
margin-top: -100px; -webkit-animation: spCircRot .6s infinite linear;
margin-left: -100px; animation: spCircRot .6s infinite linear;
text-align: center;
color: #fff;
z-index: 999;
} }
.fa.fa-circle-o-notch { @-webkit-keyframes spCircRot {
color: #707070; 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"> <footer id="collabo_footer">
<div class="footer-wrap"> <div class="footer-wrap">
<div class="d-flex justify-content-around h-100"> <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"> <div class="footer_item">
<a href="javascript:micTogle();"> <a href="javascript:micTogle();">
<div class="img_wrap bg_red" id="micBtn"> <div class="d-flex flex-column justify-content-center" id="micBtn">
<img src="icon/icon_voice_gray.png" alt="音声"> <div class="t-icon voice my-0"></div>
<span class="text-white txt">マイク</span>
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item none host_contents"> <div class="footer_item none host_contents">
<a href="javascript:recordTogle();"> <a href="javascript:recordTogle();">
<div class="img_wrap bg_gray" id="recordBtn"> <div class="d-flex flex-column justify-content-center" id="recordBtn">
<img src="icon/icon_record.png" alt="録音"> <div class="t-icon record my-0"></div>
<span class="text-white txt">録音</span>
<div class="flash-txt"><p>録音を開始しました</p></div>
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="javascript:Coview_exitCollaboration(isDocument);"> <a href="javascript:Coview_exitCollaboration(isDocument);">
<div class="img_wrap bg_red"> <div class="img_wrap bg_red">
<img src="icon/icon_tell.png" alt="通話"> <img src="icon/icon_close_white.png" alt="閉じる">
</div> </div>
</a> </a>
</div> </div>
......
public_new/icon/icon_add_member_white.png
public_new/icon/icon_add_member_white.png

706 Bytes | W: | H:

public_new/icon/icon_add_member_white.png

559 Bytes | W: | H:

public_new/icon/icon_add_member_white.png
public_new/icon/icon_add_member_white.png
public_new/icon/icon_add_member_white.png
public_new/icon/icon_add_member_white.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_add_user.png
public_new/icon/icon_add_user.png

515 Bytes | W: | H:

public_new/icon/icon_add_user.png

559 Bytes | W: | H:

public_new/icon/icon_add_user.png
public_new/icon/icon_add_user.png
public_new/icon/icon_add_user.png
public_new/icon/icon_add_user.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_change_room_name.png
public_new/icon/icon_change_room_name.png

381 Bytes | W: | H:

public_new/icon/icon_change_room_name.png

400 Bytes | W: | H:

public_new/icon/icon_change_room_name.png
public_new/icon/icon_change_room_name.png
public_new/icon/icon_change_room_name.png
public_new/icon/icon_change_room_name.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_chat.png
public_new/icon/icon_chat.png

285 Bytes | W: | H:

public_new/icon/icon_chat.png

468 Bytes | W: | H:

public_new/icon/icon_chat.png
public_new/icon/icon_chat.png
public_new/icon/icon_chat.png
public_new/icon/icon_chat.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_chat_gray.png
public_new/icon/icon_chat_gray.png

286 Bytes | W: | H:

public_new/icon/icon_chat_gray.png

466 Bytes | W: | H:

public_new/icon/icon_chat_gray.png
public_new/icon/icon_chat_gray.png
public_new/icon/icon_chat_gray.png
public_new/icon/icon_chat_gray.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_collabo_capture.png
public_new/icon/icon_collabo_capture.png

460 Bytes | W: | H:

public_new/icon/icon_collabo_capture.png

507 Bytes | W: | H:

public_new/icon/icon_collabo_capture.png
public_new/icon/icon_collabo_capture.png
public_new/icon/icon_collabo_capture.png
public_new/icon/icon_collabo_capture.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_collabo_delete_white.png
public_new/icon/icon_collabo_delete_white.png

347 Bytes | W: | H:

public_new/icon/icon_collabo_delete_white.png

414 Bytes | W: | H:

public_new/icon/icon_collabo_delete_white.png
public_new/icon/icon_collabo_delete_white.png
public_new/icon/icon_collabo_delete_white.png
public_new/icon/icon_collabo_delete_white.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_collabo_document.png
public_new/icon/icon_collabo_document.png

498 Bytes | W: | H:

public_new/icon/icon_collabo_document.png

454 Bytes | W: | H:

public_new/icon/icon_collabo_document.png
public_new/icon/icon_collabo_document.png
public_new/icon/icon_collabo_document.png
public_new/icon/icon_collabo_document.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_collabo_headset.png
public_new/icon/icon_collabo_headset.png

682 Bytes | W: | H:

public_new/icon/icon_collabo_headset.png

759 Bytes | W: | H:

public_new/icon/icon_collabo_headset.png
public_new/icon/icon_collabo_headset.png
public_new/icon/icon_collabo_headset.png
public_new/icon/icon_collabo_headset.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_collabo_menu.png
public_new/icon/icon_collabo_menu.png

318 Bytes | W: | H:

public_new/icon/icon_collabo_menu.png

234 Bytes | W: | H:

public_new/icon/icon_collabo_menu.png
public_new/icon/icon_collabo_menu.png
public_new/icon/icon_collabo_menu.png
public_new/icon/icon_collabo_menu.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_collabo_pen_white.png
public_new/icon/icon_collabo_pen_white.png

405 Bytes | W: | H:

public_new/icon/icon_collabo_pen_white.png

334 Bytes | W: | H:

public_new/icon/icon_collabo_pen_white.png
public_new/icon/icon_collabo_pen_white.png
public_new/icon/icon_collabo_pen_white.png
public_new/icon/icon_collabo_pen_white.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_collabo_picture.png
public_new/icon/icon_collabo_picture.png

547 Bytes | W: | H:

public_new/icon/icon_collabo_picture.png

538 Bytes | W: | H:

public_new/icon/icon_collabo_picture.png
public_new/icon/icon_collabo_picture.png
public_new/icon/icon_collabo_picture.png
public_new/icon/icon_collabo_picture.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_collabo_place_white.png
public_new/icon/icon_collabo_place_white.png

607 Bytes | W: | H:

public_new/icon/icon_collabo_place_white.png

466 Bytes | W: | H:

public_new/icon/icon_collabo_place_white.png
public_new/icon/icon_collabo_place_white.png
public_new/icon/icon_collabo_place_white.png
public_new/icon/icon_collabo_place_white.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_collabo_videocam.png
public_new/icon/icon_collabo_videocam.png

367 Bytes | W: | H:

public_new/icon/icon_collabo_videocam.png

492 Bytes | W: | H:

public_new/icon/icon_collabo_videocam.png
public_new/icon/icon_collabo_videocam.png
public_new/icon/icon_collabo_videocam.png
public_new/icon/icon_collabo_videocam.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_host_tag.png
public_new/icon/icon_host_tag.png

847 Bytes | W: | H:

public_new/icon/icon_host_tag.png

421 Bytes | W: | H:

public_new/icon/icon_host_tag.png
public_new/icon/icon_host_tag.png
public_new/icon/icon_host_tag.png
public_new/icon/icon_host_tag.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_make_room.png
public_new/icon/icon_make_room.png

382 Bytes | W: | H:

public_new/icon/icon_make_room.png

650 Bytes | W: | H:

public_new/icon/icon_make_room.png
public_new/icon/icon_make_room.png
public_new/icon/icon_make_room.png
public_new/icon/icon_make_room.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_member_blue.png
public_new/icon/icon_member_blue.png

1.61 KB | W: | H:

public_new/icon/icon_member_blue.png

870 Bytes | W: | H:

public_new/icon/icon_member_blue.png
public_new/icon/icon_member_blue.png
public_new/icon/icon_member_blue.png
public_new/icon/icon_member_blue.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_member_white.png
public_new/icon/icon_member_white.png

896 Bytes | W: | H:

public_new/icon/icon_member_white.png

732 Bytes | W: | H:

public_new/icon/icon_member_white.png
public_new/icon/icon_member_white.png
public_new/icon/icon_member_white.png
public_new/icon/icon_member_white.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_movie.png
public_new/icon/icon_movie.png

380 Bytes | W: | H:

public_new/icon/icon_movie.png

362 Bytes | W: | H:

public_new/icon/icon_movie.png
public_new/icon/icon_movie.png
public_new/icon/icon_movie.png
public_new/icon/icon_movie.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_paste.png
public_new/icon/icon_paste.png

417 Bytes | W: | H:

public_new/icon/icon_paste.png

351 Bytes | W: | H:

public_new/icon/icon_paste.png
public_new/icon/icon_paste.png
public_new/icon/icon_paste.png
public_new/icon/icon_paste.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_phone.png
public_new/icon/icon_phone.png

517 Bytes | W: | H:

public_new/icon/icon_phone.png

568 Bytes | W: | H:

public_new/icon/icon_phone.png
public_new/icon/icon_phone.png
public_new/icon/icon_phone.png
public_new/icon/icon_phone.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_photo.png
public_new/icon/icon_photo.png

391 Bytes | W: | H:

public_new/icon/icon_photo.png

437 Bytes | W: | H:

public_new/icon/icon_photo.png
public_new/icon/icon_photo.png
public_new/icon/icon_photo.png
public_new/icon/icon_photo.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_record.png
public_new/icon/icon_record.png

343 Bytes | W: | H:

public_new/icon/icon_record.png

452 Bytes | W: | H:

public_new/icon/icon_record.png
public_new/icon/icon_record.png
public_new/icon/icon_record.png
public_new/icon/icon_record.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_room_menu.png
public_new/icon/icon_room_menu.png

303 Bytes | W: | H:

public_new/icon/icon_room_menu.png

439 Bytes | W: | H:

public_new/icon/icon_room_menu.png
public_new/icon/icon_room_menu.png
public_new/icon/icon_room_menu.png
public_new/icon/icon_room_menu.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_search.png
public_new/icon/icon_search.png

656 Bytes | W: | H:

public_new/icon/icon_search.png

547 Bytes | W: | H:

public_new/icon/icon_search.png
public_new/icon/icon_search.png
public_new/icon/icon_search.png
public_new/icon/icon_search.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_tell.png
public_new/icon/icon_tell.png

500 Bytes | W: | H:

public_new/icon/icon_tell.png

380 Bytes | W: | H:

public_new/icon/icon_tell.png
public_new/icon/icon_tell.png
public_new/icon/icon_tell.png
public_new/icon/icon_tell.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_voice_gray.png
public_new/icon/icon_voice_gray.png

943 Bytes | W: | H:

public_new/icon/icon_voice_gray.png

486 Bytes | W: | H:

public_new/icon/icon_voice_gray.png
public_new/icon/icon_voice_gray.png
public_new/icon/icon_voice_gray.png
public_new/icon/icon_voice_gray.png
  • 2-up
  • Swipe
  • Onion skin
public_new/icon/icon_voice_gray_disable.png
public_new/icon/icon_voice_gray_disable.png

997 Bytes | W: | H:

public_new/icon/icon_voice_gray_disable.png

569 Bytes | W: | H:

public_new/icon/icon_voice_gray_disable.png
public_new/icon/icon_voice_gray_disable.png
public_new/icon/icon_voice_gray_disable.png
public_new/icon/icon_voice_gray_disable.png
  • 2-up
  • Swipe
  • Onion skin
public_new/img/noImage.png
public_new/img/noImage.png

799 Bytes | W: | H:

public_new/img/noImage.png

669 Bytes | W: | H:

public_new/img/noImage.png
public_new/img/noImage.png
public_new/img/noImage.png
public_new/img/noImage.png
  • 2-up
  • Swipe
  • Onion skin
public_new/js/chat.js
...@@ -774,3 +774,17 @@ CHAT.searchMessage = function (keyword, workVal) { ...@@ -774,3 +774,17 @@ CHAT.searchMessage = function (keyword, workVal) {
jQueryMessages.append(noResultMsg); 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 () { $(".menu_btn").click(function () {
var w = $(this).width(); var w = $(this).width();
$(this).toggleClass("hide"); $(this).toggleClass("hide");
$("#overlay_menu.overlay") $('#overlay_menu .item').toggleClass('hide');
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
}); });
// ユーザーリストオーバーレイ表示 // ユーザーリストオーバーレイ表示
$(".user_btn").click(function () { $(".user_btn").click(function () {
var w = $(this).width(); var w = $(this).width();
$(this).toggleClass("hide"); $(this).toggleClass("hide");
$("#overlay_user_list.overlay") $("#overlay_user_list.overlay")
.toggleClass("slidein") .toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" }); .css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
// $('#collabo_main').toggleClass('noscroll');
if ($("#overlay_user_list.overlay").hasClass("noscroll")) { // if($('#overlay_user_list.overlay').hasClass('noscroll')){
$("#overlay_user_list.overlay").removeClass("noscroll"); // $('#overlay_user_list.overlay').removeClass('noscroll');
} else { // }else{
$("#overlay_user_list.overlay").addClass("noscroll"); // $('#overlay_user_list.overlay').addClass('noscroll');
} // }
});
if($(this).hasClass('hide')){
// フッターメニュー　アコーディオン return_scroll();
$(".footer_menu_btn").click(function () { }else{
var h_active = $("#collabo_footer").height(); scrollTo(0, 0);
var h_hide = h_active - $("#collabo_footer_menu").height(); no_scroll();
}
// 非アクティブ時 });
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 });
}
});
// モーダルonモーダル（前のモーダルを非表示に） // モーダルonモーダル（前のモーダルを非表示に）
// ホスト変更ボタン押下イベント // ホスト変更ボタン押下イベント
...@@ -88,12 +76,10 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -88,12 +76,10 @@ document.addEventListener("DOMContentLoaded", function () {
$("#penBtn").click(function () { $("#penBtn").click(function () {
$("#coviewPenCtrBtn").click(); $("#coviewPenCtrBtn").click();
if ($("#penBtn").hasClass("bg_red")) { if ($("#penBtn .pen").hasClass("disable")) {
$("#penBtn").removeClass("bg_red"); $("#penBtn .pen").removeClass("disable");
$("#penBtn").addClass("bg_blue");
} else { } else {
$("#penBtn").addClass("bg_red"); $("#penBtn .pen").addClass("disable");
$("#penBtn").removeClass("bg_blue");
} }
}); });
...@@ -125,9 +111,24 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -125,9 +111,24 @@ document.addEventListener("DOMContentLoaded", function () {
}); });
function penOff() { function penOff() {
if ($("#penBtn").hasClass("bg_blue")) { if (!$("#penBtn .pen").hasClass("disable")) {
$("#coviewPenCtrBtn").click(); $("#coviewPenCtrBtn").click();
$("#penBtn").addClass("bg_red"); $("#penBtn .pen").addClass("disable");
$("#penBtn").removeClass("bg_blue");
} }
} }
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 () { ...@@ -193,7 +193,7 @@ document.addEventListener("DOMContentLoaded", function () {
if ( if (
confirm(data.payload.name + getLocalizedString("request_capture")) confirm(data.payload.name + getLocalizedString("request_capture"))
) { ) {
if ($("#recordBtn").hasClass("bg_red")) { if ($("#recordBtn .record").hasClass("disable")) {
screenLock(); screenLock();
recordStop(function () { recordStop(function () {
$("#screenLock").remove(); $("#screenLock").remove();
...@@ -246,12 +246,12 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -246,12 +246,12 @@ document.addEventListener("DOMContentLoaded", function () {
} }
} else if (data.type === "API_SEND_OWNER_CHANGE_COMPLETE") { } else if (data.type === "API_SEND_OWNER_CHANGE_COMPLETE") {
penOff(); penOff();
if ($("#recordBtn").hasClass("bg_red")) { if ($("#recordBtn .record").hasClass("disable")) {
recordStop(function () { recordStop(function () {
console.log("ホスト変更によりレコードを終了しました"); console.log("ホスト変更によりレコードを終了しました");
}); });
} }
if ($("#micBtn").hasClass("bg_red")) { if ($("#micBtn .voice").hasClass("disable")) {
micOff(); micOff();
} else { } else {
micOn(); micOn();
...@@ -649,7 +649,7 @@ function changeCollaboration(changeCollaborationType) { ...@@ -649,7 +649,7 @@ function changeCollaboration(changeCollaborationType) {
coview_api.ChangeCollaboration("audio"); coview_api.ChangeCollaboration("audio");
break; break;
} }
if ($("#micBtn").hasClass("bg_red")) { if ($("#micBtn .voice").hasClass("disable")) {
micOff(); micOff();
} else { } else {
micOn(); micOn();
...@@ -780,7 +780,7 @@ function Coview_exitCollaboration(isDocument = false) { ...@@ -780,7 +780,7 @@ function Coview_exitCollaboration(isDocument = false) {
android.exitMeetingRoom(); android.exitMeetingRoom();
} }
} }
if ($("#recordBtn").hasClass("bg_red")) { if ($("#recordBtn .record").hasClass("disable")) {
recordStop(Coview_finishCollaboration); recordStop(Coview_finishCollaboration);
} else { } else {
Coview_finishCollaboration(); Coview_finishCollaboration();
...@@ -1057,20 +1057,26 @@ function captureAndShareImage(urls, changeHostName) { ...@@ -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() { function micOn() {
coview_api.MicMuteControl("off"); coview_api.MicMuteControl("off");
$("#micBtn").addClass("bg_blue"); $("#micBtn .voice").removeClass("disable");
$("#micBtn").removeClass("bg_red");
} }
function micOff() { function micOff() {
coview_api.MicMuteControl("on"); coview_api.MicMuteControl("on");
$("#micBtn").removeClass("bg_blue"); $("#micBtn .voice").addClass("disable");
$("#micBtn").addClass("bg_red");
} }
function micTogle() { function micTogle() {
if ($("#micBtn").hasClass("bg_red")) { if ($("#micBtn .voice").hasClass("disable")) {
micOn(); micOn();
} else { } else {
micOff(); micOff();
...@@ -1080,19 +1086,19 @@ function micTogle() { ...@@ -1080,19 +1086,19 @@ function micTogle() {
function recordStart() { function recordStart() {
console.log("レコードを開始しました"); console.log("レコードを開始しました");
MainManRecord("on"); MainManRecord("on");
$("#recordBtn").removeClass("bg_gray"); $("#recordBtn .record").addClass("disable");
$("#recordBtn").addClass("bg_red"); $('.flash-txt').addClass('on');
} }
function recordFinished() { function recordFinished() {
$("#recordBtn").addClass("bg_gray"); $("#recordBtn .record").removeClass("disable");
$("#recordBtn").removeClass("bg_red"); $('.flash-txt').removeClass('on');
// ロック画面の削除 // ロック画面の削除
delete_dom_obj("screenLock"); delete_dom_obj("screenLock");
} }
function recordTogle() { function recordTogle() {
if ($("#recordBtn").hasClass("bg_gray")) { if (!$("#recordBtn .record").hasClass("disable")) {
recordStart(); recordStart();
} else { } else {
recordStop(function () { recordStop(function () {
...@@ -1102,7 +1108,7 @@ function recordTogle() { ...@@ -1102,7 +1108,7 @@ function recordTogle() {
} }
function recordStop(callback) { function recordStop(callback) {
if ($("#recordBtn").hasClass("bg_gray")) { if (!$("#recordBtn .record").hasClass("disable")) {
callback(); callback();
return; return;
} }
......
public_new/loading.html
<div id="loader-bg" class="loading-indicator"> <div id="loader-bg" class="loading-indicator">
<div id="loader" 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>
</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" <div class="modal fade add_user_confirm_modal" id="modalAddUserConfirm" tabindex="-1" role="dialog"
aria-labelledby="modalAddUserConfirm" aria-hidden="true" style="position: fixed;"> aria-labelledby="modalAddUserConfirm" aria-hidden="true" style="position: fixed;">
<div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document"> <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"> <div class="modal-header border-0 pb-0">
<span>ユーザー招待</span> <span>ユーザー招待</span>
</div> </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 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-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"> <form id="addUserFormInCollaboration" action="chat_add_user_confirm.html" method="post">
<!-- ユーザー検索 --> <!-- ユーザー検索 -->
<!-- タブ --> <!-- タブ -->
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<label class="tab_item" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label> <label class="tab_item" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label>
<input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration('0');"> <input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration('0');">
<label class="tab_item" for="tabAllGroupOnAddUserInCollaboration">全グループ</label> <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="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
<div class="category" onclick="CHAT_UI.toggleCategory(this);"><div class="category_name"><span>お気に入り</span></div></div> <div class="category" onclick="CHAT_UI.toggleCategory(this);"><div class="category_name"><span>お気に入り</span></div></div>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<div id="myGroupListForAddUserInCollaboration"></div> <div id="myGroupListForAddUserInCollaboration"></div>
</div> </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="breadcrumb" id="groupPathAreaForAddUserInCollaboration"></div>
<div class="chat_list"> <div class="chat_list">
<!-- 全グループ --> <!-- 全グループ -->
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</div> </div>
<!-- ルーム解説ボタン --> <!-- ルーム解説ボタン -->
<div class="add_user_confirm_btn content" id="addUserConfirmBtnInCollaboration" style="position: fixed;"> <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> 確認<br>
<span class="select_member_num"></span><span class="select_member">名 選択中</span></button> <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
</div> </div>
......
public_new/modal_collabo_profile.html
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</button> </button>
<div class="profile_desc_ d-flex flex-row"> <div class="profile_desc_ d-flex flex-row">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/> <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> </div>
<div class="modal-body"> <div class="modal-body">
......
public_new/template/template_my_name_card.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="modal-header border-0"> <div class="modal-header border-0">
<div class="profile_desc d-flex flex-row"> <div class="profile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'"> <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> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
......
public_new/template/template_room_list.html
<li class="d-flex align-items-center"> <ul class="m-0">
<a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center"> <a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');">
<div class="chat_item_l"> <div class="chat_item d-flex flex-row align-items-center">
<div class="thumbnail{{thumbnailCount}} thumbnail"> <div class="chat_item_l">
{{#attendUsers}} <div class="thumbnail{{thumbnailCount}} thumbnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div> {{#attendUsers}}
{{/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}}
{{/attendUsers}} <div class="img_wrap"><img src='./img/noImage.png'/></div>
{{/attendUsers}}
</div>
</div> </div>
</div> <div class="chat_item_m px-0">
<div class="chat_item_m px-0"> <div class="d-flex flex-column">
<div class="d-flex flex-column"> <div class="d-flex flex-row">
<div class="d-flex flex-row"> <div class="chat_item_t ">
<div class="chat_item_t "> <span class="chat_item_ttl">{{roomName}}</span>
<span class="chat_item_ttl">{{roomName}}</span> </div>
<span class="chat_item_num">({{userCnt}})</span>
</div>
<div class="chat_item_desc">
{{lastMessage}}
</div> </div>
<span class="chat_item_num">({{userCnt}})</span>
</div>
<div class="chat_item_desc">
{{lastMessage}}
</div> </div>
</div> </div>
</div> <div class="chat_item_r">
<div class="chat_item_r"> <div class="d-flex flex-column">
<div class="d-flex flex-column"> <span class="chat_item_time">{{time}}</span>
<span class="chat_item_time">{{time}}</span> {{#unreadMsgCnt}}
{{#unreadMsgCnt}} <span class="chat_item_unread room-{{roomId}}-unread">{{unreadMsgCnt}}</span>
<span class="chat_item_unread room-{{roomId}}-unread">{{unreadMsgCnt}}</span> {{/unreadMsgCnt}}
{{/unreadMsgCnt}} </div>
</div> </div>
</div> </div>
</div> </a>
</a> </li>
</li> </ul>
\ No newline at end of file \ No newline at end of file
public_new/template/template_user_name_card.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</button> </button>
<div class="profile_desc_ d-flex flex-row"> <div class="profile_desc_ d-flex flex-row">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/> <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> </div>
<div class="modal-body" id="userNameCard-scroll"> <div class="modal-body" id="userNameCard-scroll">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment