Fix back arrow button (#214)

The SVG image that was previously used was scaled down in certain
situations. This commit replaces the old SVG icon with a md-button /
md-icon.

Fixes #205.

public/img/ic_arrow_left.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24">
-    <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 11.78125 2.28125 L 2.78125 11.28125 L 2.09375 12 L 2.78125 12.71875 L 11.78125 21.71875 L 13.21875 20.28125 L 5.9375 13 L 22 13 L 22 11 L 5.9375 11 L 13.21875 3.71875 L 11.78125 2.28125 z" color="#000" overflow="visible" enable-background="accumulate" font-family="Bitstream Vera Sans"/>
-</svg>

src/partials/messenger.backbutton.html

@@ -0,0 +1,3 @@
+<md-button md-no-ink class="header-back-button md-icon-button" ng-click="ctrl.goBack()">
+    <md-icon aria-label="Back" class="material-icons md-24">arrow_back</md-icon>
+</md-button>

src/partials/messenger.conversation.html

@@ -5,9 +5,7 @@
             on-uploading="ctrl.onUploading"></drag-file>
 
     <div id="conversation-header" class="detail-header">
-        <div class="header-back-button" ng-click="ctrl.goBack()">
-            <img src="img/ic_arrow_left.svg" alt="Back">
-        </div>
+        <ng-include src="'partials/messenger.backbutton.html'"></ng-include>
         <div class="header-avatar" ng-click="ctrl.showReceiver()">
             <eee-avatar eee-type="ctrl.type" eee-receiver="ctrl.receiver"
                         eee-resolution="'low'"></eee-avatar>

src/partials/messenger.receiver.create.html

@@ -1,8 +1,6 @@
 <div class="form">
     <div id="receiver-detail-header" class="detail-header">
-        <div class="header-back-button" ng-click="ctrl.goBack()">
-            <img src="img/ic_arrow_left.svg" alt="Back">
-        </div>
+        <ng-include src="'partials/messenger.backbutton.html'"></ng-include>
         <div class="header-details">
             <h2>{{ctrl.controllerModel.subject}}</h2>
         </div>
@@ -31,4 +29,4 @@
         <div ng-include src="'partials/messenger.receiver/' + ctrl.type + '.create.html'" class="form-content">
         </div>
     </div>
-</div>
+</div>

src/partials/messenger.receiver.edit.html

@@ -1,11 +1,8 @@
 <div class="form">
     <div id="receiver-detail-header" class="detail-header">
-        <div class="header-back-button" ng-click="ctrl.goBack()">
-            <img src="img/ic_arrow_left.svg" alt="Back">
-        </div>
+        <ng-include src="'partials/messenger.backbutton.html'"></ng-include>
         <div class="header-details">
             <h2>{{ctrl.controllerModel.subject}}</h2>
-            </h2>
         </div>
 
         <div class="header-buttons">
@@ -32,4 +29,4 @@
         <div ng-include src="'partials/messenger.receiver/' + ctrl.type + '.edit.html'" class="form-content">
         </div>
     </div>
-</div>
+</div>

src/partials/messenger.receiver.html

@@ -1,8 +1,6 @@
 <div class="form readonly">
     <div id="receiver-detail-header" class="detail-header">
-        <div class="header-back-button" ng-click="ctrl.goBack()">
-            <img src="img/ic_arrow_left.svg" alt="Back">
-        </div>
+        <ng-include src="'partials/messenger.backbutton.html'"></ng-include>
         <div class="header-details">
             <h2>{{ ctrl.receiver.displayName }}</h2>
         </div>
@@ -21,4 +19,4 @@
         <div ng-include src="'partials/messenger.receiver/' + ctrl.receiver.type + '.html'" scroll-glue in-view-container>
         </div>
     </div>
-</div>
+</div>

src/sass/app.scss

@@ -43,9 +43,9 @@
 @import "components/drag_file";
 @import "components/buttons";
 @import "components/mediabox";
+@import "components/backbutton";
 
 // Sections: Styles specific to individual pages or sections.
-// Nothing to see here yet!
 @import "sections/header";
 @import "sections/welcome";
 @import "sections/navigation";

src/sass/components/_backbutton.scss

@@ -0,0 +1,14 @@
+.md-button.md-icon-button.header-back-button {
+    @include mouse-hand;
+    min-width: 24px;
+    width: 24px;
+    margin: 0 4px 0 0;
+    padding: 0;
+    md-icon {
+        color: $material-grey-dark;
+        transform: scale(1.2);
+    }
+    &.md-focused {
+        background-color: transparent !important; /* fix bug in md-no-ink */
+    }
+}

src/sass/layout/_main.scss

@@ -90,26 +90,6 @@
                     margin-left: 8px;
                 }
 
-                // back button
-                .header-back-button {
-                    @include mouse-hand;
-                    img {
-                        transition: all 0.8s;
-                        opacity: 0.8;
-                    }
-
-                    &:hover {
-                         img {
-                                opacity: 1;
-                                width: 105%;
-                         }
-                    }
-                }
-
-                .header-avatar {
-
-                }
-
                 .header-detail {
                     display: flex;
                     flex-direction: column;

src/sass/sections/_conversation.scss

@@ -7,10 +7,6 @@
 
     .detail-header {
 
-        .header-back-button {
-            width: 24px;
-        }
-
         .header-avatar {
             @include mouse-hand;
         }