Please, add metro-fluent titled-pane dark and light styles.

[MairwunNx]

I created styles for titled-pane light and dark. Please, review my adds on titled-pane, maybe you like it :)

Also please, check css code style, i newbie in kotlin and css, i can be produce mistakes, but i try not-make mistakes :D

Changes in JMetroBase.css: (Summary screen)

Code of changes in JMetroBase.css:

/*******************************************************************************
 *                                                                             *
 * TitledPane (Expanded and unexpanded)                                        *
 *                                                                             *
 ******************************************************************************/

/* titled pane expanded & unexpanded disabled */
.titled-pane:disabled {
    -fx-opacity: 0.7;
}

/* titled pane expanded & unexpanded */
.titled-pane:expanded, .titled-pane .title {
    -fx-border-width: 1;
    -fx-border-color: accent_color;
}

/* titled pane expanded & unexpanded header */
.titled-pane:expanded .title, .titled-pane .title {
    -fx-background-color: accent_color;
    -fx-border-color: accent_color;
}

/* titled pane expanded & unexpanded header text */
.titled-pane:expanded .title .text, .titled-pane .title .text {
    -fx-font-family: "Segoe UI";
    -fx-font-size: 1.166667em; /* 14 */
}

/* titled pane expanded & unexpanded header arrow */
.titled-pane:expanded .title .arrow-button .arrow,
.titled-pane .title .arrow-button .arrow {
    -fx-shape: "M 4.21875 10.78125 L 2.78125 12.21875 L 15.28125 24.71875 L 16 25.40625 L 16.71875 24.71875 L 29.21875 12.21875 L 27.78125 10.78125 L 16 22.5625 Z";
}

Changes in JMetroDarkTheme.css: (Summary screen)

Code of changes in JMetroDarkTheme.css:

/*******************************************************************************
 *                                                                             *
 * TitledPane (Expanded and unexpanded)                                        *
 *                                                                             *
 ******************************************************************************/

/* titled pane expanded & unexpanded header text */
.titled-pane:expanded .title .text, .titled-pane .title .text {
    -fx-fill: #fff;
}

/* titled pane expanded & unexpanded header arrow */
.titled-pane:expanded .title .arrow-button .arrow, .titled-pane .title .arrow-button .arrow {
    -fx-background-color: #fff;
}

/* titled pane expanded & unexpanded content */
.titled-pane:expanded .content {
    -fx-background-color: #2B2B2B;
    -fx-border-color: #2B2B2B;
}

Changes in JMetroLightTheme.css: (Summary screen)

Code of changes in JMetroLightTheme.css:

/*******************************************************************************
 *                                                                             *
 * TitledPane (Expanded and unexpanded)                                        *
 *                                                                             *
 ******************************************************************************/

/* titled pane expanded & unexpanded header text */
.titled-pane:expanded .title .text, .titled-pane .title .text {
    -fx-fill: #fff;
}

/* titled pane expanded & unexpanded header arrow */
.titled-pane:expanded .title .arrow-button .arrow, .titled-pane .title .arrow-button .arrow {
    -fx-background-color: #fff;
}

/* titled pane expanded & unexpanded content */
.titled-pane:expanded .content {
    -fx-background-color: #fff;
    -fx-border-color: #fff;
}

[dukke]

This is looking good!

However, I personally wouldn't use the accent_color here. We use the accent color in JMetro to guide the users attention towards what's more important in the UI. Since Titled Pane acts only as a container with a header I think it should probably be less prominent than other controls.

Personally I would use a neutral color here, like white for light theme and a close to black color for the dark theme.

[MairwunNx]

Thanks, so, i tried set white and black colors, it looks not-super good :) IMHO, accent_color looks better with FD conditions, but it only my opinion ^_^, if you liked white - set white. 👍

[MairwunNx]

It fluent card, but, in fluent not exists clearly titled-pane)

[dukke]

I'll have a more thorough look at the fluent card and what's it supposed to be. I wasn't aware of that control. And then I'll get back to this discussion. But in principle I think what I said makes sense, for instance tree view (also a kind of a container of items) doesn't use any accent color (except for selected items) in FD and in JMetro.

Thanks

[MairwunNx]

No problem @dukke , thanks for attention! :)

[dukke]

I can't find the Fluent Design Card in the Fluent Design Specification is that from the official Fluent Design guidelines?

[MairwunNx]

@dukke you know about C# lang? If yes - you know UWP technology? If yes - it from UWP kit. You can see all elements of UWP in XAML Controls Gallery application

In official docs for fluent many items no.

XAML Controls Gallery required latest w10 version!

[dukke]

Yes I know that. Maybe it’s not called Card?

On Fri, 28 Dec 2018 at 09:06, Pavel Erokhin ***@***.***> wrote: @dukke <https://github.com/dukke> you know about *C#* lang? If yes - you know *UWP* technology? If yes - it from *UWP* kit. You can see all elements of *UWP* in *XAML* Controls Gallery application *In official docs for fluent many items no.* XAML Controls Gallery required latest w10 version! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#25 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AClQHx9mMl-gxGTgfHRqC6Gfls9oAH-aks5u9d8bgaJpZM4Zf1uI> .

-- Pedro Duque Vieira - https://www.pixelduke.com

[MairwunNx]

@dukke maybe. You can see it control in "Motion" category and sub-category "Connected Anim"

You also can see source of Card https://github.com/Microsoft/Xaml-Controls-Gallery/blob/7536b095756ef21907c55073d5eae670ca2b2c27/XamlControlsGallery/ConnectedAnimationPages/CardPage.xaml#L40 (xaml)

[dukke]

Ah yes I see.
Thanks for the reference. 👍

That doesn't appear to be a Fluent Design control itself. I think it's more of an example made by a developer to showcase animations.

[dukke]

Here's what I've done for the light theme so far (I've started with your CSS code as a base and changed it):

What are your thoughts?

[dukke]

And collaped (first titled pane):

[MairwunNx]

Good for release, it also not bad :) Dark theme exists?

[dukke]

Thanks!

I'm going to do it now. 👍

[MairwunNx]

@dukke good.))) Good luck! 🎉🎉

[dukke]

Dark and light style for Titled Pane added.

Arrow has been made slightly smaller since last posted screenshots.

Here's the dark style:

With mouse hover top most Titled Pane:

Collapsed Titled Pane:

Pavel, thoughts?

[MairwunNx]

Hello @dukke , yes, it looks very good, i think you can commit changes, good and great job! 👍

[dukke]

Thanks Pavel! I'm glad you like it.

Changes are commited and in the repo.

I think now making JMetro style for accordion will probably be very easy, since I think it shares a lot with Titled Panes.

[MairwunNx]

@dukke good job! Thanks. :), ok, accordion new style it be good :)) wait :)

[dukke]

I'm glad you like that.
I've added Issue #30 for that. Will be my next thing to add to JMetro

[MairwunNx]

@dukke yes, i see it :D