Align edit and postpone buttons to the left [before the description]

[HumanError13]

⚠️ Please check that this feature request hasn't been suggested before.

• I searched previous Ideas in Discussions didn't find any similar feature requests.
• I searched previous Issues didn't find any similar feature requests.
• I am only requesting a single feature. Multiple changes should be split into individual requests, with links between them.
• I believe my requested feature will be generally applicable to other users, not just me: it is not uniquely tied to my personal workflow.

🔖 Feature description

Align edit and postpone buttons to the left

From @claremacrae: this intends to mean 'before the description'

✔️ Solution

Having a toggle within the options, which changes the alignment of the edit and postpone buttons to the left (just right from the task toggle) and not at the end of the task line.

❓ Alternatives

No response

📝 Additional Context

Currently, the task lists can become very cluttered. Since tasks descriptions have different length, the most used buttons for me (edit / postpone) are to found all over the place. These crucial functions could be found much easier and it would give a much cleaner look if those two buttons would be placed on the left of the task description (between the task description and task toggle button).

I could not find any other similar suggestion, although it seems like a feature many people could like.

[claremacrae]

I understand what you are saying, and in fact I do something similar, by putting a line-break after the description.

With the Style Settings plugin enabled, this CSS snippet allows me to a line-break after the description, and turn it on and off, with a command, depending on the types of search I am running....

/* @settings
name: Clare's Task Lines
id: clare-task-lines
settings:
    - 
        title: CFM Break after description
        description: Add a line break after the description
        id: break-after-description
        type: class-toggle
        addCommand: true
*/

/* =================================================== */

/* Add newline after description */
.break-after-description .task-description span:after  {
    content:"\a";
    white-space: pre;
}

We have a documentation page on Styling, where you can find more about the available options for customising the rendering of search results with CSS.

[HumanError13]

Thank you! This already helps a lot.

However, is there any way to achieve the described style with buttons on the left? It can have some benefits, if there are a lot of short tasks and I want to have it more compact with each in a single line, no break. Imagine the following layouts:

Style 1
[ ] This is a longer task [e][>]
[ ] Short task [e][>]
[ ] This is a very long task, very very long, indeed. Much long, much wow. [e][>]

Style 2
[ ] [e][>] This is a longer task
[ ] [e][>] Short task
[ ] [e][>] This is a very long task, very very long, indeed. Much long, much wow.

In style 2, the buttons are much easier to find and click for me. I cannot find anything mentioned in the CSS documentation about changing the order of the components and move something to the left of the description. Is this possible e.g. via grid view?

[claremacrae]

Oh, it was not clear to me before that when you said “to the left” you also meant “and on the first row”.

I am not aware of a way of doing this currently.

[claremacrae]

So more precisely it means “at the start of the task line, immediately after the checkbox and before the description”..

[claremacrae]

And….. You did say pretty much that , and not for the first time I missed some of the context when reading in my phone, by focussing on the title of the the request.

Thanks for clarifying with the example.

[claremacrae]

I've renamed the issue, and added some clarifying text to the description, so it is unambiguous that this means putting the buttons before the description, not on the start of a second line.

[HumanError13]

I'm tinkering with CSS to find a solution. Is there any way to change the standard order of the task elements in general?

For example:
[ ] <description><priority><due><backlink>

change to:
[ ] <description><backlink><due><priority>

Edit: Just to be clear, I'm meaning here the order in the output of a query.

[claremacrae]

Edit: Just to be clear, I'm meaning here the order in the output of a query.

No, if there was I would of course have mentioned it above.

[HumanError13]

Ok, thanks. Sorry, I had the impression that the postpone and edit buttons could somehow behave differently being placed alwayse at the end, while other elements could have been more flexible. So you maybe did not mentioned it because you thought I'm all about the pp/edit buttons. But I understand, they are probably the same.

In this style here, #1965, the backlinks are moved to the far right. Moving parts to the right could be a nice solution too with some more tinkering. It works with

.plugin-tasks-query-result .tasks-backlink {
    float:right;
}

Unfortunately, I currently have a conflict with other parts in my snippet and the backlinks do not move from their position. I will come back, if there is a solution... I never did CSS and only very limited programming, so there are a lot of mysteries for me.

[HumanError13]

I think I'm on to something ☺️

[claremacrae]

Sorry, I had the impression that the postpone and edit buttons could somehow behave differently being placed alwayse at the end, while other elements could have been more flexible.

Oh, I thought you were asking whether there was a Tasks plugin instruction to render the HTML elements in a different order. There is not.

As for changing the order of the elements with CSS, i don’t know the limits of what is possible. Which is why I encourage users to share CSS examples in Discussions > Show & Tell - to help others out.

[claremacrae]

Thanks very much indeed for working on this!

[HumanError13]

Current status:

It seems that I cannot properly separate the task extras (backlink + postpone + edit), so they are special in a certain way that they define their own span (probably not the correct language from me here, but that's how I understand it).

I settled with using a combination of grid (to set the extra items on the right) and float (to change the order of the icons with postpone to the left within the grid cell). Still a bit wonky, but I will continue improving it maybe in three weeks. I can share in the showcase then as well.

Meanwhile here the snippet:

/* define grid with items placed. border is only for testin purposes. putting items in second row seems not to work. */
.task-list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
}
.task-list-item-checkbox {
    grid-row: 1;
    grid-column: 1;
}
.task-description {
    grid-column: 1;
    grid-row: 1;
    border: 1px solid rgba(0, 0, 0, 0.0);
}
.task-priority {
    grid-column: 2;
    grid-row: 2;
    border: 1px solid rgba(0, 0, 0, 0.0);
}
.task-recurring {
    grid-column: 2;
    grid-row: 2;
    color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 0px 8px;
    border: 1px solid rgba(0, 0, 0, 0.0);
}
.task-due {
    grid-column: 2;
    grid-row: 2;
    border: 1px solid rgba(0, 0, 0, 0.0);
}
.task-created {
    grid-column: 2;
    grid-row: 2;
    border: 1px solid rgba(0, 0, 0, 0.0);
}
.task-cancelled {
    grid-column: 2;
    grid-row: 2;
    border: 1px solid rgba(0, 0, 0, 0.0);
}
.task-done {
    grid-column: 2;
    grid-row: 2;
    color: var(--list-marker-color);
    border: 1px solid rgba(0, 0, 0, 0.0);
}
.task-extras {
    grid-column: 3;
    grid-row: 1;
    align-self:flex-start;
    border: 1px solid rgba(0, 0, 0, 0.0);
}

/* sort and align task-extras within grid cell */
.plugin-tasks-query-result .tasks-backlink {
    padding-left: 9px;    
}
.plugin-tasks-query-result .tasks-edit {
    float:none;
    padding-right: 0px;    
}
.plugin-tasks-query-result .tasks-postpone {
    float:left;    
}

[claremacrae]

It's looking good.

I can share in the showcase then as well.

Thanks - much appreciated. Did you look there in case anyone has done something similar before?

[HumanError13]

Yes, thanks for the tip. :) That's where I found the float command among other useful snippets.