aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/attachment/attachment.js8
-rw-r--r--src/components/attachment/attachment.vue26
-rw-r--r--src/components/conversation/conversation.vue7
-rw-r--r--src/components/post_status_form/post_status_form.vue1
-rw-r--r--src/components/settings/settings.js4
-rw-r--r--src/components/settings/settings.vue4
-rw-r--r--src/components/status/status.vue33
-rw-r--r--src/components/timeline/timeline.js24
-rw-r--r--src/components/timeline/timeline.vue6
9 files changed, 82 insertions, 31 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index ccf26b79..de551611 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -23,12 +23,8 @@ const Attachment = {
hidden () {
return this.nsfw && this.hideNsfwLocal && !this.showHidden
},
- autoHeight () {
- if (this.type === 'image' && this.nsfw) {
- return {
- 'min-height': '109px'
- }
- }
+ isEmpty () {
+ return this.type === 'html' && !this.attachment.oembed
}
},
methods: {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 98cd97fb..954c46b4 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,5 +1,5 @@
<template>
- <div class="attachment base03-border" :class="{[type]: true, loading}" :style="autoHeight">
+ <div class="attachment base03-border" :class="{[type]: true, loading}" v-show="!isEmpty">
<a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
<img :key="nsfwImage" :src="nsfwImage"/>
</a>
@@ -39,8 +39,19 @@
margin: 0.5em 0.7em 0.6em 0.0em;
align-self: flex-start;
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 5px;
+ overflow: hidden;
+
+ // fixes small gap below video
+ &.video {
+ line-height: 0;
+ }
+
&.html {
- flex-basis: 100%;
+ flex-basis: 90%;
+ width: 100%;
display: flex;
}
@@ -53,7 +64,6 @@
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
- border-radius: 5px;
font-weight: bold;
z-index: 4;
}
@@ -61,8 +71,6 @@
video {
max-height: 500px;
height: 100%;
- border: 1px solid;
- border-radius: 5px;
width: 100%;
z-index: 0;
}
@@ -75,14 +83,9 @@
width: 100%;
height: 100%;
flex: 1;
- border: 1px solid;
- border-radius: 5px;
}
.oembed {
- border: 1px solid;
- border-radius: 5px;
- border-color: inherit;
width: 100%;
margin-right: 15px;
display: flex;
@@ -117,9 +120,6 @@
flex: 1;
img {
- border-style: solid;
- border-width: 1px;
- border-radius: 5px;
object-fit: contain;
width: 100%;
height: 100%; /* If this isn't here, chrome will stretch the images */
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index b430d875..3dea4985 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,5 +1,5 @@
<template>
- <div class="timeline panel panel-default base00-background">
+ <div class="timeline panel panel-default">
<div class="panel-heading base01-background base04 base03-border conversation-heading">
{{ $t('timeline.conversation') }}
<span v-if="collapsable" style="float:right;">
@@ -27,11 +27,6 @@
<script src="./conversation.js"></script>
<style lang="scss">
- .conversation-heading {
- border-bottom-style: solid;
- border-bottom-width: 1px;
- }
-
.status-preview {
position: absolute;
max-width: 35em;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0a744c10..33614637 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -164,6 +164,7 @@
width: 24px;
height: 24px;
border-radius: 2px;
+ object-fit: contain;
}
span {
line-height: 24px;
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index b3bb8290..b88937bb 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -9,6 +9,7 @@ const settings = {
hideNsfwLocal: this.$store.state.config.hideNsfw,
muteWordsString: this.$store.state.config.muteWords.join('\n'),
autoLoadLocal: this.$store.state.config.autoLoad,
+ streamingLocal: this.$store.state.config.streaming,
hoverPreviewLocal: this.$store.state.config.hoverPreview
}
},
@@ -33,6 +34,9 @@ const settings = {
autoLoadLocal (value) {
this.$store.dispatch('setOption', { name: 'autoLoad', value })
},
+ streamingLocal (value) {
+ this.$store.dispatch('setOption', { name: 'streaming', value })
+ },
hoverPreviewLocal (value) {
this.$store.dispatch('setOption', { name: 'hoverPreview', value })
},
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 5978e4ed..6a311d55 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -33,6 +33,10 @@
<label for="autoLoad">{{$t('settings.autoload')}}</label>
</li>
<li>
+ <input type="checkbox" id="streaming" v-model="streamingLocal">
+ <label for="streaming">{{$t('settings.streaming')}}</label>
+ </li>
+ <li>
<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
</li>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cc315a90..84397bfa 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -14,7 +14,7 @@
</div>
<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
</div>
- <div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
+ <div class="status-el base00-background base03-border status-fadein" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
<template v-if="muted">
<div class="media status container muted">
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -130,6 +130,11 @@
border-left-width: 0px;
line-height: 18px;
+ .timeline & {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ }
+
.notify {
.avatar {
border-width: 3px;
@@ -188,6 +193,7 @@
img, video {
max-width: 100%;
max-height: 400px;
+ object-fit: contain;
}
blockquote {
@@ -226,6 +232,20 @@
}
}
+ .status-fadein {
+ animation-duration: 0.5s;
+ animation-name: fadein;
+ }
+
+ @keyframes fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
.greentext {
color: green;
}
@@ -279,12 +299,19 @@
.status {
padding: 0.4em 0.7em 0.45em 0.7em;
- border-bottom: 1px solid;
- border-bottom-color: inherit;
border-left: 4px rgba(255, 48, 16, 0.65);
border-left-style: inherit;
}
+ .status-conversation:last-child {
+ border-bottom: none;
+ }
+
+ .timeline .panel.timeline {
+ border-radius: 10px;
+ overflow: hidden;
+ }
+
.muted {
padding: 0.1em 0.4em 0.1em 0.8em;
button {
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 6968bc6f..613b8a34 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -11,6 +11,11 @@ const Timeline = {
'userId',
'tag'
],
+ data () {
+ return {
+ paused: false
+ }
+ },
computed: {
timelineError () { return this.$store.state.statuses.error },
followers () {
@@ -21,6 +26,9 @@ const Timeline = {
},
viewing () {
return this.timeline.viewing
+ },
+ newStatusCount () {
+ return this.timeline.newStatusCount
}
},
components: {
@@ -56,6 +64,7 @@ const Timeline = {
methods: {
showNewStatuses () {
this.$store.commit('showNewStatuses', { timeline: this.timelineName })
+ this.paused = false
},
fetchOlderStatuses () {
const store = this.$store
@@ -90,6 +99,21 @@ const Timeline = {
this.fetchOlderStatuses()
}
}
+ },
+ watch: {
+ newStatusCount (count) {
+ if (!this.$store.state.config.streaming) {
+ return
+ }
+ if (count > 0) {
+ // only 'stream' them when you're scrolled to the top
+ if (window.pageYOffset < 15 && !this.paused) {
+ this.showNewStatuses()
+ } else {
+ this.paused = true
+ }
+ }
+ }
}
}
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 01f330c2..18e27c71 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -14,7 +14,7 @@
{{$t('timeline.up_to_date')}}
</div>
</div>
- <div class="panel-body">
+ <div class="panel-body base02-background">
<div class="timeline">
<status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
@@ -30,7 +30,7 @@
{{$t('user_card.followers')}}
</div>
</div>
- <div class="panel-body">
+ <div class="panel-body base02-background">
<div class="timeline">
<user-card v-for="follower in followers" :user="follower" :showFollows="false"></user-card>
</div>
@@ -42,7 +42,7 @@
{{$t('user_card.followees')}}
</div>
</div>
- <div class="panel-body">
+ <div class="panel-body base02-background">
<div class="timeline">
<user-card v-for="friend in friends" :user="friend" :showFollows="true"></user-card>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-30 17:09:11 +0000