[Idea] TST close button on the left

[benneti]

trafficstars

When using autohide it one has to move the cursor to the left to open slide it open but when it is expanded one needs to go to the far right to close a tab. A simple solution to minimize travel distances for the tabs would be to move the close button to the left of the tab name.

[akshat46]

Finally getting around this.

Having close button on left just for expanded tab group would be a little off-pattern and add inconsistency to the design. I could include this as a configuration in the web-app, but things have come up and I've decided to shrink the scope of this project for now so I doubt it'll be added anytime soon.

That said, adding following snippet should move the close button next to collapse-expand button on left side, but only when the group is expanded. This only works with config-hover.css. TST CSS for static sidebar needs to be fixed a little (mainly the positioning of tabs counter, which would also change animations for favicon and labels). I'll update this reply with a separate snippet for static-sidebar once that's done.

/* CONFIG-HOVER.CSS ONLY*/

/*** if has children & is collapsed ***/

/* move favicon off the tab on hover*/
:root.left tab-item[data-child-ids]:not(.pinned):not(.subtree-collapsed):hover tab-favicon {
    transform: scale(120%) translateX(30px) !important;
}

/* shift label right on hover */
:root.left tab-item[data-child-ids]:not(.subtree-collapsed):hover .label {
    transform: translateX(25px);
}

/* replace default closebox position. */
/* overwrite right rule, add new left rule */
tab-item[data-child-ids]:not(pinned):not(.subtree-collapsed) tab-closebox{
    right: 0 !important;
    left: -20px !important;
}

/** shift closebox on hover */
tab-item[data-child-ids]:hover:not(pinned):not(.subtree-collapsed) tab-closebox{
    left: 22px !important;
}

[benneti]

thank you, I'll try it out!

[benneti]

Do I need to delete something for this to work, or should it work after simply adding it in my TST config?

[akshat46]

Should work on its own as long as it's added to the very bottom, and rest of the css is from config-hover.css

[benneti]

Actually it only works for the top level tabs of trees, the toplevel tabs without trees and non-toplevel tabs do not change the close button position.

[akshat46]

Oh, I thought that's what you were asking about. To have close button on left just for tabs with children so that it's right next to the expand-collapse button.

It'll be a bit of work to shift close buttons to left, I'll get around to it in a bit. Alternatively, instead of moving closebuttons to left, it's easier to move the expand-collapse button to right. Which can be done with this:

tab-item[data-child-ids]:not(pinned) .twisty{
   order: 2 !important;
   transform: translateX(-10px) !important;
}

:root.left tab-item[data-child-ids]:not(.pinned):hover tab-favicon {
    transform: scale(120%) translateX(25px) !important;
}

I've only tested this on config-hover. Just the first rule alone should give desired styles if used with static-sidebar css.

[benneti]

ah it wasn't related to the expand button; it is more that sometimes I move my mouse to fast to the close button and the intellihide doch hides before I can close the tab. Therefore I thought it might be nice to have the close of all tabs on the very left to not accidently hide the tab side bar.

Don't feel pressure how it is just fine, too.

[akshat46]

oh I see. Will try to do something about it in next few days.