From 8fea2c22d3827380a96bd4ae1c67810bfb9d960c Mon Sep 17 00:00:00 2001
From: Egi <egi.brako@stud.uni-goettingen.de>
Date: Sun, 25 Sep 2022 12:25:02 +0200
Subject: [PATCH] Markdown is now rendered - Made math button icon - Made
feedback button icon - Added marked dependency - Added spacing between
buttons
---
frontend/package.json | 1 +
.../submission_notes/CorrectionHelpCard.vue | 16 +++++------
.../submission_notes/base/SubmissionLine.vue | 14 +++++++---
.../AnnotatedSubmissionTopToolbar.vue | 27 +++++++++++++++++--
.../ToggleFeedbackVisibilityButton.vue | 24 ++++++++++++-----
5 files changed, 62 insertions(+), 20 deletions(-)
diff --git a/frontend/package.json b/frontend/package.json
index 6ed231a3..74cd718c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
"axios": "^0.18.0",
"file-saver": "^2.0.2",
"highlight.js": "^9.12.0",
+ "marked":"^4.0.18",
"v-clipboard": "^2.0.1",
"vue": "^2.6.12",
"vue-class-component": "^6.0.0",
diff --git a/frontend/src/components/submission_notes/CorrectionHelpCard.vue b/frontend/src/components/submission_notes/CorrectionHelpCard.vue
index 0be45efe..31af1cad 100644
--- a/frontend/src/components/submission_notes/CorrectionHelpCard.vue
+++ b/frontend/src/components/submission_notes/CorrectionHelpCard.vue
@@ -5,21 +5,21 @@
<h3>Tips on using the correction interface</h3>
</v-card-title>
<v-card-text>
+ Markdown is rendered by default. <br>
+ Select the Σ button to choose to have math rendered or not. <br>
+ In case you need the un-rendered markdown, click the "Copy to Clipboard" button. <br>
+ Cick on the individual line numbers in order to add feedback for a specific line. <br>
+ After adding feedback to a line, clicking the feedback button will hide it or show it. <br>
+ When feedback is hidden, the lines that contain feedback will be highlighted in red. <br>
+ <!-- ------THE OLD FLAVOR TEXT, SAVED IN CASE IT IS NEEDED FOR SOME REASON (it is very cool) -------
Never trade an ale.
The sea-dog leads with yellow fever, crush the captain's quarters until it waves.<br>
Ho-ho-ho! malaria of life.<br>
- Halitosis, adventure, and yellow fever.<br>
- The girl drinks with halitosis, pull the galley before it laughs.<br>
- The moon fires with life, vandalize the bikini atoll before it travels.<br>
- The tuna blows with fight, haul the freighter before it whines.<br>
- The cannibal robs with hunger, fire the lighthouse until it whines.<br>
- The captain loves with death, vandalize the lighthouse before it whines.<br>
- The anchor loots with treasure, raid the freighter before it grows.<br>
- The reef commands with endurance, view the quarter-deck until it whines.<br>
The scallywag loots with passion, crush the bikini atoll before it falls.<br>
The sea leads with treasure, ransack the brig until it dies.<br>
The parrot robs with desolation, view the seychelles before it screams.<br>
The warm anchor quirky blows the landlubber.<br>
+ The warm anchor quirky blows the landlubber.<br> -->
</v-card-text>
</v-card>
</template>
diff --git a/frontend/src/components/submission_notes/base/SubmissionLine.vue b/frontend/src/components/submission_notes/base/SubmissionLine.vue
index ee553796..13eda29b 100644
--- a/frontend/src/components/submission_notes/base/SubmissionLine.vue
+++ b/frontend/src/components/submission_notes/base/SubmissionLine.vue
@@ -16,7 +16,11 @@
</td>
<td class="code-cell-content pl-2">
<!-- eslint-disable-next-line -->
- <span class="code-line" :key="key" v-html="code"/>
+ <span
+ :key="key"
+ class="code-line"
+ v-html="html"
+ />
<slot />
</td>
</div>
@@ -46,7 +50,9 @@ export default {
},
data () {
return {
- key: 0
+ key: 0,
+ html:'',
+ markdowned:true
}
},
computed: {
@@ -58,6 +64,8 @@ export default {
subNotesEventBus.$on('resetSubmission', () => {
this.key++
})
+ const {marked} = require('marked')
+ this.html = marked.parse(this.code)
},
methods: {
toggleEditor () {
@@ -77,7 +85,7 @@ export default {
}
.code-line {
- white-space: pre-wrap;
+ white-space: normal;
font-family: monospace;
}
diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue
index 4f42298d..a60b1434 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue
@@ -23,12 +23,35 @@
Score: {{ score }} </span>
<v-spacer />
<toggle-feedback-visibility-button />
+
<div v-if="isMarkdown">
- <v-btn @click="$emit('input', !mathIsRendered)">
+ <!-- <v-btn @click="$emit('input', !mathIsRendered)">
{{ mathIsRendered ? 'Reset Math' : 'Render Math' }}
+ </v-btn> -->
+ <v-btn
+ v-if="mathIsRendered"
+ text
+ color="info"
+ title="Math is being rendered"
+ :style="{backgroundColor: '#cce7ff'}"
+ @click="$emit('input', !mathIsRendered)"
+ >
+ <v-icon>
+ functions
+ </v-icon>
+ </v-btn>
+ <v-btn
+ v-else
+ text
+ color="grey"
+ title="Math is not being rendered"
+ @click="$emit('input', !mathIsRendered)"
+ >
+ <v-icon>
+ functions
+ </v-icon>
</v-btn>
</div>
- <v-spacer />
<v-tooltip
v-if="sourceCodeAvailable"
top
diff --git a/frontend/src/components/submission_notes/toolbars/ToggleFeedbackVisibilityButton.vue b/frontend/src/components/submission_notes/toolbars/ToggleFeedbackVisibilityButton.vue
index 453a5ea8..2e207d5c 100644
--- a/frontend/src/components/submission_notes/toolbars/ToggleFeedbackVisibilityButton.vue
+++ b/frontend/src/components/submission_notes/toolbars/ToggleFeedbackVisibilityButton.vue
@@ -1,16 +1,26 @@
<template>
<v-btn
- id="feedback-visibility-toggle"
+ v-if="showFeedback"
text
color="info"
+ title="Feedback is being shown"
+ :style="{backgroundColor: '#cce7ff'}"
@click="showFeedback = !showFeedback"
>
- <div v-if="showFeedback">
- Hide Feedback
- </div>
- <div v-else>
- Show Feedback
- </div>
+ <v-icon>
+ rate_review
+ </v-icon>
+ </v-btn>
+ <v-btn
+ v-else
+ text
+ color="grey"
+ title="Feedback is not being shown"
+ @click="showFeedback = !showFeedback"
+ >
+ <v-icon>
+ rate_review
+ </v-icon>
</v-btn>
</template>
--
GitLab