Merge pull request #368 from specklesystems/matteo/frontend-laundry
Matteo/frontend laundry
This commit is contained in:
Matteo Cominetti
@@ -25,35 +25,72 @@
|
||||
flat
|
||||
>
|
||||
<v-card-text class="pa-5 body-1">
|
||||
<v-chip v-if="targetUser" pill :color="activityInfo.color">
|
||||
<v-avatar left>
|
||||
<user-avatar
|
||||
:id="targetUser.id"
|
||||
:avatar="targetUser.avatar"
|
||||
:size="30"
|
||||
:name="targetUser.name"
|
||||
/>
|
||||
</v-avatar>
|
||||
<v-container>
|
||||
<v-row class="align-center">
|
||||
<v-chip v-if="targetUser" pill :color="activityInfo.color">
|
||||
<v-avatar left>
|
||||
<user-avatar
|
||||
:id="targetUser.id"
|
||||
:avatar="targetUser.avatar"
|
||||
:size="30"
|
||||
:name="targetUser.name"
|
||||
/>
|
||||
</v-avatar>
|
||||
|
||||
{{ targetUser.name }}
|
||||
</v-chip>
|
||||
{{ targetUser.name }}
|
||||
</v-chip>
|
||||
|
||||
<span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
|
||||
<v-chip v-if="activity.info.role" small outlined class="ml-3">
|
||||
<v-icon small left>mdi-account-key-outline</v-icon>
|
||||
{{ activity.info.role.split(':')[1] }}
|
||||
</v-chip>
|
||||
<span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
|
||||
<v-chip v-if="activity.info.role" small outlined class="ml-3">
|
||||
<v-icon small left>mdi-account-key-outline</v-icon>
|
||||
{{ activity.info.role.split(':')[1] }}
|
||||
</v-chip>
|
||||
<v-spacer />
|
||||
|
||||
<v-btn
|
||||
v-if="targetUser && activity.actionType === `stream_permissions_add`"
|
||||
text
|
||||
outlined
|
||||
small
|
||||
:to="'/profile/' + targetUser.id"
|
||||
color="primary"
|
||||
>
|
||||
view
|
||||
</v-btn>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- STREAM -->
|
||||
<v-card v-else-if="activity.resourceType === 'stream' && stream" class="activity-card" flat>
|
||||
<v-card-text class="pa-5 body-1">
|
||||
<router-link :to="url" class="title">
|
||||
<v-icon color="primary" small>mdi-compare-vertical</v-icon>
|
||||
{{ stream.name }}
|
||||
</router-link>
|
||||
<span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
|
||||
<v-container>
|
||||
<v-row class="align-center">
|
||||
<router-link :to="url" class="title">
|
||||
<v-icon color="primary" small>mdi-compare-vertical</v-icon>
|
||||
{{ stream.name }}
|
||||
</router-link>
|
||||
<span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-btn
|
||||
v-if="
|
||||
activity.actionType === `stream_create` ||
|
||||
activity.actionType === `stream_update`
|
||||
"
|
||||
text
|
||||
outlined
|
||||
small
|
||||
:to="url"
|
||||
color="primary"
|
||||
>
|
||||
view
|
||||
</v-btn>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<div
|
||||
v-if="activityInfo.description"
|
||||
class="mt-3"
|
||||
@@ -88,12 +125,12 @@
|
||||
text
|
||||
class="px-0 ml-3"
|
||||
small
|
||||
:to="'/streams/' + stream.id + '/branches/main/commits'"
|
||||
:to="'/streams/' + stream.id + '/branches/main'"
|
||||
>
|
||||
<v-icon small class="mr-2 float-left">mdi-source-commit</v-icon>
|
||||
{{ stream.commits.totalCount }}
|
||||
</v-btn>
|
||||
<v-chip small outlined class="ml-3">
|
||||
<v-chip small outlined class="ml-3 no-hover">
|
||||
<v-icon small left>mdi-account-key-outline</v-icon>
|
||||
{{ stream.role.split(':')[1] }}
|
||||
</v-chip>
|
||||
@@ -123,37 +160,55 @@
|
||||
|
||||
<!-- COMMITS -->
|
||||
<v-card v-else-if="activity.resourceType === 'commit'" class="activity-card" flat>
|
||||
<v-card-text class="pa-5">
|
||||
<div>
|
||||
<v-chip :to="url" :color="activityInfo.color">
|
||||
<v-icon small class="mr-2 float-left" light>{{ activityInfo.icon }}</v-icon>
|
||||
{{ activity.resourceId }}
|
||||
</v-chip>
|
||||
<span class="mx-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
|
||||
<span v-if="activity.actionType !== 'commit_delete' && commit">
|
||||
<v-chip
|
||||
:to="`/streams/${activity.streamId}/branches/${commit.branchName}`"
|
||||
small
|
||||
color="primary"
|
||||
>
|
||||
<v-icon small class="float-left" light>mdi-source-branch</v-icon>
|
||||
{{ commit.branchName }}
|
||||
</v-chip>
|
||||
<span v-if="activity.actionType === 'commit_create'">
|
||||
<span class="mx-3 body-2 font-italic">from</span>
|
||||
<source-app-avatar :application-name="commit.sourceApplication" />
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="activity.actionType !== 'commit_delete' && !commit">
|
||||
[commit deleted]
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="activityInfo.description"
|
||||
class="mt-3 body-1"
|
||||
v-html="activityInfo.description"
|
||||
></div>
|
||||
</v-card-text>
|
||||
<v-container>
|
||||
<v-row class="align-center">
|
||||
<div class="float-left">
|
||||
<v-card-text class="pa-5">
|
||||
<div>
|
||||
<v-chip :to="url" :color="activityInfo.color">
|
||||
<v-icon small class="mr-2 float-left" light>{{ activityInfo.icon }}</v-icon>
|
||||
{{ activity.resourceId }}
|
||||
</v-chip>
|
||||
<span class="mx-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
|
||||
<span v-if="activity.actionType !== 'commit_delete' && commit">
|
||||
<v-chip
|
||||
:to="`/streams/${activity.streamId}/branches/${commit.branchName}`"
|
||||
small
|
||||
color="primary"
|
||||
>
|
||||
<v-icon small class="float-left" light>mdi-source-branch</v-icon>
|
||||
{{ commit.branchName }}
|
||||
</v-chip>
|
||||
<span v-if="activity.actionType === 'commit_create'">
|
||||
<span class="mx-3 body-2 font-italic">from</span>
|
||||
<source-app-avatar :application-name="commit.sourceApplication" />
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="activity.actionType !== 'commit_delete' && !commit">
|
||||
[commit deleted]
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="activityInfo.description"
|
||||
class="mt-3 body-1"
|
||||
v-html="activityInfo.description"
|
||||
></div>
|
||||
</v-card-text>
|
||||
</div>
|
||||
|
||||
<v-spacer />
|
||||
<v-hover v-if="activity.actionType !== 'commit_delete' && commit" v-slot="{ hover }">
|
||||
<router-link :to="url">
|
||||
<preview-image
|
||||
:url="`/preview/${activity.streamId}/commits/${activity.resourceId}`"
|
||||
class="float-left"
|
||||
:height="100"
|
||||
:color="hover"
|
||||
/>
|
||||
</router-link>
|
||||
</v-hover>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -163,10 +218,11 @@
|
||||
<script>
|
||||
import UserAvatar from './UserAvatar'
|
||||
import SourceAppAvatar from './SourceAppAvatar'
|
||||
import PreviewImage from './PreviewImage'
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
export default {
|
||||
components: { UserAvatar, SourceAppAvatar },
|
||||
components: { UserAvatar, SourceAppAvatar, PreviewImage },
|
||||
props: ['activity'],
|
||||
apollo: {
|
||||
you: {
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
:elevation="hover ? 5 : 0"
|
||||
style="transition: all 0.2s ease-in-out"
|
||||
>
|
||||
<img
|
||||
ref="cover"
|
||||
:class="`${hover ? '' : 'grasycale-img'} preview-img`"
|
||||
:src="currentPreviewImg"
|
||||
/>
|
||||
<preview-image
|
||||
:url="`/preview/${stream.d}`"
|
||||
:color="hover"
|
||||
style="width: 100%"
|
||||
></preview-image>
|
||||
<v-card-title class="">{{ stream.name }}</v-card-title>
|
||||
<v-card-text>
|
||||
<span class="caption mb-2 font-italic">
|
||||
@@ -45,7 +45,7 @@
|
||||
text
|
||||
class="px-0"
|
||||
small
|
||||
:to="'/streams/' + stream.id + '/branches/main/commits'"
|
||||
:to="'/streams/' + stream.id + '/branches/main'"
|
||||
>
|
||||
<v-icon small class="mr-2 float-left">mdi-source-commit</v-icon>
|
||||
{{ stream.commits.totalCount }}
|
||||
@@ -72,9 +72,10 @@
|
||||
</template>
|
||||
<script>
|
||||
import UserAvatar from '../components/UserAvatar'
|
||||
import PreviewImage from '@/components/PreviewImage'
|
||||
|
||||
export default {
|
||||
components: { UserAvatar },
|
||||
components: { UserAvatar, PreviewImage },
|
||||
props: {
|
||||
stream: {
|
||||
type: Object,
|
||||
@@ -82,48 +83,6 @@ export default {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPreviewImg: '/loadingImage.png'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPreviewImage().then().catch()
|
||||
},
|
||||
methods: {
|
||||
async getPreviewImage() {
|
||||
let previewUrl = `/preview/${this.stream.id}`
|
||||
const res = await fetch(previewUrl, {
|
||||
headers: localStorage.getItem('AuthToken')
|
||||
? { Authorization: `Bearer ${localStorage.getItem('AuthToken')}` }
|
||||
: {}
|
||||
})
|
||||
const blob = await res.blob()
|
||||
this.currentPreviewImg = URL.createObjectURL(blob)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.grasycale-img {
|
||||
transition: all 0.3s;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.stream-link a {
|
||||
/* color: inherit; */
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stream-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<img
|
||||
ref="cover"
|
||||
:height="height"
|
||||
:class="`${color ? '' : 'grasycale-img'} preview-img`"
|
||||
:src="currentPreviewImg"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 180
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPreviewImg: '/loadingImage.png'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPreviewImage().then().catch()
|
||||
},
|
||||
methods: {
|
||||
async getPreviewImage() {
|
||||
const res = await fetch(this.url, {
|
||||
headers: localStorage.getItem('AuthToken')
|
||||
? { Authorization: `Bearer ${localStorage.getItem('AuthToken')}` }
|
||||
: {}
|
||||
})
|
||||
const blob = await res.blob()
|
||||
this.currentPreviewImg = URL.createObjectURL(blob)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.grasycale-img {
|
||||
transition: all 0.3s;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
/* width: 100%; */
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.stream-link a {
|
||||
/* color: inherit; */
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stream-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-chip
|
||||
small
|
||||
class="ma-1 caption white--text"
|
||||
class="ma-1 caption white--text no-hover"
|
||||
:color="color"
|
||||
:size="size"
|
||||
v-bind="attrs"
|
||||
|
||||
@@ -104,13 +104,15 @@
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
<div class="mx-5 m t-5">
|
||||
<v-btn
|
||||
v-if="stream.role === 'stream:owner'"
|
||||
outlined
|
||||
color="primary"
|
||||
rounded
|
||||
block
|
||||
height="50"
|
||||
class="ma-3 d-block"
|
||||
|
||||
@click="showStreamInviteDialog"
|
||||
>
|
||||
<v-icon small class="mr-2">mdi-email-send-outline</v-icon>
|
||||
@@ -118,6 +120,7 @@
|
||||
<br />
|
||||
stream by email
|
||||
</v-btn>
|
||||
</div>
|
||||
<stream-invite-dialog ref="streamInviteDialog" :stream-id="stream.id" />
|
||||
</v-navigation-drawer>
|
||||
<v-main :style="background">
|
||||
@@ -329,4 +332,6 @@ export default {
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.no-hover:before {display: none}
|
||||
</style>
|
||||
|
||||
@@ -19,18 +19,26 @@
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="6" xl="4" v-for="(stream, i) in user.streams.items" :key="i">
|
||||
<list-item-stream :stream="stream"></list-item-stream>
|
||||
</v-col >
|
||||
<v-col
|
||||
v-for="(stream, i) in user.streams.items"
|
||||
:key="i"
|
||||
cols="12"
|
||||
sm="12"
|
||||
md="6"
|
||||
lg="6"
|
||||
xl="4"
|
||||
>
|
||||
<list-item-stream :stream="stream"></list-item-stream>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
import userById from '../graphql/userById.gql'
|
||||
import UserInfoCard from '../components/UserInfoCard'
|
||||
import ListItemStream from '../components/ListItemStream'
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
export default {
|
||||
name: 'ProfileUser',
|
||||
@@ -38,7 +46,28 @@ export default {
|
||||
data: () => ({}),
|
||||
apollo: {
|
||||
user: {
|
||||
query: userById,
|
||||
query: gql`
|
||||
query User($id: String!) {
|
||||
user(id: $id) {
|
||||
id
|
||||
email
|
||||
name
|
||||
bio
|
||||
company
|
||||
avatar
|
||||
verified
|
||||
profiles
|
||||
role
|
||||
suuid
|
||||
streams {
|
||||
totalCount
|
||||
}
|
||||
commits {
|
||||
totalCount
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables() {
|
||||
return {
|
||||
id: this.$route.params.userId
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<h3 class="title font-italic font-weight-thin my-5">Recent activity on this Stream</h3>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-timeline v-if="stream" align-top :dense="$vuetify.breakpoint.mobile">
|
||||
<v-timeline v-if="stream" align-top dense>
|
||||
<list-item-activity
|
||||
v-for="activity in stream.activity.items"
|
||||
:key="activity.time"
|
||||
@@ -20,7 +20,7 @@
|
||||
<div slot="no-results">There are no ctivities to load</div>
|
||||
</infinite-loading>
|
||||
</v-timeline>
|
||||
<v-timeline v-else-if="$apollo.loading" align-top :dense="$vuetify.breakpoint.mobile">
|
||||
<v-timeline v-else-if="$apollo.loading" align-top dense>
|
||||
<v-timeline-item v-for="i in 6" :key="i" medium>
|
||||
<v-skeleton-loader type="article"></v-skeleton-loader>
|
||||
</v-timeline-item>
|
||||
|
||||
@@ -116,7 +116,7 @@ export default {
|
||||
//this.$router.push does not work, refresh entire window
|
||||
|
||||
this.$router.push({
|
||||
path: `/streams/${this.streamId}/branches/${encodeURIComponent(dialog.name)}/commits`
|
||||
path: `/streams/${this.streamId}/branches/${encodeURIComponent(dialog.name)}`
|
||||
})
|
||||
} else {
|
||||
this.$apollo.queries.stream.refetch()
|
||||
|
||||
@@ -7,9 +7,10 @@
|
||||
</v-col>
|
||||
<v-col v-if="stream" cols="12">
|
||||
<h1 class="display-1">{{ stream.name }}</h1>
|
||||
<h3 class="title font-italic font-weight-thin my-5">
|
||||
{{ truncate(stream.description) }}
|
||||
</h3>
|
||||
<h3
|
||||
class="title font-italic font-weight-thin my-5"
|
||||
v-html="hyperlink(truncate(stream.description))"
|
||||
></h3>
|
||||
|
||||
<!-- <v-card class="mt-5 pa-4" elevation="0" rounded="lg"> -->
|
||||
<v-row v-if="stream">
|
||||
@@ -87,7 +88,7 @@
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-row align="center" justify="center">
|
||||
<v-chip small class="mr-2">
|
||||
<v-chip small class="mr-2 no-hover">
|
||||
<v-icon small class="mr-2">mdi-source-commit</v-icon>
|
||||
{{ latestCommit.id }}
|
||||
</v-chip>
|
||||
@@ -124,7 +125,7 @@
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-row align="center" justify="center">
|
||||
<v-chip small class="mr-2">
|
||||
<v-chip small class="mr-2 no-hover">
|
||||
<v-icon small class="mr-2">mdi-source-commit</v-icon>
|
||||
{{ commit.id }}
|
||||
</v-chip>
|
||||
@@ -143,8 +144,8 @@
|
||||
<v-row align="center" justify="center">
|
||||
<span class="font-weight-bold primary--text py-3 my-4">
|
||||
<v-icon class="mr-2 float-left" color="primary">mdi-source-commit</v-icon>
|
||||
SEE ALL ({{ selectedBranch.commits.totalCount }}) COMMITS ON
|
||||
{{ selectedBranch.name }}
|
||||
See all commits on
|
||||
{{ selectedBranch.name }} ({{ selectedBranch.commits.totalCount }})
|
||||
</span>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
@@ -159,20 +160,20 @@
|
||||
<v-col cols="12" sm="12" md="4" lg="3" xl="3">
|
||||
<h4 class="space-grotesk mb-3">About:</h4>
|
||||
<div>
|
||||
<v-chip class="mr-3 mb-3">
|
||||
<v-chip class="mr-3 mb-3 no-hover">
|
||||
<v-icon small left>mdi-source-branch</v-icon>
|
||||
|
||||
{{ stream.branches.totalCount }}
|
||||
branch{{ stream.branches.totalCount === 1 ? '' : 'es' }}
|
||||
</v-chip>
|
||||
<v-chip class="mr-3 mb-3">
|
||||
<v-chip class="mr-3 mb-3 no-hover">
|
||||
<v-icon small left>mdi-source-commit</v-icon>
|
||||
|
||||
|
||||
{{ stream.commits.totalCount }}
|
||||
commit{{ stream.commits.totalCount === 1 ? '' : 's' }}
|
||||
</v-chip>
|
||||
<v-chip class="mr-3 mb-3">
|
||||
<v-chip class="mr-3 mb-3 no-hover">
|
||||
<span
|
||||
v-if="stream.isPublic"
|
||||
v-tooltip="`Anyone can view this stream. Only you and collaborators can edit it.`"
|
||||
@@ -185,19 +186,23 @@
|
||||
private
|
||||
</span>
|
||||
</v-chip>
|
||||
<v-chip v-if="loggedIn" class="mr-3 mb-3">
|
||||
<v-chip v-if="loggedIn" class="mr-3 mb-3 no-hover">
|
||||
<v-icon small left>mdi-account-key-outline</v-icon>
|
||||
{{ stream.role.split(':')[1] }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<div v-tooltip="formatDate(stream.createdAt)" class="caption mb-3">
|
||||
Created
|
||||
<timeago :datetime="stream.createdAt"></timeago>
|
||||
<div class="caption mb-3">
|
||||
<span v-tooltip="formatDate(stream.createdAt)">
|
||||
Created
|
||||
<timeago :datetime="stream.createdAt"></timeago>
|
||||
</span>
|
||||
</div>
|
||||
<div v-tooltip="formatDate(stream.updatedAt)" class="caption">
|
||||
Updated
|
||||
<timeago :datetime="stream.updatedAt"></timeago>
|
||||
<div class="caption">
|
||||
<span v-tooltip="formatDate(stream.updatedAt)">
|
||||
Updated
|
||||
<timeago :datetime="stream.updatedAt"></timeago>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="space-grotesk mt-7 mb-3">Collaborators:</h4>
|
||||
@@ -356,6 +361,10 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
hyperlink(text) {
|
||||
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi
|
||||
return text.replace(exp, '<a target="_blank" href="$1">$1</a>')
|
||||
},
|
||||
truncate(input, length = 250) {
|
||||
if (!input) return ''
|
||||
if (input.length > length) {
|
||||
|
||||
Reference in New Issue
Block a user