Skip to content

C
chat_webview
Commit 5bd8f0ba by Takatoshi Miura
Options

アーカイブ一覧 新デザイン適用

parent 9ca6a036
Showing with 182 additions and 77 deletions
public/css/chat.css
...@@ -1403,3 +1403,111 @@ input:checked + .tab_class + .content_class { ...@@ -1403,3 +1403,111 @@ input:checked + .tab_class + .content_class {
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
} }
/**************************** archive *************************/
.archive_list ul {
padding: 0;
overflow-y: scroll;
height: calc(100vh - 195px);
}
.arhive_img .img_wrap {
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 46px;
}
.arhive_img img {
width: 40px;
height: 40px;
}
.archive_list ul li {
list-style: none;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.archive_row {
padding: 10px;
color: #323743;
}
.archive_row:hover {
background: aliceblue;
}
.bg_blue {
background: #0070ca;
}
.bg_green {
background: #4dca00;
}
.bg_orange {
background: #ca6d00;
}
.archive_list ul li:first-child {
border-top: 1px solid #e2e8f0;
}
.archive_desc {
padding-left: 10px;
position: relative;
width: calc(100% - 100px);
overflow: hidden;
white-space: nowrap;
}
.archive_date span {
color: #323743;
font-size: 14px;
}
.archive_name span {
color: #323743;
font-size: 16px;
font-weight: 500;
}
.archive_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/**************************** archive detail *************************/
.archive_detail .ttl {
font-size: 18px;
font-weight: bold;
}
.archive_detail .item {
margin-bottom: 20px;
}
.archive_detail .archive_detail_desc img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.archive_detail .archive_detail_desc .archive_detail_user_list ul {
padding-left: 0;
overflow-x: scroll;
}
.archive_detail .archive_detail_desc .archive_detail_user_list ul li {
list-style: none;
margin: 0 5px;
}
.archive_detail_desc {
margin: 0 10px;
}
.archive_detail .archive_detail_desc .archive_detail_user_list span,
.archive_detail .archive_detail_desc .archive_detail_sv_user span {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 90px;
}
@media screen and (max-width: 768px) {
.archive_name {
font-size: 14px;
}
.archive_detail .ttl {
font-size: 16px;
}
.archive_detail_desc span {
font-size: 14px;
}
}
public/index.html
...@@ -388,20 +388,23 @@ ...@@ -388,20 +388,23 @@
</div> </div>
<div class="tab-pane fade" id="pills-archive" role="tabpanel" aria-labelledby="pills-archive-tab"> <div class="tab-pane fade" id="pills-archive" role="tabpanel" aria-labelledby="pills-archive-tab">
<div class="inbox_archive"> <main id="archive">
<div class="heading_srch"> <div class="search_form">
<div class="srch_bar"> <form>
<div class="stylish-input-group"> <input type="search" name="search" placeholder="Search">
<input id="contactListKeyword" type="text" class="search-bar" placeholder="Search"> <span class="src_icon"></span>
<span class="input-group-addon"> <a href="#" class="cancel none" id="archiveCancel">Cancel</a>
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button> </form>
</span> </div>
</div> <div class="archive_list content">
</div> <ul id="archiveListUl">
</ul>
</div> </div>
<div id="archive_list" class="inbox_archive row"> <div class="archive_list">
<ul class="overlay_src_msg">
</ul>
</div> </div>
</div> </main>
</div> </div>
<div id="archive_detail" class="archive_detail" > <div id="archive_detail" class="archive_detail" >
...@@ -757,24 +760,25 @@ ...@@ -757,24 +760,25 @@
</div> </div>
</script> </script>
<script id="archive-template" type="text/template"> <script id="archive-template" type="text/template">
<div class="archive_list col-12"> <li class="d-flex align-items-center">
<div class="archive_data"> <div class="w-100 archive_row">
<div class="archive_img"> <div class="archive_item d-flex flex-row align-items-center w-100">
<img src={{thumbnailImage}} alt=""> <div class="arhive_img">
</div> <div class="img_wrap bg_blue">
<div class="archive_ib"> <img src={{typeImage}} alt="" />
<div class="row">
<div class="archive_date_font col-10">
<span class="archive_date">{{insertDate}}</span>
</div> </div>
<div class="archive_type"> </div>
<span class="text-truncate col-2 {{type}}">{{archiveType}}</span> <div class="archive_desc">
<div class="archive_name">
<span>{{fileName}}</span>
</div>
<div class="archive_date">
<span>{{insertDate}}</span>
</div> </div>
</div> </div>
<p class="archive_file_name text-truncate">{{fileName}}</p>
</div> </div>
</div> </div>
</div> </li>
</script> </script>
<script id="archive-detail-template" type="text/template"> <script id="archive-detail-template" type="text/template">
<div id="archive_player" class="player"> <div id="archive_player" class="player">
......
public/js/chat-ui.js
...@@ -892,6 +892,8 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) { ...@@ -892,6 +892,8 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#collaborationAllGroup").text(getLocalizedString("collaborationAllGroup")) $("#collaborationAllGroup").text(getLocalizedString("collaborationAllGroup"))
$("#collaborationFavorite").text(getLocalizedString("collaborationFavorite")) $("#collaborationFavorite").text(getLocalizedString("collaborationFavorite"))
$("#coviewCapture").text(getLocalizedString("coviewCapture")) $("#coviewCapture").text(getLocalizedString("coviewCapture"))
$("#archiveCancel").text(getLocalizedString("archiveCancel"))
} }
// 画像の読み込みが全て終わったタイミングでコールバック実行 // 画像の読み込みが全て終わったタイミングでコールバック実行
...@@ -1246,7 +1248,7 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1246,7 +1248,7 @@ CHAT_UI.refreshArchiveScreen = function() {
$('.titleRoomName').text(archiveListTitle); $('.titleRoomName').text(archiveListTitle);
// 初期化 // 初期化
$('#archive_list').html(''); $('#archiveListUl').html('');
$('#pills-archive-tab').tab('show'); $('#pills-archive-tab').tab('show');
// アーカイブの様式を読み込む // アーカイブの様式を読み込む
...@@ -1258,67 +1260,55 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1258,67 +1260,55 @@ CHAT_UI.refreshArchiveScreen = function() {
// アーカイブ一覧取得＆表示 // アーカイブ一覧取得＆表示
var archiveList = CHAT_DB.getArchiveList(); var archiveList = CHAT_DB.getArchiveList();
archiveList.forEach(function(archive) { archiveList.forEach(function(archive) {
var archiveType = ''; var typeImage = "";
var css = '';
switch(archive.archiveType) { switch(archive.archiveType) {
case 0: case 0: // 画像
archiveType = getLocalizedString("archiveTypeImage"); typeImage = "./icon/icon_collabo_picture.png";
css = 'type_image'; break;
break; case 1: // 動画
case 1: typeImage = "./icon/icon_collabo_videocam.png";
archiveType = getLocalizedString("archiveTypeMovie"); break;
css = 'type_movie'; case 2: // 音声
break; typeImage = "./icon/icon_collabo_headset.png";
case 2: break;
archiveType = getLocalizedString("archiveTypeSound"); case 3: // 文書
css = 'type_sound'; typeImage = "./icon/icon_collabo_document.png";
break; break;
case 3: default: // その他
// 今回のリリースに文書とその他は含めないため非表示 typeImage = "";
archiveType = getLocalizedString("archiveTypeDocument");
css = 'type_document';
break;
default:
// 今回のリリースに文書とその他は含めないため非表示
archiveType = getLocalizedString("archiveTypeOther");
css = 'type_other';
} }
let html = Mustache.render(archiveTemplate, { let html = Mustache.render(archiveTemplate, {
id: archive.archiveId, fileName: archive.archiveName,
fileName: archive.archiveName, insertDate: archive.archiveDate,
thumbnailImage: archive.archiveUrl, typeImage: typeImage
insertDate: archive.archiveDate,
archiveType: archiveType,
archiveTypeCSS: css
}); });
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = $(jQuery.parseHTML(html)).on('click', function() {
// アーカイブ詳細画面へ遷移 // アーカイブ詳細画面へ遷移
$('#homeButton').hide(); $('#homeButton').hide();
$('.titleRoomName').show(); $('.titleRoomName').show();
$('#archive_list').hide(); $('#pills-archive').hide();
$('#archive_detail').show(); $('#archive_detail').show();
$('#bottomNav').hide(); $('#bottomNav').hide();
$("#backButton").show();
$('#backButton').off().on('click', function() { $("#backButton").show();
// アーカイブ一覧に戻る $('#backButton').off().on('click', function() {
$('#homeButton').show(); // アーカイブ一覧に戻る
$("#backButton").hide(); $('#homeButton').show();
$('.titleRoomName').show(); $("#backButton").hide();
$('#archive_detail').hide(); $('.titleRoomName').show();
$('#archive_list').show(); $('#archive_detail').hide();
$('#bottomNav').show(); $('#pills-archive').show();
}); $('#bottomNav').show();
});
// データの受け渡し // データの受け渡し
CHAT_UI.refreshArchiveDetailScreen(archive.archiveId); CHAT_UI.refreshArchiveDetailScreen(archive.archiveId);
}); });
$('#archive_list').append(obj); $('#archiveListUl').append(obj);
$('.archive_list').css('border-bottom', '1px solid #c4c4c4'); });
})
// loadingIndicatorを非表示 // loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
......
public/js/language_en.js
...@@ -86,5 +86,6 @@ $.lang.en = { ...@@ -86,5 +86,6 @@ $.lang.en = {
"saveDateTitle":"Save Date", "saveDateTitle":"Save Date",
"roomNameTitle":"ChatRoom Name", "roomNameTitle":"ChatRoom Name",
"saveUserTitle":"Save User", "saveUserTitle":"Save User",
"attendUserTitle":"Attend User" "attendUserTitle":"Attend User",
"archiveCancel":"Cancel"
} }
public/js/language_ja.js
...@@ -86,5 +86,6 @@ $.lang.ja = { ...@@ -86,5 +86,6 @@ $.lang.ja = {
"saveDateTitle":"保存日", "saveDateTitle":"保存日",
"roomNameTitle":"チャットルーム名", "roomNameTitle":"チャットルーム名",
"saveUserTitle":"保存ユーザー", "saveUserTitle":"保存ユーザー",
"attendUserTitle":"参加ユーザー" "attendUserTitle":"参加ユーザー",
"archiveCancel":"キャンセル"
} }
public/js/language_ko.js
...@@ -86,5 +86,6 @@ $.lang.ko = { ...@@ -86,5 +86,6 @@ $.lang.ko = {
"saveDateTitle":"저장 일", "saveDateTitle":"저장 일",
"roomNameTitle":"대화방 이름", "roomNameTitle":"대화방 이름",
"saveUserTitle":"저장 사용자", "saveUserTitle":"저장 사용자",
"attendUserTitle":"참여 사용자" "attendUserTitle":"참여 사용자",
"archiveCancel":"취소"
} }
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