Merge pull request #18428 from justindarc/bug992393-v1.4

Bug 992393 - [camera][madai] preview mode UI updates
mozilla-b2g · Apr 17, 2014 · 1becbfe · 1becbfe
2 parents a186a4e + f9cebcb
commit 1becbfe
Show file tree

Hide file tree

Showing 14 changed files with 829 additions and 359 deletions.
diff --git a/apps/camera/index.html b/apps/camera/index.html
@@ -9,6 +9,8 @@
 
     <!-- <link rel="stylesheet" type="text/css" href="/shared/style/confirm.css" /> -->
     <!-- <link rel="stylesheet" type="text/css" href="/shared/style/buttons.css" /> -->
+    <!-- <link rel="stylesheet" type="text/css" href="/shared/style/action_menu.css" /> -->
+    <!-- <link rel="stylesheet" type="text/css" href="/shared/style/headers.css" /> -->
 
     <!--
       The following scripts are lazy loaded but left here to ensure

diff --git a/apps/camera/js/controllers/controls.js b/apps/camera/js/controllers/controls.js
@@ -54,7 +54,6 @@ ControlsController.prototype.bindEvents = function() {
 
   // Controls
   this.controls.on('click:thumbnail', this.app.firer('preview'));
-  this.controls.on('click:gallery', this.onGalleryButtonClick);
   this.controls.on('click:switch', this.onSwitchButtonClick);
   this.controls.on('click:cancel', this.onCancelButtonClick);
   this.controls.on('click:capture', this.onCaptureClick);
@@ -75,16 +74,13 @@ ControlsController.prototype.configure = function() {
   // The gallery button should not
   // be shown if an activity is pending
   // or the application is in 'secure mode'.
-  var showGallery = !this.app.activity.active && !this.app.inSecureMode;
 
-  this.controls.set('gallery', showGallery);
   this.controls.set('cancel', isCancellable);
   this.controls.set('switchable', isSwitchable);
   this.controls.set('mode', initialMode);
 
   debug('cancelable: %s', isCancellable);
   debug('switchable: %s', isSwitchable);
-  debug('gallery: %s', showGallery);
   debug('mode: %s', initialMode);
 };
 

diff --git a/apps/camera/js/controllers/preview-gallery.js b/apps/camera/js/controllers/preview-gallery.js
@@ -68,6 +68,7 @@ PreviewGalleryController.prototype.openPreview = function() {
   this.view.on('click:delete', this.deleteCurrentItem);
   this.view.on('click:back', this.closePreview);
   this.view.on('swipe', this.handleSwipe);
+  this.view.on('click:options', this.onOptionsClick);
 
   // If lockscreen is locked, hide all control buttons
   var secureMode = this.app.inSecureMode;
@@ -107,7 +108,9 @@ PreviewGalleryController.prototype.onGalleryButtonClick = function() {
   // Can't launch the gallery if the lockscreen is locked.
   // The button shouldn't even be visible in this case, but
   // let's be really sure here.
-  if (this.app.inSecureMode) { return; }
+  if (this.app.inSecureMode) {
+    return;
+  }
 
   var MozActivity = window.MozActivity;
 
@@ -118,8 +121,19 @@ PreviewGalleryController.prototype.onGalleryButtonClick = function() {
   });
 };
 
+PreviewGalleryController.prototype.onOptionsClick = function() {
+  if (this.app.inSecureMode) {
+    return;
+  }
+
+  this.view.showOptionsMenu();
+};
+
+
 PreviewGalleryController.prototype.shareCurrentItem = function() {
-  if (this.app.inSecureMode) { return; }
+  if (this.app.inSecureMode) {
+    return;
+  }
 
   var index = this.currentItemIndex;
   var item = this.items[index];

diff --git a/apps/camera/js/views/controls.js b/apps/camera/js/views/controls.js
@@ -41,7 +41,6 @@ module.exports = View.extend({
     /*jshint maxlen:false*/
     return '' +
       '<div class="controls-left">' +
-        '<div class="controls-button controls-gallery-button test-gallery icon-gallery js-btn rotates" name="gallery"></div>' +
         '<div class="controls-button controls-thumbnail-button test-thumbnail js-thumbnail js-btn rotates" name="thumbnail"></div>' +
         '<div class="controls-button controls-cancel-pick-button test-cancel-pick icon-pick-cancel js-btn rotates" name="cancel"></div>' +
       '</div>' +
@@ -68,7 +67,6 @@ module.exports = View.extend({
       this.els.thumbnail.appendChild(this.els.image);
 
       this.set('thumbnail', true);
-      this.set('gallery', false);
     } else {
       window.URL.revokeObjectURL(this.els.image.src);
     }
@@ -81,8 +79,6 @@ module.exports = View.extend({
       window.URL.revokeObjectURL(this.els.image.src);
       this.els.image = null;
     }
-
-    this.set('gallery', true);
     this.set('thumbnail', false);
   }
 

diff --git a/apps/camera/js/views/preview-gallery.js b/apps/camera/js/views/preview-gallery.js
@@ -32,7 +32,7 @@ return View.extend({
   className: 'offscreen',
 
   initialize: function() {
-    debug('rendered');
+    debug('initialized');
   },
 
   render: function() {
@@ -43,6 +43,9 @@ return View.extend({
     this.els.countText = this.find('.js-count-text');
     this.els.previewMenu = this.find('.js-preview-menu');
 
+    // Update localization strings
+    navigator.mozL10n.translate(this.el);
+
     // MediaFrame has a GestureDetector that can emit 'tap' events
     bind(this.el, 'tap', this.onTap);
     attach.on(this.els.previewMenu, 'click', '.js-btn', this.onButtonClick);
@@ -62,25 +65,31 @@ return View.extend({
   },
 
   template: function() {
-    /*jshint maxlen:false*/
     return '<div class="frame-container js-frame-container">' +
-      '<div class="media-frame js-media-frame"></div>' +
-      '</div>' +
-      '<div class="preview-menu js-preview-menu">' +
-        '<div class="camera-back icon-camera-back js-btn" name="back"></div>' +
-        '<div class="count-text js-count-text"></div>' +
-        '<footer class="preview-controls js-preview">' +
-          '<div class="preview-gallery-button js-btn" name="gallery">' +
-            '<div class="preview-gallery-icon icon-gallery"></div>' +
-          '</div>' +
-          '<div class="preview-share-button js-btn" name="share">' +
-            '<div class="preview-share-icon icon-preview-share"></div>' +
-          '</div>' +
-          '<div class="preview-delete-button js-btn" name="delete">' +
-            '<div class="preview-delete-icon icon-preview-delete"></div>' +
-          '</div>' +
-        '</footer>' +
-      '</div>';
+     '<div class="media-frame js-media-frame"></div>' +
+     '</div>' +
+     '<div class="preview-menu js-preview-menu">' +
+       '<section class="skin-dark" role="region">' +
+        '<header class="js-preview-header">' +
+          '<button class="js-btn" name="back">' +
+            '<span class="preview-back-icon icon-back-arrow">' +
+            '</span>' +
+          '</button>' +
+          '<menu type="toolbar">' +
+            '<button class="js-btn" name="share">' +
+              '<span class="preview-share-icon icon-preview-share">' +
+              '</span>' +
+            '</button>' +
+            '<button class="js-btn" name="options" >' +
+              '<span class="preview-option-icon icon-preview-options">' +
+              '</span>' +
+            '</button>' +
+          '</menu>' +
+          '<h1 data-l10n-id="preview">Preview</h1>' +
+        '</header>' +
+       '</section>' +
+      '<div class="count-text js-count-text"></div>' +
+    '</div>';
   },
 
   onTap: function() {
@@ -199,11 +208,12 @@ return View.extend({
   },
 
   onButtonClick: function(e, el) {
-    if (this.videoPlaying) {
-      return;
-    }
+    if (this.videoPlaying) { return; }
 
     var name = el.getAttribute('name');
+    if (this.optionsMenuContainer) {
+      this.hideOptionsMenu();
+    }
     this.emit('click:' + name, e);
     e.stopPropagation();
   },
@@ -276,6 +286,48 @@ return View.extend({
 
     this.videoPlaying = false;
     this.previewMenuFadeIn();
+  },
+
+  showOptionsMenu: function() {
+    this.optionsMenuContainer = document.createElement('div');
+    this.optionsMenuContainer.innerHTML = this.optionTemplate();
+    navigator.mozL10n.translate(this.optionsMenuContainer);
+    this.el.appendChild(this.optionsMenuContainer);
+
+    this.menu = this.find('.js-menu');
+
+    // We add the event listner for menu items and cancel buttons
+    var cancelButton = this.find('.js-cancel');
+    bind(cancelButton, 'click', this.hideOptionsMenu);
+    if (this.menu) {
+      attach.on(this.menu, 'click', '.js-btn', this.onButtonClick);
+    }
+  },
+
+  hideOptionsMenu: function() {
+    if (this.optionsMenuContainer) {
+      this.optionsMenuContainer.parentElement.removeChild(
+        this.optionsMenuContainer);
+      this.optionsMenuContainer = null;
+    }
+  },
+
+  optionTemplate: function() {
+    return '<form class="visible" data-type="action"' +
+      'role="dialog" data-z-index-level="action-menu">' +
+      '<header data-l10n-id="options">Options</header>' +
+      '<menu class="js-menu">' +
+      '<button class="js-btn" name="gallery" data-l10n-id="open-gallery">' +
+        'Open Gallery' +
+      '</button>' +
+      '<button class="js-btn" name="delete" data-l10n-id="delete">' +
+        'Delete' +
+      '</button>' +
+      '<button class="js-cancel" data-action="cancel" data-l10n-id="cancel">' +
+        'Cancel' +
+      '</button>' +
+      '</menu>' +
+      '</form>';
   }
 });
 

diff --git a/apps/camera/locales/camera.en-US.properties b/apps/camera/locales/camera.en-US.properties
@@ -75,3 +75,5 @@ flash-auto = Auto
 flash-deactivated = (Flash deactivated)
 
 options = Options
+open-gallery = Open Gallery
+preview = Preview
diff --git a/apps/camera/style/controls.css b/apps/camera/style/controls.css
@@ -87,14 +87,6 @@
   background-color: #00b9df;
 }
 
-/**
- * gallery=false
- */
-
-.controls[gallery=false] .controls-gallery-button {
-  display: none;
-}
-
 /** Thumbnail Button
  ---------------------------------------------------------*/