Skip to content

C
chat_webview
Commit eb7e7729 by Takatoshi Miura
Options

ナビゲーションUI(協業切り替え)作成

parent 9fd1a7f2
Showing with 179 additions and 5 deletions
public/css/chat.css
...@@ -969,3 +969,46 @@ a.article:hover { ...@@ -969,3 +969,46 @@ a.article:hover {
height: 60px; height: 60px;
padding: 0px; padding: 0px;
} }
.coview_member_area, .coview_add_member_area, .coview_type_area {
position: absolute;
width: 100%;
height: calc(100vh - 58px);
bottom: 0px;
text-align: center;
z-index: 4;
background: #525252;
}
.coview_type_inbox {
padding: 29vh 0px;
}
.coview_type_cell {
display: inline-block;
width: 84px;
height: 112px;
margin: 10px;
}
.coview_type_area img {
width: 68px;
height: 68px;
}
.coview_type_area p {
margin: 8px 0px;
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 16px;
color: white;
}
.coview_type_btn {
width: 68px;
height: 68px;
-webkit-appearance: none;
border: none;
}
public/index.html
...@@ -53,6 +53,14 @@ ...@@ -53,6 +53,14 @@
</div> </div>
<div class="coview_share_body" id="coviewShare"> <div class="coview_share_body" id="coviewShare">
</div> </div>
<div class="coview_type_area" id="coviewTypeArea">
</div>
<div class="coview_add_member_area">
メンバー招待
</div>
<div class="coview_member_area">
メンバー表示
</div>
<div class="coview_on_screen_btn_area"> <div class="coview_on_screen_btn_area">
<button class="coview_bottom_btn" id="coviewMicBtn"> <button class="coview_bottom_btn" id="coviewMicBtn">
<img class="" src="./icon/ic_collaboration_mic_off.png" alt=""> <img class="" src="./icon/ic_collaboration_mic_off.png" alt="">
...@@ -585,6 +593,38 @@ ...@@ -585,6 +593,38 @@
</div> </div>
</div> </div>
</script> </script>
<script id="coview-type-template" type="text/template">
<div class="coview_type_inbox">
<div>
<div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId1}}">
<img class="" src="{{imgUrl1}}" alt="">
</button>
<p>{{type1}}</p>
</div>
<div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId2}}">
<img class="" src="{{imgUrl2}}" alt="">
</button>
<p>{{type2}}</p>
</div>
</div>
<div>
<div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId3}}">
<img class="" src="{{imgUrl3}}" alt="">
</button>
<p>{{type3}}</p>
</div>
<div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId4}}">
<img class="" src="{{imgUrl4}}" alt="">
</button>
<p>{{type4}}</p>
</div>
</div>
</div>
</script>
<script src="./socket.io/dist/socket.io.js"></script> <script src="./socket.io/dist/socket.io.js"></script>
<script src="./js/libs/socket.io.js"></script> <script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
......
public/js/language_en.js
...@@ -64,5 +64,10 @@ $.lang.en = { ...@@ -64,5 +64,10 @@ $.lang.en = {
"collaboration_photo":"Photo", "collaboration_photo":"Photo",
"collaboration_live":"Live", "collaboration_live":"Live",
"collaboration_boad":"Boad", "collaboration_boad":"Boad",
"talking":"Talking" "talking":"Talking",
"sharePhoto":"Photo",
"shareLive":"Live",
"shareDocument":"Document",
"shareBoad":"Boad",
"shareVoice":"Voice"
} }
public/js/language_ja.js
...@@ -64,5 +64,10 @@ $.lang.ja = { ...@@ -64,5 +64,10 @@ $.lang.ja = {
"collaboration_photo":"画像", "collaboration_photo":"画像",
"collaboration_live":"動画", "collaboration_live":"動画",
"collaboration_boad":"ボード", "collaboration_boad":"ボード",
"talking":"通話中" "talking":"通話中",
"sharePhoto":"写真共有",
"shareLive":"現場中継",
"shareDocument":"文書共有",
"shareBoad":"落書き",
"shareVoice":"音声共有"
} }
public/js/language_ko.js
...@@ -64,5 +64,10 @@ $.lang.ko = { ...@@ -64,5 +64,10 @@ $.lang.ko = {
"collaboration_photo":"이미지", "collaboration_photo":"이미지",
"collaboration_live":"동영상", "collaboration_live":"동영상",
"collaboration_boad":"보드", "collaboration_boad":"보드",
"talking":"통화 중" "talking":"통화 중",
"sharePhoto":"이미지",
"shareLive":"동영상",
"shareDocument":"문서",
"shareBoad":"보드",
"shareVoice":"통화"
} }
public/js/share.js
...@@ -35,38 +35,79 @@ $(function() { ...@@ -35,38 +35,79 @@ $(function() {
// ナビゲーションバー // ナビゲーションバー
// 協業タイプ変更ボタン // 協業タイプ変更ボタン
$("#coviewChangeTypeButton").on("click", function(e) { $("#coviewChangeTypeButton").on("click", function(e) {
// ナビゲーションボタン
$("#coviewChangeTypeButton").hide(); $("#coviewChangeTypeButton").hide();
$("#coviewAddMemberButton").hide(); $("#coviewAddMemberButton").hide();
$("#coviewMemberButton").hide(); $("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show(); $("#coviewShareCloseButton").show();
// 協業タイプ選択画面表示
$(".coview_type_area").show();
});
// 写真共有
$("#photoBtn").on("click", function(e) {
console.log("写真共有");
// TODO
});
// 現場中継
$("#liveBtn").on("click", function(e) {
console.log("現場中継");
// TODO
});
// 文書共有
$("#documentBtn").on("click", function(e) {
console.log("文書共有");
// TODO
});
// 落書き
$("#boadBtn").on("click", function(e) {
console.log("落書き");
// TODO
});
// 音声共有
$("#voiceBtn").on("click", function(e) {
console.log("音声共有");
// TODO // TODO
}); });
// メンバー招待ボタン // メンバー招待ボタン
$("#coviewAddMemberButton").on("click", function(e) { $("#coviewAddMemberButton").on("click", function(e) {
// ナビゲーションボタン
$("#coviewChangeTypeButton").hide(); $("#coviewChangeTypeButton").hide();
$("#coviewAddMemberButton").hide(); $("#coviewAddMemberButton").hide();
$("#coviewMemberButton").hide(); $("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show(); $("#coviewShareCloseButton").show();
// TODO // メンバー招待画面表示
$(".coview_add_member_area").show();
}); });
// メンバー表示ボタン // メンバー表示ボタン
$("#coviewMemberButton").on("click", function(e) { $("#coviewMemberButton").on("click", function(e) {
// ナビゲーションボタン
$("#coviewChangeTypeButton").hide(); $("#coviewChangeTypeButton").hide();
$("#coviewAddMemberButton").hide(); $("#coviewAddMemberButton").hide();
$("#coviewMemberButton").hide(); $("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show(); $("#coviewShareCloseButton").show();
// メンバー表示
coview_api.GetMemberList(); coview_api.GetMemberList();
$(".coview_member_area").show();
}); });
// 閉じるボタン // 閉じるボタン
$("#coviewShareCloseButton").on("click", function(e) { $("#coviewShareCloseButton").on("click", function(e) {
// ナビゲーションボタン
$("#coviewChangeTypeButton").show(); $("#coviewChangeTypeButton").show();
$("#coviewAddMemberButton").show(); $("#coviewAddMemberButton").show();
$("#coviewMemberButton").show(); $("#coviewMemberButton").show();
$("#coviewShareCloseButton").hide(); $("#coviewShareCloseButton").hide();
// TODO // 画面表示
$(".coview_type_area").hide();
$(".coview_add_member_area").hide();
$(".coview_member_area").hide();
}); });
...@@ -270,10 +311,45 @@ function Coview_shareDropdownHide() { ...@@ -270,10 +311,45 @@ 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_type_area").hide();
$(".coview_add_member_area").hide();
$(".coview_member_area").hide();
$(".coview_share_title_name").text(getLocalizedString("talking")); $(".coview_share_title_name").text(getLocalizedString("talking"));
// ナビゲーションバーの表示 // ナビゲーションバーの表示
$("#coviewChangeTypeButton").show(); $("#coviewChangeTypeButton").show();
$("#coviewAddMemberButton").show(); $("#coviewAddMemberButton").show();
$("#coviewMemberButton").show(); $("#coviewMemberButton").show();
$("#coviewShareCloseButton").hide(); $("#coviewShareCloseButton").hide();
// 設定
Coview_setCoviewTypeBtn();
} }
// 協業タイプ選択画面の設定
function Coview_setCoviewTypeBtn() {
// 様式を読み込む
const typeTemplate = $('#coview-type-template').html();
switch (globalUserInfo.coWorkType) {
case "audio":
let html = Mustache.render(typeTemplate, {
btnId1: "photoBtn",
imgUrl1: "./icon/ic_collaboration_record.png",
type1: getLocalizedString("sharePhoto"),
btnId2: "liveBtn",
imgUrl2: "./icon/ic_collaboration_record.png",
type2: getLocalizedString("shareLive"),
btnId3: "documentBtn",
imgUrl3: "./icon/ic_collaboration_record.png",
type3: getLocalizedString("shareDocument"),
btnId4: "boadBtn",
imgUrl4: "./icon/ic_collaboration_record.png",
type4: getLocalizedString("shareBoad")
});
let obj = $(jQuery.parseHTML(html))
$('#coviewTypeArea').append(obj);
break;
// TODO　他のケース
default:
}
}
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