Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improves dark theme support in the filter editor #13522

Merged
merged 5 commits into from Aug 18, 2017

Conversation

Projects
None yet
4 participants
@Bargs
Copy link
Contributor

commented Aug 15, 2017

Fixes #12955

  • Added dark theme support to the ui framework modal component
  • Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)

Note: I didn't change the colors of the uiSelect dropdowns. I took a swing at it but it turned into a big mess. There's tons of bootstrap and uiSelect styles that need to be overridden to do this properly. The white dropdowns don't look too bad to me, so I think if we want to add dark theme support to uiSelect we should do that in a separate PR.

screen shot 2017-08-15 at 6 29 30 pm

z-index issue

panelstacking

@lukasolson
Copy link
Member

left a comment

LGTM!

@cjcenizal
Copy link
Contributor

left a comment

In ui_framework/doc_site/src/views/modal/modal_example.js could you add this to line 36:

      <GuideDemo isDarkTheme>
        <StaticConfirmModal />
      </GuideDemo>

Then if you look at the example in the UI Framework, you can see the color of the text is off:

image

We can fix this by making the following changes to modal/_modal.scss:

  .kuiModalHeader__title {
    font-size: $globalTitleFontSize;

    @include darkTheme {
      color: $globalTextColor--darkTheme;
    }
  }

.kuiModalBodyText {
  font-size: 14px;

  @include darkTheme {
    color: $globalTextColor--darkTheme;
  }
}

image

@localNavDepth: 3; /* 1 */
@dashboardGridDepth: 1; /* 2 */

This comment has been minimized.

Copy link
@cjcenizal

cjcenizal Aug 16, 2017

Contributor

I ❤️ these comments.

@@ -4,5 +4,9 @@ $modalBackgroundColor: #FFF;
$modalOverlayBackground: rgba(#000000, 0.5);
$globalModalDepth: 1000;

// Dark theme colors
$modalBorderColor--darkTheme: #000;
$modalBackgroundColor--darkTheme: #272727;

This comment has been minimized.

Copy link
@cjcenizal

cjcenizal Aug 16, 2017

Contributor

Could you change this to #525252? This will help the modal contrast against the background better.

image

@cjcenizal

This comment has been minimized.

Copy link
Contributor

commented Aug 16, 2017

This looks awesome overall btw

@trevan

This comment has been minimized.

Copy link
Contributor

commented Aug 16, 2017

Does this also fix #12988?

@Bargs

This comment has been minimized.

Copy link
Contributor Author

commented Aug 17, 2017

Thanks for the review @cjcenizal, I've made those updates.

@trevan unfortunately no, that modal lies outside of the application container, so the dark theme styles aren't getting applied to it. The changes in this PR might make it a little easier for someone to fix though.

@cjcenizal
Copy link
Contributor

left a comment

LGTM!

@Bargs Bargs merged commit e7ca195 into elastic:master Aug 18, 2017

2 checks passed

CLA Commit author is a member of Elasticsearch
Details
kibana-ci Build finished.
Details

Bargs added a commit to Bargs/kibana that referenced this pull request Aug 18, 2017

Improves dark theme support in the filter editor (elastic#13522)
Fixes elastic#12955

* Added dark theme support to the ui framework modal component
* Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)

Bargs added a commit to Bargs/kibana that referenced this pull request Aug 18, 2017

Improves dark theme support in the filter editor (elastic#13522)
Fixes elastic#12955

* Added dark theme support to the ui framework modal component
* Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)

Bargs added a commit to Bargs/kibana that referenced this pull request Aug 18, 2017

Improves dark theme support in the filter editor (elastic#13522)
Fixes elastic#12955

* Added dark theme support to the ui framework modal component
* Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)

Bargs added a commit that referenced this pull request Aug 18, 2017

Improves dark theme support in the filter editor (#13522) (#13579)
Fixes #12955

* Added dark theme support to the ui framework modal component
* Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)

Bargs added a commit that referenced this pull request Aug 18, 2017

Improves dark theme support in the filter editor (#13522) (#13577)
Fixes #12955

* Added dark theme support to the ui framework modal component
* Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)

Bargs added a commit that referenced this pull request Aug 18, 2017

[6.0] Improves dark theme support in the filter editor (#13522) (#13578)
* Improves dark theme support in the filter editor (#13522)

Fixes #12955

* Added dark theme support to the ui framework modal component
* Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)

* Fix example

chrisronline added a commit to chrisronline/kibana that referenced this pull request Nov 20, 2017

Improves dark theme support in the filter editor (elastic#13522)
Fixes elastic#12955

* Added dark theme support to the ui framework modal component
* Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)

chrisronline added a commit to chrisronline/kibana that referenced this pull request Dec 1, 2017

Improves dark theme support in the filter editor (elastic#13522)
Fixes elastic#12955

* Added dark theme support to the ui framework modal component
* Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.