slgobinath / SafeEyes

Protect your eyes from eye strain using this simple and beautiful, yet extensible break reminder
http://slgobinath.github.io/SafeEyes/
GNU General Public License v3.0
1.46k stars 164 forks source link

The reset button is not visible in Ubuntu 22.04 #487

Open prakhartiwari0 opened 2 years ago

prakhartiwari0 commented 2 years ago

Describe the bug In the settings of safe eyes app, when I click on the icon at top left, I couldn't read what's written in the button that pops up because its completely white in there

To Reproduce Steps to reproduce the behavior:

  1. Go to 'Settings'
  2. Click on 'Icon of Safe Eyes at the top left of the window'
  3. See the problem in the popup button

Expected behavior It should be clearly visible what's written in it.

Desktop (please complete the following information):

Debug Log Run the Safe Eyes using safeeyes --debug command attach the ~/safeeyes.log` file. safeeyes.log

Screenshots image

slgobinath commented 2 years ago

Thanks for reporting. This is a CSS styling issue https://github.com/slgobinath/SafeEyes/blob/master/safeeyes/config/style/safeeyes_style.css#L109-L123

Until I fix it, you can modify with the CSS file available at /home/gobinath/.config/safeeyes/style/safeeyes_style.css. If you find the solution, a PR would be highly appreciated.

prakhartiwari0 commented 2 years ago

Sure @slgobinath Let me check if I can, I will definitely help you with it!

prakhartiwari0 commented 2 years ago

Hey @slgobinath Can you guide me with the basics of the code? Is there any good resource from where I can learn how Linux Apps work, I know Python enough to understand the code, but until I understand the process, functions, module, the overall functionality of the code, I cannot do anything?

slgobinath commented 2 years ago

Hi, Sorry I don't have good documentation other than the code itself. The only difference between Linux apps and say Windows apps is the GUI framework. Though they are cross platform, windows only apps may not choose Gtk or Qt but those are the prominent frameworks in Linux. Other than the GUI stuff everything else is pure logic.

Safe Eyes is using Gtk for the GUI. All the core logic is written in Python. If you like to start building your own Linux app, start from hello world Gtk or Qt apps in Python (or any other language). Tutorials point has some good resources https://www.tutorialspoint.com/pygtk/pygtk_hello_world.htm Though the GUI can be coded in pure Python, there is a GUI designer called Glade for Gtk which allows drag and drop GUI design and export them as XML files. You can see the Safe Eyes Glade files in https://github.com/slgobinath/SafeEyes/tree/master/safeeyes/glade

Both Gtk and Qt frameworks allow styling widgets using CSS. The Reset button has the CSS class name defined here: https://github.com/slgobinath/SafeEyes/blob/master/safeeyes/glade/settings_dialog.glade#L86-L88

For example to change the button color, you only need to modify the /home/gobinath/.config/safeeyes/style/safeeyes_style.css file and restart Safe Eyes.

If time permits (hardly these days), I will write some articles at https://www.linuxedo.com/ on how to write and publish Linux apps for beginners.

prakhartiwari0 commented 2 years ago

Thanks a lot for your guidance. And I will be waiting for those articles eagerly. If you can, then please share them with me once you have published them. I will learn the concepts and things required, brush up and enhance my Python skills and whatever is required to become a contributor to this project. And also, solve this particular issue.

Thanks again

AdamPS commented 10 months ago

At first I thought I had confirmed this but actually I see something different. For me the reset button is visible when it pops up, however the safeeyes icon that should be clicked to display the menu doesn't show.

archisman-panigrahi commented 4 months ago

I have been using safeeyes for 4 years, but I did not even know that the reset button existed behind the icon. I suggest we bring the reset button directly on the headerbar (can be done with GTK4)

archisman-panigrahi commented 3 months ago

How about something like this?

image

I can send a pull request if people like it.

archisman-panigrahi commented 3 months ago

Here is my branch https://github.com/archisman-panigrahi/SafeEyes/tree/reset-button-merge

archisman-panigrahi commented 3 months ago

How about this? (the icon does not have any function here) image

slgobinath commented 3 months ago

Thanks @archisman-panigrahi I like the idea but the button looks big to my eyes.

I presonally prefer a smaller icon only button with a tooltip or adding a menu option to the TrayIcon context menu. Leaving it to the community though.

archisman-panigrahi commented 3 months ago

smaller icon only button with a tooltip

Until I saw this issue, I did not discover the reset button hidden inside the tooltip despite using safeeyes from 2019, so I would prefer the other option:

adding a menu option to the TrayIcon context menu