GUI fixes and minor redesign of remaining icons

[martinber]

Hello,

I want to try to fix some minor GUI problems:

• Remove unused icons
• Rename icon filenames to match better their purpose\
• Draw some new small icons (new, edit, add, remove, delete, download, etc.)
• Bad contrast and consistency of small button icons (E.g. icons on F12 debug window). Fixes Change buttons to make UI more intuitive #752
• Fix that oculars window titlebar was too thin
• Disabled state of buttons, checkboxes, radio buttons and spinners not clear enough
• Changed slightly some colors on the windows, particularly the backgrounds. Decreased the radius of some corners
• Change selection color of window tab icons, right now they look light blue, I want to make them white
• Fix an astroCalcDialog button using 8-off-settings.png icon
• Investigate if I can add warnings when the QT stylesheet is invalid

More problems to fix (in another PR):

• The satellites plugin GUI is setting buttons styles in a CPP file. Move to UI and CSS
• Tweak on the satellites plugin, the buttons that can change color
• Make the oculars plugin bar smaller
• Change backgrounds to make unselected icons more visible during the day
• Fix some margins on the GUI, at the same time fix dialogs are difficult to resize #937
• Fix various AstroCalc window issues, especially the bottom tabs on the Graphs tab
• Fix that some QComboBoxes are unnecessarily editable
• "Get location from GPS" button on the location window looks strange
  • Harder to fix than I thought. The button is a QToolButton instead of a QPushButton so it has a different style. Also the style should be set in the CSS file instead of the locationDialog.cpp. See below
• Stop using setStyleSheet() to change the style of widgets dinamically. It would be nice to set change properties with setProperty() and leave all the CSS inside of normalStyle.css. But a workaround is necessary: source 1, source 2.

Screenshots (if appropriate):

Images of almost every button I could find with an icon on it:

The overall style of windows has changed slightly:

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• This change requires a documentation update

How Has This Been Tested?

I just run the program with the new icons, doing screenshots to see diferences between old and new icons.

Test Configuration:

• Operating system: Debian GNU/Linux
• Graphics Card: Graphics Card: AMD Radeon R7 360. Driver: radeon

Checklist:

• My code follows the code style of this project.
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[martinber]

This is a mockup (New version on top). Can you confirm me that you like the idea? Look at the disabled versions of the checkboxes, radio buttons and buttons. I still have to change a bit the brightness of some of them

[alex-w]

Gray text on buttons is OK for me. Gray checkboxes looks weird - maybe it should be more gray?

[martinber]

Hello, I wanted to show some changes before continuing:

• I renamed every icon to make the names more consistent:
  • btButtonName-on.png, btButtonName-off.png: Bottom bar icons were already named this way
  • bbtButtonName-on.png, bbtButtonName-off.png: Left bar icons were renamed this way weeks ago by you (I think)
  • uibtButtonName.png, uibtButtonName-pressed.png: Every icon for standard gray buttons on the GUI windows, e.g. uibtSave.png, uibtLoad.png, uibtSearch.png.
  • uieElementName.png: Every GUI window element, e.g. uieCloseButton.png, uieCheckbox-checked.png, uieSpindown.png.
  • miscElementName.png: Misc things, like miscWorldMap.png, miscGlow.png.
• I removed lots of unused icons, for example the night vision ones, or the ones named tabicon-???-active.png. If they are needed again I need to redesign all of them anyway, so they are not useful anymore.

Do you like the naming scheme? If not I should revert now before continuing otherwise it is going to be a mess.

Also, this is a screenshot containing the updated icons, I'm not very good at drawing the new ones (e.g. the trashcan) but I hope that at least you can understand what they mean. I still have to see how they fit into the GUI

(The arrow that points to the right is going to replace the current icon on the "preprocess with SSC preprocessor" button)

The last thing: I see that when I make mistakes on the data/gui/normalStyle.css there are no errors. This is quite scary because if I make a typo in some icon name, the button just disappears from the GUI with no warning. I should see if I can add some kind of check.

[alex-w]

Your naming scheme is OK for me

[martinber]

Hi, I've made some progress. I'm struggling a bit with the GUI code, right now looks like the style of the application is defined on several places:

• UI files available in /src/gui/*.ui: GUI elements and layout are defined here. Most icons have an icon image defined in this file.

• CPP files in /src/gui/*.cpp: Some icons have an image defined here, for example bottom bar buttons.

• /data/gui/normalStyle.css: Has the style of most common GUI elements, for example has the style for every button and every checkbox. But also it has some custom styles where the style of a specific element is set (e.g. QPushButton#saveSatelliteButton has an icon image defined here). This stylesheet also is quite messy, It would be nice to move some things around.

I'm already seeing that this will be a mess for you to review. Do you prefer me to do minimal changes trying to leave everything as it is now? Or do you prefer me to move things around and try to leave everything as tidy as I can?

---

I've updated the image on the top, so you can see how the icons are starting to look like.

Also, below is a screenshot where:

• Disabled checkboxes are greyed out
• "GRS details..." button is disabled
• The spinner right of "Only for N latest selected objects:" also looks disabled
• The "Scale Moon" spinner has focus so it looks yellowish
• The "Scale Moon" checkbox is hovered so it looks yellowish

Previously I found a bit hard to differentiate disabled and enabled elements, what do you think?

---

PD: Sorry, @alex-w I've added you as a reviewer for you to see the previous comment. I see that you are notified of every commit I do? Now I can't remove it

[alex-w]

I'm already seeing that this will be a mess for you to review. Do you prefer me to do minimal changes trying to leave everything as it is now? Or do you prefer me to move things around and try to leave everything as tidy as I can?

Some time ago (around 5-8 years ago) each plugin had separate QSS file and code for manage it. This was obviously and logical, but all those plugins many years build as static plugins and all QSS stuff mas was moved into main QSS file to simplificate code and QSS base.

I think you may review the QSS file and move defined icons directly onto buttons (maybe with some exceptions). Maybe text on few buttons should be replace by icons (e.g.: Add, Delete).

Previously I found a bit hard to differentiate disabled and enabled elements, what do you think?

It looks good at the moment (except for GRS button, but I think I just accustomed to old version)

PD: Sorry, @alex-w I've added you as a reviewer for you to see the previous comment. I see that you are notified of every commit I do? Now I can't remove it

Don't worry about it :)

[gzotti]

In general, reviewing and cleaning up the inconsistencies that have grown over 15 years or so is a very good idea. If you have good knowledge of CSS and go through the file, you may probably find redundancies can can just be deleted or abbreviated. From what I can see in the graphics, it is better than before.

The new distinction of disabled/inactive colors is also fine.

Thanks also for the Doxygen docs on how to create icons in Inkscape.

[martinber]

Sorry for the delay. There I wrapped it up because I don't want to make this wait for so long.

If you think that this is worth merging, I will rebase again and squash the commits a little (reducing these 31 commits into 5-10 commits)

[alex-w]

Please rebase your PR to resolve conflicts

[alex-w]

Thanks for update of GUI

[martinber]

There I rebased and reviewed the changes again

[NotSoRandomOne]

Yay! Thanks, and I look forward to seeing them in the next release!