-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Frontend] Create a new discussion component to be displayed in an An…
…alysis view (#139) * Updating the paper to include the country for each affiliation which is required for publication. * Updated the system tests workflow to use electron (#140) * Added a DiscussionsSection.vue in AnalysisView components, updated the analysis model to return an injected discussion object, and updating the styling of the buttons to match figma more closely * The discussion collapse works * Looks ready for a pull request * Tests should be working now * Left out the node test * Updating CSS in a few places * Updating the DiscussionSection values --------- Co-authored-by: Angelina Uno-Antonison <ange.unoantonison@gmail.com>
- Loading branch information
1 parent
1d9e35b
commit 28e8772
Showing
10 changed files
with
122 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
frontend/src/components/AnalysisView/DiscussionSection.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
<template> | ||
<div class="rosalution-section-container"> | ||
<input type="checkbox" id="discussion_toggle" /> | ||
<div class="rosalution-section-header"> | ||
<h2 class="rosalution-section-header-text">Discussion</h2> | ||
<span class="rosalution-section-center" data-test="header-datasets"/> | ||
<button class="primary-button new-discussion-button">New Discussion</button> | ||
<label class="collapsable-icon" for="discussion_toggle"> | ||
<font-awesome-icon icon="chevron-down" size="lg"/> | ||
</label> | ||
</div> | ||
<div class="rosalution-section-seperator"></div> | ||
<div class="section-content"> | ||
Content | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
name: 'discussion-section', | ||
props: { | ||
header: { | ||
type: String, | ||
}, | ||
}, | ||
}; | ||
</script> | ||
|
||
<style scoped> | ||
.new-discussion-button { | ||
margin-bottom: var(--p-8); | ||
margin-right: var(--p-8); | ||
} | ||
.collapsable-icon { | ||
color: var(--rosalution-grey-200); | ||
cursor: pointer; | ||
} | ||
input[type="checkbox"] { | ||
display: none; | ||
} | ||
.rosalution-section-container input[type="checkbox"]:checked ~ .section-content { | ||
display: none; | ||
} | ||
input[type="checkbox"]:checked ~ .rosalution-section-header > span ~ label.collapsable-icon { | ||
transform: scaleY(-1); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -51,6 +51,7 @@ html { | |
--p-8: 0.5rem; | ||
--p-10: 0.625rem; | ||
--p-16: 1rem; | ||
--p-28: 1.75rem; | ||
|
||
scroll-padding-top: 4rem; | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
frontend/test/components/AnalysisView/DiscussionSection.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import {it, expect, describe, beforeEach} from 'vitest'; | ||
import {shallowMount} from '@vue/test-utils'; | ||
|
||
import DiscussionSection from '../../../src/components/AnalysisView/DiscussionSection.vue'; | ||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'; | ||
|
||
describe('DiscussionSection.vue', () => { | ||
let wrapper; | ||
|
||
beforeEach(() => { | ||
wrapper = shallowMount(DiscussionSection, { | ||
global: { | ||
components: { | ||
'font-awesome-icon': FontAwesomeIcon, | ||
}, | ||
}, | ||
}); | ||
}); | ||
|
||
it('Vue instance exists and it is an object', () => { | ||
expect(typeof wrapper).toBe('object'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters