diff --git a/src/annotator/config/index.js b/src/annotator/config/index.js index 0878067854c..33e37ea5ff5 100644 --- a/src/annotator/config/index.js +++ b/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'), diff --git a/src/images/icons/cursor.svg b/src/images/icons/cursor.svg new file mode 100644 index 00000000000..bd20c653a9a --- /dev/null +++ b/src/images/icons/cursor.svg @@ -0,0 +1,14 @@ + + + + Shape + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/src/sidebar/components/sidebar-tutorial.js b/src/sidebar/components/sidebar-tutorial.js index 65a0659b11e..a5940819e3f 100644 --- a/src/sidebar/components/sidebar-tutorial.js +++ b/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) { diff --git a/src/sidebar/components/svg-icon.js b/src/sidebar/components/svg-icon.js index 056adbd5db0..e9cf6f7ab46 100644 --- a/src/sidebar/components/svg-icon.js +++ b/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 diff --git a/src/sidebar/components/test/sidebar-tutorial-test.js b/src/sidebar/components/test/sidebar-tutorial-test.js index b42d542d4ec..3d14050b3cd 100644 --- a/src/sidebar/components/test/sidebar-tutorial-test.js +++ b/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(); diff --git a/src/sidebar/host-config.js b/src/sidebar/host-config.js index 5b36bcb1985..dd6c5980fa7 100644 --- a/src/sidebar/host-config.js +++ b/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', diff --git a/src/sidebar/templates/sidebar-tutorial.html b/src/sidebar/templates/sidebar-tutorial.html index 2f220438303..2eab78591d4 100644 --- a/src/sidebar/templates/sidebar-tutorial.html +++ b/src/sidebar/templates/sidebar-tutorial.html @@ -1,4 +1,4 @@ -
+

How to get started

@@ -41,3 +41,36 @@

How to get started

+
+ +

+ + Start annotating +

+
    +
  1. +
    + Select some text to + annotate + + or highlight. +
    +
    2. +
  2. +
    + Create page level notes + +
    +
    3. +
  3. +
    + View annotations through your profile + + +
    +
    4. +
+
diff --git a/src/styles/app.scss b/src/styles/app.scss index 20ddab0432e..defdeaa579b 100644 --- a/src/styles/app.scss +++ b/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; diff --git a/src/styles/sidebar-tutorial.scss b/src/styles/sidebar-tutorial.scss index e320d99c3de..570e0db1cf9 100644 --- a/src/styles/sidebar-tutorial.scss +++ b/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; +}