Changing Dock Handle Colour

Ignition
,
1

I am interested in using a dock handle to show if a user is logged in.

I believe you need to use the style sheet resource to achieve this:
Dynamically Change/Animate Docked View Handle Icon

My knowledge of CSS and how to actually achieve this ran out. Getting the information into a session property is easy, but I have no idea how to animate that dock colour using the style sheet.

Please point me in the right direction.

Assume the newest version of Ignition.

2

I'll have to think about this for awhile, but I don't think you'll be able to manage this. The problem you'll run into is going to be changing the color based on a session state, but our built-in Session pieces (Docked Views, Popups, Notifications) don't allow for specifying their styling/appearance based on conditions because there's nothing in the Designer aside from behavioral configurations.

I think your best option is going to be to use a changeScript on session.props.auth.username and when the value is not None or an empty string use system.perspective.alterDock() to modify the Docked View.

3

I would much prefer to use system.perspective.alterDock, but the handle color doesn't seem to be exposed.

The dock auto hides, for space purposes, and I want to use the handle as a hint to open the dock

4

Ah, yah, we don't even expose the color during Docked View configuration. I'll try to remember to open a feature request for this when I am next in the office. For now, I don't see an avenue to achieve this.

1 Like
5

I forgot about this, so opened an idea in case @cmallonee forgot too.

6

this can be done with markdown injecting a style i guess

1 Like
7

I suppose it is possible, but I do not want to implement anything that it isn't fully supported/endorsed by Inductive

8

Good idea :stuck_out_tongue:

If you use the stylesheet.
It could be done with only css if you have this thing
(Idk if it works if you turned this off, i know its possible to turn it off but i forgot where so cant test)
image

body:has( .username[title=""]) .view-toggle.toggle-left {
    background-color:red;
}

body:has( .username[title]:not([title=""])) .view-toggle.toggle-left {
    background-color:green;
}

(I just choose toggle-left only)

With ":has" you could also just do it by assigning a class somewhere through a binding and use that class in the has instead.

1 Like