Skip to content

C
chat_webview
Commit 9fd1a7f2 by Takatoshi Miura
Options

協業共通UI作成

parent c5dc44dc
Showing with 163 additions and 30 deletions
public/css/chat.css
......@@ -779,8 +779,8 @@ a.article:hover {
}
.coview_share_title {
background-color: #095395!important;
border-color: #095395!important;
background: #1D1D1D!important;
border-color: #1D1D1D!important;
width: 100%;
height: 58px;
}
......@@ -798,18 +798,28 @@ a.article:hover {
margin: 0;
}
.coview_share_title_right_area {
display: inline-block!important;
height: 58px;
line-height: 58px;
margin: 0;
float: right;
}
.coview_share_title_btn {
display: inline-block;
margin-left: 10px;
margin-top: 4px;
color: #fff;
}
.coview_share_title_btn img {
width: 45px;
height: 45px;
}
.coview_share_title_name {
display: inline-block;
height: 58px;
line-height: 58px;
padding: 0;
padding-left: 23px;
margin: 0;
color: #fff;
}
......@@ -918,6 +928,11 @@ a.article:hover {
color: #707070;
}
.coview_on_screen_btn_area {
bottom: 0px!important;
background: #1D1D1D!important;
}
.coview_on_screen_btn {
width: 60px !important;
height: 60px !important;
......@@ -930,3 +945,27 @@ a.article:hover {
height: 60px !important;
padding: 0px !important;
}
.coview_bottom_btn {
border: none;
width: 60px;
height: 60px;
margin: 30px 34px 30px 34px;
border-radius: 50px;
background: white;
}
.coview_bottom_btn_red {
border: none;
width: 60px;
height: 60px;
margin: 30px 34px 30px 34px;
border-radius: 50px;
background: red;
}
.coview_bottom_btn img, .coview_bottom_btn_red img {
width: 60px;
height: 60px;
padding: 0px;
}
public/index.html
......@@ -29,15 +29,41 @@
<!-- coview share -->
<div class="coview_share_area">
<div class="coview_share_title">
<div class="coview_share_title_left_area col-3">
<div class="coview_share_title_left_area col-3 coview_share_title_name" href="#">LIVE</div>
<div class="coview_share_title_right_area">
<button class="btn coview_share_title_btn" type="button" id="coviewChangeTypeButton">
<img class="" src="./icon/ic_collaboration_type.png" alt="">
</button>
</div>
<div class="coview_share_title_right_area">
<button class="btn coview_share_title_btn" type="button" id="coviewAddMemberButton">
<img class="" src="./icon/ic_collaboration_add_member.png" alt="">
</button>
</div>
<div class="coview_share_title_right_area">
<button class="btn coview_share_title_btn" type="button" id="coviewMemberButton">
<img class="" src="./icon/ic_collaboration_member.png" alt="">
</button>
</div>
<div class="coview_share_title_right_area">
<button class="btn coview_share_title_btn" type="button" id="coviewShareCloseButton">
<i class="fa fa-times"></i>
<img class="" src="./icon/ic_collaboration_close.png" alt="">
</button>
</div>
<div class="navbar-brand col-6 mr-0 coview_share_title_name text-center" href="#">LIVE</div>
</div>
<div class="coview_share_body" id="coviewShare">
</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="">
</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>
</div>
</div>
<nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
......@@ -179,31 +205,31 @@
<ul>
<li>
<a class="collaboration_tab_btn" id="coviewShareChat">
<img src="./images/ic_collaboration_call.png" alt="">
<img src="./icon/ic_collaboration_call.png" alt="">
<p id="collaboration_call">Call</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewShareDoc">
<img src="./images/ic_collaboration_document.png" alt="">
<img src="./icon/ic_collaboration_document.png" alt="">
<p id="collaboration_document">Document</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewSharePhoto">
<img src="./images/ic_collaboration_photo.png" alt="">
<img src="./icon/ic_collaboration_photo.png" alt="">
<p id="collaboration_photo">Photo</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewShareLive">
<img src="./images/ic_collaboration_live.png" alt="">
<img src="./icon/ic_collaboration_live.png" alt="">
<p id="collaboration_live">Live</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewShareBoad">
<img src="./images/ic_collaboration_boad.png" alt="">
<img src="./icon/ic_collaboration_boad.png" alt="">
<p id="collaboration_boad">Boad</p>
</a>
</li>
......
public/js/language_en.js
......@@ -63,5 +63,6 @@ $.lang.en = {
"collaboration_document":"Document",
"collaboration_photo":"Photo",
"collaboration_live":"Live",
"collaboration_boad":"Boad"
"collaboration_boad":"Boad",
"talking":"Talking"
}
public/js/language_ja.js
......@@ -63,5 +63,6 @@ $.lang.ja = {
"collaboration_document":"文書",
"collaboration_photo":"画像",
"collaboration_live":"動画",
"collaboration_boad":"ボード"
"collaboration_boad":"ボード",
"talking":"通話中"
}
public/js/language_ko.js
......@@ -63,5 +63,6 @@ $.lang.ko = {
"collaboration_document":"문서",
"collaboration_photo":"이미지",
"collaboration_live":"동영상",
"collaboration_boad":"보드"
"collaboration_boad":"보드",
"talking":"통화 중"
}
public/js/share.js
......@@ -32,11 +32,83 @@ $(function() {
}
});
// ナビゲーションバー
// 協業タイプ変更ボタン
$("#coviewChangeTypeButton").on("click", function(e) {
$("#coviewChangeTypeButton").hide();
$("#coviewAddMemberButton").hide();
$("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show();
// TODO
});
// メンバー招待ボタン
$("#coviewAddMemberButton").on("click", function(e) {
$("#coviewChangeTypeButton").hide();
$("#coviewAddMemberButton").hide();
$("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show();
// TODO
});
// メンバー表示ボタン
$("#coviewMemberButton").on("click", function(e) {
$("#coviewChangeTypeButton").hide();
$("#coviewAddMemberButton").hide();
$("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show();
coview_api.GetMemberList();
});
// 閉じるボタン
$("#coviewShareCloseButton").on("click", function(e) {
$("#coviewChangeTypeButton").show();
$("#coviewAddMemberButton").show();
$("#coviewMemberButton").show();
$("#coviewShareCloseButton").hide();
// TODO
});
// マイクボタン
$("#coviewMicBtn").on("click", function(e) {
var flg = $(this).hasClass("active");
if (flg == true) {
$(this).removeClass("active");
document.getElementById('coviewMicBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_mic_off.png" alt=""> ';
// マイクOFF
coview_api.micMuteControl("off");
} else {
$(this).addClass("active");
document.getElementById('coviewMicBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_mic_on.png" alt=""> ';
// マイクON
coview_api.micMuteControl("on");
}
});
// レコードボタン
$("#coviewRecBtn").on("click", function(e) {
var flg = $(this).hasClass("active");
if (flg == true) {
$(this).removeClass("active");
document.getElementById('coviewRecBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_record.png" alt="">';
// 記録終了
} else {
$(this).addClass("active");
document.getElementById('coviewRecBtn').innerHTML = '<img class="" src="https://app.coview.co.kr:7443/office_img/api/icon_api_record_stop.png" alt="">';
// 記録開始
}
});
// 退室ボタン
$("#coviewLeaveRoomBtn").on("click", function(e) {
coview_api.LeaveRoom();
$(".coview_share_area").hide();
});
$("body").on("click", function() {
Coview_shareDropdownHide();
});
......@@ -71,7 +143,6 @@ $(function() {
globalUserInfo.coWorkType = "audio";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("通話中");
});
// 文書
......@@ -99,7 +170,6 @@ $(function() {
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("カメラ");
});
// 画像(ライブラリ)
......@@ -108,8 +178,6 @@ $(function() {
globalUserInfo.coWorkType = "galary";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("ライブラリ");
});
// 動画
......@@ -129,8 +197,6 @@ $(function() {
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("LIVE");
});
// ボード
......@@ -140,7 +206,6 @@ $(function() {
globalUserInfo.coWorkType = "audio";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("通話中");
});
......@@ -205,10 +270,10 @@ function Coview_shareDropdownHide() {
function Coview_moveToVideoShareArea() {
$("#loadingIndicator").addClass("full_active");
$(".coview_share_area").show();
// マイクを設定
document.getElementById('coviewMicCtrBtn').innerHTML = '\
<img class="coview_on_screen_btn_image_default" src="" alt="">\
<img class="coview_on_screen_btn_image_sub" src="" alt="">\
<div>Mic</div>';
$(".coview_share_title_name").text(getLocalizedString("talking"));
// ナビゲーションバーの表示
$("#coviewChangeTypeButton").show();
$("#coviewAddMemberButton").show();
$("#coviewMemberButton").show();
$("#coviewShareCloseButton").hide();
}
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