kopia lustrzana https://github.com/nextcloud/social
Julius Härtl
rodzic
e66db019b9
commit
72655b0734
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 17 KiB |
182
src/App.vue
182
src/App.vue
|
|
@ -1,59 +1,123 @@
|
|||
<template>
|
||||
<div id="content" class="app-social">
|
||||
<div id="app-navigation">
|
||||
<app-navigation :menu="menu">
|
||||
<!--<template slot="settings-content">Settings</template>-->
|
||||
</app-navigation>
|
||||
<app-navigation :menu="menu"></app-navigation>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<div class="social__container">
|
||||
<h2>🎉 Nextcloud becomes part of the federated social networks!</h2>
|
||||
<div class="social__welcome">
|
||||
<a class="close icon-close" href="#"><span class="hidden-visually">Close</span></a>
|
||||
<h3>🎉{{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h3>
|
||||
<p>
|
||||
{{ t('social', 'We have automatically created a social account for you. Your social id is the same as the federated cloud id:') }}
|
||||
<span class="social-id">{{ socialId }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="social__timeline">
|
||||
<div class="new-post" data-id="">
|
||||
<div class="new-post-author">
|
||||
<div class="avatar currentUser" data-username="admin"><img src="/index.php/avatar/admin/32?v=1" alt=""></div>
|
||||
</div>
|
||||
<form class="new-post-form">
|
||||
<div class="author currentUser">Julius Haertl</div>
|
||||
<div contenteditable="true" class="message" data-placeholder="New comment …"></div>
|
||||
<input class="submit icon-confirm has-tooltip" type="submit" value="" title="" data-original-title="Post">
|
||||
<div class="submitLoading icon-loading-small hidden"></div>
|
||||
</form>
|
||||
</div>
|
||||
<timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry"></timeline-entry>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.social__welcome {
|
||||
padding: 15px;
|
||||
background-color: var(--color-background-dark);
|
||||
}
|
||||
|
||||
.social__welcome h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.social__welcome .icon-close {
|
||||
float:right;
|
||||
}
|
||||
|
||||
.social-id {
|
||||
font-weight: bold;
|
||||
}
|
||||
.new-post {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--color-background-dark);
|
||||
|
||||
}
|
||||
.new-post-author {
|
||||
padding: 5px;
|
||||
}
|
||||
.new-post-form {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
.message {
|
||||
width: 100%;
|
||||
}
|
||||
input[type=submit] {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
padding: 13px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
import {
|
||||
PopoverMenu,
|
||||
AppNavigation
|
||||
} from 'nextcloud-vue';
|
||||
import TimelineEntry from './components/TimelineEntry';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
PopoverMenu, AppNavigation
|
||||
PopoverMenu, AppNavigation, TimelineEntry
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isOpen: false,
|
||||
// example popover in the content
|
||||
menuPopover: [
|
||||
{
|
||||
icon: 'icon-delete',
|
||||
text: 'Delete item',
|
||||
action: () => {
|
||||
alert('Deleted!');
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'icon-user',
|
||||
text: 'Nextcloud website',
|
||||
action: () => {},
|
||||
href: 'https://nextcloud.com'
|
||||
},
|
||||
{
|
||||
icon: 'icon-details',
|
||||
longtext: 'Add item',
|
||||
action: () => {
|
||||
alert('details');
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// App navigation
|
||||
socialId: function() {
|
||||
return '@' + OC.getCurrentUser().uid + '@' + OC.getHost();
|
||||
},
|
||||
timeline: function() {
|
||||
let example = {
|
||||
message: 'Want to #DropDropbox? #DeleteGoogle? #decentralize? We got you covered, easy as a piece of 🥞\n' +
|
||||
'\n' +
|
||||
'Get started right now: https://nextcloud.com/signup',
|
||||
author: 'Nextcloud 📱☁️💻',
|
||||
authorId: '@nextcloud@mastodon.xyz',
|
||||
authorAvatar: OC.linkTo('social', 'img/nextcloud.png'),
|
||||
timestamp: '1 day ago'
|
||||
};
|
||||
let data = [];
|
||||
for (let i=0; i<20; i++) {
|
||||
example.id = Math.floor((Math.random() * 100));
|
||||
data.push(example);
|
||||
}
|
||||
return data;
|
||||
},
|
||||
menu: function () {
|
||||
let defaultCategories = [
|
||||
{
|
||||
|
|
@ -94,64 +158,6 @@
|
|||
},
|
||||
text: t('social', 'Direct messages'),
|
||||
},
|
||||
/*{
|
||||
caption: true,
|
||||
text: t('social', 'Popular topics'),
|
||||
},
|
||||
{
|
||||
id: 'social-topic-nextcloud',
|
||||
classes: [],
|
||||
icon: 'icon-tag',
|
||||
href: '#',
|
||||
utils: {
|
||||
actions: [
|
||||
{
|
||||
icon: 'icon-delete',
|
||||
text: t('settings', 'Remove topic'),
|
||||
action: function () {
|
||||
console.log('remove')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
text: t('settings', '#nextcloud'),
|
||||
},
|
||||
{
|
||||
id: 'social-topic-mastodon',
|
||||
classes: [],
|
||||
icon: 'icon-tag',
|
||||
href: '#',
|
||||
utils: {
|
||||
actions: [
|
||||
{
|
||||
icon: 'icon-delete',
|
||||
text: t('settings', 'Remove topic'),
|
||||
action: function () {
|
||||
console.log('remove')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
text: t('social', '#mastodon'),
|
||||
},
|
||||
{
|
||||
id: 'social-topic-privacy',
|
||||
classes: [],
|
||||
icon: 'icon-tag',
|
||||
href: '#',
|
||||
utils: {
|
||||
actions: [
|
||||
{
|
||||
icon: 'icon-delete',
|
||||
text: t('settings', 'Remove topic'),
|
||||
action: function () {
|
||||
console.log('remove')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
text: t('social', '#privacy'),
|
||||
},*/
|
||||
];
|
||||
return {
|
||||
items: defaultCategories,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<div class="timeline-entry">
|
||||
<div class="entry-content">
|
||||
<div class="post-avatar"><img alt="" width="32" height="32" :src="item.authorAvatar"></div>
|
||||
<div class="post-content">
|
||||
<div class="post-author-wrapper">
|
||||
<span class="post-author">{{ item.author }}</span>
|
||||
<span class="post-author-id">{{ item.authorId }}</span>
|
||||
</div>
|
||||
<div class="post-message" v-html="formatedMessage">
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-timestamp">{{ item.timestamp }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TimelineEntry',
|
||||
props: ['item'],
|
||||
components: {
|
||||
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
formatedMessage: function() {
|
||||
let message = this.item.message;
|
||||
message = message.replace(/(?:\r\n|\r|\n)/g, '<br />');
|
||||
return message;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.timeline-entry {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--color-background-dark);
|
||||
}
|
||||
|
||||
.social__welcome h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.post-author-id {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.post-avatar {
|
||||
margin: 5px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
float: right;
|
||||
}
|
||||
|
||||
span {
|
||||
/* opacity: 0.5; */
|
||||
}
|
||||
.entry-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.post-timestamp {
|
||||
opacity: .7;
|
||||
}
|
||||
</style>
|
||||
Ładowanie…
Reference in New Issue