terminal/src/cascadia/TerminalApp/ColorPickupFlyout.cpp
Georgi Baychev 624a553d23
Add support for setting a tab's color at runtime w/ context menu (#3789)
This commit introduces a context menu for Tab and a new item,
"Color...", which will display a color picker.

A flyout menu, containing a custom flyout, is attached to each tab. The
flyout displays a palette of 16 preset colors and includes a color
picker. When the user selects or clears color, an event is fired, which
is intercepted by the tab to which the flyout belongs.

The changing of the color is achieved by putting the selected color in
the resource dictionary of the tab, using well-defined dictionary keys
(e.g. TabViewItemHeaderBackground). Afterwards the visual state of the
tab is toggled, so that the color change is visible immediately.

Custom-colored tabs will be desaturated (somewhat) by alpha blending
them with the tab bar background.

The flyout menu also contains a 'Close' flyout item.

## Validation Steps Performed
I've validated the behavior manually: start the program via the start
menu. Right click on the tab -> Choose a tab color.

The color flyout is going to be shown. Click a color swatch or click
'Select a custom color' to use the color picker. Use the 'Clear the
current color' to remove the custom color.

Closes #2994. References #3327.
2020-05-04 20:57:12 +00:00

104 lines
4.1 KiB
C++

#include "pch.h"
#include "ColorPickupFlyout.h"
#include "ColorPickupFlyout.g.cpp"
#include "winrt/Windows.UI.Xaml.Media.h"
#include "winrt/Windows.UI.Xaml.Shapes.h"
#include "winrt/Windows.UI.Xaml.Interop.h"
#include <LibraryResources.h>
namespace winrt::TerminalApp::implementation
{
// Method Description:
// - Default constructor, localizes the buttons and hooks
// up the event fired by the custom color picker, so that
// the tab color is set on the fly when selecting a non-preset color
// Arguments:
// - <none>
ColorPickupFlyout::ColorPickupFlyout()
{
InitializeComponent();
OkButton().Content(winrt::box_value(RS_(L"Ok")));
CustomColorButton().Content(winrt::box_value(RS_(L"TabColorCustomButton/Content")));
ClearColorButton().Content(winrt::box_value(RS_(L"TabColorClearButton/Content")));
}
// Method Description:
// - Handler of the click event for the preset color swatches.
// Reads the color from the clicked rectangle and fires an event
// with the selected color. After that hides the flyout
// Arguments:
// - sender: the rectangle that got clicked
// Return Value:
// - <none>
void ColorPickupFlyout::ColorButton_Click(IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const&)
{
auto button{ sender.as<Windows::UI::Xaml::Controls::Button>() };
auto rectangle{ button.Content().as<Windows::UI::Xaml::Shapes::Rectangle>() };
auto rectClr{ rectangle.Fill().as<Windows::UI::Xaml::Media::SolidColorBrush>() };
_ColorSelectedHandlers(rectClr.Color());
Hide();
}
// Method Description:
// - Handler of the clear color button. Clears the current
// color of the tab, if any. Hides the flyout after that
// Arguments:
// - <none>
// Return Value:
// - <none>
void ColorPickupFlyout::ClearColorButton_Click(IInspectable const&, Windows::UI::Xaml::RoutedEventArgs const&)
{
_ColorClearedHandlers();
Hide();
}
// Method Description:
// - Handler of the select custom color button. Expands or collapses the flyout
// to show the color picker. In order to accomplish this a FlyoutPresenterStyle is used,
// in which a Style is embedded, containing the desired width
// Arguments:
// - <none>
// Return Value:
// - <none>
void ColorPickupFlyout::ShowColorPickerButton_Click(Windows::Foundation::IInspectable const&, Windows::UI::Xaml::RoutedEventArgs const&)
{
auto targetType = this->FlyoutPresenterStyle().TargetType();
auto s = Windows::UI::Xaml::Style{};
s.TargetType(targetType);
auto visibility = customColorPanel().Visibility();
if (visibility == winrt::Windows::UI::Xaml::Visibility::Collapsed)
{
customColorPanel().Visibility(winrt::Windows::UI::Xaml::Visibility::Visible);
auto setter = Windows::UI::Xaml::Setter(Windows::UI::Xaml::FrameworkElement::MinWidthProperty(), winrt::box_value(540));
s.Setters().Append(setter);
}
else
{
customColorPanel().Visibility(winrt::Windows::UI::Xaml::Visibility::Collapsed);
auto setter = Windows::UI::Xaml::Setter(Windows::UI::Xaml::FrameworkElement::MinWidthProperty(), winrt::box_value(0));
s.Setters().Append(setter);
}
this->FlyoutPresenterStyle(s);
}
// Method Description:
// - Handles the color selection of the color pickup. Gets
// the currently selected color and fires an event with it
// Arguments:
// - <none>
// Return Value:
// - <none>
void ColorPickupFlyout::CustomColorButton_Click(Windows::Foundation::IInspectable const&, Windows::UI::Xaml::RoutedEventArgs const&)
{
auto color = customColorPicker().Color();
_ColorSelectedHandlers(color);
Hide();
}
void ColorPickupFlyout::ColorPicker_ColorChanged(const Windows::UI::Xaml::Controls::ColorPicker&, const Windows::UI::Xaml::Controls::ColorChangedEventArgs& args)
{
_ColorSelectedHandlers(args.NewColor());
}
}