Design
 Completed
  • Open XWIKI-1460 Edit area should resize vertically with window height
  • Open XWIKI-13793 Have an option to edit directly in full screen mode
  • Closed XWIKI-14162 Position Save buttons on a fixed-bottom area
  • Closed XWIKI-14267 Compact and reorder save buttons and options
  • Closed XWIKI-10786 The "Autosave" button would look better if centered
 
 

Description

Requirement

 Save button more visible

Need

  • C: The Save button is not always visible when editing and people need to scroll to find it
  • More problematic on wikis that also use Menu App, since their vertical space is reduced (no matter the default values) and the save are on scroll
  • O: The user doesn't see the SAVE button while editing
  • O: he doesn't understand he must scroll to find the Save button
  • O: when memorised where it is located, not easy to reach because of the textarea zone, you have to circumvent this zone by the right
  • O: Edit and save button belong to the same category. they're not at in the same sector, this is kind of confusing

Other

  • Only 1 Save button: combine "Save & Continue" and "Save & View" inside a dropdown
  • O: Remove "Version Summary" or CkEditor bottom space since it's not used and takes space. Preview also not needed

Solutions

Solution 1

  • Adjust the height of the editor

Solution 1.1

  • Reduce the height of the editor area. Currently CkEditor is using 500px.

Solution 1.2

  • Open XWIKI-1460 Edit area should resize vertically with window height

Solution 2

  • Change the position of the save buttons to top, instead of bottom in order to be more visible
  • Save near the Edit buttons

Solution 3

  • Create a fixed-bottom area for buttons in edit mode that doesn't change position
    • Closed XWIKI-14162 Position Save buttons on a fixed-bottom area

Variants

Before
before.png

After
after.png

Changes: 

  • Make the buttons visible when they are out of viewport  
  • When the user scrolls down, the bar goes into its place
  • Compress the bottom buttons in a bar that looks like is part of the editor
  • Integrate all the functionality in a single row
    • Have Preview just for Syntax editor
  • Adapt for FullScreen and Mobile views

Var A
varA.png

Var B
varB.png

Var C
varC.png

Proposal 9.x

proposal9xCK.png

Proposal 10.x

  • Make the buttons visible in a fixed bottom bar
  • Integrate all functionality on a single row 
  • Problematic:
    • Responsive 
    • Inline mode (current, full width or just content width?)
  • Carefull on:
    • Full Screen mode
    • Objects and Class edit modes
    • Cross browser
    • Styling between edit modes

Before
before10.png

After


 

Tags:
Created by Ecaterina Moraru (Valica) on 2017/03/30 09:22
    

Get Connected