New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix gui alignment issues #6287
Fix gui alignment issues #6287
Conversation
Thanks for the fixes! :) First, a few specific concerns:
Beyond this (and perhaps something that needs to be addressed separately), a major concern for me here is that as a blind developer, I'm struggling to understand the "rules" we need to use to make the GUI look decent. Obviously, we're always going to need some help to "pretty things up", but it'd be good if we can avoid making the same mistakes over and over. Perhaps we need to develop a set of guidelines as to what borders/spacing/flags/proportions to use and when to use them, etc. As another example, I don't follow when we should use a border and when we should add a "spacer". (I didn't even know about spaces before today! :)) I wonder how much of this we can somehow hide behind code. Perhaps we could create our own helper methods or sizer subclasses or the like. Thoughts? |
Regarding dropDownLabelBorder and dropDownLabelFlags: |
@jcsteh As per our conversation I have pulled the common patterns out into a helper, and removed one of the group boxes. The other I have left in place (since it helps to visually associate the items) but removed the label. The configProfiles code is harder to make generic. Could you please take another look when you get the chance? |
See #6342 (Spacing between labels and combo boxes) |
See #6343 (Inconsistency with vertical spacing between checkbox/label options) |
See #6349 (input gestures dialog tree view too small) |
Feedback on GUI, received via email, with respect to the create portable nvda dialog
With respect to the "check for update dialog and resultant download dialog"
|
de4854a
to
2af53e4
Compare
# Translators: The list of languages for NVDA. | ||
self.languageList=wx.Choice(self,languageListID,name=_("Language"),choices=[x[1] for x in self.languageNames]) | ||
languageCtrlName = _("Language") | ||
self.languageList=settingsSizerHelper.addLabeledControl(languageLabelText, wx.Choice, name=languageCtrlName, choices=languageChoices) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the name=languageControlName for wx.Choice is not needed (assuming it is never shown visually).
self.logLevelList=wx.Choice(self,logLevelListID,name=_("Log level"),choices=[name for level, name in self.LOG_LEVELS]) | ||
logLevelChoicesName=_("Log level") | ||
logLevelChoices = [name for level, name in self.LOG_LEVELS] | ||
self.logLevelList = settingsSizerHelper.addLabeledControl(logLevelLabelText, wx.Choice, name=logLevelChoicesName, choices=logLevelChoices) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
name is not needed.
synth=getSynth() | ||
setattr(self,"_%ss"%setting.name,getattr(synth,"available%ss"%setting.name.capitalize()).values()) | ||
l=getattr(self,"_%ss"%setting.name)### | ||
lCombo=wx.Choice(self,wx.ID_ANY,name="%s:"%setting.i18nName,choices=[x.name for x in l]) | ||
labeledControl=guiHelper.LabeledControlHelper(self, labelText, wx.Choice, name="%s:"%setting.i18nName, choices=[x.name for x in l]) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
name can be removed
# Translators: This is the name of a combobox in the keyboard settings dialog. | ||
self.kbdList=wx.Choice(self,kbdListID,name=_("Keyboard layout"),choices=[layouts[layout] for layout in self.kbdNames]) | ||
kbdChoices = [layouts[layout] for layout in self.kbdNames] | ||
self.kbdList=sHelper.addLabeledControl(kbdLabelText, wx.Choice, name=kbdChoicesName, choices=kbdChoices) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
name can be removed
# Translators: This is the name of a combobox in the mouse settings dialog. | ||
self.textUnitComboBox=wx.Choice(self,wx.ID_ANY,name=_("text reporting unit"),choices=[textInfos.unitLabels[x] for x in self.textUnits]) | ||
textUnitsChoices = [textInfos.unitLabels[x] for x in self.textUnits] | ||
self.textUnitComboBox=sHelper.addLabeledControl(textUnitLabelText, wx.Choice, name=textUnitsName, choices=textUnitsChoices) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
name can be removed
self.progressList=wx.Choice(self,progressListID,name=_("Progress bar output"),choices=[name for setting, name in self.progressLabels]) | ||
progressName=_("Progress bar output") | ||
progressChoices = [name for setting, name in self.progressLabels] | ||
self.progressList=sHelper.addLabeledControl(progressLabelText, wx.Choice,name=progressName,choices=progressChoices) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
name can be removed
To resolve visual ambiguity between a listview and a treeview, show plus/minus symbols
Some wx controls were being created using the 'name' parameter. When there is a label this is unnecessary, since the label will describe the controls. It may also be unnecessary when there is sufficient context provided by the dialog itself.
Label for addons disabled was missed in clean up. This was not easy to notice since it is conditionally shown.
Alignments fixed on symbol/pronunciation dialog. Fixed alignment on 'make portable copy' dialog Groups of controls (wx.StaticBoxSizer) added to a VERTICAL boxSizerHelper are now automatically expanded to the full width. I think this is a more common pattern. Directory entry concept has been abstracted.
Fixed up the: - launcher - installer dialog - update check result
Updates to the user guide, and a the symbol/pronunciation add symbol dialog.
2e413fd
to
86548ae
Compare
Consider also closing: #5548 |
nit: There are quite a few added blank lines (particularly in |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great overall! Thanks!
@@ -298,33 +309,29 @@ def __init__(self, parent): | |||
continue | |||
triggers.append(TriggerInfo(spec, disp, profile)) | |||
|
|||
sizer = wx.BoxSizer(wx.HORIZONTAL) | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: Extraneous blank line.
item = self.profileName = wx.TextCtrl(self) | ||
sizer.Add(item) | ||
mainSizer.Add(sizer) | ||
mainSizer.Add(sizer, border=10, flag=wx.ALL) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you explain why this particular case isn't like a labelled control in most other places? I do see it's different; just curious as to why.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like I missed this one when converting to the guiHelper. I have updated this.
# -*- coding: UTF-8 -*- | ||
#guiHelper.py | ||
#A part of NonVisual Desktop Access (NVDA) | ||
#Copyright (C) 2006-2015 NV Access Limited |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can just say 2016 (rather than 2006-2015).
|
||
import wx | ||
|
||
""" Example usage |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The docstring needs to go above any imports. Otherwise, it won't be treated as a module docstring. Unfortunately, we have this problem in a few of our other modules too. :(
|
||
import wx | ||
|
||
""" Example usage |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we could have a brief sentence at the top here explaining what this is for? Something like:
Utilities to simplify the creation of wx GUIs, including automatic management of spacing.
|
||
def addItem(self, item): | ||
""" Adds an item with space between it and the previous item. | ||
Does not handle adding LabledControlHelper, use the convenience method instead. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rather than saying "the convenience method", I think it'd be better to use the method's name. In fact, epydoc let's you link to an identifier like so:
Does not handle adding LabledControlHelper; use L{addlabelledControl} instead.
raise NotImplementedError("Use addLabeledControl instead") | ||
|
||
if isinstance(toAdd, wx.StaticBoxSizer): | ||
keywordArgs.update({'flag':wx.EXPAND,}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as above re key assignment.
@type LabelText - String | ||
@param wxCtrlClass - Control class to construct and associate with the label | ||
@type wxCtrlClass - Some wx control type EG wx.TextCtrl | ||
@param kwargs - keyword arguments used to construct the wxCtrlClass. As taken by guiHelper.LabeledControlHelper |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
:
instead of -
sizer.Add(item) | ||
settingsSizer.Add(sizer) | ||
buttonSizer.Add(item) | ||
settingsSizer.Add(buttonSizer) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm almost certainly missing something, but... why not use a Buttonhelper here?
settingsSizer.Add(item, border=10, flag=wx.BOTTOM) | ||
readByParagraphText = _("Read by ¶graph") | ||
self.readByParagraphCheckBox = sHelper.addItem(wx.CheckBox(self, label=readByParagraphText)) | ||
self.readByParagraphCheckBox.Value = config.conf["braille"]["readByParagraph"] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm totally cool with just accepting these as stylistic differences, but I'm curious nevertheless:
- You've changed most places to assign label text to a variable, rather than just specifying the label in the call. Why? I guess this makes the lines shorter, but you could wrap to a new line. This approach seems more "indirect" to me. It also creates a lot more local variables, but that's inconsequential; premature optimisation and all. :)
- Here (and in quite a few other places), I had a variable like
item
which I just assign temporarily. The reason is largely to make the code less verbose and thus easier to type. You've changed these to either use a new local or, if there was an attribute onself
, to use that. Why? Was the use ofitem
confusing to you; i.e. did you feel you weren't sure which control I was referring to despite the grouping of the code? One other reason I did this was to avoid hash lookups onself
, but again, inconsequential; premature optimisation and all. :)
Again, not asking for changes here; just curious on your reasoning.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For 1: yes, to make the lines shorter. But also to try to better pair the text with the translator comment.
For 2: Using the named variable rather than item
makes the code easier to read and understand. When item
is used, and then a few lines down something is being done to it, you have to remember (or go look for) the context. With the named variable, (hopefully) it is fairly self explanatory what you are dealing with.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great!
""" Example usage | ||
Utilities to simplify the creation of wx GUIs, including automatic management of spacing. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These two lines should probably be reversed; i.e. so "Example usage" comes below the summary.
For issues: #6317 (Gestures treeview does not look like a treeview) #5548 (Text control to specify the path when creating a portable copy is quite narrow) #6342 (Spacing between labels and combo boxes) #6343 (Inconsistency with vertical spacing between checkbox/label options) #6349 (input gestures dialog tree view too small) Merge branch 'fixGuiAlignmentIssues' into next Conflicts: source/gui/settingsDialogs.py - voice settings (speak numbers as) - SpeechSymbolsDialog (mouse interaction)
Merges in branches - 'i6101_SymbolsListCtrl' - 'i6348-documentFormattingDialog' - 'fixGuiAlignmentIssues' Adjust the symbols list. See PR #6339 Put the 'symbol' label above the list and have the list itself take up the full width of the dialog. Columns are spaced automatically, with one nominated to take up any extra available room. The first column was selected to expand more, as the information in the other columns can be viewed in the "change symbol" group. Fixes #6101 Restructure the document formatting dialog. See PR #6402 The document formatting settings dialog is restructured so that items can no longer "disappear" off the screen. The options are now in a scrolling section, grouped for clarity (paritcularly for new users / sighted users). A dialog description has been added, for further clarity. Fixes #6348 Fix Gui Alignment issues. See PR #6287 Fixes up various alignment and padding problems in the GUI. Introduces a new helper to abstract some of these details. Fixes #6317 (Gestures treeview does not look like a treeview) Fixes #5548 (Text control to specify the path when creating a portable copy is quite narrow) Fixes #6342 (Spacing between labels and combo boxes) Fixes #6343 (Inconsistency with vertical spacing between checkbox/label options) Fixes #6349 (input gestures dialog tree view too small)
This has been merged into master with commit: 87ed4d1 |
For PR #6287 - Various padding and alignment issues have been resolved. (#6317, #5548, #6342, #6343, #6349) For PR #6402 - The document formatting dialog has been adjusted so that the contents scrolls. (#6348) For PR #6339 - Adjusted the layout of the symbols pronunciation dialog so the full width of the dialog is used for the symbols list. (#6101)
Fixed alignment and made small modifications to several nvda dialogs.
Also fixes:
#6317 (Gestures treeview does not look like a treeview)
#5548 (Text control to specify the path when creating a portable copy is quite narrow)
#6342 (Spacing between labels and combo boxes)
#6343 (Inconsistency with vertical spacing between checkbox/label options)
#6349 (input gestures dialog tree view too small)