improvement(frontend): various improvements
profile page alignment issues; adds latest commit in stream sidebar to reduce confusion when no commits on main, and there are other commits on other branches; removes two unused components; adds latest commit to stream query.
This commit is contained in:
Dimitrie Stefanescu
@@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="text-center py-3" style="position: absolute">
|
||||
<user-avatar :id="user.id" :avatar="user.avatar" :name="user.name" :size="30" />
|
||||
</div>
|
||||
<div class="ml-12">
|
||||
<v-row class="caption py-3">
|
||||
<v-col class="pb-2">
|
||||
<v-icon small>mdi-source-commit</v-icon>
|
||||
You have
|
||||
<strong>
|
||||
<span v-if="commit.items">{{ commit.items.length }} new commits</span>
|
||||
<span v-else>a new commit</span>
|
||||
</strong>
|
||||
in
|
||||
<strong>
|
||||
<router-link :to="'streams/' + commit.streamId">
|
||||
{{ commit.streamName }}
|
||||
</router-link>
|
||||
</strong>
|
||||
|
||||
<timeago :datetime="commit.createdAt"></timeago>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-card class="mb-3" elevation="0" rounded="lg">
|
||||
<v-card-title v-if="!commit.items" class="subtitle-2">
|
||||
<router-link :to="`streams/${commit.streamId}/commits/${commit.id}`">
|
||||
{{ commit.message }}
|
||||
</router-link>
|
||||
</v-card-title>
|
||||
<v-expansion-panels v-else multiple :value="expando" flat>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-header class="pl-4">
|
||||
<span class="subtitle-2">
|
||||
{{ commit.message }}
|
||||
</span>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<v-list dense>
|
||||
<v-list-item
|
||||
v-for="(item, i) in commit.items"
|
||||
:key="i"
|
||||
:to="`streams/${item.streamId}/commits/${item.id}`"
|
||||
>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ item.message }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-icon class="caption">
|
||||
<timeago :datetime="item.createdAt"></timeago>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import UserAvatar from './UserAvatar'
|
||||
|
||||
export default {
|
||||
components: { UserAvatar },
|
||||
props: {
|
||||
commit: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
user: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expando: [0]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div class="pt-4">
|
||||
<div class="text-center" style="position: absolute">
|
||||
<user-avatar :id="user.id" :avatar="user.avatar" :name="user.name" :size="30" />
|
||||
</div>
|
||||
<div class="ml-12">
|
||||
<v-row class="caption">
|
||||
<v-col cols="12" class="pb-2 mb-3">
|
||||
<v-icon small>mdi-compare-vertical</v-icon>
|
||||
You have a
|
||||
<strong>new stream</strong>
|
||||
|
||||
<timeago :datetime="stream.createdAt"></timeago>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-card class="mb-3" elevation="0" rounded="lg">
|
||||
<v-row justify-center>
|
||||
<v-col cols="12">
|
||||
<v-card-title class="subtitle-2">
|
||||
<router-link :to="'streams/' + stream.id" class="mr-4">
|
||||
{{ stream.name }}
|
||||
</router-link>
|
||||
<div class="caption">
|
||||
<v-icon
|
||||
v-tooltip="
|
||||
stream.branches.totalCount +
|
||||
' branch' +
|
||||
(stream.branches.totalCount === 1 ? '' : 'es')
|
||||
"
|
||||
small
|
||||
>
|
||||
mdi-source-branch
|
||||
</v-icon>
|
||||
<span class="mr-2">{{ stream.branches.totalCount }}</span>
|
||||
<v-icon
|
||||
v-tooltip="
|
||||
stream.commits.totalCount +
|
||||
' commit' +
|
||||
(stream.commits.totalCount === 1 ? '' : 's')
|
||||
"
|
||||
small
|
||||
>
|
||||
mdi-source-commit
|
||||
</v-icon>
|
||||
<span class="mr-2">{{ stream.commits.totalCount }}</span>
|
||||
<v-icon
|
||||
v-tooltip="
|
||||
stream.collaborators.length +
|
||||
' collaborator' +
|
||||
(stream.collaborators.length === 1 ? '' : 's')
|
||||
"
|
||||
small
|
||||
>
|
||||
mdi-account-outline
|
||||
</v-icon>
|
||||
<span class="mr-2 pr-2">{{ stream.collaborators.length }}</span>
|
||||
</div>
|
||||
</v-card-title>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import UserAvatar from './UserAvatar'
|
||||
|
||||
export default {
|
||||
components: { UserAvatar },
|
||||
props: {
|
||||
stream: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
user: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
isFeed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -21,11 +21,35 @@
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-divider class="mx-4"></v-divider>
|
||||
<v-card-text v-if="isHomeRoute && stream.commits.items.length !== 0">
|
||||
<p class="mb-2">
|
||||
Latest update:
|
||||
<timeago :datetime="stream.commits.items[0].createdAt"></timeago>
|
||||
</p>
|
||||
<v-chip
|
||||
small
|
||||
color="primary"
|
||||
class="pa-2"
|
||||
:to="`/streams/${stream.id}/commits/${stream.commits.items[0].id}`"
|
||||
>
|
||||
<v-icon small class="mr-1">mdi-source-commit</v-icon>
|
||||
{{ stream.commits.items[0].id }}
|
||||
</v-chip>
|
||||
on
|
||||
<router-link
|
||||
class="text-decoration-none"
|
||||
:to="`/streams/${stream.id}/branches/${stream.commits.items[0].branchName}`"
|
||||
>
|
||||
<v-icon small color="primary">mdi-source-branch</v-icon>
|
||||
{{ stream.commits.items[0].branchName }}
|
||||
</router-link>
|
||||
</v-card-text>
|
||||
<v-divider class="mx-4"></v-divider>
|
||||
<v-card-text>
|
||||
<p>
|
||||
<!-- <p>
|
||||
Updated
|
||||
<timeago v-tooltip="formatDate(stream.updatedAt)" :datetime="stream.updatedAt"></timeago>
|
||||
</p>
|
||||
</p> -->
|
||||
<p>
|
||||
Created
|
||||
<timeago v-tooltip="formatDate(stream.createdAt)" :datetime="stream.createdAt"></timeago>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
<v-card-text v-if="$apollo.loading">Loading...</v-card-text>
|
||||
<div v-if="authorizedApps && authorizedApps.length !== 0">
|
||||
<v-card-text v-if="authorizedApps && authorizedApps.length !== 0">
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="app in authorizedApps"
|
||||
@@ -31,7 +31,7 @@
|
||||
</v-icon>
|
||||
{{ app.name }}
|
||||
</h3>
|
||||
<p>
|
||||
<p class="text-truncate">
|
||||
{{ app.description }}
|
||||
<span v-show="app.id === 'spklwebapp'" class="caption">
|
||||
(This is the app your're currently using!)
|
||||
@@ -62,7 +62,7 @@
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
@@ -93,7 +93,7 @@ export default {
|
||||
}
|
||||
}
|
||||
`,
|
||||
update: (data) => data.user.authorizedApps
|
||||
update: (data) => data.user.authorizedApps.filter(app => app.id !== 'spklwebapp')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -16,8 +16,13 @@ query Stream($id: String!) {
|
||||
branches {
|
||||
totalCount
|
||||
}
|
||||
commits {
|
||||
commits(limit: 1) {
|
||||
totalCount
|
||||
items {
|
||||
id
|
||||
branchName
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,14 +67,6 @@ const routes = [
|
||||
},
|
||||
component: () => import('../views/Streams.vue')
|
||||
},
|
||||
// {
|
||||
// path: 'streams',
|
||||
// name: 'streams',
|
||||
// meta: {
|
||||
// title: 'Streams | Speckle'
|
||||
// },
|
||||
// component: () => import('../views/Streams.vue')
|
||||
// },
|
||||
{
|
||||
path: 'streams/:streamId',
|
||||
// name: 'streams',
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="8" lg="9" xl="8" class="pt-10">
|
||||
<user-authorised-apps />
|
||||
<v-alert type="info" class="my-5 mt-10">
|
||||
<v-alert type="info" class="my-5 mt-10 mx-4">
|
||||
Heads up! The sections below are intended for developers.
|
||||
</v-alert>
|
||||
<v-card color="transparent" class="elevation-0 mt-3">
|
||||
@@ -20,8 +20,14 @@
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
<user-access-tokens />
|
||||
<user-apps />
|
||||
<v-card color="transparent" flat>
|
||||
<v-card-text>
|
||||
<user-access-tokens />
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<user-apps />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
@@ -133,11 +133,7 @@
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
|
||||
<no-data-placeholder
|
||||
v-if="!latestCommit"
|
||||
:message="`No data here! Here's how to get started:`"
|
||||
/>
|
||||
<no-data-placeholder v-if="!latestCommit" :message="`This branch has no commits.`" />
|
||||
</v-card>
|
||||
|
||||
<v-card
|
||||
|
||||
Reference in New Issue
Block a user