Skip to content

Commit

Permalink
Share menu redesign.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmajoulet
gmajoulet committed Nov 13, 2018
1 parent 0c7b46e commit 3919734
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 47 deletions.
12 changes: 10 additions & 2 deletions extensions/amp-story/1.0/amp-story-bookend.css
View file
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-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;
Expand Down
49 changes: 48 additions & 1 deletion extensions/amp-story/1.0/amp-story-share-menu.css
View file
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,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;
}
}
43 changes: 20 additions & 23 deletions extensions/amp-story/1.0/amp-story-share-menu.js
View file
Expand Up @@ -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)`
<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}
*/
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 +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_();

Expand All @@ -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_();
Expand All @@ -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);
Expand Down Expand Up @@ -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_();
Expand Down
34 changes: 16 additions & 18 deletions extensions/amp-story/1.0/amp-story-share.css
View file
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -160,12 +146,24 @@

.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-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. */
}
18 changes: 15 additions & 3 deletions extensions/amp-story/1.0/amp-story-share.js
View file
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

0 comments on commit 3919734

Please sign in to comment.