From e6a935f49dca3301f0ef8cb138909f67a4fa72e1 Mon Sep 17 00:00:00 2001 From: dpschen Date: Mon, 11 Oct 2021 18:39:27 +0000 Subject: [PATCH 01/10] fix: disable service workers in cypress (#830) Co-authored-by: Dominik Pschenitschni Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/830 Reviewed-by: konrad Co-authored-by: dpschen Co-committed-by: dpschen --- .drone.yml | 20 ++++---------------- cypress/support/index.js | 7 +++++++ 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/.drone.yml b/.drone.yml index 514ca996..a41dfe2a 100644 --- a/.drone.yml +++ b/.drone.yml @@ -79,25 +79,13 @@ steps: depends_on: - dependencies - # Building in dev mode to avoid the service worker for testing - - name: build-dev - image: node:16 - pull: true - environment: - YARN_CACHE_FOLDER: .cache/yarn/ - CYPRESS_CACHE_FOLDER: .cache/cypress/ - commands: - - yarn build:dev - depends_on: - - dependencies - - name: build-prod image: node:16 pull: true environment: YARN_CACHE_FOLDER: .cache/yarn/ commands: - - yarn build --dest dist-prod + - yarn build depends_on: - dependencies @@ -119,12 +107,12 @@ steps: CYPRESS_CACHE_FOLDER: .cache/cypress/ CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000 commands: - - sed -i 's/localhost/api/g' dist-dev/index.html - - yarn serve:dist-dev & npx wait-on http://localhost:5000 + - sed -i 's/localhost/api/g' dist/index.html + - yarn serve:dist & npx wait-on http://localhost:5000 - yarn test:frontend --browser chrome depends_on: - dependencies - - build-dev + - build-prod - name: upload-test-results image: plugins/s3 diff --git a/cypress/support/index.js b/cypress/support/index.js index 22ec961f..0c885c65 100644 --- a/cypress/support/index.js +++ b/cypress/support/index.js @@ -2,3 +2,10 @@ import './commands' import 'cypress-file-upload' import '@4tw/cypress-drag-drop' + +// see https://github.com/cypress-io/cypress/issues/702#issuecomment-587127275 +Cypress.on('window:before:load', (win) => { + // disable service workers + // @ts-ignore + delete win.navigator.__proto__.ServiceWorker +}) \ No newline at end of file From 69821fb6635d9eb54c450e6bd4885090cce31dbb Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 13 Oct 2021 20:12:37 +0200 Subject: [PATCH 02/10] fix: editing a label works now --- src/views/labels/ListLabels.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue index 22bb07f8..3842987f 100644 --- a/src/views/labels/ListLabels.vue +++ b/src/views/labels/ListLabels.vue @@ -168,6 +168,9 @@ export default { // object passed to this function here still has a reference to the store. this.labelEditLabel = new LabelModel({ ...label, + // The model does not support passing dates into it directly so we need to convert them first + created: +label.created, + updated: +label.updated, }) this.isLabelEdit = true From b5b56a6e4afab3f207ae7e31d5640412fed3c401 Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 13 Oct 2021 20:16:45 +0200 Subject: [PATCH 03/10] fix: switch view height on devices with smaller font size --- src/styles/variables/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss index dbc7532b..9cf90ba7 100644 --- a/src/styles/variables/variables.scss +++ b/src/styles/variables/variables.scss @@ -38,7 +38,7 @@ $scrollbar-hover-color: $grey-500; $button-height: 34px; -$switch-view-height: 43px; +$switch-view-height: 2.69rem; $user-dropdown-width-mobile: 4rem; $hamburger-menu-icon-spacing: 1rem; From c30c2e00cb1a87bef2963ce2703500a9f0941bc4 Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 13 Oct 2021 20:37:03 +0200 Subject: [PATCH 04/10] fix: task input height on devices with smaller font size --- src/components/tasks/add-task.vue | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue index 1f16e692..51017b24 100644 --- a/src/components/tasks/add-task.vue +++ b/src/components/tasks/add-task.vue @@ -41,7 +41,7 @@ import TaskService from '../../services/task' import createTask from '@/components/tasks/mixins/createTask' import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue' -const INITIAL_SCROLL_HEIGHT = 40 +const INPUT_BORDER_PX = 2 const cleanupTitle = title => { return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '') @@ -54,7 +54,8 @@ export default { newTaskTitle: '', taskService: new TaskService(), errorMessage: '', - textAreaHeight: INITIAL_SCROLL_HEIGHT, + textAreaHeight: null, + initialTextAreaHeight: null, } }, mixins: [ @@ -71,14 +72,17 @@ export default { }, watch: { newTaskTitle(newVal) { - let scrollHeight = this.$refs.newTaskInput.scrollHeight - if (scrollHeight < INITIAL_SCROLL_HEIGHT || newVal === '') { - scrollHeight = INITIAL_SCROLL_HEIGHT + let scrollHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX + if (scrollHeight < this.initialTextAreaHeight || newVal === '') { + scrollHeight = this.initialTextAreaHeight } this.textAreaHeight = scrollHeight }, }, + mounted() { + this.initialTextAreaHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX + }, methods: { addTask() { if (this.newTaskTitle === '') { From 3f96ce6d60af580f9c0b745f54d2ba9a784f667d Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 13 Oct 2021 21:08:29 +0200 Subject: [PATCH 05/10] fix: task input height after removing a line now works correctly --- src/components/tasks/add-task.vue | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue index 51017b24..af4338f6 100644 --- a/src/components/tasks/add-task.vue +++ b/src/components/tasks/add-task.vue @@ -10,7 +10,7 @@ v-focus v-model="newTaskTitle" ref="newTaskInput" - :style="{'height': `${textAreaHeight}px`}" + :style="{'height': `calc(${textAreaHeight}px - 2px + 1rem)`}" @keyup="errorMessage = ''" @keydown.enter="handleEnter" /> @@ -42,6 +42,7 @@ import createTask from '@/components/tasks/mixins/createTask' import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue' const INPUT_BORDER_PX = 2 +const LINE_HEIGHT = 1.5 // using getComputedStyles().lineHeight returns an (wrong) absolute pixel value, we need the factor to do calculations with it. const cleanupTitle = title => { return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '') @@ -72,12 +73,12 @@ export default { }, watch: { newTaskTitle(newVal) { - let scrollHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX - if (scrollHeight < this.initialTextAreaHeight || newVal === '') { - scrollHeight = this.initialTextAreaHeight - } + // Calculating the textarea height based on lines of input in it. That is more reliable when removing a + // line from the input. + const numberOfLines = newVal.split(/\r\n|\r|\n/).length + const fontSize = parseInt(window.getComputedStyle(this.$refs.newTaskInput, null).getPropertyValue('font-size')) - this.textAreaHeight = scrollHeight + this.textAreaHeight = numberOfLines * fontSize * LINE_HEIGHT + INPUT_BORDER_PX }, }, mounted() { From 4fef047d74ce284eb1af3cddd9f666f0b4397273 Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 13 Oct 2021 21:14:34 +0200 Subject: [PATCH 06/10] fix: user dropdown padding on mobile --- src/styles/theme/navigation.scss | 2 +- src/styles/variables/variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss index 1e06b22a..67f588e3 100644 --- a/src/styles/theme/navigation.scss +++ b/src/styles/theme/navigation.scss @@ -54,7 +54,7 @@ line-height: 1; .button { - padding: 0 0.25rem; + padding: 0 .5rem; height: 1rem; .icon { diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss index 9cf90ba7..33f34407 100644 --- a/src/styles/variables/variables.scss +++ b/src/styles/variables/variables.scss @@ -40,7 +40,7 @@ $button-height: 34px; $switch-view-height: 2.69rem; -$user-dropdown-width-mobile: 4rem; +$user-dropdown-width-mobile: 5rem; $hamburger-menu-icon-spacing: 1rem; $hamburger-menu-icon-width: 28px; $navbar-height: 4rem; From 97dd55d9464e3cb24bf1b057932bf64d4a295928 Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 13 Oct 2021 21:20:46 +0200 Subject: [PATCH 07/10] feat: show up to 4 recent lists on the overview page --- src/styles/components/list.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss index 825a4cac..a9e83ce9 100644 --- a/src/styles/components/list.scss +++ b/src/styles/components/list.scss @@ -291,7 +291,11 @@ $list-spacing: 1rem; } .list-cards-wrapper-2-rows { - flex-wrap: wrap; - max-height: calc(#{$list-height * 2} + #{$list-spacing * 2}); - overflow: hidden; + flex-wrap: wrap; + max-height: calc(#{$list-height * 2} + #{$list-spacing * 2} - 4px); + overflow: hidden; + + @media screen and (max-width: $mobile) { + max-height: calc(#{$list-height * 4} + #{$list-spacing * 4} - 4px); + } } From 9a2f95ecc60241a9c6157acc384ad3a664bee57d Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 13 Oct 2021 21:53:39 +0200 Subject: [PATCH 08/10] feat: redirect the user to the last page they were on before logging in after login --- src/components/home/contentNoAuth.vue | 2 ++ src/helpers/saveLastVisited.ts | 18 ++++++++++++++++++ src/views/user/Login.vue | 15 ++++++++++++--- src/views/user/OpenIdAuth.vue | 12 +++++++++++- src/views/user/Register.vue | 2 +- 5 files changed, 44 insertions(+), 5 deletions(-) create mode 100644 src/helpers/saveLastVisited.ts diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue index a4e5fa0e..08483506 100644 --- a/src/components/home/contentNoAuth.vue +++ b/src/components/home/contentNoAuth.vue @@ -19,6 +19,7 @@ import {mapState} from 'vuex' import logoUrl from '@/assets/logo-full.svg' +import { saveLastVisited } from '@/helpers/saveLastVisited' export default { name: 'contentNoAuth', @@ -46,6 +47,7 @@ export default { localStorage.getItem('passwordResetToken') === null && localStorage.getItem('emailConfirmToken') === null ) { + saveLastVisited(this.$route.name, this.$route.params) this.$router.push({name: 'user.login'}) } }, diff --git a/src/helpers/saveLastVisited.ts b/src/helpers/saveLastVisited.ts new file mode 100644 index 00000000..fc731d26 --- /dev/null +++ b/src/helpers/saveLastVisited.ts @@ -0,0 +1,18 @@ +const LAST_VISITED_KEY = 'lastVisited' + +export const saveLastVisited = (name: string, params: object) => { + localStorage.setItem(LAST_VISITED_KEY, JSON.stringify({name, params})) +} + +export const getLastVisited = () => { + const lastVisited = localStorage.getItem(LAST_VISITED_KEY) + if (lastVisited === null) { + return null + } + + return JSON.parse(lastVisited) +} + +export const clearLastVisited = () => { + return localStorage.removeItem(LAST_VISITED_KEY) +} diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue index 066b7229..4efa9636 100644 --- a/src/views/user/Login.vue +++ b/src/views/user/Login.vue @@ -104,13 +104,13 @@