Skip to content

C
chat_webview
Commit f63b9ee0 by Takatoshi Miura
Options

協業ユーザー招待画面UI(マイグループ)

parent ffc12428
Showing with 248 additions and 5 deletions
public/css/chat.css
......@@ -1025,7 +1025,7 @@ p#coview_time {
padding: 0px;
}
.coview_member_area, .coview_add_member_area, .coview_type_area {
.coview_member_area, .coview_type_area {
position: absolute;
width: 100%;
height: calc(100vh - 178px);
......@@ -1036,6 +1036,118 @@ p#coview_time {
background: #525252;
}
.coview_add_member_area {
width: 70vw;
height: 70vh;
top: 15vh;
left: 15vw;
flex-wrap: wrap;
display: flex;
position: absolute;
z-index: 4;
background: white;
}
.tab_class {
width: calc(100%/2);
height: 50px;
background-color: #E0E0E0;
line-height: 50px;
font-size: 15px;
text-align: center;
display: block;
float: left;
order: -1;
margin-bottom: 0;
border-bottom: 5px solid #0070CA;
}
input[name="tab_name"] {
display: none;
}
input:checked + .tab_class {
background-color: #0070CA;
color: white;
}
.content_class {
display: none;
width: 100%;
overflow-y: scroll;
}
input:checked + .tab_class + .content_class {
display: block;
height: calc(70vh - 50px);
}
.separator {
width: 100%;
height: 25px;
background: #C4C4C4;
line-height: 25px;
}
.separator label {
margin-left: 8px;
font-family: Noto Sans JP;
font-style: normal;
font-weight: normal;
font-size: 12px;
}
.coview_group_list, .coview_favorite_list {
margin-bottom: 0;
}
.coview_group_list li, .coview_favorite_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;
}
.chat_item_l {
height: 40px;
margin: 15px;
}
.chat_item_m {
white-space: nowrap;
overflow: hidden;
width: calc(100% - 160px);
}
.chat_item_r {
margin: 17px;
margin-left: auto;
}
.chat_item_r img {
width: 36px;
height: 36px;
}
.thubnail {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.thubnail img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.coview_type_inbox {
padding: 29vh 0px;
}
......
public/index.html
......@@ -59,7 +59,25 @@
<div class="coview_type_area" id="coviewTypeArea">
</div>
<div class="coview_add_member_area">
メンバー招待
<input type="radio" name="tab_name" id="tab1" checked>
<label class="tab_class" for="tab1" id="collaborationMyGroup">myGroup</label>
<div class="content_class">
<div class="separator">
<label id="collaborationFavorite">favorite</label>
</div>
<ul class="p-0 coview_favorite_list" id="coviewFavoriteList">
</ul>
<div class="separator">
<label id="collaborationSeparatorMyGroup">myGroup</label>
</div>
<ul class="p-0 coview_group_list" id="coviewGroupList">
</ul>
</div>
<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>
</div>
</div>
<div class="coview_member_area" id="coviewMemberArea">
</div>
......@@ -663,6 +681,51 @@
<img class="" src="{{profileImage}}" alt="">
</button>
</script>
<script id="coview-favorite-template" type="text/template">
<li class="d-flex align-items-center">
<div class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<img src="{{profileImage}}" alt="" />
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span>{{userName}}</span>
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<img src="./icon/ic_collaboration_favorite.png" alt="" />
</div>
</div>
</div>
</div>
</li>
</script>
<script id="coview-group-template" type="text/template">
<li class="d-flex align-items-center">
<div class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<img src="{{profileImage}}" alt="" />
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span>{{userName}}</span>
</div>
</div>
</div>
</div>
</div>
</li>
</script>
<script src="./socket.io/dist/socket.io.js"></script>
<script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
......
public/js/chat-ui.js
......@@ -877,6 +877,10 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#collaboration_photo").text(getLocalizedString("collaboration_photo"))
$("#collaboration_live").text(getLocalizedString("collaboration_live"))
$("#collaboration_boad").text(getLocalizedString("collaboration_boad"))
$("#collaborationMyGroup").text(getLocalizedString("collaborationMyGroup"))
$("#collaborationSeparatorMyGroup").text(getLocalizedString("collaborationSeparatorMyGroup"))
$("#collaborationAllGroup").text(getLocalizedString("collaborationAllGroup"))
$("#collaborationFavorite").text(getLocalizedString("collaborationFavorite"))
}
// 画像の読み込みが全て終わったタイミングでコールバック実行
......
public/js/language_en.js
......@@ -69,5 +69,9 @@ $.lang.en = {
"shareLive":"Live",
"shareDocument":"Document",
"shareBoad":"Boad",
"shareVoice":"Voice"
"shareVoice":"Voice",
"collaborationFavorite":"Favorite",
"collaborationMyGroup":"My Group",
"collaborationSeparatorMyGroup":"My Group",
"collaborationAllGroup":"All Group"
}
public/js/language_ja.js
......@@ -69,5 +69,9 @@ $.lang.ja = {
"shareLive":"現場中継",
"shareDocument":"文書共有",
"shareBoad":"落書き",
"shareVoice":"音声共有"
"shareVoice":"音声共有",
"collaborationFavorite":"お気に入り",
"collaborationMyGroup":"マイグループ",
"collaborationSeparatorMyGroup":"マイグループ",
"collaborationAllGroup":"全グループ"
}
public/js/language_ko.js
......@@ -69,5 +69,9 @@ $.lang.ko = {
"shareLive":"동영상",
"shareDocument":"문서",
"shareBoad":"보드",
"shareVoice":"통화"
"shareVoice":"통화",
"collaborationFavorite":"즐겨찾기",
"collaborationMyGroup":"마이그룹",
"collaborationSeparatorMyGroup":"마이그룹",
"collaborationAllGroup":"전체그룹"
}
public/js/share.js
......@@ -82,6 +82,7 @@ $(function() {
$("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show();
// メンバー招待画面表示
Coview_setCoviewAddMember();
$(".coview_add_member_area").show();
});
......@@ -378,6 +379,9 @@ function Coview_moveToVideoShareArea() {
// 協業タイプ選択画面の設定
function Coview_setCoviewTypeBtn() {
// 初期化
$('#coviewTypeArea').html('');
// 様式を読み込む
const typeTemplate = $('#coview-type-template').html();
......@@ -407,6 +411,9 @@ function Coview_setCoviewTypeBtn() {
// 協業参加メンバー画面の設定
function Coview_setCoviewMember() {
// 初期化
$('#coviewMemberArea').html('');
// メンバー取得
var memberList = coview_api.GetMemberList();
......@@ -430,6 +437,51 @@ function Coview_setCoviewMember() {
});
}
//協業メンバー招待画面の設定
function Coview_setCoviewAddMember() {
// 初期化
$('#coviewFavoriteList').html('');
$('#coviewGroupList').html('');
// お気に入り,グループ情報取得
var favoriteList = [1,1,1,1,1,1];
var groupList = [1,1,1,1,1,1,1,1,1,1,1,1];
// 様式を読み込む
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",
userName: "ユーザー名"
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// TODO
console.log("お気に入りがタップされました");
});
$('#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",
userName: "ユーザー名"
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// TODO
console.log("グループがタップされました");
});
$('#coviewGroupList').append(obj);
});
}
// 経過時間の計算・表示
var timerId;
var startTime;
......
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