Button that needs a 2nd click to approve action

[chess-levin]

I've developed a button that needs a 2nd click before it performs the registered command. I've borrowed this idea from Insomnia tool. They used this feature to make sure the user doesn't accidentally delete something when clicking delete.

There is still an issue left in my code I couldn't solve. Maybe one of you guys could help?

While clicking the button for the 1st time, the mouse hovers over the button. That triggers the mouse over color (mode) and that leads to a quick change of the color to red and back to the old color of the mouse over mode. But I want the color to stay in red (or darkred).

When I then move the mouse away from the button (after 1st click) and move it back again the color stays red.

How can I get rid of the initial color flickering?

class ApprovalCTkButton(customtkinter.CTkButton):
    def __init__(self, master=None, **kwargs):
        self.original_command = kwargs.pop('command', None)
        super().__init__(master, **kwargs)
        self.original_color = self.cget("fg_color")
        self.original_text = self.cget("text")
        self.clicked_once = False
        self.timer = None
        self.configure(command=self.on_click)
        self.bind("<Enter>", self.on_enter)
        self.bind("<Leave>", self.on_leave)

    def on_click(self):
        if not self.clicked_once:
            self.clicked_once = True
            self.configure(fg_color="red")
            self.configure(text="Confirm")
            self.timer = threading.Timer(10.0, self.reset_button)
            self.timer.start()
        else:
            self.do_action()
            self.reset_button()

    def reset_button(self):
        if self.timer:
            self.timer.cancel()
        self.configure(fg_color=self.original_color)
        self.configure(text=self.original_text)
        self.clicked_once = False

    def do_action(self):
        print("Action performed!")
        if self.original_command:
            self.original_command()

    def on_enter(self, event):
        if self.clicked_once:
            self.configure(fg_color="darkred")

    def on_leave(self, event):
        if self.clicked_once:
            self.configure(fg_color="red")
            self.configure(text="Confirm")
        else:
            self.configure(fg_color=self.original_color)
            self.configure(text=self.original_text)

[dipeshSam]

@chess-levin Few things you need to consider here: No need to use timer or threading at all. Also, customtkinter provides hover color handling as built-in support. Here is the optimized implementation of the Approval Button type control:

from customtkinter import CTk, CTkButton

class ApprovalButton(CTkButton):
    def __init__(self,
        master: CTk,
        confirm_text: str = None,
        confirm_fg_color: str = None,
        confirm_hover_color: str = None,
        **kwargs):
        
        self.confirm_text = confirm_text
        self.confirm_fg_color = confirm_fg_color
        self.confirm_hover_color = confirm_hover_color
        self.callback = kwargs.pop("command", None)

        kwargs["command"] = self._command
        super().__init__(master, **kwargs)
        self.text = kwargs["text"]
        self.fg_color = kwargs["fg_color"]
        self.hover_color = kwargs["hover_color"]

        self._user_confirm: bool = False
        self.bind("<ButtonRelease-1>", self._on_click)


    def _on_click(self, e=None):
        if not self._user_confirm:
            self._user_confirm = True
            self.configure(text=self.confirm_text,
                           fg_color=self.confirm_fg_color,
                           hover_color=self.confirm_hover_color)
            
            self._on_enter()    # Enforce hover redrawing.
            
        else:
            self._user_confirm = False
            self.configure(text=self.text,
                           fg_color=self.fg_color,
                           hover_color=self.hover_color)
            

    def _command(self):
        if self.callback and self._user_confirm:
            self.callback()
    
    


if __name__ == "__main__":
    app = CTk()
    app.configure(width=500, height=300)

    btn = ApprovalButton(app,
                         text="Proceed",
                         fg_color = "green",
                         hover_color = "darkgreen",
                         confirm_text= "Confirm?",
                         confirm_fg_color= "#BB0000",
                         confirm_hover_color = "#880000",   
                         command = lambda: print("Callback example.")
                         )
    btn.place(relx=0.5, anchor="center", rely=0.5)


    app.mainloop()

Output:

ctk_button_hover_redraw.mp4

Also, if you want to get default colors for any widget, you can use ThemeManager. Just provide the name of the widget you want to get default values, here is sample code:

from customtkinter import ThemeManager
button_colors = ThemeManager.theme["CTkButton"]
print(button_colors)

Output:

{'corner_radius': 6, 'border_width': 0, 'fg_color': ['#3B8ED0', '#1F6AA5'], 'hover_color': ['#36719F', '#144870'], 'border_color': ['#3E454A', '#949A9F'], 'text_color': ['#DCE4EE', '#DCE4EE'], 'text_color_disabled': ['gray74', 'gray60']}

Hope, the given information would be helpful to you. Let me know what you expect more from the above code or need any further help in this case.
Regards.

[chess-levin]

Hi @dipeshSam, thanks for this comprehensive feedback.

At the first glance I can't find the auto-reset feature in your code, that kicks in after a few seconds waiting in vain for the 2nd click. That was the reason I'm used threading.Timer for.

[dipeshSam]

Could you please elaborate how or what functionalities you're looking for?

[chess-levin]

Here is the working class based on your code.

The button changes color to confirm_fg_color and text to confirm_text on 1st click.
If there comes no 2nd click within timeout_duration_s the button changes color and text back to normal.

class ApprovalCTkButton(customtkinter.CTkButton):
    def __init__(self, master=None, confirm_text="Confirm", confirm_fg_color="red", confirm_hover_color="darkred",
                 timeout_duration_s=5.0, **kwargs):

        self.confirm_text = confirm_text
        self.confirm_fg_color = confirm_fg_color
        self.confirm_hover_color = confirm_hover_color
        self.callback = kwargs.pop("command", None)

        kwargs["command"] = self._command
        super().__init__(master, **kwargs)

        self.text = self.cget("text")
        self.fg_color = self.cget("fg_color")
        self.hover_color =self.cget("hover_color")
        self.timeout_duration_s = timeout_duration_s
        self.timer = None

        self._user_confirm: bool = False
        self.bind("<ButtonRelease-1>", self._on_click)

    def _on_click(self, e=None):
        if not self._user_confirm:
            self._user_confirm = True
            self.configure(text=self.confirm_text,
                           fg_color=self.confirm_fg_color,
                           hover_color=self.confirm_hover_color)
            self._on_enter()    # Enforce hover redrawing.
            self.timer = threading.Timer(self.timeout_duration_s, self.reset_button)
            self.timer.start()
        else:
            self.reset_button()

    def _command(self):
        if self.callback and self._user_confirm:
            self.reset_button()
            self.callback()

    def reset_button(self):
        if self.timer:
             self.timer.cancel()

        self._user_confirm = False
        self.configure(text=self.text, fg_color=self.fg_color, hover_color=self.hover_color)

[dipeshSam]

@chess-levin I see. Introducing this feature is way easier. Also, NO need to use threading, again. Use after() method instead. Tkinter provides built-in support for scheduled tasks in the form of .after() method which executes the given function after certain amount of time. Here is working code example for the same:

from customtkinter import CTk, CTkButton

class ApprovalButton(CTkButton):
    def __init__(self,
        master: CTk,
        confirm_text: str = None,
        confirm_fg_color: str = None,
        confirm_hover_color: str = None,
        confirm_delay_ms: int = None,
        **kwargs):
        
        self.confirm_text = confirm_text
        self.confirm_delay_ms = confirm_delay_ms
        self.confirm_fg_color = confirm_fg_color
        self.confirm_hover_color = confirm_hover_color
        self.callback = kwargs.pop("command", None)

        kwargs["command"] = self._command
        super().__init__(master, **kwargs)

        self.text = kwargs["text"]
        self.fg_color = kwargs["fg_color"]
        self.hover_color = kwargs["hover_color"]

        self._user_confirm: bool = False
        self.bind("<ButtonRelease-1>", self._on_click)


    def _on_click(self, e=None):
        if not self._user_confirm:
            self._user_confirm = True
            self.configure(text=self.confirm_text,
                           fg_color=self.confirm_fg_color,
                           hover_color=self.confirm_hover_color)
            
            # Enforce hover redrawing.
            self._on_enter()
            
            # Calling reset function after certain time.
            self.after(self.confirm_delay_ms, self._normal_back)
            
        else:
            self._normal_back()
            
    
    def _normal_back(self):
        if self._user_confirm:
            self._user_confirm = False
            self.configure(text=self.text,
                           fg_color=self.fg_color,
                           hover_color=self.hover_color)
            

    def _command(self):
        if self.callback and self._user_confirm:
            self.callback()
    
    


if __name__ == "__main__":
    app = CTk()
    app.configure(width=500, height=300)

    btn = ApprovalButton(app,
                         text="Proceed",
                         fg_color = "green",
                         hover_color = "darkgreen",
                         confirm_text= "Confirm?",
                         confirm_fg_color= "#BB0000",
                         confirm_hover_color = "#880000",   
                         confirm_delay_ms = 1000,
                         command = lambda: print("Callback example.")
                         )
    btn.place(relx=0.5, anchor="center", rely=0.5)


    app.mainloop()

Let me know what changes you wish further.
Regards.

[chess-levin]

That works great. Thanks again for your support.