The Trunk: ToolBuilder-Morphic-cmm.214.mcz

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

The Trunk: ToolBuilder-Morphic-cmm.214.mcz

commits-2
Chris Muller uploaded a new version of ToolBuilder-Morphic to project The Trunk:
http://source.squeak.org/trunk/ToolBuilder-Morphic-cmm.214.mcz

==================== Summary ====================

Name: ToolBuilder-Morphic-cmm.214
Author: cmm
Time: 23 April 2018, 10:52:42.863722 pm
UUID: ed4cff85-0d01-45be-acf4-89dc6f683dfd
Ancestors: ToolBuilder-Morphic-cmm.213

Center ListChoosers under the search-widget for improved focus.

=============== Diff against ToolBuilder-Morphic-cmm.213 ===============

Item was changed:
  ----- Method: ListChooser>>buildWith: (in category 'building') -----
  buildWith: builder
 
  | dialogSpec searchBarHeight listSpec fieldSpec |
 
  searchBarHeight := Preferences standardDefaultTextFont height * 1.75.
 
  dialogSpec := builder pluggableDialogSpec new
  model: self;
  title: #title;
  closeAction: #closed;
  extent: self initialExtent;
  autoCancel: true; "Behave like a pop-up menu. Historical reasons."
  children: OrderedCollection new;
  buttons: OrderedCollection new;
  yourself.
 
  listSpec := builder pluggableListSpec new.
  listSpec
  model: self;
  list: #items;
  getIndex: #selectedIndex;
  setIndex: #selectedIndex:;
  doubleClick: #accept;
  "keystrokePreview: #keyStrokeFromList:;"
  autoDeselect: false;
  filterableList: true;
  clearFilterAutomatically: false;
  name: #list;
  frame: (LayoutFrame fractions: (0@0 corner: 1@1) offsets: (0@searchBarHeight corner: 0@0)).
  dialogSpec children add: listSpec.
 
  fieldSpec := builder pluggableInputFieldSpec new.
  fieldSpec
  model: self;
+ name: #searchText ;
  getText: #searchText;
  editText: #searchText:;
  setText: #acceptText:;
  selection: #textSelection;
  menu: nil;
  indicateUnacceptedChanges: false;
  askBeforeDiscardingEdits: false;
  help: (self addAllowed ifTrue: ['Type new or filter existing...' translated] ifFalse: ['Type to filter existing...' translated]);
  frame: (LayoutFrame fractions: (0@0 corner: 1@0) offsets: (0@0 corner: 0@searchBarHeight)).
  dialogSpec children add: fieldSpec.
 
  "Buttons"
  dialogSpec buttons add: (
  builder pluggableButtonSpec new
  model: self;
  label: #acceptLabel;
  action: #accept;
  enabled: #canAcceptOrAdd;
  color: #acceptColor).
 
  dialogSpec buttons add: (
  builder pluggableButtonSpec new
  model: self;
  label: 'Cancel';
  action: #cancel;
  color: #cancelColor).
 
  dialogMorph := builder build: dialogSpec.
+ dialogMorph addKeyboardCaptureFilter: self ; positionOverWidgetNamed: #searchText.
- dialogMorph addKeyboardCaptureFilter: self.
  listMorph := builder widgetAt: #list.
  listMorph allowEmptyFilterResult: true.
 
  ^ dialogMorph!


Reply | Threaded
Open this post in threaded view
|

Re: The Trunk: ToolBuilder-Morphic-cmm.214.mcz

marcel.taeumel
Hi Chris,

can you elaborate on this? This is just cosmetics, right? You assume that the user should look at the empty search field. I was assuming that the possible search space is more important. Just open, type the term, navigate with the arrow keys and press return. So, this has been the focus:


Now it is this:


Due to the centering of the dialog relative to the current mouse cursor. At least for me, this introduces a visual jump now. Two years ago, I decided to only keep that search field at the top for historical reasons because we can search in all lists in the system by just typing a term.

Anyway, just my two cents. :-)

Best,
Marcel


Am 24.04.2018 05:53:40 schrieb [hidden email] <[hidden email]>:

Chris Muller uploaded a new version of ToolBuilder-Morphic to project The Trunk:
http://source.squeak.org/trunk/ToolBuilder-Morphic-cmm.214.mcz

==================== Summary ====================

Name: ToolBuilder-Morphic-cmm.214
Author: cmm
Time: 23 April 2018, 10:52:42.863722 pm
UUID: ed4cff85-0d01-45be-acf4-89dc6f683dfd
Ancestors: ToolBuilder-Morphic-cmm.213

Center ListChoosers under the search-widget for improved focus.

=============== Diff against ToolBuilder-Morphic-cmm.213 ===============

Item was changed:
----- Method: ListChooser>>buildWith: (in category 'building') -----
buildWith: builder

| dialogSpec searchBarHeight listSpec fieldSpec |

searchBarHeight := Preferences standardDefaultTextFont height * 1.75.

dialogSpec := builder pluggableDialogSpec new
model: self;
title: #title;
closeAction: #closed;
extent: self initialExtent;
autoCancel: true; "Behave like a pop-up menu. Historical reasons."
children: OrderedCollection new;
buttons: OrderedCollection new;
yourself.

listSpec := builder pluggableListSpec new.
listSpec
model: self;
list: #items;
getIndex: #selectedIndex;
setIndex: #selectedIndex:;
doubleClick: #accept;
"keystrokePreview: #keyStrokeFromList:;"
autoDeselect: false;
filterableList: true;
clearFilterAutomatically: false;
name: #list;
frame: (LayoutFrame fractions: (0@0 corner: 1@1) offsets: (0@searchBarHeight corner: 0@0)).
dialogSpec children add: listSpec.

fieldSpec := builder pluggableInputFieldSpec new.
fieldSpec
model: self;
+ name: #searchText ;
getText: #searchText;
editText: #searchText:;
setText: #acceptText:;
selection: #textSelection;
menu: nil;
indicateUnacceptedChanges: false;
askBeforeDiscardingEdits: false;
help: (self addAllowed ifTrue: ['Type new or filter existing...' translated] ifFalse: ['Type to filter existing...' translated]);
frame: (LayoutFrame fractions: (0@0 corner: 1@0) offsets: (0@0 corner: 0@searchBarHeight)).
dialogSpec children add: fieldSpec.

"Buttons"
dialogSpec buttons add: (
builder pluggableButtonSpec new
model: self;
label: #acceptLabel;
action: #accept;
enabled: #canAcceptOrAdd;
color: #acceptColor).

dialogSpec buttons add: (
builder pluggableButtonSpec new
model: self;
label: 'Cancel';
action: #cancel;
color: #cancelColor).

dialogMorph := builder build: dialogSpec.
+ dialogMorph addKeyboardCaptureFilter: self ; positionOverWidgetNamed: #searchText.
- dialogMorph addKeyboardCaptureFilter: self.
listMorph := builder widgetAt: #list.
listMorph allowEmptyFilterResult: true.

^ dialogMorph!




Reply | Threaded
Open this post in threaded view
|

Re: The Trunk: ToolBuilder-Morphic-cmm.214.mcz

Chris Muller-3
Hi Marcel,

I would not be opposed to removing the field altogether.

The impetus for my change was because, for some reason, I was unable to immediately use the keyboard to filter the list.  Now, even reverting my change, I cannot seem to reproduce that.

However, even still, as long as we keep that text widget, I think it makes sense to center dialog UI's on the top-left-most widget in general (excepting close boxes, of course!).  Most people's eyes gravitate from upper-left to lower-right when evaluating a UI screen.  If we agree that the users' eyes would be at the pointer when the dialog opens, then positioning the dialog at the point where they would keep their eye flow continuous; e.g., where they were looking is where their eyes naturally gravitate to; the upper-left widget(s), upon opening under the mouse pointer, where there eyes already were.  From that aspect, at least, it actually seems less jarring.

Removing the field altogether might encourage users to discover and utilize the list-filtering even elsewhere.  I think that would be a positive thing..

Best,
  Chris



can you elaborate on this? This is just cosmetics, right? You assume that the user should look at the empty search field. I was assuming that the possible search space is more important. Just open, type the term, navigate with the arrow keys and press return. So, this has been the focus:


Now it is this:


Due to the centering of the dialog relative to the current mouse cursor. At least for me, this introduces a visual jump now. Two years ago, I decided to only keep that search field at the top for historical reasons because we can search in all lists in the system by just typing a term.

Anyway, just my two cents. :-)

Best,
Marcel


Am 24.04.2018 05:53:40 schrieb [hidden email] <[hidden email]>:

Chris Muller uploaded a new version of ToolBuilder-Morphic to project The Trunk:
http://source.squeak.org/trunk/ToolBuilder-Morphic-cmm.214.mcz

==================== Summary ====================

Name: ToolBuilder-Morphic-cmm.214
Author: cmm
Time: 23 April 2018, 10:52:42.863722 pm
UUID: ed4cff85-0d01-45be-acf4-89dc6f683dfd
Ancestors: ToolBuilder-Morphic-cmm.213

Center ListChoosers under the search-widget for improved focus.

=============== Diff against ToolBuilder-Morphic-cmm.213 ===============

Item was changed:
----- Method: ListChooser>>buildWith: (in category 'building') -----
buildWith: builder

| dialogSpec searchBarHeight listSpec fieldSpec |

searchBarHeight := Preferences standardDefaultTextFont height * 1.75.

dialogSpec := builder pluggableDialogSpec new
model: self;
title: #title;
closeAction: #closed;
extent: self initialExtent;
autoCancel: true; "Behave like a pop-up menu. Historical reasons."
children: OrderedCollection new;
buttons: OrderedCollection new;
yourself.

listSpec := builder pluggableListSpec new.
listSpec
model: self;
list: #items;
getIndex: #selectedIndex;
setIndex: #selectedIndex:;
doubleClick: #accept;
"keystrokePreview: #keyStrokeFromList:;"
autoDeselect: false;
filterableList: true;
clearFilterAutomatically: false;
name: #list;
frame: (LayoutFrame fractions: (0@0 corner: 1@1) offsets: (0@searchBarHeight corner: 0@0)).
dialogSpec children add: listSpec.

fieldSpec := builder pluggableInputFieldSpec new.
fieldSpec
model: self;
+ name: #searchText ;
getText: #searchText;
editText: #searchText:;
setText: #acceptText:;
selection: #textSelection;
menu: nil;
indicateUnacceptedChanges: false;
askBeforeDiscardingEdits: false;
help: (self addAllowed ifTrue: ['Type new or filter existing...' translated] ifFalse: ['Type to filter existing...' translated]);
frame: (LayoutFrame fractions: (0@0 corner: 1@0) offsets: (0@0 corner: 0@searchBarHeight)).
dialogSpec children add: fieldSpec.

"Buttons"
dialogSpec buttons add: (
builder pluggableButtonSpec new
model: self;
label: #acceptLabel;
action: #accept;
enabled: #canAcceptOrAdd;
color: #acceptColor).

dialogSpec buttons add: (
builder pluggableButtonSpec new
model: self;
label: 'Cancel';
action: #cancel;
color: #cancelColor).

dialogMorph := builder build: dialogSpec.
+ dialogMorph addKeyboardCaptureFilter: self ; positionOverWidgetNamed: #searchText.
- dialogMorph addKeyboardCaptureFilter: self.
listMorph := builder widgetAt: #list.
listMorph allowEmptyFilterResult: true.

^ dialogMorph!