Multiple UI Improvements

web/react/components/view_image.jsx

@@ -109,6 +109,26 @@ module.exports = React.createClass({
             }
         );
 
+        if (this.refs.previewArrowLeft.getDOMNode) {
+            $(this.refs.previewArrowLeft.getDOMNode()).hover(
+                function onModalHover() {
+                    $(self.refs.imageFooter.getDOMNode()).addClass('footer--show');
+                }, function offModalHover() {
+                    $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show');
+                }
+            );
+        }
+
+        if (this.refs.previewArrowRight.getDOMNode) {
+            $(this.refs.previewArrowRight.getDOMNode()).hover(
+                function onModalHover() {
+                    $(self.refs.imageFooter.getDOMNode()).addClass('footer--show');
+                }, function offModalHover() {
+                    $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show');
+                }
+            );
+        }
+
         $(window).on('keyup', this.handleKeyPress);
 
         // keep track of whether or not this component is mounted so we can safely set the state asynchronously
@@ -252,13 +272,21 @@ module.exports = React.createClass({
         var rightArrow = '';
         if (this.props.filenames.length > 1) {
             leftArrow = (
-                <a className='modal-prev-bar' href='#' onClick={this.handlePrev}>
+                <a
+                    ref='previewArrowLeft'
+                    className='modal-prev-bar'
+                    href='#'
+                    onClick={this.handlePrev}>
                     <i className='image-control image-prev'/>
                 </a>
             );
 
             rightArrow = (
-                <a className='modal-next-bar' href='#' onClick={this.handleNext}>
+                <a
+                    ref='previewArrowRight'
+                    className='modal-next-bar'
+                    href='#'
+                    onClick={this.handleNext}>
                     <i className='image-control image-next'/>
                 </a>
             );