feature: add topics list element warning (#37)

* add topics list element warning * cleanner solution
bimdata · Jun 13, 2024 · 41cff80 · 41cff80
1 parent 3805ba4
commit 41cff80
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 6 deletions.
diff --git a/src/components/bcf-topics-table/BcfTopicsTable.vue b/src/components/bcf-topics-table/BcfTopicsTable.vue
@@ -54,10 +54,7 @@
       {{ toShortDateFormat(topic.creation_date) }}
     </template>
     <template #cell-actions="{ row: topic }">
-      <BcfTopicActionsCell
-        :topic="topic"
-        @open-topic="$emit('open-topic', $event)"
-      />
+      <BcfTopicActionsCell :topic="topic" @open-topic="$emit('open-topic', $event)" :warning="warningCallback(topic)" :warningTooltipMessage="warningTooltipMessage" />
     </template>
   </BIMDataTable>
 </template>
@@ -110,6 +107,14 @@ export default {
       type: Map,
       default: () => new Map(),
     },
+    warningCallback: {
+      type: Function,
+      default: () => false
+    },
+    warningTooltipMessage: {
+      type: String,
+      default: ""
+    }
   },
   emits: [
     "open-topic",

diff --git a/src/components/bcf-topics-table/bcf-topic-actions-cell/BcfTopicActionsCell.vue b/src/components/bcf-topics-table/bcf-topic-actions-cell/BcfTopicActionsCell.vue
@@ -1,14 +1,22 @@
 <template>
   <div class="bcf-topic-actions-cell">
     <BIMDataButton
-      color="primary"
+      :color="warning ? 'secondary' : 'primary'"
       outline
       radius
       icon
       @click="$emit('open-topic', topic)"
     >
-      <BIMDataIconShow size="xs" />
+      <BIMDataIconShow size="xs" :color="warning ? 'warning' : 'primary'" fill/>
     </BIMDataButton>
+    <div class="bcf-topic-actions-cell__warning" v-if="warning">
+      <div class="bcf-topic-actions-cell__warning__white-gradient"></div>
+      <BIMDataTooltip :message="warningTooltipMessage" position="left" >
+        <div class="bcf-topic-actions-cell__warning__icon">
+          <BIMDataIconWarning fill color="warning" />
+        </div>
+      </BIMDataTooltip>
+    </div>
   </div>
 </template>
 
@@ -18,6 +26,14 @@ export default {
     topic: {
       type: Object,
       required: true
+    },
+    warning: {
+      type: Boolean,
+      default: false
+    },
+    warningTooltipMessage: {
+      type: String,
+      default: ""
     }
   },
   emits: [
@@ -28,8 +44,43 @@ export default {
 
 <style scoped lang="scss">
 .bcf-topic-actions-cell {
+  position: relative;
+  height: 42px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   .bimdata-btn {
     margin: auto;
   }
+
+  &__warning {
+    position: absolute;
+    top: 0;
+    right: 44px;
+
+    display: flex;
+    justify-content: flex-end;
+    
+    &__white-gradient {      
+      background: linear-gradient(90deg, transparent, var(--color-white) 90%);
+  
+      width: 350px;
+      height: 42px;
+    }
+
+    &__icon {
+      box-shadow: var(--box-shadow);
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 42px;
+      height: 42px;
+
+      background-color: var(--color-white);
+    }
+  }
 }
 </style>