r4sas
/
tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Show document in webpages

master
morethanwords 4 years ago
parent
753f05dd2e
commit
a122fe11c0
3 changed files with 116 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/lib/appManagers/appImManager.ts
  2. 8
      src/scss/components/_typography.scss
  3. 201
      src/scss/partials/_chatBubble.scss

10
src/lib/appManagers/appImManager.ts
Unescape View File

@ -365,7 +365,7 @@ export class AppImManager {
this.bubbleGroups.removeBubble(bubble, tempID); this.bubbleGroups.removeBubble(bubble, tempID);
if(message.media?.webpage && !bubble.querySelector('.box.web')) { if(message.media?.webpage && !bubble.querySelector('.web')) {
const mounted = this.getMountedBubble(mid); const mounted = this.getMountedBubble(mid);
if(!mounted) return; if(!mounted) return;
this.renderMessage(mounted.message, true, false, mounted.bubble, false); this.renderMessage(mounted.message, true, false, mounted.bubble, false);
@ -2032,7 +2032,7 @@ export class AppImManager {
bubble.classList.add('webpage'); bubble.classList.add('webpage');
let box = document.createElement('div'); let box = document.createElement('div');
box.classList.add('box', 'web'); box.classList.add('web');
let quote = document.createElement('div'); let quote = document.createElement('div');
quote.classList.add('quote'); quote.classList.add('quote');
@ -2066,7 +2066,11 @@ export class AppImManager {
}); });
//} //}
} else { } else {
doc = null; const docDiv = wrapDocument(doc, false, false, message.mid);
preview.append(docDiv);
preview.classList.add('preview-with-document');
//messageDiv.classList.add((webpage.type || 'document') + '-message');
//doc = null;
} }
} }

8
src/scss/components/_typography.scss
Unescape View File

@ -15,3 +15,11 @@ h1, h2, h3, h4, h5, h6 {
em { font-style: italic; } em { font-style: italic; }
strong { font-weight: 500; } strong { font-weight: 500; }
small { font-size: 75%; } small { font-size: 75%; }
pre, code {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

201
src/scss/partials/_chatBubble.scss
Unescape View File

@ -379,13 +379,23 @@ $bubble-margin: .25rem;
width: min-content; width: min-content;
} }
.box.web { .web {
/* width: max-content; */ // commented 10.02.2020 /* width: max-content; */ // commented 10.02.2020
/* width: min-content; */ /* width: min-content; */
max-width: 100%; max-width: 100%;
} }
} }
&.webpage {
.preview-with-document {
margin-bottom: 0 !important;
}
.document {
height: 3.375rem;
}
}
.preview-resizer { .preview-resizer {
display: flex; display: flex;
} }
@ -638,73 +648,58 @@ $bubble-margin: .25rem;
//clip-path: ellipse(100px 100px at center); //clip-path: ellipse(100px 100px at center);
} }
} }
.box, .reply { .web {
font-size: .95rem; margin-top: -6px !important;
// margin: .25rem; // margin-bottom: 5px;
margin: 4px 4px 4px 6px; max-width: 100%;
//padding: .25rem; overflow: hidden;
padding: 4px;
margin-bottom: -5px;
border-radius: 4px;
//transition: anim(background-color);
/* &:hover {
cursor: pointer;
} */
&.web { .preview {
margin-top: -6px; max-height: unquote('min(400px, 100%)');
// margin-bottom: 5px; max-width: unquote('min(480px, 100%)');
max-width: 100%; /* max-height: 100%;
max-width: 100%; */
border-radius: 4px;
margin-bottom: 3px;
overflow: hidden; overflow: hidden;
user-select: none;
.preview { cursor: pointer;
max-height: unquote('min(400px, 100%)'); position: relative;
max-width: unquote('min(480px, 100%)');
/* max-height: 100%;
max-width: 100%; */
border-radius: 4px;
margin-bottom: 3px;
overflow: hidden;
user-select: none;
cursor: pointer;
position: relative;
width: max-content; width: max-content;
img, video {
max-width: 100%;
/* width: 100%;
height: 100%; */
}
}
.title {
letter-spacing: -0.2px;
line-height: 1.2;
font-weight: 500 !important;
}
.name { img, video {
letter-spacing: -0.3px; max-width: 100%;
display: block; /* width: 100%;
height: 100%; */
html.no-touch &:hover {
text-decoration: underline;
}
} }
}
.title {
letter-spacing: -0.2px;
line-height: 1.2;
font-weight: 500 !important;
}
.name {
letter-spacing: -0.3px;
display: block;
.text { html.no-touch &:hover {
overflow: hidden; text-decoration: underline;
text-overflow: ellipsis;
line-height: 1.2;
letter-spacing: -0.3px;
margin-top: 2px;
font-size: 0.965rem;
} }
} }
.text {
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
letter-spacing: -0.3px;
margin-top: 2px;
font-size: 0.965rem;
}
.quote { .quote {
// padding-left: .5rem; // padding-left: .5rem;
padding-left: 0.55rem; padding-left: 0.55rem;
@ -712,10 +707,21 @@ $bubble-margin: .25rem;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
} }
}
.text/* , .reply-subtitle */ {
line-height: 1.2; .web, .reply {
} font-size: .95rem;
// margin: .25rem;
margin: 4px 4px 4px 6px;
//padding: .25rem;
padding: 4px;
margin-bottom: -5px;
border-radius: 4px;
//transition: anim(background-color);
/* &:hover {
cursor: pointer;
} */
.name, .reply-title { .name, .reply-title {
font-weight: 500 !important; font-weight: 500 !important;
@ -728,7 +734,7 @@ $bubble-margin: .25rem;
width: fit-content; width: fit-content;
} }
.box.web { .web {
.quote { .quote {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -825,60 +831,39 @@ $bubble-margin: .25rem;
.emoji { .emoji {
font-size: 1.2rem; font-size: 1.2rem;
} }
pre, code {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
} }
// all for audio (not voice) .audio:not(.is-voice) {
.message.audio-message { justify-content: unset;
max-width: none;
width: 258px;
.audio { $parent: ".audio";
justify-content: unset;
max-width: none;
@include respond-to(handhelds) {
height: 59px;
padding-left: 47px;
}
// .preloader-container {
// @include respond-to(handhelds) {
// width: 30px;
// height: 30px;
// // left: 2px;
// }
// }
#{$parent} {
&-time { &-time {
padding-bottom: 7px; padding-bottom: 7px;
} }
&-time, &-subtitle { &-time, &-subtitle {
color: #4fae4e; color: #4fae4e;
line-height: 1.45; line-height: 1.45;
margin-top: 0; margin-top: 0;
} }
&-title { &-title {
font-weight: 500; font-weight: 500;
margin-left: -1px; margin-left: -1px;
} }
&-details { &-details {
margin-top: 8px; margin-top: 8px;
@include respond-to(handhelds) { @include respond-to(handhelds) {
margin-top: -1px; margin-top: -1px;
} }
} }
&-ico { &-ico {
font-size: 0; font-size: 0;
@ -888,6 +873,19 @@ $bubble-margin: .25rem;
} }
} }
} }
@include respond-to(handhelds) {
height: 59px;
padding-left: 47px;
}
// .preloader-container {
// @include respond-to(handhelds) {
// width: 30px;
// height: 30px;
// // left: 2px;
// }
// }
.progress-line { .progress-line {
/* width: calc(100% + 50px); */ /* width: calc(100% + 50px); */
@ -917,7 +915,10 @@ $bubble-margin: .25rem;
} }
} }
} }
}
// all for audio (not voice)
.message.audio-message {
//&.audio-message { //&.audio-message {
min-width: 275px; min-width: 275px;
//max-width: 380px !important; //max-width: 380px !important;
@ -1301,10 +1302,10 @@ $bubble-margin: .25rem;
.quote { .quote {
border-left: 2px $color-blue solid; border-left: 2px $color-blue solid;
* { /* * {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} } */
} }
.quote .name, .reply-title { .quote .name, .reply-title {
@ -1345,7 +1346,7 @@ $bubble-margin: .25rem;
color: #707579 !important; color: #707579 !important;
} }
.message.audio-message { .audio:not(.is-voice) {
.progress-line { .progress-line {
&__seek { &__seek {
background: rgba(193, 207, 220, 0.39); background: rgba(193, 207, 220, 0.39);
@ -1437,7 +1438,7 @@ $bubble-margin: .25rem;
&.is-reply { &.is-reply {
&.emoji-big, &.sticker { &.emoji-big, &.sticker {
.box, .reply { .web, .reply {
background-color: #eeffde; background-color: #eeffde;
right: calc(100% + 10px); right: calc(100% + 10px);
border-color: rgba($color-green, .12); border-color: rgba($color-green, .12);

Write Preview
Loading…
Cancel
Save