huanld/speckle-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(frontend): ticking off various items

Browse Source
This commit is contained in:
Matteo Cominetti
2021-08-03 21:18:49 +02:00
parent 38ffb80222
commit 01efcd2a7e
6 changed files with 127 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/ListItemActivity.vue
+58 -22
View File
@@ -25,35 +25,71 @@
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
color="primary"
>
view
</v-btn>
</v-row>
</v-container>
<div
v-if="activityInfo.description"
class="mt-3"
@@ -93,7 +129,7 @@
<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>
packages/frontend/src/components/SourceAppAvatar.vue
+1 -1
View File
@@ -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"
packages/frontend/src/views/Frontend.vue
+6 -1
View File
@@ -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>
packages/frontend/src/views/ProfileUser.vue
+34 -5
View File
@@ -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
packages/frontend/src/views/stream/Activity.vue
+2 -2
View File
@@ -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>
packages/frontend/src/views/stream/Details.vue
+26 -17
View File
@@ -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>
&nbsp;
{{ 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 @@
&nbsp; 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) {