[Canvas] Adds workpad-level CSS #24143

ryankeairns · 2018-10-17T14:28:01Z

Summary

Similar to adding CSS overrides at a page level, this feature allows a user to override styles at a workpad (global) level using a new form input. This is my first foray into writing changes to the JSON workpad, so please kick the tires thoroughly.

One side effect of this change is that I've changed the default Page background to null and, in turn, moved the default white background up one element in the DOM. The reason for doing this was that setting a global background color for all pages seems like a prime use case for the workpad-level global CSS feature. Setting the default page color at the page level (deeper) prevents a user from overriding the color globally. Setting any background color at the Page level (including transparent) will take precedent - you can confirm with in full screen mode.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
This was checked for keyboard-only and screenreader accessibility

elasticmachine · 2018-10-17T18:24:59Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cqliu1 · 2018-10-18T16:13:38Z

@ryankeairns The position of the page looks a bit off on my end, and the checkered background also stretches and shrinks with the vertical space of the workpad.

ryankeairns · 2018-10-18T16:16:39Z

@cqliu1 I'll get that fixed up.

Also of note, I couldn't find an easy way to apply the global styles to the page thumbnails.

elasticmachine · 2018-10-19T06:15:16Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

ryankeairns · 2018-10-22T13:32:59Z

A couple more to-do items left here:

Add an 'Apply stylesheet' button
Apply global styles to page thumbnails

ryankeairns · 2018-10-22T18:38:04Z

@cqliu1 regarding the 'Apply stylesheet' button, it's not as straightforward as I had anticipated and it's dissimilar to the other CSS Style argument panel in the sidebar. Workpad config (ie. workpad settings) is a const so it's not clear (to me) on how best to handle state for the textarea input. This is beyond my current level of Redux knowledge so it would be more efficient if an engineer takes this on for the last mile or we walk through it together.

It's a similar situation for the Page Manager preview, I can get the global styles to pass down into this section using style-it, but I ran into some Type issues that prevented me from applying the styles to the thumbnail previews.

ryankeairns · 2018-10-23T02:29:49Z

@cqliu1 can you push up the changes from our zoom discussion (the preview styles and the 'apply stylesheet' button)? Thanks!

cqliu1 · 2018-10-23T04:27:51Z

@ryankeairns I did push up the changes upstream. Can you check if you're pulling upstream?

elasticmachine · 2018-10-23T16:14:41Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

ryankeairns · 2018-11-13T19:41:41Z

@alexfrancoeur @rashidkpc we put this global CSS feature on hold during the 6.5 frenzy, but it has now been rebased and is ready for your review.

Thanks @cqliu1 for chipping in to finish this off!

rashidkpc

A few comments, but otherwise this looks pretty good!

x-pack/plugins/canvas/public/state/reducers/workpad.js

x-pack/plugins/canvas/public/state/defaults.js

x-pack/plugins/canvas/public/components/workpad_config/index.js

elasticmachine · 2018-11-28T16:35:25Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

ryankeairns · 2018-11-28T20:22:05Z

@rashidkpc your feedback has been addressed, this PR is ready for another look.

elasticmachine · 2018-11-28T21:08:46Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

x-pack/plugins/canvas/public/style/main.scss

x-pack/plugins/canvas/public/components/color_dot/color_dot.js

rashidkpc

Couple comments, but take care of those and go ahead and merge this!

elasticmachine · 2018-11-30T22:48:53Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-03T14:44:05Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* adds global, workpad css styling feature * fixes checkered position and default CSS in textarea * adds global, workpad css styling feature * fixes checkered position and default CSS in textarea * Added global styles to page manager * Added 'apply stylesheet' button * fix after rebase * change style to css * move default workpad CSS class to constant * unwind the empty page color pieces

ryankeairns added WIP Work in progress v7.0.0 v6.5.0 Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// labels Oct 17, 2018

ryankeairns changed the title ~~WIP [Canvas] Adds workpad-level CSS~~ [Canvas] Adds workpad-level CSS Oct 17, 2018

ryankeairns removed the WIP Work in progress label Oct 17, 2018

ryankeairns requested review from alexfrancoeur, cqliu1 and rashidkpc October 17, 2018 15:01

ryankeairns force-pushed the rk/23930-workpad-css branch from 630614b to bd7df74 Compare October 17, 2018 15:04

ryankeairns added the review label Oct 17, 2018

elastic deleted a comment from elasticmachine Oct 17, 2018

elastic deleted a comment from ryankeairns Oct 17, 2018

ryankeairns force-pushed the rk/23930-workpad-css branch from bd7df74 to 9c3cbdf Compare October 19, 2018 04:31

ryankeairns removed the review label Oct 22, 2018

ryankeairns force-pushed the rk/23930-workpad-css branch from 9c3cbdf to a58a6af Compare October 23, 2018 13:49

ryankeairns added the review label Oct 23, 2018

spalger added v6.6.0 and removed v6.6.0 labels Oct 25, 2018

cqliu1 removed the v6.5.0 label Oct 26, 2018

rashidkpc suggested changes Nov 27, 2018

View reviewed changes

x-pack/plugins/canvas/public/state/reducers/workpad.js Outdated Show resolved Hide resolved

x-pack/plugins/canvas/public/state/defaults.js Outdated Show resolved Hide resolved

x-pack/plugins/canvas/public/components/workpad_config/index.js Outdated Show resolved Hide resolved

ryankeairns force-pushed the rk/23930-workpad-css branch from 66024ad to d165173 Compare November 28, 2018 15:45

rashidkpc reviewed Nov 30, 2018

View reviewed changes

x-pack/plugins/canvas/public/style/main.scss Outdated Show resolved Hide resolved

rashidkpc reviewed Nov 30, 2018

View reviewed changes

x-pack/plugins/canvas/public/components/color_dot/color_dot.js Outdated Show resolved Hide resolved

rashidkpc approved these changes Nov 30, 2018

View reviewed changes

ryankeairns and others added 10 commits December 3, 2018 07:56

adds global, workpad css styling feature

4af518a

fixes checkered position and default CSS in textarea

243b5f0

adds global, workpad css styling feature

d241568

fixes checkered position and default CSS in textarea

c0ef058

Added global styles to page manager

d198e16

Added 'apply stylesheet' button

c403160

fix after rebase

725eb6c

change style to css

3f6280e

move default workpad CSS class to constant

07d76c5

unwind the empty page color pieces

f53be6b

ryankeairns force-pushed the rk/23930-workpad-css branch from 2b7d512 to f53be6b Compare December 3, 2018 13:56

ryankeairns merged commit cfb1404 into elastic:master Dec 3, 2018

ryankeairns mentioned this pull request Dec 3, 2018

[6.x] [Canvas] Adds workpad-level CSS (#24143) #26530

Closed

ryankeairns mentioned this pull request Dec 3, 2018

[6.x] [Canvas] Adds workpad-level CSS (#24143) #26550

Merged

ryankeairns mentioned this pull request Dec 3, 2018

Page selector only shows first page #26562

Closed

cqliu1 mentioned this pull request Dec 11, 2018

Global Custom CSS field for Canvas #22465

Closed

[Canvas] Adds workpad-level CSS #24143

[Canvas] Adds workpad-level CSS #24143

Uh oh!

Conversation

ryankeairns commented Oct 17, 2018 • edited by rashidkpc Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

elasticmachine commented Oct 17, 2018

💔 Build Failed

Uh oh!

cqliu1 commented Oct 18, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ryankeairns commented Oct 18, 2018

Uh oh!

elasticmachine commented Oct 19, 2018

💚 Build Succeeded

Uh oh!

ryankeairns commented Oct 22, 2018

Uh oh!

ryankeairns commented Oct 22, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ryankeairns commented Oct 23, 2018

Uh oh!

cqliu1 commented Oct 23, 2018

Uh oh!

elasticmachine commented Oct 23, 2018

💚 Build Succeeded

Uh oh!

ryankeairns commented Nov 13, 2018

Uh oh!

rashidkpc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Nov 28, 2018

💚 Build Succeeded

Uh oh!

ryankeairns commented Nov 28, 2018

Uh oh!

elasticmachine commented Nov 28, 2018

💚 Build Succeeded

Uh oh!

Uh oh!

Uh oh!

rashidkpc left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 30, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 3, 2018

💚 Build Succeeded

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ryankeairns commented Oct 17, 2018 •

edited by rashidkpc

Loading

cqliu1 commented Oct 18, 2018 •

edited

Loading

ryankeairns commented Oct 22, 2018 •

edited

Loading