Commit 7eef7824 by Kim Peace

Merge branch 'design/playground' into develop

# Conflicts:
#	public_new/archive_detail.html
#	public_new/chat_add_user.html
#	public_new/chat_room.html
#	public_new/collaboration.html
#	public_new/footer_collabo.html
#	public_new/js/archive.js
#	public_new/js/chat-ui.js
#	public_new/modal_chat_menu.html
#	public_new/modal_collabo_profile.html
#	public_new/template/template_open_collaboration_message.html
#	public_new/template/template_user_name_card.html
parents f779067b d298126f
......@@ -65,19 +65,19 @@
<div class="d-flex justify-content-around h-100">
<div class="footer_item">
<a href="contact.html">
<img src="icon/icon_contact_gray.png" alt="コンタクト">
<img src="icon/icon_contact_gray.svg" alt="コンタクト">
<p>コンタクト</p>
</a>
</div>
<div class="footer_item">
<a href="chat.html">
<img src="icon/icon_chat_gray.png" alt="チャット">
<img src="icon/icon_chat_gray.svg" alt="チャット">
<p>チャット</p>
</a>
</div>
<div class="footer_item">
<a href="archive.html">
<img src="icon/icon_archive.png" alt="アーカイブ">
<img src="icon/icon_archive.svg" alt="アーカイブ">
<p class="active">アーカイブ</p>
</a>
</div>
......
......@@ -76,7 +76,6 @@
<!-- view -->
<script src="./js/views/contact/namecard.js"></script>
<script src="./js/views/archive/archive.js"></script>
<script>
var archiveId;
......
......@@ -36,7 +36,7 @@
<div class="col-4 pl-0">
<div class="nav-item text-right craeteRoomButton">
<a href="chat_make_room.html">
<img src="icon/icon_make_room.png" alt="ルーム開設">
<img src="icon/icon_make_room.svg" alt="ルーム開設">
</a>
</div>
</div><!-- .col -->
......@@ -78,19 +78,19 @@
<div class="d-flex justify-content-around h-100">
<div class="footer_item">
<a href="contact.html">
<img src="icon/icon_contact_gray.png" alt="コンタクト">
<img src="icon/icon_contact_gray.svg" alt="コンタクト">
<p>コンタクト</p>
</a>
</div>
<div class="footer_item">
<a href="chat.html">
<img src="icon/icon_chat.png" alt="チャット">
<img src="icon/icon_chat.svg" alt="チャット">
<p class="active">チャット</p>
</a>
</div>
<div class="footer_item">
<a href="archive.html">
<img src="icon/icon_archive_gray.png" alt="アーカイブ">
<img src="icon/icon_archive_gray.svg" alt="アーカイブ">
<p>アーカイブ</p>
</a>
</div>
......
......@@ -24,8 +24,7 @@
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev">
<a href="chat_room.html"><span style="font-size: 13px;">ルーム</span></a>
</div>
<a href="chat_room.html"><span>ルーム</span></a>
</div>
</div>
<div class="col-4 p-0">
......@@ -44,7 +43,7 @@
<main id="chat_add_user">
<form id="addUserForm" action="chat_add_user_confirm.html" method="post">
<!-- ユーザー検索 -->
<div class="search_form my-2">
<div class="search_form">
<input type="search" name="search" placeholder="ユーザー検索" maxlength="30">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
......@@ -67,6 +66,7 @@
<div id="myGroupListForMakeRoom"></div>
</div>
</div>
</div>
<div class="tab_content" id="tab2_content">
<div class="breadcrumb" id="groupPathAreaForAddUser"></div>
<div class="chat_list">
......@@ -77,8 +77,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div>
<img src="icon/icon_prev_top.svg" alt="トップグループに戻る" />
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
......@@ -88,6 +87,7 @@
</div>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center" id="parentGroupArea">
......@@ -95,8 +95,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div>
<img src="icon/icon_prev.svg" alt="上位グループに戻る" />
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
......
......@@ -24,7 +24,7 @@
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev">
<a href="chat.html"><span style="font-size: 13px;">チャット</span></a>
<a href="chat.html"><span>チャット</span></a>
</div>
</div>
</div>
......@@ -77,7 +77,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
<img src="icon/icon_prev_top.svg" alt="トップグループに戻る" />
</div>
</div>
<div class="chat_item_m px-0">
......@@ -95,7 +95,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<img src="icon/icon_prev.png" alt="上位グループに戻る" />
<img src="icon/icon_prev.svg" alt="上位グループに戻る" />
</div>
</div>
<div class="chat_item_m px-0">
......
......@@ -23,7 +23,7 @@
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev" id="prevBtn">
<a href="chat_make_room.html"><span style="font-size: 13px;">ルーム開設</span></a>
<a href="chat_make_room.html"><span>ルーム開設</span></a>
</div>
</div>
</div>
......
......@@ -43,9 +43,9 @@
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
<a href="#" class="search_menu mx-2"><img src="icon/icon_search.png" alt="検索"></a>
<a href="#" data-toggle="modal" data-target="#menuModalCenter" id="roomMenu" class="none mx-1"><img
src="icon/icon_room_menu.png" alt="メニュー"></a>
<a href="#" class="search_menu mx-2"><img src="icon/icon_search.svg" alt="検索"></a>
<a href="#" data-toggle="modal" data-target="#menuModalCenter" class="menu-modal-btn" id="roomMenu" class="none mx-1"><img
src="icon/icon_room_menu.svg" alt="メニュー"></a>
</div>
</div><!-- .col -->
</div><!-- .row -->
......@@ -78,13 +78,13 @@
<div class="footer_content_t">
<div class="d-flex flex-row h-100">
<div class="footer_item attach_file">
<img src="icon/icon_camera.png" alt="写真アイコン" id="imageInputButton">
<img src="icon/icon_camera.svg" alt="写真アイコン" id="imageInputButton">
<form id="image-form">
<input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
</form>
</div>
<div class="footer_item attach_file">
<img src="icon/icon_videocam.png" alt="動画アイコン" id="videoUploadButton">
<img src="icon/icon_videocam.svg" alt="動画アイコン" id="videoUploadButton">
<form id="video-form">
<input class="d-none" type="file" name="image" id="videoInputTag" accept="video/mp4">
</form>
......@@ -100,32 +100,32 @@
<div class="d-flex flex-row justify-content-around h-100">
<div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.AUDIO);">
<img src="icon/icon_phone.png" alt="通話アイコン">
<img src="icon/icon_phone.svg" alt="通話アイコン">
<p>通話</p>
</a>
</div>
<div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.DOCUMENT);">
<img src="icon/icon_paste.png" alt="文書アイコン">
<img src="icon/icon_paste.svg" alt="文書アイコン">
<p>文書</p>
</a>
</div>
<div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.CAMERA);">
<img src="icon/icon_photo.png" alt="画像アイコン">
<img src="icon/icon_photo.svg" alt="画像アイコン">
<p>画像</p>
</a>
</div>
<div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.VIDEO);">
<img src="icon/icon_movie.png" alt="動画アイコン">
<img src="icon/icon_movie.svg" alt="動画アイコン">
<p>動画</p>
</a>
</div>
<!--リリース後開発予定-->
<div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.BOARD);">
<img src="icon/icon_whiteboard_gray.png" alt="ホワイトボードアイコン">
<img src="icon/icon_whiteboard_gray.svg" alt="ホワイトボードアイコン">
<p>ボード</p>
</a>
</div>
......
......@@ -27,13 +27,16 @@
<div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100">
<div class="d-flex flex-row">
<span class="collabo-label collaboration_contents voice_contents">音声</span>
<span class="collabo-label collaboration_contents video_contents">動画</span>
<span class="collabo-label collaboration_contents picture_contents">写真</span>
<span class="collabo-label collaboration_contents document_contents">文書</span>
<span class="collabo-label collaboration_contents board_contents">ボード</span>
<span class="mx-3 host_contents">司会者</span>
<span class="mx-3 none">参加者</span>
<span class="collabo-label collaboration_contents voice_contents">音声<span class="host_contents"> /
司会者</span><span class="none"> / 参加者</span></span>
<span class="collabo-label collaboration_contents video_contents">動画<span class="host_contents"> /
司会者</span><span class="none"> / 参加者</span></span>
<span class="collabo-label collaboration_contents picture_contents">写真<span class="host_contents"> /
司会者</span><span class="none"> / 参加者</span></span>
<span class="collabo-label collaboration_contents document_contents">文書<span class="host_contents"> /
司会者</span><span class="none"> / 参加者</span></span>
<span class="collabo-label collaboration_contents board_contents">ボード<span class="host_contents"> /
司会者</span><span class="none"> / 参加者</span></span>
</div>
</div>
<div class="collabo_nav_r">
......@@ -60,7 +63,7 @@
<div
class="talking_area icon_talking_wrap d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents voice_contents none">
<div class="talking_img_wrap">
<img src="icon/icon_talking_white.png" alt="通話中">
<img src="icon/icon_talking_white.svg" alt="通話中">
</div>
<span class="text-white mt-4">通話中</span>
</div>
......@@ -70,7 +73,7 @@
class="start_pip_area d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents document_contents none">
<div class="start_pip_img_wrap">
<a href="javascript:NativeBridgeDelegate.startPIPMode();">
<img src="icon/icon_start_pip.png" alt="文書共有">
<img src="icon/icon_start_pip.svg" alt="文書共有">
</a>
</div>
<span class="text-white mt-2">共有する</span>
......@@ -107,7 +110,7 @@
<div id="loadingArea"></div>
<div class="pip_indicator none" onclick="NativeBridgeDelegate.finishPIPMode();">
<div style="vertical-align: middle;display: table-cell;">
<img src="icon/icon_end_pip.png" alt="文書共有" style="width: 30px;height: 30px;">
<img src="icon/icon_end_pip.svg" alt="文書共有" style="width: 30px;height: 30px;">
<span style="font-size: 20px;vertical-align: middle;">戻る</span>
</div>
</div>
......
......@@ -6,7 +6,7 @@
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
<img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div>
<span>写真共有</span>
</a>
......@@ -14,7 +14,7 @@
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
<img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div>
<span>動画共有</span>
</a>
......@@ -22,7 +22,7 @@
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
<img src="icon/icon_collabo_document.svg" alt="文書共有">
</div>
<span>文書共有</span>
</a>
......@@ -30,7 +30,7 @@
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
<img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div>
<span>落書き</span>
</a>
......
......@@ -8,7 +8,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.AUDIO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
<img src="icon/icon_collabo_headset.svg" alt="音声共有">
</div>
<span>音声</span>
</a>
......@@ -17,8 +17,8 @@
<span class="item-overlay rounded-circle collaboration_contents video_contents"></span>
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.VIDEO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
<div class="img_wrap m-0">
<img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div>
<span>動画</span>
</a>
......@@ -28,7 +28,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.CAMERA);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
<img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div>
<span>写真</span>
</a>
......@@ -38,7 +38,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.DOCUMENT);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
<img src="icon/icon_collabo_document.svg" alt="文書共有">
</div>
<span>文書</span>
</a>
......@@ -47,8 +47,8 @@
<span class="item-overlay rounded-circle collaboration_contents board_contents"></span>
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.BOARD);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
<div class="img_wrap m-0">
<img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div>
<span>ボード</span>
</a>
......
......@@ -74,28 +74,28 @@
<div class="footer_menu_item photo_select_button host_contents">
<a href="#">
<div class="img_wrap bg_blue" id="photo_open_place_holder">
<img src="icon/icon_collabo_picture.png" alt="写真">
<img src="icon/icon_collabo_picture.svg" alt="写真">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_red" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン">
<img src="icon/icon_collabo_pen_white.svg" alt="ペン">
</div>
</a>
</div>
<div class="footer_menu_item none">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
<img src="icon/icon_collabo_place_white.svg" alt="場所">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除">
<img src="icon/icon_collabo_delete_white.svg" alt="削除">
</div>
</a>
</div>
......@@ -104,14 +104,14 @@
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_rewind_white.png" alt="戻る">
<img src="icon/icon_collabo_rewind_white.svg" alt="戻る">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_forward_white.png" alt="進む">
<img src="icon/icon_collabo_forward_white.svg" alt="進む">
</div>
</a>
</div>
......
......@@ -7,7 +7,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.AUDIO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
<img src="icon/icon_collabo_headset.svg" alt="音声共有">
</div>
<span>音声共有</span>
</a>
......@@ -16,7 +16,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.VIDEO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
<img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div>
<span>動画共有</span>
</a>
......@@ -25,7 +25,7 @@
<a href="javascript:coview_api.ChangeCollaboration('image');"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
<img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div>
<span>写真共有</span>
</a>
......@@ -34,7 +34,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.DOCUMENT);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
<img src="icon/icon_collabo_document.svg" alt="文書共有">
</div>
<span>文書共有</span>
</a>
......@@ -43,7 +43,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.BOARD);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
<img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div>
<span>落書き</span>
</a>
......
......@@ -76,21 +76,21 @@
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_red" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン">
<img src="icon/icon_collabo_pen_white.svg" alt="ペン">
</div>
</a>
</div>
<div class="footer_menu_item none">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
<img src="icon/icon_collabo_place_white.svg" alt="場所">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除">
<img src="icon/icon_collabo_delete_white.svg" alt="削除">
</div>
</a>
</div>
......@@ -100,7 +100,7 @@
<!-- <a href="#" data-toggle="modal" data-target="#captyaModal">-->
<a href="#">
<div class="img_wrap wide bg_blue" id="captureBtn">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ">
<img src="icon/icon_collabo_capture.svg" alt="キャプチャ">
<span>キャプチャ</span>
</div>
</a>
......
......@@ -6,7 +6,7 @@
<div class="item rounded-circle shadow m-2 item01">
<a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
<img src="icon/icon_collabo_headset.svg" alt="音声共有">
</div>
<span>音声共有</span>
</a>
......@@ -14,7 +14,7 @@
<div class="item rounded-circle shadow m-2 item02">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
<img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div>
<span>写真共有</span>
</a>
......@@ -22,7 +22,7 @@
<div class="item rounded-circle shadow m-2 item03">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
<img src="icon/icon_collabo_document.svg" alt="文書共有">
</div>
<span>文書共有</span>
</a>
......@@ -30,7 +30,7 @@
<div class="item rounded-circle shadow m-2 item04">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
<img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div>
<span>落書き</span>
</a>
......
......@@ -6,7 +6,7 @@
<div class="item rounded-circle shadow m-2 item01">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
<img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div>
<span>写真共有</span>
</a>
......@@ -14,7 +14,7 @@
<div class="item rounded-circle shadow m-2 item02">
<a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
<img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div>
<span>動画共有</span>
</a>
......@@ -22,7 +22,7 @@
<div class="item rounded-circle shadow m-2 item03">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
<img src="icon/icon_collabo_document.svg" alt="文書共有">
</div>
<span>文書共有</span>
</a>
......@@ -30,7 +30,7 @@
<div class="item rounded-circle shadow m-2 item04">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
<img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div>
<span>落書き</span>
</a>
......
......@@ -73,21 +73,21 @@
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_red" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン">
<img src="icon/icon_collabo_pen_white.svg" alt="ペン">
</div>
</a>
</div>
<div class="footer_menu_item none">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
<img src="icon/icon_collabo_place_white.svg" alt="場所">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除">
<img src="icon/icon_collabo_delete_white.svg" alt="削除">
</div>
</a>
</div>
......@@ -96,14 +96,14 @@
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_rewind_white.png" alt="戻る">
<img src="icon/icon_collabo_rewind_white.svg" alt="戻る">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_forward_white.png" alt="進む">
<img src="icon/icon_collabo_forward_white.svg" alt="進む">
</div>
</a>
</div>
......
......@@ -6,7 +6,7 @@
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
<img src="icon/icon_collabo_headset.svg" alt="音声共有">
</div>
<span>音声共有</span>
</a>
......@@ -14,7 +14,7 @@
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
<img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div>
<span>動画共有</span>
</a>
......@@ -22,7 +22,7 @@
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
<img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div>
<span>写真共有</span>
</a>
......@@ -30,7 +30,7 @@
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
<img src="icon/icon_collabo_document.svg" alt="文書共有">
</div>
<span>文書共有</span>
</a>
......
......@@ -101,7 +101,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
<img src="icon/icon_prev_top.svg" alt="トップグループに戻る" />
</div>
</div>
<div class="chat_item_m px-0">
......@@ -119,7 +119,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" />
<img src="icon/icon_prev.svg" alt="上位グループに戻る" />
</div>
</div>
<div class="chat_item_m px-0">
......@@ -151,19 +151,19 @@
<div class="d-flex justify-content-around h-100">
<div class="footer_item">
<a href="contact.html">
<img src="icon/icon_contact.png" alt="コンタクト">
<img src="icon/icon_contact.svg" alt="コンタクト">
<p class="active">コンタクト</p>
</a>
</div>
<div class="footer_item">
<a href="chat.html">
<img src="icon/icon_chat_gray.png" alt="チャット">
<img src="icon/icon_chat_gray.svg" alt="チャット">
<p>チャット</p>
</a>
</div>
<div class="footer_item">
<a href="archive.html">
<img src="icon/icon_archive_gray.png" alt="アーカイブ">
<img src="icon/icon_archive_gray.svg" alt="アーカイブ">
<p>アーカイブ</p>
</a>
</div>
......
......@@ -11,8 +11,8 @@
line-height: 46px;
}
.arhive_img img {
width: 40px;
height: 40px;
width: 30px;
height: 30px;
}
.archive_list ul li {
list-style: none;
......@@ -27,7 +27,7 @@
background: aliceblue;
}
.bg_blue {
background: #0070ca;
background: #4896d6;
}
.bg_green {
background: #4dca00;
......@@ -52,7 +52,7 @@
.archive_name span {
color: #323743;
font-size: 16px;
font-weight: 500;
font-weight: bold;
}
.archive_name {
white-space: nowrap;
......
......@@ -7,7 +7,7 @@
.tab_item {
width: calc(100% / 2);
height: 50px;
border-bottom: 5px solid #0070ca;
border-bottom: 5px solid #4896d6;
background-color: #e0e0e0;
line-height: 50px;
font-size: 16px;
......@@ -23,9 +23,6 @@
.msg_notification {
display: none;
}
.tab_item:hover {
opacity: 0.75;
}
input[name="tab_item"] {
display: none;
......@@ -63,7 +60,7 @@ input[name="tab_item"] {
}
.tabs input:checked + .tab_item {
background-color: #0070ca;
background-color: #4896d6;
color: #fff;
}
......@@ -207,7 +204,7 @@ input[name="tab_item"] {
/* タイトル(グループ名、個人名) */
.chat_item_ttl,
.chat_item_num {
font-weight: bold;
font-weight: 800;
}
/* 投稿時間 */
.chat_item_time {
......@@ -241,10 +238,10 @@ input[name="tab_item"] {
cursor: pointer;
position: relative;
line-height: 40px;
background: #0070ca2b;
background: #4896d638;
padding-left: 10px;
border-top: 1px solid #0070ca21;
border-bottom: 1px solid #0070ca21;
border-top: 1px solid #4896d659;
border-bottom: 1px solid #4896d659;
}
.category_name {
white-space: nowrap;
......@@ -265,7 +262,7 @@ input[name="tab_item"] {
/* お気に入り */
.star.active:before {
content: "\f005";
font: 26px FontAwesome;
font: 30px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #F5D256;
......@@ -273,10 +270,10 @@ input[name="tab_item"] {
}
.star.disable:before {
content: "\f005";
font: 26px FontAwesome;
font: 30px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 400;
color: #C4C4C4;
color: #707070;
padding: 20px;
}
......@@ -302,7 +299,7 @@ input[name="tab_item"] {
.checkbox-parts::before {
display: block;
position: absolute;
border: 2px solid #0070ca;
border: 2px solid #4896d6;
content: "";
width: 40px;
height: 40px;
......@@ -326,7 +323,7 @@ input[name="tab_item"] {
bottom: 0;
left: 0;
margin: auto;
background: #0070ca;
background: #4896d6;
border-radius: 50%;
}
......@@ -339,7 +336,7 @@ input[name="tab_item"] {
position: fixed;
bottom: 0;
width: 100%;
background: #0070ca;
background: #4896d6;
color: #fff;
border: none;
font-size: 18px;
......@@ -386,10 +383,11 @@ input[name="tab_item"] {
text-align: center;
height: 48px;
width: 172px;
background: #0070ca;
background: #4896d6;
color: #fff;
border: none;
font-size: 18px;
border-radius: 5px;
}
/**************************** chat room *************************/
......@@ -413,7 +411,7 @@ input[name="tab_item"] {
position: absolute;
top: 23px;
left: 10px;
background-image: url("../icon/icon_search.png");
background-image: url("../icon/icon_search.svg");
background-size: contain;
width: 16px;
height: 16px;
......@@ -652,7 +650,7 @@ input[name="tab_item"] {
.room_right .text {
padding: 10px;
border-radius: 8px;
background-color: #0070ca;
background-color: #4896d6;
color: #fff;
margin: 0;
margin-left: 110px;
......@@ -665,9 +663,9 @@ input[name="tab_item"] {
position: absolute;
right: -10px;
top: 5px;
border-left: 10px solid #0070ca;
border-left: 10px solid #4896d6;
border-right: 10px solid transparent;
border-top: 10px solid #0070ca;
border-top: 10px solid #4896d6;
border-bottom: 10px solid transparent;
}
/* 日付 */
......@@ -754,7 +752,7 @@ input[name="tab_item"] {
.collabo_area .collabo_btn button {
width: 100%;
line-height: 45px;
background: #0070ca;
background: #4896d6;
border: none;
color: #fff;
border-radius: 25px;
......@@ -764,6 +762,11 @@ input[name="tab_item"] {
.collabo_area.disable .collabo_btn button {
background: #5b666f;
}
.collabo_area .collabo_btn button img {
width: 25px;
height: 25px;
margin-right: 10px;
}
.message_input_send {
border-radius: 8px;
......@@ -781,12 +784,57 @@ input[name="tab_item"] {
}
/**************************** modal *************************/
#menuModalCenter {
width: 70% !important;
margin-left: 15% !important;
}
/* メニューモーダル */
.modal-backdrop{
background-color: #F9F9F9;
}
.modal-backdrop.show{
opacity: 0.95;
}
.menu_modal .modal-dialog{
max-width: 100%!important;
}
.profile_modal .modal-content{
border:none!important;
background-color:transparent!important;
}
.menu_modal .modal-content{
border:none!important;
background-color:transparent!important;
}
.modal-content-wrap {
width: 100%;
height: 100vh;
pointer-events: auto;
}
.menu_modal .modal-header .close{
padding: 0.8rem 0.8rem!important;
margin: 0!important;
}
.profile_modal button.close,
.menu_modal button.close{
position: fixed;
top: 30px;
right: 30px;
outline: 0;
}
.menu_modal button.close{
opacity: 0;
animation: fadein .5s ease forwards;
}
.profile_modal .close,
.menu_modal .close{
color: #707070;
opacity: 1!important;
}
.menu_modal .modal-body {
padding: 1rem!important;
display: flex!important;
justify-content: center!important;
align-items: center!important;
height: 100%!important;
width: 100%!important;
}
.modal-body #modal_image {
width: 100%;
height: 100%;
......@@ -795,22 +843,51 @@ input[name="tab_item"] {
.menu_modal .modal-body ul {
list-style: none;
padding-left: 0;
width: 100%;
}
.menu_modal .modal-body ul li img {
max-width: 28px;
max-height: 28px;
max-width: 26px;
width: 100%;
height: auto;
height: 50px;
margin-right: 10px;
}
.menu_modal .modal-body ul li {
border-bottom: 1px solid #c6c6c6;
height: 50px;
width: 90%;
max-width: 500px;
margin: 0 auto 20px auto;
border-radius: 5px;
text-align: center;
background: #ffffff;
}
.menu_modal .modal-body ul li.item01{
opacity: 0;
animation: fadein .5s ease forwards;
}
.menu_modal .modal-body ul li.item02{
opacity: 0;
animation: fadein 1s ease forwards;
}
.menu_modal .modal-body ul li.item03{
opacity: 0;
animation: fadein 1.5s ease forwards;
}
.profile_modal .modal-content.item01{
opacity: 0;
animation: fadein .5s ease forwards;
}
@keyframes fadein{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.menu_modal .modal-body ul li a {
line-height: 50px;
display: block;
color: #323743;
color: #707070;
padding: 5px 10px;
}
.menu_modal .modal-body ul li a:hover {
background: aliceblue;
......
......@@ -39,7 +39,7 @@ footer .footer_item img {
height: 32px;
}
footer .footer_content_b .footer_item .active {
color: #0070CA;
color: #4896d6;
font-weight: bold;
}
footer .footer_item a {
......
......@@ -36,13 +36,9 @@
.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}
.collabo-label {
border: 1px solid #fff;
width: fit-content;
padding: 2px 5px;
border-radius: 5px;
background: #fff;
color: #20304c;
font-size: 14px;
color: #ffffff;
font-size: 18px;
font-weight: bold;
}
......@@ -113,11 +109,12 @@
content: "";
top: 0;
right: 0;
background: url("../icon/icon_host_tag.png");
background: url("../icon/icon_host_tag.svg");
position: absolute;
z-index: 2;
width: 50px;
height: 50px;
width: 25px;
height: 25px;
margin: 5px;
background-repeat: no-repeat;
background-position: center;
}
......@@ -176,43 +173,40 @@ pointer-events: none;
animation: pulsate 2s linear infinite;
}
/**************************** overlay *************************/
.btn {
background-color: transparent;
border: none;
width: 50px;
height: 50px;
width: 40px;
height: 30px;
margin: 5px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.btn.menu_btn {
background-image: url("../icon/icon_collabo_menu.png");
background-image: url("../icon/icon_collabo_menu.svg");
}
.btn.user_btn {
background-image: url("../icon/icon_member_white.png");
background-image: url("../icon/icon_member_white.svg");
}
.btn.add_user_btn {
background-image: url("../icon/icon_add_member_white.png");
background-image: url("../icon/icon_add_member_white.svg");
}
.btn.exit_btn {
background-image: url("../icon/icon_close.png");
background-image: url("../icon/icon_close.svg");
}
.btn.start_pip_btn {
background-image: url("../icon/icon_start_pip.png");
background-image: url("../icon/icon_start_pip.svg");
}
.btn.add_user_btn.hide,
.btn.user_btn.hide {
transition: 0.3s;
background-image: url("../icon/icon_member_blue.png");
background-image: url("../icon/icon_member_blue.svg");
}
.btn.menu_btn.hide {
transition: 0.3s;
background-image: url("../icon/icon_close.png");
background-image: url("../icon/icon_close.svg");
}
.overlay {
transition: 0.5s;
......@@ -283,9 +277,7 @@ animation: pulsate 2s linear infinite;
opacity: 0;
}
}
/* #overlay_menu.hide {
display: none;
} */
#overlay_menu .item01.hide,
#overlay_menu .item02.hide,
#overlay_menu .item03.hide,
......@@ -323,19 +315,20 @@ animation: pulsate 2s linear infinite;
#overlay_menu .menu_wrap .menu .item a {
text-align: center;
color: #fff;
padding-top: 6px;
}
#overlay_menu .menu_wrap .menu .item span{
font-size:12px;
}
#overlay_menu .img_wrap {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 8px;
width: 35px;
height: 35px;
line-height: 35px;
margin-bottom: 3px;
}
#overlay_menu .img_wrap img {
width: 40px;
height: 40px;
width: 35px;
height: 35px;
}
.fas.fa-wrench{
color: #fff;
......@@ -389,7 +382,7 @@ animation: pulsate 2s linear infinite;
#add_user_list .checkbox-parts::before {
display: block;
position: absolute;
border: 2px solid #0070ca;
border: 2px solid #4896d6;
content: "";
width: 40px;
height: 40px;
......@@ -413,7 +406,7 @@ animation: pulsate 2s linear infinite;
bottom: 0;
left: 0;
margin: auto;
background: #0070ca;
background: #4896d6;
border-radius: 50%;
}
#add_user_list .user_item_l {
......@@ -435,6 +428,11 @@ animation: pulsate 2s linear infinite;
color: #323743;
}
/**************************** add user *************************/
#addUserFormInCollaboration nav{
border:none;
}
/**************************** zoomin zoomout *************************/
.s_ac .img_wrap {
width: 40px;
......@@ -483,7 +481,15 @@ animation: pulsate 2s linear infinite;
#hostRequestModal .modal-footer button {
width: 50%;
height: 50px;
border-radius: 10px;
border-radius: 5px;
}
#modalAddUserConfirm .chat_list h2{
font-size: 20px;
}
/**************************** document *************************/
.start_pip_img_wrap{
width: 40px;
}
/**************************** footer *************************/
......@@ -499,7 +505,7 @@ animation: pulsate 2s linear infinite;
#collabo_footer .footer-wrap {
margin: 0 auto;
height: 100%;
max-width: 300px;
max-width: 350px;
}
#collabo_footer .footer_item a {
display: inline-block;
......@@ -510,53 +516,57 @@ animation: pulsate 2s linear infinite;
border-radius: 50%;
line-height: 45px;
}
.end:hover {
background: #ff4747c7;
}
.close_img{
width: 20px;
height: 20px;
}
.t-icon{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 40px;
height: 40px;
margin: 10px;
background-size: contain;
width: 30px;
height: 30px;
margin: 0 10px 6px 10px;
}
.voice{
background-image: url("../icon/icon_voice_white.png");
background-image: url("../icon/icon_voice_white.svg");
}
.voice.disable{
background-image: url("../icon/icon_voice_white_disable.png");
background-image: url("../icon/icon_voice_white_disable.svg");
}
.pen{
background-image: url("../icon/icon_collabo_pen_white.png");
background-image: url("../icon/icon_collabo_pen_white.svg");
}
.pen.disable{
background-image: url("../icon/icon_collabo_pen_white_disable.png");
background-image: url("../icon/icon_collabo_pen_white_disable.svg");
}
.picture{
background-image: url("../icon/icon_collabo_picture.png");
background-image: url("../icon/icon_collabo_picture.svg");
}
.place{
background-image: url("../icon/icon_collabo_place_white.png");
background-image: url("../icon/icon_collabo_place_white.svg");
}
.delete{
background-image: url("../icon/icon_collabo_delete_white.png");
background-image: url("../icon/icon_collabo_delete_white.svg");
}
.rewind{
background-image: url("../icon/icon_collabo_rewind_white.png");
background-image: url("../icon/icon_collabo_rewind_white.svg");
}
.forward{
background-image: url("../icon/icon_collabo_forward_white.png");
background-image: url("../icon/icon_collabo_forward_white.svg");
}
.capture{
background-image: url("../icon/icon_collabo_capture.png");
background-image: url("../icon/icon_collabo_capture.svg");
}
.record{
background-image: url("../icon/icon_record.png");
background-image: url("../icon/icon_record.svg");
}
.record.disable{
background-image: url("../icon/icon_record_disable.png");
}
.tool{
background-image: url("../icon/icon_tool_white.png");
background-image: url("../icon/icon_record_disable.svg");
}
.record.disable {
......@@ -564,8 +574,6 @@ animation: pulsate 2s linear infinite;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #DD4545;
box-shadow: 0 0 20px #dd4545;
......@@ -762,9 +770,6 @@ animation: pulsate 2s linear infinite;
.modal-content .msg_notification {
display: none;
}
.modal-content .tab_item:hover {
opacity: 0.75;
}
input[name="tab_item"] {
display: none;
......@@ -846,6 +851,10 @@ input[name="tab_item"] {
z-index: 999;
}
#userNameCardInCollaboration li{
list-style: none;
}
@media screen and (max-width: 768px) {
/* chat item */
.tab_item {
......
......@@ -2,7 +2,8 @@
@import url(./notosansjp.css);
body {
font-family: "Noto Sans JP", sans-serif;
font-family: "Noto Sans Japanese", sans-serif;
font-weight:unset;
margin: 0 auto;
color: #323743;
margin-bottom: 70px;
......@@ -23,10 +24,15 @@ nav {
position: fixed;
top: 0;
width: 100%;
border-bottom: 1px solid #cdcdcd;
border-bottom: 5px solid #4896d6;
background: #fff;
z-index: 3;
}
nav img{
width: 30px;
height: 30px;
padding: 2px;
}
main {
margin-top: 60px;
}
......@@ -76,7 +82,7 @@ main {
position: absolute;
top: 23px;
left: 10px;
background-image: url("../icon/icon_search.png");
background-image: url("../icon/icon_search.svg");
background-size: contain;
width: 16px;
height: 16px;
......@@ -107,7 +113,7 @@ main {
background: #f3f3f3;
}
.bg_blue {
background: #0070ca;
background: #4896d6;
}
.bg_navy {
background: #1d3557;
......@@ -125,7 +131,7 @@ main {
border: 1px solid #dadce0;
}
.text_blue {
color: #0070ca;
color: #4896d6;
}
.text_white {
color: #fff;
......@@ -134,14 +140,21 @@ main {
/**************************** modal *************************/
/* プロフィールモーダル */
.profile_modal .modal-footer button {
color: #fff;
color: #707070;
border-radius: 10px;
min-width: 90px;
font-size: 11px;
background: transparent;
outline: none;
}
.profile_modal .modal-footer button img {
width: 30px;
.profile_modal .modal-footer button span {
font-weight: bold;
margin-top: 5px;
}
.profile_modal .modal-footer button img{
width: 35px;
height: 30px;
margin: 5px;
}
.profile_modal .modal-body p {
max-height: 200px;
......@@ -159,13 +172,14 @@ main {
padding-top: 0rem;
padding-right: 1rem;
margin-top: 1rem;
list-style: none;
}
.disabled {
background: darkgray !important;
}
.profile_modal .modal-header { display: table; }
.profile_modal .modal-header,.profile_modal .modal-body { padding-bottom: 0; }
.profile_modal .modal-body { padding-bottom: 0; }
.profile_modal .modal-footer button { width: 33%; padding: 5px; }
.profile_modal.w_50 .modal-footer button { width: 50%; padding: 5px; }
.profile_modal .modal-header .profile_desc { width: 100%; }
......@@ -185,7 +199,10 @@ main {
font-size: 20px;
padding: 5px;
}
.btn.focus, .btn:focus{
outline: 0;
box-shadow: none;
}
@media screen and (max-width: 768px) {
/* navi */
.nav-ttl {
......
......@@ -12,6 +12,11 @@ footer {
#footer-main{
background: #F9F9F9;
}
#footer-main img {
width: 30px;
height: 30px;
padding: 2px;
}
footer .footer-wrap {
margin: 0 auto;
height: 100%;
......@@ -42,7 +47,7 @@ footer .footer_item p {
white-space: nowrap;
}
footer .footer_item .active {
color: #0070ca;
color: #4896d6;
font-weight: bold;
}
footer .footer_item a {
......
......@@ -3,56 +3,56 @@
<div class="d-flex justify-content-around h-100">
<div class="footer_item mx-md-3 photo_select_button collaboration_contents picture_contents">
<a href="javascript:togglePhotoOpenPlaceHolder();">
<div class="d-flex flex-column justify-content-center" id="photo_open_place_holder">
<div class="t-icon picture my-0"></div>
<div class="d-flex flex-column justify-content-center align-items-center" id="photo_open_place_holder">
<div class="t-icon picture"></div>
<span class="text-white txt">ピクチャ</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
<a href="javascript:togglePen();">
<div class="d-flex flex-column justify-content-center" id="penBtn">
<div class="t-icon pen disable my-0"></div>
<div class="d-flex flex-column justify-content-center align-items-center" id="penBtn">
<div class="t-icon pen disable"></div>
<span class="text-white txt">ペン</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
<a href="javascript:toggleEraser();">
<div class="d-flex flex-column justify-content-center" id="eraserBtn">
<div class="t-icon delete my-0"></div>
<div class="d-flex flex-column justify-content-center align-items-center" id="eraserBtn">
<div class="t-icon delete"></div>
<span class="text-white txt">削除</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3 collaboration_contents video_contents_host">
<a href="javascript:toggleCapture();">
<div class="d-flex flex-column justify-content-center" id="captureBtn">
<div class="t-icon capture my-0"></div>
<div class="d-flex flex-column justify-content-center align-items-center" id="captureBtn">
<div class="t-icon capture"></div>
<span class="text-white txt">キャプチャ</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3 collaboration_contents video_contents_user">
<a href="javascript:toggleCaptureRequest();">
<div class="d-flex flex-column justify-content-center" id="captureRequestBtn">
<div class="d-flex flex-column justify-content-center align-items-center" id="captureRequestBtn">
<div class="t-icon capture my-0"></div>
<span class="text-white txt">キャプチャリクエスト</span>
<span class="text-white txt">キャプチャ<br>リクエスト</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3">
<a href="javascript:toggleMic();">
<div class="d-flex flex-column justify-content-center" id="micBtn">
<div class="t-icon voice my-0"></div>
<div class="d-flex flex-column justify-content-center align-items-center" id="micBtn">
<div class="t-icon voice"></div>
<span class="text-white txt">マイク</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3 none host_contents">
<a href="javascript:toggleRecord();">
<div class="d-flex flex-column justify-content-center" id="recordBtn">
<div class="t-icon record my-0"></div>
<div class="d-flex flex-column justify-content-center align-items-center" id="recordBtn">
<div class="t-icon record"></div>
<span class="text-white txt">録音</span>
<div class="flash-txt"><p>録音を開始しました</p></div>
</div>
......@@ -60,8 +60,8 @@
</div>
<div class="footer_item mx-md-3">
<a href="javascript:CoviewBridge.exitCollaboration();">
<div class="img_wrap bg_red mx-1">
<img src="icon/icon_close_white.png" alt="閉じる">
<div class="img_wrap bg_red mx-1 end">
<img src="icon/icon_close_white.svg" class="close_img" alt="閉じる">
</div>
</a>
</div>
......
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.9 33.71"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_add_member_white"><path class="cls-1" d="M12.08,5.2c-1.62,2.72-.89,7.34,2,12.67a5.83,5.83,0,0,1,.48,5.36c-1.38,3.06-5.17,3.93-9.17,4.85-2.76.64-2.58,1.23-2.58,5.63H0V32c0-3.53.28-5.58,4.46-6.54,4.73-1.1,9.4-2.07,7.15-6.21C5,7,9.72,0,16.85,0c4.67,0,8.39,3,8.39,8.66,0,5-2.74,9.6-3.35,11h-3c.55-2.15,3.51-6.13,3.51-11C22.43,1.41,14.19,1.65,12.08,5.2ZM30.9,26.69H26.69V22.47H23.88v4.22H19.66v2.8h4.22v4.22h2.81V29.49H30.9Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.35 27.65"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_add_user"><path class="cls-1" d="M9.91,4.26c-1.33,2.23-.73,6,1.64,10.4a4.8,4.8,0,0,1,.39,4.4c-1.13,2.51-4.23,3.22-7.52,4-2.26.52-2.12,1-2.12,4.61H0V26.22c0-2.9.23-4.58,3.66-5.37,3.88-.9,7.71-1.7,5.87-5.09C4.07,5.7,8,0,13.83,0c3.82,0,6.87,2.44,6.87,7.11,0,4.09-2.24,7.87-2.74,9H15.52c.45-1.77,2.88-5,2.88-9C18.4,1.16,11.64,1.35,9.91,4.26ZM25.35,21.89H21.89V18.43h-2.3v3.46H16.13V24.2h3.46v3.45h2.3V24.2h3.46Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24"><defs><style>.cls-1{fill:#4896d6;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_archive"><rect class="cls-1" width="26" height="7"/><path class="cls-1" d="M0,8V24H26V8Zm19,5H7V10H19Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_archive_gray"><rect class="cls-1" width="26" height="7"/><path class="cls-1" d="M0,8V24H26V8Zm19,5H7V10H19Z"/></g></g></svg>
\ No newline at end of file
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Image / photo camera">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="4" width="28" height="24">
<g id="Icon Mask">
<path id="Round" fill-rule="evenodd" clip-rule="evenodd" d="M26.6666 6.66667H22.44L20.7866 4.86667C20.2933 4.32 19.5733 4 18.8266 4H13.1733C12.4266 4 11.7066 4.32 11.2 4.86667L9.55996 6.66667H5.33329C3.86663 6.66667 2.66663 7.86667 2.66663 9.33333V25.3333C2.66663 26.8 3.86663 28 5.33329 28H26.6666C28.1333 28 29.3333 26.8 29.3333 25.3333V9.33333C29.3333 7.86667 28.1333 6.66667 26.6666 6.66667ZM16 13.3333C13.7908 13.3333 12 15.1242 12 17.3333C12 19.5425 13.7908 21.3333 16 21.3333C18.2091 21.3333 20 19.5425 20 17.3333C20 15.1242 18.2091 13.3333 16 13.3333ZM9.33329 17.3333C9.33329 21.0133 12.32 24 16 24C19.68 24 22.6666 21.0133 22.6666 17.3333C22.6666 13.6533 19.68 10.6667 16 10.6667C12.32 10.6667 9.33329 13.6533 9.33329 17.3333Z" fill="black"/>
</g>
</mask>
<g mask="url(#mask0)">
<rect id="Color Fill" width="32" height="32" fill="#707070"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_change_host"><path class="cls-1" d="M16,16H0v-.82c0-1.69.13-2.66,2.12-3.12,2.24-.51,4.46-1,3.39-2.94C2.36,3.3,4.61,0,8,0s5.63,3.18,2.49,9.12c-1,2,1.1,2.41,3.39,2.94S16,13.8,16,16Zm8-.62c0-1.26-.1-2-1.59-2.33-1.72-.4-3.32-.75-2.54-2.21C22.23,6.38,20.49,4,18,4a2.86,2.86,0,0,0-3,3.1c0,5.2,3,2.36,3,8.9h6Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.12 28.07"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_change_room_name"><path class="cls-1" d="M9.1,25.3l.1-.1L19.89,14.5l.11-.11.11-.11,5.67-5.67h0L19.46,2.29h0L13.78,8l-.11.11-.11.11L2.77,19h0L0,28.06H0l9-2.73ZM2,26,3.4,21.5h0l3.16,3.16h0L2,26.05Z"/><path class="cls-1" d="M27.59,5.71a1.82,1.82,0,0,0,0-2.56L25,.53a1.8,1.8,0,0,0-2.56,0L21.1,1.84h0L26.28,7h0Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.43 24.23"><defs><style>.cls-1{fill:#4896d6;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_chat"><path class="cls-1" d="M13.22,0C6.24,0,0,4.65,0,11a9.72,9.72,0,0,0,2.25,6.2c.07,2-1.12,4.91-2.19,7,2.87-.52,6.94-1.66,8.79-2.79C19,23.91,26.43,17.69,26.43,11,26.43,4.62,20.16,0,13.22,0ZM7.71,12.67A1.66,1.66,0,1,1,9.36,11,1.65,1.65,0,0,1,7.71,12.67Zm5.51,0A1.66,1.66,0,1,1,14.87,11,1.65,1.65,0,0,1,13.22,12.67Zm5.5,0A1.66,1.66,0,1,1,20.38,11,1.65,1.65,0,0,1,18.72,12.67Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.43 24.23"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_chat_gray"><path class="cls-1" d="M13.22,0C6.24,0,0,4.65,0,11a9.72,9.72,0,0,0,2.25,6.2c.07,2-1.12,4.91-2.19,7,2.87-.52,6.94-1.66,8.79-2.79C19,23.91,26.43,17.69,26.43,11,26.43,4.62,20.16,0,13.22,0ZM7.71,12.67A1.66,1.66,0,1,1,9.36,11,1.65,1.65,0,0,1,7.71,12.67Zm5.51,0A1.66,1.66,0,1,1,14.87,11,1.65,1.65,0,0,1,13.22,12.67Zm5.5,0A1.66,1.66,0,1,1,20.38,11,1.65,1.65,0,0,1,18.72,12.67Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.79 17.79"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_close_white"><polygon class="cls-1" points="17.79 1.83 15.97 0 8.9 7.07 1.83 0 0 1.83 7.07 8.9 0 15.97 1.83 17.79 8.9 10.72 15.97 17.79 17.79 15.97 10.72 8.9 17.79 1.83"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.4 22"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_capture"><path class="cls-1" d="M5.5,2.2H2.2V1.1H5.5Zm12,0,.9,1.34a4.36,4.36,0,0,0,3.66,2H24.2V19.8H2.2V5.5H6.52a4.36,4.36,0,0,0,3.66-2l.9-1.34ZM18.7,0H9.9L8.35,2.32a2.19,2.19,0,0,1-1.83,1H0V22H26.4V3.3H22.08a2.19,2.19,0,0,1-1.83-1ZM6.6,8.8A1.1,1.1,0,1,0,5.5,9.9,1.1,1.1,0,0,0,6.6,8.8Zm7.7,0A3.3,3.3,0,1,1,11,12.1,3.3,3.3,0,0,1,14.3,8.8Zm0-2.2a5.5,5.5,0,1,0,5.5,5.5A5.5,5.5,0,0,0,14.3,6.6Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.77 30.55"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_delete_white"><rect class="cls-1" y="27.55" width="27" height="3"/><path class="cls-1" d="M11.86,2H24.3a1.78,1.78,0,0,1,1.78,1.78v17a.2.2,0,0,1-.2.2H10.28a.2.2,0,0,1-.2-.2v-17A1.78,1.78,0,0,1,11.86,2Z" transform="translate(15.39 -9.76) rotate(50.33)"/><path class="cls-1" d="M-.7,16.93h16a0,0,0,0,1,0,0v4.91a2.09,2.09,0,0,1-2.09,2.09H1.4A2.09,2.09,0,0,1-.7,21.84V16.93a0,0,0,0,1,0,0Z" transform="translate(18.37 1.77) rotate(50.33)"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.26 31.72"><defs><style>.cls-1{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_document"><path class="cls-1" d="M.5,3.29V28.42a2.8,2.8,0,0,0,2.79,2.8H22a2.8,2.8,0,0,0,2.79-2.8V10.64a3,3,0,0,0-.9-2.17L16.79,1.4A3,3,0,0,0,14.62.5H3.29A2.79,2.79,0,0,0,.5,3.29ZM22.84,9.66H16.56c-.68,0-.95-.26-.95-.94V2.44ZM2.07,3.29A1.22,1.22,0,0,1,3.29,2.07H14.22V9.56a1.5,1.5,0,0,0,1.5,1.5h7.47V28.42A1.23,1.23,0,0,1,22,29.65H3.29a1.23,1.23,0,0,1-1.22-1.23Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.16 27.98"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_headset"><path class="cls-1" d="M24.88,13.22C24.88,5.92,19.31,0,12.44,0S0,5.92,0,13.22A13.88,13.88,0,0,0,.52,17a1.31,1.31,0,0,0,0,.52l1.21,5.56a1.34,1.34,0,0,0,1.59,1l1.6-.35,1-.22A1.34,1.34,0,0,0,7,22l-.19-.87-1-4.69a1.34,1.34,0,0,0-1.59-1l-.78.17a10.38,10.38,0,0,1-.26-2.32c0-5.47,4.19-9.92,9.33-9.92s9.33,4.45,9.33,9.92a10.38,10.38,0,0,1-.26,2.32h0l-.78-.17a1.34,1.34,0,0,0-1.59,1l-1,4.69-.19.87a1.33,1.33,0,0,0,1,1.59l1,.22,1.61.35a1.33,1.33,0,0,0,1.58-1l1.21-5.56a1.32,1.32,0,0,0,0-.52A14.27,14.27,0,0,0,24.88,13.22Z"/><rect class="cls-1" x="22.1" y="18.66" width="2.33" height="9.25" rx="1.09" transform="translate(5.31 -4.3) rotate(11.92)"/><rect class="cls-1" x="19.05" y="23.31" width="1.75" height="7.58" rx="0.82" transform="translate(47.03 7.18) rotate(90)"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.05 27"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_pen_white"><path class="cls-1" d="M8.75,24.34l.1-.1L19.14,14l.1-.11.11-.1L24.8,8.29h0L18.72,2.2h0L13.26,7.65l-.1.11-.11.1L2.66,18.25h0L0,27H0l8.62-2.62Zm-6.81.72,1.33-4.37h0l3,3h0L1.94,25.06Z"/><path class="cls-1" d="M26.54,5.49a1.74,1.74,0,0,0,0-2.46L24,.51a1.74,1.74,0,0,0-2.46,0L20.3,1.77h0l5,5h0Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.05 27"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_pen_white_disable"><path class="cls-1" d="M26.54,5.49a1.74,1.74,0,0,0,0-2.46L24,.51a1.74,1.74,0,0,0-2.46,0L20.3,1.77h0l5,5h0Z"/><path class="cls-1" d="M19.19,13.89l0-.05.11-.1L24.8,8.29h0L18.72,2.2h0L13.26,7.65l-.1.11-.11.1-.27.28Z"/><path class="cls-1" d="M8,12.9,2.66,18.25h0L0,27H0l8.62-2.62.13,0,.1-.1,5.58-5.59ZM6.31,23.73,1.94,25.06h0l1.33-4.37h0l3,3Z"/><rect class="cls-1" x="-0.96" y="11.45" width="28.96" height="4.1" rx="1.61" transform="translate(12.47 -5.58) rotate(41.9)"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.09 22.85"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_picture"><path class="cls-1" d="M0,0V22.85H28.09V0ZM2.79,20.06V2.79H25.3V20.06Z"/><path class="cls-1" d="M11.16,9.18A1.95,1.95,0,1,0,9.21,7.24,2,2,0,0,0,11.16,9.18Z"/><path class="cls-1" d="M16,8.48A1.18,1.18,0,0,0,15,9l-2.28,3.49a1,1,0,0,1-1.69,0,1.18,1.18,0,0,0-2,0l-3.85,6h18L17,9A1.18,1.18,0,0,0,16,8.48Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 24"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_place_white"><path class="cls-1" d="M8,2a6,6,0,0,1,6,5.6c0,3.09-2.49,7.13-6,12.66C4.49,14.73,2,10.7,2,7.6A6,6,0,0,1,8,2M8,0C3.8,0,0,3.4,0,7.6S3.47,16.81,8,24c4.53-7.19,8-12.2,8-16.4S12.2,0,8,0ZM8,11a3,3,0,1,1,3-3A3,3,0,0,1,8,11Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.45 16.64"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_videocam"><rect class="cls-1" x="1.5" y="1.5" width="19.22" height="13.64" rx="1.15"/><polygon class="cls-1" points="30.95 12.97 24.44 11.11 24.44 5.53 30.95 3.67 30.95 12.97"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.41 44.19"><defs><style>.cls-1,.cls-2{fill:#fff;}.cls-2{stroke:#fff;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="whiteboad_icon_white"><path class="cls-1" d="M39.19,5V32.56H5V5H39.19m3-5H2A2,2,0,0,0,0,2V35.56a2,2,0,0,0,2,2H42.19a2,2,0,0,0,2-2V2a2,2,0,0,0-2-2Z"/><path class="cls-1" d="M62.41,44.19H44.54V25.74a3,3,0,0,1,3-3H59.41a3,3,0,0,1,3,3Z"/><circle class="cls-1" cx="53.48" cy="14.4" r="5.96"/><path class="cls-1" d="M49.93,30.49l-5.37,3.64a4.14,4.14,0,0,1-5-.41h0a2.49,2.49,0,0,1,.37-4l5.36-3.64a4.14,4.14,0,0,1,5,.41h0A2.49,2.49,0,0,1,49.93,30.49Z"/><path class="cls-1" d="M37.9,34.26l-5.1-4.42a2.66,2.66,0,0,1-.06-4.23h0a4.08,4.08,0,0,1,5,.19l5.1,4.43a2.67,2.67,0,0,1,.06,4.23h0A4.08,4.08,0,0,1,37.9,34.26Z"/><rect class="cls-2" x="17.93" y="17.93" width="15.47" height="2.21" rx="0.5" transform="translate(19.52 -12.32) rotate(42.35)"/></g></g></svg>
\ No newline at end of file
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9707 14.4716H15.1807L14.9007 14.2016C16.1007 12.8016 16.7207 10.8916 16.3807 8.86157C15.9107 6.08157 13.5907 3.86157 10.7907 3.52157C6.56072 3.00157 3.01072 6.56157 3.52072 10.7916C3.86072 13.5916 6.08072 15.9116 8.86072 16.3816C10.8907 16.7216 12.8007 16.1016 14.2007 14.9016L14.4707 15.1816V15.9716L18.7307 20.2216C19.1407 20.6316 19.8007 20.6316 20.2107 20.2216L20.2207 20.2116C20.6307 19.8016 20.6307 19.1416 20.2207 18.7316L15.9707 14.4716ZM9.97072 14.4716C7.48072 14.4716 5.47072 12.4616 5.47072 9.97157C5.47072 7.48157 7.48072 5.47157 9.97072 5.47157C12.4607 5.47157 14.4707 7.48157 14.4707 9.97157C14.4707 12.4616 12.4607 14.4716 9.97072 14.4716ZM9.47072 7.97157C9.47072 7.69157 9.69072 7.47157 9.97072 7.47157C10.2507 7.47157 10.4707 7.69157 10.4707 7.97157V9.47157H11.9707C12.2507 9.47157 12.4707 9.69157 12.4707 9.97157C12.4707 10.2516 12.2507 10.4716 11.9707 10.4716H10.4707V11.9716C10.4707 12.2516 10.2507 12.4716 9.97072 12.4716C9.69072 12.4716 9.47072 12.2516 9.47072 11.9716V10.4716H7.97072C7.69072 10.4716 7.47072 10.2516 7.47072 9.97157C7.47072 9.69157 7.69072 9.47157 7.97072 9.47157H9.47072V7.97157Z" fill="black"/>
</mask>
<g mask="url(#mask0)">
<rect width="24" height="24" fill="#858C94"/>
</g>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9716 14.4716H15.1816L14.9016 14.2016C16.1016 12.8016 16.7216 10.8916 16.3816 8.86157C15.9116 6.08157 13.5916 3.86157 10.7916 3.52157C6.56157 3.00157 3.00157 6.56157 3.52157 10.7916C3.86157 13.5916 6.08157 15.9116 8.86157 16.3816C10.8916 16.7216 12.8016 16.1016 14.2016 14.9016L14.4716 15.1816V15.9716L18.7316 20.2216C19.1416 20.6316 19.8016 20.6316 20.2116 20.2216L20.2216 20.2116C20.6316 19.8016 20.6316 19.1416 20.2216 18.7316L15.9716 14.4716ZM9.97157 14.4716C7.48157 14.4716 5.47157 12.4616 5.47157 9.97157C5.47157 7.48157 7.48157 5.47157 9.97157 5.47157C12.4616 5.47157 14.4716 7.48157 14.4716 9.97157C14.4716 12.4616 12.4616 14.4716 9.97157 14.4716ZM12.4716 9.97157C12.4716 9.69157 12.2516 9.47157 11.9716 9.47157H7.97157C7.69157 9.47157 7.47157 9.69157 7.47157 9.97157C7.47157 10.2516 7.69157 10.4716 7.97157 10.4716H11.9716C12.2516 10.4716 12.4716 10.2516 12.4716 9.97157Z" fill="black"/>
</mask>
<g mask="url(#mask0)">
<rect width="24" height="24" fill="#858C94"/>
</g>
</svg>
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="4" width="26" height="26">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.48532 17.9605L8.48532 20.0111C8.48532 20.4495 7.94792 20.6758 7.62972 20.3576L4.59623 17.3241C4.39824 17.1261 4.39824 16.815 4.59623 16.617L7.62972 13.5835C7.94792 13.2653 8.48532 13.4916 8.48532 13.93L8.48532 15.9806L11.5542 15.9665C12.1057 15.9665 12.5583 16.419 12.5583 16.9706C12.5583 17.5221 12.1057 17.9747 11.5542 17.9747L8.48532 17.9605ZM15.9806 8.4853L13.93 8.4853C13.4916 8.4853 13.2654 7.9479 13.5836 7.6297L16.617 4.59621C16.815 4.39822 17.1262 4.39822 17.3242 4.59621L20.3576 7.6297C20.6758 7.9479 20.4496 8.4853 20.0112 8.4853L17.9605 8.4853L17.9747 11.5541C17.9747 12.1057 17.5221 12.5582 16.9706 12.5582C16.4191 12.5582 15.9665 12.1057 15.9665 11.5541L15.9806 8.4853ZM20.0112 25.4559L17.9605 25.4559L17.9747 22.387C17.9747 21.8355 17.5221 21.3829 16.9706 21.3829C16.4191 21.3829 15.9665 21.8355 15.9665 22.387L15.9806 25.4559L13.93 25.4559C13.4916 25.4559 13.2654 25.9933 13.5836 26.3115L16.617 29.3449C16.815 29.5429 17.1262 29.5429 17.3242 29.3449L20.3576 26.3115C20.6758 25.9933 20.4496 25.4559 20.0112 25.4559ZM25.4559 15.9806L25.4559 13.93C25.4559 13.4916 25.9933 13.2653 26.3115 13.5835L29.345 16.617C29.543 16.815 29.543 17.1261 29.345 17.3241L26.3115 20.3576C25.9933 20.6758 25.4559 20.4495 25.4559 20.0111L25.4559 17.9605L22.387 17.9747C21.8355 17.9747 21.3829 17.5221 21.3829 16.9706C21.3829 16.419 21.8355 15.9665 22.387 15.9665L25.4559 15.9806Z" fill="black"/>
</mask>
<g mask="url(#mask0)">
<rect y="16.9706" width="24" height="24" transform="rotate(-45 0 16.9706)" fill="#858C94"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.61 24.61"><defs><style>.cls-1{fill:#4896d6;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_contact"><circle class="cls-1" cx="12.3" cy="5.91" r="5.91"/><path class="cls-1" d="M7.05,13.78h10.5a7.05,7.05,0,0,1,7.05,7.05V21A3.62,3.62,0,0,1,21,24.61H3.62A3.62,3.62,0,0,1,0,21v-.15A7.05,7.05,0,0,1,7.05,13.78Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.61 24.61"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_contact_gray"><circle class="cls-1" cx="12.3" cy="5.91" r="5.91"/><path class="cls-1" d="M7.05,13.78h10.5a7.05,7.05,0,0,1,7.05,7.05V21A3.62,3.62,0,0,1,21,24.61H3.62A3.62,3.62,0,0,1,0,21v-.15A7.05,7.05,0,0,1,7.05,13.78Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18.45"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_display_off_chatroom"><path class="cls-1" d="M19.6,0,16.26,3.14A13.17,13.17,0,0,0,12,2.44C4.45,2.44,0,9,0,9a20.75,20.75,0,0,0,5.15,5.14L2.23,17l1.42,1.41L21,1.42Zm-6,5.78A4,4,0,0,0,8.32,11L6.6,12.69A17.93,17.93,0,0,1,2.54,9C4,7.38,7.35,4.44,12,4.44a11.36,11.36,0,0,1,2.6.31Zm-2.88,7.43,5.09-5A4,4,0,0,1,10.71,13.21ZM24,9s-4.25,7.45-12,7.45a10.86,10.86,0,0,1-3.86-.74l1.62-1.58a8.66,8.66,0,0,0,2.24.32c4.79,0,8.1-3.53,9.5-5.37a15.38,15.38,0,0,0-3.59-2.95l1.49-1.46A16.65,16.65,0,0,1,24,9Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.14 41"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px;}.cls-2{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_end_pip"><rect class="cls-1" x="26.07" y="23" width="25.57" height="16.5" rx="5.77"/><path class="cls-1" d="M50.58,19.2V9.9a8.48,8.48,0,0,0-8.51-8.4H10A8.48,8.48,0,0,0,1.5,9.9V31.1A8.48,8.48,0,0,0,10,39.5H22.08"/><rect class="cls-2" x="10.09" y="14.59" width="13.5" height="2.5" transform="translate(17.55 38.96) rotate(-135)"/><polyline class="cls-2" points="8.09 15.59 8.09 6.59 17.09 6.59"/></g></g></svg>
\ No newline at end of file
<svg width="45" height="32" viewBox="0 0 45 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.2339 13.8343C43.5133 12.8193 42.3788 12.1926 41.1482 12.1025V8.18508C41.1488 7.10104 40.7042 6.10532 39.9933 5.39684C39.2842 4.68598 38.2891 4.24195 37.2051 4.24248H19.3506C19.1313 4.24248 18.9185 4.1589 18.7569 4.00685L18.7581 4.00869L15.6208 1.06664C14.8895 0.381622 13.9257 6.37514e-07 12.924 6.37514e-07H7.79572C6.71168 -0.000614597 5.71597 0.444112 5.00748 1.15497C4.29662 1.86337 3.85198 2.85917 3.8526 3.94321V12.1025C2.62195 12.1926 1.48737 12.8193 0.766846 13.8349C0.262002 14.5464 0 15.3889 0 16.2391C0 16.7 0.0769043 17.1646 0.233789 17.6116L3.93838 28.2045C3.96009 28.2652 3.98224 28.3187 4.01054 28.3765C4.18061 28.7207 4.33925 29.059 4.51767 29.3968C4.78749 29.8973 5.09634 30.4321 5.65523 30.9032C5.93279 31.1346 6.27354 31.3328 6.64427 31.4584C7.01561 31.5853 7.40681 31.6405 7.79563 31.64H37.205C37.8468 31.6435 38.4513 31.4333 38.9056 31.1382C39.5954 30.6911 40.0034 30.1214 40.3146 29.6263C40.6205 29.1299 40.8327 28.6678 40.9661 28.4232C41.0088 28.3427 41.0317 28.2904 41.0616 28.2045L44.7668 17.611C44.9231 17.1645 45 16.7 45 16.2391C45 15.3889 44.7386 14.5464 44.2339 13.8343ZM38.0714 12.0844H6.92912V3.9433C6.92974 3.69932 7.02352 3.4926 7.18269 3.33035C7.34493 3.17109 7.55165 3.0774 7.79563 3.07679H12.9239C13.1444 3.07679 13.3552 3.16037 13.517 3.31119L16.6538 6.25272L16.6549 6.25447C17.3844 6.93651 18.3477 7.31927 19.3506 7.31927H37.205C37.449 7.3198 37.6562 7.41366 37.8179 7.57283C37.9772 7.73446 38.071 7.94118 38.0715 8.18517V12.0844H38.0714Z" fill="#707070"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.71 19.76"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_host_tag"><path class="cls-1" d="M3,16.8l1,3H19.76l1-3Zm13.85-2H14.4c3.46-4.56,3.33-8.44,1-8.8a2.11,2.11,0,0,0-2.57,2.2v6.6h-2V8.22A2.11,2.11,0,0,0,8.31,6c-2.32.36-2.46,4.24,1,8.8H6.9c-2.87-4.39-2.65-8-1-9.7A3.85,3.85,0,0,1,8.67,4a4.12,4.12,0,0,1,2.2.67,1.75,1.75,0,0,0-.47-1.31,2,2,0,1,1,2.91,0,1.76,1.76,0,0,0-.47,1.31A4.15,4.15,0,0,1,15.05,4a3.88,3.88,0,0,1,2.78,1.17C19.47,6.84,19.69,10.43,16.81,14.82Zm-12,0H2.12A9.1,9.1,0,0,1,0,9.39,4.81,4.81,0,0,1,.82,6.61,4,4,0,0,1,4.72,5a5.45,5.45,0,0,0-.83,1.93,1.9,1.9,0,0,0-1.45.8C1.45,9.16,2,12.07,4.76,14.82Zm19-5.43a9.1,9.1,0,0,1-2.12,5.43H19c2.8-2.75,3.31-5.66,2.32-7.09a1.88,1.88,0,0,0-1.45-.8A5.45,5.45,0,0,0,19,5,4,4,0,0,1,22.9,6.61,4.88,4.88,0,0,1,23.71,9.39Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.46 23.46"><defs><style>.cls-1{fill:#4896d6;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_join_room"><polygon class="cls-1" points="8.86 7.95 12.64 11.73 8.86 15.51 10.72 17.37 16.36 11.73 10.72 6.09 8.86 7.95"/><path class="cls-1" d="M11.73,0A11.73,11.73,0,1,0,23.46,11.73,11.73,11.73,0,0,0,11.73,0Zm7,18.72a9.9,9.9,0,1,1,2.89-7A9.85,9.85,0,0,1,18.72,18.72Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.39 24.19"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_make_room"><path class="cls-1" d="M26.39,17.64H22.64V13.89h-1.5v3.75H17.39v1.5h3.75v3.75h1.5V19.14h3.75Z"/><path class="cls-1" d="M16.48,19.35a13.29,13.29,0,0,1-3.19.41,18.78,18.78,0,0,1-4.83-.71,14.89,14.89,0,0,1-4.69,2,10.44,10.44,0,0,0,.66-4.69A7.75,7.75,0,0,1,2.2,11c0-4.85,4.93-8.8,11-8.8s11,4,11,8.8a7.21,7.21,0,0,1-.36,2.25,5.28,5.28,0,0,1,1.88,1.19A9.29,9.29,0,0,0,26.39,11c0-6.39-6.27-11-13.19-11S0,4.65,0,11a9.69,9.69,0,0,0,2.25,6.19c.06,2-1.12,4.9-2.19,7C2.92,23.67,7,22.53,8.83,21.4A18.86,18.86,0,0,0,13.3,22a15.69,15.69,0,0,0,4-.52A5.48,5.48,0,0,1,16.48,19.35Z"/><path class="cls-1" d="M18.69,9.35A1.65,1.65,0,1,0,20.34,11,1.65,1.65,0,0,0,18.69,9.35Z"/><path class="cls-1" d="M6.05,11A1.65,1.65,0,1,0,7.7,9.35,1.65,1.65,0,0,0,6.05,11Z"/><path class="cls-1" d="M11.55,11A1.65,1.65,0,1,0,13.2,9.35,1.65,1.65,0,0,0,11.55,11Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.34 30.89"><defs><style>.cls-1{fill:#29abe2;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_member_blue"><path class="cls-1" d="M30.89,30.89H28.32c0-4,.15-4.57-2.27-5.13-3.7-.85-7.2-1.66-8.47-4.45A5.35,5.35,0,0,1,18,16.4c2.63-5,3.29-9.22,1.81-11.68-1.73-2.87-7-2.89-8.71,0-1.49,2.5-.82,6.73,1.83,11.62a5.33,5.33,0,0,1,.44,4.91c-1.27,2.8-4.73,3.6-8.4,4.45-2.53.58-2.37,1.12-2.37,5.15H0v-1.6c0-3.24.26-5.11,4.09-6,4.33-1,8.61-1.89,6.55-5.68C4.55,6.37,8.9,0,15.44,0s10.88,6.13,4.81,17.6c-2,3.77,2.12,4.67,6.55,5.69S30.89,26.65,30.89,30.89ZM46.34,29.7c0-2.44-.19-3.84-3.07-4.51-3.32-.76-6.41-1.44-4.91-4.26,4.55-8.61,1.21-13.21-3.61-13.21-3.25,0-5.79,2.11-5.79,6,0,3.26,1.48,5.6,2.33,7.53H34c-.44-1.93-3.78-6.6-2-9.62,1.06-1.78,4.39-1.78,5.44,0s.46,4.67-1.37,8.14A4.63,4.63,0,0,0,35.77,24c.79,1.72,2.52,2.54,4.48,3.11,3.88,1.14,3.52.11,3.52,3.81h2.56Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.34 30.89"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_member_white"><path class="cls-1" d="M30.89,30.89H28.32c0-4,.15-4.57-2.27-5.13-3.7-.85-7.2-1.66-8.47-4.45A5.35,5.35,0,0,1,18,16.4c2.63-5,3.29-9.22,1.81-11.68-1.73-2.87-7-2.89-8.71,0-1.49,2.5-.82,6.73,1.83,11.62a5.33,5.33,0,0,1,.44,4.91c-1.27,2.8-4.73,3.6-8.4,4.45-2.53.58-2.37,1.12-2.37,5.15H0v-1.6c0-3.24.26-5.11,4.09-6,4.33-1,8.61-1.89,6.55-5.68C4.55,6.37,8.9,0,15.44,0s10.88,6.13,4.81,17.6c-2,3.77,2.12,4.67,6.55,5.69S30.89,26.65,30.89,30.89ZM46.34,29.7c0-2.44-.19-3.84-3.07-4.51-3.32-.76-6.41-1.44-4.91-4.26,4.55-8.61,1.21-13.21-3.61-13.21-3.25,0-5.79,2.11-5.79,6,0,3.26,1.48,5.6,2.33,7.53H34c-.44-1.93-3.78-6.6-2-9.62,1.06-1.78,4.39-1.78,5.44,0s.46,4.67-1.37,8.14A4.63,4.63,0,0,0,35.77,24c.79,1.72,2.52,2.54,4.48,3.11,3.88,1.14,3.52.11,3.52,3.81h2.56Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.45 16.64"><defs><style>.cls-1{fill:none;stroke:#707070;stroke-miterlimit:10;stroke-width:3px;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_movie"><rect class="cls-1" x="1.5" y="1.5" width="19.22" height="13.64" rx="1.15"/><polygon class="cls-1" points="30.95 12.97 24.44 11.11 24.44 5.53 30.95 3.67 30.95 12.97"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.26 31.72"><defs><style>.cls-1{fill:#707070;stroke:#707070;stroke-miterlimit:10;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_paste"><path class="cls-1" d="M.5,3.29V28.42a2.8,2.8,0,0,0,2.79,2.8H22a2.8,2.8,0,0,0,2.79-2.8V10.64a3,3,0,0,0-.9-2.17L16.79,1.4A3,3,0,0,0,14.62.5H3.29A2.79,2.79,0,0,0,.5,3.29ZM22.84,9.66H16.56c-.68,0-.95-.26-.95-.94V2.44ZM2.07,3.29A1.22,1.22,0,0,1,3.29,2.07H14.22V9.56a1.5,1.5,0,0,0,1.5,1.5h7.47V28.42A1.23,1.23,0,0,1,22,29.65H3.29a1.23,1.23,0,0,1-1.22-1.23Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.16 27.98"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_phone"><path class="cls-1" d="M24.88,13.22C24.88,5.92,19.31,0,12.44,0S0,5.92,0,13.22A13.88,13.88,0,0,0,.52,17a1.31,1.31,0,0,0,0,.52l1.21,5.56a1.34,1.34,0,0,0,1.59,1l1.6-.35,1-.22A1.34,1.34,0,0,0,7,22l-.19-.87-1-4.69a1.34,1.34,0,0,0-1.59-1l-.78.17a10.38,10.38,0,0,1-.26-2.32c0-5.47,4.19-9.92,9.33-9.92s9.33,4.45,9.33,9.92a10.38,10.38,0,0,1-.26,2.32h0l-.78-.17a1.34,1.34,0,0,0-1.59,1l-1,4.69-.19.87a1.33,1.33,0,0,0,1,1.59l1,.22,1.61.35a1.33,1.33,0,0,0,1.58-1l1.21-5.56a1.32,1.32,0,0,0,0-.52A14.27,14.27,0,0,0,24.88,13.22Z"/><rect class="cls-1" x="22.1" y="18.66" width="2.33" height="9.25" rx="1.09" transform="translate(5.31 -4.3) rotate(11.92)"/><rect class="cls-1" x="19.05" y="23.31" width="1.75" height="7.58" rx="0.82" transform="translate(47.03 7.18) rotate(90)"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.09 22.85"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_photo"><path class="cls-1" d="M0,0V22.85H28.09V0ZM2.79,20.06V2.79H25.3V20.06Z"/><path class="cls-1" d="M11.16,9.18A1.95,1.95,0,1,0,9.21,7.24,2,2,0,0,0,11.16,9.18Z"/><path class="cls-1" d="M16,8.48A1.18,1.18,0,0,0,15,9l-2.28,3.49a1,1,0,0,1-1.69,0,1.18,1.18,0,0,0-2,0l-3.85,6h18L17,9A1.18,1.18,0,0,0,16,8.48Z"/></g></g></svg>
\ No newline at end of file
<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 37.9688V7.03125" stroke="#707070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.84375 19.6875L22.5 7.03125L35.1562 19.6875" stroke="#707070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 40.7819V12.6569" stroke="#707070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.84375 25.3132L22.5 12.6569L35.1562 25.3132" stroke="#707070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.4375 7.03192H36.5625" stroke="#707070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.43 24.23"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_profile_chat"><path class="cls-1" d="M13.22,0C6.24,0,0,4.65,0,11a9.72,9.72,0,0,0,2.25,6.2c.07,2-1.12,4.91-2.19,7,2.87-.52,6.94-1.66,8.79-2.79C19,23.91,26.43,17.69,26.43,11,26.43,4.62,20.16,0,13.22,0ZM7.71,12.67A1.66,1.66,0,1,1,9.36,11,1.65,1.65,0,0,1,7.71,12.67Zm5.51,0A1.66,1.66,0,1,1,14.87,11,1.65,1.65,0,0,1,13.22,12.67Zm5.5,0A1.66,1.66,0,1,1,20.38,11,1.65,1.65,0,0,1,18.72,12.67Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.52 21.52"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_profile_phone"><path class="cls-1" d="M6.15,10.84a9.81,9.81,0,0,0,4.58,4.55.9.9,0,0,0,.46.09.89.89,0,0,0,.45-.15l2.94-2a.86.86,0,0,1,.43-.15.91.91,0,0,1,.46.07L21,15.64a.94.94,0,0,1,.56,1,5.64,5.64,0,0,1-1.87,3.51,5.56,5.56,0,0,1-3.71,1.4A15.93,15.93,0,0,1,0,5.59,5.61,5.61,0,0,1,4.91,0a.84.84,0,0,1,.58.12.9.9,0,0,1,.4.44L8.24,6.06a.87.87,0,0,1,.07.45A.86.86,0,0,1,8.16,7l-1.95,3a.93.93,0,0,0-.15.45,1,1,0,0,0,.09.47Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.52 23.52"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_profile_phone_white"><path class="cls-1" d="M7.15,11.84a9.81,9.81,0,0,0,4.58,4.55.9.9,0,0,0,.46.09.89.89,0,0,0,.45-.15l2.94-2a.86.86,0,0,1,.43-.15.91.91,0,0,1,.46.07L22,16.64a.94.94,0,0,1,.56,1,5.64,5.64,0,0,1-1.87,3.51,5.56,5.56,0,0,1-3.71,1.4A15.93,15.93,0,0,1,1,6.59,5.61,5.61,0,0,1,5.91,1a.84.84,0,0,1,.58.12.9.9,0,0,1,.4.44L9.24,7.06a.87.87,0,0,1,.07.45A.86.86,0,0,1,9.16,8l-1.95,3a.93.93,0,0,0-.15.45,1,1,0,0,0,.09.47Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.5 28.5"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#dd4545;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_record"><circle class="cls-1" cx="14.25" cy="14.25" r="14.25"/><circle class="cls-2" cx="14.25" cy="14.25" r="4.5"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.5 28.5"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#dd4545;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_record_disable"><circle class="cls-1" cx="14.25" cy="14.25" r="14.25"/><rect class="cls-2" x="9.75" y="9.75" width="9" height="9"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.5 25.83"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_room_menu"><path class="cls-1" d="M3.75,1A2.75,2.75,0,1,1,1,3.75,2.75,2.75,0,0,1,3.75,1m0-1A3.75,3.75,0,1,0,7.5,3.75,3.75,3.75,0,0,0,3.75,0Z"/><path class="cls-1" d="M3.75,10.17A2.75,2.75,0,1,1,1,12.92a2.75,2.75,0,0,1,2.75-2.75m0-1A3.75,3.75,0,1,0,7.5,12.92,3.75,3.75,0,0,0,3.75,9.17Z"/><path class="cls-1" d="M3.75,19.33A2.75,2.75,0,1,1,1,22.08a2.75,2.75,0,0,1,2.75-2.75m0-1A3.75,3.75,0,1,0,7.5,22.08a3.75,3.75,0,0,0-3.75-3.75Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.52 24.72"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_search"><path class="cls-1" d="M24.52,22.29,18.13,15.9A10,10,0,1,0,10,20a9.9,9.9,0,0,0,5.65-1.75l6.43,6.43ZM2.94,10A7.08,7.08,0,1,1,10,17.1,7.09,7.09,0,0,1,2.94,10Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.14 41"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px;}.cls-2{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_start_pip"><rect class="cls-1" x="26.07" y="23" width="25.57" height="16.5" rx="5.77"/><path class="cls-1" d="M50.58,19.2V9.9a8.48,8.48,0,0,0-8.51-8.4H10A8.48,8.48,0,0,0,1.5,9.9V31.1A8.48,8.48,0,0,0,10,39.5H22.08"/><rect class="cls-2" x="7" y="11" width="13.5" height="2.5" transform="translate(12.69 -6.13) rotate(45)"/><polyline class="cls-2" points="22.5 12.5 22.5 21.5 13.5 21.5"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.14 53.76"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_talking_white"><path class="cls-1" d="M2.87,13.63C0,15.5-.57,21.33.51,26.09A43,43,0,0,0,6.2,39.45a44.42,44.42,0,0,0,9.88,10.63C20,53,25.54,54.88,28.42,53a14.69,14.69,0,0,0,3.72-4l-1.55-2.39-4.26-6.56c-.31-.49-2.29,0-3.3.53a9.58,9.58,0,0,0-2.61,2.83c-.93.54-1.71,0-3.34-.74-2-.93-4.26-3.79-6-6.38-1.64-2.7-3.34-5.92-3.36-8.13,0-1.79-.19-2.73.68-3.36A9.66,9.66,0,0,0,12,23.61c.93-.69,2.15-2.32,1.83-2.81L9.58,14.24,8,11.86A14.5,14.5,0,0,0,2.87,13.63Z"/><path class="cls-1" d="M27,18.52A13.73,13.73,0,0,0,17.66,2.14L18.24,0a16,16,0,0,1,10.9,19.11Z"/><path class="cls-1" d="M22.35,17.25a8.91,8.91,0,0,0-6-10.46L17,4.65a11.12,11.12,0,0,1,7.52,13.19Z"/><path class="cls-1" d="M17.69,16a4.08,4.08,0,0,0-2.58-4.54L15.7,9.3a6.3,6.3,0,0,1,4.14,7.26Z"/></g></g></svg>
\ No newline at end of file
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="AV / videocam">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="8" width="24" height="16">
<g id="Icon Mask">
<path id="Round" d="M22.6667 14V9.33333C22.6667 8.6 22.0667 8 21.3333 8H5.33333C4.6 8 4 8.6 4 9.33333V22.6667C4 23.4 4.6 24 5.33333 24H21.3333C22.0667 24 22.6667 23.4 22.6667 22.6667V18L25.72 21.0533C26.56 21.8933 28 21.2933 28 20.1067V11.88C28 10.6933 26.56 10.0933 25.72 10.9333L22.6667 14Z" fill="black"/>
</g>
</mask>
<g mask="url(#mask0)">
<rect id="Color Fill" width="32" height="32" fill="#707070"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.2 25.83"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_voice_white"><path class="cls-1" d="M16.41,11v1.35a7.31,7.31,0,1,1-14.62,0V11H0v1.35a9.11,9.11,0,0,0,7.91,9v4.46h2.38V21.37a9.11,9.11,0,0,0,7.91-9V11Z"/><path class="cls-1" d="M9.1,16.4a4,4,0,0,0,4-4V4A4,4,0,0,0,5.06,4v8.32A4,4,0,0,0,9.1,16.4Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.78 25.68"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_voice_white_disable"><path class="cls-1" d="M18.74,12.59V11.28H17v1.31a7.15,7.15,0,0,1-.5,2.63l1.31,1.31A8.83,8.83,0,0,0,18.74,12.59Z"/><path class="cls-1" d="M7.12,4.51A2.77,2.77,0,0,1,9.89,1.74a2.72,2.72,0,0,1,2,.81,2.76,2.76,0,0,1,.81,2v6.87l1.71,1.71a4.07,4.07,0,0,0,0-.5V4.51a4.51,4.51,0,0,0-9-.39L7.12,5.84V4.51Z"/><path class="cls-1" d="M16.8,18.11l-1.24-1.24L13.7,15l-1.28-1.27-5.3-5.3L5.38,6.69,1.29,2.6,0,3.9,5.38,9.28v3.31a4.49,4.49,0,0,0,7,3.72l1.86,1.86a7.11,7.11,0,0,1-11.5-5.58V11.28H1.05v1.31a8.84,8.84,0,0,0,7.68,8.76v4.33h2.32V21.35a8.88,8.88,0,0,0,4.46-1.94l3,3,1.29-1.3ZM9.89,15.36a2.77,2.77,0,0,1-2.77-2.77V11l4,4A2.71,2.71,0,0,1,9.89,15.36Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.41 44.19"><defs><style>.cls-1,.cls-2{fill:#707070;}.cls-2{stroke:#707070;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="whiteboad_icon_gray"><path class="cls-1" d="M39.19,5V32.56H5V5H39.19m3-5H2A2,2,0,0,0,0,2V35.56a2,2,0,0,0,2,2H42.19a2,2,0,0,0,2-2V2a2,2,0,0,0-2-2Z"/><path class="cls-1" d="M62.41,44.19H44.54V25.74a3,3,0,0,1,3-3H59.41a3,3,0,0,1,3,3Z"/><circle class="cls-1" cx="53.48" cy="14.4" r="5.96"/><path class="cls-1" d="M49.93,30.49l-5.37,3.64a4.14,4.14,0,0,1-5-.41h0a2.49,2.49,0,0,1,.37-4l5.36-3.64a4.14,4.14,0,0,1,5,.41h0A2.49,2.49,0,0,1,49.93,30.49Z"/><path class="cls-1" d="M37.9,34.26l-5.1-4.42a2.66,2.66,0,0,1-.06-4.23h0a4.08,4.08,0,0,1,5,.19l5.1,4.43a2.67,2.67,0,0,1,.06,4.23h0A4.08,4.08,0,0,1,37.9,34.26Z"/><rect class="cls-2" x="17.93" y="17.93" width="15.47" height="2.21" rx="0.5" transform="translate(19.52 -12.32) rotate(42.35)"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.41 44.19"><defs><style>.cls-1,.cls-2{fill:#fff;}.cls-2{stroke:#fff;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="whiteboad_icon_white"><path class="cls-1" d="M39.19,5V32.56H5V5H39.19m3-5H2A2,2,0,0,0,0,2V35.56a2,2,0,0,0,2,2H42.19a2,2,0,0,0,2-2V2a2,2,0,0,0-2-2Z"/><path class="cls-1" d="M62.41,44.19H44.54V25.74a3,3,0,0,1,3-3H59.41a3,3,0,0,1,3,3Z"/><circle class="cls-1" cx="53.48" cy="14.4" r="5.96"/><path class="cls-1" d="M49.93,30.49l-5.37,3.64a4.14,4.14,0,0,1-5-.41h0a2.49,2.49,0,0,1,.37-4l5.36-3.64a4.14,4.14,0,0,1,5,.41h0A2.49,2.49,0,0,1,49.93,30.49Z"/><path class="cls-1" d="M37.9,34.26l-5.1-4.42a2.66,2.66,0,0,1-.06-4.23h0a4.08,4.08,0,0,1,5,.19l5.1,4.43a2.67,2.67,0,0,1,.06,4.23h0A4.08,4.08,0,0,1,37.9,34.26Z"/><rect class="cls-2" x="17.93" y="17.93" width="15.47" height="2.21" rx="0.5" transform="translate(19.52 -12.32) rotate(42.35)"/></g></g></svg>
\ No newline at end of file
// 名前空間
var ARCHIVE_UI = {};
document.addEventListener("DOMContentLoaded", function () {
// アーカイブ検索
bindArchiveSearch();
// iOSキーボード変換検知用
bindiOSKeyBoardEvent();
});
ARCHIVE_UI.refreshSearchScreen = function (keyword) {
const archiveList = CHAT_DB.getArchiveByName(keyword);
const typeImage = getArchiveTypeIconURL(archive.archiveType);
getArchiveTemplate().then(function (archiveTemplate) {
archiveList.forEach(function (archive) {
let html = renderArchiveTemplate(
archiveTemplate,
archive.archiveId,
archive.archiveName,
archive.archiveDate,
typeImage
);
let obj = jQuery.parseHTML(html);
$(".overlay_src_msg").append(obj);
});
});
};
//* UTILS *//
const ARCHIVE_TYPE = {
PICTURE: 0,
VIDEO: 1,
VOICE: 2,
DOCUMENT: 3,
};
var getArchiveTypeIconURL = function (type) {
switch (type) {
case ARCHIVE_TYPE.PICTURE:
return "icon/icon_collabo_picture.svg";
case ARCHIVE_TYPE.VIDEO:
return "icon/icon_collabo_videocam.svg";
case ARCHIVE_TYPE.VOICE:
return "icon/icon_collabo_headset.svg";
case ARCHIVE_TYPE.DOCUMENT:
return "icon/icon_collabo_document.svg";
default:
return "";
}
};
var getArchiveTemplate = function () {
return new Promise(function (resolve, reject) {
$.get({ url: TemplateURL.ARCHIVE_LIST, async: false }, function (text) {
resolve(text);
});
});
};
var bindArchiveSearch = function () {
const searchInput = $('#archive .search_form input[type="search"]');
searchInput.keyup(function (e) {
var keyword = searchInput.val();
const enterKeyPressed = e.KeyCode == 13 || e.key == "Enter";
const keywordEmpty = keyword == "" || keyword.length < 2;
const keywordNotEmpty = keyword.length != 0 && keyword != "";
if (enterKeyPressed) {
if (keywordNotEmpty) {
searchInput.blur();
return;
}
} else if (keywordEmpty) {
$(".overlay_src_msg").empty();
return;
}
$(".overlay_src_msg").empty();
ARCHIVE_UI.refreshSearchScreen(keyword);
if (enterKeyPressed) {
searchInput.blur();
return;
}
// 検索結果を表示
});
};
var bindiOSKeyBoardEvent = function () {
const searchInput = $('#archive .search_form input[type="search"]');
searchInput.on("compositionend", function () {
if (CHAT_UTIL.isIOS()) {
var keyword = searchInput.val();
$(".overlay_src_msg").empty();
ARCHIVE_UI.refreshSearchScreen(keyword);
}
});
};
var renderArchiveTemplate = function (
html,
archiveId,
archiveName,
archiveDate,
typeImageURL
) {
return Mustache.render(html, {
archiveId: archiveId,
fileName: archiveName,
insertDate: archiveDate,
typeImage: typeImageURL,
});
};
// 名前空間
var CHAT_UI = {};
includeJs("./js/chat-ui-clickEvents.js");
includeJs("./js/chat-ui-collaboration.js");
// Rotate
$(window).on("resize", function () {
if (CHAT_UTIL.isMobile()) {
return;
}
console.log(`width : ${$(this).width()}`);
console.log(`height : ${$(this).height()}`);
if (CHAT_UTIL.isIOS()) {
if (isLandscape == true) {
$(".mesgs").addClass("landscape_mesgs");
} else if (isLandscape == false) {
$(".mesgs").removeClass("landscape_mesgs");
}
}
});
//上にスクロールすると新しいメッセージを呼ぶ処理。
$("#messages").scroll(function () {
if ($(this).scrollTop() === 0) {
if (!$("#chatLoader").is(":visible")) {
// 現在、メッセージの個数以前をメッセージを読み込む
// ローディングアイコンを追加する
let loader = $(
'<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
);
$("#messages").prepend(loader);
loader.remove();
// socket.emit('getMessages', $(this).children().length, function() {
// // ローディングアイコンを削除する
// loader.remove();
// });
}
}
});
// UIの位置調整(キーボード出現時)
$("#message-form").on("focus", function () {
if (CHAT_UTIL.isIOS()) {
// メッセージ入力欄の位置指定
document.querySelector(".fixed-bottom").style.bottom = 10000 + "px";
setTimeout(function () {
document.querySelector(".fixed-bottom").style.bottom = 0 + "px";
}, 200);
}
});
CHAT_UI.setNavigationPosition = function (y) {
if (document.activeElement.id == "message-form") {
$(".navbar").css("position", "absolute");
$(".navbar").css("top", y + "px");
$(".tab-pane").css("margin-top", y + "px");
var height = document
.getElementById("messages")
.getBoundingClientRect().height;
$(".msg_history").css("height", height - y + "px");
} else if (document.activeElement.id == "message-search") {
$(".msg_history").css("height", "");
}
};
CHAT_UI.resetNavigationPosition = function () {
$(".navbar").css("position", "");
$(".navbar").css("top", "");
$(".tab-pane").css("margin-top", "");
$(".msg_history").css("height", "");
};
// 端末の向きを記録(キーボード出現時にLandscapeModeと判定する対策)
var isLandscape;
CHAT_UI.setOrientation = function (isLandscapeMode) {
if (isLandscapeMode == "false") {
$(".mesgs").removeClass("landscape_mesgs");
isLandscape = false;
} else {
$(".mesgs").addClass("landscape_mesgs");
isLandscape = true;
}
};
CHAT_UI.sendMessage = function (e) {
const messageTextBox = $("#messageInput");
const message =
messageTextBox.val().length > 0
? encodeURIComponent(messageTextBox.val())
: "";
messageTextBox.val("");
if (message.length > 0) {
socket.emit(
"createMessage",
{ text: message + messageSeperator + MessageType.TEXT },
0
);
}
$(".message_input_form").focus();
};
/* ---------------------------------------------------------------------- */
/* */
/* Etc */
/* */
/* ---------------------------------------------------------------------- */
// Tab Open/Shown Event
$('a[data-toggle="pill"]').on("show.bs.tab", function (e) {
var target = $(e.target).attr("href"); // e.target : activated tab
switch (target) {
case "#pills-chat":
if (CHAT_UI.isLandscapeMode()) {
$(".mesgs").addClass("landscape_mesgs");
} else {
$(".mesgs").removeClass("landscape_mesgs");
}
CHAT.globalIsInvite = true;
$(".chatRoomIcon, .titleRoomName, #backButton").show();
$(
".roomListIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn"
).hide();
$("#homeButton").hide();
$(".titleRoomName").text($(".titleRoomName").data("roomName"));
$("#newRoomName").val("");
$("#userSelectionLength").text("");
CHAT.globalSelectedUserList = [];
$("#bottomNav").hide();
$("#backButton")
.off()
.on("click", function () {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT.saveRoomInfo();
if (IS_ONLINE == "true") {
socket.emit("leaveRoom", function () {
if (typeof android != "undefined") {
android.updateRoomList();
} else {
webkit.messageHandlers.updateRoomList.postMessage({
groupId: "0",
});
}
});
}
CHAT_UI.refreshRoomList(ChatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
});
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
break;
case "#pills-chatlist":
$(".titleRoomName, #backButton").show();
$(
".chatRoomIcon, #backButton, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn"
).hide();
$("#homeButton").show();
$("#room-search").val("");
$("#room-search").show();
$("#room_list").show();
// set Title
let roomListTitle = getLocalizedString("roomListTitle");
$("#bottomNav").show();
$(".titleRoomName").text(roomListTitle);
$("#newRoomName").val("");
$("#userSelectionLength").text("");
CHAT.globalSelectedUserList = [];
break;
case "#pills-contact":
$("#myNamecard").html("");
$("#homeButton").show();
$("#backButton").hide();
$(".titleRoomName").show();
$("#myGroupArea").show();
$("#allGroupArea").hide();
$("#my_info").show();
$("#bottomNav").show();
break;
case "#pills-user":
$("#backButton").show();
$("#userSelectionDeleteBtn").hide();
$("#homeButton").hide();
$("#bottomNav").hide();
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
break;
case "#pills-group":
$("#backButton").show();
$("#userSelectionDeleteBtn").hide();
$("#homeButton").hide();
$("#bottomNav").hide();
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
break;
case "#pills-confirm":
$("#backButton").show();
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
$("#homeButton").hide();
$("#bottomNav").hide();
$(".user_people").css("paddingLeft", "0px");
break;
case "#pills-communication": // コミュニケーションのタブ
case "#pills-setting": // 設定のタブ
case "#pills-profile": // ユーザプロファイルのタブ
$("#bottomNav").hide();
$(".titleRoomName").show();
$(
".roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn"
).hide();
$("#backButton").hide();
break;
default:
$(".titleRoomName").show();
$(
".roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn"
).hide();
$("#backButton").hide();
break;
}
});
// Tab Close/Hidden Event
$('a[data-toggle="pill"]').on("hide.bs.tab", function (e) {
var target = $(e.target).attr("href"); // e.target : activated tab
switch (target) {
case "#pills-chat":
$("#message-search").val("");
break;
case "#pills-chatlist":
$("#room-search").val("");
$("#room-search").show();
break;
case "#pills-group":
$("#groupListKeyword").val("");
break;
case "#pills-contact":
break;
case "#pills-user":
$("#userListKeyword").val("");
break;
case "#pills-confirm":
$("#select_user_list").html("");
$("#selectUserListKeyword").val("");
$(".titleRoomName").show();
$(".user_people").css("paddingLeft", "12%");
break;
case "#pills-communication":
case "#pills-setting":
case "#pills-profile":
break;
default:
break;
}
});
$("#pills-chat-tab").on("shown.bs.tab", function (e) {
CHAT_UI.scrollToBottom();
});
$("#pills-user-tab").on("shown.bs.tab", function (e) {
$("#userSelectionConfirmBtn").show();
});
$("#pills-confirm-tab").on("shown.bs.tab", function (e) {
$("#userSelectionConfirmBtn").show();
$("#userSelectionLength").text("");
$("#userSelectionDeleteBtn").hide();
});
CHAT_UI.scrollToBottom = function () {
const messages = $(".room_contents");
const scrollHeight = messages.prop("scrollHeight");
//messages.scrollTop(scrollHeight);
$("html, body").animate(
{
scrollTop: scrollHeight,
},
100
);
};
CHAT_UI.scrollToLastMarkedUnseen = function (value) {
let target = $("[data-markjs=true]:not([data-seen=true])").last();
let messages = $("#messages");
if (target.length > 0) {
messages.scrollTop(
target.prop("offsetTop") -
target.prop("offsetHeight") -
messages.prop("offsetHeight") +
target.parent().parent().height()
);
target.attr("data-seen", true);
} else {
messages.scrollTop(0);
$(".message_content").unmark();
$(".message_content").mark(value);
}
};
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator = function () {
var h = $(window).height();
$("#loader-bg ,#loader").height(h).css("display", "block");
};
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator = function () {
var h = $(window).height();
$("#loader-bg ,#loader").height(h).css("display", "none");
};
//画面の方向をcheck
CHAT_UI.isLandscapeMode = function () {
if (CHAT_UTIL.isMobile()) {
return false;
}
return $(window).width() > $(window).height();
};
CHAT_UI.setConfirmButtonEvent = function (isInvite) {
let titleText = isInvite
? getLocalizedString("inviteUsersSubtitle")
: getLocalizedString("createRoomSubtitle");
let invitedUserText = getLocalizedString("invitedUser");
if (!isInvite) {
$("#newRoomName").show();
}
$("#userSelectionConfirmBtn")
.off()
.on("click", function (event) {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT_UI.showConfirmView(isInvite);
});
CHAT_UI.showConfirmView(isInvite);
$("#inviteStatus").text(titleText);
$("#invitedUsers").text(invitedUserText);
$("#pills-confirm-tab").tab("show");
};
//ConfirmView initialize
CHAT_UI.showConfirmView = function (isInvite) {
const template = $("#user-template").html();
$("#select_user_list").html("");
CHAT.globalSelectedUserList.forEach(function (user) {
let html = Mustache.render(template, {
id: user.shopMemberId,
profileImage: user.profileImagePath,
name: user.loginId,
});
// TODO 次のコミットに参考事項
// チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
// 影響テスト後、削除予定。 kang-dh
let obj = $(jQuery.parseHTML(html)).on("click", function () {
$(this).find(".userCheckBox").toggleClass("active");
});
$("#select_user_list").append(obj);
});
let roomListTitle = getLocalizedString("createRoomTitle");
$(".titleRoomName").text(roomListTitle);
// Rotate
if (CHAT_UI.isLandscapeMode()) {
$(".user_list").addClass("col-6").removeClass("col-12");
$(".squareBoxContent span").addClass("landscape_span");
}
$("#backButton")
.off()
.on("click", function () {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit("getGroupList", isInvite);
});
$("#userSelectionConfirmBtn")
.off()
.on("click", function () {
if (isInvite) {
let userIdList = jQuery
.makeArray($("#select_user_list .user_list").find(".userCheckBox"))
.map(function (e) {
return e.dataset.id;
});
// ユーザーの名前(login id)リスト。
let loginIdList = jQuery
.makeArray($("#select_user_list .user_list").find(".userCheckBox"))
.map(function (e) {
return e.dataset.name;
});
if (userIdList.length > 0 && loginIdList.length > 0) {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit("inviteUsers", userIdList, loginIdList, function () {
$("#userSelectionDeleteBtn").hide();
$("#pills-chat-tab").tab("show");
});
}
} else {
if (
$("#select_user_list .user_list").find(".userCheckBox").length > 0
) {
// #36130に対応
const trimmedRoomName = $("#newRoomName").val().trim();
if (trimmedRoomName.length == 0) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = jQuery
.makeArray(
$("#select_user_list .user_list").find(".userCheckBox")
)
.map(function (e) {
return e.dataset.id;
});
let userNameList = jQuery
.makeArray(
$("#select_user_list .user_list").find(".userCheckBox")
)
.map(function (e) {
return e.dataset.name;
});
//TODO DB作業が終わったら自分のユーザ名を表示するかを判断し、修正予定。
// 参加ユーザ名でルーム名を生成
let newRoomName =
CHAT.globalLoginParameter.loginId + "," + userNameList.join(",");
// ルーム名のURIencodingを行う
//const encodedRoomName = encodeURIComponent(newRoomName);
//todo android create room api
createChatRoom(
ChatRoomType.DM,
userIdList,
newRoomName,
MakeRoomFlag.MAKE_ROOM,
false
);
} else if (
trimmedRoomName.includes(";") ||
trimmedRoomName.includes("/") ||
trimmedRoomName.includes("?") ||
trimmedRoomName.includes(":") ||
trimmedRoomName.includes("@") ||
trimmedRoomName.includes("&") ||
trimmedRoomName.includes("=") ||
trimmedRoomName.includes("+") ||
trimmedRoomName.includes("$") ||
trimmedRoomName.includes(",") ||
trimmedRoomName.includes("-") ||
trimmedRoomName.includes("_") ||
trimmedRoomName.includes(".") ||
trimmedRoomName.includes("!") ||
trimmedRoomName.includes("~") ||
trimmedRoomName.includes("*") ||
trimmedRoomName.includes("'") ||
trimmedRoomName.includes("(") ||
trimmedRoomName.includes(")") ||
trimmedRoomName.includes("#") ||
trimmedRoomName.includes("\\") ||
trimmedRoomName.includes('"') ||
trimmedRoomName.includes("`")
) {
// #36147
// #36174
$("#customAlertTitle").text(getLocalizedString("invalidCharacter"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$("#customAlert")
.appendTo("body")
.modal({
backdrop: "static",
keyboard: false,
})
.on("click", "#customAlertOk", function (e) {});
} else if (trimmedRoomName.length > 20) {
// #36142
var inputText = $("#newRoomName").val().trim(); // #36142 文字列の前又は後の空白文字列を削除
// #36174
$("#customAlertTitle").text(getLocalizedString("nameTooLong"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$("#customAlert")
.appendTo("body")
.modal({
backdrop: "static",
keyboard: false,
})
.on("click", "#customAlertOk", function (e) {
$("#newRoomName").val(
inputText.substr(0, $("#newRoomName").prop("maxlength"))
);
});
} else {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = jQuery
.makeArray(
$("#select_user_list .user_list").find(".userCheckBox")
)
.map(function (e) {
return e.dataset.id;
});
// ルーム名のtrimmingした後、URIencodingを行う
const encodedRoomName = encodeURIComponent(trimmedRoomName);
createChatRoom(
ChatRoomType.DM,
userIdList,
encodedRoomName,
MakeRoomFlag.MAKE_ROOM,
false
);
}
}
}
});
$("#userSelectionDeleteBtn").hide();
$("#userSelectionDeleteBtn")
.off()
.on("click", function () {
// #36174
$("#customConfirmTitle").text(getLocalizedString("memberDeleteTitle"));
$("#customConfirmOk").text(getLocalizedString("roomDelete"));
$("#customAlertCancel").text(getLocalizedString("cancelTitle"));
$("#customConfirm")
.appendTo("body")
.modal({
backdrop: "static",
keyboard: false,
})
.on("click", "#customConfirmOk", function (e) {
CHAT_UI.deleteButtonAction(isInvite);
});
});
};
CHAT_UI.deleteButtonAction = function (isInvite) {
//配列の整理
jQuery
.makeArray($("#select_user_list .user_list").find(".userCheckBox.active"))
.map(function (e) {
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(
function (element) {
return e.dataset.name != element.loginId;
}
);
});
CHAT_UI.showConfirmView(isInvite);
$("#select_user_list .user_list").find(".userCheckBox").show();
};
var GetFileBlobUsingURL = function (url, convertBlob) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.addEventListener("load", function () {
console.log(xhr.response);
convertBlob(xhr.response);
});
xhr.send();
};
var blobToFile = function (blob, name) {
blob.lastModifiedDate = new Date();
blob.name = name;
return blob;
};
var GetFileObjectFromURL = function (filePathOrUrl, convertBlob) {
GetFileBlobUsingURL(filePathOrUrl, function (blob) {
convertBlob(blobToFile(blob, "testFile.mp4"));
});
};
CHAT_UI.videoEncodeFail = function () {
alert(getLocalizedString("error_send_video"));
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.videoEncodeEnd = function (encodedUri) {
var fileName = encodedUri.split("/")[encodedUri.split("/").length - 1];
var fileURL = "file:" + encodedUri;
var xhr = new XMLHttpRequest();
xhr.open("GET", fileURL);
xhr.responseType = "blob";
xhr.addEventListener("load", function () {
var formData = new FormData();
formData.append("image", xhr.response, fileName);
formData.append("sid", CHAT.globalLoginParameter.sid);
formData.append("roomId", CHAT.globalLoginParameter.roomId);
jQuery
.ajax({
async: true,
url: CMS_SERVER_URL + "/chatapi/file/upload",
type: "post",
data: formData,
contentType: false,
processData: false,
error: function () {
alert(getLocalizedString("error_send_video"));
CHAT_UI.dismissLoadingIndicator();
},
})
.done(function (res) {
if (CHAT_UTIL.isAndroid()) {
android.removeEncodedVideo(encodedUri);
}
var imgPath =
CMS_SERVER_URL +
"/chatapi/file/getImage?fileName=" +
res.fileName +
"&roomId=" +
CHAT.globalLoginParameter.roomId;
var imageName = res.fileName;
// uploadFileの判断
var extension = imageName
.substr(imageName.lastIndexOf(".") + 1)
.toLowerCase();
if (res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath =
CMS_SERVER_URL +
"/chatapi/file/getImage?fileName=" +
res.thumbImageFileName +
"&roomId=" +
CHAT.globalLoginParameter.roomId;
}
let downloadPath =
CMS_SERVER_URL +
"/chatapi/file/download?fileName=" +
imageName +
"&roomId=" +
CHAT.globalLoginParameter.roomId;
var videoSrc =
CMS_SERVER_URL +
"/chatapi/file/getImage?fileName=" +
res.fileName +
"&roomId=" +
CHAT.globalLoginParameter.roomId;
const totalDiv = $("<div/>", { id: "attachedImages" });
const videoTag = $("<video/>", {
controls: "true",
width: "auto",
style: "max-width:100%",
});
const source = $("<source/>", { src: videoSrc });
const downloadIcon = $("<a/>", {
href: downloadPath,
class: "fa fa-download",
download: res.fileName,
});
videoTag.append(source);
totalDiv.append(videoTag);
totalDiv.append(downloadIcon);
let text = totalDiv.prop("outerHTML");
let encodedText;
try {
encodedText = encodeURIComponent(text);
} catch (e) {
encodedText = text;
}
socket.emit(
"createMessage",
{
text: encodedText + messageSeperator + MessageType.VIDEO,
},
1
);
$(".overlay").removeClass("active undismissable");
$(".loader").removeClass("active");
CHAT_UI.dismissLoadingIndicator();
});
});
xhr.send();
};
CHAT_UI.htmlElementTextInitialize = function (languageCode) {
moment.locale(languageCode);
setLanguage(languageCode);
$(".titleRoomName").text(getLocalizedString("roomListTitle"));
$("#message-form").attr(
"placeholder",
getLocalizedString("chat_placeholder")
);
$("#message-search").attr(
"placeholder",
getLocalizedString("chat_search_placeholder")
);
$("#exitRoom")
.text(getLocalizedString("exitRoom"))
.append("<i class='fas fa-door-open'></i>");
$("#participants").text(getLocalizedString("participants"));
//$("#fileUploadButton").text(getLocalizedString("photo"))
//$("#fileUploadButton2").text(getLocalizedString("video"))
$("#okayLabel").text(getLocalizedString("okayLabel"));
$("#completeLabel").text(getLocalizedString("completeLabel"));
$("#thankLabel").text(getLocalizedString("thankLabel"));
$("#startToWorkLabel").text(getLocalizedString("startToWorkLabel"));
$("#groupListKeyword").attr("placeholder", getLocalizedString("groupSearch"));
$("#contactListKeyword").attr(
"placeholder",
getLocalizedString("contactSearch")
);
$("#room-search").attr(
"placeholder",
$("#room-search").attr("placeholder") +
getLocalizedString("room_search_placeholder")
);
$("#userListKeyword").attr("placeholder", getLocalizedString("userSearch"));
$("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"));
$("#dmBtn").text(getLocalizedString("directMessageChatRoom"));
$("#groupBtn").text(getLocalizedString("groupChatRoom"));
$("#myGroupBtn").text(getLocalizedString("myGroup"));
$("#allGroupBtn").text(getLocalizedString("allGroup"));
//$("#groupPathSeperator").text(getLocalizedString("groupPath"))
//$("#moveBtnSeperator").text(getLocalizedString("quickBtn"))
//$("#rootGroupBtn").text(getLocalizedString("returnToRootGroup"))
//$("#parentGroupBtn").text(getLocalizedString("returnToParentGroup"))
//$("#childGroupSeperator").text(getLocalizedString("childGroup"))
//$("#groupUserSeperator").text(getLocalizedString("groupUser"))
$("#favorite-seperator").text(getLocalizedString("favorite"));
$("#mygroup-seperator").text(getLocalizedString("mygroup"));
$(".ttl_archive").text(getLocalizedString("archive"));
$(".ttl_detail").text(getLocalizedString("detail"));
$("#archiveFileName").text(getLocalizedString("archiveFileName"));
$("#archiveInsertDate").text(getLocalizedString("archiveInsertDate"));
$("#archiveRoomName").text(getLocalizedString("archiveRoomName"));
$("#archiveSaveUser").text(getLocalizedString("archiveSaveUser"));
$("#archiveAttendUser").text(getLocalizedString("archiveAttendUser"));
};
// 画像の読み込みが全て終わったタイミングでコールバック実行
// FIXME 追加読み込みの場合は差分の画像のみ監視すべきだが、現状新規入室時にしか対応出来ていない。
CHAT_UI.waitForLoadingVideo = function (div, callback) {
CHAT_UI.showLoadingIndicator();
// var imgs = document.getElementsByTagName("video");
var video = div.find("video");
var count = video.length;
if (count == 0) callback();
var loaded = 0;
video.each(function () {
this.addEventListener("loadeddata", function (e) {
loaded++;
if (loaded === count) {
callback();
CHAT_UI.dismissLoadingIndicator();
}
});
});
};
CHAT_UI.waitForLoadingImage = function (div, callback) {
var imgs = div.find("img");
var count = imgs.length;
if (count == 0) callback();
var loaded = 0;
imgs
.one("load", function (e) {
// イメージが読み込まれた
loaded++;
if (loaded === count) {
callback();
}
})
.each(function () {
if (this.complete || this.readyState === readyState.COMPLETED) {
$(this).trigger("load");
}
});
};
CHAT_UI.refreshContactScreen = function () {
CHAT_UI.showLoadingIndicator();
$("#userNameCard").modal("hide");
$("#favoriteList").html("");
$("#myGroupList").html("");
//画面タイトル設定
let contactListTitle = getLocalizedString("contactListTitle");
$("#title").text(contactListTitle);
// グループの様式を読み込む
const groupTemplate = getTemplate(TemplateURL.GROUP_LIST);
// ユーザの様式を読み込む
var userTemplate = getTemplate(TemplateURL.USER_LIST);
var myNamecardTemplate = getTemplate(TemplateURL.MY_NAME_CARD);
var groupUserTemplate = getTemplate(TemplateURL.GROUP_USER_LIST);
updateContactInfo();
var myInfo = CHAT_DB.getMyInfo();
myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl);
let myNamecardHtml = Mustache.render(myNamecardTemplate, {
loginId: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName,
groupPathList: myInfo.groupPathList,
});
let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on(
"click",
function () {}
);
$("#myProfileModal").html(myNamecardObj);
$("#myName").text(myInfo.shopMemberName);
$("#myImg").attr("src", myInfo.profileImagePath);
//お気に入りグループ取得。
var favoriteGroupList = CHAT_DB.getFavoriteGroups();
favoriteGroupList.forEach(function (favoriteGroup) {
let html = Mustache.render(groupTemplate, {
name: favoriteGroup.groupName,
id: favoriteGroup.groupId,
isFavorite: true,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#favoriteList").append(obj);
});
//お気に入りユーザ取得。
var favoriteUserList = CHAT_DB.getFavoriteUsers();
favoriteUserList.forEach(function (favoriteUser) {
favoriteUser.profileUrl = CHAT.getProfileImgUrl(favoriteUser.profileUrl);
favoriteUser.isFavorite = true;
});
let html = Mustache.render(userTemplate, {
userList: favoriteUserList,
});
let obj = jQuery.parseHTML(html);
$("#favoriteList").append(obj);
var myGroupList = CHAT_DB.getMyGroupUsers();
myGroupList.forEach(function (myGroup) {
myGroup.groupUserList.forEach(function (groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl);
});
let html = Mustache.render(groupUserTemplate, {
groupName: myGroup.groupName,
groupUserList: myGroup.groupUserList,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#myGroupList").append(obj);
});
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.refreshRoomList = function (roomType) {
if (IS_ONLINE == "true") {
CHAT_UI.refreshForOnline();
} else {
CHAT_UI.refreshForOffline();
}
var beforeRoomType;
if (typeof android != "undefined") {
beforeRoomType = android.getBeforeRoomType();
} else {
beforeRoomType = CHAT_DB.getBeforeRoomType();
}
if (beforeRoomType != null) {
roomType = beforeRoomType;
if (typeof android != "undefined") {
android.clearBeforeRoomType();
} else {
webkit.messageHandlers.clearBeforeRoomType.postMessage({});
}
}
CHAT_UI.showLoadingIndicator();
if (roomType == ChatRoomType.DM) {
$("#tabDM").prop("checked", true);
} else {
$("#tabGroup").prop("checked", true);
}
if (IS_ONLINE == "true") {
if (typeof android != "undefined") {
android.updateRoomList();
} else {
webkit.messageHandlers.updateRoomList.postMessage({});
}
}
var rooms = CHAT_DB.getRoomList(roomType, null);
CHAT.globalIsInvite = false;
// #36146に対応
$("#groupChatList").empty();
$("#dmChatList").empty();
let roomListTitle = getLocalizedString("roomListTitle");
$("#chatTitle").text(roomListTitle);
if (rooms.length === 0) {
// 検索結果がない場合のメッセージを追加
let emptyListString = getLocalizedString("roomListEmptyString");
switch (roomType) {
case ChatRoomType.GROUP:
$("#groupChatList").append(
`<center class="text-secondary">${emptyListString}</center>`
);
break;
case ChatRoomType.DM:
$("#dmChatList").append(
`<center class="text-secondary">${emptyListString}</center>`
);
break;
default:
}
}
var template = getTemplate(TemplateURL.ROOM_LIST);
rooms.forEach(function (room) {
room.profileImagePath = ASSET_PATH + "images/user-profile.png";
if (room.message) {
room.message = room.message.toString();
} else {
room.message = getLocalizedString("noMessages");
}
var displayMsg;
//TODO 協業の場合処理追加必要
switch (room.messageType) {
case MessageType.TEXT:
displayMsg = room.message;
break;
case MessageType.IMAGE:
displayMsg = getLocalizedString("image");
break;
case MessageType.VIDEO:
displayMsg = getLocalizedString("video");
break;
case MessageType.COMMUNICATIONSTART:
displayMsg = getLocalizedString("collaboration_start");
break;
case MessageType.COMMUNICATIONEND:
displayMsg = getLocalizedString("collaboration_end");
break;
default:
break;
}
var attendUserName = [];
room.attendUsers.forEach(function (user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
attendUserName.push(user.shopMemberName);
});
var thumbnailCount =
room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
if (room.chatRoomName == "") {
room.chatRoomName = attendUserName.join(", ");
}
var unreadMessageCount = room.unreadCount == 0 ? "" : room.unreadCount;
if (unreadMessageCount > 999) {
unreadMessageCount = "999+";
}
let html = Mustache.render(template, {
thumbnailCount: thumbnailCount,
roomName: room.chatRoomName,
roomId: room.chatRoomId,
profileImage: room.profileImagePath,
lastMessage: displayMsg,
time: room.insertDate
? CHAT_UTIL.formatDate(room.insertDate).createdAt
: "",
unreadMsgCnt: unreadMessageCount,
userCnt: room.attendUsers.length + 1,
attendUsers: room.attendUsers,
});
// Click event
let obj = $(jQuery.parseHTML(html)).on("click", function () {
/* let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname');
CHAT_UI.joinRoom(roomId,roomName);*/
//TODO ルームに入る処理追加必要
});
// ルームグループごとに追加。
switch (roomType) {
case ChatRoomType.GROUP:
$("#groupChatList").append(obj);
break;
case ChatRoomType.DM:
$("#dmChatList").append(obj);
break;
default:
}
});
console.log("DONE");
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.joinRoom = function (roomId, roomName) {
//native側に入場対象のroomId,roomNameを保存。(ルーム詳細画面初期化の時に使用。)
if (typeof android != "undefined") {
try {
android.joinRoom(roomId, roomName);
} catch {
alert(getLocalizedString("err_not_exist_room"));
}
} else {
webkit.messageHandlers.joinRoom.postMessage({
roomId: roomId,
roomName: roomName,
});
}
};
CHAT_UI.loadMessages = function (roomId, joinRoomName) {
roomName = joinRoomName;
var now = new Date();
if (IS_ONLINE == "true") {
CHAT_UI.refreshForOnline();
if (typeof android != "undefined") {
android.updateMessages(roomId);
} else {
webkit.messageHandlers.updateMessages.postMessage(roomId);
}
} else {
CHAT_UI.refreshForOffline();
}
var roomType;
if (typeof android != "undefined") {
roomType = android.getRoomType();
} else {
roomType = CHAT_DB.getRoomType();
}
if (roomType == ChatRoomType.DM) {
$("#roomMenu").removeClass("none");
}
var messages = CHAT_DB.getMessages(roomId);
var usersInRoom = CHAT_DB.getUsersInRoom(roomId);
$("#roomTitle").text(roomName).data("roomName", roomName);
let jQueryMessages = $("#messages");
// スクロールの変化を防ぐため以前画面の高さを保存する
let beforeHeight = jQueryMessages.prop("scrollHeight");
var userTemplate = getTemplate(TemplateURL.USER_LIST);
var topUserListTemplate = getTemplate(TemplateURL.CHATROOM_USER_LIST);
var filterUserListTemplate = getTemplate(
TemplateURL.CHATROOM_USER_FILTER_LIST
);
usersInRoom.forEach(function (user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
});
let html = Mustache.render(topUserListTemplate, {
userList: usersInRoom,
});
let obj = jQuery.parseHTML(html);
$("#user_list").append(obj);
let filterHtml = Mustache.render(filterUserListTemplate, {
userList: usersInRoom,
});
let filterObj = jQuery.parseHTML(filterHtml);
$("#filter").append(filterObj);
CHAT_UI.prependMessage(messages);
CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
CHAT_UI.waitForLoadingVideo(jQueryMessages, CHAT_UI.scrollToBottom);
// ユーザ削除ボタン表示しない
$("#userSelectionDeleteBtn").hide();
if (CHAT_UTIL.isIOS()) {
$(window).on('load', function() {
CHAT_UI.scrollToBottom();
});
}
};
CHAT_UI.prependMessage = function(messages) {
var now = new Date();
let jQueryMessages = $("#messages");
// スクロールの変化を防ぐため以前画面の高さを保存する
let beforeHeight = jQueryMessages.prop("scrollHeight");
// メッセージ文字列の生成
let workVal = "";
var userTemplate = getTemplate(TemplateURL.USER_LIST);
var userMessageTemplate = getTemplate(TemplateURL.USER_MESSAGE);
var myMessageTemplate = getTemplate(TemplateURL.MY_MESSAGE);
var systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
var openCollaborationMessageTemplate = getTemplate(
TemplateURL.OPEN_COLLABORATION_MESSAGE
);
var checkBeforeDate = "";
var beforeDate = "";
messages.forEach(function (message) {
let template = userMessageTemplate;
if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
template = myMessageTemplate;
}
if (message.messageType == MessageType.SYSTEM) {
template = systemMessageTemplate;
}
if (
message.messageType == MessageType.COMMUNICATIONSTART ||
message.messageType == MessageType.COMMUNICATIONEND
) {
template = openCollaborationMessageTemplate;
}
let messageTime = CHAT_UTIL.formatDate(message.insertDate);
// ユーザの様式を読み込む
if (message.profileUrl) {
message.profileUrl = CHAT.getProfileImgUrl(message.profileUrl);
} else {
message.profileUrl = CHAT.getProfileImgUrl("");
}
// #36147
message.message = message.message.toString();
var replacePath = message.message;
replacePath = replacePath.replaceAll(
"?fileName=",
"?sid=" + CHAT.globalLoginParameter.sid + "&fileName="
);
message.message = replacePath;
/* if (message.message contain) {
}*/
var isOtherYear = false;
var isToday = false;
if (messageTime.createdAt.includes(":")) {
isToday = true;
}
if (now.getFullYear() != message.insertDate.substring(0, 4)) {
isOtherYear = true;
}
if (messageTime.createdAtDay != checkBeforeDate && checkBeforeDate != "") {
let messageDay = CHAT_UTIL.systemDay(beforeDate);
let html = Mustache.render(systemMessageTemplate, {
year: messageDay.year + getLocalizedString("year"),
month: messageDay.month + getLocalizedString("month"),
day: messageDay.day + getLocalizedString("day"),
dow: CHAT_UTIL.findDow(messageDay.dow),
});
workVal = html + workVal;
}
checkBeforeDate = messageTime.createdAtDay;
beforeDate = message.insertDate;
if (
message.messageType == MessageType.COMMUNICATIONSTART ||
message.messageType == MessageType.COMMUNICATIONEND
) {
var collaborationInfo;
var userInCollaboration;
if (CHAT_UTIL.isIOS()) {
collaborationInfo = JSON.parse(message.message);
userInCollaboration = JSON.parse(
CHAT_DB.getUserInfoList(collaborationInfo.userList)
);
} else if (CHAT_UTIL.isAndroid()) {
collaborationInfo = JSON.parse(message.message);
userInCollaboration = JSON.parse(
android.getUserInfoList(collaborationInfo.userList)
);
}
var meetingId = 0;
if (typeof collaborationInfo.meetingId != "undefined") {
meetingId = collaborationInfo.meetingId;
}
userInCollaboration.forEach(function (user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
});
let html = Mustache.render(template, {
messageId: message.messageId,
roomName: roomName,
userCount: userInCollaboration.length,
userList:
userInCollaboration.length > 3
? userInCollaboration.slice(0, 3)
: userInCollaboration,
insertDate: message.insertDate,
collaborationType: collaborationInfo.collaborationType,
meetingId: meetingId,
isToday: isToday,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime,
createdAtYear:
message.insertDate.substring(0, 4) + getLocalizedString("year") + " ",
isOtherYear: isOtherYear,
isEnded:
message.messageType == MessageType.COMMUNICATIONEND ? true : false,
});
html =
message.message.includes("attachedImages") ||
message.message.includes("attachedVideos")
? CHAT_UTIL.htmlDecode(html)
: html;
workVal = html + workVal;
} else {
let html = Mustache.render(template, {
text: message.message,
from: message.loginId,
messageId: message.messageId,
shopMemberId: message.shopMemberId,
profileImage: message.profileUrl,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime,
createdAtYear:
message.insertDate.substring(0, 4) + getLocalizedString("year") + " ",
unreadCount: message.unreadCount,
isOtherYear: isOtherYear,
isToday: isToday,
});
html =
message.message.includes("attachedImages") ||
message.message.includes("attachedVideos")
? CHAT_UTIL.htmlDecode(html)
: html;
workVal = html + workVal;
}
});
// メッセージの画面描画
jQueryMessages.prepend(workVal);
}
CHAT_UI.roomDisplayOff = function () {
if (typeof android != "undefined") {
android.roomDisplayOff();
} else {
webkit.messageHandlers.roomDisplayOff.postMessage({});
}
};
CHAT_UI.favoriteUserChange = function (shopMemberId, star) {
if ($(star).hasClass("active")) {
CHAT_UI.removeFavoriteUser(shopMemberId);
} else if ($(star).hasClass("disable")) {
CHAT_UI.insertFavoriteUser(shopMemberId);
}
};
CHAT_UI.favoriteGroupChange = function (groupId, star) {
if ($(star).hasClass("active")) {
CHAT_UI.removeFavoriteGroup(groupId);
} else if ($(star).hasClass("disable")) {
CHAT_UI.insertFavoriteGroup(groupId);
}
};
CHAT_UI.removeFavoriteUser = function (shopMemberId) {
CHAT_UI.showLoadingIndicator();
$("#userNameCard").modal("hide");
$("#myNameCard").modal("hide");
var result;
if (typeof android != "undefined") {
result = android.removeFavoriteUser(shopMemberId);
} else {
result = CHAT_DB.removeFavoriteUser(shopMemberId);
}
if (!result) {
$(".shopmember_" + shopMemberId).addClass("active");
$(".shopmember_" + shopMemberId).removeClass("disable");
} else {
$(".shopmember_" + shopMemberId).removeClass("active");
$(".shopmember_" + shopMemberId).addClass("disable");
}
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.insertFavoriteUser = function (shopMemberId) {
$("#userNameCard").modal("hide");
$("#myNameCard").modal("hide");
var result;
if (typeof android != "undefined") {
result = android.addFavoriteUser(shopMemberId);
} else {
result = CHAT_DB.addFavoriteUser(shopMemberId);
}
if (!result) {
$(".shopmember_" + shopMemberId).addClass("disable");
$(".shopmember_" + shopMemberId).removeClass("active");
CHAT_UI.dismissLoadingIndicator();
return;
} else {
$(".shopmember_" + shopMemberId).removeClass("disable");
$(".shopmember_" + shopMemberId).addClass("active");
}
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.removeFavoriteGroup = function (groupId) {
CHAT_UI.showLoadingIndicator();
var result;
if (typeof android != "undefined") {
result = android.removeFavoriteGroup(groupId);
} else {
result = CHAT_DB.removeFavoriteGroup(groupId);
}
if (!result) {
$(".group_" + groupId).addClass("active");
$(".group_" + groupId).removeClass("disable");
} else {
$(".group_" + groupId).removeClass("active");
$(".group_" + groupId).addClass("disable");
}
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.insertFavoriteGroup = function (groupId) {
CHAT_UI.showLoadingIndicator();
var result;
if (typeof android != "undefined") {
result = android.addFavoriteGroup(groupId);
} else {
result = CHAT_DB.addFavoriteGroup(groupId);
}
if (!result) {
$(".group_" + groupId).addClass("disable");
$(".group_" + groupId).removeClass("active");
} else {
$(".group_" + groupId).removeClass("disable");
$(".group_" + groupId).addClass("active");
}
CHAT_UI.dismissLoadingIndicator();
};
//全グループ検索画面表示。
CHAT_UI.refreshAllGroupSearch = function (paramGroupId) {
var groupId = paramGroupId;
if (window.location.pathname.includes("chat_room")) {
if (groupId == "") return;
if (typeof android != "undefined") {
android.setToMoveGroupId(groupId);
} else {
webkit.messageHandlers.setToMoveGroupId.postMessage(groupId);
}
window.location.href = "contact.html";
}
CHAT_UI.showLoadingIndicator();
$("#userNameCard").modal("hide");
$(".cancel").addClass("none");
$(".search_form input").removeClass("focus");
$(".search_form input").val("");
$(".search_form form").removeClass();
$(".content").removeClass("none");
$(".overlay_src_msg").empty();
$("#contactSearch").attr(
"placeholder",
getLocalizedString("searchUserAndGroup")
);
$("#tabAllGroup").prop("checked", true);
//オンライン状態であればサーバから情報更新。
updateGroupInfo(groupId);
//画面エリアを初期化。
$("#rootGroupBtn").off();
$("#parentGroupBtn").off();
$("#childGroupListArea").html("");
$("#userInGroupList").html("");
$("#groupPathArea").html("");
//DBからグループ情報を取得。
var result = CHAT_DB.getGroupInfo(groupId);
//上位グループ、トップグループ遷移ボタンのイベント追加。
if (typeof result.parentGroupId !== "undefined") {
$("#parentGroupBtn").on("click", function () {
CHAT_UI.refreshAllGroupSearch(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== "undefined") {
if (paramGroupId == 0) {
groupId = result.rootGroupId;
}
$("#rootGroupBtn").on("click", function () {
CHAT_UI.refreshAllGroupSearch(result.rootGroupId);
});
}
if (groupId == result.rootGroupId || paramGroupId == "0") {
$("#rootGroupArea").addClass("none");
$("#parentGroupArea").addClass("none");
} else {
$("#rootGroupArea").removeClass("none");
$("#parentGroupArea").removeClass("none");
}
//該当グループのパースを表示。
const groupPathTemplate = getTemplate(TemplateURL.GROUP_PATH);
result.groupPathList.forEach(function (groupPath) {
let html = Mustache.render(groupPathTemplate, {
name: groupPath.groupName,
id: groupPath.groupId,
});
let obj = jQuery.parseHTML(html);
$("#groupPathArea").append(obj);
});
//該当グループの下位グループ表示。
const groupTemplate = getTemplate(TemplateURL.GROUP_LIST);
result.childGroupList.forEach(function (childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId,
isFavorite: childGroup.isFavorite,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#childGroupListArea").append(obj);
});
//該当グループの所属ユーザを表示。
const userTemplate = getTemplate(TemplateURL.USER_LIST);
result.groupUserList.forEach(function (groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl);
});
let html = Mustache.render(userTemplate, {
userList: result.groupUserList,
});
let obj = jQuery.parseHTML(html);
$("#userInGroupList").append(obj);
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.startChat = function (userShopMemberId, userName) {
CHAT_UI.showLoadingIndicator();
var userIdList = [];
userIdList.push(userShopMemberId);
// 参加ユーザ名でルーム名を生成
let newRoomName = CHAT.globalLoginParameter.loginId + "," + userName;
createChatRoom(
ChatRoomType.DM,
userIdList,
newRoomName,
MakeRoomFlag.NAME_CARD,
false
);
};
CHAT_UI.startVoice = function (userShopMemberId, userName) {
CHAT_UI.showLoadingIndicator();
var userIdList = [];
userIdList.push(userShopMemberId);
// 参加ユーザ名でルーム名を生成
let newRoomName = CHAT.globalLoginParameter.loginId + "," + userName;
createChatRoom(
ChatRoomType.DM,
userIdList,
newRoomName,
MakeRoomFlag.NAME_CARD,
true
);
};
CHAT_UI.makeNameCard = function (shopMemberId) {
if (CHAT.globalLoginParameter.shopMemberId == shopMemberId) {
return;
}
var nameCardInfo = CHAT_DB.getNameCardData(shopMemberId);
var namecardTemplate = getTemplate(TemplateURL.USER_NAME_CARD);
nameCardInfo.profileUrl = CHAT.getProfileImgUrl(nameCardInfo.profileUrl);
let namecardHtml = Mustache.render(namecardTemplate, {
shopMemberId: nameCardInfo.shopMemberId,
profileUrl: nameCardInfo.profileUrl,
name: nameCardInfo.shopMemberName,
groupPathList: nameCardInfo.groupPathList,
chat: getLocalizedString("chat"),
voice: getLocalizedString("voice"),
favorite: getLocalizedString("addFavorite"),
isFavorite: nameCardInfo.isFavorite,
});
let namecardObj = $(jQuery.parseHTML(namecardHtml)).on(
"click",
function () {}
);
$("#userProfileModal").html(namecardObj);
$("#userNameCard").modal("show");
};
CHAT_UI.toggleCategory = function (category) {
$(category).toggleClass("open");
$(category).next().slideToggle();
};
// アーカイブ詳細
CHAT_UI.refreshArchiveDetailScreen = function (archiveId) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
// 初期化
$("#archiveDetail").html("");
// アーカイブ詳細の様式を読み込む
const archiveDetailTemplate = $("#archive-detail-template").html();
if (IS_ONLINE == "true") {
CHAT_DB.updateArchiveDetail(archiveId);
}
// アーカイブ詳細取得
const archive = CHAT_DB.getArchiveDetail(archiveId);
// 保存ユーザ情報を取得
const userInfo = CHAT_DB.getUserInfo(archive.saveUserId);
userInfo.profileUrl = CHAT.getProfileImgUrl(userInfo.profileUrl);
// アーカイブ情報を表示
const html = Mustache.render(archiveDetailTemplate, {
fileName: archive.archiveName,
insertDate: archive.archiveDate,
chatRoomName: archive.roomName,
chatRoomId: archive.roomId,
profileImage: userInfo.profileUrl,
userName: userInfo.shopMemberName,
userId: userInfo.shopMemberId,
});
var obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#archiveDetail").append(obj);
// プレイヤーの切り替え
const archiveFilePath = CHAT.createGetDataUrl(archive.filePath, archive.roomId);
switch (archive.archiveType) {
case "0": // 画像
case 0:
$("#archive_player").prepend(
'<img class="archive_player" src="' + archiveFilePath + '" />'
);
break;
case "1": // 動画
case 1:
if (CHAT_UTIL.isIOS()) {
$("#archive_player").prepend(
'<video class="archive_player" controls autoplay muted playsinline controlsList="nodownload"><source src="' +
archiveFilePath +
'" type="video/mp4"><source src="' +
archiveFilePath +
'" type="video/ogv"><source src="' +
archiveFilePath +
'" type="video/webm"></video>'
);
} else {
$("#archive_player").prepend(
'<video class="archive_player" src=' +
archiveFilePath +
' controls autoplay muted playsinline controlsList="nodownload"></video>'
);
}
break;
case "2": // 音声
case 2:
if (CHAT_UTIL.isIOS()) {
$("#archive_player").prepend(
'<audio class="archive_audio_player" controls controlsList="nodownload"><source src="' +
archiveFilePath +
'" type="audio/wav"><source src="' +
archiveFilePath +
'" type="audio/ogg"></audio>'
);
} else {
$("#archive_player").prepend(
'<audio class="archive_audio_player" src=' +
archiveFilePath +
' controls controlsList="nodownload"></audio>'
);
}
$("#archive_player").prepend(
'<img class="archive_player" src=' + "./img/capture.png" + " />"
);
break;
case "3": // 文書
case 3:
// リリースに文書とその他は含めないため今回は非表示
break;
default:
// リリースに文書とその他は含めないため今回は非表示
}
// ユーザの様式を読み込む
const archiveUserTemplate = $("#archive-user-template").html();
// 参加ユーザ情報を表示
let attendUserList = archive.attendUserIds;
if (typeof android != "undefined") {
// ios実装不要
attendUserList = JSON.parse(archive.attendUserIds);
}
attendUserList.forEach(function (user) {
if (user == "") { return; }
var userInfo = CHAT_DB.getUserInfo(user);
userInfo.profileUrl = CHAT.getProfileImgUrl(userInfo.profileUrl);
const html = Mustache.render(archiveUserTemplate, {
profileImage: userInfo.profileUrl,
userName: userInfo.shopMemberName,
});
const obj = $(jQuery.parseHTML(html)).on("click", function () {
// ネームカード表示
CHAT_UI.makeNameCard(user);
});
$("#attendUser").append(obj);
});
CHAT_UI.htmlElementTextInitialize(navigator.language);
// チャットルームへのリンク付け
document.getElementById("joinChatRoom").onclick = function () {
CHAT_UI.joinRoom(archive.roomId, archive.roomName);
};
// loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.refreshMyGroupForMakeRoom = function () {
$(".modal-backdrop").remove();
$("#favoriteListForMakeRoom").html("");
$("#myGroupListForMakeRoom").html("");
//画面タイトル設定
let contactListTitle = getLocalizedString("userSearch");
$("#title").text(contactListTitle);
// グループの様式を読み込む
var groupTemplate = getTemplate(TemplateURL.MAKE_ROOM_GROUP_LIST);
// ユーザの様式を読み込む
var userTemplate = getTemplate(TemplateURL.MAKE_ROOM_USER_LIST);
var groupUserTemplate = getTemplate(TemplateURL.MAKE_ROOM_GROUP_USER_LIST);
updateContactInfo();
//お気に入りグループ取得。
var favoriteGroupList = CHAT_DB.getFavoriteGroups();
favoriteGroupList.forEach(function (favoriteGroup) {
let html = Mustache.render(groupTemplate, {
name: favoriteGroup.groupName,
id: favoriteGroup.groupId,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#favoriteListForMakeRoom").append(obj);
});
//お気に入りユーザ取得。
var favoriteUserList = CHAT_DB.getFavoriteUsers();
favoriteUserList.forEach(function (favoriteUser) {
favoriteUser.profileUrl = CHAT.getProfileImgUrl(favoriteUser.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
return shopMemberId == favoriteUser.shopMemberId;
});
if (findObj) {
favoriteUser.checked = "checked";
}
});
let html = Mustache.render(userTemplate, {
userList: favoriteUserList,
});
let obj = jQuery.parseHTML(html);
$("#favoriteListForMakeRoom").append(obj);
var myGroupList = CHAT_DB.getMyGroupUsers();
myGroupList.forEach(function (myGroup) {
myGroup.groupUserList.forEach(function (groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
});
if (findObj) {
groupUser.checked = "checked";
}
});
let html = Mustache.render(groupUserTemplate, {
groupName: myGroup.groupName,
groupUserList: myGroup.groupUserList,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#myGroupListForMakeRoom").append(obj);
});
};
CHAT_UI.refreshAllGroupForMakeRoom = function (paramGroupId) {
var groupId = paramGroupId;
$(".cancel").addClass("none");
$(".search_form input").removeClass("focus");
$(".search_form input").val("");
$(".search_form form").removeClass();
$(".content").removeClass("none");
$(".overlay_src_msg").empty();
$("#tabAllGroupOnMakeRoom").prop("checked", true);
//オンライン状態であればサーバから情報更新。
updateGroupInfo(groupId);
//画面エリアを初期化。
$("#parentGroupBtnForMakeRoom").off();
$("#rootGroupBtnForMakeRoom").off();
$("#childGroupListAreaForMakeRoom").html("");
$("#userInGroupListForMakeRoom").html("");
$("#groupPathAreaForMakeRoom").html("");
//DBからグループ情報を取得。
var result = CHAT_DB.getGroupInfo(groupId);
//上位グループ、トップグループ遷移ボタンのイベント追加。
if (typeof result.parentGroupId !== "undefined") {
$("#parentGroupBtnForMakeRoom").on("click", function () {
CHAT_UI.refreshAllGroupForMakeRoom(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== "undefined") {
if (paramGroupId == 0) {
groupId = result.rootGroupId;
}
$("#rootGroupBtnForMakeRoom").on("click", function () {
CHAT_UI.refreshAllGroupForMakeRoom(result.rootGroupId);
});
}
if (groupId == result.rootGroupId || paramGroupId == "0") {
$("#rootGroupArea").addClass("none");
$("#parentGroupArea").addClass("none");
} else {
$("#rootGroupArea").removeClass("none");
$("#parentGroupArea").removeClass("none");
}
//該当グループのパースを表示。
var groupPathTemplate = getTemplate(TemplateURL.MAKE_ROOM_GROUP_PATH);
var groupPathCount = 0;
result.groupPathList.forEach(function (groupPath) {
if (!(groupPathCount < result.groupPathList.length - 3)) {
let html = Mustache.render(groupPathTemplate, {
name: groupPath.groupName,
id: groupPath.groupId,
});
let obj = jQuery.parseHTML(html);
$("#groupPathAreaForMakeRoom").append(obj);
}
groupPathCount++;
});
//該当グループの下位グループ表示。
var groupTemplate = getTemplate(TemplateURL.MAKE_ROOM_GROUP_LIST);
result.childGroupList.forEach(function (childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#childGroupListAreaForMakeRoom").append(obj);
});
//該当グループの所属ユーザを表示。
var userTemplate = getTemplate(TemplateURL.MAKE_ROOM_USER_LIST);
result.groupUserList.forEach(function (groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
});
if (findObj) {
groupUser.checked = "checked";
}
});
let html = Mustache.render(userTemplate, {
userList: result.groupUserList,
});
let obj = jQuery.parseHTML(html);
$("#userInGroupListForMakeRoom").append(obj);
};
CHAT_UI.checkForMakeChat = function (checkMemberId) {
let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
return shopMemberId == checkMemberId;
});
if (findObj) {
// remove
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function (
shopMemberId
) {
return checkMemberId != shopMemberId;
});
$(".checkbox" + checkMemberId)
.prop("checked", false)
.trigger("change");
} else {
// add
CHAT.globalSelectedUserList.push(checkMemberId);
$(".checkbox" + checkMemberId)
.prop("checked", true)
.trigger("change");
}
let cnt = CHAT.globalSelectedUserList.length;
if (CHAT.globalSelectedUserList.length > 0) {
$(".select_member_num").text(cnt);
} else {
$(".select_member_num").text("0");
}
};
// アーカイブ一覧
CHAT_UI.refreshArchiveScreen = function () {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
// 初期化
$("#archiveList").html("");
// アーカイブの様式を読み込む
const archiveTemplate = $("#archive-template").html();
// アーカイブ一覧取得
if (IS_ONLINE == "true") {
CHAT_DB.updateArchiveList();
}
// ローカルDBのデータを表示
var archiveList = CHAT_DB.getArchiveList();
if (typeof archiveList == "undefined") {
CHAT_UI.dismissLoadingIndicator();
return;
}
archiveList.forEach(function (archive) {
var typeImage = "";
switch (archive.archiveType) {
case 0: // 画像
typeImage = "icon/icon_collabo_picture.svg";
break;
case 1: // 動画
typeImage = "icon/icon_collabo_videocam.svg";
break;
case 2: // 音声
typeImage = "icon/icon_collabo_headset.svg";
break;
case 3: // 文書
typeImage = "icon/icon_collabo_document.svg";
break;
default:
// その他
typeImage = "";
}
let html = Mustache.render(archiveTemplate, {
archiveId: archive.archiveId,
fileName: archive.archiveName,
insertDate: archive.archiveDate,
typeImage: typeImage,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#archiveList").append(obj);
});
// loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.showMakeRoomConfirmView = function () {
$("#selectedUserList").html("");
var userTemplate = getTemplate(TemplateURL.MAKE_ROOM_CONFIRM_USER_LIST);
var selectedUserList = CHAT_DB.loadSelectedUsers();
selectedUserList.forEach(function (user) {
let html = Mustache.render(userTemplate, {
id: user.shopMemberId,
profileImage: CHAT.getProfileImgUrl(user.profileUrl),
name: user.shopMemberName,
});
let obj = jQuery.parseHTML(html);
$("#selectedUserList").append(obj);
});
$("#makeRoomBtn")
.off()
.on("click", function () {
// #36130に対応
const trimmedRoomName = $("#newRoomName").val().trim();
if (trimmedRoomName.length == 0) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = new Array();
let userNameList = new Array();
selectedUserList.forEach(function (user) {
userIdList.push(user.shopMemberId);
userNameList.push(user.shopMemberName);
});
// 参加ユーザ名でルーム名を生成
let newRoomName =
CHAT.globalLoginParameter.loginId + "," + userNameList.join(",");
createChatRoom(
ChatRoomType.DM,
userIdList,
newRoomName,
MakeRoomFlag.MAKE_ROOM,
false
);
} else if (
trimmedRoomName.includes(";") ||
trimmedRoomName.includes("/") ||
trimmedRoomName.includes("?") ||
trimmedRoomName.includes(":") ||
trimmedRoomName.includes("@") ||
trimmedRoomName.includes("&") ||
trimmedRoomName.includes("=") ||
trimmedRoomName.includes("+") ||
trimmedRoomName.includes("$") ||
trimmedRoomName.includes(",") ||
trimmedRoomName.includes("-") ||
trimmedRoomName.includes("_") ||
trimmedRoomName.includes(".") ||
trimmedRoomName.includes("!") ||
trimmedRoomName.includes("~") ||
trimmedRoomName.includes("*") ||
trimmedRoomName.includes("'") ||
trimmedRoomName.includes("(") ||
trimmedRoomName.includes(")") ||
trimmedRoomName.includes("#") ||
trimmedRoomName.includes("\\") ||
trimmedRoomName.includes('"') ||
trimmedRoomName.includes("`")
) {
// #36147
// #36174
$("#customAlertTitle").text(getLocalizedString("invalidCharacter"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$("#customAlert")
.appendTo("body")
.modal({
backdrop: "static",
keyboard: false,
})
.on("click", "#customAlertOk", function (e) {});
} else if (trimmedRoomName.length > 20) {
// #36142
var inputText = $("#newRoomName").val().trim(); // #36142 文字列の前又は後の空白文字列を削除
// #36174
$("#customAlertTitle").text(getLocalizedString("nameTooLong"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$("#customAlert")
.appendTo("body")
.modal({
backdrop: "static",
keyboard: false,
})
.on("click", "#customAlertOk", function (e) {
$("#newRoomName").val(
inputText.substr(0, $("#newRoomName").prop("maxlength"))
);
});
} else {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = new Array();
selectedUserList.forEach(function (user) {
userIdList.push(user.shopMemberId);
});
// TODO: check why here using trimmedroomname instead of encodedRoomName
// ルーム名のtrimmingした後、URIencodingを行う
const encodedRoomName = encodeURIComponent(trimmedRoomName);
createChatRoom(
ChatRoomType.DM,
userIdList,
trimmedRoomName,
MakeRoomFlag.MAKE_ROOM,
false
);
}
});
};
CHAT_UI.showAddUserConfirmView = function () {
$("#selectedUserList").html("");
var userTemplate = getTemplate(TemplateURL.ADD_USER_CONFIRM_USER_LIST);
var selectedUserList = CHAT_DB.loadSelectedUsers();
selectedUserList.forEach(function (user) {
let html = Mustache.render(userTemplate, {
id: user.shopMemberId,
profileImage: CHAT.getProfileImgUrl(user.profileUrl),
name: user.shopMemberName,
});
let obj = jQuery.parseHTML(html);
$("#selectedUserList").append(obj);
});
$("#addUserBtn")
.off()
.on("click", function () {
CHAT_UI.showLoadingIndicator();
let userIdList = new Array();
selectedUserList.forEach(function (user) {
userIdList.push(user.shopMemberId);
});
if (typeof android != "undefined") {
android.inviteUsers(userIdList.join(","), false);
} else {
webkit.messageHandlers.inviteUsers.postMessage({
userIdList: userIdList.join(","),
});
}
});
};
CHAT_UI.refreshMyGroupForAddUser = function () {
$(".modal-backdrop").remove();
$("#favoriteListForMakeRoom").html("");
$("#myGroupListForMakeRoom").html("");
//画面タイトル設定
let contactListTitle = getLocalizedString("userSearch");
$("#title").text(contactListTitle);
// グループの様式を読み込む
var groupTemplate = getTemplate(TemplateURL.ADD_USER_GROUP_LIST);
// ユーザの様式を読み込む
var userTemplate = getTemplate(TemplateURL.ADD_USER_USER_LIST);
var groupUserTemplate = getTemplate(TemplateURL.ADD_USER_GROUP_USER_LIST);
updateContactInfo();
//お気に入りグループ取得。
var favoriteGroupList = CHAT_DB.getFavoriteGroups();
favoriteGroupList.forEach(function (favoriteGroup) {
let html = Mustache.render(groupTemplate, {
name: favoriteGroup.groupName,
id: favoriteGroup.groupId,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#favoriteListForMakeRoom").append(obj);
});
//お気に入りユーザ取得。
var favoriteUserList = CHAT_DB.getFavoriteUsersNotInRoom();
favoriteUserList.forEach(function (favoriteUser) {
favoriteUser.profileUrl = CHAT.getProfileImgUrl(favoriteUser.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
return shopMemberId == favoriteUser.shopMemberId;
});
if (findObj) {
favoriteUser.checked = "checked";
}
});
let html = Mustache.render(userTemplate, {
userList: favoriteUserList,
});
let obj = jQuery.parseHTML(html);
$("#favoriteListForMakeRoom").append(obj);
var myGroupList = CHAT_DB.getMyGroupUsersNotInRoom();
myGroupList.forEach(function (myGroup) {
myGroup.groupUserList.forEach(function (groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
});
if (findObj) {
groupUser.checked = "checked";
}
});
let html = Mustache.render(groupUserTemplate, {
groupName: myGroup.groupName,
groupUserList: myGroup.groupUserList,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#myGroupListForMakeRoom").append(obj);
});
};
CHAT_UI.refreshAllGroupForAddUser = function (paramGroupId) {
var groupId = paramGroupId;
$(".cancel").addClass("none");
$(".search_form input").removeClass("focus");
$(".search_form input").val("");
$(".search_form form").removeClass();
$(".content").removeClass("none");
$(".overlay_src_msg").empty();
$("#tabAllGroupOnAddUser").prop("checked", true);
//オンライン状態であればサーバから情報更新。
updateGroupInfo(groupId);
//画面エリアを初期化。
$("#parentGroupBtnForAddUser").off();
$("#rootGroupBtnForAddUser").off();
$("#childGroupListAreaForAddUser").html("");
$("#userInGroupListForAddUser").html("");
$("#groupPathAreaForAddUser").html("");
//DBからグループ情報を取得。
var result = CHAT_DB.getGroupInfoForAddUser(groupId);
//上位グループ、トップグループ遷移ボタンのイベント追加。
if (typeof result.parentGroupId !== "undefined") {
$("#parentGroupBtnForAddUser").on("click", function () {
CHAT_UI.refreshAllGroupForAddUser(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== "undefined") {
if (paramGroupId == 0) {
groupId = result.rootGroupId;
}
$("#rootGroupBtnForAddUser").on("click", function () {
CHAT_UI.refreshAllGroupForAddUser(result.rootGroupId);
});
}
if (groupId == result.rootGroupId || paramGroupId == "0") {
$("#rootGroupArea").addClass("none");
$("#parentGroupArea").addClass("none");
} else {
$("#rootGroupArea").removeClass("none");
$("#parentGroupArea").removeClass("none");
}
//該当グループのパースを表示。
var groupPathTemplate = getTemplate(TemplateURL.ADD_USER_GROUP_PATH);
var groupPathCount = 0;
result.groupPathList.forEach(function (groupPath) {
if (!(groupPathCount < result.groupPathList.length - 3)) {
let html = Mustache.render(groupPathTemplate, {
name: groupPath.groupName,
id: groupPath.groupId,
});
let obj = jQuery.parseHTML(html);
$("#groupPathAreaForAddUser").append(obj);
}
groupPathCount++;
});
//該当グループの下位グループ表示。
var groupTemplate = getTemplate(TemplateURL.ADD_USER_GROUP_LIST);
result.childGroupList.forEach(function (childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId,
});
let obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#childGroupListAreaForAddUser").append(obj);
});
//該当グループの所属ユーザを表示。
const userTemplate = getTemplate(TemplateURL.ADD_USER_USER_LIST);
result.groupUserList.forEach(function (groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
});
if (findObj) {
groupUser.checked = "checked";
}
});
let html = Mustache.render(userTemplate, {
userList: result.groupUserList,
});
let obj = jQuery.parseHTML(html);
$("#userInGroupListForAddUser").append(obj);
};
CHAT_UI.refreshForOnline = function () {
IS_ONLINE = "true";
$(".craeteRoomButton").off("click", CHAT_UI.offlineHandler);
$(".craeteRoomButton").css("opacity", "1.0");
$(".footer_item a").removeClass("ui-state-disabled");
$("#videoUploadButton").removeClass("ui-state-disabled");
$("#imageInputButton").removeClass("ui-state-disabled");
$("#messageSend").prop("disabled", false);
$("#messageInput").prop("disabled", false);
$("#messageInput").prop("placeholder", "メッセージを入力してください");
$("#favoriteButton").prop("disabled", false);
$("#room_name_change_button").removeClass("ui-state-disabled");
$("#add_user_button").removeClass("ui-state-disabled");
$(".fa-download").show();
if (typeof $("#roomTitle").val() != "undefined") {
CHAT_SOCKET.connectSocket();
socket.emit("join", CHAT.globalLoginParameter, function () {});
}
};
CHAT_UI.refreshForOffline = function () {
IS_ONLINE = "false";
$(".craeteRoomButton").on("click", CHAT_UI.offlineHandler);
$(".craeteRoomButton").css("opacity", "0.3");
$(".footer_item a").addClass("ui-state-disabled");
$("#videoUploadButton").addClass("ui-state-disabled");
$("#imageInputButton").addClass("ui-state-disabled");
$("#messageSend").prop("disabled", true);
$("#messageInput").prop("disabled", true);
$("#messageInput").prop("placeholder", "");
$("#favoriteButton").prop("disabled", true);
$("#room_name_change_button").addClass("ui-state-disabled");
$("#add_user_button").addClass("ui-state-disabled");
$(".fa-download").hide();
if (typeof coview_api == "undefined") {
return;
}
var alertString = "";
if (g_isMainMan) {
alertString = getLocalizedString("err_weak_network_exit_collaboration");
} else {
alertString = getLocalizedString("err_weak_network_exit_collaboration");
}
alert(alertString);
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.finishCollaboration.postMessage({});
}
if (collaborationJoinFlg != "2") {
CHAT_UI.joinRoom(
CHAT.globalLoginParameter.roomId,
CHAT.globalLoginParameter.name
);
} else {
if (typeof android != "undefined") {
android.openCommunicationHome();
} else {
webkit.messageHandlers.openCommunicationHome.postMessage({});
}
}
};
CHAT_UI.offlineHandler = function (e) {
e.preventDefault();
};
CHAT_UI.displayExistRoom = function (roomId) {
if (confirm("error_already_exist_same_user")) {
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.joinRoom.postMessage({ roomId: roomId });
} else if (CHAT_UTIL.isAndroid()) {
android.joinRoom(roomId, "");
}
}
return;
};
var createChatRoom = function (
chatRoomType,
userIDList,
newRoomName,
screenFlag,
isVoice
) {
//todo android create room api
if (typeof android != "undefined") {
android.createChatRoom(
chatRoomType,
userIDList.join(","),
newRoomName,
screenFlag,
isVoice
);
} else {
webkit.messageHandlers.createChatRoom.postMessage({
roomType: chatRoomType,
userIdList: userIDList.join(","),
roomName: newRoomName,
screenFlag: screenFlag,
isVoice: isVoice,
});
}
};
var updateContactInfo = function () {
if (IS_ONLINE == "true") {
if (typeof android != "undefined") {
android.updateMyInfo();
android.updateGroupUser();
android.updateFavorite();
} else {
webkit.messageHandlers.updateGroupInfo.postMessage("0");
webkit.messageHandlers.updateMyInfo.postMessage({});
webkit.messageHandlers.updateGroupUser.postMessage({});
webkit.messageHandlers.updateFavorite.postMessage({});
}
}
};
var updateGroupInfo = function (groupID) {
if (IS_ONLINE == "true") {
if (typeof android != "undefined") {
android.updateGroupUser();
} else {
webkit.messageHandlers.updateGroupInfo.postMessage(groupID);
}
}
};
......@@ -31,13 +31,13 @@ ArchiveUI.refreshSearchScreen = function (keyword) {
ArchiveUI.getArchiveTypeIconURL = function (type) {
switch (type) {
case ARCHIVE_TYPE.PICTURE:
return "icon/icon_collabo_picture.png";
return "icon/icon_collabo_picture.svg";
case ARCHIVE_TYPE.VIDEO:
return "icon/icon_collabo_videocam.png";
return "icon/icon_collabo_videocam.svg";
case ARCHIVE_TYPE.VOICE:
return "icon/icon_collabo_headset.png";
return "icon/icon_collabo_headset.svg";
case ARCHIVE_TYPE.DOCUMENT:
return "icon/icon_collabo_document.png";
return "icon/icon_collabo_document.svg";
default:
return "";
}
......
......@@ -3,7 +3,7 @@
<div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document">
<div class="modal-content" style="position: fixed;top: 0;height: 100%;width: 100%;left:0;right: 0;margin: 0 auto;">
<div class="modal-header border-0 pb-0">
<span>ユーザー招待</span>
<span class="m-auto">ユーザー招待</span>
</div>
<div class="modal-body">
<div class="chat_list">
......
......@@ -42,7 +42,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
<img src="icon/icon_prev_top.svg" alt="トップグループに戻る" />
</div>
</div>
<div class="chat_item_m px-0">
......@@ -60,7 +60,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" />
<img src="icon/icon_prev.svg" alt="上位グループに戻る" />
</div>
</div>
<div class="chat_item_m px-0">
......
<div class="modal fade menu_modal" id="menuModalCenter" tabindex="-1" role="dialog"
aria-labelledby="menuModalCenterTitle" aria-hidden="true">
<div class="modal menu_modal" id="menuModalCenter" tabindex="-1" role="dialog" aria-labelledby="menuModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content-wrap d-flex align-items-center">
<div class="modal-content">
<div class="modal-header border-0">
<h5 class="modal-title" id="menuModalCenterTitle">メニュー</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<button type="button item01" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
</div>
<div class="modal-body pt-0">
<ul>
<li><a id="room_name_change_button" href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a>
<li class="shadow item01"><a id="room_name_change_button" href="chat_change_room_name.html"
class="d-flex flex-row justify-content-center aligin-items-center"><img
src="icon/icon_change_room_name.svg" alt="ルーム名変更">ルーム名変更</a>
</li>
<li><a id="add_user_button" href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li>
<li ><a id="display_off_button" href="javascript:return false;" onclick="NativeBridgeDelegate.roomDisplayOff();"><img src="icon/icon_display_off_chatroom.png" alt="ユーザー招待">部屋非表示</a></li>
<li class="shadow item02"><a id="add_user_button" href="chat_add_user.html"
class="d-flex flex-row justify-content-center aligin-items-center"><img src="icon/icon_add_user.svg"
alt="ユーザー招待">ユーザー招待</a></li>
<li class="shadow item03"><a id="display_off_button" href="javascript:return false;"
onclick="NativeBridgeDelegate.roomDisplayOff();"
class="d-flex flex-row justify-content-center aligin-items-center"><img
src="icon/icon_display_off_chatroom.svg" alt="ユーザー招待">部屋非表示</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div class="modal fade profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1"
<div class="modal profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-0">
<div class="profile_desc d-flex flex-row">
<img src="img/noImage.png" alt="プロフィール画像">
<img src="img/noImage.svg" alt="プロフィール画像">
<div class="prifile_name"><span>名前 名前</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
</div>
<div class="modal-body">
......@@ -19,16 +19,14 @@
<div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite.png" alt="お気に入り">
</div>
<span class="star active shopmember_890" onclick="CHAT_UI.favoriteUserChange(890,this)"></span>
<span>お気に入り解除</span>
</div>
</button>
<button type="button" class="border-0 bg_green">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_phone.png" alt="通話">
<img src="icon/icon_profile_phone.svg" alt="通話">
</div>
<span>通話</span>
</div>
......@@ -36,7 +34,7 @@
<button type="button" class="border-0 bg_blue">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_chat.png" alt="チャット">
<img src="icon/icon_profile_chat.svg" alt="チャット">
</div>
<span>チャット</span>
</div>
......
......@@ -7,7 +7,7 @@
</div>
<div class="modal-body">
<div class="img_wrap">
<img src="img/capture.png" alt="キャプチャ画像">
<img src="img/capture.svg" alt="キャプチャ画像">
</div>
<p>filename.jpg</p>
</div>
......
<div class="modal fade profile_modal w_50" id="userNameCardInCollaboration" tabindex="-1" role="dialog"
<div class="modal profile_modal w_50" id="userNameCardInCollaboration" tabindex="-1" role="dialog"
aria-labelledby="userNameCardInCollaboration" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-content-wrap d-flex align-items-center">
<div class="modal-content item01">
<div class="modal-header border-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="profile_desc_ d-flex flex-row">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
</div>
<div class="modal-body">
{{#groupPathList}}
......@@ -21,9 +22,7 @@
<button type="button" class="border-0 bg_navy"
onclick="CollaborationUI.removeFavoriteUserInCollaboration({{shopMemberId}})" id="favoriteButton">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite.png" alt="お気に入り">
</div>
<span class="star active shopmember_890" onclick="CHAT_UI.favoriteUserChange(890,this)"></span>
<span>お気に入り解除</span>
</div>
</button>
......@@ -32,9 +31,7 @@
<button type="button" class="border-0 bg_navy"
onclick="CollaborationUI.insertFavoriteUserInCollaboration({{shopMemberId}})" id="favoriteButton">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite_white.png" alt="お気に入り">
</div>
<span class="star disable shopmember_3690" onclick="Namecard.favoriteUserChange(3690,this)"></span>
<span>お気に入り登録</span>
</div>
</button>
......@@ -44,7 +41,7 @@
onclick="FermiWebSocketBridge.requestHostChange('{{loginId}}');">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更">
<img src="icon/icon_change_host.svg" alt="ホスト変更">
</div>
<span>ホスト変更</span>
</div>
......@@ -56,7 +53,7 @@
data-target="#hostRequestModal" value="#profileModal2">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更">
<img src="icon/icon_change_host.svg" alt="ホスト変更">
</div>
<span>ホスト変更</span>
</div>
......@@ -67,7 +64,7 @@
data-target="#hostRequestModal" value="#profileModal2"  disabled>
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更">
<img src="icon/icon_change_host.svg" alt="ホスト変更">
</div>
<span>ホスト変更</span>
</div>
......@@ -77,4 +74,5 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -17,9 +17,7 @@
<div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy text_white">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite.png" alt="お気に入り">
</div>
<span class="star active shopmember_890" onclick="CHAT_UI.favoriteUserChange(890,this)"></span>
<span>お気に入り解除</span>
</div>
</button>
......@@ -27,7 +25,7 @@
data-target="#hostRequestModal" value="#profileModal2">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更">
<img src="icon/icon_change_host.svg" alt="ホスト変更">
</div>
<span>ホスト変更</span>
</div>
......
......@@ -3,7 +3,7 @@
<div class="archive_item d-flex flex-row align-items-center w-100">
<div class="arhive_img">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_videocam.png" alt="動画" />
<img src="icon/icon_collabo_videocam.svg" alt="動画" />
</div>
</div>
<div class="archive_desc">
......@@ -22,7 +22,7 @@
<div class="archive_item d-flex flex-row align-items-center w-100">
<div class="arhive_img">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_picture.png" alt="写真" />
<img src="icon/icon_collabo_picture.svg" alt="写真" />
</div>
</div>
<div class="archive_desc">
......@@ -41,7 +41,7 @@
<div class="archive_item d-flex flex-row align-items-center w-100">
<div class="arhive_img">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_headset.png" alt="音声" />
<img src="icon/icon_collabo_headset.svg" alt="音声" />
</div>
</div>
<div class="archive_desc">
......@@ -60,7 +60,7 @@
<div class="archive_item d-flex flex-row align-items-center w-100">
<div class="arhive_img">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_document.png" alt="資料" />
<img src="icon/icon_collabo_document.svg" alt="資料" />
</div>
</div>
<div class="archive_desc">
......
......@@ -3,7 +3,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" />
<img src="icon/icon_folder.svg" alt="フォルダ" />
</div>
</div>
<div class="chat_item_m px-0">
......
......@@ -3,7 +3,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" />
<img src="icon/icon_folder.svg" alt="フォルダ" />
</div>
</div>
<div class="chat_item_m px-0">
......
......@@ -13,7 +13,7 @@
<h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
<span class="archive_chat_room">{{chatRoomName}}</span>
<button id="joinChatRoom">
<img src="icon/icon_join_room.png" alt="">
<img src="icon/icon_join_room.svg" alt="チャットルームへ">
</button>
</div>
<div class="archive_detail_sv_user item">
......
......@@ -22,8 +22,8 @@
</div>
</div>
<div class="collabo_btn">
<button type="button" name="button">
<img src="icon/icon_profile_phone.png" alt="通話">
<button type="button" name="button" class="d-flex flex-row justify-content-center align-items-center">
<img src="icon/icon_profile_phone_white.svg" alt="通話">
<span>終了しました</span>
</button>
</div>
......
......@@ -7,7 +7,7 @@
</div>
<div class="modal-body">
<div class="img_wrap">
<img src="img/capture.png" alt="キャプチャ画像">
<img src="img/capture.svg" alt="キャプチャ画像">
</div>
<p>filename.jpg</p>
</div>
......
......@@ -3,7 +3,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" />
<img src="icon/icon_folder.svg" alt="フォルダ" />
</div>
</div>
<div class="chat_item_m px-0">
......
......@@ -3,7 +3,7 @@
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" />
<img src="icon/icon_folder.svg" alt="フォルダ" />
</div>
</div>
<div class="chat_item_m px-0">
......
<div class="modal fade profile_modal" id="myNameCard" tabindex="-1" role="dialog" aria-labelledby="myNameCard" aria-hidden="true">
<div class="modal profile_modal" id="myNameCard" tabindex="-1" role="dialog" aria-labelledby="myNameCard" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-content-wrap d-flex align-items-center">
<div class="modal-content item01">
<div class="modal-header border-0">
<div class="profile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'">
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
</div>
<div class="modal-body">
......@@ -16,10 +17,10 @@
{{/groupPathList}}
</div>
<div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy" style="width: 50%">
<button type="button" class="border-0" style="width: 50%">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_photo.png" alt="プロフィール写真更新">
<img src="icon/icon_photo.svg" alt="プロフィール写真更新">
</div>
<span>プロフィール写真更新</span>
</div>
......@@ -27,4 +28,5 @@
</div>
</div>
</div>
</div>
</div>
......@@ -32,8 +32,11 @@
</div>
</div>
<div class="collabo_btn">
<button class="collaboation_join_button" type="button" name="button" onclick="NativeBridgeDelegate.joinCollaboration('{{collaborationType}}', {{meetingId}})" {{#isEnded}} disabled {{/isEnded}}>
<img src="icon/icon_profile_phone.png" alt="通話">
<button class="collaboation_join_button" type="button" name="button"
class="d-flex flex-row justify-content-center align-items-center"
onclick="NativeBridgeDelegate.joinCollaboration({{collaborationType}}, {{meetingId}})" {{#isEnded}} disabled
{{/isEnded}}>
<img src="icon/icon_profile_phone_white.svg" alt="通話">
{{#isEnded}}
<span class="collaboration_join_message">終了しました</span>
{{/isEnded}}
......@@ -44,4 +47,4 @@
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
\ No newline at end of file
<div class="modal fade profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard"
<div class="modal profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-content-wrap d-flex align-items-center">
<div class="modal-content item01">
<div class="modal-header border-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="profile_desc_ d-flex flex-row">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
</div>
<div class="modal-body" id="userNameCard-scroll">
{{#groupPathList}}
......@@ -18,39 +19,35 @@
</div>
<div class="modal-footer border-0 justify-content-center">
{{#isFavorite}}
<button type="button" class="border-0 bg_navy" onclick="Namecard.removeFavoriteUser({{shopMemberId}})"
<button type="button" class="border-0" onclick="Namecard.removeFavoriteUser({{shopMemberId}})"
id="favoriteButton">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite.png" alt="お気に入り">
</div>
<span class="star active shopmember_890" onclick="Namecard.insertFavoriteUser(890, this)"></span>
<span>お気に入り解除</span>
</div>
</button>
{{/isFavorite}}
{{^isFavorite}}
<button type="button" class="border-0 bg_navy" onclick="Namecard.insertFavoriteUser({{shopMemberId}})"
<button type="button" class="border-0" onclick="Namecard.insertFavoriteUser({{shopMemberId}})"
id="favoriteButton">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite_white.png" alt="お気に入り">
</div>
<span class="star disable shopmember_3690" onclick="Namecard.favoriteUserChange(3690,this)"></span>
<span>お気に入り登録</span>
</div>
</button>
{{/isFavorite}}
<button type="button" class="border-0 bg_green" onclick="Namecard.startVoice('{{shopMemberId}}','{{name}}');">
<button type="button" class="border-0" onclick="Namecard.startVoice('{{shopMemberId}}','{{name}}');">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_phone.png" alt="通話">
<img src="icon/icon_profile_phone.svg" alt="通話">
</div>
<span>通話</span>
</div>
</button>
<button type="button" class="border-0 bg_blue" onclick="Namecard.startChat('{{shopMemberId}}','{{name}}');">
<button type="button" class="border-0" onclick="Namecard.startChat('{{shopMemberId}}','{{name}}');">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_chat.png" alt="チャット">
<img src="icon/icon_profile_chat.svg" alt="チャット">
</div>
<span>チャット</span>
</div>
......@@ -58,4 +55,5 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -2,17 +2,17 @@
<div class="s_ac_c">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_zoomin.png" alt="拡大">
<img src="icon/icon_collabo_zoomin.svg" alt="拡大">
</div>
</a>
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_zoomout.png" alt="縮小">
<img src="icon/icon_collabo_zoomout.svg" alt="縮小">
</div>
</a>
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_zoomout_map.png" alt="縮小マップ">
<img src="icon/icon_collabo_zoomout_map.svg" alt="縮小マップ">
</div>
</a>
</div>
......
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