Reviews.

ampproject · Nov 14, 2018 · 1dc80ed · 1dc80ed
1 parent 73bd3b4
commit 1dc80ed
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 50 deletions.
diff --git a/extensions/amp-story/1.0/amp-story-bookend.css b/extensions/amp-story/1.0/amp-story-bookend.css
@@ -335,11 +335,11 @@
   padding-right: 16px !important;
 }
 
-.i-amphtml-story-bookend .i-amphtml-story-share-icon {
+.i-amphtml-story-bookend .i-amphtml-story-share-item .i-amphtml-story-share-icon {
   background-color: rgba(255, 255, 255, 0.15) !important;
 }
 
-.i-amphtml-story-bookend .i-amphtml-story-share-label {
+.i-amphtml-story-bookend .i-amphtml-story-share-icon .i-amphtml-story-share-label {
   color: #FFF !important;
 }
 

diff --git a/extensions/amp-story/1.0/amp-story-share-menu.css b/extensions/amp-story/1.0/amp-story-share-menu.css
@@ -71,45 +71,43 @@
   display: none !important;
 }
 
-@media (min-width: 1024px) {
-  .i-amphtml-story-share-menu {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-  }
+[desktop-fullbleed].i-amphtml-story-share-menu {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
 
-  .i-amphtml-story-share-menu-container {
-    position: relative !important;
-    margin: 0 !important;
-    max-width: 320px !important; /* Three icons. */
-    opacity: 0 !important;
-    transform: none !important;
-    transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
-  }
+[desktop-fullbleed] .i-amphtml-story-share-menu-container {
+  position: relative !important;
+  margin: 0 !important;
+  max-width: 320px !important; /* Three icons. */
+  opacity: 0 !important;
+  transform: none !important;
+  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
+}
 
-  .i-amphtml-story-share-menu-visible .i-amphtml-story-share-menu-container {
-    border-radius: 8px !important;
-    opacity: 1 !important;
-    transform: none !important;
-    transition: opacity 0.2s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-  }
+[desktop-fullbleed].i-amphtml-story-share-menu-visible .i-amphtml-story-share-menu-container {
+  border-radius: 8px !important;
+  opacity: 1 !important;
+  transform: none !important;
+  transition: opacity 0.2s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
+}
 
-  .i-amphtml-story-share-menu-close-button {
-    display: block !important;
-    position: absolute !important;
-    top: 0 !important;
-    right: 0 !important;
-    height: 36px !important;
-    width: 36px !important;
-    color: #757575 !important;
-    cursor: pointer !important;
-    font-size: 24px !important;
-    line-height: 36px !important;
-    text-align: center !important;
-  }
+[desktop-fullbleed] .i-amphtml-story-share-menu-close-button {
+  display: block !important;
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  height: 36px !important;
+  width: 36px !important;
+  color: #757575 !important;
+  cursor: pointer !important;
+  font-size: 24px !important;
+  line-height: 36px !important;
+  text-align: center !important;
+}
 
-  .i-amphtml-story-share-item {
-    padding: 0 !important;
-    margin: 12px 24px !important;
-  }
+[desktop-fullbleed] .i-amphtml-story-share-item {
+  padding: 0 !important;
+  margin: 12px 24px !important;
 }
diff --git a/extensions/amp-story/1.0/amp-story-share-menu.js b/extensions/amp-story/1.0/amp-story-share-menu.js
@@ -17,6 +17,7 @@
 import {
   Action,
   StateProperty,
+  UIType,
   getStoreService,
 } from './amp-story-store-service';
 import {CSS} from '../../../build/amp-story-share-menu-1.0.css';
@@ -25,7 +26,6 @@ import {ShareWidget} from './amp-story-share';
 import {closest} from '../../../src/dom';
 import {createShadowRootWithStyle} from './utils';
 import {dev} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
 import {getAmpdoc} from '../../../src/service';
 import {htmlFor} from '../../../src/static-template';
 import {toggle} from '../../../src/style';
@@ -36,7 +36,8 @@ export const VISIBLE_CLASS = 'i-amphtml-story-share-menu-visible';
 
 /**
  * Quick share template, used as a fallback if native sharing is not supported.
- * @private @const {!./simple-template.ElementDef}
+ * @param {!Element} element
+ * @return {!Element}
  */
 const getTemplate = element => {
   return htmlFor(element)`
@@ -51,7 +52,8 @@ const getTemplate = element => {
 
 /**
  * System amp-social-share button template.
- * @private @const {!./simple-template.ElementDef}
+ * @param {!Element} element
+ * @return {!Element}
  */
 const getAmpSocialSystemShareTemplate = element => {
   return htmlFor(element)`<amp-social-share type="system"></amp-social-share>`;
@@ -170,6 +172,10 @@ export class ShareMenu {
    * @private
    */
   initializeListeners_() {
+    this.storeService_.subscribe(StateProperty.UI_STATE, uiState => {
+      this.onUIStateUpdate_(uiState);
+    }, true /** callToInitialize */);
+
     this.storeService_.subscribe(StateProperty.SHARE_MENU_STATE, isOpen => {
       this.onShareMenuStateUpdate_(isOpen);
     });
@@ -224,6 +230,19 @@ export class ShareMenu {
     }
   }
 
+  /**
+   * Reacts to UI state updates and triggers the right UI.
+   * @param {!UIType} uiState
+   * @private
+   */
+  onUIStateUpdate_(uiState) {
+    this.vsync_.mutate(() => {
+      uiState === UIType.DESKTOP_FULLBLEED ?
+        this.element_.setAttribute('desktop-fullbleed', '') :
+        this.element_.removeAttribute('desktop-fullbleed');
+    });
+  }
+
   /**
    * Closes the share menu.
    * @private

diff --git a/extensions/amp-story/1.0/amp-story-share.css b/extensions/amp-story/1.0/amp-story-share.css
@@ -111,15 +111,9 @@
   width: 48px !important;
   height: 48px !important;
   display: block !important;
-  text-transform: capitalize !important;
-  font-family: 'Roboto', sans-serif !important;
-  color: #fff !important;
-  font-weight: 400 !important;
-  line-height: 11px !important;
-  font-size: 11px !important;
-  text-align: center !important;
   cursor: pointer !important;
   border-radius: 4px !important;
+  overflow: visible !important;
 
   /* for svg backgrounds: */
   background-position: 8px 8px !important;
@@ -159,11 +153,17 @@
   background-color: rgba(0, 0, 0, 0.56) !important;
 }
 
-.i-amphtml-story-share-label {
+.i-amphtml-story-share-icon .i-amphtml-story-share-label {
   position: absolute !important;
   bottom: -18px !important;
   left: 0 !important;
   width: 100% !important;
   color: #333 !important;
   padding-top: 7px !important; /* Making sure the whole icon is clickable. */
+  text-transform: capitalize !important;
+  font-family: 'Roboto', sans-serif !important;
+  font-weight: 400 !important;
+  line-height: 11px !important;
+  font-size: 11px !important;
+  text-align: center !important;
 }