Merge pull request #580 from hypothesis/onboarding

Add config option to display a clean onboarding look to users.

src/annotator/config/index.js

@@ -23,6 +23,7 @@ function configFrom(window_) {
     disableToolbarHighlightsBtn: settings.hostPageSetting('disableToolbarHighlightsBtn'),
     disableToolbarNewNoteBtn: settings.hostPageSetting('disableToolbarNewNoteBtn'),
     disableBucketBar: settings.hostPageSetting('disableBucketBar'),
+    enableCleanOnboardingTheme: settings.hostPageSetting('enableCleanOnboardingTheme'),
     enableExperimentalNewNoteButton: settings.hostPageSetting('enableExperimentalNewNoteButton'),
     enableSidebarDropShadow: settings.hostPageSetting('enableSidebarDropShadow'),
     theme: settings.hostPageSetting('theme'),

src/sidebar/components/sidebar-tutorial.js

@@ -1,7 +1,9 @@
 'use strict';
 
 // @ngInject
-function SidebarTutorialController(session) {
+function SidebarTutorialController(session, settings) {
+  this.cleanOnboardingThemeEnabled = settings.enableCleanOnboardingTheme;
+
   this.showSidebarTutorial = function () {
     if (session.state.preferences) {
       if (session.state.preferences.show_sidebar_tutorial) {

src/sidebar/components/svg-icon.js

@@ -11,6 +11,7 @@
 // The list of supported icons
 var icons = {
   refresh: require('../../images/icons/refresh.svg'),
+  cursor: require('../../images/icons/cursor.svg'),
 };
 
 // @ngInject

src/sidebar/components/test/sidebar-tutorial-test.js

@@ -5,6 +5,8 @@ var Controller = require('../sidebar-tutorial').controller;
 describe('SidebarTutorialController', function () {
 
   describe('showSidebarTutorial', function () {
+    var settings = { enableCleanOnboardingTheme: true };
+
     it('returns true if show_sidebar_tutorial is true', function () {
       var session = {
         state: {
@@ -13,7 +15,7 @@ describe('SidebarTutorialController', function () {
           },
         },
       };
-      var controller = new Controller(session);
+      var controller = new Controller(session, settings);
 
       var result = controller.showSidebarTutorial();
 
@@ -28,7 +30,7 @@ describe('SidebarTutorialController', function () {
           },
         },
       };
-      var controller = new Controller(session);
+      var controller = new Controller(session, settings);
 
       var result = controller.showSidebarTutorial();
 
@@ -37,7 +39,7 @@ describe('SidebarTutorialController', function () {
 
     it('returns false if show_sidebar_tutorial is missing', function () {
       var session = {state: {preferences: {}}};
-      var controller = new Controller(session);
+      var controller = new Controller(session, settings);
 
       var result = controller.showSidebarTutorial();
 
@@ -46,7 +48,7 @@ describe('SidebarTutorialController', function () {
 
     it('returns false if session.state is {}', function () {
       var session = {state: {}};
-      var controller = new Controller(session);
+      var controller = new Controller(session, settings);
 
       var result = controller.showSidebarTutorial();
 

src/sidebar/host-config.js

@@ -35,6 +35,9 @@ function hostPageConfig(window) {
     // This should be removed once new note button is enabled for everybody.
     'enableExperimentalNewNoteButton',
 
+    // New onboarding theme override.
+    'enableCleanOnboardingTheme',
+
     // OAuth feature flag override.
     // This should be removed once OAuth is enabled for first party accounts.
     'oauthEnabled',

src/sidebar/templates/sidebar-tutorial.html

@@ -1,4 +1,4 @@
-<div class="sheet" ng-if="vm.showSidebarTutorial()">
+<div class="sheet" ng-if="vm.showSidebarTutorial() &&  !vm.cleanOnboardingThemeEnabled">
   <i class="close h-icon-close" role="button" title="Close"
      ng-click="vm.dismiss()"></i>
   <h1 class="sidebar-tutorial__header">How to get started</h1>
@@ -41,3 +41,36 @@ <h1 class="sidebar-tutorial__header">How to get started</h1>
     </li>
   </ol>
 </div>
+<div class="sheet sheet--is-theme-clean" ng-if="vm.showSidebarTutorial() && vm.cleanOnboardingThemeEnabled">
+  <i class="close h-icon-close" role="button" title="Close"
+     ng-click="vm.dismiss()"></i>
+  <h1 class="sidebar-tutorial__header sidebar-tutorial__header--is-theme-clean">
+    <i class="h-icon-annotate sidebar-tutorial__header-annotate" h-branding="accentColor"></i>
+    Start annotating
+  </h1>
+  <ol class="sidebar-tutorial__list">
+    <li class="sidebar-tutorial__list-item sidebar-tutorial__list-item--is-theme-clean">
+      <div class="sidebar-tutorial__list-item-content">
+        Select some text to
+          <span class="sidebar-tutorial__list-item-annotate">annotate</span>
+          <svg-icon class="sidebar-tutorial__list-item-cursor" name="'cursor'"></svg-icon>
+        or highlight.
+      </div>
+    </li>
+    <li class="sidebar-tutorial__list-item sidebar-tutorial__list-item--is-theme-clean">
+      <div class="sidebar-tutorial__list-item-content sidebar-tutorial__list-item-content--is-theme-clean">
+        Create page level notes
+        <button class="sidebar-tutorial__list-item-new-note-btn" h-branding="ctaBackgroundColor">
+          + New note
+        </button>
+      </div>
+    </li>
+    <li class="sidebar-tutorial__list-item sidebar-tutorial__list-item--is-theme-clean">
+      <div class="sidebar-tutorial__list-item-content">
+        View annotations through your profile
+        <i class="h-icon-account sidebar-tutorial__list-item-profile"></i>
+        <i class="h-icon-arrow-drop-down sidebar-tutorial__list-item-drop-down"></i>
+      </div>
+    </li>
+  </ol>
+</div>

src/styles/app.scss

@@ -130,6 +130,14 @@ hypothesis-app {
   }
 }
 
+.sheet--is-theme-clean {
+  padding-left: 30px;
+  padding-bottom: 30px;
+  margin-bottom: 20px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
 .annotation-unavailable-message {
   display: flex;
   flex-direction: column;

src/styles/sidebar-tutorial.scss

@@ -4,6 +4,16 @@
   font-weight: $title-font-weight;
 }
 
+.sidebar-tutorial__header-annotate {
+  position: relative;
+  top: 2px;
+}
+
+.sidebar-tutorial__header--is-theme-clean {
+  color: $gray-dark;
+  font-size: 16px;
+}
+
 /* We want an ordered list in which the numbers are aligned with the text
    above (not indented or dedented), and wrapped lines in list items are
    aligned with the first character of the list item (not the number, i.e
@@ -44,10 +54,56 @@
   color: $gray-light;
 }
 
+.sidebar-tutorial__list-item--is-theme-clean {
+  font-size: 14px;
+}
+
+.sidebar-tutorial__list-item--is-theme-clean::before {
+  color: $gray-dark;
+}
+
 .sidebar-tutorial__list-item-content {
   margin-top: 1em; /* Put vertical space in-between list items, equal to the
                       space between normal paragraphs.
                       Note: This also puts the same amount of space above the
                       first list item (i.e. between the list and whatever's
                       above it). */
 }
+
+.sidebar-tutorial__list-item-annotate {
+  background-color: $highlight-color-focus;
+  padding: 0px 3px;
+}
+
+.sidebar-tutorial__list-item-new-note-btn {
+  background-color: $color-dove-gray;
+  border: none;
+  border-radius: 3px;
+  color: #fff;
+  font-weight: 500;
+  text-align: center;
+  margin-left: 2px;
+}
+
+.sidebar-tutorial__list-item-drop-down {
+  margin-left: -5px;
+}
+
+.sidebar-tutorial__list-item-cursor {
+  position: relative;
+  top: 3px;
+  margin-left: -10px;
+}
+
+.sidebar-tutorial__list-item-cursor svg {
+  width: 12px;
+  height: 17px;
+}
+
+.sidebar-tutorial__list-item-content {
+  margin-top: 16px;
+}
+
+.sidebar-tutorial__list-item-profile {
+  margin-left: 4px;
+}