Renamed files and components and added copy and link to the help panel

h/static/scripts/app-controller.js

@@ -46,7 +46,7 @@ module.exports = function AppController(
   // App dialogs
   $scope.accountDialog = {visible: false};
   $scope.shareDialog = {visible: false};
-  $scope.aboutThisVersionDialog = {visible: false};
+  $scope.helpPanel = {visible: false};
 
   // Check to see if we're in the sidebar, or on a standalone page such as
   // the stream page or an individual annotation page.

h/static/scripts/app.js

@@ -128,16 +128,16 @@ module.exports = angular.module('h', [
   .controller('StreamController', require('./stream-controller'))
   .controller('WidgetController', require('./widget-controller'))
 
-  .directive('aboutThisVersionDialog', require('./directive/about-this-version-dialog'))
   .directive('annotation', require('./directive/annotation').directive)
   .directive('annotationShareDialog', require('./directive/annotation-share-dialog'))
   .directive('annotationThread', require('./directive/annotation-thread'))
   .directive('dropdownMenuBtn', require('./directive/dropdown-menu-btn'))
   .directive('excerpt', require('./directive/excerpt').directive)
-  .directive('feedbackLink', require('./directive/feedback-link'))
   .directive('formInput', require('./directive/form-input'))
   .directive('formValidate', require('./directive/form-validate'))
   .directive('groupList', require('./directive/group-list').directive)
+  .directive('helpLink', require('./directive/help-link'))
+  .directive('helpPanel', require('./directive/help-panel'))
   .directive('hAutofocus', require('./directive/h-autofocus'))
   .directive('hTooltip', require('./directive/h-tooltip'))
   .directive('loggedoutMessage', require('./directive/loggedout-message'))

h/static/scripts/directive/feedback-link.js → h/static/scripts/directive/help-link.js

@@ -5,7 +5,7 @@ module.exports = function () {
     bindToController: true,
     controllerAs: 'vm',
     restrict: 'E',
-    template: require('../../../templates/client/feedback_link.html'),
+    template: require('../../../templates/client/help_link.html'),
     controller: function () {},
     scope: {
       version: '<',

h/static/scripts/directive/about-this-version-dialog.js → h/static/scripts/directive/help-panel.js

@@ -2,7 +2,7 @@
 
 /**
  * @ngdoc directive
- * @name aboutThisVersionDialog
+ * @name helpPanel
  * @description Displays product version and environment info
  */
 // @ngInject
@@ -30,7 +30,7 @@ module.exports = function () {
       );
     },
     restrict: 'E',
-    template: require('../../../templates/client/about_this_version_dialog.html'),
+    template: require('../../../templates/client/help_panel.html'),
     scope: {
       auth: '<',
       onClose: '&',

h/static/scripts/directive/signin-control.js

@@ -17,7 +17,7 @@ module.exports = function () {
       /**
        * Called when the user clicks on the "About this version" text.
        */
-      onShowAboutVersionDialog: '&',
+      onShowHelpPanel: '&',
       /**
        * Called when the user clicks on the "Sign in" text.
        */

h/static/scripts/directive/top-bar.js

@@ -6,7 +6,7 @@ module.exports = function () {
     scope: {
       auth: '<',
       isSidebar: '<',
-      onShowAboutVersionDialog: '&',
+      onShowHelpPanel: '&',
       onLogin: '&',
       onLogout: '&',
       onSharePage: '&',

h/static/styles/app.scss

@@ -8,7 +8,6 @@ $base-line-height: 20px;
 
 // Components
 // ----------
-@import './about-this-version-dialog';
 @import './annotation';
 @import './annotation-share-dialog';
 @import './annotation-thread';
@@ -16,6 +15,7 @@ $base-line-height: 20px;
 @import './dropdown-menu-btn';
 @import './excerpt';
 @import './group-list';
+@import './help-panel';
 @import './loggedout-message';
 @import './markdown';
 @import './primary-action-btn';

h/static/styles/about-this-version-dialog.scss → h/static/styles/help-panel.scss

-.about-this-version {
+.help-panel {
   @include font-normal;
   background: $grey-3;
   margin-bottom: .72em;
@@ -6,7 +6,7 @@
   border-radius: 2px;
 }
 
-.about-this-version-title {
+.help-panel-title {
   color: $grey-6;
   font-weight: bold;
   // Margin between top of the dialog and
@@ -14,28 +14,29 @@
   margin-top: -5px;
 }
 
-.about-this-version-content {
+.help-panel-content {
   // Margin between bottom of ascent of title and
   // top of x-height of content should be 20px.
   margin-top: 11px;
 }
 
-.about-this-version-content__key {
+.help-panel-content__key {
   width: 100px;
   float: left;
   color: $grey-4;
 }
 
-.about-this-version-content__val {
+.help-panel-content__val {
   word-wrap: break-word;
   margin-left: 100px;
 }
 
-.about-this-version-content-feedback {
+.help-panel-content {
+   margin-top: 10px;
    margin-bottom: 15px;
 }
 
-.about-this-version-content-feedback__link {
+.help-panel-content__link {
   color: $grey-6;
   &:hover {
     text-decoration: underline;

h/templates/client/about_this_version_dialog.html

-<div class="about-this-version">
-  <i class="close h-icon-close"
-    role="button"
-    title="Close"
-    ng-click="vm.onClose()"></i>
-
-  <header class="about-this-version-title">
-    Help
-  </header>
-  
-    <feedback-link
-      version="vm.version"
-      user-agent="vm.userAgent"
-      url="vm.url"
-      document-fingerprint="vm.documentFingerprint"
-      auth="vm.auth"
-      date-time="vm.dateTime">
-    </feedback-link>
-
-  <header class="about-this-version-title">
-    About this version
-  </header>
-  <dl class="about-this-version-content">
-    <dt class="about-this-version-content__key">Version: </dt>
-    <dd class="about-this-version-content__val">{{ vm.version }}</dd>
-    <dt class="about-this-version-content__key">User agent: </dt>
-    <dd class="about-this-version-content__val">{{ vm.userAgent }}</dd>
-    <dt class="about-this-version-content__key">URL: </dt>
-    <dd class="about-this-version-content__val">{{ vm.url }}</dd>
-    <div ng-if="vm.documentFingerprint">
-      <dt class="about-this-version-content__key">PDF fingerprint: </dt>
-      <dd class="about-this-version-content__val">{{ vm.documentFingerprint }}</dd>
-    </div>
-    <div ng-if="vm.auth.userid">
-      <dt class="about-this-version-content__key">Username: </dt>
-      <dd class="about-this-version-content__val">{{ vm.auth.username }}</dd>
-    </div>
-    <dt class="about-this-version-content__key">Date: </dt>
-    <dd class="about-this-version-content__val">{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }}</dd>
-  </div>
-</div>

h/templates/client/feedback_link.html

-<div class="about-this-version-content-feedback">
-  <a class="about-this-version-content-feedback__link" href="mailto:support@hypothes.is?subject=Hypothesis%20support&amp;body=Version:%20{{ vm.version }}%0D%0AUser%20Agent:%20{{vm.userAgent}}%0D%0AURL:%20{{ vm.url }}%0D%0APDF%20fingerprint:%20{{ vm.documentFingerprint ? vm.documentFingerprint : '-' }}%0D%0AUsername:%20{{ vm.auth.username ? vm.auth.username : '-' }}%0D%0ADate:%20{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }} ">
-    Send us a message 
-  </a>
-</div>

h/templates/client/help_link.html

+
+  <a class="help-panel-content__link" href="mailto:support@hypothes.is?subject=Hypothesis%20support&amp;body=Version:%20{{ vm.version }}%0D%0AUser%20Agent:%20{{vm.userAgent}}%0D%0AURL:%20{{ vm.url }}%0D%0APDF%20fingerprint:%20{{ vm.documentFingerprint ? vm.documentFingerprint : '-' }}%0D%0AUsername:%20{{ vm.auth.username ? vm.auth.username : '-' }}%0D%0ADate:%20{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }} ">
+    Send us a message 
+  </a>
+

h/templates/client/help_panel.html

+<div class="help-panel">
+  <i class="close h-icon-close"
+    role="button"
+    title="Close"
+    ng-click="vm.onClose()"></i>
+
+  <header class="help-panel-title">
+    Help
+  </header>
+  <div class="help-panel-content">
+    <help-link
+      version="vm.version"
+      user-agent="vm.userAgent"
+      url="vm.url"
+      document-fingerprint="vm.documentFingerprint"
+      auth="vm.auth"
+      date-time="vm.dateTime">
+    </help-link>  
+    if you have any questions or want to give us feedback. 
+    You can also visit our <a class="help-panel-content__link" href="/docs/help" target="_blank"> help documents.</a>
+  </div>
+  <header class="help-panel-title">
+    About this version
+  </header>
+  <dl class="help-panel-content">
+    <dt class="help-panel-content__key">Version: </dt>
+    <dd class="help-panel-content__val">{{ vm.version }}</dd>
+    <dt class="help-panel-content__key">User agent: </dt>
+    <dd class="help-panel-content__val">{{ vm.userAgent }}</dd>
+    <dt class="help-panel-content__key">URL: </dt>
+    <dd class="help-panel-content__val">{{ vm.url }}</dd>
+    <div ng-if="vm.documentFingerprint">
+      <dt class="help-panel-content__key">PDF fingerprint: </dt>
+      <dd class="help-panel-content__val">{{ vm.documentFingerprint }}</dd>
+    </div>
+    <div ng-if="vm.auth.userid">
+      <dt class="help-panel-content__key">Username: </dt>
+      <dd class="help-panel-content__val">{{ vm.auth.username }}</dd>
+    </div>
+    <dt class="help-panel-content__key">Date: </dt>
+    <dd class="help-panel-content__val">{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }}</dd>
+  </div>
+</div>

h/templates/client/signin_control.html

@@ -29,7 +29,7 @@
       <a class="dropdown-menu__link" href="{{vm.serviceUrl}}profile" target="_blank">Account settings</a>
     </li>
     <li class="dropdown-menu__row">
-      <a class="dropdown-menu__link" ng-click="vm.onShowAboutVersionDialog()">Help</a>
+      <a class="dropdown-menu__link" ng-click="vm.onShowHelpPanel()">Help</a>
     </li>
     <li class="dropdown-menu__row" ng-if="vm.auth.status === 'signed-in'">
       <a class="dropdown-menu__link dropdown-menu__link--subtle"
@@ -58,10 +58,7 @@
       <a class="dropdown-menu__link" href="{{vm.serviceUrl}}profile" target="_blank">Account</a>
     </li>
     <li class="dropdown-menu__row" >
-      <a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a>
-    </li>
-    <li class="dropdown-menu__row" >
-      <a class="dropdown-menu__link" href="{{vm.serviceUrl}}docs/help" target="_blank">Help</a>
+      <a class="dropdown-menu__link" ng-click="vm.onShowHelpPanel()">Help</a>
     </li>
     <li class="dropdown-menu__row" ng-if="vm.auth.status === 'signed-in'">
       <a class="dropdown-menu__link" href="{{vm.serviceUrl}}stream?q=user:{{vm.auth.username}}"

h/templates/client/top_bar.html

@@ -14,7 +14,7 @@
     <signin-control
       auth="auth"
       new-style="false"
-      on-show-about-version-dialog="vm.onShowAboutVersionDialog()"
+      on-show-help-panel="vm.onShowHelpPanel()"
       on-login="onLogin()"
       on-logout="onLogout()">
     </signin-control>
@@ -47,7 +47,7 @@
     <signin-control
       auth="auth"
       new-style="true"
-      on-show-about-version-dialog="onShowAboutVersionDialog()"
+      on-show-help-panel="onShowHelpPanel()"
       on-login="onLogin()"
       on-logout="onLogout()">
     </signin-control>