Frontend settings for Showing Identifier instead of Project Name, Project Position

Feature Discussion
1

Context: I am currently hoping to contribute this to the project - it seems simple enough …… (:folded_hands:)

Concept

It’s technically two features, but they’re both related to the display of projects in non-project task lists:

#1 - Option to show Project Identifier instead of Project title, if it is set. Especially on mobile dimensions, the project title can easily take up 50% of the screen. Adds a sense of space optimization and simplification to task lists.

#2 - Option to set a consistent location for “project”, since the project is displayed to the right of the task on saved filters, but before the task title on Overview/Upcoming.

Illustration/Demo + Userscript

This is what that would look like:

image
image3729×1710 273 KB

VS.: Regular view:

image
image3717×1792 283 KB

And here in mobile view with a project title vs. just identifier:

image
image862×453 10.8 KB

This is implemented as a tampermonkey script: https://github.com/stray-tori/utilities/raw/refs/heads/main/vikunja_project-display-tweaks.user.js

Implementation

#1 - New checkbox “Show project identifier instead of project title, if it is set” (probably under “Projects & Tasks”?)

  • Default: Unchecked
  • New behavior for SingleTaskInProject.vue: If checked and identifier set, show identifier instead of title.

(?) A nice-to-have that I considered would be to have the option as a dropdown instead with “Always show project title”, “Always show identifier”, “Show Identifier on mobile dimensions” (i.e. width < height). I don’t know if I could implement this, but I’d try unless it’s seen as not valuable.

#2 - New dropdown setting “Position of Project Info in Task Lists” (probably under “Projects & Tasks”?)

  • “At the end only in Saved Filters” (default, current implementation)
  • “Always in the front of task title”
  • “Always at the end of task info”

From what I can tell at a quick look, this should already be accessible to implement by the check for “showProjectSeparately” in SingleTaskInProject.vue, or just expanding that v-if there to include the user setting.

Would love to hear input on the naming of things and functionality itself since I could also understand if such small UI modifications are more seen in the UserScript territory rather than being part of the settings which adds complexity for future changes, etc.!

2

Hey this looks great!

It should be possible to hide the project title on mobile only with some custom css, but I don’t know enough about userscripts to advise on this. I would be open to a PR doing this though, but it would need a little more spec before implementing.

Same for emojis instead of task color bubbles only!