Merge pull request #306 from hypothesis/branded-sidebar

Branded sidebar

src/sidebar/templates/annotation.html

@@ -63,6 +63,7 @@
       overflow-hysteresis="20"
       content-data="selector.exact">
       <blockquote class="annotation-quote"
+        h-branding="selectionFontFamily"
         ng-bind="selector.exact"
         ng-repeat="selector in target.selector
           | filter : {'type': 'TextQuoteSelector'}
@@ -106,7 +107,8 @@
     <a class="annotation-link u-strong" ng-show="vm.canCollapseBody"
       ng-click="vm.toggleCollapseBody($event)"
       ng-title="vm.collapseBody ? 'Show the full annotation text' : 'Show the first few lines only'"
-      ng-bind="vm.collapseBody ? 'More' : 'Less'"></a>
+      ng-bind="vm.collapseBody ? 'More' : 'Less'"
+      h-branding="highlightColor"></a>
   </div>
   <!-- / Tags -->
 

src/sidebar/templates/app.html

-<top-bar
-  auth="auth"
-  on-login="login()"
-  on-logout="logout()"
-  on-share-page="share()"
-  on-show-help-panel="helpPanel.visible = true"
-  is-sidebar="::isSidebar"
-  pending-update-count="countPendingUpdates()"
-  on-apply-pending-updates="applyPendingUpdates()"
-  search-controller="search"
-  sort-key="sortKey()"
-  sort-keys-available="sortKeysAvailable()"
-  on-change-sort-key="setSortKey(sortKey)">
-</top-bar>
+<div class="app-content-wrapper" h-branding="appBackgroundColor">
+  <top-bar
+    auth="auth"
+    on-login="login()"
+    on-logout="logout()"
+    on-share-page="share()"
+    on-show-help-panel="helpPanel.visible = true"
+    is-sidebar="::isSidebar"
+    pending-update-count="countPendingUpdates()"
+    on-apply-pending-updates="applyPendingUpdates()"
+    search-controller="search"
+    sort-key="sortKey()"
+    sort-keys-available="sortKeysAvailable()"
+    on-change-sort-key="setSortKey(sortKey)">
+  </top-bar>
 
-<div class="create-account-banner" ng-if="isSidebar && auth.status === 'logged-out'" ng-cloak>
-  To annotate this document
-  <a href="{{ serviceUrl('signup') }}" target="_blank">
-    create a free account
-  </a>
-  or <a href="" ng-click="login()">log in</a>
-</div>
+  <div class="create-account-banner" ng-if="isSidebar && auth.status === 'logged-out'" ng-cloak>
+    To annotate this document
+    <a href="{{ serviceUrl('signup') }}" target="_blank">
+      create a free account
+    </a>
+    or <a href="" ng-click="login()">log in</a>
+  </div>
 
-<div class="content" ng-cloak>
-  <login-form
-    ng-if="accountDialog.visible"
-    on-close="accountDialog.visible = false">
-  </login-form>
-  <sidebar-tutorial ng-if="isSidebar"></sidebar-tutorial>
-  <share-dialog
-    ng-if="shareDialog.visible"
-    on-close="shareDialog.visible = false">
-  </share-dialog>
-  <help-panel ng-if="helpPanel.visible"
-    on-close="helpPanel.visible = false"
-    auth="auth">
-  </help-panel>
-  <main ng-view=""></main>
+  <div class="content" ng-cloak>
+    <login-form
+      ng-if="accountDialog.visible"
+      on-close="accountDialog.visible = false">
+    </login-form>
+    <sidebar-tutorial ng-if="isSidebar"></sidebar-tutorial>
+    <share-dialog
+      ng-if="shareDialog.visible"
+      on-close="shareDialog.visible = false">
+    </share-dialog>
+    <help-panel ng-if="helpPanel.visible"
+      on-close="helpPanel.visible = false"
+      auth="auth">
+    </help-panel>
+    <main ng-view=""></main>
+  </div>
 </div>

src/sidebar/templates/dropdown_menu_btn.html

-<div class="dropdown-menu-btn">
+<div class="dropdown-menu-btn" >
   <button
     class="dropdown-menu-btn__btn"
     ng-bind="vm.label"
     ng-click="vm.onClick($event)"
-    ng-disabled="vm.isDisabled">
+    ng-disabled="vm.isDisabled"
+    h-branding="ctaTextColor, ctaBackgroundColor">
   </button>
   <button
     class="dropdown-menu-btn__dropdown-arrow"
     title="{{vm.dropdownMenuLabel}}"
     ng-click="vm.toggleDropdown($event)">
     <div class="dropdown-menu-btn__dropdown-arrow-separator"></div>
-    <div class="dropdown-menu-btn__dropdown-arrow-indicator">
+    <div
+      class="dropdown-menu-btn__dropdown-arrow-indicator"
+      h-branding="ctaTextColor, ctaBackgroundColor">
       <div>▼</div>
     </div>
   </button>

src/sidebar/templates/excerpt.html

@@ -9,11 +9,13 @@
          ng-show="vm.showInlineControls()">
       <span class="excerpt__toggle-link" ng-show="vm.isExpandable()">
         … <a ng-click="vm.toggle($event)"
-            title="Show the full excerpt">More</a>
+            title="Show the full excerpt"
+            h-branding="highlightColor">More</a>
       </span>
       <span class="excerpt__toggle-link" ng-show="vm.isCollapsible()">
         <a ng-click="vm.toggle($event)"
-            title="Show the first few lines only">Less</a>
+            title="Show the first few lines only"
+            h-branding="highlightColor">Less</a>
       </span>
     </div>
   </div>

src/sidebar/templates/login_control.html

@@ -3,8 +3,8 @@
       ng-if="vm.newStyle && vm.auth.status === 'unknown'">⋯</span>
 <span class="login-text"
       ng-if="vm.newStyle && vm.auth.status === 'logged-out'">
-  <a href="{{vm.serviceUrl('signup')}}" target="_blank">Sign up</a>
-  / <a href="" ng-click="vm.onLogin()">Log in</a>
+  <a href="{{vm.serviceUrl('signup')}}" target="_blank" h-branding="highlightColor">Sign up</a>
+  / <a href="" ng-click="vm.onLogin()" h-branding="highlightColor">Log in</a>
 </span>
 <div ng-if="vm.newStyle"
      class="pull-right login-control-menu"

src/sidebar/templates/login_form.html

@@ -53,7 +53,7 @@
 
         <div class="form-actions">
           <div class="form-actions-message">
-            <a href="{{vm.serviceUrl('forgot-password')}}" target="_blank">Forgot your password?</a>
+            <a href="{{vm.serviceUrl('forgot-password')}}" target="_blank" h-branding="highlightColor">Forgot your password?</a>
           </div>
           <div class="form-actions-buttons">
             <button class="btn btn-primary" type="submit" name="login"

src/sidebar/templates/markdown.html

@@ -15,8 +15,11 @@
 </div>
 <textarea class="form-input form-textarea js-markdown-input"
           ng-show="showEditor()"
-          ng-click="$event.stopPropagation()"></textarea>
+          ng-click="$event.stopPropagation()"
+          h-branding="annotationFontFamily"
+          ></textarea>
 <div class="markdown-body js-markdown-preview"
      ng-class="preview && 'markdown-preview'"
      ng-dblclick="togglePreview()"
-     ng-show="!showEditor()"></div>
+     ng-show="!showEditor()"
+     h-branding="annotationFontFamily"></div>

src/styles/app.scss

@@ -34,15 +34,31 @@ $base-line-height: 20px;
 
 // Top-level styles
 // ----------------
-body {
-  $sidebar-h-padding: 9px;
+html, body {
+  height: 100%;
+}
 
+body {
   @include grey-background;
+
   font-family: $sans-font-family;
   font-weight: normal;
+  -webkit-overflow-scrolling: touch;
+}
+
+hypothesis-app {
+  display: block;
+  height: 100%;
+}
+
+.app-content-wrapper {
+  $sidebar-h-padding: 9px;
+
+  @include grey-background;
+
+  min-height: 100%;
   padding: $sidebar-h-padding;
   padding-top: $sidebar-h-padding + $top-bar-height;
-  -webkit-overflow-scrolling: touch;
 
   @include respond-to(tablets desktops) {
     padding-bottom: 4rem;

src/styles/selection-tabs.scss

 .selection-tabs {
-  @include grey-background;
 
   display: flex;
   flex-direction: row;