staging patterns

Author: Das,Tonima(todas)

guides/v2.1/pattern-library/bk-pattern.md

@@ -55,6 +55,11 @@ Browse the Design Pattern Library here:
 <a href="navigation/links/links.html">Links</a><br>
 <a href="navigation/wizard/wizard.html">Wizard</a><br>
 
+####Staging Patterns
+<a href="staging-patterns/TimelineDashboard/Timeline-Dashboard.html">Timeline Dashboard</a><br>
+<a href="staging-patterns/ScheduledChangesModule/module.html">Scheduled Update Module</a><br>
+
+
 
 ####Templates
 <a href="templates/address-form/address-form.html">Address Form</a><br>
@@ -65,6 +70,3 @@ Browse the Design Pattern Library here:
 <a href="general/accessibilityguideline/accessibilityGuideline.html">Accessibility Guidelines</a><br>
 
 
-
-
-

guides/v2.1/pattern-library/staging-patterns/ScheduledChangesModule/img/ee-only_large.png

@@ -0,0 +1,67 @@
+---
+layout: default
+group: pattern
+subgroup: Staging Patterns
+title: Magento Admin Pattern Library
+menu_title: Scheduled Update Module
+menu_order: 2
+menu_node: 
+github_link:pattern-library/staging-patterns/ScheduledChangesModule/module.md
+---
+<img src="img/ee-only_large.png">
+
+<h2> Scheduled Update Module </h2>
+
+<h3> Contents </h3>
+
+* <a href="#overview">Overview</a>
+* <a href="#when-to-use">When to Use / When Not to Use</a>
+* <a href="#examples">Interaction and Behavior</a>
+* <a href="#styling">Styling</a>
+* <a href="#assets">Assets</a>
+
+<h3 id="overview">Overview</h3>
+For all stage-able entities, a Scheduled Changes Module appears on the top of each entity’s page. An entity’s module provides a quick summary of scheduled updates, as well as controls to view, edit and preview individual updates. 
+
+
+
+<h3 id="when-to-use">When to Use / When Not to Use</h3>
+Use in places where a series of updates needs to be displayed, including a brief summary of their contents. 
+The scheduled changes module, as defined below, should only be used with stage-able entities. 
+
+<h3 id="examples">Interaction and Behavior</h3>
+
+####No Updates View:
+When no updates are available to be displayed on the timeline.
+
+<img src="img/sc-Module-empty.jpg">
+
+####Multiple Updates View:
+Shows when several updates are scheduled for a stage-able entity. 
+<img src="img/sc-Module-multiple updates.jpg">
+
+####Single Update View:
+When a single update is scheduled, the module’s default height is the same as the Multiple Updates View. Users can re-size the module, using the dragger at the bottom of the module.
+<img src="img/sc-Module-single update.jpg">
+
+####Loading More Updates:
+The “Load More” button appears at the bottom of the list of scheduled updates. By default, 5 scheduled updates are displayed. To view more, users can click “Load More” to add the next set of scheduled updates.  
+<img src="img/sc-Module-load more.jpg">
+
+
+<h3 id="styling">Styling</h3>
+
+####No Updates View:
+<img src="img/style-empty.jpg">
+
+####Single Update View - minimum height:
+<img src="img/style-min-ht.jpg">
+
+####Multiple Updates View style:
+<img src="img/styles-font.jpg">
+
+<h3 id="assets">Assets</h3>
+
+If you have questions about the Scheduled Update Module, please <a href="https://magento.com/company/contact-us">contact us.</a>
+
+<a href="src/Scheduled Changes Module Source.psd">Download Scheduled Update Module source</a>

guides/v2.1/pattern-library/staging-patterns/ScheduledChangesModule/img/sc-Module-empty.jpg

@@ -0,0 +1,108 @@
+---
+layout: default
+group: pattern
+subgroup: Staging Patterns
+title: Magento Admin Pattern Library
+menu_title: Timeline Dashboard
+menu_order: 1
+menu_node: 
+github_link: pattern-library/staging-patterns/TimelineDashboard/Timeline-Dashboard.md
+---
+<img src="img/ee-only_large.png">
+
+<h2> Timeline Dashboard </h2>
+
+<h3> Contents </h3>
+
+* <a href="#overview">Overview</a>
+* <a href="#when-to-use">When to Use / When Not to Use</a>
+* <a href="#terminology">Staging terminology and definitions</a>
+* <a href="#examples">Interaction and Behavior</a> 
+* <a href="#assets">Assets</a>
+
+<h3 id="overview">Overview</h3>
+This dashboard provides a page where events and processes can be viewed and managed in one place. <br>
+
+Staging usage: Within Magento, users need to see which stage-able entities are published or scheduled to be published. Since most of Magento’s entities can be staged – the display of all this information is important to show users the full scope of updates at a glance. 
+
+
+
+<h3 id="when-to-use">When to Use / When Not to Use</h3>
+Use when events and processes need to be displayed sequentially, along a timeline, and when multiple items are combined in one view. Example: Scheduled updates on staging. <br>
+Do not use a timeline as an alternative display mode for tree, card or data table views. 
+
+<h3 id="terminology">Staging terminology and definitions</h3>
+
+#### Stage-able entity:
+A part of Magento that can be scheduled to change, within an update. Examples: Products, Categories<br>
+
+#### Update:
+A combination of changes to a stage-able entity. Multiple updates are shown on the staging timeline. An update’s state is either completed, active or scheduled to be activated.Most updates are scheduled for a temporary span of time, but some can be permanent. <br>
+
+#### Objects: 
+These are the individual changes contained within an update.<br>
+
+
+
+<h3 id="examples">Interaction and Behavior</h3>
+
+#### What markers mean on timeline:
+
+
+<img src="img/Staging_Dashboard_0006_timeline_notes.jpg">
+<br>
+
+1. “Past” link in header of timeline is a link to the Change Log, a list of past updates, including both those with end dates and ‘permanent’ updates (without end dates). 
+
+2. ‘Permanent’ updates are collected in an Active Permanent Updates bar that appears at the top pf the timeline. This bar should display a # of updates relative to the “From” date set for the timeline. This text is a link that leads to a Change Log that only contains the Permanent Updates, unlike the change log associated with the “Past” link.
+
+3. The control to move the time line to the left is disabled when the “Past” column is in view. Once the timeline is scrolled to see upcoming events the control becomes active.
+
+4. The user can scroll the timeline to see upcoming updates by tapping the arrow on an update, scolling the timeline with scroll control, or the right arrow.
+
+
+
+#### Update schedule:
+As the default state, this view shows completed, active and scheduled updates on the dashboard. The timeline’s default date range is 1 week, which can be changed and customized.Updates are displayed in chronological order, with the most recent start date on top. 
+<img src="img/Updates-Scheduled.jpg">
+
+#### Update Summary, in Overlay Window:
+When clicked, a bar on the timeline spawns an overlay window, showing a summary of the objects contained in the update.  The window includes controls to edit or preview the update.
+<img src="img/Timeline-Dashboard-summary.jpg">
+
+#### 4-Week Zoom Control:
+A slider control at the bottom of the page allows users to zoom out from 1 week to 4 weeks, viewing a bigger timeline of updates.
+<img src="img/4-week-zoom.jpg">
+
+#### “Load More” Control:
+On the default timeline view, the number of updates displayed is set to 10. Clicking “Load More” adds more updates on the timeline. A grid menu control changes the number of items displayed per page. 
+<img src="img/load-more.jpg">
+
+#### Horizontal Scrolling for Future Updates:
+A horizontal scrollbar at the bottom of the timeline provides the capability to view future updates that do not fit inside the span of the page. This scrollbar is usually not displayed.
+<img src="img/scrolled-to-future.jpg">
+
+#### Prioritized Timeline View, with Drag and Drop:
+This is a variation of the timeline. This view only appears when stage-able entities on the timeline need to be ordered by priority. In the example displayed below – the priority scale has been used to display the sort order of the rules. To re-arrange the order, an item on the timeline can be dragged and moved.
+<img src="img/priority-schedule.jpg">
+
+#### Data Table View:
+This is an alternative view to the timeline in data table format. The functionalities of the timeline and the data table are consistent except for the pagination feature, which is used for data table view only.
+<img src="img/table-view.jpg">
+
+
+
+<h3 id="styling">Styling</h3>
+
+####Updates schedule:
+<img src="img/styles/style_staging_dashboard.jpg">
+
+####Update Summary, in Overlay Window:
+<img src="img/styles/style-summary.jpg">
+
+
+<h3 id="assets">Assets</h3>
+
+If you have questions about the Timeline Dashboard, please <a href="https://magento.com/company/contact-us">contact us.</a>
+
+<a href="src/timeline-dashboard.psd">Download Timeline Dashboard source</a>