Fixed add user in collaobration ui

fb228a67 · Kim Peace · 96063a67 · fb228a67 · fb228a67 · fb228a67
Commit fb228a67 authored Aug 02, 2021 by Kim Peace
Hide whitespace changes
Inline Side-by-side

Showing with 195 additions and 121 deletions

public_new/css/collaboration.css
+175 -108

public_new/js/views/collaboration/collaboration-add-user.js
+2 -2

public_new/modal_add_user_list.html
+18 -11

No files found.
--- a/public_new/css/collaboration.css
+++ b/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-icon {
-.menu-bar {width: 40px;height: 5px;background: white;position: absolute;transition: all 0.3s;}
+  width: 40px;
-.menu-bar1 {margin-top: 9px}
+  height: 50px;
-.menu-bar2 {margin-top: 23px}
+  margin: 10px 15px;
-.menu-bar3 {margin-top: 37px}
+  transform: scale(0.8);
-.menu-icon.hover .menu-bar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;}
+  padding: 0;
-.menu-icon.hover .menu-bar2 {opacity: 0}
+  cursor: pointer;
-.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}
+  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;
+  background: #383838 !important;
-  border: none!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;
+  position: relative;
-display: flex;
+  display: flex;
-align-items: center;
+  align-items: center;
-justify-content: center;
+  justify-content: center;
-width: 90px;
+  width: 90px;
-height: 90px;
+  height: 90px;
-border-radius: 50%;
+  border-radius: 50%;
-border: 1px solid #fff;
+  border: 1px solid #fff;
-box-shadow: 0 0 20px #ffffff;
+  box-shadow: 0 0 20px #ffffff;
-cursor: pointer;
+  cursor: pointer;
 }
-.talking_img_wrap::before, .talking_img_wrap::after {
+.talking_img_wrap::before,
-content: "";
+.talking_img_wrap::after {
-display: block;
+  content: "";
-position: absolute;
+  display: block;
-top: 0;
+  position: absolute;
-bottom: 0;
+  top: 0;
-left: 0;
+  bottom: 0;
-right: 0;
+  left: 0;
-margin: auto;
+  right: 0;
-width: 100%;
+  margin: auto;
-height: 100%;
+  width: 100%;
-border: 1px solid #fff;
+  height: 100%;
-border-radius: 50%;
+  border: 1px solid #fff;
-box-sizing: border-box;
+  border-radius: 50%;
-pointer-events: none;
+  box-sizing: border-box;
-animation: pulsate 2s linear infinite;
+  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{
+#add_user_list {
-    width: 90%;
+  width: 90%;
-    height: 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{
+@keyframes fadein {
-	0%{
+  0% {
-		opacity: 0;
+    opacity: 0;
-	}
+  }
-	100%{
+  100% {
-		opacity: 1;
+    opacity: 1;
-	}
+  }
 }
-@keyframes fadeout{
+@keyframes fadeout {
-	0%{
+  0% {
-		opacity: 1;
+    opacity: 1;
-	}
+  }
-	100%{
+  100% {
-		opacity: 0;
+    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{
+#overlay_menu .menu_wrap .menu .item span {
-  font-size:12px;
+  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{
+#addUserFormInCollaboration nav {
-  border:none;
+  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;}
+  0% {
-  50% {visibility: visible; opacity: 1;}
+    visibility: hidden;
-  100% {visibility: hidden; opacity: 0;}
+    opacity: 0;
+  }
+  50% {
+    visibility: visible;
+    opacity: 1;
+  }
+  100% {
+    visibility: hidden;
+    opacity: 0;
+  }
 }
 @keyframes fade-in-out {
-  0% {visibility: hidden; opacity: 0;}
+  0% {
-  50% {visibility: visible; opacity: 1;}
+    visibility: hidden;
-  100% {visibility: hidden; opacity: 0;}
+    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%;
  }
 }
--- a/public_new/js/views/collaboration/collaboration-add-user.js
+++ b/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;
  }

--- a/public_new/modal_add_user_list.html
+++ b/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 fade add_user_modal" id="addUserInCollaboration" tabindex="-1" role="dialog"
-    <div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document">
+    aria-labelledby="addUserInCollaboration" aria-hidden="true">
-        <div class="modal-content" style="position: fixed;width: 100%;height:100%;top: 0px;left:0;">
+    <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>
\ No newline at end of file