Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 0b734038 authored by Dirk Dougherty's avatar Dirk Dougherty
Browse files

Doc change: Design guidelines update.

Change-Id: Id37c0bfc1fe7e2c7156aab0ec85df123534c8c96
Bug-id: 11252971 11256762 11256765 11257156 11257769 11276296 11293924 11324992
parent e44fce31
Loading
Loading
Loading
Loading
+2 −8
Original line number Diff line number Diff line
@@ -54,14 +54,8 @@ page.tags="progressbar","download","network"
        <p>In this example, an activity circle (in Holo Light) is used in the Gmail application when a message is being loaded because it's not possible to determine how long it will take to download the email.</p>
        <p>When displaying an activity circle, do not include text to communicate what the app is doing. The moving circle alone provides sufficient feedback about the delay, and does so in an understated way that minimizes the impact.</p>
        <p>
        <div class="layout-content-col span-3" style="margin-left:0">
          <div class="do-dont-label bad">Don't</div>
          <img src="{@docRoot}design/media/progress_activity_dont.png">
        </div>
      
        <div class="layout-content-col span-3">
          <div class="do-dont-label good">Do</div>
          <img src="{@docRoot}design/media/progress_activity_do.png">
        <div style="margin-left:0;margin-top:1em;">
          <img src="{@docRoot}design/media/progress_activity_do_dont.png">
        </div>
        </p>
      </li>
+2 −2
Original line number Diff line number Diff line
@@ -8,7 +8,7 @@ scrolling speed is proportional to the speed of the gesture.</p>

<p>Appears during scrolling to indicate what portion of the content is currently in view.</p>

<div class="framed-galaxynexus-land-span-13">
<div class="framed-nexus5-land-span-13">
  <video class="play-on-hover" autoplay>
    <source src="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4">
    <source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm">
@@ -26,7 +26,7 @@ to quickly navigate to the items that begin with a particular letter. With index
indicator appears even when the user isn't scrolling. Touching or dragging it causes the current
letter to pop up in a prominent way.</p>

<div class="framed-galaxynexus-land-span-13">
<div class="framed-nexus5-land-span-13">
  <video class="play-on-hover" autoplay>
    <source src="{@docRoot}design/media/scroll_index.mp4" type="video/mp4">
    <source src="{@docRoot}design/media/scroll_index.webm" type="video/webm">
+1 −12
Original line number Diff line number Diff line
@@ -35,7 +35,7 @@ to the next/previous view, swipe left or right.</p>
    </video>
    <div class="figure-caption">
      Scrolling tabs in the Play Store app.
      <div class="video-instructions">&nbsp;</div>
      <div class="video-instructions-image">&nbsp;</div>
    </div>

  </div>
@@ -55,14 +55,3 @@ to the next/previous view, swipe left or right.</p>
<div class="figure-caption">
  Tabs in the Google Play Movies app.
</div>



<h2 id="stacked">Stacked Tabs</h2>


<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This
permits fast view switching even on narrower screens.</p>

<img src="{@docRoot}design/media/tabs_stacked.png">
+2 −0
Original line number Diff line number Diff line
@@ -19,6 +19,7 @@
      <li><a href="<?cs var:toroot ?>design/style/typography.html">Typography</a></li>
      <li><a href="<?cs var:toroot ?>design/style/color.html">Color</a></li>
      <li><a href="<?cs var:toroot ?>design/style/iconography.html">Iconography</a></li>
      <li><a href="<?cs var:toroot ?>design/style/branding.html">Your Branding</a></li>
      <li><a href="<?cs var:toroot ?>design/style/writing.html">Writing Style</a></li>
    </ul>
  </li>
@@ -34,6 +35,7 @@
      <li><a href="<?cs var:toroot ?>design/patterns/navigation-drawer.html">Navigation Drawer</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/fullscreen.html">Full Screen</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/confirming-acknowledging.html">Confirming &amp; Acknowledging</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li>
+2 −2
Original line number Diff line number Diff line
@@ -102,9 +102,9 @@ requirements of UI and high-resolution screens.</p>

<p>
  <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);"
    href="{@docRoot}downloads/design/roboto-1.100141.zip">Roboto</a>
    href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a>
  <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specemin Book']);"
    href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
    href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a>
</p>

  </div>
Loading