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

public/css/chat.css

@@ -1025,7 +1025,7 @@ p#coview_time {
   padding: 0px;
   padding: 0px;
 }
 }
 
 
-.coview_member_area, .coview_add_member_area, .coview_type_area {
+.coview_member_area, .coview_type_area {
   position: absolute;
   position: absolute;
   width: 100%;
   width: 100%;
   height: calc(100vh - 178px);
   height: calc(100vh - 178px);
@@ -1036,6 +1036,118 @@ p#coview_time {
   background: #525252;
   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 {
 .coview_type_inbox {
   padding: 29vh 0px;
   padding: 29vh 0px;
 }
 }

public/index.html

@@ -59,7 +59,25 @@
     <div class="coview_type_area" id="coviewTypeArea">
     <div class="coview_type_area" id="coviewTypeArea">
     </div>
     </div>
     <div class="coview_add_member_area">
     <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>
     <div class="coview_member_area" id="coviewMemberArea">
     <div class="coview_member_area" id="coviewMemberArea">
     </div>
     </div>
@@ -663,6 +681,51 @@
     <img class="" src="{{profileImage}}" alt="">
     <img class="" src="{{profileImage}}" alt="">
   </button>
   </button>
 </script>
 </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="./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/chat-ui.js

@@ -877,6 +877,10 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
     $("#collaboration_photo").text(getLocalizedString("collaboration_photo"))
     $("#collaboration_photo").text(getLocalizedString("collaboration_photo"))
     $("#collaboration_live").text(getLocalizedString("collaboration_live"))
     $("#collaboration_live").text(getLocalizedString("collaboration_live"))
     $("#collaboration_boad").text(getLocalizedString("collaboration_boad"))
     $("#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",
     "shareLive":"Live",
     "shareDocument":"Document",
     "shareDocument":"Document",
     "shareBoad":"Boad",
     "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":"現場中継",
     "shareLive":"現場中継",
     "shareDocument":"文書共有",
     "shareDocument":"文書共有",
     "shareBoad":"落書き",
     "shareBoad":"落書き",
-    "shareVoice":"音声共有"
+    "shareVoice":"音声共有",
+    "collaborationFavorite":"お気に入り",
+    "collaborationMyGroup":"マイグループ",
+    "collaborationSeparatorMyGroup":"マイグループ",
+    "collaborationAllGroup":"全グループ"
 }
 }

public/js/language_ko.js

@@ -69,5 +69,9 @@ $.lang.ko = {
     "shareLive":"동영상",
     "shareLive":"동영상",
     "shareDocument":"문서",
     "shareDocument":"문서",
     "shareBoad":"보드",
     "shareBoad":"보드",
-    "shareVoice":"통화"
+    "shareVoice":"통화",
+    "collaborationFavorite":"즐겨찾기",
+    "collaborationMyGroup":"마이그룹",
+    "collaborationSeparatorMyGroup":"마이그룹",
+    "collaborationAllGroup":"전체그룹"
 }
 }

public/js/share.js

@@ -82,6 +82,7 @@ $(function() {
         $("#coviewMemberButton").hide();
         $("#coviewMemberButton").hide();
         $("#coviewShareCloseButton").show();
         $("#coviewShareCloseButton").show();
         // メンバー招待画面表示
         // メンバー招待画面表示
+        Coview_setCoviewAddMember();
         $(".coview_add_member_area").show();
         $(".coview_add_member_area").show();
     });
     });
 
 
@@ -378,6 +379,9 @@ function Coview_moveToVideoShareArea() {
 
 
 // 協業タイプ選択画面の設定
 // 協業タイプ選択画面の設定
 function Coview_setCoviewTypeBtn() {
 function Coview_setCoviewTypeBtn() {
+    // 初期化
+    $('#coviewTypeArea').html('');
+
     // 様式を読み込む
     // 様式を読み込む
     const typeTemplate = $('#coview-type-template').html();
     const typeTemplate = $('#coview-type-template').html();
 
 
@@ -407,6 +411,9 @@ function Coview_setCoviewTypeBtn() {
 
 
 // 協業参加メンバー画面の設定
 // 協業参加メンバー画面の設定
 function Coview_setCoviewMember() {
 function Coview_setCoviewMember() {
+    // 初期化
+    $('#coviewMemberArea').html('');
+
     // メンバー取得
     // メンバー取得
     var memberList = coview_api.GetMemberList();
     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 timerId;
 var startTime;
 var startTime;