Skip to content

C
chat_webview
Commit d1d54cea by Takatoshi Miura
Options

メンバー招待(全グループ),キャプチャボタンUI作成

parent bef00afa
Showing with 107 additions and 40 deletions
public/css/chat.css
...@@ -802,13 +802,10 @@ a.article:hover { ...@@ -802,13 +802,10 @@ a.article:hover {
} }
p#coview_time { p#coview_time {
font-family: Noto Sans JP;
font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 16px; font-size: 16px;
line-height: 14px; line-height: 14px;
padding-left: 10px; padding-left: 10px;
color: #FFFFFF;
} }
.coview_share_title_right_area { .coview_share_title_right_area {
...@@ -933,9 +930,6 @@ p#coview_time { ...@@ -933,9 +930,6 @@ p#coview_time {
} }
.collaboration_tab_btn p { .collaboration_tab_btn p {
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
font-size: 12px; font-size: 12px;
align-items: center; align-items: center;
color: #707070; color: #707070;
...@@ -998,6 +992,33 @@ p#coview_time { ...@@ -998,6 +992,33 @@ p#coview_time {
height: 48px; height: 48px;
} }
.coview_tool_btn_long {
width: 134px;
height: 48px;
-webkit-appearance: none;
border: none;
padding: 0;
margin: 0px 8px;
position: relative;
}
.coview_tool_btn_long img {
width: 134px;
height: 48px;
}
.coview_tool_btn_long p {
position: absolute;
top: 6px;
right: 6px;
width: 80px;
height: 36px;
margin-bottom: 0;
font-size: 14px;
line-height: 36px;
background: #0070CA;
}
.coview_bottom_area { .coview_bottom_area {
width: 100%; width: 100%;
height: 120px; height: 120px;
...@@ -1033,7 +1054,6 @@ p#coview_time { ...@@ -1033,7 +1054,6 @@ p#coview_time {
width: 100%; width: 100%;
height: calc(100vh - 178px); height: calc(100vh - 178px);
bottom: 120px; bottom: 120px;
overflow-y: scroll;
text-align: center; text-align: center;
z-index: 4; z-index: 4;
background: #525252; background: #525252;
...@@ -1111,18 +1131,15 @@ input:checked + .tab_class + .content_class { ...@@ -1111,18 +1131,15 @@ input:checked + .tab_class + .content_class {
font-size: 12px; font-size: 12px;
} }
.coview_group_list, .coview_favorite_list { .coview_group_list, .coview_favorite_list, .coview_all_group_list {
margin-bottom: 0; margin-bottom: 0;
} }
.coview_group_list li, .coview_favorite_list li { .coview_group_list li, .coview_favorite_list li, .coview_all_group_list li {
border-bottom: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0;
} }
.chat_item_t { .chat_item_t {
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #323743; color: #323743;
...@@ -1162,6 +1179,22 @@ input:checked + .tab_class + .content_class { ...@@ -1162,6 +1179,22 @@ input:checked + .tab_class + .content_class {
border-radius: 50%; border-radius: 50%;
} }
.coview_group_tree {
width: 100%;
height: 40px;
color: black;
font-weight: 500;
font-size: 16px;
line-height: 40px;
margin-bottom: 0;
padding: 0px 8px;
}
.content_class hr {
border-bottom: 2px solid #E2E8F0;
margin: 0;
}
.coview_type_inbox { .coview_type_inbox {
padding: 29vh 0px; padding: 29vh 0px;
} }
...@@ -1180,12 +1213,8 @@ input:checked + .tab_class + .content_class { ...@@ -1180,12 +1213,8 @@ input:checked + .tab_class + .content_class {
.coview_type_area p { .coview_type_area p {
margin: 8px 0px; margin: 8px 0px;
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
font-size: 16px; font-size: 16px;
line-height: 16px; line-height: 16px;
color: white;
} }
.coview_type_btn { .coview_type_btn {
...@@ -1233,3 +1262,10 @@ input:checked + .tab_class + .content_class { ...@@ -1233,3 +1262,10 @@ input:checked + .tab_class + .content_class {
z-index: 101; z-index: 101;
} }
.coview_font {
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
color: white;
}
public/index.html
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<div class="coview_share_title"> <div class="coview_share_title">
<div class="coview_share_title_left_area col-3 coview_share_title_name" href="#">LIVE</div> <div class="coview_share_title_left_area col-3 coview_share_title_name" href="#">LIVE</div>
<div class="coview_share_title_left_area"> <div class="coview_share_title_left_area">
<p id="coview_time">00:00</p> <p class="coview_font" id="coview_time">00:00</p>
</div> </div>
<div class="coview_share_title_right_area"> <div class="coview_share_title_right_area">
<button class="btn coview_share_title_btn" type="button" id="coviewChangeTypeButton"> <button class="btn coview_share_title_btn" type="button" id="coviewChangeTypeButton">
...@@ -76,7 +76,10 @@ ...@@ -76,7 +76,10 @@
<input type="radio" name="tab_name" id="tab2" > <input type="radio" name="tab_name" id="tab2" >
<label class="tab_class" for="tab2" id="collaborationAllGroup">allGroup</label> <label class="tab_class" for="tab2" id="collaborationAllGroup">allGroup</label>
<div class="content_class"> <div class="content_class">
<p>タブ2のコンテンツを表示します</p> <label class="coview_group_tree coview_font">Root</label>
<hr></hr>
<ul class="p-0 coview_all_group_list" id="coviewAllGroupList">
</ul>
</div> </div>
</div> </div>
<div class="coview_member_area" id="coviewMemberArea"> <div class="coview_member_area" id="coviewMemberArea">
...@@ -108,6 +111,10 @@ ...@@ -108,6 +111,10 @@
<button class="coview_tool_btn" id="pageForwardBtn"> <button class="coview_tool_btn" id="pageForwardBtn">
<img class="" src="./icon/ic_collaboration_tool_forward.png" alt=""> <img class="" src="./icon/ic_collaboration_tool_forward.png" alt="">
</button> </button>
<button class="coview_tool_btn_long" id="captureBtn">
<img class="" src="./icon/ic_collaboration_tool_capture.png" alt="">
<p class="coview_font" id="coviewCapture">Capture</p>
</button>
</div> </div>
</div> </div>
<div class="coview_bottom_area"> <div class="coview_bottom_area">
...@@ -323,31 +330,31 @@ ...@@ -323,31 +330,31 @@
<li> <li>
<a class="collaboration_tab_btn" id="coviewShareChat"> <a class="collaboration_tab_btn" id="coviewShareChat">
<img src="./icon/ic_collaboration_call.png" alt=""> <img src="./icon/ic_collaboration_call.png" alt="">
<p id="collaboration_call">Call</p> <p class="coview_font" 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="./icon/ic_collaboration_document.png" alt=""> <img src="./icon/ic_collaboration_document.png" alt="">
<p id="collaboration_document">Document</p> <p class="coview_font" 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="./icon/ic_collaboration_photo.png" alt=""> <img src="./icon/ic_collaboration_photo.png" alt="">
<p id="collaboration_photo">Photo</p> <p class="coview_font" 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="./icon/ic_collaboration_live.png" alt=""> <img src="./icon/ic_collaboration_live.png" alt="">
<p id="collaboration_live">Live</p> <p class="coview_font" 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="./icon/ic_collaboration_boad.png" alt=""> <img src="./icon/ic_collaboration_boad.png" alt="">
<p id="collaboration_boad">Boad</p> <p class="coview_font" id="collaboration_boad">Boad</p>
</a> </a>
</li> </li>
</ul> </ul>
...@@ -649,13 +656,13 @@ ...@@ -649,13 +656,13 @@
<button class="coview_type_btn" id="{{btnId1}}"> <button class="coview_type_btn" id="{{btnId1}}">
<img class="" src="{{imgUrl1}}" alt=""> <img class="" src="{{imgUrl1}}" alt="">
</button> </button>
<p>{{type1}}</p> <p class="coview_font">{{type1}}</p>
</div> </div>
<div class="coview_type_cell"> <div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId2}}"> <button class="coview_type_btn" id="{{btnId2}}">
<img class="" src="{{imgUrl2}}" alt=""> <img class="" src="{{imgUrl2}}" alt="">
</button> </button>
<p>{{type2}}</p> <p class="coview_font">{{type2}}</p>
</div> </div>
</div> </div>
<div> <div>
...@@ -663,13 +670,13 @@ ...@@ -663,13 +670,13 @@
<button class="coview_type_btn" id="{{btnId3}}"> <button class="coview_type_btn" id="{{btnId3}}">
<img class="" src="{{imgUrl3}}" alt=""> <img class="" src="{{imgUrl3}}" alt="">
</button> </button>
<p>{{type3}}</p> <p class="coview_font">{{type3}}</p>
</div> </div>
<div class="coview_type_cell"> <div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId4}}"> <button class="coview_type_btn" id="{{btnId4}}">
<img class="" src="{{imgUrl4}}" alt=""> <img class="" src="{{imgUrl4}}" alt="">
</button> </button>
<p>{{type4}}</p> <p class="coview_font">{{type4}}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -690,7 +697,7 @@ ...@@ -690,7 +697,7 @@
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="chat_item_t"> <div class="chat_item_t coview_font">
<span>{{userName}}</span> <span>{{userName}}</span>
</div> </div>
</div> </div>
...@@ -715,7 +722,7 @@ ...@@ -715,7 +722,7 @@
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="chat_item_t"> <div class="chat_item_t coview_font">
<span>{{userName}}</span> <span>{{userName}}</span>
</div> </div>
</div> </div>
......
public/js/chat-ui.js
...@@ -881,6 +881,7 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) { ...@@ -881,6 +881,7 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#collaborationSeparatorMyGroup").text(getLocalizedString("collaborationSeparatorMyGroup")) $("#collaborationSeparatorMyGroup").text(getLocalizedString("collaborationSeparatorMyGroup"))
$("#collaborationAllGroup").text(getLocalizedString("collaborationAllGroup")) $("#collaborationAllGroup").text(getLocalizedString("collaborationAllGroup"))
$("#collaborationFavorite").text(getLocalizedString("collaborationFavorite")) $("#collaborationFavorite").text(getLocalizedString("collaborationFavorite"))
$("#coviewCapture").text(getLocalizedString("coviewCapture"))
} }
// 画像の読み込みが全て終わったタイミングでコールバック実行 // 画像の読み込みが全て終わったタイミングでコールバック実行
......
public/js/language_en.js
...@@ -73,5 +73,6 @@ $.lang.en = { ...@@ -73,5 +73,6 @@ $.lang.en = {
"collaborationFavorite":"Favorite", "collaborationFavorite":"Favorite",
"collaborationMyGroup":"My Group", "collaborationMyGroup":"My Group",
"collaborationSeparatorMyGroup":"My Group", "collaborationSeparatorMyGroup":"My Group",
"collaborationAllGroup":"All Group" "collaborationAllGroup":"All Group",
"coviewCapture":"Capture"
} }
public/js/language_ja.js
...@@ -73,5 +73,6 @@ $.lang.ja = { ...@@ -73,5 +73,6 @@ $.lang.ja = {
"collaborationFavorite":"お気に入り", "collaborationFavorite":"お気に入り",
"collaborationMyGroup":"マイグループ", "collaborationMyGroup":"マイグループ",
"collaborationSeparatorMyGroup":"マイグループ", "collaborationSeparatorMyGroup":"マイグループ",
"collaborationAllGroup":"全グループ" "collaborationAllGroup":"全グループ",
"coviewCapture":"キャプチャ"
} }
public/js/language_ko.js
...@@ -73,5 +73,6 @@ $.lang.ko = { ...@@ -73,5 +73,6 @@ $.lang.ko = {
"collaborationFavorite":"즐겨찾기", "collaborationFavorite":"즐겨찾기",
"collaborationMyGroup":"마이그룹", "collaborationMyGroup":"마이그룹",
"collaborationSeparatorMyGroup":"마이그룹", "collaborationSeparatorMyGroup":"마이그룹",
"collaborationAllGroup":"전체그룹" "collaborationAllGroup":"전체그룹",
"coviewCapture":"캡처"
} }
public/js/share.js
...@@ -180,6 +180,11 @@ $(function() { ...@@ -180,6 +180,11 @@ $(function() {
// TODO // TODO
}); });
// キャプチャ
$("#captureBtn").on("click", function(e) {
});
// マイクボタン // マイクボタン
$("#coviewMicBtn").on("click", function(e) { $("#coviewMicBtn").on("click", function(e) {
var flg = $(this).hasClass("active"); var flg = $(this).hasClass("active");
...@@ -279,7 +284,6 @@ $(function() { ...@@ -279,7 +284,6 @@ $(function() {
globalUserInfo.coWorkType = "camera"; globalUserInfo.coWorkType = "camera";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea(); Coview_moveToVideoShareArea();
}); });
// 画像(ライブラリ) // 画像(ライブラリ)
...@@ -504,14 +508,15 @@ function Coview_setCoviewAddMember() { ...@@ -504,14 +508,15 @@ function Coview_setCoviewAddMember() {
// 初期化 // 初期化
$('#coviewFavoriteList').html(''); $('#coviewFavoriteList').html('');
$('#coviewGroupList').html(''); $('#coviewGroupList').html('');
$('#coviewAllGroupList').html('');
// お気に入り,グループ情報取得 // TODO グループ情報取得
var favoriteList = [1,1,1,1,1,1]; var favoriteList;
var groupList = [1,1,1,1,1,1,1,1,1,1,1,1]; var groupList;
var allGroupList;
// 様式を読み込む // お気に入り
const favoriteTemplate = $('#coview-favorite-template').html(); const favoriteTemplate = $('#coview-favorite-template').html();
favoriteList.forEach(function(group) { favoriteList.forEach(function(group) {
let html = Mustache.render(favoriteTemplate, { let html = Mustache.render(favoriteTemplate, {
profileImage: "https://www.silhouette-illust.com/wp-content/uploads/2016/11/15795-300x300.jpg", profileImage: "https://www.silhouette-illust.com/wp-content/uploads/2016/11/15795-300x300.jpg",
...@@ -526,9 +531,8 @@ function Coview_setCoviewAddMember() { ...@@ -526,9 +531,8 @@ function Coview_setCoviewAddMember() {
$('#coviewFavoriteList').append(obj); $('#coviewFavoriteList').append(obj);
}); });
// 様式を読み込む // お気に入り以外のグループ
const groupTemplate = $('#coview-group-template').html(); const groupTemplate = $('#coview-group-template').html();
groupList.forEach(function(group) { groupList.forEach(function(group) {
let html = Mustache.render(groupTemplate, { let html = Mustache.render(groupTemplate, {
profileImage: "https://www.silhouette-illust.com/wp-content/uploads/2016/11/15795-300x300.jpg", profileImage: "https://www.silhouette-illust.com/wp-content/uploads/2016/11/15795-300x300.jpg",
...@@ -542,6 +546,22 @@ function Coview_setCoviewAddMember() { ...@@ -542,6 +546,22 @@ function Coview_setCoviewAddMember() {
$('#coviewGroupList').append(obj); $('#coviewGroupList').append(obj);
}); });
// 全てのグループ
const allGroupTemplate = $('#coview-favorite-template').html();
allGroupList.forEach(function(group) {
let html = Mustache.render(allGroupTemplate, {
profileImage: "https://www.silhouette-illust.com/wp-content/uploads/2016/11/15795-300x300.jpg",
userName: "ユーザー名"
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// TODO
console.log("グループがタップされました");
});
$('#coviewAllGroupList').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