From 3be033cdd5893eefe79e2dd9187b6ee73e0a8e2e Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Wed, 2 Dec 2015 19:31:50 +0100 Subject: [PATCH] Add thumbnail placeholder for 23vivi --- .../accordion_list_item_piece.js | 28 +++++++++++++------ ...cordion_list_item_thumbnail_placeholder.js | 15 ++++++++++ .../accordion_list_item_wallet.js | 23 +++++++++------ js/components/piece_list.js | 22 ++++++++++----- ...cordion_list_item_thumbnail_placeholder.js | 15 ++++++++++ .../components/23vivi/23vivi_piece_list.js | 24 ++++++++++++++++ .../components/market/market_piece_list.js | 5 +++- .../whitelabel/wallet/wallet_routes.js | 7 +++-- sass/ascribe-fonts/ascribe-fonts.scss | 22 --------------- sass/ascribe_accordion_list.scss | 28 +++++++++++++++++++ 10 files changed, 140 insertions(+), 49 deletions(-) create mode 100644 js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js create mode 100644 js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js create mode 100644 js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js diff --git a/js/components/ascribe_accordion_list/accordion_list_item_piece.js b/js/components/ascribe_accordion_list/accordion_list_item_piece.js index 4547ce3b..74322e51 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_piece.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js @@ -4,6 +4,7 @@ import React from 'react'; import { Link } from 'react-router'; import AccordionListItem from './accordion_list_item'; +import AccordionListItemThumbnailPlacholder from './accordion_list_item_thumbnail_placeholder'; import { getLangText } from '../../utils/lang_utils'; @@ -19,7 +20,14 @@ let AccordionListItemPiece = React.createClass({ ]), subsubheading: React.PropTypes.object, buttons: React.PropTypes.object, - badge: React.PropTypes.object + badge: React.PropTypes.object, + thumbnailPlaceholder: React.PropTypes.element + }, + + getDefaultProps() { + return { + thumbnailPlaceholder: AccordionListItemThumbnailPlacholder + }; }, getLinkData() { @@ -34,19 +42,23 @@ let AccordionListItemPiece = React.createClass({ }, render() { - const { className, piece, artistName, buttons, badge, children, subsubheading } = this.props; + const { + artistName, + badge, + buttons, + children, + className, + piece, + subsubheading, + thumbnailPlaceholder: ThumbnailPlaceholder } = this.props; const { url, url_safe } = piece.thumbnail; let thumbnail; // Since we're going to refactor the thumbnail generation anyway at one point, // for not use the annoying ascribe_spiral.png, we're matching the url against // this name and replace it with a CSS version of the new logo. - if(url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) { - thumbnail = ( - - A - - ); + if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) { + thumbnail = (); } else { thumbnail = (
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js b/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js new file mode 100644 index 00000000..6ba4d6ab --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js @@ -0,0 +1,15 @@ +'use strict' + +import React from 'react'; + +let accordionListItemThumbnailPlaceholder = React.createClass({ + render() { + return ( + + A + + ); + } +}); + +export default accordionListItemThumbnailPlaceholder; diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js index da45d1e8..6fb3abeb 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js @@ -31,6 +31,7 @@ let AccordionListItemWallet = React.createClass({ propTypes: { className: React.PropTypes.string, content: React.PropTypes.object, + thumbnailPlaceholder: React.PropTypes.element, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element @@ -123,32 +124,36 @@ let AccordionListItemWallet = React.createClass({ }, render() { + const { children, className, content, thumbnailPlaceholder } = this.props; return ( - {Moment(this.props.content.date_created, 'YYYY-MM-DD').year()} + {Moment(content.date_created, 'YYYY-MM-DD').year()} {this.getLicences()} -
} + + } buttons={
-
} - badge={this.getGlyphicon()}> + + } + badge={this.getGlyphicon()} + thumbnailPlaceholder={thumbnailPlaceholder}> {this.getCreateEditionsDialog()} {/* this.props.children is AccordionListItemTableEditions */} - {this.props.children} + {children} ); } diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 9208df92..229fb078 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -38,6 +38,7 @@ let PieceList = React.createClass({ canLoadPieceList: React.PropTypes.bool, redirectTo: React.PropTypes.string, customSubmitButton: React.PropTypes.element, + customThumbnailPlaceholder: React.PropTypes.element, filterParams: React.PropTypes.array, orderParams: React.PropTypes.array, orderBy: React.PropTypes.string, @@ -251,9 +252,15 @@ let PieceList = React.createClass({ }, render() { + const { + accordionListItemType: AccordionListItemType, + bulkModalButtonListType: BulkModalButtonListType, + customSubmitButton, + customThumbnailPlaceholder, + filterParams, + orderParams } = this.props; + const loadingElement = ; - const AccordionListItemType = this.props.accordionListItemType; - const BulkModalButtonListType = this.props.bulkModalButtonListType; const selectedEditions = this.fetchSelectedEditionList(); const availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view'); @@ -265,14 +272,14 @@ let PieceList = React.createClass({ className="ascribe-piece-list-toolbar" searchFor={this.searchFor} searchQuery={this.state.search} - filterParams={this.props.filterParams} - orderParams={this.props.orderParams} + filterParams={filterParams} + orderParams={orderParams} filterBy={this.state.filterBy} orderBy={this.state.orderBy} applyFilterBy={this.applyFilterBy} applyOrderBy={this.applyOrderBy}> - {this.props.customSubmitButton ? - this.props.customSubmitButton : + {customSubmitButton ? + customSubmitButton : @@ -294,7 +301,7 @@ let PieceList = React.createClass({ + filterParams={filterParams}/> + 23 + + ); + } +}); + +export default Vivi23AccordionListItemThumbnailPlaceholder; diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js new file mode 100644 index 00000000..d889a9a0 --- /dev/null +++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js @@ -0,0 +1,24 @@ +'use strict' + +import React from 'react'; + +import Vivi23AccordionListItemThumbnailPlaceholder from './23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder'; + +import MarketPieceList from '../market/market_piece_list'; + +let vivi23PieceList = React.createClass({ + propTypes: { + location: React.PropTypes.object + }, + + render() { + return ( + + ); + } + +}); + +export default vivi23PieceList; diff --git a/js/components/whitelabel/wallet/components/market/market_piece_list.js b/js/components/whitelabel/wallet/components/market/market_piece_list.js index 8ffab5a5..a6198b4a 100644 --- a/js/components/whitelabel/wallet/components/market/market_piece_list.js +++ b/js/components/whitelabel/wallet/components/market/market_piece_list.js @@ -17,6 +17,7 @@ import { getLangText } from '../../../../../utils/lang_utils'; let MarketPieceList = React.createClass({ propTypes: { + customThumbnailPlaceholder: React.PropTypes.element, location: React.PropTypes.object }, @@ -49,6 +50,7 @@ let MarketPieceList = React.createClass({ }, render() { + const { customThumbnailPlaceholder, location } = this.props; const { currentUser, whitelabel } = this.state; let filterParams = null; let canLoadPieceList = false; @@ -72,8 +74,9 @@ let MarketPieceList = React.createClass({ canLoadPieceList={canLoadPieceList} redirectTo="/register_piece?slide_num=0" bulkModalButtonListType={MarketAclButtonList} + customThumbnailPlaceholder={customThumbnailPlaceholder} filterParams={filterParams} - location={this.props.location} /> + location={location} /> ); } }); diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 92b53dc6..fbb124bf 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -37,6 +37,9 @@ import MarketEditionContainer from './components/market/market_detail/market_edi import LumenusLanding from './components/lumenus/lumenus_landing'; +import Vivi23Landing from './components/23vivi/23vivi_landing'; +import Vivi23PieceList from './components/23vivi/23vivi_piece_list'; + import AuthProxyHandler from '../../../components/ascribe_routes/proxy_routes/auth_proxy_handler'; import WalletApp from './wallet_app'; @@ -193,7 +196,7 @@ let ROUTES = { ), '23vivi': ( - + @@ -218,7 +221,7 @@ let ROUTES = { headerTitle='+ NEW WORK'/> diff --git a/sass/ascribe-fonts/ascribe-fonts.scss b/sass/ascribe-fonts/ascribe-fonts.scss index 8b66627d..a770d556 100644 --- a/sass/ascribe-fonts/ascribe-fonts.scss +++ b/sass/ascribe-fonts/ascribe-fonts.scss @@ -248,25 +248,3 @@ font-size: 18px; padding: 4px 12px 0 10px } - -.ascribe-logo-circle { - border: 6px solid #F6F6F6; - border-radius: 10em; - position: relative; - top: 10%; - left: 10%; - - display: block; - width: 80%; - height: 80%; - - > span { - color: #F6F6F6; - position: absolute; - top: -.29em; - left: .16em; - - font-size: 5em; - font-weight: normal; - } -} \ No newline at end of file diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss index 675bfa80..791743fc 100644 --- a/sass/ascribe_accordion_list.scss +++ b/sass/ascribe_accordion_list.scss @@ -60,6 +60,34 @@ $ascribe-accordion-list-item-height: 100px; background-size: cover; } + .ascribe-logo-circle { + border: 6px solid #F6F6F6; + border-radius: 10em; + position: relative; + top: 10%; + left: 10%; + + display: block; + width: 80%; + height: 80%; + + > span { + color: #F6F6F6; + position: absolute; + top: -.29em; + left: .16em; + + font-size: 5em; + font-weight: normal; + } + } + + .ascribe-thumbnail-placeholder { + color: #F6F6F6; + font-size: 5em; + font-weight: normal; + } + //&::before { // content: ' '; // display: inline-block;