Page MenuHomePhorge
Files F85825734

No OneTemporary
Actions

Authored By
Unknown
Size
6 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 1378e73025..8e3e07218c 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,70 +1,70 @@
@import '../../_variables.scss';
.notifications {
.panel-heading {
// 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.7em;
}
}
.notification {
// Will have to use pixels here to ensure consistent distance with
// pad alone and pad + border, browsers bad at rounding this with em,
// they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
// which does not happen with 10px vs 4px + 6px.
padding: 0.4em 0 0 10px;
display: flex;
border-bottom: 1px solid silver;
.text {
min-width: 0px;
word-wrap: break-word;
line-height:18px;
.icon-retweet {
color: $green;
}
.icon-reply {
color: $blue;
}
h1 {
margin: 0 0 0.3em;
padding: 0;
font-size: 1em;
line-height:20px;
}
padding: 0.3em 0.8em 0.5em;
p {
margin: 0;
margin-top: 0;
margin-bottom: 0.3em;
}
}
.avatar {
padding-top: 0.3em;
width: 32px;
height: 32px;
border-radius: 50%;
}
&:last-child {
border: none
}
}
.unseen {
border-left: 4px solid rgba(255, 48, 16, 0.65);
padding-left: 6px;
}
}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 180b86a1f4..e0dcb12dfe 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,35 +1,35 @@
<template>
<div class="notifications">
<div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04">
Notifications ({{unseenCount}})
- <button @click.prevent="markAsSeen" class="base06 base02-background">Read!</button>
+ <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}'>
<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>
</div>
<div v-if="notification.type === 'repeat'">
<h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
<p>{{ notification.status.text }}</p>
</div>
<div v-if="notification.type === 'mention'">
<h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
<p>{{ notification.status.text }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./notifications.js"></script>
<style lang="scss" src="./notifications.scss"></style>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8a302e185f..11280a081d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,62 +1,63 @@
<template>
<div class="timeline panel panel-default">
- <div class="panel-heading base01-background base04">
+ <div class="panel-heading timeline-heading base01-background base04">
<div class="title">
{{title}}
</div>
- <button @click.prevent="showNewStatuses" class="base06 base02-background" v-if="timeline.newStatusCount > 0">
+ <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0">
Show new ({{timeline.newStatusCount}})
</button>
- <button @click.prevent class="base04 base01-background no-press" v-if="!timeline.newStatusCount > 0">
+ <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0">
Up-to-date
</button>
</div>
<div class="panel-body">
<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">
<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>
</template>
<script src="./timeline.js"></script>
<style lang="scss">
- .timeline .panel-heading {
- position: relative;
- display: flex;
-
+ .timeline {
+ .timeline-heading {
+ position: relative;
+ display: flex;
+ }
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 70%;
}
- button {
+ .loadmore-button {
position: absolute;
right: 0.6em;
padding: 0.1em 0.3em 0.25em 0.3em;
min-width: 6em;
}
.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>

File Metadata

Mime Type
text/x-diff
Expires
Fri, Oct 30, 2:47 AM (1 d, 4 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1799248
Default Alt Text
(6 KB)

Event Timeline