File:  [mozdev] / journal / www / screenshots.html
Revision 1.6: download - view: text, annotated - select for diffs - revision graph
Thu Dec 9 17:50:30 2004 UTC (15 years, 4 months ago) by whiteley
Branches: MAIN
CVS tags: HEAD
fix some typos

    1: <!-- MAIN CONTENT -->
    2: <h5 class="page-header">Screenshots</h5>
    3: 
    4: <h4>Screenshots of Journal's user interface</h4>
    5: <p>
    6: These shots made in December 2004 are of an early prototype.
    7: Released versions may look different.
    8: </p>
    9: 
   10: <style type="text/css">
   11: h5 {margin-bottom:4px;}
   12: dl, dd {margin-left:2em;}
   13: dt {font-weight:bold;}
   14: </style>
   15: 
   16: <h5>Setup wizard</h5>
   17: <img class="screenshot" src="shot-wizard.png" alt="Setup wizard" width="507" height="395"/>
   18: <p>
   19: A very simple setup wizard runs the first time you start Journal.
   20: </p>
   21: 
   22: <p>
   23: It asks your name,
   24: and optionally creates some standard journals to get you started.
   25: </p>
   26: 
   27: 
   28: <h5>Journal's main window</h5>
   29: <img class="screenshot" src="shot-blank.png" alt="Journal window" width="722" height="497"/>
   30: <p>
   31: Journal's main window as it typically looks on startup,
   32: showing a list of your journals.
   33: Note that the Journals button on the toolbar is depressed.
   34: </p>
   35: 
   36: <p>
   37: Below the list there is a calendar, and the body
   38: of the window is blank.
   39: </p>
   40: 
   41: <p>
   42: Some startup options allow you to customize this.
   43: For example, Journal can automatically open today's
   44: entry when you start it up.
   45: </p>
   46: 
   47: <h5>The toolbars</h5>
   48: <img class="screenshot" src="shot-tool0.png" alt="Main toolbar" width="700" height="40"/>
   49: <p>
   50: Toolbars provide mouse users with quick access to some common operations:
   51: </p>
   52: 
   53: <p>
   54: Controlling the window layout:
   55: <dl>
   56: <dt>Hide Sidebar</dt><dd>Hides the sidebar, allowing the current entry to fill the window</dd>
   57: <dt>Hide Calendar</dt><dd>Hides the calendar, allowing the current view to fill the sidebar</dd>
   58: </dl>
   59: </p>
   60: 
   61: <p>
   62: Controlling the view in the sidebar:
   63: <dl>
   64: <dt>Journals</dt><dd>The view you see here, listing your journals.</dd>
   65: <dt>Diary</dt><dd>Entries in the current journal arranged by date (see below for a screenshot)</dd>
   66: <dt>Subject</dt><dd>Entries in the current journal arranged alphabetically by subject</dd>
   67: <dt>Index</dt><dd>Entries in the current journal arranged by keyword</dd>
   68: <dt>Category</dt><dd>Entries in the current journal arranged by category</dd>
   69: </dl>
   70: </p>
   71: 
   72: <p>
   73: Navigating between entries:
   74: <dl>
   75: <dt>Back</dt><dd>Backto the previous entry</dd>
   76: <dt>Forward</dt><dd>Forward again to the next entry (only after you press Back)</dd>
   77: <dt>Today</dt><dd>Today's entry</dd>
   78: <dt>Home</dt><dd>The current journal's front page</dd>
   79: </dl>
   80: </p>
   81: 
   82: <p>
   83: Working with an entry:
   84: <dl>
   85: <dt>New</dt><dd>Creates a new entry in the current journal</dd>
   86: <dt>Edit</dt><dd>Toggles edit mode on and off</dd>
   87: </dl>
   88: </p>
   89: 
   90: <p>
   91: Tools:
   92: <dl>
   93: <dt>Print</dt><dd>Print the current entry</dd>
   94: <dt>Help</dt><dd>Show the Help window</dd>
   95: </dl>
   96: </p>
   97: 
   98: <img class="screenshot" src="shot-tool1.png" alt="Journals toolbar" width="238" height="37"/>
   99: <p>
  100: The journals list (separate toolbar beneath the list):
  101: <dl>
  102: <dt>New</dt><dd>Creates a new journal</dd>
  103: <dt>Delete</dt><dd>Deletes the current journal (after conformation)</dd>
  104: <dt>Info</dt><dd>Opens the properties window for the current journal</dd>
  105: </dl>
  106: </p>
  107: 
  108: 
  109: <h5>Subject view with an entry open</h5>
  110: <img class="screenshot" src="shot-entry.png" alt="Subjects and open entry" width="722" height="497"/>
  111: <p>
  112: The sidebar shows the Subject view.
  113: Note that the subject button in the toolbar is depressed.
  114: </p>
  115: 
  116: <p>
  117: An entry is selected,
  118: and you see it displayed in the body of the window.
  119: </p>
  120: 
  121: <p>
  122: An Info button at the top right of the entry displays its meta-information&mdash;date last
  123: modified, categories, index keywords, etc.
  124: </p>
  125: 
  126: <h5>Diary view with an entry being edited</h5>
  127: <img class="screenshot" src="shot-edit.png" alt="Diary and editing" width="722" height="497"/>
  128: <p>
  129: Here the sidebar shows the Diary view.
  130: Note that the Diary button in the toolbar is depressed.
  131: </p>
  132: 
  133: <p>
  134: The Calendar is hidden.
  135: Note that the Hide Calendar button, second from left in the toolbar, is depressed.
  136: </p>
  137: 
  138: <p>
  139: An entry is being edited in the body of the window.
  140: Note that the Edit button in the toolbar is depressed.
  141: </p>
  142: 
  143: <p>
  144: The editing toolbar is shown disabled.
  145: Early versions of Journal will only support plain text,
  146: but later versions will support formatting and text decoration.
  147: </p>
  148: 
  149: 
  150: <h5>Preferences window: startup settings</h5>
  151: <img class="screenshot" src="shot-startup.png" alt="Preferences: Startup" width="572" height="450"/>
  152: <p>
  153: Some settings control how Journal starts up.
  154: </p>
  155: 
  156: <h5>Preferences window: password settings</h5>
  157: <img class="screenshot" src="shot-identity.png" alt="Preferences: Identity" width="572" height="450"/>
  158: <p>
  159: An interface for setting, changing or recovering your pass-phrase.
  160: </p>
  161: 
  162: <p>
  163: You do not have to set a pass-phrase at all.
  164: If you do set a pass-phrase, you can make entries private
  165: and choose various levels of protection for your private data.
  166: </p>
  167: 
  168: <h5>Journal properties: Information</h5>
  169: <img class="screenshot" src="shot-info.png" alt="Properties: Information" width="432" height="437"/>
  170: <p>
  171: Basic information about a journal.
  172: </p>
  173: 
  174: <p>
  175: This is what you see when you press the Info button beneath
  176: the journals list.
  177: </p>
  178: 
  179: 
  180: <h5>Journal properties: Appearance</h5>
  181: <img class="screenshot" src="shot-color.png" alt="Properties: Appearance" width="432" height="437"/>
  182: <p>
  183: Only background color is included in this prototype.
  184: Background image will be supported in later versions.
  185: Later still, fonts and perhaps stylesheets will be customizable.
  186: </p>
  187: 
  188: 
  189: <h5>Journal properties: Categories</h5>
  190: <img class="screenshot" src="shot-category.png" alt="Properties: Categories" width="432" height="437"/>
  191: <p>
  192: Interface for working with a journal's list of categories.
  193: </p>
  194: 
  195: 
  196: <h5>Journal properties: Schedule</h5>
  197: <img class="screenshot" src="shot-schedule.png" alt="Properties: Schedule" width="432" height="437"/>
  198: <p>
  199: Setting the schedule for a category.
  200: This one creates an entry every weekday from November to February every year.
  201: </p>
  202: 
  203: <p>
  204: Schedules do not have start or end dates in this prototype,
  205: but in released versions they probably will.
  206: </p>

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>