diff options
author | Julius Härtl <jus@bitgrid.net> | 2018-10-10 09:11:37 +0200 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2018-10-23 22:11:48 +0200 |
commit | 72655b073486856467f0e57ea31fdbe52d493b6f (patch) | |
tree | bffea255a21b202a625d24084a6b88c74dd897b5 /src/App.vue | |
parent | e66db019b9c9351284ceda4abcb77aeb838cfc85 (diff) |
First UI mockup
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'src/App.vue')
-rw-r--r-- | src/App.vue | 182 |
1 files changed, 94 insertions, 88 deletions
diff --git a/src/App.vue b/src/App.vue index 3f71c5fb..d97b47a3 100644 --- a/src/App.vue +++ b/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, |