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/images/icons/cursor.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="30px" viewBox="0 0 10 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Start-annotating---eLife" transform="translate(-239.000000, -73.000000)" fill-rule="nonzero" fill="#000000">
+            <g id="Group-10" transform="translate(1.000000, 1.000000)">
+                <path d="M243.3125,75.186875 C243.3125,73.535 243.3125,72.625 246.434687,72.625 L248,72.625 L248,72 L246.434687,72 C244.324375,72 243.402813,72.4684375 243,73.183125 C242.597187,72.4684375 241.675625,72 239.565313,72 L238,72 L238,72.625 L239.565313,72.625 C242.6875,72.6246875 242.6875,73.5346875 242.6875,75.186875 L242.6875,82 L242.6875,86.6875 L240.929375,86.6875 L240.929375,87.3125 L242.6875,87.3125 L242.6875,92 L242.6875,98.5434375 C242.6875,100.187188 242.6875,101.375 239.565313,101.375 L238,101.375 L238,102 L239.565313,102 C241.675625,102 242.5975,101.442813 243,100.6525 C243.402813,101.442813 244.324375,102 246.434687,102 L248,102 L248,101.375 L246.434687,101.375 C243.3125,101.374688 243.3125,100.187188 243.3125,98.5434375 L243.3125,91.9996875 L243.3125,87.3121875 L245.070312,87.3121875 L245.070312,86.6871875 L243.3125,86.6871875 L243.3125,81.9996875 L243.3125,75.186875 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/sidebar/components/sidebar-tutorial.js

 '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

-<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 @@
     </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,6 +54,14 @@
   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.
@@ -51,3 +69,41 @@
                       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;
+}