aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/attachment/attachment.js5
-rw-r--r--src/components/attachment/attachment.vue7
-rw-r--r--src/components/nav_panel/nav_panel.vue3
-rw-r--r--src/components/notifications/notifications.js32
-rw-r--r--src/components/notifications/notifications.scss13
-rw-r--r--src/components/notifications/notifications.vue5
-rw-r--r--src/components/post_status_form/post_status_form.vue13
-rw-r--r--src/components/settings/settings.vue2
-rw-r--r--src/components/status/status.js8
-rw-r--r--src/components/status/status.vue9
-rw-r--r--src/components/user_card_content/user_card_content.vue31
-rw-r--r--src/components/user_profile/user_profile.vue29
12 files changed, 120 insertions, 37 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index c88497a2..57d21b28 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -20,6 +20,11 @@ const Attachment = {
}
},
methods: {
+ linkClicked ({target}) {
+ if (target.tagName === 'A') {
+ window.open(target.href, '_blank')
+ }
+ },
toggleHidden () {
this.showHidden = !this.showHidden
}
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 311e36b8..738a1e86 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -18,7 +18,7 @@
<span v-if="type === 'unknown'">Don't know how to display this...</span>
- <div v-if="type === 'html' && attachment.oembed" class="oembed">
+ <div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed">
<div v-if="attachment.thumb_url" class="image">
<img :src="attachment.thumb_url"></img>
</div>
@@ -39,7 +39,7 @@
.attachment {
flex: 1 0 30%;
display: flex;
- margin: 0.2em;
+ margin: 0.5em 0.8em 0.6em 0.1em;
align-self: flex-start;
&.html {
@@ -79,6 +79,7 @@
img {
width: 100%;
}
+ margin-right: 15px;
}
.oembed {
@@ -91,6 +92,8 @@
img {
border: 0px;
border-radius: 0;
+ height: 100%;
+ object-fit: cover;
}
}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 2082f41a..85ed163c 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -39,8 +39,7 @@
.nav-panel li {
border-bottom: 1px solid;
- padding: 0.5em;
- padding-left: 1em;
+ padding: 0.8em 0.85em;
}
.nav-panel li:last-child {
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 10f987a8..c8d5e212 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,14 +1,40 @@
-import { sortBy, take } from 'lodash'
+import { sortBy, take, filter } from 'lodash'
const Notifications = {
data () {
return {
- visibleNotificationCount: 20
+ visibleNotificationCount: 10
}
},
computed: {
+ notifications () {
+ return this.$store.state.statuses.notifications
+ },
+ unseenNotifications () {
+ return filter(this.notifications, ({seen}) => !seen)
+ },
visibleNotifications () {
- return take(sortBy(this.$store.state.statuses.notifications, ({action}) => -action.id), this.visibleNotificationCount)
+ // Don't know why, but sortBy([seen, -action.id]) doesn't work.
+ let sortedNotifications = sortBy(this.notifications, ({action}) => -action.id)
+ sortedNotifications = sortBy(sortedNotifications, 'seen')
+ return take(sortedNotifications, this.visibleNotificationCount)
+ },
+ unseenCount () {
+ return this.unseenNotifications.length
+ }
+ },
+ watch: {
+ unseenCount (count) {
+ if (count > 0) {
+ this.$store.dispatch('setPageTitle', `(${count})`)
+ } else {
+ this.$store.dispatch('setPageTitle', '')
+ }
+ }
+ },
+ methods: {
+ markAsSeen () {
+ this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
}
}
}
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 687a4f0f..517afeaa 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,13 +1,13 @@
@import '../../_variables.scss';
.notification {
- padding: 0.5em;
- padding-left: 1em;
+ padding: 0.4em 0 0 0.7em;
display: flex;
border-bottom: 1px solid silver;
.text {
min-width: 0px;
word-wrap: break-word;
+ line-height:18px;
.icon-retweet {
color: $green;
@@ -18,21 +18,22 @@
}
h1 {
- margin: 0;
+ margin: 0 0 0.3em;
padding: 0;
font-size: 1em;
+ line-height:20px;
}
- padding-left: 0.5em;
+ padding: 0.3em 0.8em 0.5em;
p {
margin: 0;
margin-top: 0;
- margin-bottom: 0.5em;
+ margin-bottom: 0.3em;
}
}
.avatar {
- padding-top: 3px;
+ padding-top: 0.3em;
width: 32px;
height: 32px;
border-radius: 50%;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 0846c27b..785cc019 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,13 +1,14 @@
<template>
<div class="notifications">
<div class="panel panel-default base00-background">
- <div class="panel-heading base01-background base04">Notifications ({{visibleNotifications.length}})</div>
+ <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
<div class="panel-body">
- <div v-for="notification in visibleNotifications" class="notification">
+ <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
<a :href="notification.action.user.statusnet_profile_url">
<img class='avatar' :src="notification.action.user.profile_image_url_original">
</a>
<div class='text'>
+ <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
<div v-if="notification.type === 'favorite'">
<h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
<p>{{ notification.status.text }}</p>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a6aaf511..1bad41c7 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
<div class="post-status-form">
<form @submit.prevent="postStatus(newStatus)">
<div class="form-group" >
- <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"></textarea>
+ <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control" @keyup.ctrl.enter="postStatus(newStatus)"></textarea>
</div>
<div class="attachments">
<div class="attachment" v-for="file in newStatus.files">
@@ -57,13 +57,22 @@
form {
display: flex;
flex-direction: column;
- padding: 0.5em;
+ padding: 0.6em;
}
.form-group {
display: flex;
flex-direction: column;
+ padding: 0.3em 0.5em 0.6em;
+ line-height:24px;
+ }
+
+ form textarea {
+ border: none;
+ border-radius: 2px;
+ line-height:16px;
padding: 0.5em;
+ resize: vertical;
}
.btn {
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 8bb0ffb1..57aafac8 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -17,6 +17,6 @@
<style>
.setting-item {
- margin: 1em
+ margin: 1em 1em 1.4em;
}
</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 030e22b5..46add8aa 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -40,6 +40,14 @@ const Status = {
UserCardContent
},
methods: {
+ linkClicked ({target}) {
+ if (target.tagName === 'SPAN') {
+ target = target.parentNode
+ }
+ if (target.tagName === 'A') {
+ window.open(target.href, '_blank')
+ }
+ },
toggleReplying () {
this.replying = !this.replying
},
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 0c004936..162ab140 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -54,7 +54,7 @@
</small>
</h4>
- <div class="status-content" v-html="status.statusnet_html"></div>
+ <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
<div v-if='status.attachments' class='attachments'>
<attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments">
@@ -94,6 +94,7 @@
.user-content {
min-height: 52px;
+ padding-top: 1px;
}
.source_url {
@@ -110,8 +111,7 @@
}
.status-content {
- margin-top: 3px;
- margin-bottom: 3px;
+ margin: 3px 15px 4px 0;
}
p {
@@ -138,8 +138,7 @@
}
.status {
- padding: 0.5em;
- padding-right: 1em;
+ padding: 0.65em 0.7em 0.8em 0.8em;
border-bottom: 1px solid;
}
.muted button {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 2c32406b..59cee734 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -3,30 +3,34 @@
<div class="base00-background panel-heading text-center" v-bind:style="style">
<div class='user-info'>
<img :src="user.profile_image_url">
- <div v-if='user.muted' class='muteinfo'>Muted</div>
- <div class='muteinfo' v-if='isOtherUser'>
- <button @click="toggleMute">Mute/Unmute</button>
- </div>
<span class="glyphicon glyphicon-user"></span>
<div class='user-name'>{{user.name}}</div>
<div class='user-screen-name'>@{{user.screen_name}}</div>
- <div v-if="isOtherUser" class="following-info">
- <div v-if="user.follows_you" class="following">
+ <div v-if="isOtherUser" class="user-interactions">
+ <div v-if="user.follows_you" class="following base06">
Follows you!
</div>
- <div class="followed">
+ <div class="follow">
<span v-if="user.following">
- Following them!
- <button @click="unfollowUser">
- Unfollow!
+ <!--Following them!-->
+ <button @click="unfollowUser" class="base06 base01-background base06-border">
+ Unfollow
</button>
</span>
- <span v-if="!user.following" >
- <button @click="followUser">
- Follow!
+ <span v-if="!user.following">
+ <button @click="followUser" class="base01 base04-background base01-border">
+ Follow
</button>
</span>
</div>
+ <div class='mute' v-if='isOtherUser'>
+ <span v-if='user.muted'>
+ <button @click="toggleMute" class="base04 base01-background base06-border">Unmute</button>
+ </span>
+ <span v-if='!user.muted'>
+ <button @click="toggleMute" class="base01 base04-background base01-border">Mute</button>
+ </span>
+ </div>
</div>
</div>
</div>
@@ -78,6 +82,7 @@
toggleMute () {
const store = this.$store
store.commit('setMuted', {user: this.user, muted: !this.user.muted})
+ store.state.api.backendInteractor.setUserMute(this.user)
}
}
}
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index fe9fd3a9..b0d6db85 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -13,12 +13,39 @@
}
.user-info {
- .following-info {
+ .user-interactions {
display: flex;
+ flex-flow: row wrap;
+ justify-content: center;
div {
flex: 1;
}
+ margin-top: 0.5em;
+ margin-bottom: -1.2em;
+
+ .following {
+ font-size: 14px;
+ flex: 0 0 100%;
+ margin-bottom: 0.5em;
+ }
+
+ .mute {
+ max-width: 200px;
+ }
+
+ .follow {
+ max-width: 200px;
+ }
+
+ button {
+ width: 80%;
+ height: 100%;
+ border: 1px solid;
+ }
+ }
+ .user-screen-name {
+ margin-top: 0.4em;
}
}
</style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-13 20:53:54 +0000