From 73bd3b4e9f0d95375cc9eab13b841443022ea843 Mon Sep 17 00:00:00 2001 From: gmajoulet Date: Tue, 13 Nov 2018 17:04:28 -0500 Subject: [PATCH 1/2] Share menu redesign. --- .../amp-story/1.0/amp-story-bookend.css | 12 ++++- .../amp-story/1.0/amp-story-share-menu.css | 49 ++++++++++++++++++- .../amp-story/1.0/amp-story-share-menu.js | 43 ++++++++-------- extensions/amp-story/1.0/amp-story-share.css | 34 ++++++------- extensions/amp-story/1.0/amp-story-share.js | 18 +++++-- 5 files changed, 109 insertions(+), 47 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story-bookend.css b/extensions/amp-story/1.0/amp-story-bookend.css index 2207b45add91..edce1dbde9d1 100644 --- a/extensions/amp-story/1.0/amp-story-bookend.css +++ b/extensions/amp-story/1.0/amp-story-bookend.css @@ -325,16 +325,24 @@ white-space: nowrap !important; } -.i-amphtml-story-bookend .i-amphtml-story-share-widget { +.i-amphtml-story-bookend .i-amphtml-story-share-widget { margin-left: 0 !important; margin-right: 0 !important; } -.i-amphtml-story-bookend .i-amphtml-story-share-list { +.i-amphtml-story-bookend .i-amphtml-story-share-list { padding-left: 16px !important; padding-right: 16px !important; } +.i-amphtml-story-bookend .i-amphtml-story-share-icon { + background-color: rgba(255, 255, 255, 0.15) !important; +} + +.i-amphtml-story-bookend .i-amphtml-story-share-label { + color: #FFF !important; +} + [desktop].i-amphtml-story-bookend { transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important; transform: translateY(0) !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 index db28751717b2..831d30d7c056 100644 --- a/extensions/amp-story/1.0/amp-story-share-menu.css +++ b/extensions/amp-story/1.0/amp-story-share-menu.css @@ -56,7 +56,7 @@ left: 0 !important; right: 0 !important; height: auto !important; - background: rgba(0, 0, 0, 0.9) !important; + background: #FFF !important; border-radius: 8px 8px 0 0 !important; transform: translate3d(0, 100%, 0) !important; transition: transform 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important; @@ -66,3 +66,50 @@ transform: translate3d(0, 0, 0) !important; transition: transform 0.2s cubic-bezier(0.0, 0.0, 0.2, 1) !important; } + +.i-amphtml-story-share-menu-close-button { + display: none !important; +} + +@media (min-width: 1024px) { + .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; + } + + .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; + } + + .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 index 48e2f2712569..4452c2862b13 100644 --- a/extensions/amp-story/1.0/amp-story-share-menu.js +++ b/extensions/amp-story/1.0/amp-story-share-menu.js @@ -27,43 +27,36 @@ import {createShadowRootWithStyle} from './utils'; import {dev} from '../../../src/log'; import {dict} from './../../../src/utils/object'; import {getAmpdoc} from '../../../src/service'; -import {renderAsElement} from './simple-template'; +import {htmlFor} from '../../../src/static-template'; import {toggle} from '../../../src/style'; /** @const {string} Class to toggle the share menu. */ export const VISIBLE_CLASS = 'i-amphtml-story-share-menu-visible'; -/** @const {string} Class for the share widget component container. */ -const SHARE_WIDGET_CONTAINER_CLASS = 'i-amphtml-story-share-menu-container'; - /** * Quick share template, used as a fallback if native sharing is not supported. * @private @const {!./simple-template.ElementDef} */ -const TEMPLATE = { - tag: 'div', - attrs: dict({ - 'class': 'i-amphtml-story-share-menu i-amphtml-story-system-reset'}), - children: [ - { - tag: 'div', - attrs: dict({'class': SHARE_WIDGET_CONTAINER_CLASS}), - children: [], - }, - ], +const getTemplate = element => { + return htmlFor(element)` +
+
+ + × + +
+
`; }; /** * System amp-social-share button template. * @private @const {!./simple-template.ElementDef} */ -const AMP_SOCIAL_SYSTEM_SHARE_TEMPLATE = { - tag: 'amp-social-share', - attrs: /** @type {!JsonObject} */ (dict({'type': 'system'})), +const getAmpSocialSystemShareTemplate = element => { + return htmlFor(element)``; }; - /** * Share menu UI. */ @@ -136,8 +129,7 @@ export class ShareMenu { */ buildForSystemSharing_() { this.shareWidget_.loadRequiredExtensions(getAmpdoc(this.parentEl_)); - this.element_ = - renderAsElement(this.win_.document, AMP_SOCIAL_SYSTEM_SHARE_TEMPLATE); + this.element_ = getAmpSocialSystemShareTemplate(this.parentEl_); this.initializeListeners_(); @@ -154,7 +146,7 @@ export class ShareMenu { buildForFallbackSharing_() { const root = this.win_.document.createElement('div'); - this.element_ = renderAsElement(this.win_.document, TEMPLATE); + this.element_ = getTemplate(this.parentEl_); createShadowRootWithStyle(root, this.element_, CSS); this.initializeListeners_(); @@ -163,7 +155,7 @@ export class ShareMenu { measure: () => { this.innerContainerEl_ = this.element_ - ./*OK*/querySelector(`.${SHARE_WIDGET_CONTAINER_CLASS}`); + ./*OK*/querySelector('.i-amphtml-story-share-menu-container'); }, mutate: () => { this.parentEl_.appendChild(root); @@ -221,6 +213,11 @@ export class ShareMenu { */ onShareMenuClick_(event) { const el = dev().assertElement(event.target); + + if (el.classList.contains('i-amphtml-story-share-menu-close-button')) { + return this.close_(); + } + // Closes the menu if click happened outside of the menu main container. if (!closest(el, el => el === this.innerContainerEl_, this.element_)) { this.close_(); diff --git a/extensions/amp-story/1.0/amp-story-share.css b/extensions/amp-story/1.0/amp-story-share.css index 8588d33d9820..09e83462d2ac 100644 --- a/extensions/amp-story/1.0/amp-story-share.css +++ b/extensions/amp-story/1.0/amp-story-share.css @@ -109,18 +109,17 @@ box-sizing: border-box !important; position: relative !important; width: 48px !important; - height: 66px !important; - padding: 56px 0 0 0 !important; - background-color: transparent !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: 10px !important; - font-size: 10px !important; + line-height: 11px !important; + font-size: 11px !important; text-align: center !important; cursor: pointer !important; + border-radius: 4px !important; /* for svg backgrounds: */ background-position: 8px 8px !important; @@ -135,19 +134,6 @@ background-position: 5px 5px !important; } -.i-amphtml-story-share-icon::before { - content: " " !important; - border-radius: 4px !important; - background-color: rgba(255, 255, 255, 0.15) !important; - width: 48px !important; - height: 48px !important; - position: absolute !important; - display: block !important; - top: 0 !important; - left: 0 !important; - z-index: -1 !important; -} - .i-amphtml-story-share-icon:active, .i-amphtml-story-share-icon:focus { outline: none !important; @@ -160,12 +146,24 @@ .i-amphtml-story-share-icon[type=email] { background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-color: rgba(0, 0, 0, 0.56) !important; } .i-amphtml-story-share-icon[type=system] { background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-color: rgba(0, 0, 0, 0.56) !important; } .i-amphtml-story-share-icon-link { background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-color: rgba(0, 0, 0, 0.56) !important; +} + +.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. */ } diff --git a/extensions/amp-story/1.0/amp-story-share.js b/extensions/amp-story/1.0/amp-story-share.js index 5efe4b9cc047..3d5b8c9de54f 100644 --- a/extensions/amp-story/1.0/amp-story-share.js +++ b/extensions/amp-story/1.0/amp-story-share.js @@ -105,7 +105,13 @@ const LINK_SHARE_ITEM_TEMPLATE = { 'class': 'i-amphtml-story-share-icon i-amphtml-story-share-icon-link', }), - localizedStringId: LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK, + children: [ + { + tag: 'span', + attrs: dict({'class': 'i-amphtml-story-share-label'}), + localizedStringId: LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK, + }, + ], }; @@ -149,12 +155,18 @@ function buildProvider(doc, shareType, opt_params) { attrs: /** @type {!JsonObject} */ (Object.assign( dict({ 'width': 48, - 'height': 66, + 'height': 48, 'class': 'i-amphtml-story-share-icon', 'type': shareType, }), buildProviderParams(opt_params))), - localizedStringId: shareProviderLocalizedStringId, + children: [ + { + tag: 'span', + attrs: dict({'class': 'i-amphtml-story-share-label'}), + localizedStringId: shareProviderLocalizedStringId, + }, + ], }, ])); } From 1dc80ed590448fccd85d004b611e579671acdad2 Mon Sep 17 00:00:00 2001 From: gmajoulet Date: Wed, 14 Nov 2018 11:03:46 -0500 Subject: [PATCH 2/2] Reviews. --- .../amp-story/1.0/amp-story-bookend.css | 4 +- .../amp-story/1.0/amp-story-share-menu.css | 72 +++++++++---------- .../amp-story/1.0/amp-story-share-menu.js | 25 ++++++- extensions/amp-story/1.0/amp-story-share.css | 16 ++--- 4 files changed, 67 insertions(+), 50 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story-bookend.css b/extensions/amp-story/1.0/amp-story-bookend.css index edce1dbde9d1..1bf04524ad93 100644 --- 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 index 831d30d7c056..b08481b2a2ca 100644 --- 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 index 4452c2862b13..d16674be5cda 100644 --- 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)``; @@ -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 index 09e83462d2ac..1042dc08d6a0 100644 --- 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; }