Skip to content

C
chat_webview
Commit fb228a67 by Kim Peace
Options

Fixed add user in collaobration ui

parent 96063a67
Showing with 195 additions and 121 deletions
public_new/css/collaboration.css
......@@ -26,14 +26,42 @@
margin: 0 5px;
}
.menu-icon {width: 40px;height: 50px;margin: 10px 15px;transform:scale(0.8);padding: 0;cursor: pointer;z-index:20}
.menu-bar {width: 40px;height: 5px;background: white;position: absolute;transition: all 0.3s;}
.menu-bar1 {margin-top: 9px}
.menu-bar2 {margin-top: 23px}
.menu-bar3 {margin-top: 37px}
.menu-icon.hover .menu-bar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;}
.menu-icon.hover .menu-bar2 {opacity: 0}
.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}
.menu-icon {
width: 40px;
height: 50px;
margin: 10px 15px;
transform: scale(0.8);
padding: 0;
cursor: pointer;
z-index: 20;
}
.menu-bar {
width: 40px;
height: 5px;
background: white;
position: absolute;
transition: all 0.3s;
}
.menu-bar1 {
margin-top: 9px;
}
.menu-bar2 {
margin-top: 23px;
}
.menu-bar3 {
margin-top: 37px;
}
.menu-icon.hover .menu-bar1 {
-webkit-transform: rotate(45deg) scaleX(0.7);
margin-top: 22px;
}
.menu-icon.hover .menu-bar2 {
opacity: 0;
}
.menu-icon.hover .menu-bar3 {
-webkit-transform: rotate(-45deg) scaleX(0.7);
margin-top: 22px;
}
.collabo-label {
padding: 2px 5px;
......@@ -50,8 +78,8 @@
margin-top: 50px;
}
#overlay_user_list .user_list {
background: #383838!important;
border: none!important;
background: #383838 !important;
border: none !important;
height: calc(100% - 140px);
overflow-x: unset;
overflow-y: scroll;
......@@ -139,38 +167,40 @@
width: 60px;
height: 60px;
}
#collabo_main .talking_area,#collabo_main .start_pip_area {
#collabo_main .talking_area,
#collabo_main .start_pip_area {
position: relative;
z-index: 2;
}
.talking_img_wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
border-radius: 50%;
border: 1px solid #fff;
box-shadow: 0 0 20px #ffffff;
cursor: pointer;
}
.talking_img_wrap::before, .talking_img_wrap::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
border: 1px solid #fff;
border-radius: 50%;
box-sizing: border-box;
pointer-events: none;
animation: pulsate 2s linear infinite;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
border-radius: 50%;
border: 1px solid #fff;
box-shadow: 0 0 20px #ffffff;
cursor: pointer;
}
.talking_img_wrap::before,
.talking_img_wrap::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
border: 1px solid #fff;
border-radius: 50%;
box-sizing: border-box;
pointer-events: none;
animation: pulsate 2s linear infinite;
}
/**************************** overlay *************************/
......@@ -217,9 +247,9 @@ animation: pulsate 2s linear infinite;
background: #383838;
height: 100vh;
}
#add_user_list{
width: 90%;
height: 90%;
#add_user_list {
width: 90%;
height: 90%;
}
.fixed {
position: fixed;
......@@ -236,53 +266,53 @@ animation: pulsate 2s linear infinite;
overflow: scroll;
}
#overlay_menu {
transition: .7s;
transition: 0.7s;
position: absolute;
top: 60px;
right: 0;
}
#overlay_menu .item01{
#overlay_menu .item01 {
opacity: 0;
animation: fadein .5s ease forwards;
animation: fadein 0.5s ease forwards;
}
#overlay_menu .item02{
#overlay_menu .item02 {
opacity: 0;
animation: fadein 1s ease forwards;
}
#overlay_menu .item03{
#overlay_menu .item03 {
opacity: 0;
animation: fadein 1.5s ease forwards;
}
#overlay_menu .item04{
#overlay_menu .item04 {
opacity: 0;
animation: fadein 2s ease forwards;
}
#overlay_menu .item05{
#overlay_menu .item05 {
opacity: 0;
animation: fadein 2.5s ease forwards;
}
@keyframes fadein{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeout{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#overlay_menu .item01.hide,
#overlay_menu .item02.hide,
#overlay_menu .item03.hide,
#overlay_menu .item04.hide,
#overlay_menu .item05.hide{
#overlay_menu .item05.hide {
opacity: 1;
animation: fadeout 0.3s ease forwards;
}
......@@ -303,7 +333,7 @@ animation: pulsate 2s linear infinite;
position: relative;
z-index: 999;
}
#overlay_menu .menu_wrap .menu .item.hide{
#overlay_menu .menu_wrap .menu .item.hide {
z-index: 0;
}
#overlay_menu .menu_wrap .menu .item:hover {
......@@ -317,8 +347,8 @@ animation: pulsate 2s linear infinite;
color: #fff;
padding-top: 6px;
}
#overlay_menu .menu_wrap .menu .item span{
font-size:12px;
#overlay_menu .menu_wrap .menu .item span {
font-size: 12px;
}
#overlay_menu .img_wrap {
width: 35px;
......@@ -330,7 +360,7 @@ animation: pulsate 2s linear infinite;
width: 35px;
height: 35px;
}
.fas.fa-wrench{
.fas.fa-wrench {
color: #fff;
font-size: 24px;
vertical-align: middle;
......@@ -429,8 +459,18 @@ animation: pulsate 2s linear infinite;
}
/**************************** add user *************************/
#addUserFormInCollaboration nav{
border:none;
#addUserFormInCollaboration nav {
border: none;
}
#addUserFormInCollaboration {
height: 100%;
display: flex;
flex-flow: column;
overflow-y: auto;
}
#addUserFormInCollaboration .content {
width: 100%;
}
/**************************** zoomin zoomout *************************/
......@@ -483,12 +523,12 @@ animation: pulsate 2s linear infinite;
height: 50px;
border-radius: 5px;
}
#modalAddUserConfirm .chat_list h2{
#modalAddUserConfirm .chat_list h2 {
font-size: 20px;
}
/**************************** document *************************/
.start_pip_img_wrap{
.start_pip_img_wrap {
width: 40px;
}
......@@ -519,12 +559,12 @@ animation: pulsate 2s linear infinite;
.end:hover {
background: #ff4747c7;
}
.close_img{
.close_img {
width: 20px;
height: 20px;
}
.t-icon{
.t-icon {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
......@@ -532,40 +572,40 @@ animation: pulsate 2s linear infinite;
height: 30px;
margin: 0 10px 6px 10px;
}
.voice{
.voice {
background-image: url("../icon/icon_voice_white.svg");
}
.voice.disable{
.voice.disable {
background-image: url("../icon/icon_voice_white_disable.svg");
}
.pen{
.pen {
background-image: url("../icon/icon_collabo_pen_white.svg");
}
.pen.disable{
.pen.disable {
background-image: url("../icon/icon_collabo_pen_white_disable.svg");
}
.picture{
.picture {
background-image: url("../icon/icon_collabo_picture.svg");
}
.place{
.place {
background-image: url("../icon/icon_collabo_place_white.svg");
}
.delete{
.delete {
background-image: url("../icon/icon_collabo_delete_white.svg");
}
.rewind{
.rewind {
background-image: url("../icon/icon_collabo_rewind_white.svg");
}
.forward{
.forward {
background-image: url("../icon/icon_collabo_forward_white.svg");
}
.capture{
.capture {
background-image: url("../icon/icon_collabo_capture.svg");
}
.record{
.record {
background-image: url("../icon/icon_record.svg");
}
.record.disable{
.record.disable {
background-image: url("../icon/icon_record_disable.svg");
}
......@@ -575,11 +615,12 @@ animation: pulsate 2s linear infinite;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #DD4545;
background-color: #dd4545;
box-shadow: 0 0 20px #dd4545;
cursor: pointer;
}
.record.disable::before, .record.disable::after {
.record.disable::before,
.record.disable::after {
content: "";
display: block;
position: absolute;
......@@ -590,7 +631,7 @@ animation: pulsate 2s linear infinite;
margin: auto;
width: 100%;
height: 100%;
border: 1px solid #DD4545;
border: 1px solid #dd4545;
border-radius: 50%;
box-sizing: border-box;
pointer-events: none;
......@@ -607,7 +648,7 @@ animation: pulsate 2s linear infinite;
}
}
.flash-txt{
.flash-txt {
position: absolute;
top: -35px;
left: -45px;
......@@ -627,14 +668,32 @@ animation: pulsate 2s linear infinite;
border-radius: 5px;
}
@-webkit-keyframes fade-in-out {
0% {visibility: hidden; opacity: 0;}
50% {visibility: visible; opacity: 1;}
100% {visibility: hidden; opacity: 0;}
0% {
visibility: hidden;
opacity: 0;
}
50% {
visibility: visible;
opacity: 1;
}
100% {
visibility: hidden;
opacity: 0;
}
}
@keyframes fade-in-out {
0% {visibility: hidden; opacity: 0;}
50% {visibility: visible; opacity: 1;}
100% {visibility: hidden; opacity: 0;}
0% {
visibility: hidden;
opacity: 0;
}
50% {
visibility: visible;
opacity: 1;
}
100% {
visibility: hidden;
opacity: 0;
}
}
/**************************** footer-menu *************************/
......@@ -677,15 +736,17 @@ animation: pulsate 2s linear infinite;
margin: 0 5px;
color: #fff;
}
#collabo_footer_menu{
#collabo_footer_menu {
opacity: 1;
animation: fadein 0.5s ease forwards;
}
#collabo_footer_menu.hide{
#collabo_footer_menu.hide {
opacity: 1;
animation: fadeout 0.5s ease forwards;
}
#collabo_footer .txt{ font-size: 12px; }
#collabo_footer .txt {
font-size: 12px;
}
@media screen and (max-width: 768px) {
#add_user_list .user_item_ttl {
......@@ -723,7 +784,7 @@ animation: pulsate 2s linear infinite;
.add_user_modal {
width: 80%;
height: 80%;
height: 100%;
left: 12.5%;
overflow: auto;
}
......@@ -768,8 +829,8 @@ animation: pulsate 2s linear infinite;
transition: all 0.2s ease;
}
.modal-content .msg_notification {
display: none;
}
display: none;
}
input[name="tab_item"] {
display: none;
......@@ -781,28 +842,35 @@ input[name="tab_item"] {
overflow: hidden;
}
#addUserFormInCollaboration #tab1_content,
#addUserFormInCollaboration #tab2_content {
height: 70vh;
overflow-y: scroll;
overflow-x: hidden;
}
#tabMyGroupOnMakeRoom:checked ~ #tab1_content,
#tabAllGroupOnMakeRoom:checked ~ #tab2_content{
#tabAllGroupOnMakeRoom:checked ~ #tab2_content {
display: block;
}
#tabMyGroupOnAddUserInCollaboration:checked ~ #tab1_content,
#tabAllGroupOnAddUserInCollaboration:checked ~ #tab2_content{
#tabAllGroupOnAddUserInCollaboration:checked ~ #tab2_content {
display: block;
}
#tabMyGroupOnAddUser:checked ~ #tab1_content,
#tabAllGroupOnAddUser:checked ~ #tab2_content{
#tabAllGroupOnAddUser:checked ~ #tab2_content {
display: block;
}
#tabMyGroup:checked ~ #tab1_content,
#tabAllGroup:checked ~ #tab2_content{
#tabAllGroup:checked ~ #tab2_content {
display: block;
}
#tabGroup:checked ~ #tab1_content,
#tabDM:checked ~ #tab2_content{
#tabDM:checked ~ #tab2_content {
display: block;
}
......@@ -851,7 +919,7 @@ input[name="tab_item"] {
z-index: 999;
}
#userNameCardInCollaboration li{
#userNameCardInCollaboration li {
list-style: none;
}
......@@ -926,4 +994,3 @@ input[name="tab_item"] {
max-width: 75%;
}
}
public_new/js/views/collaboration/collaboration-add-user.js
......@@ -149,7 +149,7 @@ CollaborationUI.refreshAllGroupForAddUserInCollaboration = function (groupID) {
CollaborationUI.appendChildGroups(result.childGroupList);
//該当グループの所属ユーザを表示。
CollaborationUI.appendUsers();
CollaborationUI.appendUsers(result.groupUserList);
};
CollaborationUI.bindOnClickParentGroup = function (parentGroupID) {
......@@ -168,7 +168,7 @@ CollaborationUI.displayRootGroupAndParentGroupIfNeeded = function (
rootGroupID,
groupID
) {
if (typeof rootGroupID !== "undefined" && paramGroupID == 0) {
if (typeof rootGroupID !== "undefined" && rootGroupID == 0) {
groupID = rootGroupID;
}
......
public_new/modal_add_user_list.html
<!-- コンテンツ -->
<div class="modal fade add_user_modal" id="addUserInCollaboration" tabindex="-1" role="dialog" aria-labelledby="addUserInCollaboration" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document">
<div class="modal-content" style="position: fixed;width: 100%;height:100%;top: 0px;left:0;">
<div class="modal fade add_user_modal" id="addUserInCollaboration" tabindex="-1" role="dialog"
aria-labelledby="addUserInCollaboration" aria-hidden="true">
<div class="modal-dialog-centered modal_collaboration_user" role="document">
<div class="modal-content">
<form id="addUserFormInCollaboration" action="chat_add_user_confirm.html" method="post">
<!-- ユーザー検索 -->
<!-- タブ -->
......@@ -9,7 +10,8 @@
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<a href="#" class="close_btn" class="close" data-dismiss="modal" aria-label="Close">閉じる</a>
<a href="#" class="close_btn" class="close" data-dismiss="modal"
aria-label="Close">閉じる</a>
</div>
</div>
<div class="col-4 p-0">
......@@ -20,19 +22,23 @@
</div><!-- .row -->
</nav><!-- nav -->
<div class="content tabs">
<input id="tabMyGroupOnAddUserInCollaboration" type="radio" name="tab_item" checked onclick="CollaborationUI.refreshMyGroupForAddUserInCollaboration();">
<input id="tabMyGroupOnAddUserInCollaboration" type="radio" name="tab_item" checked
onclick="CollaborationUI.refreshMyGroupForAddUserInCollaboration();">
<label class="tab_item m-0" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label>
<input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item" onclick="CollaborationUI.refreshAllGroupForAddUserInCollaboration('0');">
<input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item"
onclick="CollaborationUI.refreshAllGroupForAddUserInCollaboration('0');">
<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">
<div class="chat_list">
<!-- お気に入りグループ -->
<div class="category" onclick="CollaborationUI.toggleCategory(this);"><div class="category_name"><span>お気に入り</span></div></div>
<div class="category" onclick="CollaborationUI.toggleCategory(this);">
<div class="category_name"><span>お気に入り</span></div>
</div>
<div id="favoriteListForAddUserInCollaboration"></div>
<div id="myGroupListForAddUserInCollaboration"></div>
</div>
</div>
<div class="tab_content" id="tab2_content" style="height: 100vh; overflow:scroll;">
<div class="tab_content" id="tab2_content">
<div class="breadcrumb" id="groupPathAreaForAddUserInCollaboration"></div>
<div class="chat_list">
<!-- 全グループ -->
......@@ -80,7 +86,7 @@
</div>
</div>
<!-- ルーム解説ボタン -->
<div class="add_user_confirm_btn content" id="addUserConfirmBtnInCollaboration" style="position: fixed;">
<div class="add_user_confirm_btn content" id="addUserConfirmBtnInCollaboration">
<button type="button" name="button" id="buttonAddUser" style="bottom: 0; width: 100%;">
確認<br>
<span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
......@@ -88,4 +94,4 @@
</form>
</div>
</div>
</div>
</div>
\ No newline at end of file
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