diff options
author | Julius Härtl <jus@bitgrid.net> | 2018-10-23 15:38:03 +0200 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2018-10-23 22:12:28 +0200 |
commit | 29e34e8fea5c957c30e54847a3d3ed0cf6b7e5eb (patch) | |
tree | 8418539e87e28915d7d20264caf783a8fd57213c /src/App.vue | |
parent | 35cc3588080279c0fea116100a5f1016c8b6212c (diff) |
Add basic routing and profile info page
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'src/App.vue')
-rw-r--r-- | src/App.vue | 145 |
1 files changed, 42 insertions, 103 deletions
diff --git a/src/App.vue b/src/App.vue index 1f6baeb3..805193f7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,131 +1,50 @@ <template> - <div id="content" class="app-social"> - <div id="app-navigation"> + <div class="app-social"> + <div id="app-navigation" v-if="!serverData.public"> <app-navigation :menu="menu"></app-navigation> </div> <div id="app-content"> - <div class="social__container"> - <div class="social__welcome" v-if="!infoHidden"> - <a class="close icon-close" @click="hideInfo()" 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"> - {{ currentUser.displayName }} - <span class="social-id">{{ socialId }}</span> - </div> - <div contenteditable="true" class="message" placeholder="Share a thought…"></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> + <router-view :key="$route.fullPath"></router-view> </div> </div> </template> <style scoped> - .social__welcome { - max-width: 700px; - margin: 15px auto; - padding: 15px; - border-radius: 10px; - background-color: var(--color-background-dark); - } - - .social__welcome h3 { - margin-top: 0; - } - - .social__welcome .icon-close { - float:right; - } - - .social__welcome .social-id { - font-weight: bold; - } - - .social__timeline { - max-width: 700px; - margin: 15px auto; - } - - .new-post { - display: flex; - padding: 10px; - background-color: var(--color-main-background); - position: sticky; - top: 47px; - z-index: 100; - margin-bottom: 10px; - } - .new-post-author { - padding: 5px; - } - .author .social-id { - opacity: .5; - } - .new-post-form { - flex-grow: 1; - position: relative; - } - .message { + .app-social { width: 100%; } - [contenteditable=true]:empty:before{ - content: attr(placeholder); - display: block; /* For Firefox */ - opacity: .5; - } - 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; - } - - #app-content { - position: relative; - } - </style> <script> import { PopoverMenu, - AppNavigation + AppNavigation, + Multiselect, + Avatar } from 'nextcloud-vue'; import TimelineEntry from './components/TimelineEntry'; + import ProfileInfo from './components/ProfileInfo'; export default { name: 'App', components: { - PopoverMenu, AppNavigation, TimelineEntry + PopoverMenu, AppNavigation, TimelineEntry, Multiselect, Avatar, + ProfileInfo }, data: function () { return { infoHidden: false, + state: [], }; }, beforeMount: function() { + // importing server data into the store + const serverDataElmt = document.getElementById('serverData'); + if (serverDataElmt !== null) { + this.$store.commit('setServerData', JSON.parse(document.getElementById('serverData').dataset.server)); + } + let example = { message: 'Want to #DropDropbox? #DeleteGoogle? #decentralize? We got you covered, easy as a piece of 🥞\n' + '\n' + @@ -136,10 +55,19 @@ timestamp: '1 day ago' }; let data = []; - for (let i=0; i<20; i++) { + for (let i=0; i<3; i++) { example.id = Math.floor((Math.random() * 100)); data.push(example); } + data.push({ + 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: 'Admin☁️💻', + authorId: 'admin', + authorAvatar: OC.linkTo('social', 'img/nextcloud.png'), + timestamp: '1 day ago' + }) this.$store.commit('addToTimeline', data); }, methods: { @@ -148,6 +76,9 @@ } }, computed: { + url: function() { + return OC.linkTo('social', 'img/nextcloud.png'); + }, currentUser: function() { return OC.getCurrentUser(); }, @@ -157,21 +88,29 @@ timeline: function() { return this.$store.getters.getTimeline; }, + serverData: function() { + return this.$store.getters.getServerData; + }, menu: function () { let defaultCategories = [ { id: 'social-timeline', classes: [], - href: '#', icon: 'icon-category-monitoring', text: t('social', 'Timeline'), + router: { + name: 'timeline', + }, }, { - id: 'social-your-posts', + id: 'social-account', classes: [], - href: '#', icon: 'icon-user', - text: t('social', 'Your posts'), + text: t('social', 'Your account'), + router: { + name: 'profile', + params: {account: this.currentUser.uid } + }, }, { id: 'social-friends', |