Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stories share menu redesign. #19303

Merged
merged 2 commits into from Nov 14, 2018
Merged

Stories share menu redesign. #19303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
73bd3b4
Share menu redesign.
gmajoulet Nov 13, 2018
1dc80ed
Reviews.
gmajoulet Nov 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 10 additions & 2 deletions extensions/amp-story/1.0/amp-story-bookend.css
View file
Open in desktop
Expand Up @@ -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-item .i-amphtml-story-share-icon {
background-color: rgba(255, 255, 255, 0.15) !important;
}

.i-amphtml-story-bookend .i-amphtml-story-share-icon .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;
Expand Down
47 changes: 46 additions & 1 deletion extensions/amp-story/1.0/amp-story-share-menu.css
View file
Open in desktop
Expand Up @@ -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;
Expand All @@ -66,3 +66,48 @@
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;
}

[desktop-fullbleed].i-amphtml-story-share-menu {
display: flex !important;
align-items: center !important;
justify-content: center !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;
}

[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;
}

[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;
}

[desktop-fullbleed] .i-amphtml-story-share-item {
padding: 0 !important;
margin: 12px 24px !important;
}
68 changes: 42 additions & 26 deletions extensions/amp-story/1.0/amp-story-share-menu.js
View file
Open in desktop
Expand Up @@ -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';
Expand All @@ -25,45 +26,39 @@ 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 {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}
* @param {!Element} element
* @return {!Element}
*/
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)`
<div class="i-amphtml-story-share-menu i-amphtml-story-system-reset">
<div class="i-amphtml-story-share-menu-container">
<span class="i-amphtml-story-share-menu-close-button" role="button">
&times;
</span>
</div>
</div>`;
};

/**
* System amp-social-share button template.
* @private @const {!./simple-template.ElementDef}
* @param {!Element} element
* @return {!Element}
*/
const AMP_SOCIAL_SYSTEM_SHARE_TEMPLATE = {
tag: 'amp-social-share',
attrs: /** @type {!JsonObject} */ (dict({'type': 'system'})),
const getAmpSocialSystemShareTemplate = element => {
return htmlFor(element)`<amp-social-share type="system"></amp-social-share>`;
};


/**
* Share menu UI.
*/
Expand Down Expand Up @@ -136,8 +131,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_();

Expand All @@ -154,7 +148,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_();
Expand All @@ -163,7 +157,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);
Expand All @@ -178,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);
});
Expand Down Expand Up @@ -221,12 +219,30 @@ 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_();
}
}

/**
* 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
Expand Down
44 changes: 21 additions & 23 deletions extensions/amp-story/1.0/amp-story-share.css
View file
Open in desktop
Expand Up @@ -109,18 +109,11 @@
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;
text-align: center !important;
cursor: pointer !important;
border-radius: 4px !important;
overflow: visible !important;

/* for svg backgrounds: */
background-position: 8px 8px !important;
Expand All @@ -135,19 +128,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;
Expand All @@ -160,12 +140,30 @@

.i-amphtml-story-share-icon[type=email] {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" fill="#ffffff"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !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,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>') !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,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>') !important;
background-color: rgba(0, 0, 0, 0.56) !important;
}

.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;
}
18 changes: 15 additions & 3 deletions extensions/amp-story/1.0/amp-story-share.js
View file
Open in desktop
Expand Up @@ -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,
},
],
};


Expand Down Expand Up @@ -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,
},
],
},
]));
}
Expand Down