aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/conversation/conversation.js7
-rw-r--r--src/components/conversation/conversation.vue6
-rw-r--r--src/components/login_form/login_form.js14
-rw-r--r--src/components/login_form/login_form.vue13
-rw-r--r--src/components/notifications/notifications.scss19
-rw-r--r--src/components/notifications/notifications.vue5
-rw-r--r--src/components/status/status.js6
-rw-r--r--src/components/status/status.vue9
-rw-r--r--src/components/status_or_conversation/status_or_conversation.vue2
-rw-r--r--src/components/timeline/timeline.vue75
-rw-r--r--src/components/user_card_content/user_card_content.vue5
11 files changed, 122 insertions, 39 deletions
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index ecc76e71..281b0183 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -47,6 +47,13 @@ const conversation = {
.then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
.then(() => this.fetchConversation())
}
+ },
+ focused: function (id) {
+ if (this.statusoid.retweeted_status) {
+ return (id === this.statusoid.retweeted_status.id)
+ } else {
+ return (id === this.statusoid.id)
+ }
}
}
}
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 9675e69f..33a43e15 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -2,13 +2,13 @@
<div class="timeline panel panel-default base00-background">
<div class="panel-heading base01-background base04">
Conversation
- <div v-if="collapsable">
+ <span v-if="collapsable" style="float:right;">
<small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
- </div>
+ </span>
</div>
<div class="panel-body">
<div class="timeline">
- <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
+ <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false':focused="focused(status.id)"></status>
</div>
</div>
</div>
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index b55f770f..bc801397 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -1,15 +1,21 @@
const LoginForm = {
data: () => ({
- user: {}
+ user: {},
+ authError: false
}),
computed: {
loggingIn () { return this.$store.state.users.loggingIn }
},
methods: {
submit () {
- this.$store.dispatch('loginUser', this.user).then(() => {
- this.$router.push('/main/friends')
- })
+ this.$store.dispatch('loginUser', this.user).then(
+ () => { this.$router.push('/main/friends')},
+ (error) => {
+ this.authError = error
+ this.user.username = ''
+ this.user.password = ''
+ }
+ )
}
}
}
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index c0ea4313..b2fa5341 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -1,7 +1,7 @@
<template>
<div class="login panel panel-default base00-background">
<!-- Default panel contents -->
- <div class="panel-heading base01-background">
+ <div class="panel-heading base01-background base04">
Log in
</div>
<div class="panel-body">
@@ -17,6 +17,9 @@
<div class='form-group'>
<button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
</div>
+ <div v-if="authError" class='form-group'>
+ <div class='error base05'>{{authError}}</div>
+ </div>
</form>
</div>
</div>
@@ -39,6 +42,14 @@
margin-top: 1.0em;
min-height: 28px;
}
+
+ .error {
+ border-radius: 5px;
+ text-align: center;
+ background-color: rgba(255, 48, 16, 0.65);
+ min-height: 28px;
+ line-height: 28px;
+ }
}
</style>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 100349eb..6ad7ec1e 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -6,13 +6,26 @@
// force the text to stay centered, while keeping
// the button in the right side of the panel heading
position: relative;
- button {
+ .read-button {
position: absolute;
padding: 0.1em 0.3em 0.25em 0.3em;
- right: 0.6em;
+ right: 0.7em;
}
}
+ .unseen-count {
+ display: inline-block;
+ background-color: rgba(255, 16, 8, 0.8);
+ text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
+ min-width: 1.3em;
+ border-radius: 1.3em;
+ margin: 0 0.2em 0 -0.4em;
+ color: white;
+ font-size: 0.9em;
+ text-align: center;
+ line-height: 1.3em;
+ }
+
.notification {
// Will have to use pixels here to ensure consistent distance with
// pad alone and pad + border, browsers bad at rounding this with em,
@@ -64,7 +77,7 @@
}
.unseen {
- border-left: 4px solid rgba(255, 48, 16, 0.65);
+ border-left: 4px solid rgba(255, 16, 8, 0.75);
padding-left: 6px;
}
}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 41c274aa..91f6cfdc 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -2,8 +2,9 @@
<div class="notifications">
<div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04">
- Notifications ({{unseenCount}})
- <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
+ <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
+ Notifications
+ <button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button>
</div>
<div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 22292ffa..bc9d6e6c 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -8,7 +8,8 @@ import UserCardContent from '../user_card_content/user_card_content.vue'
const Status = {
props: [
'statusoid',
- 'expandable'
+ 'expandable',
+ 'focused'
],
data: () => ({
replying: false,
@@ -30,7 +31,8 @@ const Status = {
loggedIn () {
return !!this.$store.state.users.currentUser
},
- muted () { return !this.unmuted && this.status.user.muted }
+ muted () { return !this.unmuted && this.status.user.muted },
+ isReply () { return !!this.status.in_reply_to_status_id }
},
components: {
Attachment,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 585bf621..6476e1e5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
<template>
- <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
+ <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="[{ 'expanded-status': !expandable }, { 'base01-background': focused }]">
<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>
@@ -34,6 +34,13 @@
{{status.in_reply_to_screen_name}}
</router-link>
</small>
+ <template v-if="isReply">
+ <small>
+ <router-link :to="{ name: 'conversation', params: { id: status.in_reply_to_status_id } }">
+ <i class="icon-reply"></i>
+ </router-link>
+ </small>
+ </template>
-
<small>
<router-link :to="{ name: 'conversation', params: { id: status.id } }">
diff --git a/src/components/status_or_conversation/status_or_conversation.vue b/src/components/status_or_conversation/status_or_conversation.vue
index 4fabfab2..4aaaf2ff 100644
--- a/src/components/status_or_conversation/status_or_conversation.vue
+++ b/src/components/status_or_conversation/status_or_conversation.vue
@@ -1,7 +1,7 @@
<template>
<div>
<conversation v-if="expanded" @toggleExpanded="toggleExpanded" :collapsable="true" :statusoid="statusoid"></conversation>
- <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :statusoid="statusoid"></status>
+ <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :statusoid="statusoid" :focused="false"></status>
</div>
</template>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 15ac5ff8..ac074f3c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,23 +1,26 @@
<template>
<div class="timeline panel panel-default">
- <div class="panel-heading base01-background base04">{{title}}</div>
+ <div class="panel-heading timeline-heading base01-background base04">
+ <div class="title">
+ {{title}}
+ </div>
+ <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timeline.error">
+ Show new ({{timeline.newStatusCount}})
+ </button>
+ <button @click.prevent class="base06 error no-press loadmore-button" v-if="timeline.error">
+ Error fetching updates
+ </button>
+ <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0 && !timeline.error">
+ Up-to-date
+ </button>
+ </div>
<div class="panel-body">
<div class="timeline">
- <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
- <div class="base01-background base05-border new-status-notification">
- <p class="text-center" >
- {{timeline.newStatusCount}} new statuses
- </p>
- </div>
- </a>
<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">
- <div class="base01-background base05-border new-status-notification">
- <p class="text-center" >
- Load older statuses.
- </p>
- </div>
+ <div class="base01-background base05-border new-status-notification text-center">Load older statuses.</div>
</a>
+ <div class="base01-background base05-border new-status-notification text-center" v-else>...</div>
</div>
</div>
</div>
@@ -25,14 +28,42 @@
<script src="./timeline.js"></script>
<style lang="scss">
- .new-status-notification {
- border-style: solid;
- border-width: 1px 0 1px 0;
- font-size: 1.1em;
- p {
- margin: 0px;
- padding: 10px;
- }
- }
+ .timeline {
+ .timeline-heading {
+ position: relative;
+ display: flex;
+ }
+ .title {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 70%;
+ }
+ .loadmore-button {
+ position: absolute;
+ right: 0.6em;
+ padding: 0.1em 0.3em 0.25em 0.3em;
+ min-width: 6em;
+ }
+ .error {
+ background-color: rgba(255, 48, 16, 0.65);
+ }
+ .no-press {
+ opacity: 0.8;
+ cursor: default;
+ }
+ }
+
+
+ .new-status-notification {
+ position:relative;
+ margin-top: -1px;
+ font-size: 1.1em;
+ border-width: 1px 0 0 0;
+ border-style: solid;
+ border-radius: 0 0 10px 10px;
+ padding: 10px;
+ z-index: 1;
+ }
</style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 87a445ca..3fa34773 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -104,6 +104,11 @@
.profile-panel-background {
background-size: cover;
border-radius: 10px;
+
+ .panel-heading {
+ padding: 0.6em 0em;
+ text-align: center;
+ }
}
.profile-panel-body {
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-21 11:49:23 +0000