Feature Spec Panel: Libraries - adobe-photoshop/spaces-design GitHub Wiki

Canvas Interactions

Panel Interactions

  • Double clicking on the "Libraries" panel header will collapse and expand the Libraries panel.

Library Interactions

  • Clicking the dropdown at the top of the panel will allow the user to switch libraries, create a new library, rename a library, or delete a library:

    • Creation: If the user selects "Create New Library" from the dropdown, the option to type a new library name appears. If there is no text inputted, pressing "Enter" will not prompt any behavior. Else, pressing "Enter" commits the text as the title of the new library. If the user creates the library, the new library name should appear in the dropdown thereafter.

    • Rename: If the user selects "Rename Library" from the dropdown, the option to type a new name for the library appears. Pressing "Enter" commits the text -- changed or unchanged.

    • Deletion: If the user deletes a library, a dialog should appear asking the user to confirm their decision to delete the library. If the user chooses to delete the library, the name of the library should be removed from the dropdown list and the library panel should revert to showing the contents of the first library in the dropdown list (which is the last modified library).

  • Clicking the "Share" icon should open a web page to prompt the user to input the information for the person they chose to share this library with. (1)

  • Clicking the "Send Link" icon should open a web page to prompt the user to decide whether to make a public link to their library on the cloud. (1)

  • Clicking the "View on Website" icon should open a web page showing the user's library. (1)

  • Clicking the "Search Adobe Stock" icon at the bottom right of the libraries panel will open the Adobe Stock web page.

  • Clicking on the CC icon at the bottom right will force sync local and cloud libraries.

Asset Interactions

  • If the library is clicked on (anywhere except the preview), the row should become highlighted, and three icons should show up to the right of the name (Send link, View on website, and Delete). If the name is clicked again, the row should de-select and the icons should go away.

    • Clicking the "Delete" icon should show a dialog asking the user to confirm their decision to delete the asset. If the user chooses to delete the asset, the asset should be removed from the list.

    • Clicking the "Send Link" icon should open a web page to prompt the user to decide whether to make a public link to their asset on the cloud. (1)

    • Clicking the "View on Website" icon should open a web page showing the user's asset. (1)

  • Double clicking on the title of the library should make its name editable.

Color

  • Creation: If a shape/text layer is selected and has a fill or stroke (shape layer does not have stroke color), there should be icons at the bottom of the libraries panel that indicate this -- "Add Fill Color" and "Add Stroke Color". If these icons are active, clicking on either should create a new Color with the corresponding color in the preview and the hex value of the color.

  • Apply: If a shape/text layer is selected and the color swatch of a color asset is clicked on, the shape/text will apply the color of the swatch to it's Fill.

Color Theme

  • Creation: not supported in Design Space. (Currently Color Theme can be only created from the "Adobe Capture" app.)

  • Apply: If a shape/text layer is selected and the color swatch of a color asset is clicked on, the shape/text will apply the color of the swatch to it's Fill.

Character Style

  • Creation: If a text layer is selected, the "Add Character Style" icon at the bottom of the libraries panel will be active. Clicking the icon will create a new Character Style with the properties of font, color, size, and spacing.

  • Apply: If a text layer is selected and the user clicks the preview of a Character Style, the font, color, size, and leading will apply to this layer.

Layer Style

  • Creation: If a layer is selected that has effects applied to it, the "Add Layer Style" icon at the bottom of the libraries panel will be active. Clicking that will create a new Layer Style.

  • Apply: If a layer is selected that supports effects (i.e. text layer, shape layer), clicking the preview of a Layer Style will apply the effect(s) to that layer.

Graphic

  • Creation

    • When a layer is selected (except for Library-Linked smart object - LLSO, which is indicated by a cloud icon in the layers panel), the "Add Graphic" icon at the bottom of the libraries panel will be active. Clicking the icon will create a Graphic for the selected layer. After creating a new Graphic, if the selected layer is a smart object, it will turn into a Library-Linked smart object, and the icon should be disabled.
    • when multiple layers are selected, the "Add Graphic" icon will be active regardless whether there is Library-Linked smart object amongst them.
    • The user is also able to create a new graphic by dragging the selected layer(s) from the layers panel to the libraries panel. If there is only one selected layer and the layer is a Library-Linked smart object, a new graphic will not be created.
    • If the selection includes a LLSO, the Add Graphic icon will be greyed out (disabled).

  • Edit

    • Double clicking on a graphic's preview will open the graphic in a new document for edit. Changes to the document will be updated to the graphic when the document is saved. Only PSD is supported in Design Space.
      • If a Graphic is editable in Design Space, mouse over its preview will reveal tooltip text "Double click to edit". Otherwise, the text will be "Not editable in this app".
    • The user can also edit a graphic by double clicking the layer on the canvas or the layers panel (it must be a Library-Linked smart object).

  • Apply: The user is able to preview of a graphic, drag it to the canvas, and have the graphic be placed on the canvas as a new layer. This layer will take the name of the graphics and is a Library-Linked smart object, therefore will have the corresponding icon next to its name in the layers panel.

    • Alt/option + dragging an asset from Libraries onto the canvas will add the original asset (expanded with original layers if more than one). This places it as a non-LLSO.
Brush
  • Brush is not supported in Design Space. However, if the user's selected library contains brush, text "Brushes are not supported in Design Space" will be shown at the bottom of the asset list.

(1) Users are required to enter their Adobe credentials to access their Creative Cloud account if they haven't sign in.