Skip to content

C
chat_webview
Commit d10b9423 by Kim Peace
Options

Merge branch 'design/playground' into 'develop' 

Design/playground

See merge request !191
parents fb49ca8c 2ea8c239
Showing with 701 additions and 711 deletions
public_new/archive.html
......@@ -66,7 +66,7 @@
</div>
</main>
<!-- フッター -->
<footer>
<footer id="footer-main">
<div class="footer-wrap">
<div class="d-flex justify-content-around h-100">
<div class="footer_item">
......
public_new/archive_detail.html
......@@ -135,7 +135,7 @@
<div class="modal-header border-0">
<div class="profile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/>
<div class="profile_name"><span>{{name}}</span></div>
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
......
public_new/chat.html
......@@ -54,9 +54,9 @@
<!-- タブ -->
<div class="content tabs">
<input id="tabGroup" type="radio" name="tab_item">
<label class="tab_item" for="tabGroup">グループ</label>
<label class="tab_item m-0" for="tabGroup">グループ</label>
<input id="tabDM" type="radio" name="tab_item">
<label class="tab_item" for="tabDM">DM</label>
<label class="tab_item m-0" for="tabDM">DM</label>
<div class="tab_content" id="tab1_content">
<div class="chat_list" id="groupChatList">
</div>
......@@ -73,7 +73,7 @@
</div>
</main>
<!-- フッター -->
<footer>
<footer id="footer-main">
<div class="footer-wrap">
<div class="d-flex justify-content-around h-100">
<div class="footer_item">
......
public_new/chat_add_user.html
......@@ -54,9 +54,9 @@
<!-- タブ -->
<div class="content tabs">
<input id="tabMyGroupOnAddUser" type="radio" name="tab_item" checked>
<label class="tab_item" for="tabMyGroupOnAddUser">マイグループ</label>
<label class="tab_item m-0" for="tabMyGroupOnAddUser">マイグループ</label>
<input id="tabAllGroupOnAddUser" type="radio" name="tab_item">
<label class="tab_item" for="tabAllGroupOnAddUser">全グループ</label>
<label class="tab_item m-0" for="tabAllGroupOnAddUser">全グループ</label>
<div class="tab_content" id="tab1_content">
<div class="chat_list">
<!-- お気に入りグループ -->
......@@ -74,7 +74,7 @@
<a href="#" class="w-100" id="rootGroupBtnForAddUser">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div>
</div>
......@@ -92,7 +92,7 @@
<a href="#" class="w-100" id="parentGroupBtnForAddUser">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div>
</div>
......
public_new/chat_make_room.html
......@@ -44,7 +44,7 @@
<main id="chatMakeRoom">
<form id="makeRoomForm" action="chat_make_room_confirm.html" method="post">
<!-- ユーザー検索 -->
<div class="search_form my-2">
<div class="search_form">
<input type="search" name="search" placeholder="ユーザー検索" maxlength="30">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
......@@ -54,9 +54,9 @@
<!-- タブ -->
<div class="content tabs">
<input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item" checked>
<label class="tab_item" for="tabMyGroupOnMakeRoom">マイグループ</label>
<label class="tab_item m-0" for="tabMyGroupOnMakeRoom">マイグループ</label>
<input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item">
<label class="tab_item" for="tabAllGroupOnMakeRoom">全グループ</label>
<label class="tab_item m-0" for="tabAllGroupOnMakeRoom">全グループ</label>
<div class="tab_content" id="tab1_content">
<div class="chat_list">
<!-- お気に入りグループ -->
......
public_new/chat_room.html
......@@ -43,8 +43,8 @@
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
<a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a>
<a href="#" data-toggle="modal" data-target="#menuModalCenter" id="roomMenu" class="none"><img
<a href="#" class="search_menu mx-2"><img src="icon/icon_search.png" alt="検索"></a>
<a href="#" data-toggle="modal" data-target="#menuModalCenter" id="roomMenu" class="none mx-1"><img
src="icon/icon_room_menu.png" alt="メニュー"></a>
</div>
</div><!-- .col -->
......
public_new/collaboration.html
......@@ -11,6 +11,8 @@
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/contact.css">
<link rel="stylesheet" href="./css/chat.css">
<link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
......@@ -24,16 +26,26 @@
<header id="collabo_header">
<div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100">
通話中
<div class="d-flex flex-row">
<span class="collabo-label collaboration_contents voice_contents">音声</span>
<span class="collabo-label collaboration_contents video_contents">動画</span>
<span class="collabo-label collaboration_contents picture_contents">写真</span>
<span class="collabo-label collaboration_contents document_contents">文書</span>
<span class="collabo-label collaboration_contents board_contents">ボード</span>
<span class="mx-3 host_contents">司会者</span>
<span class="mx-3 none">参加者</span>
</div>
</div>
<div class="collabo_nav_r">
<div class="text-right d-flex align-items-center">
<button type="button" name="button"
class="btn user_btn collaboration_contents picture_contents video_contents board_contents"></button>
class="btn user_btn"></button>
<button type="button" name="button" class="btn add_user_btn none"></button>
<button type="button" name="button" class="btn menu_btn host_contents"></button>
<button type="button" name="button" class="btn start_pip_btn collaboration_contents document_contents"
onclick="startPipMode();"></button>
<div class="menu-icon menu_btn host_contents" onclick="this.classList.toggle('hover');">
<div class="menu-bar menu-bar1"></div>
<div class="menu-bar menu-bar2"></div>
<div class="menu-bar menu-bar3"></div>
</div>
<!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
</div>
</div>
......@@ -45,6 +57,24 @@
<!-- コンテンツ -->
<main id="collabo_main" class="none">
<div class="document_wrap">
<!-- 音声共有 -->
<div class="talking_area icon_talking_wrap d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents voice_contents none">
<div class="talking_img_wrap">
<img src="icon/icon_talking_white.png" alt="通話中">
</div>
<span class="text-white mt-4">通話中</span>
</div>
<!-- 文書共有 -->
<div class="start_pip_area d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents document_contents none">
<div class="start_pip_img_wrap">
<a href="javascript:startPipMode();">
<img src="icon/icon_start_pip.png" alt="文書共有">
</a>
</div>
<span class="text-white mt-2">共有する</span>
</div>
<div class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
</div>
</div>
......@@ -80,71 +110,17 @@
<div id="modal_collabo_host_request"></div>
<!-- フッター -->
<footer id="collabo_footer_menu" class="active">
<button type="button" name="button" class="footer_menu_btn"></button>
<div class="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item photo_select_button collaboration_contents picture_contents">
<div class="img_wrap bg_blue" id="photo_open_place_holder">
<img src="icon/icon_collabo_picture.png" alt="写真">
</div>
</div>
<div class="footer_menu_item">
<div class="img_wrap bg_red" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン">
</div>
</div>
<div class="footer_menu_item none">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
</div>
</div>
<div class="footer_menu_item">
<div class="img_wrap bg_blue" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除">
</div>
</div>
</div>
<div class="d-flex align-items-center h-100 none">
<div class="footer_menu_item">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_rewind_white.png" alt="戻る">
</div>
</div>
<div class="footer_menu_item">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_forward_white.png" alt="進む">
</div>
</div>
</div>
<div class="d-flex align-items-center h-100 collaboration_contents video_contents_host">
<div class="footer_menu_item">
<div class="img_wrap wide bg_blue" id="captureBtn">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ">
<span>キャプチャ</span>
</div>
</div>
</div>
<div class="d-flex align-items-center h-100 collaboration_contents video_contents_user">
<div class="footer_menu_item">
<div class="img_wrap wide bg_blue" id="captureRequestBtn">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ">
<span>キャプチャリクエスト</span>
</div>
</div>
</div>
</div>
</footer>
<!-- フッター -->
<div id="footer_collabo"></div>
<div id="loadingArea"></div>
<div class="pip_indicator none" onclick="finishPipMode();">
<div style="vertical-align: middle;display: table-cell;">協業中
<div style="vertical-align: middle;display: table-cell;">
<img src="icon/icon_end_pip.png" alt="文書共有" style="width: 30px;height: 30px;">
<span style="font-size: 20px;vertical-align: middle;">戻る</span>
</div>
</div>
<div class="before_loading_indicator">
<div id="page_loader" class="before_loading_indicator">
<i class="fa fa-circle-o-notch fa-spin fa-1x fa-fw"></i>
<div class="sp sp-circle"></div>
</div>
</div>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
......
public_new/collaboration_overlay_menu.html
<div id="overlay_menu" class="overlay fixed" style="z-index: 6 !important;">
<div id="overlay_menu" class="fixed hide">
<div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="overlay_menu d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item collaboration_contents picture_contents document_contents board_contents video_contents">
<div class="menu">
<div class="item hide rounded-circle shadow m-2 item01">
<span class="item-overlay rounded-circle collaboration_contents voice_contents"></span>
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.AUDIO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
</div>
<span>音声共有</span>
<span>音声</span>
</a>
</div>
<div class="item collaboration_contents picture_contents voice_contents document_contents board_contents">
<div class="item hide rounded-circle shadow m-2 item02">
<span class="item-overlay rounded-circle collaboration_contents video_contents"></span>
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.VIDEO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
</div>
<span>動画共有</span>
<span>動画</span>
</a>
</div>
<div class="item collaboration_contents video_contents voice_contents document_contents board_contents">
<div class="item hide rounded-circle shadow m-2 item03">
<span class="item-overlay rounded-circle collaboration_contents picture_contents"></span>
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.CAMERA);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
</div>
<span>写真共有</span>
<span>写真</span>
</a>
</div>
<div class="item collaboration_contents video_contents voice_contents picture_contents board_contents">
<div class="item hide rounded-circle shadow m-2 item04">
<span class="item-overlay rounded-circle collaboration_contents document_contents"></span>
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.DOCUMENT);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
</div>
<span>文書共有</span>
<span>文書</span>
</a>
</div>
<div class="item collaboration_contents video_contents voice_contents picture_contents document_contents">
<div class="item hide rounded-circle shadow m-2 item05">
<span class="item-overlay rounded-circle collaboration_contents board_contents"></span>
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.BOARD);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
</div>
<span>落書き</span>
<span>ボード</span>
</a>
</div>
</div>
......
public_new/collaboration_video.html
......@@ -27,7 +27,11 @@
<div class="text-right d-flex align-items-center">
<button type="button" name="button" class="btn user_btn"></button>
<button type="button" name="button" class="btn add_user_btn none"></button>
<button type="button" name="button" class="btn menu_btn"></button>
<div class="menu-icon menu_btn" onclick="this.classList.toggle('hover');">
<div class="menu-bar menu-bar1"></div>
<div class="menu-bar menu-bar2"></div>
<div class="menu-bar menu-bar3"></div>
</div>
<!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
</div>
</div>
......@@ -75,7 +79,6 @@
<!-- フッター -->
<footer id="collabo_footer_menu" class="active">
<button type="button" name="button" class="footer_menu_btn"></button>
<div class="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
......
public_new/collaboration_video_overlay_menu.html
<div id="overlay_menu" class="overlay fixed">
<div id="overlay_menu" class="fixed hide">
<div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="overlay_menu d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item">
<div class="menu">
<div class="item rounded-circle shadow m-2 item01">
<a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
......@@ -11,7 +11,7 @@
<span>音声共有</span>
</a>
</div>
<div class="item">
<div class="item rounded-circle shadow m-2 item02">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
......@@ -19,7 +19,7 @@
<span>写真共有</span>
</a>
</div>
<div class="item">
<div class="item rounded-circle shadow m-2 item03">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
......@@ -27,7 +27,7 @@
<span>文書共有</span>
</a>
</div>
<div class="item">
<div class="item rounded-circle shadow m-2 item04">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
......
public_new/collaboration_voice_overlay_menu.html
<div id="overlay_menu" class="overlay fixed">
<div id="overlay_menu" class="fixed hide">
<div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="overlay_menu d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item">
<div class="menu">
<div class="item rounded-circle shadow m-2 item01">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
......@@ -11,7 +11,7 @@
<span>写真共有</span>
</a>
</div>
<div class="item">
<div class="item rounded-circle shadow m-2 item02">
<a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
......@@ -19,7 +19,7 @@
<span>動画共有</span>
</a>
</div>
<div class="item">
<div class="item rounded-circle shadow m-2 item03">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
......@@ -27,7 +27,7 @@
<span>文書共有</span>
</a>
</div>
<div class="item">
<div class="item rounded-circle shadow m-2 item04">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
......
public_new/contact.html
......@@ -52,14 +52,14 @@
<div class="content tabs">
<input id="tabMyGroup" type="radio" name="tab_item" checked>
<label class="tab_item" for="tabMyGroup">マイグループ</label>
<label class="tab_item m-0" for="tabMyGroup">マイグループ</label>
<input id="tabAllGroup" type="radio" name="tab_item">
<label class="tab_item" for="tabAllGroup">全グループ</label>
<label class="tab_item m-0" for="tabAllGroup">全グループ</label>
<!-- タブ -->
<div class="tab_content" id="tab1_content">
<div class="content chat_list my_info_sell">
<ul class="p-0 chat_make_room_list">
<ul class="p-0 chat_make_room_list m-0">
<li class="d-flex align-items-center">
<a href="#" style="width: 100%;">
<div class="chat_item d-flex flex-row align-items-center" style="background: none !important;">
......@@ -89,15 +89,15 @@
</div>
</div>
<div class="tab_content" id="tab2_content">
<div class="breadcrumb" id="groupPathArea"></div>
<div class="breadcrumb m-0" id="groupPathArea"></div>
<div class="chat_list">
<!-- 全グループ -->
<ul class="p-0 chat_make_room_list">
<ul class="p-0 chat_make_room_list m-0">
<li class="d-flex align-items-center" id="rootGroupArea">
<a href="#" class="w-100" id="rootGroupBtn">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div>
</div>
......@@ -115,7 +115,7 @@
<a href="#" class="w-100" id="parentGroupBtn">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div>
</div>
......@@ -143,7 +143,7 @@
</main>
<!-- フッター -->
<footer>
<footer id="footer-main">
<div class="footer-wrap">
<div class="d-flex justify-content-around h-100">
<div class="footer_item">
......
public_new/css/archive.css
......@@ -79,6 +79,8 @@
.archive_detail .ttl{
font-size: 18px;
font-weight: bold;
background: #0070ca2b;
padding: 10px;
}
.archive_detail .item {
margin-bottom: 20px;
......@@ -97,7 +99,7 @@
margin: 0 5px;
}
.archive_detail_desc {
margin: 0 10px;
margin: 20px;
}
.archive_detail .archive_detail_desc .archive_detail_user_list span,
.archive_detail .archive_detail_desc .archive_detail_sv_user span {
......
public_new/css/chat.css
......@@ -18,6 +18,7 @@
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
border-radius: 5px 5px 0 0;
}
.msg_notification {
display: none;
......@@ -80,9 +81,6 @@ input[name="tab_item"] {
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.chat_list ul li:first-child {
border-top: 1px solid #e2e8f0;
}
.chat_list .chat_item_t,
.chat_list .chat_item_desc {
white-space: nowrap;
......@@ -101,7 +99,7 @@ input[name="tab_item"] {
padding-left: 0;
text-align: center;
position: absolute;
right: 0px;
right: 15px;
}
#searchList {
......@@ -120,7 +118,18 @@ input[name="tab_item"] {
overflow: hidden;
margin: 0 auto;
}
.chat_item_l .thumbnail-icon {
width: 50px;
height: 50px;
text-align: center;
display: flex;
justify-content: space-around;
align-items: center;
}
.chat_item_l .thumbnail-icon img{
width: 35px;
height: 35px;
}
.chat_item_l .thumbnail img{
width: 50px;
height: 50px;
......@@ -227,13 +236,15 @@ input[name="tab_item"] {
.chat_list .category {
text-align: left;
font-size: 1.4rem;
height: 30px;
height: 40px;
font-size: 16px;
cursor: pointer;
position: relative;
line-height: 30px;
background: #c4c4c4;
line-height: 40px;
background: #0070ca2b;
padding-left: 10px;
border-top: 1px solid #0070ca21;
border-bottom: 1px solid #0070ca21;
}
.category_name {
white-space: nowrap;
......@@ -245,7 +256,7 @@ input[name="tab_item"] {
}
.chat_list .category::after {
position: absolute;
top: 0;
top: 8px;
right: 10px;
content: "\f107";
font: 25px FontAwesome;
......@@ -424,6 +435,11 @@ input[name="tab_item"] {
width: 100%;
overflow-x: scroll;
z-index: 2;
border-bottom: 1px solid #dee2e6;
transition: 0.5s;
}
.user_list.hide{
transform: translateY(-100%);
}
.user_list .user_item {
margin: 10px;
......@@ -789,10 +805,10 @@ input[name="tab_item"] {
}
.menu_modal .modal-body ul li {
border-bottom: 1px solid #c6c6c6;
height: 40px;
height: 50px;
}
.menu_modal .modal-body ul li a {
line-height: 40px;
line-height: 50px;
display: block;
color: #323743;
}
......@@ -816,6 +832,7 @@ input[name="tab_item"] {
.chat_make_room_list {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#favoriteListForMakeRoom > ul > li:nth-child(1) {
......
public_new/css/collaboration.css
@charset "UTF-8";
/**************************** header *************************/
#collabo_header {
height: 60px;
height: 50px;
position: fixed;
top: 0;
width: 100%;
padding: 0 10px;
background: #1d1d1d;
background: #20304c;
z-index: 10;
}
.collabo_nav_l {
......@@ -26,22 +26,50 @@
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: 14px;
font-weight: bold;
}
/**************************** main *************************/
#collabo_main {
height: calc(100vh - 180px);
height: calc(100vh - 130px);
position: relative;
margin-bottom: 120px;
margin-bottom: 80px;
margin-top: 50px;
}
#overlay_user_list .user_list {
background: #383838!important;
border: none!important;
height: calc(100% - 140px);
overflow-x: unset;
overflow-y: scroll;
}
#collabo_main .user_list_wrap,
#collabo_main .document_wrap,
#overlay_user_list .user_list_wrap {
height: 100%;
background: #525252;
background: #383838;
}
#collabo_main .user_list_collabo,
#overlay_user_list .user_list_collabo {
background: #525252;
padding-bottom: 120px;
background: #383838;
padding: 0 5px 80px 5px;
overflow: auto;
height: inherit;
}
......@@ -88,8 +116,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);
......@@ -108,14 +138,57 @@
height: 100%;
}
#collabo_main .talking_area img {
width: 60px;
height: 60px;
}
#collabo_main .talking_area,#collabo_main .start_pip_area {
position: relative;
z-index: 2;
}
.talking_img_wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
border-radius: 50%;
border: 1px solid #fff;
box-shadow: 0 0 20px #ffffff;
cursor: pointer;
}
.talking_img_wrap::before, .talking_img_wrap::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
border: 1px solid #fff;
border-radius: 50%;
box-sizing: border-box;
pointer-events: none;
animation: pulsate 2s linear infinite;
}
/**************************** overlay *************************/
.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");
......@@ -142,12 +215,12 @@
background-image: url("../icon/icon_close.png");
}
.overlay {
transition: 0.7s;
transition: 0.5s;
position: absolute;
top: 60px;
width: 100%;
right: -100%;
background: #525252;
background: #383838;
height: 100vh;
}
#add_user_list{
......@@ -158,38 +231,116 @@
position: fixed;
}
.overlay.slidein {
top: 60px;
top: 50px;
right: 0;
left: 0;
background: #525252;
background: #383838;
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;
}
#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: #20304c78;
position: relative;
z-index: 999;
}
#overlay_menu .menu_wrap .menu .item.hide{
z-index: 0;
}
#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 .overlay_menu_wrap {
height: calc(100vh - 180px);
#overlay_menu .img_wrap img {
width: 40px;
height: 40px;
}
.fas.fa-wrench{
color: #fff;
font-size: 24px;
vertical-align: middle;
}
/* ユーザー追加 */
......@@ -337,9 +488,8 @@
/**************************** footer *************************/
#collabo_footer {
background: #1d1d1d;
height: 120px;
margin-top: 20px;
background: #20304c;
height: 80px;
position: fixed;
bottom: 0;
width: 100%;
......@@ -355,43 +505,143 @@
display: inline-block;
}
#collabo_footer .img_wrap {
width: 60px;
height: 60px;
width: 50px;
height: 50px;
border-radius: 50%;
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%;
line-height: 55px;
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 +669,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 +739,6 @@
overflow: scroll;
}
@charset "UTF-8";
/**************************** tab *************************/
.modal-content .tabs {
margin-top: 60px;
......@@ -548,331 +806,6 @@ input[name="tab_item"] {
color: #fff;
}
/**************************** chat list *************************/
.modal-content .chat_list ul {
padding: 0;
margin-top: 1rem;
}
.modal-content .chat_list img {
width: 90px;
max-height: 60px;
}
.modal-content .chat_list ul li {
list-style: none;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.modal-content .chat_list ul li:first-child {
border-top: 1px solid #e2e8f0;
}
.modal-content .chat_list .chat_item_t,
.chat_list .chat_item_desc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-content .chat_item_l {
margin: 0 15px;
}
.modal-content .chat_item_m {
white-space: nowrap;
overflow: hidden;
width: calc(100% - 160px);
}
/* リスト */
.modal-content .chat_list .chat_item:hover {
background: aliceblue;
}
/* サムネイル画像 */
.modal-content .chat_item_l .thumbnail {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
}
.modal-content .chat_item_l .thumbnail img{
width: 50px;
height: 50px;
}
.modal-content .chat_item_l .thumbnail4 img {
width: 25px;
height: 25px;
float: left;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(1) {
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(1) img {
width: 50px;
height: 50px;
position: absolute;
left: -12px;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(2) {
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
float: left;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img {
width: 25px;
height: 30px;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(3) {
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
float: left;
}
.modal-content .chat_item_l .thumbnail2 .img_wrap:nth-child(1) {
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
}
.modal-content .chat_item_l .thumbnail2 .img_wrap:nth-child(2) {
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
}
.modal-content .chat_item_l .thumbnail2 .img_wrap img {
width: 50px;
height: 50px;
position: absolute;
left: -12px;
}
.modal-content .chat_item {
height: 90px;
}
.modal-content .chat_list li {
list-style: none;
}
.modal-content .chat_list a {
color: #323743;
}
.modal-content .chat_make_room a {
color: #323743;
}
/* タイトル（グループ名、個人名） */
.modal-content .chat_item_ttl,
.chat_item_num {
font-weight: bold;
}
/**************************** make room *************************/
.modal-content .chat_list .category {
text-align: left;
font-size: 1.4rem;
height: 30px;
font-size: 16px;
cursor: pointer;
position: relative;
line-height: 30px;
background: #c4c4c4;
padding-left: 10px;
}
.modal-content .category_name {
white-space: nowrap;
overflow: scroll;
width: 90%;
}
.modal-content .chat_list .category.open::after {
content: "\f106";
}
.modal-content .chat_list .category::after {
position: absolute;
top: 0;
right: 10px;
content: "\f107";
font: 25px FontAwesome;
}
/* お気に入り */
.modal-content .star.active:before {
content: "\f005";
font: 26px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #F5D256;
padding: 20px;
}
.modal-content .star.disable:before {
content: "\f005";
font: 26px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 400;
color: #C4C4C4;
padding: 20px;
}
/* メンバー選択チェックボックス */
.modal-content .chat_item_l_chk {
height: 100%;
display: table;
margin-right: 20px;
width: 50px;
}
.modal-content .checkbox {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.modal-content .checkbox-input {
display: none;
}
.modal-content .checkbox-parts {
position: relative;
}
.modal-content .checkbox-parts::before {
display: block;
position: absolute;
border: 2px solid #0070ca;
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
top: 5px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.modal-content .checkbox-input:checked + .checkbox-parts::after {
display: block;
position: absolute;
content: "\f107";
font: 40px FontAwesome;
color: white;
width: 40px;
height: 40px;
top: 5px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #0070ca;
border-radius: 50%;
}
/* ルームボタン */
.modal-content .add_user_confirm_btn button,
.modal-content .add_user_btn button {
height: 60px;
position: fixed;
bottom: 0;
width: 100%;
background: #0070ca;
color: #fff;
border: none;
font-size: 18px;
}
.modal-content .select_member {
font-size: 14px;
}
#chat_make_room_confirm .room_name,
#chat_change_room_name .room_name {
width: 90%;
margin: 0 auto;
}
#chat_make_room_confirm .room_name h2,
#chat_change_room_name .room_name h2 {
margin-top: 20px;
font-size: 18px;
}
#chat_make_room_confirm .chat_list h2,
#chat_add_user_confirm .chat_list h2 {
font-size: 18px;
}
#chat_make_room_confirm .chat_list,
#chat_add_user_confirm .chat_list {
padding: 20px 0;
width: 90%;
margin: 0 auto;
}
/* ルーム名入力フォーム */
.modal-content .input_name_room {
padding-left: 10px;
width: 100%;
border: none;
border-bottom: 1px solid #bdbdbd;
height: 40px;
margin-bottom: 20px;
}
/* ユーザーリスト */
.modal-content .user_list {
position: fixed;
top: 60px;
background: #fff;
width: 100%;
overflow-x: scroll;
z-index: 2;
}
.modal-content .user_list .user_item {
margin: 10px;
text-align: center;
}
.modal-content .user_list .user_item span {
width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.modal-content .user_list .user_item a {
color: #323743;
}
/* ユーザーリストフィルター */
#filter .user_item .img_wrap {
position: relative;
}
#filter .user_item .img_wrap.filter:after {
position: absolute;
content: "\f107";
font: 50px FontAwesome;
width: 50px;
height: 50px;
color: #fff;
left: 5px;
background: #0070ca82;
border-radius: 50%;
}
.modal-content .user_list .user_item img {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 auto;
}
.add_user_confirm_btn button {
height: 60px;
position: fixed;
bottom: 0;
width: 100%;
background: #0070ca;
color: #fff;
border: none;
font-size: 18px;
}
.pip_indicator {
display: table;
vertical-align: middle;
......@@ -880,7 +813,7 @@ input[name="tab_item"] {
top: 0px;
width: 100%;
height: 100vh;
background-color: steelblue;
background-color: #20304c;
color: azure;
position: fixed;
z-index: 1000;
......
public_new/css/common.css
......@@ -25,13 +25,14 @@ nav {
width: 100%;
border-bottom: 1px solid #cdcdcd;
background: #fff;
z-index: 2;
z-index: 3;
}
main {
margin-top: 60px;
}
.nav-item {
padding: 0 10px;
white-space: nowrap;
}
.nav-ttl {
text-align: center;
......@@ -135,8 +136,8 @@ main {
.profile_modal .modal-footer button {
color: #fff;
border-radius: 10px;
min-width: 100px;
font-size: 14px;
min-width: 90px;
font-size: 11px;
}
.profile_modal .modal-footer button img {
width: 30px;
......@@ -180,9 +181,9 @@ main {
width: 100%;
}
.profile_modal .modal-header .profile_name span {
line-height: 60px;
font-weight: bold;
font-size: 20px;
font-weight: bold;
font-size: 20px;
padding: 5px;
}
@media screen and (max-width: 768px) {
......
public_new/css/contact.css
......@@ -5,7 +5,7 @@
white-space: nowrap;
overflow-x: scroll;
display: block;
margin-bottom: 10px;
background: #0070ca2b;
}
.breadcrumb_item:not(:last-child):after {
content: ">";
......
public_new/css/footer.css
......@@ -2,7 +2,6 @@
/**************************** footer *************************/
footer {
background: #f9f9f9;
height: 70px;
margin-top: 20px;
border-top: 1px solid #cccccc;
......@@ -10,6 +9,9 @@ footer {
bottom: 0;
width: 100%;
}
#footer-main{
background: #F9F9F9;
}
footer .footer-wrap {
margin: 0 auto;
height: 100%;
......
public_new/css/loading.css
@charset "UTF-8";
/**************************** loading *************************/
#loader-bg {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: rgb(255, 255, 255, 0.5);
z-index: 99;
.sp {
width: 25px;
height: 25px;
clear: both;
}
#loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
text-align: center;
color: #fff;
z-index: 999;
.sp-circle {
width: 40px;
height: 40px;
margin: auto;
border: 5px rgba(0, 0, 0, 0.25) solid;
border-top: 5px black solid;
border-radius: 50%;
-webkit-animation: spCircRot .6s infinite linear;
animation: spCircRot .6s infinite linear;
}
.fa.fa-circle-o-notch {
color: #707070;
@-webkit-keyframes spCircRot {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@keyframes spCircRot {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
public_new/footer_collabo.html
<footer id="collabo_footer">
<div class="footer-wrap">
<div class="d-flex justify-content-around h-100">
<div class="footer_item">
<div class="footer_item mx-md-3 photo_select_button collaboration_contents picture_contents">
<a href="javascript:photo_open_place_holderToggle();">
<div class="d-flex flex-column justify-content-center" id="photo_open_place_holder">
<div class="t-icon picture my-0"></div>
<span class="text-white txt">ピクチャ</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
<a href="javascript:penToggle();">
<div class="d-flex flex-column justify-content-center" id="penBtn">
<div class="t-icon pen disable my-0"></div>
<span class="text-white txt">ペン</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
<a href="javascript:eraserToggle();">
<div class="d-flex flex-column justify-content-center"　id="eraserBtn">
<div class="t-icon delete my-0"></div>
<span class="text-white txt">削除</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3 collaboration_contents video_contents_host">
<a href="javascript:captureToggle();">
<div class="d-flex flex-column justify-content-center" id="captureBtn">
<div class="t-icon capture my-0"></div>
<span class="text-white txt">キャプチャ</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3 collaboration_contents video_contents_user">
<a href="javascript:captureRequestToggle();">
<div class="d-flex flex-column justify-content-center" id="captureRequestBtn">
<div class="t-icon capture my-0"></div>
<span class="text-white txt">キャプチャリクエスト</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3">
<a href="javascript:micTogle();">
<div class="img_wrap bg_red" id="micBtn">
<img src="icon/icon_voice_gray.png" alt="音声">
<div class="d-flex flex-column justify-content-center" id="micBtn">
<div class="t-icon voice my-0"></div>
<span class="text-white txt">マイク</span>
</div>
</a>
</div>
<div class="footer_item none host_contents">
<div class="footer_item mx-md-3 none host_contents">
<a href="javascript:recordTogle();">
<div class="img_wrap bg_gray" id="recordBtn">
<img src="icon/icon_record.png" alt="録音">
<div class="d-flex flex-column justify-content-center" id="recordBtn">
<div class="t-icon record my-0"></div>
<span class="text-white txt">録音</span>
<div class="flash-txt"><p>録音を開始しました</p></div>
</div>
</a>
</div>
<div class="footer_item">
<div class="footer_item mx-md-3">
<a href="javascript:Coview_exitCollaboration(isDocument);">
<div class="img_wrap bg_red">
<img src="icon/icon_tell.png" alt="通話">
<div class="img_wrap bg_red mx-1">
<img src="icon/icon_close_white.png" alt="閉じる">
</div>
</a>
</div>
......
public_new/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_start_pip.png
public_new/icon/icon_start_pip.png

1.88 KB | W: | H:

public_new/icon/icon_start_pip.png

718 Bytes | W: | H:

public_new/icon/icon_start_pip.png
public_new/icon/icon_start_pip.png
public_new/icon/icon_start_pip.png
public_new/icon/icon_start_pip.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) {
jQueryMessages.append(noResultMsg);
}
};
// 下スクロールでユーザーリストを非表示
var startPos = 0,winScrollTop = 0;
$(window).on('scroll',function(){
winScrollTop = $(this).scrollTop();
if (winScrollTop >= startPos) {
if(winScrollTop >= 200){
$('#chat_room .user_list').addClass('hide');
}
} else {
$('#chat_room .user_list').removeClass('hide');
}
startPos = winScrollTop;
});
public_new/js/collaboration.js
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
no_scroll();
// メニューオーバーレイ表示
$(".menu_btn").click(function () {
var w = $(this).width();
$(this).toggleClass("hide");
$("#overlay_menu.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
$('#overlay_menu .item').toggleClass('hide');
});
// ユーザーリストオーバーレイ表示
$(".user_btn").click(function () {
var w = $(this).width();
$(this).toggleClass("hide");
$("#overlay_user_list.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
$("#overlay_user_list.overlay").removeClass("noscroll");
} else {
$("#overlay_user_list.overlay").addClass("noscroll");
}
});
// ユーザーリストオーバーレイ表示
$(".user_btn").click(function () {
var w = $(this).width();
// フッターメニュー　アコーディオン
$(".footer_menu_btn").click(function () {
var h_active = $("#collabo_footer").height();
var h_hide = h_active - $("#collabo_footer_menu").height();
$(this).toggleClass("hide");
$("#overlay_user_list.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
// 非アクティブ時
if ($(this).hasClass("hide")) {
$(this).removeClass("hide");
$("#collabo_footer_menu").css({ bottom: h_active });
// アクティブ時
} else {
$(this).addClass("hide");
$("#collabo_footer_menu").css({ bottom: h_hide });
}
});
if($(this).hasClass('hide')){
return_scroll();
}else{
scrollTo(0, 0);
no_scroll();
}
});
// モーダルonモーダル（前のモーダルを非表示に）
// ホスト変更ボタン押下イベント
......@@ -59,6 +43,7 @@ document.addEventListener("DOMContentLoaded", function () {
// 閉じるイベント
$(".close_btn").click(function () {
$("#overlay_add_user_list").addClass("none");
no_scroll();
});
// ユーザー追加イベント
......@@ -68,6 +53,7 @@ document.addEventListener("DOMContentLoaded", function () {
// ユーザー招待メンバー検索
$(".add_user_btn").click(function () {
return_scroll();
CHAT_UI.showLoadingIndicator();
CHAT.globalSelectedUserList = [];
CHAT_UI.refreshMyGroupForAddUserInCollaboration();
......@@ -85,49 +71,26 @@ document.addEventListener("DOMContentLoaded", function () {
CHAT_UI.confirmInviteUserListInCollaboration();
});
});
$("#penBtn").click(function () {
$("#coviewPenCtrBtn").click();
if ($("#penBtn").hasClass("bg_red")) {
$("#penBtn").removeClass("bg_red");
$("#penBtn").addClass("bg_blue");
} else {
$("#penBtn").addClass("bg_red");
$("#penBtn").removeClass("bg_blue");
}
});
$("#photo_open_place_holder").click(function () {
$("#open_file_upload").trigger("click");
});
$("#eraserBtn").click(function () {
$("#coviewEraserCtrBtn").click();
});
$("#captureBtn").click(function () {
if ($("#recordBtn").hasClass("bg_red")) {
screenLock();
recordStop(function () {
$("#screenLock").remove();
coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
});
} else {
coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
}
});
$("#captureRequestBtn").click(function () {
fw.sendToMsg("others", "CAPTURE_REQUEST", {
name: CHAT.globalLoginParameter.loginId,
});
});
});
function penOff() {
if ($("#penBtn").hasClass("bg_blue")) {
if (!$("#penBtn .pen").hasClass("disable")) {
$("#coviewPenCtrBtn").click();
$("#penBtn").addClass("bg_red");
$("#penBtn").removeClass("bg_blue");
$("#penBtn .pen").addClass("disable");
}
}
function no_scroll() {
document.addEventListener("mousewheel", scroll_control, { passive: false });
document.addEventListener("touchmove", scroll_control, { passive: false });
}
// スクロール禁止解除
function return_scroll() {
document.removeEventListener("mousewheel", scroll_control, { passive: false });
document.removeEventListener('touchmove', scroll_control, { passive: false });
}
function scroll_control(event) {
if(event.cancelable){
event.preventDefault();
}
}
\ No newline at end of file
public_new/js/share.js
......@@ -193,7 +193,7 @@ document.addEventListener("DOMContentLoaded", function () {
if (
confirm(data.payload.name + getLocalizedString("request_capture"))
) {
if ($("#recordBtn").hasClass("bg_red")) {
if ($("#recordBtn .record").hasClass("disable")) {
screenLock();
recordStop(function () {
$("#screenLock").remove();
......@@ -246,12 +246,12 @@ document.addEventListener("DOMContentLoaded", function () {
}
} else if (data.type === "API_SEND_OWNER_CHANGE_COMPLETE") {
penOff();
if ($("#recordBtn").hasClass("bg_red")) {
if ($("#recordBtn .record").hasClass("disable")) {
recordStop(function () {
console.log("ホスト変更によりレコードを終了しました");
});
}
if ($("#micBtn").hasClass("bg_red")) {
if ($("#micBtn .voice").hasClass("disable")) {
micOff();
} else {
micOn();
......@@ -599,6 +599,12 @@ function Coview_moveToVideoShareArea() {
$("#collabo_main").removeClass("none");
}
function Coview_moveToAudioShareArea() {
$(".coview_share_area").addClass("none");
$("#collabo_main").removeClass("none");
$(".talking_area").removeClass("none");
}
function changeCollaboration(changeCollaborationType) {
recordStop(function () {
var newMeetingId = 0;
......@@ -649,7 +655,7 @@ function changeCollaboration(changeCollaborationType) {
coview_api.ChangeCollaboration("audio");
break;
}
if ($("#micBtn").hasClass("bg_red")) {
if ($("#micBtn .voice").hasClass("disable")) {
micOff();
} else {
micOn();
......@@ -717,17 +723,6 @@ async function initCollaborationUI(changeCollaborationType) {
case COLLABORATION_TYPE.AUDIO:
$(".collaboration_contents").addClass("none");
$(".voice_contents").removeClass("none");
var w = $(".user_btn").width();
$(".user_btn").toggleClass("hide");
$("#overlay_user_list.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
$("#overlay_user_list.overlay").removeClass("noscroll");
} else {
$("#overlay_user_list.overlay").addClass("noscroll");
}
break;
case COLLABORATION_TYPE.CAMERA:
......@@ -743,17 +738,6 @@ async function initCollaborationUI(changeCollaborationType) {
case COLLABORATION_TYPE.DOCUMENT:
$(".collaboration_contents").addClass("none");
$(".document_contents").removeClass("none");
var w = $(".user_btn").width();
$(".user_btn").toggleClass("hide");
$("#overlay_user_list.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
$("#overlay_user_list.overlay").removeClass("noscroll");
} else {
$("#overlay_user_list.overlay").addClass("noscroll");
}
break;
case COLLABORATION_TYPE.BOARD:
......@@ -780,7 +764,7 @@ function Coview_exitCollaboration(isDocument = false) {
android.exitMeetingRoom();
}
}
if ($("#recordBtn").hasClass("bg_red")) {
if ($("#recordBtn .record").hasClass("disable")) {
recordStop(Coview_finishCollaboration);
} else {
Coview_finishCollaboration();
......@@ -872,7 +856,7 @@ function Coview_connect_audio_collaboration() {
coview_api.deleteRoom(globalUserInfo.roomId);
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
Coview_moveToAudioShareArea();
$(".coview_share_title_name").text("音声通話");
}
......@@ -1057,20 +1041,26 @@ function captureAndShareImage(urls, changeHostName) {
});
}
function toolToggle(){
if($("#collabo_footer_menu").hasClass('hide')){
$("#collabo_footer_menu").removeClass('hide');
}else{
$("#collabo_footer_menu").addClass('hide');
}
}
function micOn() {
coview_api.MicMuteControl("off");
$("#micBtn").addClass("bg_blue");
$("#micBtn").removeClass("bg_red");
$("#micBtn .voice").removeClass("disable");
}
function micOff() {
coview_api.MicMuteControl("on");
$("#micBtn").removeClass("bg_blue");
$("#micBtn").addClass("bg_red");
$("#micBtn .voice").addClass("disable");
}
function micTogle() {
if ($("#micBtn").hasClass("bg_red")) {
if ($("#micBtn .voice").hasClass("disable")) {
micOn();
} else {
micOff();
......@@ -1080,19 +1070,19 @@ function micTogle() {
function recordStart() {
console.log("レコードを開始しました");
MainManRecord("on");
$("#recordBtn").removeClass("bg_gray");
$("#recordBtn").addClass("bg_red");
$("#recordBtn .record").addClass("disable");
$('.flash-txt').addClass('on');
}
function recordFinished() {
$("#recordBtn").addClass("bg_gray");
$("#recordBtn").removeClass("bg_red");
$("#recordBtn .record").removeClass("disable");
$('.flash-txt').removeClass('on');
// ロック画面の削除
delete_dom_obj("screenLock");
}
function recordTogle() {
if ($("#recordBtn").hasClass("bg_gray")) {
if (!$("#recordBtn .record").hasClass("disable")) {
recordStart();
} else {
recordStop(function () {
......@@ -1102,7 +1092,7 @@ function recordTogle() {
}
function recordStop(callback) {
if ($("#recordBtn").hasClass("bg_gray")) {
if (!$("#recordBtn .record").hasClass("disable")) {
callback();
return;
}
......@@ -1205,3 +1195,34 @@ function requestCollaborationFinish() {
async function waitMillisecond(millesecond) {
await new Promise(done => setTimeout(() => done(), millesecond));
}
function penToggle() {
$("#coviewPenCtrBtn").click();
if ($("#penBtn .pen").hasClass("disable")) {
$("#penBtn .pen").removeClass("disable");
} else {
$("#penBtn .pen").addClass("disable");
}
}
function photo_open_place_holderToggle() {
$("#open_file_upload").trigger("click");
}
function eraserToggle() {
$("#coviewEraserCtrBtn").click();
}
function captureToggle() {
if ($("#recordBtn").hasClass("bg_red")) {
screenLock();
recordStop(function () {
$("#screenLock").remove();
coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
});
} else {
coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
}
}
function captureRequestToggle() {
fw.sendToMsg("others", "CAPTURE_REQUEST", {
name: CHAT.globalLoginParameter.loginId,
});
}
\ No newline at end of file
public_new/loading.html
<div id="loader-bg" class="loading-indicator">
<div id="loader" class="loading-indicator">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<div class="sp sp-circle"></div>
</div>
</div>
\ No newline at end of file
public_new/modal_add_user_confirm.html
<div class="modal fade add_user_confirm_modal" id="modalAddUserConfirm" tabindex="-1" role="dialog"
aria-labelledby="modalAddUserConfirm" aria-hidden="true" style="position: fixed;">
<div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document">
<div class="modal-content" style="position: fixed;height: 600px;width: 86%;">
<div class="modal-content" style="position: fixed;top: 0;height: 100%;width: 100%;left:0;right: 0;margin: 0 auto;">
<div class="modal-header border-0 pb-0">
<span>ユーザー招待</span>
</div>
......
public_new/modal_add_user_list.html
<!-- コンテンツ -->
<div class="modal fade add_user_modal" id="addUserInCollaboration" tabindex="-1" role="dialog" aria-labelledby="addUserInCollaboration" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document">
<div class="modal-content" style="position: fixed;width: 75.5%;top: 0px;">
<div class="modal-content" style="position: fixed;width: 100%;height:100%;top: 0px;left:0;">
<form id="addUserFormInCollaboration" action="chat_add_user_confirm.html" method="post">
<!-- ユーザー検索 -->
<!-- タブ -->
......@@ -21,10 +21,10 @@
</nav><!-- nav -->
<div class="content tabs">
<input id="tabMyGroupOnAddUserInCollaboration" type="radio" name="tab_item" checked onclick="CHAT_UI.refreshMyGroupForAddUserInCollaboration();">
<label class="tab_item" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label>
<label class="tab_item m-0" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label>
<input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration('0');">
<label class="tab_item" for="tabAllGroupOnAddUserInCollaboration">全グループ</label>
<div class="tab_content" id="tab1_content" style="height: 340px; overflow:scroll;">
<label class="tab_item m-0" for="tabAllGroupOnAddUserInCollaboration">全グループ</label>
<div class="tab_content" id="tab1_content" style="height: 100vh; overflow:scroll;">
<div class="chat_list">
<!-- お気に入りグループ -->
<div class="category" onclick="CHAT_UI.toggleCategory(this);"><div class="category_name"><span>お気に入り</span></div></div>
......@@ -32,7 +32,7 @@
<div id="myGroupListForAddUserInCollaboration"></div>
</div>
</div>
<div class="tab_content" id="tab2_content" style="height: 340px; overflow:scroll;">
<div class="tab_content" id="tab2_content" style="height: 100vh; overflow:scroll;">
<div class="breadcrumb" id="groupPathAreaForAddUserInCollaboration"></div>
<div class="chat_list">
<!-- 全グループ -->
......@@ -41,7 +41,7 @@
<a href="#" class="w-100" id="rootGroupBtnForAddUserInCollaboration">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div>
</div>
......@@ -59,7 +59,7 @@
<a href="#" class="w-100" id="parentGroupBtnForAddUserInCollaboration">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div>
</div>
......@@ -81,7 +81,7 @@
</div>
<!-- ルーム解説ボタン -->
<div class="add_user_confirm_btn content" id="addUserConfirmBtnInCollaboration" style="position: fixed;">
<button type="button" name="button" id="buttonAddUser" style="top: 455px; width: 75.3%;">
<button type="button" name="button" id="buttonAddUser" style="bottom: 0; width: 100%;">
確認<br>
<span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
</div>
......
public_new/modal_chat_menu.html
......@@ -8,7 +8,7 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body pt-0">
<ul>
<li><a id="room_name_change_button" href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a>
</li>
......
public_new/modal_chat_profile.html
......@@ -5,7 +5,7 @@
<div class="modal-header border-0">
<div class="profile_desc d-flex flex-row">
<img src="img/noImage.png" alt="プロフィール画像">
<div class="profile_name"><span>名前　名前</span></div>
<div class="prifile_name"><span>名前　名前</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
......
public_new/modal_collabo_profile.html
......@@ -8,7 +8,7 @@
</button>
<div class="profile_desc_ d-flex flex-row">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
<div class="profile_name"><span>{{name}}</span></div>
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div>
</div>
<div class="modal-body">
......
public_new/template/template_add_user_group_list.html
......@@ -2,7 +2,7 @@
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForAddUser({{id}});">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" />
</div>
</div>
......
public_new/template/template_add_user_group_list_in_collaboration.html
......@@ -2,7 +2,7 @@
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration({{id}});">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" />
</div>
</div>
......
public_new/template/template_group_list.html
......@@ -2,7 +2,7 @@
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupSearch({{id}});">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" />
</div>
</div>
......
public_new/template/template_make_room_group_list.html
......@@ -2,7 +2,7 @@
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" />
</div>
</div>
......
public_new/template/template_my_name_card.html
......@@ -4,7 +4,7 @@
<div class="modal-header border-0">
<div class="profile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'">
<div class="profile_name"><span>{{name}}</span></div>
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
......
public_new/template/template_room_list.html
<li class="d-flex align-items-center">
<a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail{{thumbnailCount}} thumbnail">
{{#attendUsers}}
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
{{/attendUsers}}
{{^attendUsers}}
<div class="img_wrap"><img src='./img/noImage.png'/></div>
{{/attendUsers}}
<ul class="m-0">
<li class="d-flex align-items-center">
<a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail{{thumbnailCount}} thumbnail">
{{#attendUsers}}
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
{{/attendUsers}}
{{^attendUsers}}
<div class="img_wrap"><img src='./img/noImage.png'/></div>
{{/attendUsers}}
</div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">{{roomName}}</span>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">{{roomName}}</span>
</div>
<span class="chat_item_num">({{userCnt}})</span>
</div>
<div class="chat_item_desc">
{{lastMessage}}
</div>
<span class="chat_item_num">({{userCnt}})</span>
</div>
<div class="chat_item_desc">
{{lastMessage}}
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">{{time}}</span>
{{#unreadMsgCnt}}
<span class="chat_item_unread room-{{roomId}}-unread">{{unreadMsgCnt}}</span>
{{/unreadMsgCnt}}
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">{{time}}</span>
{{#unreadMsgCnt}}
<span class="chat_item_unread room-{{roomId}}-unread">{{unreadMsgCnt}}</span>
{{/unreadMsgCnt}}
</div>
</div>
</div>
</div>
</a>
</li>
\ No newline at end of file
</a>
</li>
</ul>
\ No newline at end of file
public_new/template/template_user_name_card.html
......@@ -7,7 +7,7 @@
</button>
<div class="profile_desc_ d-flex flex-row">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
<div class="profile_name"><span>{{name}}</span></div>
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div>
</div>
<div class="modal-body" id="userNameCard-scroll">
......
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