diff --git a/frontend/src/components/AnalysisView/SupportingEvidence.vue b/frontend/src/components/AnalysisView/SupportingEvidence.vue index dac13f20..c4d7ea48 100644 --- a/frontend/src/components/AnalysisView/SupportingEvidence.vue +++ b/frontend/src/components/AnalysisView/SupportingEvidence.vue @@ -1,25 +1,36 @@ @@ -41,15 +52,22 @@ export default { }, }, computed: { - isDataUnavailable: function() { + isDataUnavailable: function () { return this.value == '.' || this.value == 'null' || this.value == null || this.value.length == 0; }, - dataAvailabilityColour: function() { + dataAvailabilityColour: function () { return this.isDataUnavailable ? 'var(--rosalution-grey-300)' : 'var(--rosalution-black)'; }, - content: function() { - console.log(this.value); + typeIcon: function () { + if (this.isDataUnavailable) { + return undefined; + } else if (this.content.type === 'file') { + return ['far', 'file']; + } + return 'link'; + }, + content: function () { if (this.isDataUnavailable) { return {}; } @@ -84,22 +102,34 @@ export default { .section-content { display: flex; - flex-direction: column; + flex-direction: row; flex: 1 0 0; + justify-content: space-between; + align-items: center; + background-color: var(--rosalution-grey-50); + border-radius: var(--content-border-radius); + padding: var(--p-10); } -.editable-section-content-values { - overflow: hidden; - resize: both; - border-top: none; - border-right: none; - border-left: none; - border-bottom: 2px solid var(--rosalution-purple-200); +.attachment-name { + color: var(--rosalution-purple-300); + font-weight: bold; + cursor: pointer; } -span:focus { - color: var(--rosalution-purple-300); - outline: none; - box-shadow: 0px 5px 5px var(--rosalution-grey-200); +.supporting-evidence-content { + display: flex; + align-items: center; + gap: var(--p-10); +} + +.action-items svg{ + color: var(--rosalution-black); } + +.action-items > button { + border: none; + background: none; +} +