CodeReview. UI prototype creation

Screen1: Author creates Review Topic (or Review Topic)
1. Author enters title (mandatory)

2. Author can invite reviewers (arbitrary)

• Text "Invite reviewers" is displayed on mouseover
• Dialog "Invite reviewers" is opened one on left click (Something like Jira dialog for labels)
• email to every user from invited reviewer list is sent when review topic is publiched

3. Author uploads file (mandatory)

• Only one file can be uploaded
• Author can upload another file, 1st one will be removed

4. Author can:

• Publish code (or Save)
• Preview code -> Content of uploaded file is displayed with formatting
• Discard changes

Screen2: "Review Topic" page
1. Title

2. List of invited reviewers

• Text "Invited reviewers" is displayed on mouseover
• Click is not possible

3. Topic Review actions, are displayed to user depending on branch permissions

• "Review" is displayed to all registered users

4. Author's info (the same as in Topic)

5. Topic Review header (differs from Topic)

• Filename+extention is displayed
• Quote link is removed (simple answer is not allowed)

6. Code is displayed formatted and numbered

Screen3: Reviewer clicked "review" and adds comments to reviewed code
1. Info about reviewed code is displayed to reviewer

2. Reviewer can:

• Publish reviewed code (or Save)
• Discard changes

3. Reviewer clicks on any row for commenting

• Row becomes selected
• Comment form appears with predefined text "You wrote: "
• Reviewer can finish commenting by click green icon
• Reviewer can delete comment by click red cross

4. Commented row and finished comment are displayed selected on the page

• Reviewer can enter to edit comment form by double click the text

Screen4: Review is displayed on the Review topic page below the initial topic
1. Review header (differs from answer)

• Filename+extention is displayed
• Quote link is removed (simple answer is not allowed)
• Rating block allow:
  • Rate review up
  • Rate review down
  • See current counter
• Initial review rating = 0
  • If review counter is 0, the "down" action is disabled

2. Commented row and finished comment are displayed selected on the page

• User can collapse/expand comments block by click cross icon (default expanded)
• Comments are plain listed (no tree)

3. User can comment selected and commented row by click comment icon

• Comment form appears with predefined text "You wrote: "
• Reviewer can finish commenting by click green icon
• Reviewer can delete comment by click red cross