Skip to content

C
chat_webview
Commit 9ca6a036 by Takatoshi Miura
Options

Merge branch 'origin/develop_collaborationUI' into 'release_sp3' 

Origin/develop collaboration ui

See merge request !6
parents 77fb1c5d c8260271
Showing with 819 additions and 8 deletions
public/css/chat.css
...@@ -205,7 +205,6 @@ img { ...@@ -205,7 +205,6 @@ img {
.received_withd_msg { width: 57%;} .received_withd_msg { width: 57%;}
.mesgs { .mesgs {
margin-top: 40px; margin-top: 40px;
padding: 0px 15px 48px 15px;
} }
.search-bar-fixed { .search-bar-fixed {
...@@ -258,10 +257,14 @@ img { ...@@ -258,10 +257,14 @@ img {
.msg_history { .msg_history {
/* チャット画面スクロール範囲 /* チャット画面スクロール範囲
* 画面の高さ - (画面上部タイトルの高さ(58px) + ルーム名検索欄の高さ(38px) + メッセージ入力欄の高さ(48px)) */ * 画面の高さ - (画面上部タイトルの高さ(58px) + ルーム名検索欄の高さ(38px) + メッセージ入力欄の高さ(48px) + 協業タブの高さ(67px)) */
height: calc(100vh - 144px); height: calc(100vh - 211px);
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding: 0px 15px;
}
.landscape_msg_history {
padding: 0px 10%;
} }
/****************************chatlist end *************************/ /****************************chatlist end *************************/
...@@ -760,6 +763,518 @@ a.article:hover { ...@@ -760,6 +763,518 @@ a.article:hover {
text-align: center; text-align: center;
} }
/* --------------------------------------------------- */
/* COLLABORATION STYLE */
/* --------------------------------------------------- */
#coviewShareMainBtn {
padding-top: 9px;
}
.coview_share_area {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1050;
}
.coview_share_title {
background: #1D1D1D!important;
border-color: #1D1D1D!important;
width: 100%;
height: 58px;
}
.coview_share_body {
width: 100%;
height: calc(100vh - 58px);
}
.coview_share_title_left_area {
display: inline-block;
height: 58px;
line-height: 58px;
padding: 0;
margin: 0;
}
p#coview_time {
font-weight: normal;
font-size: 16px;
line-height: 14px;
padding-left: 10px;
}
.coview_share_title_right_area {
display: inline-block!important;
height: 58px;
line-height: 58px;
margin: 0;
float: right;
}
.coview_share_title_btn {
display: inline-block;
}
.coview_share_title_btn img {
width: 45px;
height: 45px;
}
.coview_share_title_name {
display: inline-block;
height: 58px;
line-height: 58px;
padding-left: 23px;
margin: 0;
color: #fff;
}
.coview_share_photo_select_bubble {
display: none;
position: absolute;
padding: 2px;
background: #3e3e3e;
border-radius: 5px;
margin-top: 156px;
margin-left: 117px;
font-size: 12px;
}
.coview_share_photo_select_bubble:after {
border-top: 0 solid transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #3e3e3e;
content: "";
position: absolute;
top: -10px;
left: 22px;
}
.coview_share_photo_select_bubble_in_button {
width: 106px;
height: 39px;
border: none;
text-align: left;
}
.coview_share_photo_select_bubble_in_button.cam {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.coview_share_photo_select_bubble_in_button.gal {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: solid 0.7px #000;
}
.coview_share_photo_select_bubble_in_button_img{
width: 27%;
}
.coview_share_photo_select_bubble_in_button_text{
margin-left: 5px;
}
.coview_share_request {
width: 100%;
height: 4em;
background-image: linear-gradient(to top, #82b127, #30c8d2);
color: #fff;
border: none;
border-radius: 5px;
}
.collaboration_tab {
height: 67px;
display: flex;
border-top: 1px solid #c4c4c4;
background-color: #F9F9F9;
}
.collaboration_tab ul {
list-style-type: none;
display: flex;
padding: 0px;
margin-bottom: 0px;
width: 100%;
}
.collaboration_tab li {
display: flex;
align-self: auto;
flex: 1;
min-width: 0;
}
.collaboration_tab_btn {
align-items: center;
justify-content: center;
flex: 1;
padding-top: 8px;
text-decoration: none;
text-align: center;
word-break: break-all;
box-sizing: border-box;
}
.collaboration_tab_btn img {
height: 32px;
width: 32px;
}
.collaboration_tab_btn p {
font-size: 12px;
align-items: center;
color: #707070;
}
.tool_area_switcher {
position: absolute;
left: 0;
bottom: 198px;
width: 76px;
height: 43px;
z-index: 4;
}
.tool_hide_btn, .tool_show_btn {
width: 76px;
height: 43px;
-webkit-appearance: none;
border: none;
padding: 0;
}
.tool_hide_btn img, .tool_show_btn img {
width: 76px;
height: 43px;
}
.coview_tool_area {
width: 100%;
height: 78px;
bottom: 120px;
position: absolute;
background: #1D1D1D;
z-index: 4;
}
.coview_tool_area_left {
padding: 15px 16px;
display: inline-block;
float: left;
}
.coview_tool_area_right {
padding: 15px 16px;
display: inline-block;
float: right;
}
.coview_tool_btn {
width: 48px;
height: 48px;
-webkit-appearance: none;
border: none;
padding: 0;
margin: 0px 8px;
}
.coview_tool_btn img {
width: 48px;
height: 48px;
}
.coview_tool_btn_long {
width: 134px;
height: 48px;
-webkit-appearance: none;
border: none;
padding: 0;
margin: 0px 8px;
position: relative;
}
.coview_tool_btn_long img {
width: 134px;
height: 48px;
}
.coview_tool_btn_long p {
position: absolute;
top: 6px;
right: 6px;
width: 80px;
height: 36px;
margin-bottom: 0;
font-size: 14px;
line-height: 36px;
background: #0070CA;
}
.coview_bottom_area {
width: 100%;
height: 120px;
bottom: 0px;
text-align: center;
position: absolute;
background: #1D1D1D;
z-index: 4;
}
.bottom_area {
padding: 30px 0px;
}
.bottom_btn {
width: 60px;
height: 60px;
-webkit-appearance: none;
border-radius: 50px;
margin: 0px 17px;
padding: 0;
background: white;
}
.bottom_btn img {
width: 60px;
height: 60px;
padding: 0px;
}
.coview_type_area {
position: absolute;
width: 100%;
height: calc(100vh - 178px);
bottom: 120px;
text-align: center;
z-index: 4;
background: #525252;
}
.coview_member_area {
position: absolute;
width: 100%;
height: calc(100vh - 178px);
bottom: 120px;
overflow-y: scroll;
text-align: center;
z-index: 3;
background: #525252;
}
.coview_add_member_area {
width: 70vw;
height: 70vh;
top: 15vh;
left: 15vw;
flex-wrap: wrap;
display: flex;
position: absolute;
z-index: 4;
background: white;
}
.tab_class {
width: calc(100%/2);
height: 50px;
background-color: #E0E0E0;
line-height: 50px;
font-size: 15px;
text-align: center;
display: block;
float: left;
order: -1;
margin-bottom: 0;
border-bottom: 5px solid #0070CA;
}
input[name="tab_name"] {
display: none;
}
input:checked + .tab_class {
background-color: #0070CA;
color: white;
}
.content_class {
display: none;
width: 100%;
overflow-y: scroll;
}
input:checked + .tab_class + .content_class {
display: block;
height: calc(70vh - 50px);
}
.separator {
width: 100%;
height: 25px;
background: #C4C4C4;
line-height: 25px;
}
.separator label {
margin-left: 8px;
font-family: Noto Sans JP;
font-style: normal;
font-weight: normal;
font-size: 12px;
}
.coview_group_list, .coview_favorite_list, .coview_all_group_list {
margin-bottom: 0;
}
.coview_group_list li, .coview_favorite_list li, .coview_all_group_list li {
border-bottom: 1px solid #E2E8F0;
}
.chat_item_t {
font-size: 16px;
line-height: 20px;
color: #323743;
}
.chat_item_l {
height: 40px;
margin: 15px;
}
.chat_item_m {
white-space: nowrap;
overflow: hidden;
width: calc(100% - 160px);
}
.chat_item_r {
margin: 17px;
margin-left: auto;
}
.chat_item_r img {
width: 36px;
height: 36px;
}
.thubnail {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.thubnail img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.coview_group_tree {
width: 100%;
height: 40px;
color: black;
font-weight: 500;
font-size: 16px;
line-height: 40px;
margin-bottom: 0;
padding: 0px 8px;
}
.content_class hr {
border-bottom: 2px solid #E2E8F0;
margin: 0;
}
.coview_type_inbox {
padding: 29vh 0px;
}
.coview_type_cell {
display: inline-block;
width: 84px;
height: 112px;
margin: 10px;
}
.coview_type_area img {
width: 68px;
height: 68px;
}
.coview_type_area p {
margin: 8px 0px;
font-size: 16px;
line-height: 16px;
}
.coview_type_btn {
width: 68px;
height: 68px;
-webkit-appearance: none;
border: none;
padding: 0;
}
.member_profile_btn, .member_profile_btn_host {
width: 50vw;
height: 50vw;
padding: 0;
background: #525252;
float: left;
-webkit-appearance: none;
border: none;
position: relative;
}
.member_profile_btn_host::before {
content: "";
top: 0;
right: 0;
border-bottom: 5em solid transparent;
border-right: 5em solid #FF4747;
position: absolute;
z-index: 100;
}
.member_profile_btn_host::after {
display: block;
content: "ホスト";
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 20px;
top: 15px;
right: 5px;
transform: rotate(45deg);
color: #FFFFFF;
position: absolute;
z-index: 101;
}
.coview_font {
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
color: white;
}
/* --------------------------------------------------- */
/* Archive STYLE */
/* --------------------------------------------------- */
.inbox_archive { .inbox_archive {
width: 100%; width: 100%;
} }
......
public/js/chat-ui.js
...@@ -31,7 +31,7 @@ $(window).on('resize', function() { ...@@ -31,7 +31,7 @@ $(window).on('resize', function() {
$(".chat_list").addClass("col-6").removeClass("col-12"); $(".chat_list").addClass("col-6").removeClass("col-12");
$(".squareBoxContent span").addClass("landscape_span"); $(".squareBoxContent span").addClass("landscape_span");
$(".mesgs").addClass("landscape_mesgs"); $(".msg_history").addClass("landscape_msg_history");
} else { } else {
$(".group_list").removeClass("col-6").addClass("col-12"); $(".group_list").removeClass("col-6").addClass("col-12");
...@@ -39,7 +39,7 @@ $(window).on('resize', function() { ...@@ -39,7 +39,7 @@ $(window).on('resize', function() {
$(".chat_list").removeClass("col-6").addClass("col-12"); $(".chat_list").removeClass("col-6").addClass("col-12");
$(".squareBoxContent span").removeClass("landscape_span"); $(".squareBoxContent span").removeClass("landscape_span");
$(".mesgs").removeClass("landscape_mesgs"); $(".msg_history").removeClass("landscape_msg_history");
} }
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
...@@ -428,9 +428,9 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) { ...@@ -428,9 +428,9 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
switch(target) { switch(target) {
case '#pills-chat': case '#pills-chat':
if (CHAT_UI.isLandscapeMode()) { if (CHAT_UI.isLandscapeMode()) {
$(".mesgs").addClass("landscape_mesgs"); $(".msg_history").addClass("landscape_msg_history");
} else { } else {
$(".mesgs").removeClass("landscape_mesgs"); $(".msg_history").removeClass("landscape_msg_history");
} }
CHAT.globalIsInvite = true; CHAT.globalIsInvite = true;
$('.chatRoomIcon, .titleRoomName, #backButton').show(); $('.chatRoomIcon, .titleRoomName, #backButton').show();
...@@ -881,6 +881,17 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) { ...@@ -881,6 +881,17 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#favorite-seperator").text(getLocalizedString("favorite")) $("#favorite-seperator").text(getLocalizedString("favorite"))
$("#mygroup-seperator").text(getLocalizedString("mygroup")) $("#mygroup-seperator").text(getLocalizedString("mygroup"))
$("#collaboration_call").text(getLocalizedString("collaboration_call"))
$("#collaboration_document").text(getLocalizedString("collaboration_document"))
$("#collaboration_photo").text(getLocalizedString("collaboration_photo"))
$("#collaboration_live").text(getLocalizedString("collaboration_live"))
$("#collaboration_boad").text(getLocalizedString("collaboration_boad"))
$("#collaborationMyGroup").text(getLocalizedString("collaborationMyGroup"))
$("#collaborationSeparatorMyGroup").text(getLocalizedString("collaborationSeparatorMyGroup"))
$("#collaborationAllGroup").text(getLocalizedString("collaborationAllGroup"))
$("#collaborationFavorite").text(getLocalizedString("collaborationFavorite"))
$("#coviewCapture").text(getLocalizedString("coviewCapture"))
} }
// 画像の読み込みが全て終わったタイミングでコールバック実行 // 画像の読み込みが全て終わったタイミングでコールバック実行
...@@ -1079,6 +1090,8 @@ CHAT_UI.refreshRoomList = function(roomType) { ...@@ -1079,6 +1090,8 @@ CHAT_UI.refreshRoomList = function(roomType) {
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = $(jQuery.parseHTML(html)).on('click', function() {
let roomId = $(this).data('roomId'); let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname'); let roomName = $(this).data('roomname');
globalUserInfo.roomId = roomId;
globalUserInfo.roomName = roomName;
CHAT_UI.joinRoom(roomId,roomName); CHAT_UI.joinRoom(roomId,roomName);
//TODO ルームに入る処理追加必要 //TODO ルームに入る処理追加必要
}); });
......
public/js/chat.js
...@@ -8,6 +8,9 @@ CHAT.globalIsInvite = false; ...@@ -8,6 +8,9 @@ CHAT.globalIsInvite = false;
//ログイン中の部屋情報を保存する変数 //ログイン中の部屋情報を保存する変数
CHAT.globalLoginParameter; CHAT.globalLoginParameter;
// 協業用
let globalUserInfo = new Object()
CHAT.saveRoomInfo = function(roomId, roomName) { CHAT.saveRoomInfo = function(roomId, roomName) {
CHAT.globalLoginParameter.roomId = roomId; CHAT.globalLoginParameter.roomId = roomId;
CHAT.globalLoginParameter.roomName = roomName; CHAT.globalLoginParameter.roomName = roomName;
...@@ -230,6 +233,14 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam ...@@ -230,6 +233,14 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
} }
CHAT_UI.htmlElementTextInitialize(languageCode) CHAT_UI.htmlElementTextInitialize(languageCode)
// 協業用
globalUserInfo.sid = sid;
globalUserInfo.loginId = loginId;
globalUserInfo.shopName = shopName;
globalUserInfo.roomId = roomId;
globalUserInfo.roomName = roomName;
globalUserInfo.languageCode = languageCode;
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
socket.emit('join', loginParam, function(err) { socket.emit('join', loginParam, function(err) {
if (err) { if (err) {
......
public/js/language_en.js
...@@ -59,6 +59,22 @@ $.lang.en = { ...@@ -59,6 +59,22 @@ $.lang.en = {
"favorite":"Favorite List", "favorite":"Favorite List",
"mygroup":"My Group", "mygroup":"My Group",
"groupChatRoom":"Group", "groupChatRoom":"Group",
"collaboration_call":"Call",
"collaboration_document":"Document",
"collaboration_photo":"Photo",
"collaboration_live":"Live",
"collaboration_boad":"Boad",
"talking":"Talking",
"sharePhoto":"Photo",
"shareLive":"Live",
"shareDocument":"Document",
"shareBoad":"Boad",
"shareVoice":"Voice",
"collaborationFavorite":"Favorite",
"collaborationMyGroup":"My Group",
"collaborationSeparatorMyGroup":"My Group",
"collaborationAllGroup":"All Group",
"coviewCapture":"Capture",
"archiveListTitle":"Archive", "archiveListTitle":"Archive",
"archiveTypeImage":"Image", "archiveTypeImage":"Image",
"archiveTypeMovie":"Movie", "archiveTypeMovie":"Movie",
......
public/js/language_ja.js
...@@ -59,6 +59,22 @@ $.lang.ja = { ...@@ -59,6 +59,22 @@ $.lang.ja = {
"favorite":"お気に入りリスト", "favorite":"お気に入りリスト",
"mygroup":"マイグループ", "mygroup":"マイグループ",
"groupChatRoom":"グループ", "groupChatRoom":"グループ",
"collaboration_call":"通話",
"collaboration_document":"文書",
"collaboration_photo":"画像",
"collaboration_live":"動画",
"collaboration_boad":"ボード",
"talking":"通話中",
"sharePhoto":"写真共有",
"shareLive":"現場中継",
"shareDocument":"文書共有",
"shareBoad":"落書き",
"shareVoice":"音声共有",
"collaborationFavorite":"お気に入り",
"collaborationMyGroup":"マイグループ",
"collaborationSeparatorMyGroup":"マイグループ",
"collaborationAllGroup":"全グループ",
"coviewCapture":"キャプチャ",
"archiveListTitle":"アーカイブ", "archiveListTitle":"アーカイブ",
"archiveTypeImage":"画像", "archiveTypeImage":"画像",
"archiveTypeMovie":"動画", "archiveTypeMovie":"動画",
......
public/js/language_ko.js
...@@ -59,6 +59,22 @@ $.lang.ko = { ...@@ -59,6 +59,22 @@ $.lang.ko = {
"favorite":"즐겨찾기리스트", "favorite":"즐겨찾기리스트",
"mygroup":"마이그룹", "mygroup":"마이그룹",
"groupChatRoom":"그룹", "groupChatRoom":"그룹",
"collaboration_call":"통화",
"collaboration_document":"문서",
"collaboration_photo":"이미지",
"collaboration_live":"동영상",
"collaboration_boad":"보드",
"talking":"통화 중",
"sharePhoto":"이미지",
"shareLive":"동영상",
"shareDocument":"문서",
"shareBoad":"보드",
"shareVoice":"통화",
"collaborationFavorite":"즐겨찾기",
"collaborationMyGroup":"마이그룹",
"collaborationSeparatorMyGroup":"마이그룹",
"collaborationAllGroup":"전체그룹",
"coviewCapture":"캡처",
"archiveListTitle":"아카이브", "archiveListTitle":"아카이브",
"archiveTypeImage":"이미지", "archiveTypeImage":"이미지",
"archiveTypeMovie":"동영상", "archiveTypeMovie":"동영상",
......
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