From 479bfa8f9be6efa7166ded2f48e3fa6dfcfe013a Mon Sep 17 00:00:00 2001
From: "dominik.seeger" <dominik.seeger@stud.uni-goettingen.de>
Date: Mon, 25 Jan 2021 13:46:31 +0100
Subject: [PATCH] [frontend] Changed buttons in minified sidebar Changed Dark
Mode and Feedback buttons to be correctly visible in minified sidebar
---
frontend/src/components/BaseLayout.vue | 49 ++++++++++++-------
.../pages/base/TutorReviewerBaseLayout.vue | 8 ++-
frontend/src/pages/student/StudentLayout.vue | 2 +-
functional_tests/test_front_pages.py | 6 +--
4 files changed, 41 insertions(+), 24 deletions(-)
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 27d2111b..d45f7033 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -43,25 +43,32 @@
<v-switch
slot="activator"
v-model="darkMode"
- class="ml-3"
+ class="dark-mode-switch"
:disabled="!darkModeUnlocked"
- label="dark mode"
+ :label="mini ? '' : 'dark mode'"
/>
<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>
- <v-footer
- v-if="!mini"
+ <v-btn
+ id="feedback-btn"
+ href="https://gitlab.gwdg.de/j.michal/grady/issues"
+ target="_blank"
+ :block="!mini"
+ :fab="mini"
+ :flat="mini"
+ :tile="!mini"
+ depressed
@click.native="logFeedbackClick"
+ v-bind:class="{ 'fab-button': mini, 'fab-button-white': !darkMode }"
>
- <v-spacer />
- <a
- href="https://gitlab.gwdg.de/j.michal/grady/issues"
- target="_blank"
- class="feedback-link"
- >Give us Feedback!</a>
- <v-spacer />
- </v-footer>
+ <v-icon :left="!mini">
+ feedback
+ </v-icon>
+ <div v-show="!mini">
+ Feedback
+ </div>
+ </v-btn>
</div>
</v-navigation-drawer>
<v-toolbar
@@ -152,17 +159,25 @@ export default {
bottom: 0px;
}
- .feedback-link {
- text-decoration: none;
- color: grey;
- }
-
.grady-toolbar {
font-weight: bold;
}
.title {
color: gray;
+ white-space: nowrap;
+ }
+
+ .fab-button {
+ margin: 0 12px;
+ }
+
+ .fab-button-white {
+ color: grey !important;
+ }
+
+ .dark-mode-switch {
+ margin-left: 22px;
}
</style>
diff --git a/frontend/src/pages/base/TutorReviewerBaseLayout.vue b/frontend/src/pages/base/TutorReviewerBaseLayout.vue
index 23264611..185d6a2d 100644
--- a/frontend/src/pages/base/TutorReviewerBaseLayout.vue
+++ b/frontend/src/pages/base/TutorReviewerBaseLayout.vue
@@ -23,14 +23,15 @@
</v-list>
<v-divider />
<slot name="above-subscriptions" />
- <subscription-list :sidebar="true" />
- <feedback-label-tab />
+ <subscription-list :sidebar="true" v-if="!mini" />
+ <feedback-label-tab v-if="!mini" />
<slot name="below-subscriptions" />
</template>
</base-layout>
</template>
<script>
+import { UI } from '@/store/modules/ui'
import BaseLayout from '@/components/BaseLayout'
import SubscriptionList from '@/components/subscriptions/SubscriptionList'
import FeedbackLabelTab from '@/components/feedback_labels/FeedbackLabelTab.vue'
@@ -64,6 +65,9 @@ export default {
}
]
}
+ },
+ computed: {
+ mini () { return UI.state.sideBarCollapsed },
}
}
</script>
diff --git a/frontend/src/pages/student/StudentLayout.vue b/frontend/src/pages/student/StudentLayout.vue
index 5f2988c3..2229f27d 100644
--- a/frontend/src/pages/student/StudentLayout.vue
+++ b/frontend/src/pages/student/StudentLayout.vue
@@ -80,7 +80,7 @@ export default {
visited () { return StudentPage.state.visited },
moduleReference () { return this.exam ? this.exam.moduleReference : 'No exam information' },
- mini () { return UI.state.mini },
+ mini () { return UI.state.sideBarCollapsed },
submissionNavItems () {
return this.submissions.map((sub, index) => {
diff --git a/functional_tests/test_front_pages.py b/functional_tests/test_front_pages.py
index 02ba22da..35bef4e3 100644
--- a/functional_tests/test_front_pages.py
+++ b/functional_tests/test_front_pages.py
@@ -68,8 +68,7 @@ class FrontPageTestsTutor(UntestedParent.FrontPageTestsTutorReviewer):
print(links)
self.assertTrue(all(link in links for link in ['/home', '/feedback']))
footer = drawer.find_element_by_class_name('sidebar-footer')
- feedback_link = footer.find_element_by_css_selector('a.feedback-link')
- self.assertEqual('Give us Feedback!', feedback_link.text)
+ feedback_link = footer.find_element_by_css_selector('#feedback-btn')
self.assertEqual('https://gitlab.gwdg.de/j.michal/grady/issues',
feedback_link.get_attribute('href'))
@@ -96,7 +95,6 @@ class FrontPageTestsReviewer(UntestedParent.FrontPageTestsTutorReviewer):
self.assertTrue(all(link in links for link in
['/home', '/feedback', '/participant-overview', '/tutor-overview']))
footer = drawer.find_element_by_class_name('sidebar-footer')
- feedback_link = footer.find_element_by_css_selector('a.feedback-link')
- self.assertEqual('Give us Feedback!', feedback_link.text)
+ feedback_link = footer.find_element_by_css_selector('#feedback-btn')
self.assertEqual('https://gitlab.gwdg.de/j.michal/grady/issues',
feedback_link.get_attribute('href'))
--
GitLab