Tasks - Compact styles (monochrome icons, tooltips, priority as colour) #1965
Replies: 15 comments 39 replies
-
|
Thank you very much for sharing this! /cc @esm7 - more exciting use of your work! ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
No worries, thanks for making the Tasks plugin 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Wow, thank you for sharing! |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
Moved to #1974 |
Beta Was this translation helpful? Give feedback.
-
|
@replete I can confirm I have the same problem on Mac - there's lots more info in #1974 I'd really appreciate if you could review and add any suggestions over there - thanks! |
Beta Was this translation helpful? Give feedback.
-
|
@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 |
Beta Was this translation helpful? Give feedback.
-
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: |
Beta Was this translation helpful? Give feedback.
-
|
@timrosenberg I've responded to the other thread which can now be closed, and updated the OP in this thread with updated solution. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @replete! This is a very good starting point for some custom modifications! |
Beta Was this translation helpful? Give feedback.
-
|
Steady on! 😄 Those new icons were only added to Tasks yesterday... |
Beta Was this translation helpful? Give feedback.
-
|
Haha, I see. And here I was thinking, "Strange, I actually remembered it as complete, but there are missing states..." Now I know... |
Beta Was this translation helpful? Give feedback.
-
|
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,d09GMgABAAAAAAfYAAsAAAAAEqwAAAeKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHIIoBmAAhhgKkXSPHgs6AAE2AiQDcAQgBYRqB4FHG1gQo6KUbl5C9tcHpgwx1BHrT00hbkxF2+jBQjTGSakomwv5POjsWH2drh8ZD57DbjoY88O/LOQ+LO5ZBubF/0yTKuUKT6Bv3zpC3OH3l+8G8STO/JiA7DqHYsaFAsfxwHPv/jYpbGvgcwC2uRM900gCaR9PuP3/prfe1sWm5BNJ/0O1vdwmUZkQNS1B/P/fTaFeAtnncNvENYSPmzSWXoDRDZE6i6TSYq0ew+vXXu1tkg2xInhhHWHAkYrym/fpMMAXIHUQQHQpoKqrZsUSACQLU5UKhb7KdWqU6mWbdZNhqaViiG1Kg2ixd8OJ/pEgQKmuKW3YtnNvBAUjZk9FHAkAAMJmLIMJ40bAx7RIEoD1tb3CFFdZa3m6rOM6NIaQImVE+Ujw+EjS2HwhTyAQERVDksMU8OUk+VwaQ5JgioiJ8yUkmaTgccOzbLYQbZcnbV3PoEvKCSRrqRic0kR5UrPjLIaMbI4tOhEYTiZXkJuekMJkGbW4fSZkR58PwLy1/2JnZFQCGj2GwyN0X7UZjVMjQvMNwG2rdJwH3gFsgA4QgMoACTwhAHgKgbIoQb1paSeApJBgGAFWrVG7ztK3pT7L6eX2AEaohKrTsvD7ZlnQKWlkzSqqtIrelacDOSGX38H/YUekpURlBBKSPFkmi01xgEkwXhcphWIaO5HORbEbQSaJ/4RDgCuaI/jnaCNWkMNREOJocHEM+DgOYjge4jgBIjgZ0jgFUjgVojgNMjgTApwFCZwNSZwDHs4TssGlrv4wg0vd/GEFl/r0hx1cLuEPFVxunQMOfp1zAcRvHdAspQ46IEBpgg5IUFqQE9Dx5xoBGBFAvhWoL0Zq/4iLQ/BgLQIZYYSkgSyDAKt0UfVOMLGM7SW6uiUyCeIGsRrZvLAormAzhwCu9WKqed6Bgd53ncim99+nuUK8N9+BPpk9wdCz7tTZRAGiXMG7w/oUo8fkctL73ut7DIB3anuLbCZqaAKJPQ73iM6Et4lHDT/V7/91+H23Dyk41opPIh6km04TQPGVZTbJq9wjZP7myMYrikafb46HGXyppeEFRO2n84h8e83STTgS/eIRltNNdLpoHuA89wQOHLZxkgpGahXetrAayxM1jSpzZ/ed3uUK7s+d7imuEO+ppshOeq2VurflFdweaTiblHlsPSpsDN45vd/RHlBaLyl5YGrSxl6Vc29Utz5yWYfsrxgzQ2p6973YHFZiEJ7diOZLorbXv+NU34Voileww54yKpWySGhPhzmewGWz3h1ItrUrjmg7sJZdy1+HTFxsXC6VZMqvxsvqcolJ4A4Mk+q1i9vaK1RZd62ADu17WCzeiX2Z917xcdqxeV8WH4sdnbeqeAcYeSsTvO3PM9TnT5UbLTuvAjW+Shk9z1KU7Zv26udyrNRiElDCa+yLkS/5r2tbk2K9fW/f6erDprc21EGEFRGvTT5oM9CCwopicVtIa8CU4tXJe5vqlEuggFkd33K7h+QC1uhQtJxfnl+1lzOWO61eegw+mp5fTZksO4oape6werum4DBQk203MMLwrToLQsu0vcB/XUqGCpALMsmyISjqjXAi6IKJq5ffG2/cXogaJWwRttWQHAIdbT83CFUAkqhZOQ417ixAnzbzHQZaba/jKhc71N29IM3T6ONnI+vpQxa44krgW8o9/D/6X9+pUXKt6p78X6S0JVqcAMSdXVIDwYzDsfcn+JxDN4Zu/bvc/SyCq3UILlEUH4edBkptdZXasbIL5bgS/xS2rkPdMhz/eGtlzyf2Wbo53C9b6Rv7zodnUbSInE+aXl86n1z0fKIbueSnsPi8gjyfMkCC/pf2mjWgMoOTymY7nIzLE93IJb94xTek7SGtFcC7gyB0FGjXEyAA7eom+l3mZ6aW+fkmHJwl226QtbD1wMPU/YF8IrOBDcfGDyjbnkih/2WVOD7S5bxSbdfria3b1vLiDTp5XgRNW0ugxPPlw+ALoBAapY3SAGCU9U9DEAv9ohUjmgD+2hcjCn9GJaPIPlhuqRVfpYVJPE4o7Ql+VwQQtn60rR6Dxr9ZjvmGg1BQ/0x3VVg0AEBQ0WFsYoTCUYDB1Tw493FiXnAHPZ6HlSYAtPN2QjJTA6gjAwrYoeeQMwqAaUwBEwJJkFiG6Ry1mSHQjCmVdL2xI2YBd4zboKI2L5jGd1ESMrwvScD3mC7pV2YoGlFM6RspbzvKRpZ+V+g6XaZNndZmyrSJE2b9QO1SkqX8rpnqo9WoWl266BMIQ2fNHVdz9uyxemf+ZRs+++P+WwKXtk8bi/xleRKylGtVe052adTw6zCp16hGtVYZYKh2dcq1qK0mxswBa0Hv6jODVUNV1dXBojSkyVquDQwyR+qGBbMDii+JaIPoY7UIux5W2zy4olmnTiMq0+VSDZcqeQvb+BQX10SummrGiha2UbnUuTkUIe5T5yMaBSV1GjRp0aaiQ5cefQYMGWGUMcaZYJIppplhljnmWQRiOWeM/U91XJeimdob1ZgNsMXkafN0PYEsScnwC2Mq7bkOWWozNFN3IPL4tHM4hjM5ihM4leM4nrM4m1M4mdM4jyMAAA==') 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;
/* 📅, 🔁, 🔺, 🔼, 🔽, 🛫, ⏫, ⏬, ⏳, ✅, ➕ */ |
Beta Was this translation helpful? Give feedback.
-
|
@piridium I've just added highest and lowest glyphs to the repo Looking at the other icons/bugs now |
Beta Was this translation helpful? Give feedback.
-
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: |
Beta Was this translation helpful? Give feedback.
-
|
I've updated the original post with an updated version:
|
Beta Was this translation helpful? Give feedback.
-
My dots are not alighted to the right but come in closer down the task get? Any thoughts? |
Beta Was this translation helpful? Give feedback.
-
|
What theme? My guess is outdated obsidian or a snippet conflict |
Beta Was this translation helpful? Give feedback.
-
|
Also, what Obsidian installer version. (See 'About Obsidian'). If these snippets use the
|
Beta Was this translation helpful? Give feedback.
-
|
I am on Version 1.3.5 (Installer 1.3.4) Minimal Theme Limited plugins installed, tasks, dataview, excalidraw. Edit: Really love this thanks! |
Beta Was this translation helpful? Give feedback.
-
|
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.
|
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
@nestor50 I would over-ride for the dark/light theme. There is a css class on the body that is something like |
Beta Was this translation helpful? Give feedback.
-
|
@nestor50 how am I to interpret your 'laugh' emoji? |
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
@nestor50 You deleted the question and response while I was responding to you. I don't appreciate you wasting my time like that |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
OK thank you. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
Buttons on the right, in case someone is interested. (I find it clearer if text and icons have separation.) and, under |
Beta Was this translation helpful? Give feedback.
-
Thank you for your version. Could you kindly add the ❌ U+274C for cancelled tasks as well? |
Beta Was this translation helpful? Give feedback.
-
|
I would happiest if someone would fork that repo and maintain it, in which case I would forward people on |
Beta Was this translation helpful? Give feedback.
-
|
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... |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
"Repository transfer to claremacrae requested " That should work I think? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @replete, thank you for this project! |
Beta Was this translation helpful? Give feedback.
-
|
What version of Android? If your OS is out of date you might have a Webview version older than 109 which was when |
Beta Was this translation helpful? Give feedback.
-
|
thanks for asking also, I am not using any themes |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
but if you wanted to fix this yourself, its probably the use of |
Beta Was this translation helpful? Give feedback.
-
|
Just to note that this: is now at: Huge thanks to @replete for getting this going! |
Beta Was this translation helpful? Give feedback.
-
|
Im not sure why, but the edit button seems misaligned from everything else. |
Beta Was this translation helpful? Give feedback.
-
|
Probably conflicting styles from your theme or other snippets as it works on default/minimal |
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
/* 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
} |
Beta Was this translation helpful? Give feedback.
-
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
Beta Was this translation helpful? Give feedback.
All reactions