Skip to content

C
chat_webview
Commit 2ea8c239 by 藤川諒
Options

音声共有、文書共有レイアウト修正

parent 6ec7a3a7
Showing with 73 additions and 29 deletions
public_new/collaboration.html
...@@ -39,15 +39,13 @@ ...@@ -39,15 +39,13 @@
<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"></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>
<div class="menu-icon menu_btn host_contents" onclick="this.classList.toggle('hover');"> <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-bar1"></div>
<div class="menu-bar menu-bar2"></div> <div class="menu-bar menu-bar2"></div>
<div class="menu-bar menu-bar3"></div> <div class="menu-bar menu-bar3"></div>
</div> </div>
<button type="button" name="button" class="btn start_pip_btn collaboration_contents document_contents"
onclick="startPipMode();"></button>
<!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> --> <!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
</div> </div>
</div> </div>
...@@ -59,6 +57,24 @@ ...@@ -59,6 +57,24 @@
<!-- コンテンツ --> <!-- コンテンツ -->
<main id="collabo_main" class="none"> <main id="collabo_main" class="none">
<div class="document_wrap"> <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 class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
</div> </div>
</div> </div>
...@@ -97,7 +113,9 @@ ...@@ -97,7 +113,9 @@
<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;">
<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> </div>
<div class="before_loading_indicator"> <div class="before_loading_indicator">
......
public_new/css/collaboration.css
...@@ -138,6 +138,48 @@ ...@@ -138,6 +138,48 @@
height: 100%; 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 *************************/ /**************************** overlay *************************/
.btn { .btn {
background-color: transparent; background-color: transparent;
...@@ -771,7 +813,7 @@ input[name="tab_item"] { ...@@ -771,7 +813,7 @@ input[name="tab_item"] {
top: 0px; top: 0px;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-color: steelblue; background-color: #20304c;
color: azure; color: azure;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
......
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/js/share.js
...@@ -599,6 +599,12 @@ function Coview_moveToVideoShareArea() { ...@@ -599,6 +599,12 @@ function Coview_moveToVideoShareArea() {
$("#collabo_main").removeClass("none"); $("#collabo_main").removeClass("none");
} }
function Coview_moveToAudioShareArea() {
$(".coview_share_area").addClass("none");
$("#collabo_main").removeClass("none");
$(".talking_area").removeClass("none");
}
function changeCollaboration(changeCollaborationType) { function changeCollaboration(changeCollaborationType) {
recordStop(function () { recordStop(function () {
var newMeetingId = 0; var newMeetingId = 0;
...@@ -717,17 +723,6 @@ async function initCollaborationUI(changeCollaborationType) { ...@@ -717,17 +723,6 @@ async function initCollaborationUI(changeCollaborationType) {
case COLLABORATION_TYPE.AUDIO: case COLLABORATION_TYPE.AUDIO:
$(".collaboration_contents").addClass("none"); $(".collaboration_contents").addClass("none");
$(".voice_contents").removeClass("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; break;
case COLLABORATION_TYPE.CAMERA: case COLLABORATION_TYPE.CAMERA:
...@@ -743,17 +738,6 @@ async function initCollaborationUI(changeCollaborationType) { ...@@ -743,17 +738,6 @@ async function initCollaborationUI(changeCollaborationType) {
case COLLABORATION_TYPE.DOCUMENT: case COLLABORATION_TYPE.DOCUMENT:
$(".collaboration_contents").addClass("none"); $(".collaboration_contents").addClass("none");
$(".document_contents").removeClass("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; break;
case COLLABORATION_TYPE.BOARD: case COLLABORATION_TYPE.BOARD:
...@@ -872,7 +856,7 @@ function Coview_connect_audio_collaboration() { ...@@ -872,7 +856,7 @@ function Coview_connect_audio_collaboration() {
coview_api.deleteRoom(globalUserInfo.roomId); coview_api.deleteRoom(globalUserInfo.roomId);
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea(); Coview_moveToVideoShareArea();
Coview_moveToAudioShareArea();
$(".coview_share_title_name").text("音声通話"); $(".coview_share_title_name").text("音声通話");
} }
......
public_new/modal_chat_menu.html
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body pt-0">
<ul> <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><a id="room_name_change_button" href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a>
</li> </li>
......
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