Tasks - Compact styles (monochrome icons, tooltips, priority as colour) #1965
Replies: 16 comments 44 replies
|
Thank you very much for sharing this! /cc @esm7 - more exciting use of your work! ❤️ |
|
No worries, thanks for making the Tasks plugin 👍 |
|
Wow, thank you for sharing! |
|
For some reason, I am not getting the three dots for the link. The link emoji is hidden until I mouse over it. Any ideas? |
|
Moved to #1974 |
|
@claremacrae Just seen this notification, up against it next couple of days but will definitely have a look, just need a good tasks kitchen sink markdown document, not surprised to see some edge cases as my original solution used a simple usecase, probably wont take much for me to fix. Phil |
Sure - there are lots of sample files in this vault: https://github.com/obsidian-tasks-group/obsidian-tasks/tree/main/resources/sample_vaults/Tasks-Demo This is what I used to create the screenshots in the Styling docs: |
|
@timrosenberg I've responded to the other thread which can now be closed, and updated the OP in this thread with updated solution. |
|
Thank you @replete! This is a very good starting point for some custom modifications! |
|
Steady on! 😄 Those new icons were only added to Tasks yesterday... |
|
Haha, I see. And here I was thinking, "Strange, I actually remembered it as complete, but there are missing states..." Now I know... |
|
I just learned how to create custom icon snippets with @replete's fantastic https://github.com/replete/obsidian-tasks-custom-icons Replace the three lines with src: url('data:@file/octet-stream;base64,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') format('woff2');
unicode-range: U+1F4C5, U+1F501, U+1F53A, U+1F53C, U+1F53D, U+1F6EB, U+23EB, U+23EC, U+23F3, U+2705, U+2795;
/* 📅, 🔁, 🔺, 🔼, 🔽, 🛫, ⏫, ⏬, ⏳, ✅, ➕ */ |
|
@piridium I've just added highest and lowest glyphs to the repo Looking at the other icons/bugs now |
Sorry I just read this, seems like you might have figured it out, but if you look at my last commit you can see adding the icons was as straightforward as naming some new SVGs appropriately: |
|
I've updated the original post with an updated version:
|
My dots are not alighted to the right but come in closer down the task get? Any thoughts? |
|
What theme? My guess is outdated obsidian or a snippet conflict |
|
Also, what Obsidian installer version. (See 'About Obsidian'). If these snippets use the
|
|
I am on Version 1.3.5 (Installer 1.3.4) Minimal Theme Limited plugins installed, tasks, dataview, excalidraw. Edit: Really love this thanks! |
|
Thank you for putting together this CSS. I made a small addition for my use case that some may like. I wanted to know when a task was overdue so I changed the start, scheduled, and due icons if the date is in the past.
|
|
Hi @replete I like very much your compact style as I found the default rendering a bit visually confusing!!! Unfortunately today I switched from dark to light version of minimal theme and the pencil and paper icons are almost invisible, how can I do to modify your css to have the two icons in a way they're visible in light mode? |
|
@nestor50 I would over-ride for the dark/light theme. There is a css class on the body that is something like |
|
@nestor50 how am I to interpret your 'laugh' emoji? |
|
Sorry @replete it was meant to be a thumbs up emoji, I didn't realize that it was a smile. And I don't understand why are you saying I "deleted the question and response while I was responding to you" in the message below, I didn't do anything apart except putting a smile instead of a thumbs-up. I think it's just a misunderstanding! |
|
Thanks so much for this! I was wondering if it's possible for me to adapt this to support the following scenario: I typically associate a Task to a project by adding "📋[[Project name]]" to the task description. I'd like to collapse that information along with the other fields you're collapsing in compact view. This is how it currently renders in short mode -
So ideally it would just display the clipboard emoji and then show the project name/link on hover. Is this possible using the snippet as-is? If not, any ideas how one could add their own custom "fields" using a prepended emoji? |
|
|
|
@nestor50 You deleted the question and response while I was responding to you. I don't appreciate you wasting my time like that |
|
I stopped using obsidian for task management for another piece of software (workflow reasons) and so I'm no longer using Tasks at the moment, and probably not going to maintain the Tasks icon generator tool as I'm not using Tasks anymore. My thought a few weeks ago, and when I wrote the tool originally, was that 'Icon themes' could serve a future Tasks plugin feature. If this interests you at all I wanted to offer to handover the tool and go through with you - just thought this was worth doing as I've done the heavy lifting and its not being maintained. Pretty straightforward, let me know if this is of interest. There's a few ways it could be done, just as a backend tool to ship some mono icon themes with the plugin (which just enables a CSS file), or something more clever.. Cheers! Phil |
|
Hi Phil - @replete, No promises about time availability, but I would definitely be interested in learning about the code, to understand what the future options are. Please could you email the address in my profile here to set up a session to discuss the code and options? Thanks. |
|
Okay Clare, so what I will do then is record a quick 5 min screencast and send you a video URL by email as a starting point. If you wanted to discuss beyond that feel free to reach out. Phil |
|
OK thank you. |
|
I've updated my version of this CSS to unify the postpone emoji with the rest, and also tweaked my edit/backlink (I don't hide my backlink behind the dots). All the relevant changes are toward the bottom, but you'll have to pick and choose your copy/paste to use it. https://github.com/PeterBeckley/obsidian-stuff/tree/main/CSS |
Buttons on the right, in case someone is interested. (I find it clearer if text and icons have separation.) and, under |
Thank you for your version. Could you kindly add the ❌ U+274C for cancelled tasks as well? |
|
I would happiest if someone would fork that repo and maintain it, in which case I would forward people on |
|
Are you interested in transferring ownership of the repo to When we chatted about this previously, I got quite a long way in using it, but never had time to fully to develop the design skills to use it for real.... But if it's in a repo I have control over, I can solicit assistance from others, especially when Tasks has new Emojis on the horizon... |
|
Hi @claremacrae I'd be happy to, I just tried it but got the 'You don’t have the permission to create public repositories on obsidian-tasks-group' error. Happy to do it over the phone if timing is an issue, I think my details on an email footer. |
|
Oh sorry, It's harder than I thought... Do you want to transfer to me first, and I'll transfer it to I haven't forked the repo, so it should work. |
|
"Repository transfer to claremacrae requested " That should work I think? |
|
Hi @replete, thank you for this project! |
|
What version of Android? If your OS is out of date you might have a Webview version older than 109 which was when |
|
thanks for asking also, I am not using any themes |
|
Yep, this is probably due to outdated version of Chrome Webview and the probably CSS using features like This could be fixed by writing CSS without these features, but someone will have to do it, so I'd raise this on the new repo mentioned, but it wont happen until there's a maintainer |
|
but if you wanted to fix this yourself, its probably the use of |
|
Just to note that this: is now at: Huge thanks to @replete for getting this going! |
|
Im not sure why, but the edit button seems misaligned from everything else. |
|
Probably conflicting styles from your theme or other snippets as it works on default/minimal |
|
Thank you for the great task theme! I'm having a small problem - the checkbox priority colouring seems to conflict with the checkbox styling provided by the theme I use. The box becomes filled in in red as well as having the coloured glow around it.
My theme is the Catapuccin Latte theme. I'm not super familiar with theme development for Obsidian so if anyone could point me to where I should be looking to fix this it would be much appreciated! |
/* Priority as colour */
.task-list-item[data-task-priority=highest] input[type=checkbox] {
box-shadow: 0px 0px 1px 1px var(--color-red);
border-color: var(--color-red);
}
.task-list-item[data-task-priority=high] input[type=checkbox] {
box-shadow: 0px 0px 1px 1px var(--color-orange);
border-color: var(--color-orange);
}
.task-list-item[data-task-priority=medium] input[type=checkbox] {
box-shadow: 0px 0px 1px 1px var(--color-yellow);
border-color: var(--color-yellow);
}
.task-list-item[data-task-priority=low] input[type=checkbox] {
box-shadow: 0px 0px 1px 1px var(--color-cyan);
border-color: var(--color-cyan);
}
.task-list-item[data-task-priority=lowest] input[type=checkbox] {
box-shadow: 0px 0px 1px 1px var(--color-cyan);
border-color: var(--color-cyan);
opacity:0.6
} |
|
Hi! I've noticed that custom task status (such as -[/] In Progress) nulifies priority coloring! Has anyone faced the same issue? Here's a fresh vault reproducing the issue: Tasks - Status Bug Test Vault.zip 
|
|
Hard to say without any info to reproduce the problem. But my guess is you may not have configured the types of your custom statuses in the Tasks settings. |
|
I think I've got to the point... The custom statuses are being read as "done" by the CSS Styling, I suppose. The priority-based colored checkbox contour is uncolored when the task is marked as done. Weirdly, "in Progress" is counted as "done" by this CSS snippet, I've reproduced the problem in a new sandboxed vault, and I did set up the custom statuses in tasks settings (as the minimal's preset quick add) 
|
|
I don't have the capacity to do user support on snippets. But if you believe there is a problem with the snippets in this Discussion, you could zip up your minimal test vault and upload it here, so if anyone has the time and the inclination to investigate, they will have meaningful data to work with. |
|
(As a word of advice, in general it's unlikely help can ever be given based on screenshots alone, as there are too many variables going in to the behaviour of Obsidian vaults for anyone to be able to reliably reproduce another user's setup and behaviour from screenshots alone) |
|
tyvm! I'll be uploading a fresh vault reproducing the problem in the original comment. Thanks for the plugin! |
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Preview
(pictured using Minimal Theme)
Updated with new priorities (highest/lowest) and fixed for default theme:
(pictured with default theme)
Overview
Probably not everyone's cup of tea, but after making a monochrome icon generator tool for Tasks, I had a quick go at a compact interface. @sunb_mn on Obsidian's Discord made the original version this is based on, which was shared at just the right time as I was planning to do something like this. I've updated this thread with new priorities and fixed for default theme.
If you have minimal theme and use this, issues can be raised on my repo, for default themes I'm not really keen on supporting it as I only use Minimal Theme.
This is the full CSS for the solution above, updates will occur within my working snippets repo (based on Minimal Theme) I'm sharing here so others can benefit from it.
I'll probably make another compact two line version with mono icons which would probably be more usable.
Note: The edit icon was replaced by an inline SVG image within the CSS, so switching out the webfont at the start of the script below will not affect it should you modify this...
CSS Snippet
Included from origin 11 Jun 2023:
https://github.com/replete/obsidian-minimal-theme-css-snippets/blob/main/Tasks%20-%20Compact.css
All reactions