From ccde89636316847f063af7390da278ada9aa1f26 Mon Sep 17 00:00:00 2001 From: Sheetal Umesh Kumar Date: Wed, 15 Nov 2017 12:34:02 -0500 Subject: [PATCH 1/2] Add config option to display a clean onboarding look to users. See https://github.com/hypothesis/product-backlog/issues/351 --- src/annotator/config/index.js | 1 + src/images/icons/cursor.svg | 14 +++++ src/sidebar/components/sidebar-tutorial.js | 4 +- src/sidebar/components/svg-icon.js | 1 + .../components/test/sidebar-tutorial-test.js | 10 ++-- src/sidebar/host-config.js | 3 + src/sidebar/templates/sidebar-tutorial.html | 35 +++++++++++- src/styles/app.scss | 8 +++ src/styles/sidebar-tutorial.scss | 56 +++++++++++++++++++ 9 files changed, 126 insertions(+), 6 deletions(-) create mode 100644 src/images/icons/cursor.svg 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..a05c5ecf991 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..d4a6867222a 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: #626262; + 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; +} From 2070d93449e39d4dbbc4aa5b64389bbf82434686 Mon Sep 17 00:00:00 2001 From: Robert Knight Date: Thu, 16 Nov 2017 10:27:59 +0000 Subject: [PATCH 2/2] Minor CR fixups - Use a variable instead of a hardcoded color for the "New note" button in the sidebar tutorial. - Remove unused `width` and `height` attributes. The icon's size is set via `width` and `height` properties in CSS. --- src/sidebar/templates/sidebar-tutorial.html | 2 +- src/styles/sidebar-tutorial.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sidebar/templates/sidebar-tutorial.html b/src/sidebar/templates/sidebar-tutorial.html index a05c5ecf991..2eab78591d4 100644 --- a/src/sidebar/templates/sidebar-tutorial.html +++ b/src/sidebar/templates/sidebar-tutorial.html @@ -53,7 +53,7 @@

Select some text to annotate - + or highlight.
diff --git a/src/styles/sidebar-tutorial.scss b/src/styles/sidebar-tutorial.scss index d4a6867222a..570e0db1cf9 100644 --- a/src/styles/sidebar-tutorial.scss +++ b/src/styles/sidebar-tutorial.scss @@ -76,7 +76,7 @@ } .sidebar-tutorial__list-item-new-note-btn { - background-color: #626262; + background-color: $color-dove-gray; border: none; border-radius: 3px; color: #fff;