Add locking toggle to layers

LuckynaSan commented 3 years ago

Feature Description

A user (in this support topic) requested the ability to lock in layers.

Alternatives Considered

Additional Context

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

[ ] Locked layer cannot be selected by left click, it can be selected by right click (RCM) and from the Layers Panel.
[ ] You can't move or drag the locked layer on the Canvas.
[ ] Lock/Unlock option is available in RCM and Layers Panel context menu.
[ ] You can duplicate a locked layer, duplicated layer is still locked.
[ ] You can still DND locked layer in the Layers Panel.
[ ] TBD: Any changes to RCM Select layer option? Lock icon? Functional?
[ ] TBD: Background layer lock icon - it will work differently, do we need a new icon?

Implementation Brief

BrittanyIRL commented 3 years ago

hey @aaskedall - do you think you could whip up what we want a locked layer to look like before we start working on release 1.13 (so 2 weeks from now)?

My best guess would be just mimicking the "locked' background layer that's currently displayed on the layers panel, but it's a button and if it's not locked then we show the unlocked svg or no svg.

BrittanyIRL commented 3 years ago

@barklund @miina - want your expertise on the editor's functionality!

For locking layers, all this does is prevent them from getting dragged to be above or below another layer, right? It doesn't prevent anything in the editor from getting done on the layer? I know right now the only thing that's locked is the background layer, as you know the design team's looking at locking other layers and i want to make sure we scope what all goes into that.

If it's just impacting the layers panel by preventing that layer from getting its position in layering updated then it can live in the layer improvements epic (#8983 ), but if it's impacting more than the layers panel (like, if locking prevents the layer from being duplicated then that now impacts the context menus) i think it needs to be its own epic.

miina commented 3 years ago

@BrittanyIRL I'm actually not 100% sure what's meant by locking a layer. It might be good to know the intent of the user who originally requested this feature or ask @gajasinski since this seems to be a product question.

IIRC then in Photoshop for example, locking layers will not allow any editing at all, but currently in the editor, the lock sign for the background means just that its position is locked and nothing can be positioned below it and the background itself also can't be re-positioned.

If locking the layer would just lock the positioning, would it also have an impact on the nearby layers? Since otherwise, if one layer is locked (can't be re-positioned) but the others still can, then the position of the locked layer would still relatively change as well. Not sure how useful that would be. Thoughts?

(cc @barklund in case you have more information about it)

gajasinski commented 3 years ago

Not sure about this feature request. Will have to do a bit of digging, but my assumption is that this would be similar to Photoshop example from @miina

BrittanyIRL commented 3 years ago

I totally agree this is ambiguous - this was a request made by deign as well, i was avoiding ticket duplication though by using this ticket that Lucky opened from a user request. @agingoldseco can you chime in here with behaviors you're looking for?

agingoldseco commented 3 years ago

@BrittanyIRL @miina Sure! The behaviors I envisioned:

You can lock a layer by clicking on the open lock icon in the hover state of a layer in the layers palette, or by right-clicking on the layer and clicking “Lock/Unlock”
The open lock icon will turn into a closed lock in the Layers Palette, which will remain visible on that layer, even outside of the hover state (Figma example video attached)
Once a layer is locked, you can no longer move or interact (left click) with it in the workspace
You can unlock a layer by either clicking on the closed lock on it in the Layers Palette, or right-clicking on it in the workspace and clicking “Lock/Unlock” in the menu
Things can still be positioned below a locked object/layer, it keeps its place in the layer order — bottom to top (in palette) = background to foreground, so moving a layer behind it will still work, the locked layer just won’t move or select in the workspace in a multi-object select
- Note: In Figma, you can still move the background-to-foreground position of a locked layer in the layers palette by clicking “send to back” etc in right click menu or dragging, I think we should consider allowing that too

https://user-images.githubusercontent.com/90645922/136084262-a91cb142-1f34-4cc1-a1ec-e8366d6ead2e.mov

BrittanyIRL commented 3 years ago

Noting here after discussion - Locking layers is going to impact keyboard users because right now the layers panel is hidden for keyboards as all functionality is mirrored in keyboard shortcuts. The accessibility of the layers panel will need to be reconsidered ahead of this functionality getting added to the layers panel.

agingoldseco commented 2 years ago

Are we okay with differentiating the way the background "lock" works vs the other layer locks by using this filled-in icon to the right on it?

gajasinski commented 2 years ago

Is there an icon that shows the lock unlocked? Being sensitive because I just read an article about icon states that can be difficult to interpret.

If not, this works!

BrittanyIRL commented 2 years ago

There is: https://googleforcreators.github.io/web-stories-wp/storybook/?path=/story/designsystem-icons--all-icons

It's called "lockOpen"

gajasinski commented 2 years ago

If this doesn't confuse any other patterns, could we use this @agingoldseco ?

agingoldseco commented 2 years ago

@gajasinski I get the confusion—we're still going to use those empty lock and unlock icons for all the other layers, but the way the background layer locks (or is always locked) is different from how the lock function will work elsewhere. This filled in lock would just subtly show that difference and that its state can't be changed. It was follow-up from a meeting with prometheus :)

gajasinski commented 2 years ago

@agingoldseco sounds good thank you!

GoogleForCreators / web-stories-wp