Plugins: Include action buttons and icon in the plugin-item edit mode

[johnHackworth]

fix #413
fix #1206

This PR changes the layout of the plugin items in the users plugins list, so it includes both the action toggles and the plugin icon:

Before:

After:

How to test:

1. Go to http://calypso.dev:3000/plugins/
2. Select any of your jetpack sites
3. Click on 'manage'.
4. You should keep seeing both action toggles and plugin icon

ping @enejb @rickybanister

[enejb]

I tried it and in the bulk manage mode having the toggles feels kind of strange. Since there are so many things to click on. In the original design we just had visibility of the state and not toggles. Could we have an updated version of the mockup where we show the 3 possible stats. active, not active and disabled.

From #413

[johnHackworth]

hmm, I may have missinterpreted that mockup, yeah! I'll change this PR to include just a visual indicator instead of the full working toggle!

[rickybanister]

Ooops, I missed this PR earlier. Glad to see the icons back.

I remember the design for the indicator, but I'm curious if we could just see the actions be disabled prior to building out those indicators.

I picture clicking the bulk edit button, the checkboxes slide in (once we have time to do a bit of animation), and the individual actions simple are disabled while bulk editing. We already have disabled states built and they would serve to show the current status of each plugin.

It seems easier to give that a try before building this (and I don't think these are very visually clear—this isn't a standard interface or indicator).

[johnHackworth]

What do you mean with "we already have disabled states built", rick? I mean, if I'm not wrong, the only 'disabled' states those toggles have is the one we use for avoiding any interaction in the feature examples, but the look is the same than if they were fully functional. This is how they would look with the funcionality disabled:

They look great, but since the visuals are the same than when they are working, wouldn't it be a little missleading for the user? Maybe we could add a external css making them semi transparent or something when they couldn't be clicked on ..

[johnHackworth]

Quick test with opacity:

Normal mode:

Bulk edit mode:

[johnHackworth]

fun with filters!

This is with

        .plugin-item__actions {
            opacity: 0.3;
            filter: grayscale(70%);
        }

I've commited this version just in case you want to experiment a little, @rickybanister

[rickybanister]

@johnHackworth I think I sort of tricked myself—the inactive state of the toggle has disabled styles, but the active state of the toggle does not. I like where you're going with the opacity, BUT I think we should make a change in the toggle component to allow us to disable an active toggle (meaning: the toggle is always one, but cannot be interacted with). We should probably also make sure the labels have sensible defaults within the toggle component—right now they are custom to Plugins and cannot be reused elsewhere.

I'll take a look at the branch a little later, but perhaps we'd want to do the refactoring of toggle before getting this merged. Or maybe we make this PR just about the icons for now.

[johnHackworth]

yeah, refactoring toggles to include a disabled state before mergin this one sounds the way to go. Also, that way maybe we could use the new disabled state in the plugins feature gates, so we can ditch the "isMock" property, which is pretty awful ...

[johnHackworth]

@rickybanister it turned out that you were right ... there's a 'disabled' state from toggles... it's just that we were not including that property in the wrapper we use on plugins (plugin-actions). I've added it and now we can disable the toggles when on bulk edit mode is on:

[rickybanister]

I haven't checked out the branch but it looks like those are disabled AND you have some opacity styles on top of them. We only need the disabled state ideally.

[johnHackworth]

@rickybanister Not really... I only apply

    .is-disabled & {
        color: lighten( $gray, 30% );
    }

to the toggle label when bulk editing (since the label doesn't get affected by the 'disabled' property by default). But maybe the effect we are looking for is more similar to how it look without that?

[johnHackworth]

I commited the version without that 'is-disabled' css class, just in case

[rickybanister]

Ah, I understand. I think you should bring back the

.is-disabled & { color: lighten( $gray, 30% ); }

styles for the label text. I went checking on the disabled toggle styles and realized we didn't set cursor: default on the toggle, which lead to #1688 and a bunch of other stuff getting removed.

This should be good to go once we change the text color back. Sorry for the run-around.

[johnHackworth]

@rickybanister ok, restored the lighter color for the disabled action labels! I think with you tackling all the toggles small improvements in #1688, this one should be pretty much ready to go, isn't it?

[rickybanister]

Yeah 🚢 this one. This is a great basis. Editing All is soooooo close.

[enejb]

I found 2 issues with this.
I think it is kind of hard to tell if a plugin is active or not.

To me it is not very clear that BuddyPress is not active and Akismet is.

The other issue that I found is that
There is a mouse over state on the toggles. Is that intentional? Also you get a pointer curser when you mouse over it. As if you should be able to toggle the item.

[enejb]

I just rebased this so.

[johnHackworth]

about knowing if a plugin is active or not when you are in bulk edit mode... well, yeah, you're right... but this is also a problem that we have had in all the previous versions (including current production's one:

). So maybe we should do something to fix it (but not in this PR :) )

The cursor over the disabled toggles should be fixed once rebased, @rickybanister fixed it in another PR

[johnHackworth]

@enejb oops, I wasn't getting what you were saying about the mouseover, I thought you were talking about the cursor... yeah, it seems that there was a bug in that form-toggle css... I have included the fix here ,it shouldn't change the color when disabled anymore

[rickybanister]

I agree with @johnHackworth here, we were hiding this info previously. I hope that if you're interacting with your site you'll see the toggles transition from active to disabled and it will be more clear.

We can also try creating active + disabled styles that are lighterned blue, but I'd like to do that in a future PR. Let's merge this and keep at it.

[enejb]

Rebased with master and removed curser pointers to show as default.
I still have some concerns but I think this is good to go code wise. Some of these issues could be address in a different PR.

👍