Commit b99412f9 by 藤川諒

BizTaskyell UIUX改善

parent 8abc5293
...@@ -54,9 +54,9 @@ ...@@ -54,9 +54,9 @@
<!-- タブ --> <!-- タブ -->
<div class="content tabs"> <div class="content tabs">
<input id="tabMyGroupOnAddUser" type="radio" name="tab_item" checked> <input id="tabMyGroupOnAddUser" type="radio" name="tab_item" checked>
<label class="tab_item" for="tabMyGroupOnAddUser">マイグループ</label> <label class="tab_item m-0" for="tabMyGroupOnAddUser">マイグループ</label>
<input id="tabAllGroupOnAddUser" type="radio" name="tab_item"> <input id="tabAllGroupOnAddUser" type="radio" name="tab_item">
<label class="tab_item" for="tabAllGroupOnAddUser">全グループ</label> <label class="tab_item m-0" for="tabAllGroupOnAddUser">全グループ</label>
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<a href="#" class="w-100" id="rootGroupBtnForAddUser"> <a href="#" class="w-100" id="rootGroupBtnForAddUser">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" /> <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div> </div>
</div> </div>
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
<a href="#" class="w-100" id="parentGroupBtnForAddUser"> <a href="#" class="w-100" id="parentGroupBtnForAddUser">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" /> <img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div> </div>
</div> </div>
......
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<main id="chatMakeRoom"> <main id="chatMakeRoom">
<form id="makeRoomForm" action="chat_make_room_confirm.html" method="post"> <form id="makeRoomForm" action="chat_make_room_confirm.html" method="post">
<!-- ユーザー検索 --> <!-- ユーザー検索 -->
<div class="search_form my-2"> <div class="search_form">
<input type="search" name="search" placeholder="ユーザー検索" maxlength="30"> <input type="search" name="search" placeholder="ユーザー検索" maxlength="30">
<span class="src_icon"></span> <span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a> <a href="#" class="cancel none">キャンセル</a>
...@@ -54,9 +54,9 @@ ...@@ -54,9 +54,9 @@
<!-- タブ --> <!-- タブ -->
<div class="content tabs"> <div class="content tabs">
<input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item" checked> <input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item" checked>
<label class="tab_item" for="tabMyGroupOnMakeRoom">マイグループ</label> <label class="tab_item m-0" for="tabMyGroupOnMakeRoom">マイグループ</label>
<input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item"> <input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item">
<label class="tab_item" for="tabAllGroupOnMakeRoom">全グループ</label> <label class="tab_item m-0" for="tabAllGroupOnMakeRoom">全グループ</label>
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
......
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/contact.css">
<link rel="stylesheet" href="./css/chat.css">
<link rel="stylesheet" href="./css/collaboration.css"> <link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
...@@ -24,15 +26,14 @@ ...@@ -24,15 +26,14 @@
<header id="collabo_header"> <header id="collabo_header">
<div class="d-flex align-items-center h-100"> <div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100"> <div class="collabo_nav_l text-left w-100">
<div class="d-flex flex-column"> <div class="d-flex flex-row">
<span class="collabo-label collaboration_contents voice_contents">音声共有</span> <span class="collabo-label collaboration_contents voice_contents">音声</span>
<span class="collabo-label collaboration_contents video_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 picture_contents">写真</span>
<span class="collabo-label collaboration_contents document_contents">文書共有</span> <span class="collabo-label collaboration_contents document_contents">文書</span>
<span class="collabo-label collaboration_contents board_contents">落書き</span> <span class="collabo-label collaboration_contents board_contents">ボード</span>
<div> <span class="mx-3 host_contents">司会者</span>
通話中 <span class="mx-3 collaboration_contents voice_contents_user video_contents_user picture_contents_user document_contents_user board_contents_user">参加者</span>
</div>
</div> </div>
</div> </div>
<div class="collabo_nav_r"> <div class="collabo_nav_r">
...@@ -93,66 +94,6 @@ ...@@ -93,66 +94,6 @@
<div id="modal_collabo_host_request"></div> <div id="modal_collabo_host_request"></div>
<!-- フッター --> <!-- フッター -->
<footer id="collabo_footer_menu" class="active">
<div class="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item photo_select_button collaboration_contents picture_contents">
<div class="" id="photo_open_place_holder">
<div class="t-icon picture"></div>
</div>
</div>
<div class="footer_menu_item">
<div class="" id="penBtn">
<!-- ペン -->
<div class="t-icon pen disable"></div>
</div>
</div>
<div class="footer_menu_item none">
<div class="">
<!-- ピン -->
<div class="t-icon place"></div>
</div>
</div>
<div class="footer_menu_item">
<div class="" id="eraserBtn">
<!-- 削除 -->
<div class="t-icon delete"></div>
</div>
</div>
</div>
<div class="d-flex align-items-center h-100 none">
<div class="footer_menu_item">
<div class="">
<!-- 進む -->
<div class="t-icon rewind"></div>
</div>
</div>
<div class="footer_menu_item">
<div class="">
<!-- 戻る -->
<div class="t-icon forward"></div>
</div>
</div>
</div>
<div class="d-flex align-items-center h-100 collaboration_contents video_contents_host">
<div class="footer_menu_item">
<div class="" id="captureBtn">
<!-- キャプチャ -->
<div class="t-icon capture"></div>
</div>
</div>
</div>
<div class="d-flex align-items-center h-100 collaboration_contents video_contents_user">
<div class="footer_menu_item">
<div class="" id="captureRequestBtn">
<!-- キャプチャリクエスト -->
<div class="t-icon capture"></div>
</div>
</div>
</div>
</div>
</footer>
<!-- フッター -->
<div id="footer_collabo"></div> <div id="footer_collabo"></div>
<div id="loadingArea"></div> <div id="loadingArea"></div>
<div class="pip_indicator none" onclick="finishPipMode();"> <div class="pip_indicator none" onclick="finishPipMode();">
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有"> <img src="icon/icon_collabo_headset.png" alt="音声共有">
</div> </div>
<span>音声共有</span> <span>音声</span>
</a> </a>
</div> </div>
<div class="item hide rounded-circle shadow m-2 item02"> <div class="item hide rounded-circle shadow m-2 item02">
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有"> <img src="icon/icon_collabo_videocam.png" alt="動画共有">
</div> </div>
<span>動画共有</span> <span>動画</span>
</a> </a>
</div> </div>
<div class="item hide rounded-circle shadow m-2 item03"> <div class="item hide rounded-circle shadow m-2 item03">
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有"> <img src="icon/icon_collabo_picture.png" alt="写真共有">
</div> </div>
<span>写真共有</span> <span>写真</span>
</a> </a>
</div> </div>
<div class="item hide rounded-circle shadow m-2 item04"> <div class="item hide rounded-circle shadow m-2 item04">
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有"> <img src="icon/icon_collabo_document.png" alt="文書共有">
</div> </div>
<span>文書共有</span> <span>文書</span>
</a> </a>
</div> </div>
<div class="item hide rounded-circle shadow m-2 item05"> <div class="item hide rounded-circle shadow m-2 item05">
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き"> <img src="icon/icon_collabo_whiteboard.png" alt="落書き">
</div> </div>
<span>落書き</span> <span>ボード</span>
</a> </a>
</div> </div>
</div> </div>
......
...@@ -27,7 +27,11 @@ ...@@ -27,7 +27,11 @@
<div class="text-right d-flex align-items-center"> <div class="text-right d-flex align-items-center">
<button type="button" name="button" class="btn user_btn"></button> <button type="button" name="button" class="btn user_btn"></button>
<button type="button" name="button" class="btn add_user_btn none"></button> <button type="button" name="button" class="btn add_user_btn none"></button>
<button type="button" name="button" class="btn menu_btn"></button> <div class="menu-icon menu_btn" onclick="this.classList.toggle('hover');">
<div class="menu-bar menu-bar1"></div>
<div class="menu-bar menu-bar2"></div>
<div class="menu-bar menu-bar3"></div>
</div>
<!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> --> <!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
</div> </div>
</div> </div>
...@@ -75,7 +79,6 @@ ...@@ -75,7 +79,6 @@
<!-- フッター --> <!-- フッター -->
<footer id="collabo_footer_menu" class="active"> <footer id="collabo_footer_menu" class="active">
<button type="button" name="button" class="footer_menu_btn"></button>
<div class="footer_menu-wrap d-flex justify-content-around h-100"> <div class="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center h-100"> <div class="d-flex align-items-center h-100">
<div class="footer_menu_item"> <div class="footer_menu_item">
......
<div id="overlay_menu" class="overlay fixed"> <div id="overlay_menu" class="fixed hide">
<div class="overlay_menu_wrap"> <div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center"> <div class="overlay_menu d-flex justify-content-center align-items-center">
<div class="menu_wrap"> <div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap"> <div class="menu">
<div class="item"> <div class="item rounded-circle shadow m-2 item01">
<a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有"> <img src="icon/icon_collabo_headset.png" alt="音声共有">
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<span>音声共有</span> <span>音声共有</span>
</a> </a>
</div> </div>
<div class="item"> <div class="item rounded-circle shadow m-2 item02">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有"> <img src="icon/icon_collabo_picture.png" alt="写真共有">
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<span>写真共有</span> <span>写真共有</span>
</a> </a>
</div> </div>
<div class="item"> <div class="item rounded-circle shadow m-2 item03">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有"> <img src="icon/icon_collabo_document.png" alt="文書共有">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<span>文書共有</span> <span>文書共有</span>
</a> </a>
</div> </div>
<div class="item"> <div class="item rounded-circle shadow m-2 item04">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き"> <img src="icon/icon_collabo_whiteboard.png" alt="落書き">
......
<div id="overlay_menu" class="overlay fixed"> <div id="overlay_menu" class="fixed hide">
<div class="overlay_menu_wrap"> <div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center"> <div class="overlay_menu d-flex justify-content-center align-items-center">
<div class="menu_wrap"> <div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap"> <div class="menu">
<div class="item"> <div class="item rounded-circle shadow m-2 item01">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有"> <img src="icon/icon_collabo_picture.png" alt="写真共有">
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<span>写真共有</span> <span>写真共有</span>
</a> </a>
</div> </div>
<div class="item"> <div class="item rounded-circle shadow m-2 item02">
<a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有"> <img src="icon/icon_collabo_videocam.png" alt="動画共有">
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<span>動画共有</span> <span>動画共有</span>
</a> </a>
</div> </div>
<div class="item"> <div class="item rounded-circle shadow m-2 item03">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有"> <img src="icon/icon_collabo_document.png" alt="文書共有">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<span>文書共有</span> <span>文書共有</span>
</a> </a>
</div> </div>
<div class="item"> <div class="item rounded-circle shadow m-2 item04">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き"> <img src="icon/icon_collabo_whiteboard.png" alt="落書き">
......
...@@ -52,14 +52,14 @@ ...@@ -52,14 +52,14 @@
<div class="content tabs"> <div class="content tabs">
<input id="tabMyGroup" type="radio" name="tab_item" checked> <input id="tabMyGroup" type="radio" name="tab_item" checked>
<label class="tab_item" for="tabMyGroup">マイグループ</label> <label class="tab_item m-0" for="tabMyGroup">マイグループ</label>
<input id="tabAllGroup" type="radio" name="tab_item"> <input id="tabAllGroup" type="radio" name="tab_item">
<label class="tab_item" for="tabAllGroup">全グループ</label> <label class="tab_item m-0" for="tabAllGroup">全グループ</label>
<!-- タブ --> <!-- タブ -->
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="content chat_list my_info_sell"> <div class="content chat_list my_info_sell">
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list m-0">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="#" style="width: 100%;"> <a href="#" style="width: 100%;">
<div class="chat_item d-flex flex-row align-items-center" style="background: none !important;"> <div class="chat_item d-flex flex-row align-items-center" style="background: none !important;">
...@@ -89,15 +89,15 @@ ...@@ -89,15 +89,15 @@
</div> </div>
</div> </div>
<div class="tab_content" id="tab2_content"> <div class="tab_content" id="tab2_content">
<div class="breadcrumb" id="groupPathArea"></div> <div class="breadcrumb m-0" id="groupPathArea"></div>
<div class="chat_list"> <div class="chat_list">
<!-- 全グループ --> <!-- 全グループ -->
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list m-0">
<li class="d-flex align-items-center" id="rootGroupArea"> <li class="d-flex align-items-center" id="rootGroupArea">
<a href="#" class="w-100" id="rootGroupBtn"> <a href="#" class="w-100" id="rootGroupBtn">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" /> <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div> </div>
</div> </div>
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
<a href="#" class="w-100" id="parentGroupBtn"> <a href="#" class="w-100" id="parentGroupBtn">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" /> <img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div> </div>
</div> </div>
......
...@@ -79,6 +79,8 @@ ...@@ -79,6 +79,8 @@
.archive_detail .ttl{ .archive_detail .ttl{
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
background: #0070ca2b;
padding: 10px;
} }
.archive_detail .item { .archive_detail .item {
margin-bottom: 20px; margin-bottom: 20px;
...@@ -97,7 +99,7 @@ ...@@ -97,7 +99,7 @@
margin: 0 5px; margin: 0 5px;
} }
.archive_detail_desc { .archive_detail_desc {
margin: 0 10px; margin: 20px;
} }
.archive_detail .archive_detail_desc .archive_detail_user_list span, .archive_detail .archive_detail_desc .archive_detail_user_list span,
.archive_detail .archive_detail_desc .archive_detail_sv_user span { .archive_detail .archive_detail_desc .archive_detail_sv_user span {
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
transition: all 0.2s ease; transition: all 0.2s ease;
border-radius: 5px 5px 0 0;
} }
.msg_notification { .msg_notification {
display: none; display: none;
...@@ -120,7 +121,18 @@ input[name="tab_item"] { ...@@ -120,7 +121,18 @@ input[name="tab_item"] {
overflow: hidden; overflow: hidden;
margin: 0 auto; margin: 0 auto;
} }
.chat_item_l .thumbnail-icon {
width: 50px;
height: 50px;
text-align: center;
display: flex;
justify-content: space-around;
align-items: center;
}
.chat_item_l .thumbnail-icon img{
width: 35px;
height: 35px;
}
.chat_item_l .thumbnail img{ .chat_item_l .thumbnail img{
width: 50px; width: 50px;
height: 50px; height: 50px;
...@@ -232,7 +244,7 @@ input[name="tab_item"] { ...@@ -232,7 +244,7 @@ input[name="tab_item"] {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
line-height: 40px; line-height: 40px;
background: #c4c4c4; background: #0070ca2b;
padding-left: 10px; padding-left: 10px;
} }
.category_name { .category_name {
...@@ -821,6 +833,7 @@ input[name="tab_item"] { ...@@ -821,6 +833,7 @@ input[name="tab_item"] {
.chat_make_room_list { .chat_make_room_list {
margin-top: 0px !important; margin-top: 0px !important;
margin-bottom: 0px !important;
} }
#favoriteListForMakeRoom > ul > li:nth-child(1) { #favoriteListForMakeRoom > ul > li:nth-child(1) {
......
@charset "UTF-8"; @charset "UTF-8";
/**************************** header *************************/ /**************************** header *************************/
#collabo_header { #collabo_header {
height: 60px; height: 50px;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
...@@ -42,26 +42,27 @@ ...@@ -42,26 +42,27 @@
border-radius: 5px; border-radius: 5px;
background: #fff; background: #fff;
color: #20304c; color: #20304c;
font-size: 12px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
/**************************** main *************************/ /**************************** main *************************/
#collabo_main { #collabo_main {
height: calc(100vh - 140px); height: calc(100vh - 130px);
position: relative; position: relative;
margin-bottom: 80px; margin-bottom: 80px;
margin-top: 50px;
} }
#collabo_main .user_list_wrap, #collabo_main .user_list_wrap,
#collabo_main .document_wrap, #collabo_main .document_wrap,
#overlay_user_list .user_list_wrap { #overlay_user_list .user_list_wrap {
height: 100%; height: 100%;
background: #525252; background: #383838;
} }
#collabo_main .user_list_collabo, #collabo_main .user_list_collabo,
#overlay_user_list .user_list_collabo { #overlay_user_list .user_list_collabo {
background: #525252; background: #383838;
padding-bottom: 120px; padding: 0 5px 80px 5px;
overflow: auto; overflow: auto;
height: inherit; height: inherit;
} }
...@@ -165,12 +166,12 @@ ...@@ -165,12 +166,12 @@
background-image: url("../icon/icon_close.png"); background-image: url("../icon/icon_close.png");
} }
.overlay { .overlay {
transition: 0.7s; transition: 0.5s;
position: absolute; position: absolute;
top: 60px; top: 60px;
width: 100%; width: 100%;
right: -100%; right: -100%;
background: #525252; background: #383838;
height: 100vh; height: 100vh;
} }
#add_user_list{ #add_user_list{
...@@ -181,10 +182,10 @@ ...@@ -181,10 +182,10 @@
position: fixed; position: fixed;
} }
.overlay.slidein { .overlay.slidein {
top: 60px; top: 50px;
right: 0; right: 0;
left: 0; left: 0;
background: #525252; background: #383838;
height: 100vh; height: 100vh;
z-index: 5; z-index: 5;
width: 100%; width: 100%;
...@@ -757,331 +758,6 @@ input[name="tab_item"] { ...@@ -757,331 +758,6 @@ input[name="tab_item"] {
color: #fff; color: #fff;
} }
/**************************** chat list *************************/
.modal-content .chat_list ul {
padding: 0;
margin-top: 1rem;
}
.modal-content .chat_list img {
width: 90px;
max-height: 60px;
}
.modal-content .chat_list ul li {
list-style: none;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.modal-content .chat_list ul li:first-child {
border-top: 1px solid #e2e8f0;
}
.modal-content .chat_list .chat_item_t,
.chat_list .chat_item_desc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-content .chat_item_l {
margin: 0 15px;
}
.modal-content .chat_item_m {
white-space: nowrap;
overflow: hidden;
width: calc(100% - 160px);
}
/* リスト */
.modal-content .chat_list .chat_item:hover {
background: aliceblue;
}
/* サムネイル画像 */
.modal-content .chat_item_l .thumbnail {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
}
.modal-content .chat_item_l .thumbnail img{
width: 50px;
height: 50px;
}
.modal-content .chat_item_l .thumbnail4 img {
width: 25px;
height: 25px;
float: left;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(1) {
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(1) img {
width: 50px;
height: 50px;
position: absolute;
left: -12px;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(2) {
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
float: left;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img {
width: 25px;
height: 30px;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(3) {
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
float: left;
}
.modal-content .chat_item_l .thumbnail2 .img_wrap:nth-child(1) {
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
}
.modal-content .chat_item_l .thumbnail2 .img_wrap:nth-child(2) {
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
}
.modal-content .chat_item_l .thumbnail2 .img_wrap img {
width: 50px;
height: 50px;
position: absolute;
left: -12px;
}
.modal-content .chat_item {
height: 90px;
}
.modal-content .chat_list li {
list-style: none;
}
.modal-content .chat_list a {
color: #323743;
}
.modal-content .chat_make_room a {
color: #323743;
}
/* タイトル(グループ名、個人名) */
.modal-content .chat_item_ttl,
.chat_item_num {
font-weight: bold;
}
/**************************** make room *************************/
.modal-content .chat_list .category {
text-align: left;
font-size: 1.4rem;
height: 30px;
font-size: 16px;
cursor: pointer;
position: relative;
line-height: 30px;
background: #c4c4c4;
padding-left: 10px;
}
.modal-content .category_name {
white-space: nowrap;
overflow: scroll;
width: 90%;
}
.modal-content .chat_list .category.open::after {
content: "\f106";
}
.modal-content .chat_list .category::after {
position: absolute;
top: 0;
right: 10px;
content: "\f107";
font: 25px FontAwesome;
}
/* お気に入り */
.modal-content .star.active:before {
content: "\f005";
font: 26px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #F5D256;
padding: 20px;
}
.modal-content .star.disable:before {
content: "\f005";
font: 26px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 400;
color: #C4C4C4;
padding: 20px;
}
/* メンバー選択チェックボックス */
.modal-content .chat_item_l_chk {
height: 100%;
display: table;
margin-right: 20px;
width: 50px;
}
.modal-content .checkbox {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.modal-content .checkbox-input {
display: none;
}
.modal-content .checkbox-parts {
position: relative;
}
.modal-content .checkbox-parts::before {
display: block;
position: absolute;
border: 2px solid #0070ca;
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
top: 5px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.modal-content .checkbox-input:checked + .checkbox-parts::after {
display: block;
position: absolute;
content: "\f107";
font: 40px FontAwesome;
color: white;
width: 40px;
height: 40px;
top: 5px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #0070ca;
border-radius: 50%;
}
/* ルームボタン */
.modal-content .add_user_confirm_btn button,
.modal-content .add_user_btn button {
height: 60px;
position: fixed;
bottom: 0;
width: 100%;
background: #0070ca;
color: #fff;
border: none;
font-size: 18px;
}
.modal-content .select_member {
font-size: 14px;
}
#chat_make_room_confirm .room_name,
#chat_change_room_name .room_name {
width: 90%;
margin: 0 auto;
}
#chat_make_room_confirm .room_name h2,
#chat_change_room_name .room_name h2 {
margin-top: 20px;
font-size: 18px;
}
#chat_make_room_confirm .chat_list h2,
#chat_add_user_confirm .chat_list h2 {
font-size: 18px;
}
#chat_make_room_confirm .chat_list,
#chat_add_user_confirm .chat_list {
padding: 20px 0;
width: 90%;
margin: 0 auto;
}
/* ルーム名入力フォーム */
.modal-content .input_name_room {
padding-left: 10px;
width: 100%;
border: none;
border-bottom: 1px solid #bdbdbd;
height: 40px;
margin-bottom: 20px;
}
/* ユーザーリスト */
.modal-content .user_list {
position: fixed;
top: 60px;
background: #fff;
width: 100%;
overflow-x: scroll;
z-index: 2;
}
.modal-content .user_list .user_item {
margin: 10px;
text-align: center;
}
.modal-content .user_list .user_item span {
width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.modal-content .user_list .user_item a {
color: #323743;
}
/* ユーザーリストフィルター */
#filter .user_item .img_wrap {
position: relative;
}
#filter .user_item .img_wrap.filter:after {
position: absolute;
content: "\f107";
font: 50px FontAwesome;
width: 50px;
height: 50px;
color: #fff;
left: 5px;
background: #0070ca82;
border-radius: 50%;
}
.modal-content .user_list .user_item img {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 auto;
}
.add_user_confirm_btn button {
height: 60px;
position: fixed;
bottom: 0;
width: 100%;
background: #0070ca;
color: #fff;
border: none;
font-size: 18px;
}
.pip_indicator { .pip_indicator {
display: table; display: table;
vertical-align: middle; vertical-align: middle;
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
white-space: nowrap; white-space: nowrap;
overflow-x: scroll; overflow-x: scroll;
display: block; display: block;
margin-bottom: 10px; background: #0070ca2b;
} }
.breadcrumb_item:not(:last-child):after { .breadcrumb_item:not(:last-child):after {
content: ">"; content: ">";
......
<footer id="collabo_footer"> <footer id="collabo_footer">
<div class="footer-wrap"> <div class="footer-wrap">
<div class="d-flex justify-content-around h-100"> <div class="d-flex justify-content-around h-100">
<div class="footer_item collaboration_contents picture_contents video_contents board_contents"> <div class="footer_item mx-md-3 photo_select_button collaboration_contents picture_contents">
<a href="javascript:toolToggle();"> <a href="javascript:photo_open_place_holderToggle();">
<div class="d-flex flex-column justify-content-center"> <div class="d-flex flex-column justify-content-center" id="photo_open_place_holder">
<div class="t-icon tool my-0"></div> <div class="t-icon picture my-0"></div>
<span class="text-white txt">ツール</span> <span class="text-white txt">ピクチャ</span>
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item mx-md-3">
<a href="javascript:penToggle();">
<div class="d-flex flex-column justify-content-center" id="penBtn">
<div class="t-icon pen disable my-0"></div>
<span class="text-white txt">ペン</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3">
<a href="javascript:eraserToggle();">
<div class="d-flex flex-column justify-content-center" id="eraserBtn">
<div class="t-icon delete my-0"></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:captureToggle();">
<div class="d-flex flex-column justify-content-center" id="captureBtn">
<div class="t-icon capture my-0"></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:captureRequestToggle();">
<div class="d-flex flex-column justify-content-center" id="captureRequestBtn">
<div class="t-icon capture my-0"></div>
<span class="text-white txt">キャプチャリクエスト</span>
</div>
</a>
</div>
<div class="footer_item mx-md-3">
<a href="javascript:micTogle();"> <a href="javascript:micTogle();">
<div class="d-flex flex-column justify-content-center" id="micBtn"> <div class="d-flex flex-column justify-content-center" id="micBtn">
<div class="t-icon voice my-0"></div> <div class="t-icon voice my-0"></div>
...@@ -17,7 +49,7 @@ ...@@ -17,7 +49,7 @@
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item none host_contents"> <div class="footer_item mx-md-3 none host_contents">
<a href="javascript:recordTogle();"> <a href="javascript:recordTogle();">
<div class="d-flex flex-column justify-content-center" id="recordBtn"> <div class="d-flex flex-column justify-content-center" id="recordBtn">
<div class="t-icon record my-0"></div> <div class="t-icon record my-0"></div>
...@@ -26,9 +58,9 @@ ...@@ -26,9 +58,9 @@
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item mx-md-3">
<a href="javascript:Coview_exitCollaboration(isDocument);"> <a href="javascript:Coview_exitCollaboration(isDocument);">
<div class="img_wrap bg_red"> <div class="img_wrap bg_red mx-1">
<img src="icon/icon_close_white.png" alt="閉じる"> <img src="icon/icon_close_white.png" alt="閉じる">
</div> </div>
</a> </a>
......

299 Bytes | W: | H:

221 Bytes | W: | H:

public_new/icon/icon_close_white.png
public_new/icon/icon_close_white.png
public_new/icon/icon_close_white.png
public_new/icon/icon_close_white.png
  • 2-up
  • Swipe
  • Onion skin
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
no_scroll();
// メニューオーバーレイ表示 // メニューオーバーレイ表示
$(".menu_btn").click(function () { $(".menu_btn").click(function () {
var w = $(this).width(); var w = $(this).width();
...@@ -15,13 +18,6 @@ ...@@ -15,13 +18,6 @@
$("#overlay_user_list.overlay") $("#overlay_user_list.overlay")
.toggleClass("slidein") .toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" }); .css({ transform: "translateX(" & -w & ")" });
// $('#collabo_main').toggleClass('noscroll');
// if($('#overlay_user_list.overlay').hasClass('noscroll')){
// $('#overlay_user_list.overlay').removeClass('noscroll');
// }else{
// $('#overlay_user_list.overlay').addClass('noscroll');
// }
if($(this).hasClass('hide')){ if($(this).hasClass('hide')){
return_scroll(); return_scroll();
...@@ -73,41 +69,6 @@ ...@@ -73,41 +69,6 @@
CHAT_UI.confirmInviteUserListInCollaboration(); CHAT_UI.confirmInviteUserListInCollaboration();
}); });
}); });
$("#penBtn").click(function () {
$("#coviewPenCtrBtn").click();
if ($("#penBtn .pen").hasClass("disable")) {
$("#penBtn .pen").removeClass("disable");
} else {
$("#penBtn .pen").addClass("disable");
}
});
$("#photo_open_place_holder").click(function () {
$("#open_file_upload").trigger("click");
});
$("#eraserBtn").click(function () {
$("#coviewEraserCtrBtn").click();
});
$("#captureBtn").click(function () {
if ($("#recordBtn").hasClass("bg_red")) {
screenLock();
recordStop(function () {
$("#screenLock").remove();
coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
});
} else {
coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
}
});
$("#captureRequestBtn").click(function () {
fw.sendToMsg("others", "CAPTURE_REQUEST", {
name: CHAT.globalLoginParameter.loginId,
});
});
}); });
function penOff() { function penOff() {
...@@ -117,7 +78,6 @@ function penOff() { ...@@ -117,7 +78,6 @@ function penOff() {
} }
} }
window.onload = no_scroll;
function no_scroll() { function no_scroll() {
document.addEventListener("mousewheel", scroll_control, { passive: false }); document.addEventListener("mousewheel", scroll_control, { passive: false });
document.addEventListener("touchmove", scroll_control, { passive: false }); document.addEventListener("touchmove", scroll_control, { passive: false });
......
...@@ -1211,3 +1211,34 @@ function requestCollaborationFinish() { ...@@ -1211,3 +1211,34 @@ function requestCollaborationFinish() {
async function waitMillisecond(millesecond) { async function waitMillisecond(millesecond) {
await new Promise(done => setTimeout(() => done(), millesecond)); await new Promise(done => setTimeout(() => done(), millesecond));
} }
function penToggle() {
$("#coviewPenCtrBtn").click();
if ($("#penBtn .pen").hasClass("disable")) {
$("#penBtn .pen").removeClass("disable");
} else {
$("#penBtn .pen").addClass("disable");
}
}
function photo_open_place_holderToggle() {
$("#open_file_upload").trigger("click");
}
function eraserToggle() {
$("#coviewEraserCtrBtn").click();
}
function captureToggle() {
if ($("#recordBtn").hasClass("bg_red")) {
screenLock();
recordStop(function () {
$("#screenLock").remove();
coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
});
} else {
coview_api.Capture(CMS_SERVER_URL + "/chatapi/file/uploadArchive");
}
}
function captureRequestToggle() {
fw.sendToMsg("others", "CAPTURE_REQUEST", {
name: CHAT.globalLoginParameter.loginId,
});
}
\ No newline at end of file
<div class="modal fade add_user_confirm_modal" id="modalAddUserConfirm" tabindex="-1" role="dialog" <div class="modal fade add_user_confirm_modal" id="modalAddUserConfirm" tabindex="-1" role="dialog"
aria-labelledby="modalAddUserConfirm" aria-hidden="true" style="position: fixed;"> aria-labelledby="modalAddUserConfirm" aria-hidden="true" style="position: fixed;">
<div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document"> <div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document">
<div class="modal-content" style="position: fixed;height: 100%;width: 100%;left:0;"> <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"> <div class="modal-header border-0 pb-0">
<span>ユーザー招待</span> <span>ユーザー招待</span>
</div> </div>
......
...@@ -21,9 +21,9 @@ ...@@ -21,9 +21,9 @@
</nav><!-- nav --> </nav><!-- nav -->
<div class="content tabs"> <div class="content tabs">
<input id="tabMyGroupOnAddUserInCollaboration" type="radio" name="tab_item" checked onclick="CHAT_UI.refreshMyGroupForAddUserInCollaboration();"> <input id="tabMyGroupOnAddUserInCollaboration" type="radio" name="tab_item" checked onclick="CHAT_UI.refreshMyGroupForAddUserInCollaboration();">
<label class="tab_item" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label> <label class="tab_item m-0" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label>
<input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration('0');"> <input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration('0');">
<label class="tab_item" for="tabAllGroupOnAddUserInCollaboration">全グループ</label> <label class="tab_item m-0" for="tabAllGroupOnAddUserInCollaboration">全グループ</label>
<div class="tab_content" id="tab1_content" style="height: 100vh; overflow:scroll;"> <div class="tab_content" id="tab1_content" style="height: 100vh; overflow:scroll;">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<a href="#" class="w-100" id="rootGroupBtnForAddUserInCollaboration"> <a href="#" class="w-100" id="rootGroupBtnForAddUserInCollaboration">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" /> <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div> </div>
</div> </div>
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<a href="#" class="w-100" id="parentGroupBtnForAddUserInCollaboration"> <a href="#" class="w-100" id="parentGroupBtnForAddUserInCollaboration">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" /> <img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div> </div>
</div> </div>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="modal-header border-0"> <div class="modal-header border-0">
<div class="profile_desc d-flex flex-row"> <div class="profile_desc d-flex flex-row">
<img src="img/noImage.png" alt="プロフィール画像"> <img src="img/noImage.png" alt="プロフィール画像">
<div class="profile_name"><span>名前 名前</span></div> <div class="prifile_name"><span>名前 名前</span></div>
</div> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForAddUser({{id}});"> <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForAddUser({{id}});">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" /> <img src="icon/icon_folder.png" alt="フォルダ" />
</div> </div>
</div> </div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration({{id}});"> <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForAddUserInCollaboration({{id}});">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" /> <img src="icon/icon_folder.png" alt="フォルダ" />
</div> </div>
</div> </div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupSearch({{id}});"> <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupSearch({{id}});">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" /> <img src="icon/icon_folder.png" alt="フォルダ" />
</div> </div>
</div> </div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});"> <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail-icon">
<img src="icon/icon_folder.png" alt="フォルダ" /> <img src="icon/icon_folder.png" alt="フォルダ" />
</div> </div>
</div> </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