[Settings/ImageResizer] New UI for sizes listview #12269

niels9001 · 2021-07-07T21:10:16Z

Summary of the Pull Request

Problems resolved:

The current implementation has some (keyboard) accessibility issues.
The delete button falls of the UI in some cases
Direct input should only be used for data grids, not for ListViews.
Solving: [Keyboard Navigation - Power Toys - Image Resizer > Add Size]: Focus remains on 'Add Size' button after activating it. #7043

The new application features text-based UI and a dedicated edit button that provides a fly-out that enables the user to make changes to the selected image size.

Ideally, we'd move to a solution as described here: #2813 (comment). However, due to a blocking XAML Island bug (a ContentDialog does not accept keyboard entry: microsoft/microsoft-ui-xaml#3804) we can not implement that.

Quality Checklist

Contributor License Agreement (CLA)

A CLA must be signed. If not, go over here and sign the CLA.

htcfreek · 2021-07-08T11:22:28Z

@niels9001
To improve fast visibility I suggest to have the complete size in bold. E.g. 1 x 2 pixel, 50 percent.

htcfreek · 2021-07-09T14:46:10Z

Should we add a close button?

Is the users asked before deletion?

Jay-o-Way · 2021-07-11T10:07:27Z

What about Cancel?

htcfreek · 2021-07-11T10:19:21Z

What about Cancel?

I am sure the values will be saved directly. So a cancel button makes no sense.

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

Jay-o-Way · 2021-07-11T10:34:37Z

What about the Add size button: does it use the same fly-out? Asking because of #8698.

niels9001 · 2021-07-11T13:32:11Z

@htcfreek @Jay-o-Way a cancel/close button isn't needed for a Flyout since it's light dismissible.

I have added a delete confirmation dialog.

htcfreek · 2021-07-11T14:31:03Z

@htcfreek @Jay-o-Way a cancel/close button isn't needed for a Flyout since it's light dismissible.

Will every body know how to close it? 🤔

I have added a delete confirmation dialog.

👍

htcfreek · 2021-07-11T14:31:53Z

What about the Add size button: does it use the same fly-out? Asking because of #8698.

What about this, @niels9001 ?

niels9001 · 2021-07-12T12:54:43Z

What about the Add size button: does it use the same fly-out? Asking because of #8698.

What about this, @niels9001 ?

I think we should have a default name for a new size to be added.. that's a separate PR IMO and touches core imageresize classes.

github-actions · 2021-07-15T14:17:10Z

@check-spelling-bot Report

Unrecognized words, please review:

toolkitconverters

To accept these unrecognized words as correct, run the following commands

... in a clone of the [email protected]:microsoft/PowerToys.git repository
on the users/niels9001/imageresizerlistviewflyout branch:

update_files() {
perl -e '
my $new_expect_file=".github/actions/spell-check/expect.txt";
use File::Path qw(make_path);
use File::Basename qw(dirname);
make_path (dirname($new_expect_file));
open FILE, q{<}, $new_expect_file; chomp(my @words = <FILE>); close FILE;
my @add=qw('"$patch_add"');
my %items; @items{@words} = @words x (1); @items{@add} = @add x (1);
@words = sort {lc($a)."-".$a cmp lc($b)."-".$b} keys %items;
open FILE, q{>}, $new_expect_file; for my $word (@words) { print FILE "$word\n" if $word =~ /\w/; };
close FILE;
system("git", "add", $new_expect_file);
'
}

comment_json=$(mktemp)
curl -L -s -S \
  --header "Content-Type: application/json" \
  "https://api.github.com/repos/microsoft/PowerToys/issues/comments/880732437" > "$comment_json"
comment_body=$(mktemp)
jq -r .body < "$comment_json" > $comment_body
rm $comment_json

patch_add=$(perl -e '$/=undef;
$_=<>;
s{<details>.*}{}s;
s{^#.*}{};
s{\n##.*}{};
s{(?:^|\n)\s*\*}{}g;
s{\s+}{ }g;
print' < "$comment_body")
  
update_files
rm $comment_body
git add -u

If you see a bunch of garbage

If it relates to a ...

well-formed pattern

See if there's a pattern that would match it.

If not, try writing one and adding it to the patterns.txt file.

Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

Note that patterns can't match multiline strings.

binary-ish string

Please add a file path to the excludes.txt file instead of just accepting the garbage.

File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

jaimecbernardo

I left one nit regarding the spellchecker.
Other than that, works as intended, but the delete confirmation prompt requires some more work:

The buttons have no text for me (perhaps due to dark mode).
Is there a way to show the name of the size we are deleting to be shown in the prompt, as well?

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml

niels9001 · 2021-07-16T19:20:35Z

Fixed the spellcheck value and the missing dialog button labels

htcfreek · 2021-07-16T20:13:43Z

@niels9001
I agree with @jaimecbernardo that we should show the size name in the message.

htcfreek · 2021-07-16T22:17:45Z

@niels9001
Do we really need the size symbol in front of each row? In the format list of color picker we don't have one.

stefansjfw · 2021-07-19T08:12:42Z

nit: Should delete prompt by closable on Esc?

stefansjfw · 2021-07-21T14:10:51Z

#7043
will be fixed as well once this is merged

niels9001 · 2021-07-22T20:11:56Z

@stefansjfw @jaimecbernardo I have replaced the MessageDialog with a ContentDialog. The dialog is now rendered correctly, is closeable with ESC and now includes the image size name in the title. This should address all outstanding feedback :).

stefansjfw · 2021-07-23T09:53:52Z

Change looks good now! Nice work!
With few nits (but can be fixed as follow-up):

When navigating with keyboard and pressing Add size. focus lands on newly added size, but other size remains highlighted
Should we make name and non-0 size mandatory?

Also, build fails with latest commit (master merge). As soon as build fail is fixed, fine by me to be merged

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml

jaimecbernardo

Needs a little fix.
The rest looks good to me.
Great work!

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

Jay-o-Way · 2021-07-23T14:32:10Z

Should we make name and non-0 size mandatory?

Sooner or later, yes. See #8698

niels9001 · 2021-07-25T12:47:52Z

Change looks good now! Nice work!
With few nits (but can be fixed as follow-up):

When navigating with keyboard and pressing Add size. focus lands on newly added size, but other size remains highlighted

Should we make name and non-0 size mandatory?

Also, build fails with latest commit (master merge). As soon as build fail is fixed, fine by me to be merged

Fixed the focus issue. Thanks!

jaimecbernardo

LGTM!
Great work!

Niels Laute added 2 commits July 7, 2021 14:31

Flyout for ImageResizer sizes

1f3deb8

Narrator support

cd38bd1

Improved spaces

b6f37b0

Jay-o-Way suggested changes Jul 11, 2021

View reviewed changes

Fixed icons and added a confirmation dialog

702921c

niels9001 mentioned this pull request Jul 15, 2021

Bump Microsoft.UI.Xaml version #12377

Merged

10 tasks

Add updatesourcetrigger

d0ffa8b

niels9001 requested review from stefansjfw and jaimecbernardo July 15, 2021 14:16

jaimecbernardo requested changes Jul 16, 2021

View reviewed changes

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml Show resolved Hide resolved

Niels Laute added 2 commits July 16, 2021 21:03

Spellcheck fix

2f00e7c

Fixed missing strings

4d101bb

niels9001 requested a review from jaimecbernardo July 16, 2021 19:20

Added messagedialog

e2d3297

Merge branch 'master' into users/niels9001/imageresizerlistviewflyout

f69957c

stefansjfw reviewed Jul 23, 2021

View reviewed changes

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml Outdated Show resolved Hide resolved

stefansjfw approved these changes Jul 23, 2021

View reviewed changes

jaimecbernardo requested changes Jul 23, 2021

View reviewed changes

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw Outdated Show resolved Hide resolved

Niels Laute added 2 commits July 25, 2021 14:42

Fixes

138b684

Focus fix

34ba2b3

niels9001 requested a review from jaimecbernardo July 25, 2021 18:39

Accesibility fix

f7bdab8

jaimecbernardo approved these changes Jul 26, 2021

View reviewed changes

niels9001 merged commit b2a86db into master Jul 26, 2021

niels9001 deleted the users/niels9001/imageresizerlistviewflyout branch July 26, 2021 17:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Settings/ImageResizer] New UI for sizes listview #12269

[Settings/ImageResizer] New UI for sizes listview #12269

niels9001 commented Jul 7, 2021 •

edited

Loading

htcfreek commented Jul 8, 2021 •

edited

Loading

htcfreek commented Jul 9, 2021 •

edited

Loading

Jay-o-Way commented Jul 11, 2021

htcfreek commented Jul 11, 2021

Jay-o-Way commented Jul 11, 2021

niels9001 commented Jul 11, 2021

htcfreek commented Jul 11, 2021

htcfreek commented Jul 11, 2021

niels9001 commented Jul 12, 2021

github-actions bot commented Jul 15, 2021 •

edited

Loading

jaimecbernardo left a comment

niels9001 commented Jul 16, 2021

htcfreek commented Jul 16, 2021

htcfreek commented Jul 16, 2021

stefansjfw commented Jul 19, 2021

stefansjfw commented Jul 21, 2021

niels9001 commented Jul 22, 2021

stefansjfw commented Jul 23, 2021

jaimecbernardo left a comment

Jay-o-Way commented Jul 23, 2021

niels9001 commented Jul 25, 2021 •

edited

Loading

jaimecbernardo left a comment

[Settings/ImageResizer] New UI for sizes listview #12269

[Settings/ImageResizer] New UI for sizes listview #12269

Conversation

niels9001 commented Jul 7, 2021 • edited Loading

Summary of the Pull Request

Quality Checklist

Contributor License Agreement (CLA)

htcfreek commented Jul 8, 2021 • edited Loading

htcfreek commented Jul 9, 2021 • edited Loading

Jay-o-Way commented Jul 11, 2021

htcfreek commented Jul 11, 2021

Jay-o-Way commented Jul 11, 2021

niels9001 commented Jul 11, 2021

htcfreek commented Jul 11, 2021

htcfreek commented Jul 11, 2021

niels9001 commented Jul 12, 2021

github-actions bot commented Jul 15, 2021 • edited Loading

@check-spelling-bot Report

Unrecognized words, please review:

jaimecbernardo left a comment

Choose a reason for hiding this comment

niels9001 commented Jul 16, 2021

htcfreek commented Jul 16, 2021

htcfreek commented Jul 16, 2021

stefansjfw commented Jul 19, 2021

stefansjfw commented Jul 21, 2021

niels9001 commented Jul 22, 2021

stefansjfw commented Jul 23, 2021

jaimecbernardo left a comment

Choose a reason for hiding this comment

Jay-o-Way commented Jul 23, 2021

niels9001 commented Jul 25, 2021 • edited Loading

jaimecbernardo left a comment

Choose a reason for hiding this comment

niels9001 commented Jul 7, 2021 •

edited

Loading

htcfreek commented Jul 8, 2021 •

edited

Loading

htcfreek commented Jul 9, 2021 •

edited

Loading

github-actions bot commented Jul 15, 2021 •

edited

Loading

niels9001 commented Jul 25, 2021 •

edited

Loading