Add thumbnail placeholder for 23vivi

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,7 +42,15 @@ 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;
 
@@ -42,11 +58,7 @@ let AccordionListItemPiece = React.createClass({
         // 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 = (
-                <span className="ascribe-logo-circle">
-                    <span>A</span>
-                </span>
-            );
+            thumbnail = (<ThumbnailPlaceholder />);
         } else {
             thumbnail = (
                 <div style={{backgroundImage: 'url("' + url_safe + '")'}}/>

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 (
+            <span className="ascribe-logo-circle">
+                <span>A</span>
+            </span>
+        );
+    }
+});
+
+export default accordionListItemThumbnailPlaceholder;

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 (
             <AccordionListItemPiece
-                className={this.props.className}
-                piece={this.props.content}
+                className={className}
+                piece={content}
                 subsubheading={
                     <div className="pull-left">
-                        <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
+                        <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
                         {this.getLicences()}
-                    </div>}
+                    </div>
+                }
                 buttons={
                     <div>
                         <AclProxy
-                            aclObject={this.props.content.acl}
+                            aclObject={content.acl}
                             aclName="acl_view_editions">
                             <AccordionListItemEditionWidget
                                 className="pull-right"
-                                piece={this.props.content}
+                                piece={content}
                                 toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
                                 onPollingSuccess={this.onPollingSuccess}/>
                         </AclProxy>
-                    </div>}
-                    badge={this.getGlyphicon()}>
+                    </div>
+                }
+                badge={this.getGlyphicon()}
+                thumbnailPlaceholder={thumbnailPlaceholder}>
                 {this.getCreateEditionsDialog()}
                 {/* this.props.children is AccordionListItemTableEditions */}
-                {this.props.children}
+                {children}
             </AccordionListItemPiece>
         );
     }

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 = <AscribeSpinner color='dark-blue' size='lg'/>;
-        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 :
                         <button className="btn btn-default btn-ascribe-add">
                             <span className="icon-ascribe icon-ascribe-add" />
                         </button>
@@ -294,7 +301,7 @@ let PieceList = React.createClass({
                 </PieceListBulkModal>
                 <PieceListFilterDisplay
                     filterBy={this.state.filterBy}
-                    filterParams={this.props.filterParams}/>
+                    filterParams={filterParams}/>
                 <AccordionList
                     className="ascribe-accordion-list"
                     changeOrder={this.accordionChangeOrder}
@@ -312,6 +319,7 @@ let PieceList = React.createClass({
                             <AccordionListItemType
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
                                 content={piece}
+                                thumbnailPlaceholder={customThumbnailPlaceholder}
                                 key={i}>
                                     <AccordionListItemTableEditions
                                         className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"

js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js

@@ -0,0 +1,15 @@
+'use strict'
+
+import React from 'react';
+
+let Vivi23AccordionListItemThumbnailPlaceholder = React.createClass({
+    render() {
+        return (
+            <span className="ascribe-thumbnail-placeholder">
+                23
+            </span>
+        );
+    }
+});
+
+export default Vivi23AccordionListItemThumbnailPlaceholder;

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 (
+            <MarketPieceList
+                customThumbnailPlaceholder={Vivi23AccordionListItemThumbnailPlaceholder}
+                location={this.props.location} />
+        );
+    }
+
+});
+
+export default vivi23PieceList;

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} />
         );
     }
 });

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': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LumenusLanding)} />
+            <IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(Vivi23Landing)} />
             <Route
                 path='login'
                 component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} />
@@ -218,7 +221,7 @@ let ROUTES = {
                 headerTitle='+ NEW WORK'/>
             <Route
                 path='collection'
-                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketPieceList)}
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(Vivi23PieceList)}
                 headerTitle='COLLECTION'/>
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
             <Route path='editions/:editionId' component={MarketEditionContainer} />

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

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;