Skip to content

C
chat_webview
Commit ffc12428 by Takatoshi Miura
Options

協業機能実装(ペン、ポインター、クリア)

parent 29e05b23
Showing with 161 additions and 36 deletions
public/css/chat.css
......@@ -938,43 +938,88 @@ p#coview_time {
color: #707070;
}
.coview_on_screen_btn_area {
bottom: 0px!important;
background: #1D1D1D!important;
.tool_area_switcher {
position: absolute;
left: 0;
bottom: 198px;
width: 76px;
height: 43px;
z-index: 4;
}
.coview_on_screen_btn {
width: 60px !important;
height: 60px !important;
margin: 30px 34px 30px 34px !important;
border-radius: 50px !important;
.tool_hide_btn, .tool_show_btn {
width: 76px;
height: 43px;
-webkit-appearance: none;
border: none;
padding: 0;
}
.coview_on_screen_btn img {
width: 60px !important;
height: 60px !important;
padding: 0px !important;
.tool_hide_btn img, .tool_show_btn img {
width: 76px;
height: 43px;
}
.coview_bottom_btn {
border: none;
width: 60px;
height: 60px;
margin: 30px 34px 30px 34px;
border-radius: 50px;
background: white;
.coview_tool_area {
width: 100%;
height: 78px;
bottom: 120px;
position: absolute;
background: #1D1D1D;
z-index: 4;
}
.coview_bottom_btn_red {
.coview_tool_area_left {
padding: 15px 16px;
display: inline-block;
float: left;
}
.coview_tool_area_right {
padding: 15px 16px;
display: inline-block;
float: right;
}
.coview_tool_btn {
width: 48px;
height: 48px;
-webkit-appearance: none;
border: none;
padding: 0;
margin: 0px 8px;
}
.coview_tool_btn img {
width: 48px;
height: 48px;
}
.coview_bottom_area {
width: 100%;
height: 120px;
bottom: 0px;
text-align: center;
position: absolute;
background: #1D1D1D;
z-index: 4;
}
.bottom_area {
padding: 30px 0px;
}
.bottom_btn {
width: 60px;
height: 60px;
margin: 30px 34px 30px 34px;
-webkit-appearance: none;
border-radius: 50px;
background: red;
margin: 0px 17px;
padding: 0;
background: white;
}
.coview_bottom_btn img, .coview_bottom_btn_red img {
.bottom_btn img {
width: 60px;
height: 60px;
padding: 0px;
......@@ -1022,6 +1067,7 @@ p#coview_time {
height: 68px;
-webkit-appearance: none;
border: none;
padding: 0;
}
.member_profile_btn, .member_profile_btn_host {
......@@ -1061,4 +1107,3 @@ p#coview_time {
z-index: 101;
}
public/index.html
......@@ -61,19 +61,50 @@
<div class="coview_add_member_area">
メンバー招待
</div>
<div class="coview_member_area" id="coview_member_area">
<div class="coview_member_area" id="coviewMemberArea">
</div>
<div class="coview_on_screen_btn_area">
<button class="coview_bottom_btn" id="coviewMicBtn">
<img class="" src="./icon/ic_collaboration_mic_off.png" alt="">
<div class="tool_area_switcher" id="toolAreaSwitcher">
<button class="tool_hide_btn" id="toolHideBtn">
<img class="" src="./icon/ic_collaboration_tool_hide.png" alt="">
</button>
<button class="coview_bottom_btn" id="coviewRecBtn">
<img class="" src="./icon/ic_collaboration_record.png" alt="">
</button>
<button class="coview_bottom_btn" id="coviewLeaveRoomBtn">
<img class="" src="./icon/ic_collaboration_disconnect.png" alt="">
<button class="tool_show_btn" id="toolShowBtn">
<img class="" src="./icon/ic_collaboration_tool_show.png" alt="">
</button>
</div>
<div class="coview_tool_area">
<div class="coview_tool_area_left">
<button class="coview_tool_btn" id="penBtn">
<img class="" src="./icon/ic_collaboration_tool_pen.png" alt="">
</button>
<button class="coview_tool_btn" id="pointerBtn">
<img class="" src="./icon/ic_collaboration_tool_pointer.png" alt="">
</button>
<button class="coview_tool_btn" id="clearBtn">
<img class="" src="./icon/ic_collaboration_tool_clear.png" alt="">
</button>
</div>
<div class="coview_tool_area_right">
<button class="coview_tool_btn" id="pageBackBtn">
<img class="" src="./icon/ic_collaboration_tool_back.png" alt="">
</button>
<button class="coview_tool_btn" id="pageForwardBtn">
<img class="" src="./icon/ic_collaboration_tool_forward.png" alt="">
</button>
</div>
</div>
<div class="coview_bottom_area">
<div class="bottom_area">
<button class="bottom_btn" id="coviewMicBtn">
<img class="" src="./icon/ic_collaboration_mic_off.png" alt="">
</button>
<button class="bottom_btn" id="coviewRecBtn">
<img class="" src="./icon/ic_collaboration_record.png" alt="">
</button>
<button class="bottom_btn" style="background: red" id="coviewLeaveRoomBtn">
<img class="" src="./icon/ic_collaboration_disconnect.png" alt="">
</button>
</div>
</div>
</div>
<nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
......
public/js/share.js
......@@ -110,6 +110,55 @@ $(function() {
});
// コントロールメニュー
// 非表示ボタン
$("#toolHideBtn").on("click", function(e) {
$(".tool_hide_btn").hide();
$(".coview_tool_area").hide();
$(".coview_on_screen_btn_area").hide();
$(".coview_bottom_area").hide();
$("#coviewMemberArea").css({'height':'calc(100vh - 60px)'});
$("#coviewMemberArea").css({'bottom':'0px'});
$("#toolAreaSwitcher").css({'bottom':'0'});
$(".tool_show_btn").show();
});
// 表示ボタン
$("#toolShowBtn").on("click", function(e) {
$(".tool_hide_btn").show();
$(".coview_tool_area").show();
$(".coview_bottom_area").show();
$("#coviewMemberArea").css({'height':'calc(100vh - 178px)'});
$("#coviewMemberArea").css({'bottom':'120px'});
$("#toolAreaSwitcher").css({'bottom':'198px'});
$(".tool_show_btn").hide();
});
// ペン
$("#penBtn").on("click", function(e) {
FreeDrawOnOff("off");
});
// ポインター
$("#pointerBtn").on("click", function(e) {
ColorDrawOnOff("off");
});
// クリア
$("#clearBtn").on("click", function(e) {
cleardrawOnCanvas();
});
// ページ(戻る)
$("#pageBackBtn").on("click", function(e) {
// TODO
});
// ページ(進む)
$("#pageForwardBtn").on("click", function(e) {
// TODO
});
// マイクボタン
$("#coviewMicBtn").on("click", function(e) {
var flg = $(this).hasClass("active");
......@@ -117,12 +166,12 @@ $(function() {
$(this).removeClass("active");
document.getElementById('coviewMicBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_mic_off.png" alt=""> ';
// マイクOFF
coview_api.micMuteControl("off");
userMute();
} else {
$(this).addClass("active");
document.getElementById('coviewMicBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_mic_on.png" alt=""> ';
// マイクON
coview_api.micMuteControl("on");
userUnMute();
}
});
......@@ -377,7 +426,7 @@ function Coview_setCoviewMember() {
// TODO ネームカード表示
});
$('#coview_member_area').append(obj);
$('#coviewMemberArea').append(obj);
});
}
......
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