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