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 { ...@@ -779,8 +779,8 @@ a.article:hover {
} }
.coview_share_title { .coview_share_title {
background-color: #095395!important; background: #1D1D1D!important;
border-color: #095395!important; border-color: #1D1D1D!important;
width: 100%; width: 100%;
height: 58px; height: 58px;
} }
...@@ -798,18 +798,28 @@ a.article:hover { ...@@ -798,18 +798,28 @@ a.article:hover {
margin: 0; margin: 0;
} }
.coview_share_title_right_area {
display: inline-block!important;
height: 58px;
line-height: 58px;
margin: 0;
float: right;
}
.coview_share_title_btn { .coview_share_title_btn {
display: inline-block; display: inline-block;
margin-left: 10px; }
margin-top: 4px;
color: #fff; .coview_share_title_btn img {
width: 45px;
height: 45px;
} }
.coview_share_title_name { .coview_share_title_name {
display: inline-block; display: inline-block;
height: 58px; height: 58px;
line-height: 58px; line-height: 58px;
padding: 0; padding-left: 23px;
margin: 0; margin: 0;
color: #fff; color: #fff;
} }
...@@ -918,6 +928,11 @@ a.article:hover { ...@@ -918,6 +928,11 @@ a.article:hover {
color: #707070; color: #707070;
} }
.coview_on_screen_btn_area {
bottom: 0px!important;
background: #1D1D1D!important;
}
.coview_on_screen_btn { .coview_on_screen_btn {
width: 60px !important; width: 60px !important;
height: 60px !important; height: 60px !important;
...@@ -930,3 +945,27 @@ a.article:hover { ...@@ -930,3 +945,27 @@ a.article:hover {
height: 60px !important; height: 60px !important;
padding: 0px !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 @@ ...@@ -29,15 +29,41 @@
<!-- coview share --> <!-- coview share -->
<div class="coview_share_area"> <div class="coview_share_area">
<div class="coview_share_title"> <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"> <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> </button>
</div> </div>
<div class="navbar-brand col-6 mr-0 coview_share_title_name text-center" href="#">LIVE</div>
</div> </div>
<div class="coview_share_body" id="coviewShare"> <div class="coview_share_body" id="coviewShare">
</div> </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> </div>
<nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow"> <nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
...@@ -179,31 +205,31 @@ ...@@ -179,31 +205,31 @@
<ul> <ul>
<li> <li>
<a class="collaboration_tab_btn" id="coviewShareChat"> <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> <p id="collaboration_call">Call</p>
</a> </a>
</li> </li>
<li> <li>
<a class="collaboration_tab_btn" id="coviewShareDoc"> <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> <p id="collaboration_document">Document</p>
</a> </a>
</li> </li>
<li> <li>
<a class="collaboration_tab_btn" id="coviewSharePhoto"> <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> <p id="collaboration_photo">Photo</p>
</a> </a>
</li> </li>
<li> <li>
<a class="collaboration_tab_btn" id="coviewShareLive"> <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> <p id="collaboration_live">Live</p>
</a> </a>
</li> </li>
<li> <li>
<a class="collaboration_tab_btn" id="coviewShareBoad"> <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> <p id="collaboration_boad">Boad</p>
</a> </a>
</li> </li>
......
public/js/language_en.js
...@@ -63,5 +63,6 @@ $.lang.en = { ...@@ -63,5 +63,6 @@ $.lang.en = {
"collaboration_document":"Document", "collaboration_document":"Document",
"collaboration_photo":"Photo", "collaboration_photo":"Photo",
"collaboration_live":"Live", "collaboration_live":"Live",
"collaboration_boad":"Boad" "collaboration_boad":"Boad",
"talking":"Talking"
} }
public/js/language_ja.js
...@@ -63,5 +63,6 @@ $.lang.ja = { ...@@ -63,5 +63,6 @@ $.lang.ja = {
"collaboration_document":"文書", "collaboration_document":"文書",
"collaboration_photo":"画像", "collaboration_photo":"画像",
"collaboration_live":"動画", "collaboration_live":"動画",
"collaboration_boad":"ボード" "collaboration_boad":"ボード",
"talking":"通話中"
} }
public/js/language_ko.js
...@@ -63,5 +63,6 @@ $.lang.ko = { ...@@ -63,5 +63,6 @@ $.lang.ko = {
"collaboration_document":"문서", "collaboration_document":"문서",
"collaboration_photo":"이미지", "collaboration_photo":"이미지",
"collaboration_live":"동영상", "collaboration_live":"동영상",
"collaboration_boad":"보드" "collaboration_boad":"보드",
"talking":"통화 중"
} }
public/js/share.js
...@@ -32,11 +32,83 @@ $(function() { ...@@ -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) { $("#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_api.LeaveRoom();
$(".coview_share_area").hide(); $(".coview_share_area").hide();
}); });
$("body").on("click", function() { $("body").on("click", function() {
Coview_shareDropdownHide(); Coview_shareDropdownHide();
}); });
...@@ -71,7 +143,6 @@ $(function() { ...@@ -71,7 +143,6 @@ $(function() {
globalUserInfo.coWorkType = "audio"; globalUserInfo.coWorkType = "audio";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea(); Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("通話中");
}); });
// 文書 // 文書
...@@ -99,7 +170,6 @@ $(function() { ...@@ -99,7 +170,6 @@ $(function() {
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea(); Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("カメラ");
}); });
// 画像(ライブラリ) // 画像(ライブラリ)
...@@ -108,8 +178,6 @@ $(function() { ...@@ -108,8 +178,6 @@ $(function() {
globalUserInfo.coWorkType = "galary"; globalUserInfo.coWorkType = "galary";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea(); Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("ライブラリ");
}); });
// 動画 // 動画
...@@ -129,8 +197,6 @@ $(function() { ...@@ -129,8 +197,6 @@ $(function() {
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea(); Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("LIVE");
}); });
// ボード // ボード
...@@ -140,7 +206,6 @@ $(function() { ...@@ -140,7 +206,6 @@ $(function() {
globalUserInfo.coWorkType = "audio"; globalUserInfo.coWorkType = "audio";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea(); Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("通話中");
}); });
...@@ -205,10 +270,10 @@ function Coview_shareDropdownHide() { ...@@ -205,10 +270,10 @@ function Coview_shareDropdownHide() {
function Coview_moveToVideoShareArea() { function Coview_moveToVideoShareArea() {
$("#loadingIndicator").addClass("full_active"); $("#loadingIndicator").addClass("full_active");
$(".coview_share_area").show(); $(".coview_share_area").show();
$(".coview_share_title_name").text(getLocalizedString("talking"));
// マイクを設定 // ナビゲーションバーの表示
document.getElementById('coviewMicCtrBtn').innerHTML = '\ $("#coviewChangeTypeButton").show();
<img class="coview_on_screen_btn_image_default" src="" alt="">\ $("#coviewAddMemberButton").show();
<img class="coview_on_screen_btn_image_sub" src="" alt="">\ $("#coviewMemberButton").show();
<div>Mic</div>'; $("#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