Settings UI: Put advanced settings in foldable cards #6550

dereksmart · 2017-03-02T15:24:24Z

Fixes #6507
Fixes #6503

❗️ Make sure to yarn distclean && yarn build to get the newest dops-components❗️

To Test:
Make sure forms and saving works properly.
Make sure it looks good.

eliorivero

These should be grayed out and disabled in dev mode, or maybe even not visible:

dereksmart · 2017-03-02T22:07:25Z

Turns out the actual designs we're going for is this

In progress for now.

eliorivero · 2017-03-03T12:25:28Z

Makes sense. The advanced settings looked integrated in the Stats card, as part of the card, but they are a bit confusing in the Composing card since it's not clear if they're advanced options for all the card or just one setting.
I wonder how it looks in Stats. Because in Composing now it's clear it's for AtD, but Stats has two options and adding the chevron for one of them might look like it's only for that option and would be confusing.

PR is in progress

dereksmart · 2017-03-03T13:33:23Z

I wonder how it looks in Stats. Because in Composing now it's clear it's for AtD, but Stats has two options and adding the chevron for one of them might look like it's only for that option and would be confusing.

I was thinking this too. @MichaelArestad?

MichaelArestad · 2017-03-06T17:30:11Z

@dereksmart for stats, we will put all of the settings in the foldable part. There will just be a normal description and the chevron for stats. Does that make sense?

Maybe even just a label that says "Site stats"

dereksmart · 2017-03-06T17:32:12Z

Will there be a toggle for activating the module? Can you please just whip up a quick screenshot/mock?

MichaelArestad · 2017-03-06T17:34:50Z

@dereksmart no toggle. There already is no toggle for this module.

Something like this (but the JP version)

…line

eliorivero · 2017-03-09T21:12:04Z

This PR is now updated and AtD and Stats are now in foldable cards:

dereksmart · 2017-03-09T21:25:11Z

_inc/client/traffic/site-stats.jsx

 					header={ __( 'Site stats' ) }
-					module="stats">
+					className={ classNames( 'jp-foldable-settings-standalone', { 'jp-foldable-settings-disable': unavailableInDevMode } ) }


I think this one makes sense to have a clickableHeader

dereksmart · 2017-03-09T21:28:41Z

Pushed one small change to make stats card header clickable. I think this is good. @MichaelArestad what say you?

MichaelArestad · 2017-03-09T21:39:14Z

This is great! Thank you! Ship this big ol' thang!

MichaelArestad

Basically, just wrap any new pixel value in the rem() function. Other than that, the code looks fine.

MichaelArestad · 2017-03-09T21:39:52Z

_inc/client/components/settings-card/style.scss

-	}
+		.form-toggle__switch {
+			float: left;
+			margin-top: 2px;


Needs rem()

MichaelArestad · 2017-03-09T21:40:04Z

_inc/client/components/settings-card/style.scss

+		}
+
+		.jp-module-settings__learn-more {
+			right: 2px;


Needs rem()

MichaelArestad · 2017-03-09T21:40:21Z

_inc/client/components/settings-group/style.scss

+		margin-bottom: rem( 24px );
+	}
+	.form-toggle__label {
+		margin-top: 4px;


both of these need rem()

* Put site stats advanced settings in foldable card * ATD: put advanced settings in foldable card * fix eslint warnings/errors * ATD settings foldable * put all of site stats settings in foldable card * Settings UI: update foldable card and its settings for After the Deadline * Settings UI: finish putting Stats into standalone foldable card * Site Stats foldable card make header clickable * wrap new pixel values in rem()

Did a pass over _inc/client/components looking for things that weren't used anywhere, and found a bunch: * components/data/query-connect-url - Last use removed in #8014 * components/data/query-connection-status - Last use removed in 62e9ab0 * components/data/query-modules - Last use removed in bfc40ad * components/data/query-plugin-updates - Last use removed in #17003 * components/data/query-site-products - Last use removed in #21594 * components/form/* - Didn't check for last use, too many bits. But it looks like the `formsy-react` package many of these depended on wasn't even installed since #8208. * components/inline-expand - Last use removed in #6550 * components/jetpack-dialogue - Last use removed in #16518 * components/jetpack-logo - Last use removed in #20148 * components/jetpack-termination-dialog - Last use removed in #21048 * components/module-settings/index.jsx - Last use removed in #10644 * components/module-settings/inline-module-toggle.jsx - Last use removed in #12118 * components/screen-reader-text - Last use removed in #18843 * components/settings - Last use removed in 26315e1, I think * components/tags-input - Last use removed in #11772 Then there were a few more that were only used from some of the above: * components/data/query-connected-plugins * components/module-settings/form-components.jsx * components/multiple-choice-question * components/setting-toggle

Did a pass over _inc/client/components looking for things that weren't used anywhere, and found a bunch: * components/data/query-connect-url - Last use removed in #8014 * components/data/query-connection-status - Last use removed in 62e9ab0 * components/data/query-modules - Last use removed in bfc40ad * components/data/query-plugin-updates - Last use removed in #17003 * components/data/query-site-products - Last use removed in #21594 * components/form/* - Didn't check for last use, too many bits. But it looks like the `formsy-react` package many of these depended on wasn't even installed since #8208. * components/inline-expand - Last use removed in #6550 * components/jetpack-dialogue - Last use removed in #16518 * components/jetpack-logo - Last use removed in #20148 * components/jetpack-termination-dialog - Last use removed in #21048 * components/module-settings/index.jsx - Last use removed in #10644 * components/module-settings/inline-module-toggle.jsx - Last use removed in #12118 * components/screen-reader-text - Last use removed in #18843 * components/settings - Last use removed in 26315e1, I think * components/tags-input - Last use removed in #11772 Then there were a few more that were only used from some of the above: * components/data/query-connected-plugins * components/module-settings/form-components.jsx * components/multiple-choice-question * components/setting-toggle Co-authored-by: Brandon Kraft <public@brandonkraft.com>

dereksmart requested a review from MichaelArestad March 2, 2017 15:24

dereksmart added this to the Settings UI milestone Mar 2, 2017

dereksmart added this to Review needed in Settings UI Mar 2, 2017

eliorivero previously requested changes Mar 2, 2017

View reviewed changes

dereksmart removed the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Mar 2, 2017

zinigor moved this from Review needed to In progress in Settings UI Mar 6, 2017

dereksmart mentioned this pull request Mar 8, 2017

Settings UI: place Protect settings into foldable card #6597

Merged

dereksmart force-pushed the add/advanced-settings-foldable branch 2 times, most recently from 1e173c9 to d41588f Compare March 8, 2017 15:45

Put site stats advanced settings in foldable card

b342162

dereksmart added 2 commits March 9, 2017 14:17

ATD settings foldable

d2bb697

put all of site stats settings in foldable card

c5fa71b

eliorivero force-pushed the add/advanced-settings-foldable branch from 8aea063 to c5fa71b Compare March 9, 2017 18:15

Settings UI: update foldable card and its settings for After the Dead…

98d3a93

…line

eliorivero force-pushed the add/advanced-settings-foldable branch from 090ccb3 to 79b6b32 Compare March 9, 2017 20:56

eliorivero moved this from In progress to Review needed in Settings UI Mar 9, 2017

Settings UI: finish putting Stats into standalone foldable card

c969263

eliorivero force-pushed the add/advanced-settings-foldable branch from 79b6b32 to c969263 Compare March 9, 2017 21:10

eliorivero added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] In Progress labels Mar 9, 2017

dereksmart commented Mar 9, 2017

View reviewed changes

Site Stats foldable card make header clickable

2272507

MichaelArestad removed the [Status] Needs Design Review Design has been added. Needs a review! label Mar 9, 2017

MichaelArestad reviewed Mar 9, 2017

View reviewed changes

wrap new pixel values in rem()

9fdd0ab

dereksmart merged commit 30fca6b into feature/settings-overhaul Mar 9, 2017

dereksmart deleted the add/advanced-settings-foldable branch March 9, 2017 21:57

dereksmart removed the [Status] Needs Review To request a review from Crew. Label will be renamed soon. label Mar 9, 2017

dereksmart moved this from Review needed to Done in Settings UI Mar 9, 2017

This was referenced Mar 22, 2017

Move all spelling and grammar settings into a foldable card #6507

Closed

Move all of stats settings into a foldable card #6503

Closed

anomiex mentioned this pull request May 10, 2022

jetpack: Remove unused JS client components #24319

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Settings UI: Put advanced settings in foldable cards #6550

Settings UI: Put advanced settings in foldable cards #6550

dereksmart commented Mar 2, 2017 •

edited

Loading

eliorivero left a comment •

edited

Loading

dereksmart commented Mar 2, 2017

eliorivero commented Mar 3, 2017

dereksmart commented Mar 3, 2017

MichaelArestad commented Mar 6, 2017 •

edited

Loading

dereksmart commented Mar 6, 2017

MichaelArestad commented Mar 6, 2017

eliorivero commented Mar 9, 2017

dereksmart Mar 9, 2017

dereksmart commented Mar 9, 2017

MichaelArestad commented Mar 9, 2017

MichaelArestad left a comment

MichaelArestad Mar 9, 2017

MichaelArestad Mar 9, 2017

MichaelArestad Mar 9, 2017

Settings UI: Put advanced settings in foldable cards #6550

Settings UI: Put advanced settings in foldable cards #6550

Conversation

dereksmart commented Mar 2, 2017 • edited Loading

eliorivero left a comment • edited Loading

Choose a reason for hiding this comment

dereksmart commented Mar 2, 2017

eliorivero commented Mar 3, 2017

dereksmart commented Mar 3, 2017

MichaelArestad commented Mar 6, 2017 • edited Loading

dereksmart commented Mar 6, 2017

MichaelArestad commented Mar 6, 2017

eliorivero commented Mar 9, 2017

dereksmart Mar 9, 2017

Choose a reason for hiding this comment

dereksmart commented Mar 9, 2017

MichaelArestad commented Mar 9, 2017

MichaelArestad left a comment

Choose a reason for hiding this comment

MichaelArestad Mar 9, 2017

Choose a reason for hiding this comment

MichaelArestad Mar 9, 2017

Choose a reason for hiding this comment

MichaelArestad Mar 9, 2017

Choose a reason for hiding this comment

dereksmart commented Mar 2, 2017 •

edited

Loading

eliorivero left a comment •

edited

Loading

MichaelArestad commented Mar 6, 2017 •

edited

Loading