From 59af44574c3bc5d7e47dd1c92595580f4ae29ff7 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 23 Sep 2013 15:36:48 -0400
Subject: [PATCH] Studio: revises general layout/styling of import view and
 adds in detail progress feedback after import (WIP)

Studio: removes import progress bar HTML and Sass; hides import status by default

Studio: revises import file upload success copy; sets up showing/hiding states for import status and additional messages

Studio: revises iconography and adds in success step in import status feedback

Studio: adds hidden styling back into import status UI
---
 cms/static/sass/views/_import.scss | 336 ++++++++++++++++++-----------
 cms/templates/import.html          | 152 ++++++++++---
 2 files changed, 327 insertions(+), 161 deletions(-)

diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss
index 2e0e4a5e95..c0c0a44df7 100644
--- a/cms/static/sass/views/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -1,165 +1,241 @@
 // studio - views - course import
 // ====================
-@-webkit-keyframes opacity {
-    0% { opacity: 1; }
-    100% { opacity: 0; }
-}
-@-moz-keyframes opacity {
-    0% { opacity: 1; }
-    100% { opacity: 0; }
-}
-
 
 .view-import {
 
-  .import-overview {
-    @extend %ui-window;
-    @include clearfix;
-    padding: 30px 40px;
-  }
-
-  .description {
-    float: left;
-    width: 62%;
-    margin-right: 3%;
-    font-size: 14px;
-
-    h2 {
-      font-weight: 700;
-      font-size: 19px;
-      margin-bottom: 20px;
-    }
-
-    strong {
-      font-weight: 700;
-    }
-
-    p + p {
-      margin-top: 20px;
-    }
-  }
-
-  .import-form {
-    float: left;
-    width: 35%;
-    padding: 25px 30px 35px;
+  .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    border: 1px solid $mediumGrey;
-    border-radius: 3px;
-    background: $lightGrey;
-    text-align: center;
+    float: left;
+  }
 
-    h2 {
-      margin-bottom: 30px;
-      font-size: 26px;
-      font-weight: 300;
+  .content-primary {
+    width: flex-grid(9,12);
+    margin-right: flex-gutter();
+  }
+
+  .content-supplementary {
+    width: flex-grid(3,12);
+  }
+
+  // UI: import form
+  .import-form {
+    @include box-sizing(border-box);
+    @extend .ui-window;
+    padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
+
+    > .title {
+      @extend .t-title4;
     }
 
     .file-name-block,
     .error-block {
       display: none;
-      margin-bottom: 15px;
-      font-size: 13px;
+      margin-bottom: $baseline;
     }
 
     .error-block {
       color: $error-red;
     }
 
-    .status-block {
-      display: none;
-      font-size: 13px;
-    }
-
-    .choose-file-button {
-      @include blue-button;
-      padding: 10px 50px 11px;
-      font-size: 17px;
-    }
-
-    .choose-file-button-inline {
-      display: block;
-    }
-
     .file-input {
       display: none;
     }
+  }
 
+  // ====================
+
+  // UI: default
+  .action-choose-file {
+    @extend .btn-primary-blue;
+    @extend .t-action1;
+    display: block;
+    margin: $baseline 0;
+    padding: ($baseline*0.75) $baseline;
+  }
+
+  // ====================
+
+  // UI: elem - file selection
+  .wrapper-file-name {
+    @extend .ui-well;
+    margin: $baseline 0;
+    padding: $baseline ($baseline*1.5);
+    background-color: $gray-l4;
+
+    .title {
+      @extend .t-copy-lead1;
+      margin-bottom: ($baseline*0.75);
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+
+      .label {
+        margin-right: ($baseline/2);
+      }
+
+      .file-name {
+        font-weight: bold;
+      }
+    }
+
+    // artifact styling needed for current page behavior logic
     .submit-button {
-      @include orange-button;
+      @extend .btn-primary-green;
+      @extend .t-action1;
       display: none;
-      max-width: 100%;
-      padding: 8px 20px 10px;
-      white-space: normal;
+      width: 100%;
+      padding: ($baseline*0.75) $baseline;
     }
   }
 
+  // ====================
+
+  // UI: upload progress
+  .wrapper-status {
+    @include transition(opacity $tmg-f2 ease-in-out 0);
+    opacity: 1.0;
+
+    // STATE: hidden
+    &.is-hidden {
+      opacity: 0.0;
+      display: none;
+    }
+
+    > .title {
+      @extend .t-title4;
+      margin-bottom: $baseline;
+      border-bottom: 1px solid $gray-l3;
+      padding-bottom: ($baseline/2);
+    }
+    // elem - progress list
+    .list-progress {
+      width: flex-grid(9, 9);
+
+      .status-visual {
+        position: relative;
+        float: left;
+        width: flex-grid(1,9);
+
+        *[class^="icon-"] {
+          @include transition(opacity $tmg-f1 ease-in-out 0);
+          @include font-size(22);
+          position: absolute;
+          top: ($baseline/2);
+          left: $baseline;
+        }
+      }
+
+      .status-detail {
+        float: left;
+        width: flex-grid(8,9);
+        margin-left: ($baseline*3);
+
+        .title {
+          @extend .t-title5;
+          font-weight: 600;
+        }
+
+        .copy {
+          @extend .t-copy-base;
+          color: $gray-l2;
+        }
+      }
+
+      .item-progresspoint {
+        @include clearfix();
+        @include transition(opacity $tmg-f1 ease-in-out 0);
+        margin-bottom: $baseline;
+        border-bottom: 1px solid $gray-l4;
+        padding-bottom: $baseline;
+
+        &:last-child {
+          margin-bottom: 0;
+          border-bottom: none;
+          padding-bottom: 0;
+        }
+
+        // TYPE: success
+        &.item-progresspoint-success {
+
+        }
 
 
-  .progress-bar {
-    display: none;
-    width: 350px;
-    height: 30px;
-    margin: 30px auto 10px;
-    border: 1px solid $blue;
+        // STATE: not started
+        &.is-not-started {
+          opacity: 0.5;
 
-    &.loaded {
-      border-color: #66b93d;
+          .icon-warning-sign {
+            visibility: hidden;
+            opacity: 0.0;
+          }
 
-      .progress-fill {
-        background: #66b93d;
+          .icon-cog {
+            visibility: visible;
+            opacity: 1.0;
+          }
+
+          .icon-check {
+            opacity: 0.3;
+          }
+        }
+
+        // STATE: started
+        &.is-started {
+
+          .icon-warning-sign  {
+            visibility: hidden;
+            opacity: 0.0;
+          }
+
+          .icon-cog {
+            visibility: visible;
+            opacity: 1.0;
+          }
+        }
+
+        // STATE: completed
+        &.is-complete {
+
+          .icon-cog {
+            visibility: visible;
+            opacity: 1.0;
+          }
+
+          .icon-warning-sign {
+            visibility: hidden;
+            opacity: 0.0;
+          }
+
+          *[class^="icon-"] {
+            color: $green;
+          }
+
+          .status-detail .title {
+            color: $green;
+          }
+        }
+
+        // STATE: error
+        &.has-error {
+
+          .icon-cog {
+            visibility: hidden;
+            opacity: 0.0;
+          }
+
+          .icon-warning-sign {
+            visibility: visible;
+            opacity: 1.0;
+          }
+
+          *[class^="icon-"] {
+            color: $red;
+          }
+
+          .status-detail .title, .status-detail .copy {
+            color: $red;
+          }
+        }
       }
     }
   }
-
-  .progress-fill {
-    width: 0%;
-    height: 30px;
-    background: $blue;
-    color: #fff;
-    line-height: 48px;
-  }
 }
-
-div.status-info-block {
-    display: none;
-    text-align: left;
-}
-
-.not-started {
-  opacity: 0.4;
-}
-
-.not-started span {
-  display: none;
-}
-
-.done {
-  opacity: 0.7;
-}
-
-.done span {
-  display: none;
-}
-
-.in-progress span {
-  -webkit-animation-name: opacity;
-  -webkit-animation-duration: 1s;
-  -webkit-animation-iteration-count: infinite;
-
-  -moz-animation-name: opacity;
-  -moz-animation-duration: 1s;
-  -moz-animation-iteration-count: infinite;
-}
-
-.in-progress span:nth-child(2) {
-  -webkit-animation-delay: 300ms;
-  -moz-animation-delay: 300ms;
-}
-
-.in-progress span:nth-child(3) {
-  -webkit-animation-delay: 600ms;
-  -moz-animation-delay: 600ms;
-}
-
-
diff --git a/cms/templates/import.html b/cms/templates/import.html
index bd997ffcbe..be844ae0a8 100644
--- a/cms/templates/import.html
+++ b/cms/templates/import.html
@@ -17,45 +17,135 @@
   </header>
 </div>
 
-<div class="main-wrapper">
-  <div class="inner-wrapper">
-    <article class="import-overview">
-      <div class="description">
-        <p><strong>${_("Importing a new course will delete all content currently associated with your course and replace it with the contents of the uploaded file.")}</strong></p>
-        ## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated
-        <p>${_("File uploads must be gzipped tar files (.tar.gz) containing, at a minimum, a {filename} file.").format(filename='<code>course.xml</code>')}</p>
-        <p>${_("Please note that if your course has any problems with auto-generated {nodename} nodes, re-importing your course could cause the loss of student data associated with those problems.").format(nodename='<code>url_name</code>')}</p>
+<div class="wrapper-content wrapper">
+  <section class="content">
+    <article class="content-primary" role="main">
+
+      <div class="introduction">
+        <p>${_("You may import existing course structure and content into Studio.")}</p>
+
+          <p>${_("Importing is not something to take lightly as the course content you successfully upload will replace your current content and cannot be reversed. Please be certain you want to replace your course's content.")}</p>
       </div>
+
       <form id="fileupload" method="post" enctype="multipart/form-data"
           class="import-form" url="${reverse('import_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}">
-        <h2>${_("Course to import:")}</h2>
+
+        <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}" />
+
+        <h2 class="title">${_("Select a File (.tar.gz format) to Replace Your Course Content")}</h2>
+
         <p class="error-block"></p>
-        <a href="#" class="choose-file-button">${_("Choose File")}</a>
-        <p class="file-name-block"><span class="file-name"></span><a href="#" class="choose-file-button-inline">${_("change")}</a></p>
-        <input type="file" name="course-data" class="file-input" >
-        <input type="submit" value="${_('Replace my course with the one above')}" class="submit-button" >
-        <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
-        <div id="status-info-block" class="status-info-block">
-            <p class="status-info not-started">
-            <i class="icon-check-empty"></i> 
-            Unpacking
-            </p>
-            <p class="status-info not-started">
-            <i class="icon-check-empty"></i> 
-            Verifying
-            </p>
-            <p class="status-info not-started">
-            <i class="icon-check-empty"></i> 
-            Importing
-            </p>
+
+        <a href="#" class="action action-choose-file choose-file-button">${_("Choose File")}</a>
+
+        <div class="wrapper wrapper-file-name file-name-block">
+            <h3 class="title">
+              <span class="label">File Chosen:</span>
+              <span class="file-name"></span>
+            </h3>
+
+          <input type="file" name="course-data" class="file-input" />
+
+          <input type="submit" value="${_('Replace my course with the one above')}" class="submit-button" />
         </div>
-        <div class="progress-bar">
-          <div class="progress-fill"></div>
-          <div class="percent">0%</div>
+
+        <div class="wrapper wrapper-status is-hidden">
+          <h3 class="title">${_("Course Import Status")}</h3>
+
+          <ol class="status-progress list-progress">
+            <li class="item-progresspoint item-progresspoint-upload is-complete">
+              <span class="deco status-visual">
+                <i class="icon-cog"></i>
+                <i class="icon-warning-sign"></i>
+              </span>
+
+              <div class="status-detail">
+                <h3 class="title">${_("Uploading")}</h3>
+                <p class="copy">${_("Transferring your file to our servers")}</p>
+              </div>
+            </li>
+
+            <li class="item-progresspoint item-progresspoint-unpack is-started">
+              <span class="deco status-visual">
+                <i class="icon-cog icon-spin"></i>
+                <i class="icon-warning-sign"></i>
+              </span>
+
+              <div class="status-detail">
+                <h3 class="title">${_("Unpacking")}</h3>
+                <p class="copy">${_("Expanding and preparing folder/file structure")}</p>
+              </div>
+            </li>
+
+            <li class="item-progresspoint item-progresspoint-unpack has-error">
+              <span class="deco status-visual">
+                <i class="icon-cog"></i>
+                <i class="icon-warning-sign"></i>
+              </span>
+
+              <div class="status-detail">
+                <h3 class="title">${_("Unpacking")}</h3>
+                <p class="copy is-updated">${_("We're sorry something went wrong with the import of your course data. Please try again.")}</p>
+              </div>
+            </li>
+
+            <li class="item-progresspoint item-progresspoint-verify is-not-started">
+              <span class="deco status-visual">
+                <i class="icon-cog"></i>
+                <i class="icon-warning-sign"></i>
+              </span>
+
+              <div class="status-detail">
+                <h3 class="title">${_("Verifying")}</h3>
+                <p class="copy">${_("Reviewing semantics, syntax, and required data")}</p>
+              </div>
+            </li>
+
+            <li class="item-progresspoint item-progresspoint-import is-not-started">
+              <span class="deco status-visual">
+                <i class="icon-cog"></i>
+                <i class="icon-warning-sign"></i>
+              </span>
+
+              <div class="status-detail">
+                <h3 class="title">${_("Import Complete")}</h3>
+                <p class="copy">${_("Replacing previous course content with imported content")}</p>
+              </div>
+            </li>
+            <li class="item-progresspoint item-progresspoint-success is-not-started">
+              <span class="deco status-visual">
+                <i class="icon-check"></i>
+              </span>
+
+              <div class="status-detail">
+                <h3 class="title">${_("Success")}</h3>
+                <p class="copy">${_("Your imported content has now replaced all other course content")}</p>
+              </div>
+            </li>
+          </ol>
         </div>
       </form>
     </article>
-  </div>
+
+    <aside class="content-supplementary" role="complimentary">
+      <div class="bit">
+        <h3 class="title-3">${_("Current Content & Importing")}</h3>
+        <p>${_("Importing a new course will delete all content currently associated with your course and replace it with the contents of the uploaded file.")}</p>
+      </div>
+
+      <div class="bit">
+        <h3 class="title-3">${_("Gzipped Tar Files (.tar.gz) Only")}</h3>
+        ## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated
+        <p>${_("File uploads must be gzipped tar files (.tar.gz) containing, at a minimum, a {filename} file.").format(filename='<code>course.xml</code>')}</p>
+      </div>
+
+      <div class="bit">
+        <h3 class="title-3">${_("Warning: Auto-generated Nodes")}</h3>
+        ## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated
+        <p>${_("Please note that if your course has any problems with auto-generated {nodename} nodes, re-importing your course could cause the loss of student data associated with those problems.").format(nodename='<code>url_name</code>')}</p>
+      </div>
+    </aside>
+  </section>
 </div>
 </%block>