From 7fd6194d96127672708b07dba63feffe9f9ea5c2 Mon Sep 17 00:00:00 2001
From: Thilo Wischmeyer <thwischm@gmail.com>
Date: Mon, 16 Nov 2020 23:43:43 +0100
Subject: [PATCH] New slot syntax for activators
The upgrade guide says "We understand this is considerably more verbose." They
weren't kidding.
---
frontend/src/components/BaseLayout.vue | 41 +++++++------
frontend/src/components/FreeLocksButton.vue | 22 +++----
frontend/src/components/InstanceActions.vue | 18 +++---
frontend/src/components/export/DataExport.vue | 13 ++--
.../src/components/export/ExportDialog.vue | 60 ++++++++++---------
.../feedback_labels/FeedbackLabel.vue | 18 +++---
.../feedback_list/FeedbackSearchOptions.vue | 16 ++---
.../components/student_list/StudentList.vue | 28 +++++----
.../student_list/StudentListMenu.vue | 14 +++--
.../student_list/StudentListReverseMapper.vue | 16 ++---
.../submission_notes/base/FeedbackComment.vue | 28 +++++----
.../AnnotatedSubmissionBottomToolbar.vue | 59 ++++++++++--------
.../AnnotatedSubmissionTopToolbar.vue | 58 ++++++++++--------
.../src/components/tutor_list/TutorList.vue | 7 ++-
14 files changed, 221 insertions(+), 177 deletions(-)
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 484db939..062d34f7 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -41,13 +41,16 @@
top
style="min-width: 150px"
>
- <v-switch
- slot="activator"
- v-model="darkMode"
- class="dark-mode-switch"
- :disabled="!darkModeUnlocked"
- :label="mini ? '' : 'dark mode'"
- />
+ <template #activator="{ on }">
+ <div v-on="on">
+ <v-switch
+ v-model="darkMode"
+ class="dark-mode-switch"
+ :disabled="!darkModeUnlocked"
+ :label="mini ? '' : 'dark mode'"
+ />
+ </div>
+ </template>
<span v-if="darkModeUnlocked">Experimental: styling issues may occur!</span>
<span v-else>You need to visit the feedback site below first!</span>
</v-tooltip>
@@ -93,17 +96,19 @@
offset-y
left
>
- <v-btn
- id="user-options"
- slot="activator"
- text
- style="text-transform: none"
- >
- <v-icon left>
- account_circle
- </v-icon>
- {{ username }} ({{ userRole }})<v-icon>arrow_drop_down</v-icon>
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ id="user-options"
+ text
+ style="text-transform: none"
+ v-on="on"
+ >
+ <v-icon left>
+ account_circle
+ </v-icon>
+ {{ username }} ({{ userRole }})<v-icon>arrow_drop_down</v-icon>
+ </v-btn>
+ </template>
<user-options />
</v-menu>
</v-toolbar-items>
diff --git a/frontend/src/components/FreeLocksButton.vue b/frontend/src/components/FreeLocksButton.vue
index 4909358d..df5bb258 100644
--- a/frontend/src/components/FreeLocksButton.vue
+++ b/frontend/src/components/FreeLocksButton.vue
@@ -1,15 +1,17 @@
<template>
<v-tooltip bottom>
- <v-btn
- slot="activator"
- text
- icon
- :disabled="!activeAssignmentsExist"
- :loading="loading"
- @click="freeLocks"
- >
- <v-icon>vpn_key</v-icon>
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ text
+ icon
+ :disabled="!activeAssignmentsExist"
+ :loading="loading"
+ @click="freeLocks"
+ v-on="on"
+ >
+ <v-icon>vpn_key</v-icon>
+ </v-btn>
+ </template>
<span>Free all locked Submissions</span>
</v-tooltip>
</template>
diff --git a/frontend/src/components/InstanceActions.vue b/frontend/src/components/InstanceActions.vue
index 2d8f1958..f80f8990 100644
--- a/frontend/src/components/InstanceActions.vue
+++ b/frontend/src/components/InstanceActions.vue
@@ -8,14 +8,16 @@
:key="i"
bottom
>
- <v-btn
- slot="activator"
- text
- icon
- @click="a.action"
- >
- <v-icon>{{ a.icon }}</v-icon>
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ text
+ icon
+ @click="a.action"
+ v-on="on"
+ >
+ <v-icon>{{ a.icon }}</v-icon>
+ </v-btn>
+ </template>
{{ a.text }}
</v-tooltip>
</template>
diff --git a/frontend/src/components/export/DataExport.vue b/frontend/src/components/export/DataExport.vue
index d733c96a..4cdd54ff 100644
--- a/frontend/src/components/export/DataExport.vue
+++ b/frontend/src/components/export/DataExport.vue
@@ -30,11 +30,14 @@
<v-row>
<v-col cols="4">
<v-tooltip top>
- <v-checkbox
- slot="activator"
- v-model="setPasswords"
- label="Set passwords"
- />
+ <template #activator="{ on }">
+ <div v-on="on">
+ <v-checkbox
+ v-model="setPasswords"
+ label="Set passwords"
+ />
+ </div>
+ </template>
<span>Setting this will cause all student passwords
to be reset upon export. The new passwords will be contained in the
export file.
diff --git a/frontend/src/components/export/ExportDialog.vue b/frontend/src/components/export/ExportDialog.vue
index d2e66c5d..7cba0ceb 100644
--- a/frontend/src/components/export/ExportDialog.vue
+++ b/frontend/src/components/export/ExportDialog.vue
@@ -1,34 +1,36 @@
<template>
<v-menu offset-y>
- <v-tooltip
- slot="activator"
- bottom
- >
- <v-btn
- id="export-btn"
- slot="activator"
- :icon="!corrected"
- :text="!corrected"
- :color="corrected ? 'success' : undefined"
- style="text-transform: none;"
- >
- <v-icon :left="corrected">
- file_download
- </v-icon>
- <span v-if="corrected">
- Export
- </span>
- </v-btn>
- Export
- <span
- v-if="corrected"
- id="corrected-tooltip"
- >(All submissions have been corrected!)</span>
- <span
- v-else
- id="uncorrected-tooltip"
- >(UNCORRECTED submissions left! Export will be incomplete.)</span>
- </v-tooltip>
+ <template #activator="{ on: menu }">
+ <v-tooltip left>
+ <template #activator="{ on: tooltip }">
+ <v-btn
+ id="export-btn"
+ slot="activator"
+ :icon="!corrected"
+ :text="!corrected"
+ :color="corrected ? 'success' : undefined"
+ style="text-transform: none;"
+ v-on="{ ...tooltip, ...menu }"
+ >
+ <v-icon :left="corrected">
+ file_download
+ </v-icon>
+ <span v-if="corrected">
+ Export
+ </span>
+ </v-btn>
+ </template>
+ Export
+ <span
+ v-if="corrected"
+ id="corrected-tooltip"
+ >(All submissions have been corrected!)</span>
+ <span
+ v-else
+ id="uncorrected-tooltip"
+ >(UNCORRECTED submissions left! Export will be incomplete.)</span>
+ </v-tooltip>
+ </template>
<v-list>
<v-list-item
v-for="(item, i) in menuItems"
diff --git a/frontend/src/components/feedback_labels/FeedbackLabel.vue b/frontend/src/components/feedback_labels/FeedbackLabel.vue
index 89c23dc2..23d1e472 100644
--- a/frontend/src/components/feedback_labels/FeedbackLabel.vue
+++ b/frontend/src/components/feedback_labels/FeedbackLabel.vue
@@ -1,13 +1,15 @@
<template>
<v-tooltip top>
- <v-chip
- slot="activator"
- :close="removable"
- :color="colour"
- @input="onClose"
- >
- {{ name }}
- </v-chip>
+ <template #activator="{ on }">
+ <v-chip
+ :close="removable"
+ :color="colour"
+ v-on="on"
+ @input="onClose"
+ >
+ {{ name }}
+ </v-chip>
+ </template>
<span> {{ description }} </span>
</v-tooltip>
</template>
diff --git a/frontend/src/components/feedback_list/FeedbackSearchOptions.vue b/frontend/src/components/feedback_list/FeedbackSearchOptions.vue
index 38cc5d82..fb64db3b 100644
--- a/frontend/src/components/feedback_list/FeedbackSearchOptions.vue
+++ b/frontend/src/components/feedback_list/FeedbackSearchOptions.vue
@@ -40,13 +40,15 @@
style="max-width: 60%"
/>
<v-tooltip top>
- <a
- slot="activator"
- href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#character-classes"
- target="_blank"
- >
- <v-icon>help</v-icon>
- </a>
+ <template #activator="{ on }">
+ <a
+ href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#character-classes"
+ target="_blank"
+ v-on="on"
+ >
+ <v-icon>help</v-icon>
+ </a>
+ </template>
<span>Go to RegEx documentation</span>
</v-tooltip>
</v-row>
diff --git a/frontend/src/components/student_list/StudentList.vue b/frontend/src/components/student_list/StudentList.vue
index d0466998..7287a67b 100644
--- a/frontend/src/components/student_list/StudentList.vue
+++ b/frontend/src/components/student_list/StudentList.vue
@@ -68,19 +68,21 @@
</v-btn>
{{ props.item.name }}
<v-tooltip top>
- <template slot="activator">
- <v-icon
- v-if="!props.item.isActive"
- small
- >
- lock
- </v-icon>
- <v-icon
- v-else
- small
- >
- lock_open
- </v-icon>
+ <template #activator="{ on }">
+ <div v-on="on">
+ <v-icon
+ v-if="!props.item.isActive"
+ small
+ >
+ lock
+ </v-icon>
+ <v-icon
+ v-else
+ small
+ >
+ lock_open
+ </v-icon>
+ </div>
</template>
<span v-if="!props.item.isActive">Participant doesn't have access.</span>
<span v-else>Participant has access.</span>
diff --git a/frontend/src/components/student_list/StudentListMenu.vue b/frontend/src/components/student_list/StudentListMenu.vue
index 95176ffb..e528cc98 100644
--- a/frontend/src/components/student_list/StudentListMenu.vue
+++ b/frontend/src/components/student_list/StudentListMenu.vue
@@ -5,12 +5,14 @@
bottom
offset-y
>
- <v-btn
- slot="activator"
- icon
- >
- <v-icon>menu</v-icon>
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ icon
+ v-on="on"
+ >
+ <v-icon>menu</v-icon>
+ </v-btn>
+ </template>
<v-list>
<v-list-item
v-for="item in items"
diff --git a/frontend/src/components/student_list/StudentListReverseMapper.vue b/frontend/src/components/student_list/StudentListReverseMapper.vue
index 941019bc..70be9ad0 100644
--- a/frontend/src/components/student_list/StudentListReverseMapper.vue
+++ b/frontend/src/components/student_list/StudentListReverseMapper.vue
@@ -8,13 +8,15 @@
display-text="Select map file"
/>
<v-tooltip top>
- <v-btn
- slot="activator"
- icon
- @click="readMapFileAndApply"
- >
- <v-icon>vpn_key</v-icon>
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ icon
+ v-on="on"
+ @click="readMapFileAndApply"
+ >
+ <v-icon>vpn_key</v-icon>
+ </v-btn>
+ </template>
<span>Apply mapping</span>
</v-tooltip>
</v-row>
diff --git a/frontend/src/components/submission_notes/base/FeedbackComment.vue b/frontend/src/components/submission_notes/base/FeedbackComment.vue
index ee5c53ac..4b68b06c 100644
--- a/frontend/src/components/submission_notes/base/FeedbackComment.vue
+++ b/frontend/src/components/submission_notes/base/FeedbackComment.vue
@@ -23,24 +23,28 @@
top
size="20px"
>
- <v-icon
- slot="activator"
- size="20px"
- >
- visibility
- </v-icon>
+ <template #activator="{ on }">
+ <v-icon
+ size="20px"
+ v-on="on"
+ >
+ visibility
+ </v-icon>
+ </template>
<span>Will be visible to student</span>
</v-tooltip>
<v-tooltip
v-else
top
>
- <v-icon
- slot="activator"
- size="20px"
- >
- visibility_off
- </v-icon>
+ <template #activator="{ on }">
+ <v-icon
+ size="20px"
+ v-on="on"
+ >
+ visibility_off
+ </v-icon>
+ </template>
<span>Won't be visible to student</span>
</v-tooltip>
</div>
diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
index 785051b6..3eecbd7e 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
@@ -47,13 +47,16 @@
v-if="showFinalCheckbox"
top
>
- <v-checkbox
- slot="activator"
- v-model="isFinal"
- label="Final"
- class="final-checkbox"
- hide-details
- />
+ <template #activator="{ on }">
+ <div v-on="on">
+ <v-checkbox
+ v-model="isFinal"
+ label="Final"
+ class="final-checkbox"
+ hide-details
+ />
+ </div>
+ </template>
<span>If unchecked this submission will be marked for review by the lecturer</span>
</v-tooltip>
<v-spacer />
@@ -61,28 +64,32 @@
v-if="skippable"
top
>
- <v-btn
- id="skip-submission"
- slot="activator"
- text
- @click="skipSubmission"
- >
- Skip
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ id="skip-submission"
+ text
+ v-on="on"
+ @click="skipSubmission"
+ >
+ Skip
+ </v-btn>
+ </template>
<span>Skip this submission</span>
</v-tooltip>
<v-tooltip top>
- <v-btn
- id="submit-feedback"
- slot="activator"
- color="primary"
- :loading="loading"
- block
- :disabled="!scoreIsValid"
- @click="submit"
- >
- Submit
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ id="submit-feedback"
+ color="primary"
+ :loading="loading"
+ block
+ :disabled="!scoreIsValid"
+ v-on="on"
+ @click="submit"
+ >
+ Submit
+ </v-btn>
+ </template>
<span>Submit and continue</span>
</v-tooltip>
</v-card-actions>
diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue
index b899ca6b..5f498ddc 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue
@@ -42,15 +42,17 @@
v-if="sourceCodeAvailable"
top
>
- <v-btn
- slot="activator"
- icon
- @click="downloadSourceCode"
- >
- <v-icon>
- cloud_download
- </v-icon>
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ icon
+ v-on="on"
+ @click="downloadSourceCode"
+ >
+ <v-icon>
+ cloud_download
+ </v-icon>
+ </v-btn>
+ </template>
<span>Download original source code (.ipynb, etc.)</span>
</v-tooltip>
<v-btn
@@ -62,29 +64,33 @@
VIEW ORIGINAL SUBMISSION
</v-btn>
<v-tooltip top>
- <v-btn
- v-if="showClipboard"
- slot="activator"
- icon
- @click="copyToClipboard"
- >
- <v-icon>content_copy</v-icon>
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ v-if="showClipboard"
+ icon
+ v-on="on"
+ @click="copyToClipboard"
+ >
+ <v-icon>content_copy</v-icon>
+ </v-btn>
+ </template>
<span>{{ copyMessage }}</span>
</v-tooltip>
<v-tooltip
v-if="solutionHidden"
top
>
- <v-btn
- slot="activator"
- icon
- @click="showSolution"
- >
- <v-icon>
- keyboard_arrow_left
- </v-icon>
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn
+ icon
+ v-on="on"
+ @click="showSolution"
+ >
+ <v-icon>
+ keyboard_arrow_left
+ </v-icon>
+ </v-btn>
+ </template>
<span>Show Solution</span>
</v-tooltip>
diff --git a/frontend/src/components/tutor_list/TutorList.vue b/frontend/src/components/tutor_list/TutorList.vue
index f5d936ec..ccca6faf 100644
--- a/frontend/src/components/tutor_list/TutorList.vue
+++ b/frontend/src/components/tutor_list/TutorList.vue
@@ -38,9 +38,10 @@
v-if="props.item.reservedSubmissions"
top
>
- <template slot="activator">
+ <template #activator="{ on }">
<v-icon
small
+ v-on="on"
@click="deleteAssignmentsOfTutor(props.item)"
>
clear
@@ -56,16 +57,18 @@
@click="changeActiveStatus(props.item)"
>
<v-tooltip top>
- <template slot="activator">
+ <template #activator="{ on }">
<v-icon
v-if="!props.item.isActive"
small
+ v-on="on"
>
lock
</v-icon>
<v-icon
v-else
small
+ v-on="on"
>
lock_open
</v-icon>
--
GitLab