therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into wakarimasen/pleroma-fe-develop

Browse source
This commit is contained in:
Roger Braun 2017-03-09 09:19:40 +01:00
commit 2f52669380
28 changed files with 440 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/attachment/attachment.js
View file

@ -11,7 +11,9 @@ const Attachment = {
return {
nsfwImage,
hideNsfwLocal: this.$store.state.config.hideNsfw,
showHidden: false
showHidden: false,
loading: false,
img: document.createElement('img')
}
},
computed: {
@ -20,6 +22,13 @@ const Attachment = {
},
hidden () {
return this.nsfw && this.hideNsfwLocal && !this.showHidden
},
autoHeight () {
if (this.type === 'image' && this.nsfw) {
return {
'min-height': '311px'
}
}
}
},
methods: {
@ -29,10 +38,15 @@ const Attachment = {
}
},
toggleHidden () {
let img = document.createElement('img')
img.src = this.attachment.url
img.onload = () => {
this.showHidden = !this.showHidden
if (this.img.onload) {
this.img.onload()
} else {
this.loading = true
this.img.src = this.attachment.url
this.img.onload = () => {
this.loading = false
this.showHidden = !this.showHidden
}
}
}
}

18
src/components/attachment/attachment.vue
View file

@ -1,15 +1,14 @@
<template>
<div class="attachment" :class="type">
<a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()">
<img :key="nsfwImage" :src="nsfwImage"></img>
<div class="attachment" :class="{[type]: true, loading}" :style="autoHeight">
<a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
<img :key="nsfwImage" :src="nsfwImage"/>
</a>
<div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
<a href="#" @click.prevent="toggleHidden()">Hide</a>
</div>
<a class="image-attachment" v-if="type === 'image' && !hidden"
:href="attachment.url" target="_blank">
<img class="base05-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"></img>
<a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank">
<img class="base05-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"/>
</a>
<video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
@ -18,7 +17,7 @@
<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>
<img :src="attachment.thumb_url"/>
</div>
<div class="text">
<h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1>
@ -45,6 +44,10 @@
display: flex;
}
&.loading {
cursor: progress;
}
.hider {
position: absolute;
margin: 10px;
@ -111,7 +114,6 @@
flex: 1;
img {
width: 100%;
border-style: solid;
border-width: 1px;
border-radius: 5px;

7
src/components/conversation/conversation.js
View file

@ -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)
}
}
}
}

6
src/components/conversation/conversation.vue
View file

@ -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':inConversation='true'></status>
<status v-for="status in conversation" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true'></status>
</div>
</div>
</div>

14
src/components/favorite_button/favorite_button.js
View file

@ -1,5 +1,10 @@
const FavoriteButton = {
props: [ 'status' ],
props: ['status'],
data () {
return {
animated: false
}
},
methods: {
favorite () {
if (!this.status.favorited) {
@ -7,13 +12,18 @@ const FavoriteButton = {
} else {
this.$store.dispatch('unfavorite', {id: this.status.id})
}
this.animated = true
setTimeout(() => {
this.animated = false
}, 500)
}
},
computed: {
classes () {
return {
'icon-star-empty': !this.status.favorited,
'icon-star': this.status.favorited
'icon-star': this.status.favorited,
'animate-spin': this.animated
}
}
}

4
src/components/favorite_button/favorite_button.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<i :class='classes' class='favorite-button fa' v-on:click.prevent='favorite()'></i>
<i :class='classes' class='favorite-button fa' @click.prevent='favorite()'/>
<span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
</div>
</template>
@ -10,6 +10,7 @@
<style lang='scss'>
.favorite-button {
cursor: pointer;
animation-duration: 0.6s;
&:hover {
color: orange;
}
@ -17,4 +18,5 @@
.icon-star {
color: orange;
}
</style>

14
src/components/login_form/login_form.js
View file

@ -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(
() => {},
(error) => {
this.authError = error
this.user.username = ''
this.user.password = ''
}
)
}
}
}

13
src/components/login_form/login_form.vue
View file

@ -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>

33
src/components/nav_panel/nav_panel.vue
View file

@ -1,24 +1,24 @@
<template>
<div class="nav-panel">
<div class="panel panel-default base01-background">
<div class="panel panel-default base02-background">
<ul>
<li v-if='currentUser'>
<router-link to='/main/friends'>
<router-link class="base01-background" to='/main/friends'>
Timeline
</router-link>
</li>
<li v-if='currentUser'>
<router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
<router-link class="base01-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
Mentions
</router-link>
</li>
<li>
<router-link to='/main/public'>
<router-link class="base01-background" to='/main/public'>
Public Timeline
</router-link>
</li>
<li>
<router-link to='/main/all'>
<router-link class="base01-background" to='/main/all'>
The Whole Known Network
</router-link>
</li>
@ -30,7 +30,6 @@
<script src="./nav_panel.js" ></script>
<style lang="scss">
.nav-panel ul {
list-style: none;
margin: 0;
@ -39,7 +38,15 @@
.nav-panel li {
border-bottom: 1px solid;
padding: 0.8em 0.85em;
padding: 0;
&:first-child a {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
&:last-child a {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
}
.nav-panel li:last-child {
@ -48,10 +55,16 @@
.nav-panel a {
display: block;
width: 100%;
padding: 0.8em 0.85em;
&:hover {
background-color: transparent;
}
&.router-link-active {
font-weight: bold
font-weight: bolder;
background-color: transparent;
&:hover {
text-decoration: underline;
}
}
}

19
src/components/notifications/notifications.scss
View file

@ -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;
}
}

5
src/components/notifications/notifications.vue
View file

@ -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}'>

14
src/components/retweet_button/retweet_button.js
View file

@ -1,16 +1,26 @@
const RetweetButton = {
props: [ 'status' ],
props: ['status'],
data () {
return {
animated: false
}
},
methods: {
retweet () {
if (!this.status.repeated) {
this.$store.dispatch('retweet', {id: this.status.id})
}
this.animated = true
setTimeout(() => {
this.animated = false
}, 500)
}
},
computed: {
classes () {
return {
'retweeted': this.status.repeated
'retweeted': this.status.repeated,
'animate-spin': this.animated
}
}
}

2
src/components/retweet_button/retweet_button.vue
View file

@ -11,12 +11,12 @@
@import '../../_variables.scss';
.icon-retweet {
cursor: pointer;
animation-duration: 0.6s;
&:hover {
color: $green;
}
}
.retweeted {
cursor: auto;
color: $green;
}
</style>

6
src/components/status/status.js
View file

@ -9,7 +9,8 @@ const Status = {
props: [
'statusoid',
'expandable',
'inConversation'
'inConversation',
'focused'
],
data: () => ({
replying: false,
@ -34,7 +35,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,

9
src/components/status/status.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'status-conversation': inConversation }">
<div class="status-el base00-background" v-if="!status.deleted" v-bind:class="[{ 'expanded-status': !expandable }, { 'base01-background': focused }, { '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>
@ -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 } }">

2
src/components/status_or_conversation/status_or_conversation.vue
View file

@ -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" :inConversation="false" :statusoid="statusoid"></status>
<status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :inConversation="false" :focused="false" :statusoid="statusoid"></status>
</div>
</template>

75
src/components/timeline/timeline.vue
View file

@ -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>

5
src/components/user_card_content/user_card_content.vue
View file

@ -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 {