feat(ui): scaffolding feed
This commit is contained in:
+6
-5
@@ -9,8 +9,7 @@
|
||||
},
|
||||
"ignorePatterns": [
|
||||
"modules/*/tests/*",
|
||||
"node_modules/*",
|
||||
"frontend/*"
|
||||
"node_modules/*"
|
||||
],
|
||||
"rules": {
|
||||
"arrow-spacing": [
|
||||
@@ -45,9 +44,11 @@
|
||||
2
|
||||
],
|
||||
"space-unary-ops": [
|
||||
2, {
|
||||
2,
|
||||
{
|
||||
"words": true,
|
||||
"nonwords": false
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Generated
+18
-4
@@ -5635,8 +5635,7 @@
|
||||
"date-fns": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
|
||||
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
|
||||
},
|
||||
"de-indent": {
|
||||
"version": "1.0.2",
|
||||
@@ -9625,8 +9624,7 @@
|
||||
"moment": {
|
||||
"version": "2.25.3",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.25.3.tgz",
|
||||
"integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg=="
|
||||
},
|
||||
"move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
@@ -14174,6 +14172,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-moment": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",
|
||||
"integrity": "sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==",
|
||||
"requires": {
|
||||
"moment": "^2.19.2"
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.4.5",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.5.tgz",
|
||||
@@ -14213,6 +14219,14 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-timeago": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-timeago/-/vue-timeago-5.1.2.tgz",
|
||||
"integrity": "sha512-K74EdER1WO1XX+EIsf5ZeHucZjconfncOTlKxntC7s7q0QAAgiZt5BYenJ/GPHEEcxfmrGsiFWJPYmLHyNzDRg==",
|
||||
"requires": {
|
||||
"date-fns": "^1.29.0"
|
||||
}
|
||||
},
|
||||
"vuetify": {
|
||||
"version": "2.3.12",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.12.tgz",
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"vue": "^2.6.12",
|
||||
"vue-apollo": "^3.0.4",
|
||||
"vue-router": "^3.4.5",
|
||||
"vue-timeago": "^5.1.2",
|
||||
"vuetify": "^2.3.12",
|
||||
"vuex": "^3.5.1"
|
||||
},
|
||||
|
||||
@@ -2,11 +2,16 @@
|
||||
<v-app id="inspire">
|
||||
<v-app-bar app color="white" flat>
|
||||
<v-container class="py-0 fill-height">
|
||||
<v-img contain max-height="30" max-width="30" src="./assets/logo.svg" />
|
||||
<v-toolbar-title class="mr-5" style="margin-top: -4px">
|
||||
<span class="primary--text caption"><b>SPECKLE</b></span
|
||||
> <span class="caption">ADMIN</span>
|
||||
</v-toolbar-title>
|
||||
|
||||
|
||||
|
||||
<v-btn text>
|
||||
<v-img contain max-height="30" max-width="30" src="./assets/logo.svg" />
|
||||
<div class="mt-1">
|
||||
<span class="primary--text"><b>SPECKLE</b></span> <span class="font-weight-light">ADMIN</span>
|
||||
</div>
|
||||
|
||||
</v-btn>
|
||||
|
||||
<v-btn v-for="link in links" :key="link" text>
|
||||
{{ link }}
|
||||
@@ -56,11 +61,11 @@
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<v-sheet min-height="70vh" rounded="lg">
|
||||
<v-main>
|
||||
<router-view></router-view>
|
||||
<!-- <v-sheet min-height="70vh" rounded="lg"> -->
|
||||
<v-main class="pt-0">
|
||||
<router-view :user="user"></router-view>
|
||||
</v-main>
|
||||
</v-sheet>
|
||||
<!-- </v-sheet> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
@@ -113,6 +118,12 @@ export default {
|
||||
data: () => ( {
|
||||
user: {},
|
||||
links: [ "streams", "projects", "profile", "settings", "help" ],
|
||||
} )
|
||||
} ),
|
||||
|
||||
watch:{
|
||||
user( val ){
|
||||
console.log( val )
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -3,9 +3,10 @@ import App from './AppFrontend.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import vuetify from './plugins/vuetify';
|
||||
import { createProvider, onLogin } from './vue-apollo'
|
||||
import { createProvider, } from './vue-apollo'
|
||||
import { signIn } from './auth-helpers'
|
||||
import crs from 'crypto-random-string'
|
||||
import VueTimeago from 'vue-timeago'
|
||||
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
@@ -13,10 +14,16 @@ Vue.config.productionTip = false
|
||||
;
|
||||
/* Semicolon of Doom */
|
||||
|
||||
|
||||
|
||||
( async ( ) => {
|
||||
let result = await signIn( )
|
||||
if ( !result ) return
|
||||
let app = new Vue( {
|
||||
|
||||
Vue.use( VueTimeago, {
|
||||
locale: 'en' } )
|
||||
|
||||
new Vue( {
|
||||
router,
|
||||
store,
|
||||
vuetify,
|
||||
|
||||
@@ -1,8 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>
|
||||
<div v-if="user.streams && user.streams.items">
|
||||
<v-card class="mb-5" elevation="0" rounded="lg">
|
||||
<v-subheader class="text-uppercase"> Recent activity: </v-subheader>
|
||||
<v-chip class="ml-3 mb-3" small color="indigo" text-color="white">
|
||||
all activity
|
||||
</v-chip>
|
||||
<v-chip class="ml-3 mb-3" small color="orange" text-color="white">
|
||||
your activity
|
||||
</v-chip>
|
||||
<v-chip class="ml-3 mb-3" small color="green" text-color="white">
|
||||
team activity
|
||||
</v-chip>
|
||||
</v-card>
|
||||
|
||||
</h1>
|
||||
<v-card
|
||||
v-for="(stream, i) in user.streams.items"
|
||||
:key="i"
|
||||
class="mb-2"
|
||||
elevation="0"
|
||||
rounded="lg"
|
||||
>
|
||||
<v-row class="caption pl-4 pr-4 grey--text text--lighten-1">
|
||||
<v-col><strong>You</strong> created a new stream</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-col class="text-right"><timeago :datetime="parseInt(stream.createdAt)"></timeago></v-col>
|
||||
</v-row>
|
||||
<v-divider></v-divider>
|
||||
<v-card-title>
|
||||
{{ stream.name }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle>
|
||||
{{ stream.description }}
|
||||
</v-card-subtitle>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -15,4 +46,4 @@ export default {
|
||||
data: () => ( {} ),
|
||||
props: [ "user" ],
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user