T267291 Add visual indicator to show more images inside gallery (#285)

* temp for arrow button in gallery

* replace with arrow svg

* arrow direction based on the content language

src/components/Gallery.js

@@ -124,6 +124,16 @@ export const Gallery = ({ close, closeAll, items, startFileName, lang, dir }) =>
           </div>
         )
       }
+      {
+        currentIndex !== 0 && (
+          <div class={`arrow ${dir === 'rtl' ? 'right' : 'left'}`} />
+        )
+      }
+      {
+        currentIndex < items.length - 1 && (
+          <div class={`arrow ${dir === 'rtl' ? 'left' : 'right'}`} />
+        )
+      }
       <div class='img'>
         <img onLoad={onImageLoad} src={items[currentIndex].thumbnail} />
       </div>

style/gallery.less

@@ -26,6 +26,23 @@
 		}
 	}
 
+	.arrow {
+		position: absolute;
+		top: calc( 50% - 10px );
+		width: 28px;
+		height: 28px;
+		background-image: url( /images/arrow.svg );
+
+		&.left {
+			left: 8px;
+			transform: scaleX( -1 );
+		}
+
+		&.right {
+			right: 8px;
+		}
+	}
+
 	&.portrait {
 		.img {
 			height: @availableHeight; // Required under portrait for black background to work on device
@@ -51,6 +68,10 @@
 		.img {
 			height: calc( 100vh - @softkeysHeight - 27px );
 		}
+
+		.arrow {
+			top: calc( 50% - 10px + @softkeysHeight/2 );
+		}
 	}
 }