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

…klesystems#1102) * Adding top-level ID to all v-app instances * fix(frontend): comment link & attachment styling in both themes * fix(frontend): some TS typing errors
spgoad · Oct 12, 2022 · ca5cfaa · ca5cfaa
1 parent 718e0d6
commit ca5cfaa
Show file tree

Hide file tree

Showing 13 changed files with 162 additions and 89 deletions.
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -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"

diff --git a/packages/frontend/src/main/components/comments/CommentThreadReply.vue b/packages/frontend/src/main/components/comments/CommentThreadReply.vue
@@ -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: ' ↗ ';
   }

diff --git a/packages/frontend/src/main/components/comments/CommentThreadReplyAttachments.vue b/packages/frontend/src/main/components/comments/CommentThreadReplyAttachments.vue
@@ -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>
diff --git a/packages/frontend/src/main/components/viewer/CommentsOverlay.vue b/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
@@ -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

diff --git a/packages/frontend/src/main/components/viewer/ViewerBubbles.vue b/packages/frontend/src/main/components/viewer/ViewerBubbles.vue
@@ -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

diff --git a/packages/frontend/src/main/layouts/TheAuth.vue b/packages/frontend/src/main/layouts/TheAuth.vue
@@ -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

diff --git a/packages/frontend/src/main/pages/common/NotFound.vue b/packages/frontend/src/main/pages/common/NotFound.vue
@@ -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">

diff --git a/packages/frontend/src/main/pages/common/TheError.vue b/packages/frontend/src/main/pages/common/TheError.vue
@@ -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">

diff --git a/packages/frontend/src/main/pages/onboarding/TheOnboarding.vue b/packages/frontend/src/main/pages/onboarding/TheOnboarding.vue
@@ -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>

diff --git a/packages/frontend/src/main/pages/stream/TheEmbed.vue b/packages/frontend/src/main/pages/stream/TheEmbed.vue
@@ -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'

diff --git a/packages/frontend/src/main/pages/stream/TheStream.vue b/packages/frontend/src/main/pages/stream/TheStream.vue
@@ -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, () => {

diff --git a/packages/frontend/src/plugins/vuetify.js b/packages/frontend/src/plugins/vuetify.js
@@ -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
       }
     }
   }