Difference between revisions of "Refreshed User Interface for OnePager 7.0"

From OnePager Documentation
Jump to: navigation, search
(Related Links)
 
Line 1: Line 1:
 
==Refreshed User Interface==
 
==Refreshed User Interface==
  
1) Version 7.0 of OnePager underwent a face lift.  We decided to modernized the look and feel of the '''Chart Editor''', its '''Tool Bar Tabs''', all major forms, buttons, and icons.
+
Version 7.0 of OnePager underwent a face lift.  We decided to modernized the look and feel of the '''Chart Editor''', its '''Tool Bar Tabs''', all major forms, buttons, and icons. Along the way there were some reconfiguration of feature controls. For instance, on the OnePager 7.0 '''Home''' ribbon tool bar tab the individual '''Label Position''' buttons, which were small and difficult to read, are replaced with a single '''icon''' that provides a dropdown menu listing all '''label position''' options. In the process of re-configuring the '''Positions''' control group on the '''Home''' ribbon tool bar tab, and in conjunction '''Smart Text Optimization''' feature, there are three additional '''label position''' options:
  
2) Along the way there were some reconfiguration of feature controls.
+
:* Best fit all directions
 
+
:* Best fit above/below  
3) For instance, on the OnePager 7.0 '''Home''' ribbon tool bar tab the individual '''Label Position''' buttons, which were small and difficult to read, are replaced with a single '''icon''' that provides a dropdown menu listing all '''label position''' options.
+
:* Legacy best fit
 
+
4) In the process of re-configuring the '''Positions''' control group on the '''Home''' ribbon tool bar tab, and in conjunction '''Smart Text Optimization''' feature, there are three additional '''label position''' options
+
 
+
:a) Best fit all directions
+
 
+
:b) Best fit above/below  
+
 
+
:c) Legacy best fit
+
  
 
===New Look to the OnePager Chart View Editor===
 
===New Look to the OnePager Chart View Editor===
  
5) The look of the new '''Chart Editor''' changed slightly with the addition of a new '''border color''' scheme, new '''icons''' for the ribbon tool bar tabs, and reorganization of some controls to make them easier to use as shown below:
+
The look of the new '''Chart Editor''' changed slightly with the addition of a new '''border color''' scheme, new '''icons''' for the ribbon tool bar tabs, and reorganization of some controls to make them easier to use as shown below:
  
 
<center>[[File:P70-0_4_3-70-(1)-04272020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(1)-04272020.png]]</center>
 
<center><P70-0_4_3-70-(1)-04272020.png></center>
 
<center><P70-0_4_3-70-(1)-04272020.png></center>
  
6) As further examples, below are illustrations of the revised '''Insert''', '''Page Layout''', and '''Data''' ribbon tool bar tabs on the '''Chart Editor''':
+
As further examples, below are illustrations of the revised '''Insert''', '''Page Layout''', and '''Data''' ribbon tool bar tabs on the '''Chart Editor''':
  
:a) '''Home''' Ribbon Tool Bar Tab:
+
'''Home''' Ribbon Tool Bar Tab:
  
 
<center>[[File:P70-0_4_3-70-(2)-04272020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(2)-04272020.png]]</center>
 
<center><P70-0_4_3-70-(2)-04272020.png></center>
 
<center><P70-0_4_3-70-(2)-04272020.png></center>
  
:b) '''Insert''' Ribbon Tool Bar Tab:
+
'''Insert''' Ribbon Tool Bar Tab:
  
 
<center>[[File:P70-0_4_3-70-(3)-04272020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(3)-04272020.png]]</center>
 
<center><P70-0_4_3-70-(3)-04272020.png></center>
 
<center><P70-0_4_3-70-(3)-04272020.png></center>
  
:c) '''Page Layout''' Ribbon Tool Bar Tab:
+
'''Page Layout''' Ribbon Tool Bar Tab:
  
 
<center>[[File:P70-0_4_3-70-(3A)-08282020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(3A)-08282020.png]]</center>
 
<center><P70-0_4_3-70-(3A)-08282020.png></center>
 
<center><P70-0_4_3-70-(3A)-08282020.png></center>
  
:d) '''Data''' Ribbon Tool Bar Tab:
+
'''Data''' Ribbon Tool Bar Tab:
  
 
<center>[[File:P70-0_4_3-70-(4)-04272020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(4)-04272020.png]]</center>
 
<center><P70-0_4_3-70-(4)-04272020.png></center>
 
<center><P70-0_4_3-70-(4)-04272020.png></center>
  
:e) '''View''' Ribbon Tool Bar Tab:
+
'''View''' Ribbon Tool Bar Tab:
  
 
<center>[[File:P70-0_4_3-70-(5)-04272020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(5)-04272020.png]]</center>
Line 51: Line 43:
 
===New Look to OnePager Forms===
 
===New Look to OnePager Forms===
  
7) With respect to the new design of OnePager 7.0's forms, the most used are the '''Template Properties''' and '''Chart Properties''' forms.   
+
With respect to the new design of OnePager 7.0's forms, the most used are the '''Template Properties''' and '''Chart Properties''' forms.  These two forms are very similar so the illustrations below are from the '''Chart Properties''' form's various tabs.  Since OnePager 7.0 has new '''capabilities, features, and enhancements''', additions, changes, and some reorganization of the controls on the various '''Chart Properties''' and '''Template Properties''' form's tabs were made and are explained in various articles in this Wiki.  Three '''Chart Properties''' form tabs are illustrated below:
  
8) These two forms are very similar so the illustrations below are from the '''Chart Properties''' form's various tabs. 
+
'''Chart Properties''' Form - '''Main''' Tab:
 
+
9) Since OnePager 7.0 has new '''capabilities, features, and enhancements''', additions, changes, and some reorganization of the controls on the various '''Chart Properties''' and '''Template Properties''' form's tabs were made and are explained in various articles in this Wiki. 
+
 
+
10) Three '''Chart Properties''' form tabs are illustrated below:
+
 
+
:a) '''Chart Properties''' Form - '''Main''' Tab:
+
  
 
<center>[[File:P70-0_4_3-70-(6)-04272020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(6)-04272020.png]]</center>
 
<center><P70-0_4_3-70-(6)-04272020.png></center>
 
<center><P70-0_4_3-70-(6)-04272020.png></center>
  
:b) '''Chart Properties''' Form - '''Rows/Swimlanes''' Tab:
+
'''Chart Properties''' Form - '''Rows/Swimlanes''' Tab:
  
 
<center>[[File:P70-0_4_3-70-(6-1)-04272020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(6-1)-04272020.png]]</center>
 
<center><P70-0_4_3-70-(6-1)-04272020.png></center>
 
<center><P70-0_4_3-70-(6-1)-04272020.png></center>
  
:c) '''Chart Properties''' Form - '''Task Bars''' Tab:
+
'''Chart Properties''' Form - '''Task Bars''' Tab:
  
 
<center>[[File:P70-0_4_3-70-(7-2)-08282020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(7-2)-08282020.png]]</center>
 
<center><PP70-0_4_3-70-(7-2)-08282020.png></center>
 
<center><PP70-0_4_3-70-(7-2)-08282020.png></center>
  
:d) '''Chart Properties''' Form - '''Advanced''' Tab:
+
'''Chart Properties''' Form - '''Advanced''' Tab:
  
 
<center>[[File:P70-0_4_3-70-(8A)-08282020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(8A)-08282020.png]]</center>
 
<center><P70-0_4_3-70-(8A)-08282020.png></center>
 
<center><P70-0_4_3-70-(8A)-08282020.png></center>
  
11) Our goal is to standardize the look of these forms so your experience with OnePager 7.0 is consistent.   
+
Our goal is to standardize the look of these forms so your experience with OnePager 7.0 is consistent.  Along those lines, sub-forms, accessed from '''Chart Properties''' form's tabs and their buttons are kept simple as shown in the example below of the '''Set Label Properties''' form which is '''enhanced''' with the controls supporting the '''Smart Task/Milestone Text Labeling''' feature:
 
+
12) Along those lines, sub-forms, accessed from '''Chart Properties''' form's tabs and their buttons are kept simple as shown in the example below of the '''Set Label Properties''' form which is '''enhanced''' with the controls supporting the '''Smart Task/Milestone Text Labeling''' feature:
+
  
 
<center>[[File:P70-0_4_3-70-(9)-04272020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(9)-04272020.png]]</center>
 
<center><P70-0_4_3-70-(9)-04272020.png></center>
 
<center><P70-0_4_3-70-(9)-04272020.png></center>
  
13) Forms that are accessed from within the '''Chart Editor''' are also redesigned. For example, the '''Change Task/Milestone Properties''' form, shown below, is accessed from the '''task bar''' right-click '''context menu's Format... command.
+
Forms that are accessed from within the '''Chart Editor''' are also redesigned. For example, the '''Change Task/Milestone Properties''' form, shown below, is accessed from the '''task bar''' right-click '''context menu's Format... command.
  
 
<center>[[File:P70-0_4_3-70-(10)-04272020.png]]</center>
 
<center>[[File:P70-0_4_3-70-(10)-04272020.png]]</center>
 
<center><P70-0_4_3-70-(10)-04272020.png></center>
 
<center><P70-0_4_3-70-(10)-04272020.png></center>
  
14) '''Dropdown menus''' and '''Context Menus''' also maintain the same simplicity of look and feel consistent with the example sub-form shown above.
+
'''Dropdown menus''' and '''Context Menus''' also maintain the same simplicity of look and feel consistent with the example sub-form shown above. Implementation of new '''capabilities, features, and enhancements''' required some additions and changes to commands in some '''Context Menus'''.
 
+
15) Implementation of new '''capabilities, features, and enhancements''' required some additions and changes to commands in some '''Context Menus'''.
+
  
 
==Related Links==
 
==Related Links==

Latest revision as of 16:16, 30 December 2020

Refreshed User Interface

Version 7.0 of OnePager underwent a face lift. We decided to modernized the look and feel of the Chart Editor, its Tool Bar Tabs, all major forms, buttons, and icons. Along the way there were some reconfiguration of feature controls. For instance, on the OnePager 7.0 Home ribbon tool bar tab the individual Label Position buttons, which were small and difficult to read, are replaced with a single icon that provides a dropdown menu listing all label position options. In the process of re-configuring the Positions control group on the Home ribbon tool bar tab, and in conjunction Smart Text Optimization feature, there are three additional label position options:

  • Best fit all directions
  • Best fit above/below
  • Legacy best fit

New Look to the OnePager Chart View Editor

The look of the new Chart Editor changed slightly with the addition of a new border color scheme, new icons for the ribbon tool bar tabs, and reorganization of some controls to make them easier to use as shown below:

P70-0 4 3-70-(1)-04272020.png
<P70-0_4_3-70-(1)-04272020.png>

As further examples, below are illustrations of the revised Insert, Page Layout, and Data ribbon tool bar tabs on the Chart Editor:

Home Ribbon Tool Bar Tab:

P70-0 4 3-70-(2)-04272020.png
<P70-0_4_3-70-(2)-04272020.png>

Insert Ribbon Tool Bar Tab:

P70-0 4 3-70-(3)-04272020.png
<P70-0_4_3-70-(3)-04272020.png>

Page Layout Ribbon Tool Bar Tab:

P70-0 4 3-70-(3A)-08282020.png
<P70-0_4_3-70-(3A)-08282020.png>

Data Ribbon Tool Bar Tab:

P70-0 4 3-70-(4)-04272020.png
<P70-0_4_3-70-(4)-04272020.png>

View Ribbon Tool Bar Tab:

P70-0 4 3-70-(5)-04272020.png
<P70-0_4_3-70-(5)-04272020.png>

New Look to OnePager Forms

With respect to the new design of OnePager 7.0's forms, the most used are the Template Properties and Chart Properties forms. These two forms are very similar so the illustrations below are from the Chart Properties form's various tabs. Since OnePager 7.0 has new capabilities, features, and enhancements, additions, changes, and some reorganization of the controls on the various Chart Properties and Template Properties form's tabs were made and are explained in various articles in this Wiki. Three Chart Properties form tabs are illustrated below:

Chart Properties Form - Main Tab:

P70-0 4 3-70-(6)-04272020.png
<P70-0_4_3-70-(6)-04272020.png>

Chart Properties Form - Rows/Swimlanes Tab:

P70-0 4 3-70-(6-1)-04272020.png
<P70-0_4_3-70-(6-1)-04272020.png>

Chart Properties Form - Task Bars Tab:

P70-0 4 3-70-(7-2)-08282020.png
<PP70-0_4_3-70-(7-2)-08282020.png>

Chart Properties Form - Advanced Tab:

P70-0 4 3-70-(8A)-08282020.png
<P70-0_4_3-70-(8A)-08282020.png>

Our goal is to standardize the look of these forms so your experience with OnePager 7.0 is consistent. Along those lines, sub-forms, accessed from Chart Properties form's tabs and their buttons are kept simple as shown in the example below of the Set Label Properties form which is enhanced with the controls supporting the Smart Task/Milestone Text Labeling feature:

P70-0 4 3-70-(9)-04272020.png
<P70-0_4_3-70-(9)-04272020.png>

Forms that are accessed from within the Chart Editor are also redesigned. For example, the Change Task/Milestone Properties form, shown below, is accessed from the task bar right-click context menu's Format... command.

P70-0 4 3-70-(10)-04272020.png
<P70-0_4_3-70-(10)-04272020.png>

Dropdown menus and Context Menus also maintain the same simplicity of look and feel consistent with the example sub-form shown above. Implementation of new capabilities, features, and enhancements required some additions and changes to commands in some Context Menus.

Related Links

Editing with the Chart Properties form (Portal) 21.0.1-70

Modifying Decorations on Tasks/Milestones (Portal) 10.0.1-70

Task Shape Name Labels for OnePager Pro 10.15.1.-70

Task/Milestone Labels for OnePager Express 10.16.1.-70

Labeling Task/Milestone Dates for OnePager Pro 10.1.1-70

Labeling Task/Milestone Dates for OnePager Express 10.2.1-70

Percent complete for OnePager Pro 10.3.1-70

Percent complete for OnePager Express 10.4.1-70

Order of Tasks/Milestones Decorations 10.13.1-70

Task Shape Name Labels for OnePager Express 10.16.1.-70

Task Bars Tab for OnePager Pro 21.3.1-70

Task Bars Tab for OnePager Express 21.4.1-70

Milestones Tab for OnePager Pro 21.5.1-70

Milestones Tab for OnePager Express 21.6.1-70

(0.4.3-70)