Style the button and tab view background to match the titlebar #1934

cinnamon-msft · 2019-07-11T23:38:47Z

Summary of the Pull Request

Added additional styling to the title bar so it looks cohesive and tweaked the + button so it's not so large.

References

PR Checklist

Closes UI: align design with other UWP apps #615
CLA signed. If not, go over here and sign the CLA
Tests added/passed
Requires documentation to be updated
I've discussed this with core contributors already. If not checked, I'm ready to accept this work might be rejected in favor of a different grand plan. Issue number where discussion took place: #xxx

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

DHowett-MSFT · 2019-07-11T23:50:17Z

nit: rename pull request to be in imperative form. Imagine that you're completing the sentence,

"[if merged,] this pull request will..."

"style the title bar"

DHowett-MSFT · 2019-07-11T23:50:43Z

src/cascadia/TerminalApp/MinMaxCloseControl.xaml

-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-    HorizontalAlignment="Left"
+		Background="{ThemeResource SystemChromeLowColor}"
+	  HorizontalAlignment="Left"


spacing issues

DHowett-MSFT · 2019-07-11T23:51:24Z

src/cascadia/TerminalApp/MinMaxCloseControl.xaml

@@ -130,7 +130,10 @@
    </StackPanel.Resources>

    <Grid x:Name="Content"></Grid>
-    <Border Height="36.0" MinWidth="160.0" x:Name="DragBar" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" DoubleTapped="DragBar_DoubleTapped"/>
+	<Border Height="36.0"
+					MinWidth="160.0"


there's a loottt of spaces here. could you align the properties vertically after the space after the tag name?

(I think this is a tab/spaces thing)

DHowett-MSFT · 2019-07-11T23:51:53Z

src/cascadia/TerminalApp/MinMaxCloseControl.xaml

@@ -31,7 +31,7 @@
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <x:Double x:Key="CaptionButtonStrokeWidth">1.0</x:Double>
-                    <StaticResource x:Key="CaptionButtonBackground" ResourceKey="SystemControlBackgroundAltHighBrush"/>
+                    <StaticResource x:Key="CaptionButtonBackground" ResourceKey="SystemChromeLowColor"/>


you might want to make these Transparent so the Row peeks through

DHowett-MSFT · 2019-07-11T23:51:56Z

src/cascadia/TerminalApp/MinMaxCloseControl.xaml

@@ -18,7 +18,7 @@
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <x:Double x:Key="CaptionButtonStrokeWidth">1.0</x:Double>
-                    <StaticResource x:Key="CaptionButtonBackground" ResourceKey="SystemControlBackgroundAltHighBrush"/>
+                    <StaticResource x:Key="CaptionButtonBackground" ResourceKey="SystemChromeLowColor"/>


src/cascadia/TerminalApp/TerminalPage.xaml

DHowett-MSFT · 2019-07-12T00:06:16Z

src/cascadia/TerminalApp/TerminalPage.xaml

@@ -23,21 +23,28 @@ the MIT License. See LICENSE in the project root for license information. -->
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

-            <mux:TabView x:Name="TabView" Grid.Column="0" />
+            <mux:TabView x:Name="TabView" Grid.Column="0"
+									 SelectionChanged="TabView_SelectionChanged" />


remove this and the other selectionchanged thingos

zadjii-msft

I pretty much have the same comments that Dustin has

zadjii-msft

I think I'm cool with this. I can definitely merge this into #1948 without too much pain.

Aside, does this fix #1913?

zadjii-msft · 2019-07-12T21:36:34Z

src/cascadia/TerminalApp/MinMaxCloseControl.xaml

@@ -130,7 +130,11 @@
    </StackPanel.Resources>

    <Grid x:Name="Content"></Grid>
-    <Border Height="36.0" MinWidth="160.0" x:Name="DragBar" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" DoubleTapped="DragBar_DoubleTapped"/>
+	<Border Height="36.0"


Why does GH think this line wrapped?

I added that in

cinnamon-msft · 2019-07-12T21:40:45Z

I think I'm cool with this. I can definitely merge this into #1948 without too much pain.

Aside, does this fix #1913?

No I don't think so. When testing I was still experiencing the bug

zadjii-msft · 2019-07-12T21:43:16Z

@cinnamon-msft cool, cool cool cool cool cool.

…soft#1934) * styled title bar to be one color, shrunk + button

ghost · 2019-08-03T01:49:35Z

🎉Windows Terminal Preview v0.3.2142.0 has been released which incorporates this pull request.:tada:

Handy links:

brainplot · 2019-08-10T15:07:43Z

I'm running version 0.3.2171.0 freshly downloaded from the Microsoft Store. I've set my theme to One Half Dark but the buttons and tabs remain white. Is there any additional settings I should add to my profiles.json?

Stanzilla · 2019-08-10T15:53:57Z

You need to switch your Windows theme from light to dark in the settings app.

brainplot · 2019-08-10T16:03:47Z

Oh, I understand now. I prefer a light theme for the rest of the system. I guess I'll stick with the white borders for now. It'd be nice to be able to change this from the profiles.json for the Terminal app only.

mdtauk · 2019-08-10T16:29:47Z

You can set the app to use dark themes in the settings

DHowett-MSFT · 2019-08-10T18:34:51Z

Yeah, it’s called “requestedTheme”.

brainplot · 2019-08-10T18:53:03Z

Thank you! I was indeed going to ask what the option is :)

styled title bar to be one color, shrunk + button

7237ab2

cinnamon-msft requested review from DHowett-MSFT and zadjii-msft July 11, 2019 23:45

cinnamon-msft changed the title ~~Styled title bar to be cohesive and shrunk + button~~ style the title bar Jul 11, 2019

DHowett-MSFT reviewed Jul 11, 2019

View reviewed changes

DHowett-MSFT suggested changes Jul 11, 2019

View reviewed changes

ghost added the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Jul 11, 2019

Un-fix the line endings (sorry)

7160f04

DHowett-MSFT reviewed Jul 12, 2019

View reviewed changes

DHowett-MSFT changed the title ~~style the title bar~~ Style the button and tab view background to match the titlebar Jul 12, 2019

zadjii-msft reviewed Jul 12, 2019

View reviewed changes

zadjii-msft mentioned this pull request Jul 12, 2019

Enable dragging with the entire titlebar #1948

Merged

4 tasks

fixed spacing (hopefully) and removed selectionChanged

e686e9d

ghost removed the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Jul 12, 2019

cinnamon-msft requested review from DHowett-MSFT and zadjii-msft July 12, 2019 21:37

zadjii-msft approved these changes Jul 12, 2019

View reviewed changes

DHowett-MSFT approved these changes Jul 12, 2019

View reviewed changes

DHowett-MSFT merged commit b706b60 into master Jul 12, 2019

DHowett-MSFT deleted the cinnamon/button-styling branch July 12, 2019 22:07

zadjii-msft mentioned this pull request Jul 16, 2019

Add a setting to enable the using the Accent Color for the titlebar #1963

Closed

DHowett-MSFT mentioned this pull request Jul 16, 2019

MEGA THREAD: Design still subject to change, UI is pretty okay though #1375

Closed

29 tasks

mcpiroman pushed a commit to mcpiroman/terminal that referenced this pull request Jul 23, 2019

Style the button and tab view background to match the titlebar (micro…

d3a1024

…soft#1934) * styled title bar to be one color, shrunk + button

ghost mentioned this pull request Aug 3, 2019

UI: align design with other UWP apps #615

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Style the button and tab view background to match the titlebar #1934

Style the button and tab view background to match the titlebar #1934

cinnamon-msft commented Jul 11, 2019

DHowett-MSFT commented Jul 11, 2019

DHowett-MSFT Jul 11, 2019

DHowett-MSFT Jul 11, 2019

zadjii-msft Jul 12, 2019

DHowett-MSFT Jul 11, 2019

DHowett-MSFT Jul 11, 2019

DHowett-MSFT Jul 12, 2019

zadjii-msft left a comment

zadjii-msft left a comment

zadjii-msft Jul 12, 2019

cinnamon-msft Jul 12, 2019

cinnamon-msft commented Jul 12, 2019

zadjii-msft commented Jul 12, 2019

ghost commented Aug 3, 2019

brainplot commented Aug 10, 2019

Stanzilla commented Aug 10, 2019

brainplot commented Aug 10, 2019

mdtauk commented Aug 10, 2019

DHowett-MSFT commented Aug 10, 2019

brainplot commented Aug 10, 2019

Style the button and tab view background to match the titlebar #1934

Style the button and tab view background to match the titlebar #1934

Conversation

cinnamon-msft commented Jul 11, 2019

Summary of the Pull Request

References

PR Checklist

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

DHowett-MSFT commented Jul 11, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zadjii-msft left a comment

Choose a reason for hiding this comment

zadjii-msft left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cinnamon-msft commented Jul 12, 2019

zadjii-msft commented Jul 12, 2019

ghost commented Aug 3, 2019

brainplot commented Aug 10, 2019

Stanzilla commented Aug 10, 2019

brainplot commented Aug 10, 2019

mdtauk commented Aug 10, 2019

DHowett-MSFT commented Aug 10, 2019

brainplot commented Aug 10, 2019