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

fix(frontend): comment link & attachment styling in both themes (#1102)

Browse Source 
* Adding top-level ID to all v-app instances

* fix(frontend): comment link & attachment styling in both themes

* fix(frontend): some TS typing errors
This commit is contained in:
Kristaps Fabians Geikins
2022-10-12 11:08:23 +03:00
committed by GitHub
parent 718e0d6081
commit ca5cfaaf2b
13 changed files with 162 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/package.json
+1 -1
View File
@@ -92,7 +92,7 @@
"vite": "^3.1.0",
"vite-bundle-visualizer": "^0.4.1",
"vite-plugin-simple-gql": "^0.5.0",
"vue-tsc": "^0.40.13"
"vue-tsc": "^1.0.3"
},
"engines": {
"node": "^16.0.0"
packages/frontend/src/main/components/comments/CommentThreadReply.vue
+50 -18
View File
@@ -2,21 +2,18 @@
<!-- eslint-disable vue/no-v-html -->
<div
class="d-flex align-center comment-thread-reply"
:class="
isUserOwned ? 'comment-thread-reply--author' : 'comment-thread-reply--visitor'
"
@mouseenter="hover = true"
@mouseleave="hover = false"
>
<div
:class="`flex-grow-1 d-flex flex-column px-2 py-1 mb-2 rounded-xl elevation-2 ${
$userId() === reply.authorId ? 'primary white--text' : 'background'
}`"
:class="`comment-thread-reply__inner flex-grow-1 d-flex flex-column px-2 py-1 mb-2 rounded-xl elevation-2`"
style="width: 290px"
>
<div class="d-flex">
<div
:class="`d-inline-block ${
$userId() === reply.authorId ? 'xxx-order-last' : ''
}`"
>
<div :class="`d-inline-block`">
<user-avatar :id="reply.authorId" :size="30" />
</div>
<div
@@ -32,7 +29,7 @@
<comment-thread-reply-attachments
v-if="reply.text.attachments && reply.text.attachments.length"
:attachments="reply.text.attachments"
:primary="$userId() === reply.authorId"
:primary="isUserOwned"
/>
</div>
</div>
@@ -84,6 +81,8 @@ import SmartTextEditor from '@/main/components/common/text-editor/SmartTextEdito
import { SMART_EDITOR_SCHEMA } from '@/main/lib/viewer/comments/commentsHelper'
import CommentThreadReplyAttachments from '@/main/components/comments/CommentThreadReplyAttachments.vue'
import { useCommitObjectViewerParams } from '@/main/lib/viewer/commit-object-viewer/stateManager'
import { useIsLoggedIn } from '@/main/lib/core/composables/core'
import { computed } from 'vue'
export default {
components: {
@@ -96,9 +95,14 @@ export default {
stream: { type: Object, default: () => null },
index: { type: Number, default: 0 }
},
setup() {
setup(props) {
const { streamId, resourceId, isEmbed } = useCommitObjectViewerParams()
return { streamId, resourceId, isEmbed }
const { userId } = useIsLoggedIn()
const isUserOwned = computed(
() => !!(userId.value && userId.value === props.reply?.authorId)
)
return { streamId, resourceId, isEmbed, isUserOwned }
},
data() {
return {
@@ -111,8 +115,7 @@ export default {
canArchive() {
if (this.isEmbed) return false
if (!this.reply || !this.stream) return false
if (this.stream.role === 'stream:owner' || this.reply.authorId === this.$userId())
return true
if (this.stream.role === 'stream:owner' || this.isUserOwned) return true
return false
}
},
@@ -145,18 +148,47 @@ export default {
}
}
</script>
<style scoped lang="scss">
:deep(.smart-text-editor),
:deep(.comment-attachments) {
<style lang="scss">
// Theme-specific coloring
.comment-thread-reply {
$base: &;
// Active user's reply
&.comment-thread-reply--author {
& > #{$base}__inner {
background-color: var(--v-primary-base);
border-color: var(--v-primary-base);
&,
a {
color: #ffffff;
}
}
}
// Guest's reply
&.comment-thread-reply--visitor {
& > #{$base}__inner {
background-color: var(--v-background-base);
border-color: var(--v-background-base);
&,
a {
color: var(--v-text-base);
}
}
}
}
.smart-text-editor,
.comment-attachments {
a {
font-weight: bold;
color: white;
text-decoration: none;
word-break: break-all;
}
}
:deep(.smart-text-editor) {
.smart-text-editor {
a:after {
content: ' ↗ ';
}
packages/frontend/src/main/components/comments/CommentThreadReplyAttachments.vue
+25 -3
View File
@@ -1,18 +1,21 @@
<template>
<div class="comment-attachments d-flex">
<div
class="comment-attachments d-flex"
:class="primary ? 'comment-attachments--primary' : 'comment-attachments--secondary'"
>
<div class="text-caption d-flex flex-column">
<a
v-for="attachment in attachments"
:key="attachment.id"
v-tooltip="attachment.fileName"
href="javascript:;"
:class="`my-1 ${primary ? '' : 'blue--text'}`"
:class="`my-1`"
@click="
showAttachmentPreview = true
selectedAttachment = attachment
"
>
<v-icon small :class="`${primary ? 'white--text' : 'blue--text'}`">
<v-icon small>
{{ icon(attachment.fileType) }}
</v-icon>
{{ attachment.fileName.substring(0, 22) }}
@@ -76,3 +79,22 @@ export default Vue.extend({
}
})
</script>
<style scoped lang="scss">
.comment-attachments {
$base: &;
&#{$base}--primary {
a,
i {
color: #ffffff !important;
}
}
&#{$base}--secondary {
a,
i {
color: var(--v-primary-base) !important;
}
}
}
</style>
packages/frontend/src/main/components/viewer/CommentsOverlay.vue
+1 -2
View File
@@ -1,5 +1,5 @@
<template>
<!--
<!--
HIC SVNT DRACONES
-->
<div
@@ -159,7 +159,6 @@
</portal>
<portal to="viewercontrols" :order="5">
<v-btn
key="comment-toggle-button"
v-tooltip="currentCommentVisStatus"
rounded
icon
packages/frontend/src/main/components/viewer/ViewerBubbles.vue
-1
View File
@@ -72,7 +72,6 @@
<portal to="viewercontrols" :order="4">
<v-btn
v-show="users.length !== 0"
key="bubbles-toggle-button"
v-tooltip="`Toggle real time user bubbles`"
small
rounded
packages/frontend/src/main/layouts/TheAuth.vue
+4 -1
View File
@@ -1,6 +1,9 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<v-app :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`">
<v-app
id="speckle"
:class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`"
>
<v-container fill-height fluid>
<v-row align="center" justify="center">
<v-col
packages/frontend/src/main/pages/common/NotFound.vue
+4 -1
View File
@@ -1,5 +1,8 @@
<template>
<v-app :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`">
<v-app
id="speckle"
:class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`"
>
<v-container fill-height fluid>
<v-row align="center" justify="center">
<v-col cols="12" md="8">
packages/frontend/src/main/pages/common/TheError.vue
+4 -1
View File
@@ -1,5 +1,8 @@
<template>
<v-app :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`">
<v-app
id="speckle"
:class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`"
>
<v-container fill-height fluid>
<v-row align="center" justify="center">
<v-col cols="12" md="8">
packages/frontend/src/main/pages/onboarding/TheOnboarding.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<v-app
id="speckle-auth"
id="speckle"
:class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`"
>
<v-container fill-height fluid>
packages/frontend/src/main/pages/stream/TheEmbed.vue
+2 -1
View File
@@ -1,5 +1,6 @@
<template>
<v-app
id="speckle"
:class="`embed-viewer no-scrollbar ${
transparent ? '' : $vuetify.theme.dark ? 'background-dark' : 'background-light'
}`"
@@ -204,7 +205,7 @@ export default defineComponent({
})
const updateTransparency = () => {
const appEl = document.getElementById('app')
const appEl = document.getElementById('speckle')
const classList = appEl!.classList
if (transparent.value) {
document.body.style.background = 'none'
packages/frontend/src/main/pages/stream/TheStream.vue
+1 -1
View File
@@ -267,7 +267,7 @@ export default defineComponent({
return !this.isLoggedIn
}
}
}
} as never // for some reason Vue Apollo Options API being used for subscriptions breaks all types in this SFC
},
mounted() {
this.$eventHub.$on(StreamEvents.Refetch, () => {
packages/frontend/src/plugins/vuetify.js
+6 -5
View File
@@ -23,9 +23,9 @@ export default new Vuetify({
error: '#FF5555', //red
warning: '#FF9100', //orange
info: '#313BCF', //dark blue
success: '#4caf50',
text: '#FFFFFF',
background: '#f5f6f7'
success: '#4caf50', // green
text: '#000000', // black
background: '#f5f6f7' // white
},
dark: {
primary: '#047EFB', //blue
@@ -34,8 +34,9 @@ export default new Vuetify({
error: '#FF5555', //red
warning: '#FF9100', //orange
info: '#9298f0', //dark blue
success: '#4caf50',
background: '#1a1a1a'
success: '#4caf50', // green
text: '#FFFFFF', // white
background: '#1a1a1a' // black / dark grey
}
}
}
yarn.lock
+63 -53
View File
@@ -4905,7 +4905,7 @@ __metadata:
vue-mixpanel: 1.0.7
vue-router: ^3.4.9
vue-timeago: ^5.1.2
vue-tsc: ^0.40.13
vue-tsc: ^1.0.3
vue2-perfect-scrollbar: ^1.5.2
vuedraggable: ^2.24.3
vuetify: ^2.3.21
@@ -6559,56 +6559,58 @@ __metadata:
languageName: node
linkType: hard
"@volar/code-gen@npm:0.40.13":
version: 0.40.13
resolution: "@volar/code-gen@npm:0.40.13"
"@volar/language-core@npm:1.0.3":
version: 1.0.3
resolution: "@volar/language-core@npm:1.0.3"
dependencies:
"@volar/source-map": 0.40.13
checksum: 70c1282d72c33b27b3c08f16f1de6888b66226ce1cf79bfa2e43c3652da399f68847e026ba83293044376d1a8470289dd7dc23c17feb6e75c1cba3e2787817d1
"@volar/source-map": 1.0.3
"@vue/reactivity": ^3.2.38
muggle-string: ^0.1.0
checksum: 37e75fca3c4f04dd4674bc6e33eada174ee9d9cbd470f8f907381263bcd7647e6366868a440e73720a05ee720553064f85c0e4c58acf34ac6a689ed66a67eed5
languageName: node
linkType: hard
"@volar/source-map@npm:0.40.13":
version: 0.40.13
resolution: "@volar/source-map@npm:0.40.13"
"@volar/source-map@npm:1.0.3":
version: 1.0.3
resolution: "@volar/source-map@npm:1.0.3"
dependencies:
"@vue/reactivity": 3.2.38
checksum: 90d3d94fac20b0a98308f88bce8dc13651fdbddaf8a245e547db0ba3249478fa11dc13a0e53b8f4c6507a3ffbfc9d1bb763e59191c01ab9d7e831a7e15ce28f3
muggle-string: ^0.1.0
checksum: e7bc09bc31099651e501e48916dd2af4fe009f36786cb08b679777f6b7d0e2ac77c38246d9368ed6fdb45b3d00ab89e83ea827ea8d35028692d0a252cb981ae6
languageName: node
linkType: hard
"@volar/typescript-faster@npm:0.40.13":
version: 0.40.13
resolution: "@volar/typescript-faster@npm:0.40.13"
"@volar/typescript@npm:1.0.3":
version: 1.0.3
resolution: "@volar/typescript@npm:1.0.3"
dependencies:
semver: ^7.3.7
checksum: e9ea271ba36ad72c556fe6ec97210b5a4343dfcd599b0bcae71c2bd42c7ea18c97c84b5990b0dcc9d36ea153d8c37be19737e86aa51f4dab29f502bf90178d79
"@volar/language-core": 1.0.3
checksum: e001b680c75c62751477b2aac8a70beea6ea1609c8ecd0ec0509af42898dfb5f424bc44c4d7dde6fb389e3567a247664fde01d458d5cd66d46938725fd0ef2b6
languageName: node
linkType: hard
"@volar/vue-language-core@npm:0.40.13":
version: 0.40.13
resolution: "@volar/vue-language-core@npm:0.40.13"
"@volar/vue-language-core@npm:1.0.3":
version: 1.0.3
resolution: "@volar/vue-language-core@npm:1.0.3"
dependencies:
"@volar/code-gen": 0.40.13
"@volar/source-map": 0.40.13
"@vue/compiler-core": ^3.2.38
"@volar/language-core": 1.0.3
"@volar/source-map": 1.0.3
"@vue/compiler-dom": ^3.2.38
"@vue/compiler-sfc": ^3.2.38
"@vue/reactivity": ^3.2.38
"@vue/shared": ^3.2.38
checksum: 377461b27f576520da0dc2863909a4cefb8b8caec9feaa693325d7a256f519be7bf4cf8056e017689e2678f64ecceca10e08d9210d2351304474afb0ca74dbc9
minimatch: ^5.1.0
vue-template-compiler: ^2.7.10
checksum: 954bc2fba46227a60cf7c716fa7a6a73622d7860087fb2e951b13992c46271e7ba5ac94d5eea6837cbb4b884fefa2d4c271469087c08aa31d9d14d2c9f69c43e
languageName: node
linkType: hard
"@volar/vue-typescript@npm:0.40.13":
version: 0.40.13
resolution: "@volar/vue-typescript@npm:0.40.13"
"@volar/vue-typescript@npm:1.0.3":
version: 1.0.3
resolution: "@volar/vue-typescript@npm:1.0.3"
dependencies:
"@volar/code-gen": 0.40.13
"@volar/typescript-faster": 0.40.13
"@volar/vue-language-core": 0.40.13
checksum: 51387739e04ab668ee29fc245a0d5667a31fd116b8c10b3a1cd5d42d64e35e07d2a7bf765d71e5c0fe81afb38e5099f77829762b9968681d84ce64f6dabc0b90
"@volar/typescript": 1.0.3
"@volar/vue-language-core": 1.0.3
checksum: 9e89f6400548ed0cfbd94ddf465388082ce071f94c7572fa75a6ea31cd1edb6e139bdf9d4f626293c31a7997f9a2cd5e78ecc00f86bd679e577fcb4f936595d2
languageName: node
linkType: hard
@@ -6643,7 +6645,7 @@ __metadata:
languageName: node
linkType: hard
"@vue/compiler-core@npm:3.2.40, @vue/compiler-core@npm:^3.2.38":
"@vue/compiler-core@npm:3.2.40":
version: 3.2.40
resolution: "@vue/compiler-core@npm:3.2.40"
dependencies:
@@ -6735,15 +6737,6 @@ __metadata:
languageName: node
linkType: hard
"@vue/reactivity@npm:3.2.38":
version: 3.2.38
resolution: "@vue/reactivity@npm:3.2.38"
dependencies:
"@vue/shared": 3.2.38
checksum: c9afb0184603c93a450553d8280a4e32b4e327ab90cadb94d020d8118d6214bee820db4312d26d0570679ede18e9b8d4ca696eab012abd0839a346c30b5ca07e
languageName: node
linkType: hard
"@vue/reactivity@npm:^3.2.38":
version: 3.2.40
resolution: "@vue/reactivity@npm:3.2.40"
@@ -6753,13 +6746,6 @@ __metadata:
languageName: node
linkType: hard
"@vue/shared@npm:3.2.38":
version: 3.2.38
resolution: "@vue/shared@npm:3.2.38"
checksum: c1aa5ec1320fff7431297c594cb976908b5ff240a16384930b4b16dc2a0d663aa09706337dee6910db260c5bb24fb31359006637d01de98009247a68acde5eae
languageName: node
linkType: hard
"@vue/shared@npm:3.2.40, @vue/shared@npm:^3.2.38":
version: 3.2.40
resolution: "@vue/shared@npm:3.2.40"
@@ -9947,6 +9933,13 @@ __metadata:
languageName: node
linkType: hard
"de-indent@npm:^1.0.2":
version: 1.0.2
resolution: "de-indent@npm:1.0.2"
checksum: 8deacc0f4a397a4414a0fc4d0034d2b7782e7cb4eaf34943ea47754e08eccf309a0e71fa6f56cc48de429ede999a42d6b4bca761bf91683be0095422dbf24611
languageName: node
linkType: hard
"debounce@npm:^1.2.0":
version: 1.2.1
resolution: "debounce@npm:1.2.1"
@@ -16288,6 +16281,13 @@ __metadata:
languageName: node
linkType: hard
"muggle-string@npm:^0.1.0":
version: 0.1.0
resolution: "muggle-string@npm:0.1.0"
checksum: c892cb53c9e066185913e4d6d0af71df6a2a8d8fd614903d13cd6b260c32ebc7b08ae7190a5faf3f7a25ba01cb9be34844d2a069351c090e4a6013f1eee58a50
languageName: node
linkType: hard
"multicast-dns@npm:^7.2.4":
version: 7.2.4
resolution: "multicast-dns@npm:7.2.4"
@@ -21952,6 +21952,16 @@ __metadata:
languageName: node
linkType: hard
"vue-template-compiler@npm:^2.7.10":
version: 2.7.11
resolution: "vue-template-compiler@npm:2.7.11"
dependencies:
de-indent: ^1.0.2
he: ^1.2.0
checksum: 5a154969e95798df1ed45545e82fa28fbfcc87d587141ba8f01eaa04d34afb2e3a81a613647d9ceeb6491e8d4f4970ef81ec24d1e6404ff972c3722e1c16af26
languageName: node
linkType: hard
"vue-timeago@npm:^5.1.2":
version: 5.1.3
resolution: "vue-timeago@npm:5.1.3"
@@ -21961,17 +21971,17 @@ __metadata:
languageName: node
linkType: hard
"vue-tsc@npm:^0.40.13":
version: 0.40.13
resolution: "vue-tsc@npm:0.40.13"
"vue-tsc@npm:^1.0.3":
version: 1.0.3
resolution: "vue-tsc@npm:1.0.3"
dependencies:
"@volar/vue-language-core": 0.40.13
"@volar/vue-typescript": 0.40.13
"@volar/vue-language-core": 1.0.3
"@volar/vue-typescript": 1.0.3
peerDependencies:
typescript: "*"
bin:
vue-tsc: bin/vue-tsc.js
checksum: 00e5cb424f1ab1a198489400b165a1d3968f85bf2747fe1cc8d8ac7161752a407d68e703f0132a547eaa8b236d1454627b92771cf268a968e5ac191b18de9690
checksum: 34e16a8f4c7d74110f7613805f4e55b3e7766db86898058d0dafdebf1ab1d8f2e0ae0acf21ef96cdf3e01555f13c7ed2e801b3a3c33507bf5c3b750053f7589f
languageName: node
linkType: hard