UI: Producer page

Context

Once you have created a book from the Lulu dashboard (either through the import flow or start writing your book flow) you will fill out the book title. Once you click continue on the title page you will be taken to the producer page.

Design

The mockup below can be seen on Figma here.

On the producer page we need:

1. Top bar (will be done via a separate issue)

The app generated bar includes:

1.1 A link to the dashboard
1.2 An 'Invite' button which will open a share modal (separate issue pending for the share modal)
1.3 A 'Preview' button which will open a preview (separate issue pending for the preview)
1.4 The avatar of the user's account (can wait until authentication path is agreed, can use placeholder for now)

2. The Wax toolbar

The tools required include:

2.1 undo/redo
2.2 style drop down menu (Heading 1 (title), Heading 2, Heading 3, Normal text)
2.3 both numbered and unnumbered list buttons with indent and outdent
2.4 blockquote
2.5 image
2.6 link
2.7 bold
2.8 Italic
2.9 underline
2.10 special characters
2.11 search and replace menu
2.12 A way to focus on the page by collapsing the top bar and left bar so that the only bar remaining at the top is this toolbar (we need to use the standard Ketida Full screen and Exit full screen icons for this)

3. The left panel

3.1 A way to focus on the page by collapsing the left bar (this can wait because the design is still being finalised for that) (3.1 is included in 2.12 above via one button).
3.2 The book title
3.3 A way to upload/import new chapters (the upload cloud icon)
3.4 A way to add new blank chapters (the plus icon)
3.5 The name of the list 'Chapters'
3.6 The chapter list, which includes:

• if you imported files at the import files step, they display in the chapter list when you arrive in the producer page and remain there unless deleted
• if you add or import new files or duplicate a file the new file(s) appear at the bottom of the chapter list
• when a chapter is locked (being worked on by someone else) that person's avatar displays next to the chapter name
• when you click the dots on the right of each chapter name you can duplicate or delete a chapter via the dropdown menu that appears
• files can be reordered in the chapter list by dragging on the six dots that appear on the left of a chapter name (or by long-press and drag on tablets and mobiles). The drag and drop interaction UI is shown below.

Archive: Click to expand

# Lulu Editor page

Context

Once you have created a book from the Lulu dashboard (either through the import flow or start writing your book flow) you will fill out the book title. Once you click continue on the Title page you will be taken to the editor.

On the editor we need:

1. The book title
2. A way to upload new chapters
3. A way to add new blank chapters
4. A list of existing chapters
5. Avatars next to existing chapters showing who is working on each chapter
6. A way to invite someone to work on the current chapter
7. A way to preview the current chapter
8. Wax tools to format text in the current chapter
9. A top bar that introduces consistency on the site by always having your username and avatar on the top-right
10. A button leading back, which on this page, is linked to the dashboard and says 'Dashboard'

Proposal

The current design is as follows

The rough proposed design is shown below

In the proposed design the header bar includes the username and avatar for consistency on the site, and is always separate to the editor-specific tools like the toolbar and invite and preview buttons (since those apply to the editor page only).

In terms of interaction, text doesn't scroll behind the top bar or toolbar so that the editor has a clean dedicated workspace for text. The toolbar doesn't disappear when scrolling because every time you select some text it's going have to appear again, making it bit annoying for users to have a box flashing, showing and hiding itself all the time, it is also the most efficient solution that we could refine later if it becomes desirable after UX testing.

Implementation (if applicable)

[A description of the steps to implement the feature.]

Alternative approaches (if applicable)

[Include any alternatives to meet this use case.]

Open issues (if applicable)

[Links to and a discussion of related issues, if applicable.]