Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

share styles and markup for prpducts list suggestion

This commit is contained in:
haszari 2019-02-19 16:31:14 +13:00
parent 4f7145cf49
commit 21b0be7ef6
4 changed files with 113 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/marketplace-suggestions-rtl.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/marketplace-suggestions.css
View File

File diff suppressed because one or more lines are too long

94
assets/css/marketplace-suggestions.scss
View File

@ -26,40 +26,10 @@ a.suggestion-dismiss::before {
font-size: 1.5em;
}
.marketplace-table-banner {
h2 {
color: #555;
}
td {
vertical-align: middle;
}
td.marketplace-table-title {
border-left: 4px solid $woocommerce;
padding-left: 4em;
}
td.marketplace-table-linkout {
text-align: right;
padding-right: 1em;
a.button {
margin-right: 0.5em;
}
a.suggestion-dismiss {
position: relative;
top: 4px;
}
}
}
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-header"],
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-footer"] {
.marketplace-listitem-container-content {
.marketplace-suggestion-container-content {
h4 {
font-size: 1.1em;
@ -69,14 +39,18 @@ a.suggestion-dismiss::before {
}
}
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-body"] {
.marketplace-suggestions-container.showing-suggestion {
text-align: left;
.marketplace-listitem-container {
.marketplace-suggestion-container {
align-items: flex-start;
display: flex;
flex-direction: column;
.marketplace-listitem-container-content {
// Allows us to position the dismiss x button relative to container on mobile.
position: relative;
.marketplace-suggestion-container-content {
flex: 1 0 70%;
h4 {
@ -91,17 +65,51 @@ a.suggestion-dismiss::before {
}
}
.marketplace-listitem-container-cta {
.marketplace-suggestion-container-cta {
flex: 1 1 30%;
text-align: right;
.suggestion-dismiss {
text-decoration: none;
position: absolute;
top: 1em;
right: 1em;
}
}
}
@media screen and (min-width: 600px) {
.marketplace-listitem-container {
.marketplace-suggestion-container {
align-items: center;
flex-direction: row;
}
}
}
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-inline"] {
td:first-child {
border-left: 4px solid $woocommerce;
}
.marketplace-suggestion-container {
padding: 0.5em 0 0.5em 1em;
h4 {
margin: 0;
font-size: 1.2em;
}
.marketplace-suggestion-container-cta {
.suggestion-dismiss {
position: relative;
top: 4px;
right: auto;
margin-left: 1em;
}
}
}
}
@ -110,7 +118,6 @@ a.suggestion-dismiss::before {
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-footer"],
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-body"] {
text-align: left;
border: 1px solid $suggestions-pale-gray;
border-bottom: none;
@ -118,19 +125,16 @@ a.suggestion-dismiss::before {
border-bottom: 1px solid $suggestions-pale-gray;
}
.marketplace-listitem-container {
.marketplace-suggestion-container {
padding: 1.5em;
border-bottom: 1px solid $suggestions-pale-gray;
// Allows us to position the dismiss x button relative to container on mobile.
position: relative;
&:last-child {
border-bottom: none;
padding-bottom: 1.5em;
}
.marketplace-listitem-container-cta {
.marketplace-suggestion-container-cta {
a.button {
display: inline-block;
@ -150,7 +154,6 @@ a.suggestion-dismiss::before {
}
.suggestion-dismiss {
text-decoration: none;
position: absolute;
top: 1em;
right: 1em;
@ -160,11 +163,11 @@ a.suggestion-dismiss::before {
@media screen and (min-width: 600px) {
.marketplace-listitem-container {
.marketplace-suggestion-container {
border-bottom: none;
padding-bottom: 0;
.marketplace-listitem-container-cta {
.marketplace-suggestion-container-cta {
.suggestion-dismiss {
position: relative;
@ -173,6 +176,5 @@ a.suggestion-dismiss::before {
}
}
}
}
}

112
assets/js/admin/marketplace-suggestions.js
View File

@ -54,52 +54,10 @@
return linkoutButton;
}
function renderTableBanner( slug, title, url, buttonText, allowDismiss ) {
if ( ! title || ! url ) {
return;
}
if ( ! buttonText ) {
buttonText = 'Go';
}
var row = document.createElement( 'tr' );
row.classList.add( 'marketplace-suggestions-container' );
row.classList.add( 'marketplace-table-banner' );
row.dataset.suggestionSlug = slug;
var titleColumn = document.createElement( 'td' );
titleColumn.setAttribute( 'colspan', 5 );
titleColumn.classList.add( 'marketplace-table-title' );
var titleHeading = document.createElement( 'h2' );
titleColumn.appendChild( titleHeading );
titleHeading.textContent = title;
row.appendChild( titleColumn );
var linkoutColumn = document.createElement( 'td' );
linkoutColumn.setAttribute( 'colspan', 5 );
linkoutColumn.classList.add( 'marketplace-table-linkout' );
var linkoutButton = renderLinkout( url, buttonText, true );
linkoutColumn.appendChild( linkoutButton );
if ( allowDismiss ) {
linkoutColumn.appendChild( renderDismissButton( slug ) )
}
row.appendChild( linkoutColumn );
return row;
}
function renderListItem( slug, title, url, linkText, linkIsButton, copy, allowDismiss ) {
var container = document.createElement( 'div' );
container.classList.add( 'marketplace-listitem-container' );
container.dataset.suggestionSlug = slug;
function renderSuggestionContent( slug, title, copy ) {
var left = document.createElement( 'div' );
left.classList.add( 'marketplace-listitem-container-content' );
var right = document.createElement( 'div' );
right.classList.add( 'marketplace-listitem-container-cta' );
left.classList.add( 'marketplace-suggestion-container-content' );
if ( title ) {
var titleHeading = document.createElement( 'h4' );
@ -113,6 +71,13 @@
left.appendChild( body );
}
return left;
}
function renderSuggestionCTA( slug, url, linkText, linkIsButton, allowDismiss ) {
var right = document.createElement( 'div' );
right.classList.add( 'marketplace-suggestion-container-cta' );
if ( url && linkText ) {
var linkoutElement = renderLinkout( url, linkText, linkIsButton );
right.appendChild( linkoutElement );
@ -122,8 +87,57 @@
right.appendChild( renderDismissButton( slug ) )
}
container.appendChild( left );
container.appendChild( right );
return right;
}
function renderTableBanner( slug, title, copy, url, buttonText, allowDismiss ) {
if ( ! title || ! url ) {
return;
}
if ( ! buttonText ) {
buttonText = 'Go';
}
var row = document.createElement( 'tr' );
row.classList.add( 'marketplace-table-banner' );
row.classList.add( 'marketplace-suggestions-container' );
row.classList.add( 'showing-suggestion' );
row.dataset.marketplaceSuggestionsContext = 'products-list-inline';
row.dataset.suggestionSlug = slug;
var cell = document.createElement( 'td' );
cell.setAttribute( 'colspan', 10 );
var container = document.createElement( 'div' );
container.classList.add( 'marketplace-suggestion-container' );
container.dataset.suggestionSlug = slug;
container.appendChild(
renderSuggestionContent( slug, title, copy )
);
container.appendChild(
renderSuggestionCTA( slug, url, buttonText, true, allowDismiss )
);
cell.appendChild( container );
row.appendChild( cell );
return row;
}
function renderListItem( slug, title, copy, url, linkText, linkIsButton, allowDismiss ) {
var container = document.createElement( 'div' );
container.classList.add( 'marketplace-suggestion-container' );
container.dataset.suggestionSlug = slug;
container.appendChild(
renderSuggestionContent( slug, title, copy )
);
container.appendChild(
renderSuggestionCTA( slug, url, linkText, linkIsButton, allowDismiss )
);
return container;
}
@ -139,7 +153,6 @@
return ! _.contains( marketplace_suggestions.dismissed_suggestions, promo.slug );
} );
// hide promos for things the user already has installed
promos = _.filter( promos, function( promo ) {
return ! _.contains( marketplace_suggestions.installed_woo_plugins, promo['hide-if-installed'] );
@ -201,10 +214,10 @@
var content = renderListItem(
promos[ i ].slug,
promos[ i ].title,
promos[ i ].copy,
promos[ i ].url,
linkText,
linkoutIsButton,
promos[ i ].copy,
allowDismiss
);
$( this ).append( content );
@ -233,6 +246,7 @@
var content = renderTableBanner(
promos[ 0 ].slug,
promos[ 0 ].title,
promos[ 0 ].copy,
promos[ 0 ].url,
promos[ 0 ]['button-text'],
allowDismiss