You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/design/web-part-levels.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -30,23 +30,23 @@ Second-level toolbars within a web part have three core commands: Edit, Move, an
30
30
31
31
The second-level toolbar should only display when the author selects (clicks/taps) an individual item. Do not show all the second-level toolbars for every items at once, as this can overwhelm the user. Additionally, do not have the toolbar appear on hover, as this might cause usability issues with devices that support touch.
32
32
33
-
The bounding box and/or outline of each second-level item should change from its default state to the primary color on hover and remain the primary color on selection. It is important that the bounding box and icons keep their active states so the user understands what item is selected when using the property pane or while re-arranging items.
33
+
The bounding box and/or outline of each second-level item should change from its default state to the primary color on hover and remain the primary color on selection. It is important that the bounding box and icons keep their active states so the user understands what item is selected when they're using the property pane or while they're rearranging items.
34
34
35
-
Below is an example from an individual 2nd level item in the Image gallery web part:
35
+
The following is an example from an individual second-level item in the Image gallery web part:
36
36
37
-
Edit Item Level – opens the property pane with specific itemlevel configuration options. Note that the bounding box stays in the active/selected state.
37
+
**Edit Item Level** – opens the property pane with specific item-level configuration options. Note that the bounding box stays in the active/selected state.
38
38
39
-
Move – The transparency of the item drops to 65% and a drop shadow surrounds the item.
39
+
**Move** – The transparency of the item drops to 65% and a drop shadow surrounds the item.
40
40
41
-
Remove – When the X Remove icon is selected the toolbar hides and the item fades out making room for the specific layout to reflow.
41
+
**Remove** – When the X Remove icon is selected, the toolbar hides and the item fades out, making room for the specific layout to reflow.
42
42
43
43

44
44
45
45
## Property panes
46
46
47
-
Property panes work the same on the 2nd item level of a web part as they do when first selecting the entire web part. The focus on the 1st level shifts to the second level selection and allows the author to configure and individual item.
47
+
Property panes work the same way on the second item level of a web part that they do when first selecting the entire web part. The focus on the first level shifts to the second level selection and allows the author to configure an individual item.
48
48
49
-
In the example below the 1st level is the Image source and Layout configuration for the Image gallery web part. When the user selects an individual image they can configure the Title, Caption and Alternative text on the 2nd level property pane.
49
+
In the following example, the first level is the Image source and Layout configuration for the Image gallery web part. When the user selects an individual image, they can configure the Title, Caption, and Alternative text on the second-level property pane.
50
50
51
51

0 commit comments