[Color Picker] Export all palette color codes to text file

[UBComma]

Color Picker is awesome - love it. It would be really terrific if you could export a complete palette to a text file.

[enricogior]

@UBComma can you be more specific of how this feature is supposed to work? And what type of format should be saved to file?

[UBComma]

Sure. For example I am using Power BI and I want to create a color theme for my data presentation. I often use a painting I like to generate a color palette. After I’m done picking the colors (generally 10 or so), I want to get them into a Json file like this:

"name": "St.Agatha",
"dataColors": [
    "#2C3A40",
    "#58361B",
    "#5D2A18",
    "#A3381B",
    "#B6B6BE",
    "#5B758C",
    "#E9A79A",
    "#EAB764"
],

I’m not looking for the json code to be generated but if I could take my whole color palette and export it to a text file it would save the time of copying each color code and pasting it in one at a time.

Make sense?

[enricogior]

@UBComma thanks for the explanation.

[htcfreek]

@enricogior Can we update the issue title to better reflect the enhancement idea?

[UBComma]

done

Bart Trudeau, AIA, LEED® AP, BD&C, President Trudeau Architects, pllc – Truarchs Online, llc the art and science of facilities® Office: (518) 785-5851 Direct: (518) 785-6516 <note new number mobile: (518) 469-8155 truarchs.comhttp://www.truarchs.com/

From: htcfreek notifications@github.com Sent: Wednesday, February 10, 2021 1:22 PM To: microsoft/PowerToys PowerToys@noreply.github.com Cc: Trudeau, Bart bart@truarchs.com; Mention mention@noreply.github.com Subject: Re: [microsoft/PowerToys] Suggestion for Color Picker (#9520)

@enricogiorhttps://github.com/enricogior Can we update the issue title to better reflect the enhancement idea?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/microsoft/PowerToys/issues/9520#issuecomment-776914032, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQLXTEFURZNH42VD6EU42L3S6LFGFANCNFSM4XE5PWOQ.

[DepthDeluxe]

I have put up a PR with proposed changes #10250. PR includes screenshots visualizing the functionality. Since this is my first contribution to this project, I did flag a couple of things on it I wasn't too sure about.

@UBComma, would you mind reviewing the UI flow in in the above PR to see if that is what you had in mind?

[UBComma]

@UBComma, would you mind reviewing the UI flow in in the above PR to see if that is what you had in mind?

I think the solution looks great. Thanks so much.

[htcfreek]

@DepthDeluxe, @niels9001, @martinchrzan I think we should discuss here which export option we want to have.

1. I like the selected colors idea from @niels9001. (https://github.com/microsoft/PowerToys/pull/10250#issuecomment-800054997)

2. I suggest to have two export buttons:

   • Export (group by format) : One data block per format with all color values.
   • Export (group by color) : One data block per color with all format values.

3. I suggest provide two possible formats (selection in save as dialoge):

   • csv : For simple use like in html code.

     hex;color1(#000000);color2(#ffffff)
     rgb;color1(0,0,0);color2(255,255,255)

     color1;hex(#000000);rgb(255,255,255)
     color2;hex(#000055);rgb(255,255,55)

   • json : For complex use like PowerBi.

     
     "hex" : [
     "#000000",
     "#ffffff"
     ]

"rgb" : [ "0,0,0", "255,255,255" ]

"color1" : [ "hex" : "#000000", "rgb" : "255,255,255" ]

"color2" : [ "hex" : "#000055", "rgb" : "255,255,55" ]

# Added 2021-04-03
My idea based on [this suggestions](https://github.com/microsoft/PowerToys/pull/10250#issuecomment-813067049).

**ExportName-Colors.txt**

/Note: Format order as in editor (top to down): rgb, hex, hsl /

Color1

rgb hex hsl

Color2

rgb hex hsl

**ExportName-Formats.txt**

/ Note: Color ordered as in editor from top to down. /

RGB

Color1 Color2

HEX

Color1 Color2

HSL

Color1 Color2

[UBComma]

Thank you all for your work on this. My original suggestion was to simply export hex codes to CSV. That should have the widest use for any purpose. Personally I am using it in Power BI so exporting directly to JSON format is great but not necessary.

Will this be able to export to the clipboard, or will it have to go to a txt file?

[htcfreek]

Thank you all for your work on this. My original suggestion was to simply export hex codes to CSV. That should have the widest use for any purpose. Personally I am using it in Power BI so exporting directly to JSON format is great but not necessary.

Will this be able to export to the clipboard, or will it have to go to a txt file?

I think file should be okay.

[DepthDeluxe]

Moved comment from PR #10250:

---

@niels9001 and @htcfreek thanks for the input on this. I have finally had the time to digest the feedback and have the following proposal that I want to run by you before making the changes.

To support the changes in a more UX-friendly approach, I propose removing the ellipsis button I added and instead support multi-select in the ListView UI element and support "Remove multi" and "Export" in the context menu. The only question I have about this approach is I see that right clicking elements in the multi-select will unselect that item which provides a poor experience for selecting the context option. Not quite sure how to solve this as the selected elements appear to be private to the ListView. For supporting multi-select while allowing users to browse around items, we can add a KeyGesture or KeyBinding (what is the difference between these?) that switches the selection mode from single to multiple when holding shift (like Outlook mail view).

For export formats, it might be simplest to support simple TXT output where there is one color per line. For each color format converter (HEX, RGB, HSL, ...) I can generate file format types (HEX (*.txt), RGB (*.txt), HSL (*.txt) and punt the problem of more complicated selection of elements to a later PR. Concretely, the file format would look like

HEX (*.txt)

#1E1E1E
#AAAAAA
...

RGB (*.txt)

rgb(30, 30, 30)
...

and so forth...

What do you think?

[DepthDeluxe]

@htcfreek, one question I have regarding your suggestions: do we want to support manual selection of groups of colors to export or just "export all" support?

If we are going to add a batch remove support by selecting, it seems sensible that the export functionality is also batched.

[htcfreek]

@htcfreek, one question I have regarding your suggestions: do we want to support manual selection of groups of colors to export or just "export all" support?

If we are going to add a batch remove support by selecting, it seems sensible that the export functionality is also batched.

@DepthDeluxe

See my first point with the reference to @niels9001 suggestion. Slecting makes sense for all scenarios.

Additional I think the two text files (and json for special use) are better than csv files. So I would go with json and text as format in save-as dialoge.

@DepthDeluxe Can you create a small mockup and poc that we can see how it would look and work with multi select, context menu, and the two formats (txt, json)?

[DepthDeluxe]

@htcfreek ok sounds good, I also see value in the multi-export modes. The reason I bring up the batch select over buttons is that I'm still trying to figure out where to place the UI buttons. Should we even have them?

Original Layout (possibly confusing) Buttons are to the right of the eyedropper select inside a CommandBar

Stacked Layout Buttons are vertically stacked, taking up room in the color history view.

I see your comment on mockup/POC. Let me draft some thing up and get back to you.

[htcfreek]

@htcfreek ok sounds good, I also see value in the multi-export modes. The reason I bring up the batch select over buttons is that I'm still trying to figure out where to place the UI buttons. Should we even have them?

Original Layout (possibly confusing)

Stacked Layout

I see your comment on mockup/POC. Let me draft some thing up and get back to you.

@DepthDeluxe

I would add the following context menu (_text_ should be a subtitle):

Export color values
_(Group by colors)_
Export color values
_(Group by format)_
Remove from history
----
Clear history list

[niels9001]

I'd do something like this (with multi-select):

Or if multi-select doesn't work out, add a contextual menu here:

It would bring up a ContextMenu with "Clear history" and "Export color history"

[htcfreek]

I'd do something like this (with multi-select):

Or if multi-select doesn't work out, add a contextual menu here:

It would bring up a ContextMenu with "Clear history" and "Export color history"

The menu looks good but I would use this items:

Remove from color history
Export color values
     / Group by format
     / Group by color
----------
Clear color history

@niels9001 In your solution it's not possible to export more than one format per color.

[htcfreek]

@DepthDeluxe We should definitely add the comments I have in my example for the txt files to the export files.

[UBComma]

I will echo the comment about niels9001 proposal. It seems to be mixing an action on a single color (remove) with actions that should apply to the whole palette (export).

[htcfreek]

I will echo the comment about niels9001 proposal. It seems to be mixing an action on a single color (remove) with actions that should apply to the whole palette (export).

Why not removing selected colors from history. Like del select files in explorer.

[niels9001]

@UBComma I think you misunderstood my point. This context menu would apply to all colors that are selected (by using Shift or Ctrl). Similiar to File Explorer or Outlook.

@htcfreek I think the initial ask was to bulk export multiple colors in a specific format. Not all colors in all formats?

Let's make sure we are crisp on the requirements of this feature. It would be a shame if we make the current UX overly complicated.

[htcfreek]

@htcfreek I think the initial ask was to bulk export multiple colors in a specific format. Not all colors in all formats?

Let's make sure we are crisp on the requirements of this feature. It would be a shame if we make the current UX overly complicated.

@niels9001

The point is: Why doing things half. If you should capture a color for a college and don't know the expected format you can use group by color.

Otherwise I will open a new issue after implantation the initial request and we can look what the community says on "Export grouped by color".

[DepthDeluxe]

This is what it looks like with the "More" icon at the bottom of the screen. It cleanly cuts off the ListView and still allows for scrolling. I used a Grid inside the left bar to achieve this.

I still think this doesn't look as clean or usable as doing the bulk select, right click, and export as recommended by @niels9001.

[DepthDeluxe]

Quick update: I am working through the details of the multi-select approach. I have been encountering a peculiarity in ListView where it is very hard to get the range of items. While there is a SelectedItems property, this does not convey which index the items are in. For example, if we have 5 copies of the exact color and select indices 4 and 5, then select "Remove", it will remove the first two indices. This can cause unexpected behavior for long lists of elements since the first elements of that color are selected, not the exact indices specified.

I do see that there is a SelectedIndices attribute but this attribute is not present in the ModernWpf implementation of ListView. I confirmed this through manual testing, the attribute cannot be passed to the ViewModel with a visible binding error. Why is there a difference in implementation of ModernWpf ListView and .NET Core ListView?

At this point I see only a few options, neither of them great:

Option 1: Change ColorsHistory type One StackOverflow issue I found suggested that we could pass in an attribute IsSelected in two-way binding mode and then filter out the selected items when performing operations.

Option 2: Scan the ColorsHistory in attempt to find the selected range We can use the length of the selection along with the SelectedIndex property to determine a contiguous selection range. This does have to handle both cases of selecting up and selecting down. I got started on this solution but found it to be somewhat convoluted and difficult to get write, particularly in the middle of a group "Remove" operation which triggers the SelectionChanged event repeatedly.

@htcfreek or @niels9001, are you aware of this limitation? Do you have a suggestion on how to solve this issue? There is no example of a solution for this type of problem in the repository after grepping through the codebase.

[htcfreek]

@DepthDeluxe Zjis is a bit to deep-dive for me. @niels9001 can help here better than me. But for me Option 1 sound like the best solution.

[martinchrzan-msft]

@DepthDeluxe You can do either option 1, which would be cleaner, or you can create a behavior which will work like this, I would avoid option 2:

You attach behavior to ColorEditorView, and setup DependencyProperty on that with type of ColorEditorViewModel, and you bind root to that (Binding Path=.). In ColorEditorViewModel you can create an event which fires when remove is requested - and get rid of the code that is actually removing items from there. And in your behavior you subscribe to this event and when it happens you can remove items from ColorsHistory by index, you can get indexes like this:

var index = listView.ItemContainerGenerator.IndexFromContainer(listView.ItemContainerGenerator.ContainerFromItem(listView.SelectedItems[0]));

[Jay-o-Way]

@crutkas FYI It's mentioned in the 0.57 release notes, but issue and pr aren't assigned to a Project.

[jaimecbernardo]

It does export colors from history to a text file. This was released indeed.