feat(list): add info dialoge to show list description #2368

konrad · 2022-09-15T11:32:51Z

konrad commented

2022-09-15 11:32:51 +00:00

This PR adds an info dialoge to show the list description. I've gone for a dialoge instead of showing it directly because there's really no place next to the title to show the description.

Related Discussion:

https://community.vikunja.io/t/list-description-not-visible/459/2

https://community.vikunja.io/t/hovering-a-task-with-a-description-should-show-a-truncated-description-as-a-popup/738

Resolves #2329

This PR adds an info dialoge to show the list description. I've gone for a dialoge instead of showing it directly because there's really no place next to the title to show the description. Related Discussion: https://community.vikunja.io/t/list-description-not-visible/459/2 https://community.vikunja.io/t/hovering-a-task-with-a-description-should-show-a-truncated-description-as-a-popup/738 Resolves https://kolaente.dev/vikunja/frontend/issues/2329

konrad added 1 commit 2022-09-15 11:32:51 +00:00

continuous-integration/drone/pr Build is failing Details

39ccdd7a51

feat(list): add info dialoge to show list description

konrad referenced this pull request

2022-09-15 11:33:33 +00:00

Show List Description beyond "Edit" form #1974

konrad requested review from dpschen 2022-09-15 11:35:37 +00:00

frederick commented

2022-09-15 11:35:54 +00:00

Hi konrad!

Thank you for creating a PR!

I've deployed the changes of this PR on a preview environment under this URL: https://2368-feature-list-description--vikunja-frontend-preview.netlify.app

You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.

Have a nice day!

Beep boop, I'm a bot.

Hi konrad! Thank you for creating a PR! I've deployed the changes of this PR on a preview environment under this URL: https://2368-feature-list-description--vikunja-frontend-preview.netlify.app You can use this url to view the changes live and test them out. You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/. Have a nice day! > Beep boop, I'm a bot.

dpschen commented

2022-09-15 11:50:11 +00:00

Could we intead move the content down and show the description below?
If the description is expanded or collapsed could be saved as a user setting.
This way every user can decide if he wants to see the description all the time.

As an alternative we could use a tooltip. This way we don't block the interface in order to show a text that describes what lays below.

Could we intead move the content down and show the description below? If the description is expanded or collapsed could be saved as a user setting. This way every user can decide if he wants to see the description all the time. As an alternative we could use a tooltip. This way we don't block the interface in order to show a text that describes what lays below.

konrad commented

2022-09-15 12:02:56 +00:00

Could we intead move the content down and show the description below?
If the description is expanded or collapsed could be saved as a user setting.
This way every user can decide if he wants to see the description all the time.

That might work, but it wouldn't look great IMHO. And it would break the layout of the kanban board because it'd push the tasks down.

As an alternative we could use a tooltip. This way we don't block the interface in order to show a text that describes what lays below.

Since the description can be very big and a tooltip is usually not scrollable I don't think that's a good idea.

I'm not a 100% convinced of my solution either but it was the less obstrusive one I could think of.

> Could we intead move the content down and show the description below? If the description is expanded or collapsed could be saved as a user setting. This way every user can decide if he wants to see the description all the time. That might work, but it wouldn't look great IMHO. And it would break the layout of the kanban board because it'd push the tasks down. > As an alternative we could use a tooltip. This way we don't block the interface in order to show a text that describes what lays below. Since the description can be very big and a tooltip is usually not scrollable I don't think that's a good idea. --- I'm not a 100% convinced of my solution either but it was the less obstrusive one I could think of.

konrad commented

2022-09-15 12:05:35 +00:00

Looks like Trello and todoist solve this by not having a list description, Linear has a nice little project overview slide-out with all info about the project.

dpschen approved these changes 2022-09-15 12:21:54 +00:00

src/components/home/TheNavigation.vue

						
				@ -290,2 +294,4 @@

						cursor: pointer;

					}

					.info-button {

dpschen commented

2022-09-15 12:10:41 +00:00

Remove indention

konrad commented

2022-09-15 12:28:54 +00:00

Done.

konrad marked this conversation as resolved

src/components/input/editor.vue

						
				@ -73,3 +73,3 @@

				import {marked} from 'marked'

				import DOMPurify from 'dompurify'

				import hljs from 'highlight.js/lib/common'

				import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'

dpschen commented

2022-09-15 12:10:58 +00:00

Nice!

🎉 1

konrad marked this conversation as resolved

src/router/index.ts Outdated

						
				@ -339,0 +344,4 @@

							meta: {

								showAsModal: true,

							},

							props: route => ({ listId: parseInt(route.params.listId as string) }),

dpschen commented

2022-09-15 12:18:39 +00:00

Picky:
We should start to use Number() here instead (also in all the other route definitions).

Reason:
We currently don't define the radix parameter and parseInt(someVar, 10) is not as easy to read as Number(someVar).
That we start having problems with radix is very unlikely though.

Picky: We should start to use `Number()` here instead (also in all the other route definitions). Reason: We currently don't define the radix parameter and `parseInt(someVar, 10)` is not as easy to read as `Number(someVar)`. That we start having problems with radix is very unlikely though.

konrad commented

2022-09-15 12:29:08 +00:00

Makes sense. Changed it.

konrad marked this conversation as resolved

src/views/list/ListInfo.vue

						
				@ -0,0 +28,4 @@

				})

				const store = useStore()

				const list = computed(() => {

dpschen commented

2022-09-15 12:20:35 +00:00

Picky:

Put in one line:

const list = computed(() => store.getters['lists/getListById'](props.listId))

Picky: Put in one line: ```ts const list = computed(() => store.getters['lists/getListById'](props.listId)) ```

konrad commented

2022-09-15 12:29:17 +00:00

Done.

konrad marked this conversation as resolved

konrad added 1 commit 2022-09-15 12:23:50 +00:00

continuous-integration/drone/pr Build is passing Details

8c866401b0

fix: properly pass checkbox id to markdown renderer

konrad added 4 commits 2022-09-15 12:28:47 +00:00

3bc0b29453

chore: remove indention

7e80de81f7

chore: put computed in one line

7c4b3c3be5

fix: styling

continuous-integration/drone/pr Build is passing Details

6e0e4f8f35

chore: use Number() instead of parseInt

konrad scheduled this pull request to auto merge when all checks succeed 2022-09-15 12:33:22 +00:00

konrad merged commit 84260841be into main

2022-09-15 12:36:44 +00:00

konrad referenced this issue from a commit

2022-09-15 12:36:45 +00:00

feat(list): add info dialoge to show list description (#2368)

konrad deleted branch feature/list-description

2022-09-15 12:38:50 +00:00

dpschen commented

2022-09-15 12:39:25 +00:00

Looks like Trello and todoist solve this by not having a list description, Linear has a nice little project overview slide-out with all info about the project.

I had to think here of some older Jira version that I remember had this feature. Can't say if that's still possible since I haven't used it in years. In reality it was quite handy since you could link to related material, e.g. Notion, GitHub etc.

As far as I remember space wasn't an issue since you could scroll and then the description would disappear.

> Looks like Trello and todoist solve this by not having a list description, Linear has a nice little project overview slide-out with all info about the project. I had to think here of some older Jira version that I remember had this feature. Can't say if that's still possible since I haven't used it in years. In reality it was quite handy since you could link to related material, e.g. Notion, GitHub etc. As far as I remember space wasn't an issue since you could scroll and then the description would disappear.

👍 1

xeruf commented

2022-09-18 22:23:06 +00:00

First-time contributor

I was thinking of something like in Zulip or Slack, where an abbreviated description is shown next to the channel topic for quick access:

This is especially handy for links to other tools.

I was thinking of something like in Zulip or Slack, where an abbreviated description is shown next to the channel topic for quick access: ![image](/attachments/4a4962ae-7c0f-4b24-810e-487ca76ec71d) This is especially handy for links to other tools.

image.png

15 KiB

👍 1

This repo is archived. You cannot comment on pull requests.

No reviewers