diff --git a/src/web-chatview/chatview.css b/src/web-chatview/chatview.css
index 13fadb78fe35da63703fff5eea511ba889c1710a..8823eb04274afcddb9591cb6d9a2c57d42b89fcd 100644
--- a/src/web-chatview/chatview.css
+++ b/src/web-chatview/chatview.css
@@ -41,6 +41,9 @@
--bg-text-input: white;
--bg-invitation-rect: white;
+ /* hairline properties */
+ --hairline-color: #d9d9d9;
+ --hairline-thickness: 0.2px;
}
@font-face {
@@ -81,19 +84,10 @@ body {
-webkit-user-select: text;
}
-::-webkit-scrollbar-track {
- background-color: var(--bg-color);
-}
-
::-webkit-scrollbar {
- width: 8px;
- background-color: var(--bg-color);
+ display: none;
}
-::-webkit-scrollbar-thumb {
- background-color: var(--bg-color);
- }
-
/** Navbar */
.navbar-wrapper {
@@ -330,10 +324,7 @@ body {
justify-content: space-between;
}
-
-
/** Messaging bar */
-
#sendMessage {
background-color: var(--bg-color);
display: flex;
@@ -345,21 +336,24 @@ body {
right: 0;
top: 0;
z-index: 1;
+
+ /* hairline */
+ border-top: var(--hairline-thickness) solid var(--hairline-color);
+ border-bottom: var(--hairline-thickness) solid var(--hairline-color);
}
#message {
flex: 1;
background-color: transparent;
overflow-y: hidden;
- vertical-align:middle;
+ vertical-align: middle;
color: var(--text-color);
width: 100%;
- min-height: 50px;
- max-height: var(--textarea-max-height);
resize: none;
border: none;
- padding: 30px 5px;
+
padding-left: 20px;
+
/* enable selection (it is globally disabled in the body) */
-webkit-user-select: auto;
}
@@ -368,6 +362,7 @@ body {
height: "auto";
width: 100%;
min-height: 50px;
+ max-height: var(--textarea-max-height);
background-color: var(--bg-text-input);
border-radius: 25px 25px 0px 25px;
display: flex;
@@ -427,7 +422,6 @@ a:hover {
#data_transfer_send_container {
position: relative;
- z-index: 1;
display: none;
justify-content: flex-start;
left: 0;
@@ -439,10 +433,11 @@ a:hover {
border-bottom: none;
color: var(--message-out-txt);
background-color: var(--message-out-bg);
- overflow-x: overlay;
+ overflow-x: scroll;
}
#data_transfer_send_container::-webkit-scrollbar {
+ display: flex;
height: 8px;
}
@@ -522,6 +517,14 @@ a:hover {
font-family: sans-serif;
}
+.file_wrapper p {
+ overflow: hidden;
+ white-space: nowrap;
+ max-width: 95px;
+ min-width: 95px;
+ text-overflow: ellipsis;
+}
+
/* Style the button and place it at the top right corner of the image */
.file_wrapper .btn {
position: absolute;
diff --git a/src/web-chatview/chatview.html b/src/web-chatview/chatview.html
index 1d89434d85c5acb31c6a90da536668a0a8cf27ec..6cca791252dfce45b969099e5dc864d552eebf7a 100644
--- a/src/web-chatview/chatview.html
+++ b/src/web-chatview/chatview.html
@@ -30,50 +30,29 @@
</div>
<div id="callButtons">
<!-- callButtons block allows more efficient hiding of placeCallButton and placeAudioCallButton -->
- <div id="placeCallButton" class="nav-button action-button nav-rigth" onclick="placeCall();">
- <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="Camera" fill-rule="nonzero" stroke="#000000" stroke-width="1.3">
- <g id="Ico_Camera" transform="translate(2.000000, 6.000000)">
- <path d="M14.838,0.964 L15.0727616,4.95098691 L18.549033,2.8441558 L19.1831325,10.5544613 L15.0431125,8.28294586 L15.0431125,12.1828061 C15.0222904,12.2250926 14.9986583,12.2532258 14.9607672,12.2532258 L14.9607672,12.2532258 L0.881,12.253 L0.654407741,1.14977472 L14.838,0.964 Z" id="Path"></path>
- </g>
- </g>
- </g>
+ <div id="placeCallButton" class="nav-button action-button nav-right" onclick="placeCall()">
+ <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
</svg>
</div>
- <div id="placeAudioCallButton" class="nav-button action-button" onclick="placeAudioCall();">
- <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="Phone" stroke="#000000" stroke-width="1.3">
- <g id="Ico_TEL" transform="translate(3.000000, 3.000000)">
- <path d="M2.08318114,0.702801822 C3.47221232,-0.375546383 4.67183016,-0.185249641 5.24007015,1.08339531 C6.37655021,3.36695621 7.19734136,4.50873667 6.37655021,5.39678812 C4.86124348,6.41170409 3.78790122,6.91916206 4.35614125,7.99751029 C5.49262131,10.7250969 7.70244359,13.0720901 10.3542304,14.4675995 C11.3644349,15.101922 11.9326749,14.0235738 13.0691549,12.6280643 C14.0162216,11.8668773 15.0895639,12.6914966 17.2993862,14.0235738 C18.4990041,14.7213285 18.5621418,15.8631089 17.4256618,17.1951861 C10.7961949,24.6801913 -5.80904142,6.85572983 2.08318114,0.702801822" id="Path"></path>
- </g>
- </g>
- </g>
+ <div id="placeAudioCallButton" class="nav-button action-button nav-right" onclick="placeAudioCall()">
+ <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path fill="none" d="M0 0h24v24H0z" />
+ <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z" />
</svg>
</div>
</div>
<div id="pluginsButton" style="display:none" class="nav-button action-button nav-right" onclick="openPluginHandlersList()">
- <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="Plugin" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="0.25">
- <g id="noun_add-on-plugin_2469914" transform="translate(2.000000, 2.000000)">
- <path d="M7.95454545,-2.58379177e-14 C6.07714045,-2.58379177e-14 4.54545455,1.53168636 4.54545455,3.40909091 C4.54545455,3.81146364 4.63639864,4.18709545 4.765625,4.54545455 L0.454545455,4.54545455 C0.203517329,4.54547964 -3.28047432e-07,4.74897187 -3.28047432e-07,5 L-3.28047432e-07,9.54545909 C-3.28047432e-07,9.69805849 0.0762260247,9.84056553 0.20341697,9.92488084 C0.330607915,10.0091961 0.49161786,10.0240699 0.632102273,9.96448182 C0.928123182,9.84116364 1.2500475,9.77273182 1.59090909,9.77273182 C2.977005,9.77273182 4.09090909,10.8866409 4.09090909,12.2727318 C4.09090909,13.6588227 2.977005,14.7727318 1.59090909,14.7727318 C1.2500475,14.7727318 0.928123182,14.7043 0.632102273,14.5809591 C0.491614149,14.5213694 0.330599681,14.5362456 0.203407479,14.6205663 C0.0762152768,14.704887 -3.28047432e-07,14.8474011 -3.28047432e-07,15 L-3.28047432e-07,19.5454591 C-3.28047432e-07,19.7964872 0.203517329,20 0.454545455,20 L15.4545455,20 C15.7055736,20 15.9090658,19.7964872 15.9090909,19.5454591 L15.9090909,15.6108 C16.1285164,15.6553682 16.3589991,15.6818227 16.5909091,15.6818227 C18.4683141,15.6818227 19.9999997,14.1501409 19.9999997,12.2727318 C19.9999997,10.3953227 18.4683141,8.86363636 16.5909091,8.86363636 C16.3589991,8.86363636 16.1285164,8.89009545 15.9090909,8.93465909 L15.9090909,5 C15.9090658,4.74897187 15.7055736,4.54547964 15.4545455,4.54545455 L11.1434659,4.54545455 C11.2726923,4.18709545 11.3636364,3.81146364 11.3636364,3.40909091 C11.3636364,1.53168636 9.83195045,-2.58379177e-14 7.95454545,-2.58379177e-14 L7.95454545,-2.58379177e-14 Z M7.95454545,0.909090909 C9.34064136,0.909090909 10.4545455,2.02299545 10.4545455,3.40909091 C10.4545455,3.90517045 10.3070727,4.36090227 10.0568182,4.75142045 C9.96529803,4.89157836 9.95820859,5.07069263 10.0383647,5.21764558 C10.1185209,5.36459852 10.272952,5.45561067 10.4403409,5.45454545 L15,5.45454545 L15,9.54545909 C14.9998246,9.69805849 15.076226,9.84056553 15.203417,9.92488084 C15.3306079,10.0091961 15.4916179,10.0240699 15.6321023,9.96448182 C15.928123,9.84116364 16.2500475,9.77273182 16.5909091,9.77273182 C17.977005,9.77273182 19.0909091,10.8866409 19.0909091,12.2727318 C19.0909091,13.6588227 17.977005,14.7727318 16.5909091,14.7727318 C16.2500475,14.7727318 15.928123,14.7043 15.6321023,14.5809591 C15.4916141,14.5213694 15.3305997,14.5362456 15.2034075,14.6205663 C15.0762153,14.704887 14.999817,14.8474011 15,15.0000045 L15,19.0909136 L0.909090909,19.0909136 L0.909090909,15.6108 C1.12851636,15.6553682 1.35899909,15.6818227 1.59090909,15.6818227 C3.46831409,15.6818227 5,14.1501409 5,12.2727318 C5,10.3953227 3.46831409,8.86363636 1.59090909,8.86363636 C1.35899909,8.86363636 1.12851636,8.89009545 0.909090909,8.93465909 L0.909090909,5.45454545 L5.46875,5.45454545 C5.6361389,5.45561067 5.79057002,5.36459852 5.87072617,5.21764558 C5.95088232,5.07069263 5.94379288,4.89157836 5.85227273,4.75142045 C5.60201818,4.36090227 5.45454545,3.90517045 5.45454545,3.40909091 C5.45454545,2.02299545 6.56844955,0.909090909 7.95454545,0.909090909 L7.95454545,0.909090909 Z" id="Shape"></path>
- </g>
- </g>
- </g>
+ <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/>
</svg>
</div>
- <div id="addToConversationsButton" class="nav-button action-button nav-right" onclick="addToConversations();">
- <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="Profil" stroke="#000000" stroke-width="1.3">
- <g id="Ico_PROFIL" transform="translate(3.000000, 2.000000)">
- <path d="M14,4.5 C14,6.98522308 11.9852231,9 9.5,9 C7.01477692,9 5,6.98522308 5,4.5 C5,2.0147769 7.01477692,0 9.5,0 C11.9852231,0 14,2.0147769 14,4.5 Z" id="Stroke-1"></path>
- <path d="M0,20 C0,14.4771733 4.02947764,10 9.00005436,10 C13.9705224,10 18,14.4771733 18,20" id="Stroke-3"></path>
- </g>
- </g>
- </g>
+ <div id="addToConversationsButton" class="nav-button action-button nav-right" onclick="addToConversations()">
+ <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</svg>
</div>
<div id="unbanButton" class="nav-button action-critical-button nav-right" onclick="addBannedContact()">
@@ -85,45 +64,43 @@
</div>
</div>
</div>
-
<div id="container">
<div id="invitation" class="column">
- <div id="invitation_text_container" class="note_container">
- <div id="invitation_text"></div>
- </div>
+ <div id="invitation_text_container" class="note_container">
+ <div id="invitation_text"></div>
+ </div>
- <div id="invitation_rect">
- <div id="invite_image"></div>
- <div id="quote_img_wrapper">
- <img id="quote_img" src="qrc:/images/icons/quote.svg"></img>
- </div>
- <div id="invite_text">
- <div id="join_text"></div>
- <div id="note_text"></div>
- </div>
- <div id="actions">
- <button id="blockButton" class="text-button" onclick="blockConversation()">
- </button>
- <button id="refuseButton" class="text-button" onclick="refuseInvitation()">
- </button>
- <button id="acceptButton" class="text-button text-button-green" onclick="acceptInvitation()">
- </button>
- </div>
+ <div id="invitation_rect">
+ <div id="invite_image"></div>
+ <div id="quote_img_wrapper">
+ <img id="quote_img" src="qrc:/images/icons/quote.svg"></img>
</div>
+ <div id="invite_text">
+ <div id="join_text"></div>
+ <div id="note_text"></div>
+ </div>
+ <div id="actions">
+ <button id="blockButton" class="text-button" onclick="blockConversation()">
+ </button>
+ <button id="refuseButton" class="text-button" onclick="refuseInvitation()">
+ </button>
+ <button id="acceptButton" class="text-button text-button-green" onclick="acceptInvitation()">
+ </button>
+ </div>
+ </div>
<div id="invitation_note_container" class="note_container">
<div id="invitation_note"></div>
</div>
</div>
-
<div id="messages" onscroll="onScrolled()"></div>
<div id="typing_indicator_container"></div>
<div id="back_to_bottom_button_container">
- <div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest ▼
-</div>
+ <div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest ▼</div>
</div>
+
<div id="send_inteface_container" onresize="updateBackToBottomContainer()">
<div id="sendMessage">
<div id="sendFileButton" class="nav-button action-button" onclick="selectFileToSend()">
@@ -152,6 +129,8 @@
</g>
</svg>
</div>
+ <textarea id="message" autofocus onkeyup="grow_text_area()" onkeydown="process_messagebar_keydown()"
+ dir="auto" rows="1"></textarea>
<div id="emojiButton" class="action-button nav-button">
<svg class="svgicon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path d="M12,2.1c-5.4,0-9.9,4.4-9.9,9.9s4.4,9.9,9.9,9.9s9.9-4.4,9.9-9.9S17.4,2.1,12,2.1z M12,20.7c-4.8,0-8.7-3.9-8.7-8.7 S7.2,3.3,12,3.3s8.7,3.9,8.7,8.7S16.8,20.7,12,20.7z"/>
@@ -160,8 +139,6 @@
<path d="M16,8.9c-0.4,0-0.8,0.4-0.8,0.8c0,0.5,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8C16.8,9.2,16.4,8.9,16,8.9z"/>
</svg>
</div>
- <textarea id="message" autofocus onkeyup="grow_text_area()" onkeydown="process_messagebar_keydown()"
- dir="auto" rows="1"></textarea>
<div id="sendButton" class="nav-button action-button" onclick="sendMessage();">
<svg class="svgicon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g transform="translate(2.000000, 3.000000)">
@@ -174,4 +151,4 @@
<div id="data_transfer_send_container"></div>
</div>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/web-chatview/chatview.js b/src/web-chatview/chatview.js
index 4fe5b26db96e8b0f7a80a50f3e41e53087402c3d..53cc08a1250e45b044ef7abeb50e06487d485387 100644
--- a/src/web-chatview/chatview.js
+++ b/src/web-chatview/chatview.js
@@ -69,9 +69,9 @@ const joinText = document.getElementById("join_text")
const noteText = document.getElementById("note_text")
const invitationNoteText = document.getElementById("invitation_note")
-var messages = document.getElementById("messages")
-var sendContainer = document.getElementById("data_transfer_send_container")
-var wrapperOfNavbar = document.getElementById("wrapperOfNavbar")
+var messages = document.getElementById("messages")
+var sendContainer = document.getElementById("data_transfer_send_container")
+var wrapperOfNavbar = document.getElementById("wrapperOfNavbar")
/* States: allows us to avoid re-doing something if it isn't meaningful */
var displayLinksEnabled = true
@@ -1449,14 +1449,7 @@ function mediaInteraction(message_id, message_direction, link, ytid, errorHandle
const internal_mes_wrapper = document.createElement("div")
internal_mes_wrapper.setAttribute("class", "internal_mes_wrapper")
- //if(use_qt) {
- // var tbl = buildMsgTable(message_direction)
- // var msg_cell = tbl.querySelector(".msg_cell")
- // msg_cell.appendChild(media_wrapper)
- // internal_mes_wrapper.appendChild(tbl)
- //} else {
- internal_mes_wrapper.appendChild(media_wrapper)
- //}
+ internal_mes_wrapper.appendChild(media_wrapper)
return internal_mes_wrapper
}
@@ -1478,14 +1471,8 @@ function textInteraction(message_id, message_direction, htmlText) {
const internal_mes_wrapper = document.createElement("div")
internal_mes_wrapper.setAttribute("class", "internal_mes_wrapper")
- //if(use_qt) {
- // var tbl = buildMsgTable(message_direction)
- // var msg_cell = tbl.querySelector(".msg_cell")
- // msg_cell.appendChild(message_wrapper)
- // internal_mes_wrapper.appendChild(tbl)
- //} else {
- internal_mes_wrapper.appendChild(message_wrapper)
- //}
+ internal_mes_wrapper.appendChild(message_wrapper)
+
return internal_mes_wrapper
}
@@ -1545,6 +1532,7 @@ function actionInteraction() {
var left_buttons = document.createElement("div")
left_buttons.setAttribute("class", "left_buttons")
message_wrapper.appendChild(left_buttons)
+
// Also contains a bold clickable text
var text_div = document.createElement("div")
text_div.setAttribute("class", "text")
@@ -1653,16 +1641,12 @@ function buildNewMessage(message_object) {
message_div.setAttribute("id", `message_${message_id}`)
message_div.setAttribute("class", classes.join(" "))
- // Build message for each types.
- // if(!use_qt) {
- // Add sender images if necessary (like if the interaction doesn't take the whole width)
- const need_sender = (message_type === "data_transfer" || message_type === "text")
- if (need_sender) {
- var message_sender_image = document.createElement("span")
- message_sender_image.setAttribute("class", `sender_image sender_image_${message_sender_contact_method}`)
- message_div.appendChild(message_sender_image)
- }
- // }
+ const need_sender = (message_type === "data_transfer" || message_type === "text")
+ if (need_sender) {
+ var message_sender_image = document.createElement("span")
+ message_sender_image.setAttribute("class", `sender_image sender_image_${message_sender_contact_method}`)
+ message_div.appendChild(message_sender_image)
+ }
// Build main content
if (message_type === "data_transfer") {
@@ -2250,7 +2234,11 @@ function setSenderImage(set_sender_image_object)
*/
/* exported showTypingIndicator */
function showTypingIndicator(contactUri, isTyping) {
- var message_div = messages.lastChild.querySelector("#message_typing")
+ var message_div
+ if (messages.lastChild)
+ message_div = messages.lastChild.querySelector("#message_typing")
+ else
+ return
if (isTyping === 0) {
if (message_div) {
@@ -2312,14 +2300,9 @@ function isTextSelected() {
*/
function addFile_path(path, name, size) {
var html = "<div class='file_wrapper' data-path='" + path + "'>" +
- "<svg class='svg-icon' viewBox='0 0 20 20'>" +
- "<path fill = 'none' d = 'M17.222,5.041l-4.443-4.414c-0.152-0.151-0.356-0.235-0.571-0.235h-8.86c-0.444,0-0.807,0.361-0.807,0.808v17.602c0,0.448,0.363,0.808,0.807,0.808h13.303c0.448,0,0.808-0.36,0.808-0.808V5.615C17.459,5.399,17.373,5.192,17.222,5.041zM15.843,17.993H4.157V2.007h7.72l3.966,3.942V17.993z' ></path>" +
- "<path fill='none' d='M5.112,7.3c0,0.446,0.363,0.808,0.808,0.808h8.077c0.445,0,0.808-0.361,0.808-0.808c0-0.447-0.363-0.808-0.808-0.808H5.92C5.475,6.492,5.112,6.853,5.112,7.3z'></path>" +
- "<path fill='none' d='M5.92,5.331h4.342c0.445,0,0.808-0.361,0.808-0.808c0-0.446-0.363-0.808-0.808-0.808H5.92c-0.444,0-0.808,0.361-0.808,0.808C5.112,4.97,5.475,5.331,5.92,5.331z'></path>" +
- "<path fill='none' d='M13.997,9.218H5.92c-0.444,0-0.808,0.361-0.808,0.808c0,0.446,0.363,0.808,0.808,0.808h8.077c0.445,0,0.808-0.361,0.808-0.808C14.805,9.58,14.442,9.218,13.997,9.218z'></path>" +
- "<path fill='none' d='M13.997,11.944H5.92c-0.444,0-0.808,0.361-0.808,0.808c0,0.446,0.363,0.808,0.808,0.808h8.077c0.445,0,0.808-0.361,0.808-0.808C14.805,12.306,14.442,11.944,13.997,11.944z'></path>" +
- "<path fill='none' d='M13.997,14.67H5.92c-0.444,0-0.808,0.361-0.808,0.808c0,0.447,0.363,0.808,0.808,0.808h8.077c0.445,0,0.808-0.361,0.808-0.808C14.805,15.032,14.442,14.67,13.997,14.67z'></path>" +
- "</svg >" +
+ "<svg class='svgicon' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'>" +
+ "<path d='M14.2,2.3C14,2.1,13.7,2,13.4,2H5.5C4.8,2,4.3,2.5,4.3,3.2v6.3v1.6v9.7c0,0.7,0.5,1.2,1.2,1.2h13.1c0.7,0,1.2-0.5,1.2-1.2 V18V8.4c0-0.3-0.1-0.6-0.3-0.8L14.2,2.3z M18,7.7H14c0,0,0,0,0,0V3.7L18,7.7z M18.6,20.9C18.6,20.9,18.6,20.9,18.6,20.9l-13.1,0 c0,0,0,0,0,0v-9.7V9.5V3.2c0,0,0,0,0,0h7.4v4.5c0,0.7,0.5,1.2,1.2,1.2h4.5v9.2V20.9z'/>" +
+ "</svg>" +
"<div class='fileinfo'>" +
"<p>" + name + "</p>" +
"<p>" + size + "</p>" +