diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue index 27d2111b55e158eb7f8ca0e1e5ac8ed9f2ba6316..d45f70330a6217db6929fa7dd353b15c83bd1bde 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 23264611c5e60f6842cc0a88c4d1de841b126b45..185d6a2de2e46eb0f39396dcb0a43c500b5b8dbc 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 5f2988c306369a5391d481a62395d84eaee4da4c..2229f27d5b5f47cd9214e572f51b0bdce2fdcd29 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 02ba22dab19c68e7b3a328842e7195157950c496..35bef4e36988a33e639d150857147c3a2be39c72 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'))