Merge pull request #212 from ascribe/custom-button-for-bokk

Custom bokk ACL button

js/components/ascribe_buttons/acls/acl_button.js

@@ -42,6 +42,7 @@ export default function AclButton({ action, displayName, title, tooltip }) {
 
         render() {
             const { availableAcls,
+                    buttonAcceptName,
                     buttonAcceptClassName,
                     currentUser,
                     email,
@@ -63,6 +64,7 @@ export default function AclButton({ action, displayName, title, tooltip }) {
                         title={title}>
                         <AclFormFactory
                             action={action}
+                            acceptName={buttonAcceptName}
                             currentUser={currentUser}
                             email={email}
                             pieceOrEditions={pieceOrEditions}

js/components/ascribe_forms/acl_form_factory.js

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import Button from 'react-bootstrap/lib/Button';
+
 import ConsignForm from '../ascribe_forms/form_consign';
 import UnConsignForm from '../ascribe_forms/form_unconsign';
 import TransferForm from '../ascribe_forms/form_transfer';
@@ -16,10 +18,13 @@ import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
 import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils';
+import { getLangText } from '../../utils/lang_utils';
+
 
 let AclFormFactory = React.createClass({
     propTypes: {
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
+        acceptName: React.PropTypes.string,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
@@ -63,6 +68,7 @@ let AclFormFactory = React.createClass({
                 labels,
                 handleSuccess,
                 showNotification } = this.props;
+        let acceptButton;
 
         const formMessage = message || getAclFormMessage({
             aclName: action,
@@ -71,9 +77,24 @@ let AclFormFactory = React.createClass({
             senderName: currentUser && currentUser.username
         });
 
+        if (this.props.acceptName) {
+            acceptButton = (
+                <div className="modal-footer">
+                    <p className="pull-right">
+                        <Button
+                            className="btn btn-default btn-sm ascribe-margin-1px"
+                            type="submit">
+                            {getLangText(this.props.acceptName)}
+                        </Button>
+                    </p>
+                </div>
+            );
+        }
+
         if (action === 'acl_consign') {
             return (
                 <ConsignForm
+                    buttons={acceptButton}
                     autoFocusProperty={autoFocusProperty}
                     email={email}
                     message={formMessage}
@@ -85,6 +106,7 @@ let AclFormFactory = React.createClass({
         } else if (action === 'acl_unconsign') {
             return (
                 <UnConsignForm
+                    buttons={acceptButton}
                     message={formMessage}
                     id={this.getFormDataId()}
                     url={ApiUrls.ownership_unconsigns}
@@ -93,6 +115,7 @@ let AclFormFactory = React.createClass({
         } else if (action === 'acl_transfer') {
             return (
                 <TransferForm
+                    buttons={acceptButton}
                     message={formMessage}
                     id={this.getFormDataId()}
                     url={ApiUrls.ownership_transfers}
@@ -101,6 +124,7 @@ let AclFormFactory = React.createClass({
         } else if (action === 'acl_loan') {
             return (
                 <LoanForm
+                    buttons={acceptButton}
                     email={email}
                     message={formMessage}
                     id={this.getFormDataId()}
@@ -119,6 +143,7 @@ let AclFormFactory = React.createClass({
         } else if (action === 'acl_share') {
             return (
                 <ShareForm
+                    buttons={acceptButton}
                     message={formMessage}
                     id={this.getFormDataId()}
                     url={this.isPiece() ? ApiUrls.ownership_shares_pieces

js/components/whitelabel/wallet/components/bokk/bokk_acl_button_list.js

@@ -0,0 +1,61 @@
+'use strict';
+
+import React from 'react';
+
+import AclButton from '../../../../ascribe_buttons/acls/acl_button';
+import DeleteButton from '../../../../ascribe_buttons/delete_button';
+import EmailButton from '../../../../ascribe_buttons/acls/email_button';
+
+import { selectFromObject } from '../../../../../utils/general_utils';
+import { getLangText } from '../../../../../utils/lang_utils';
+
+
+let BokkAclButtonList = React.createClass({
+    propTypes: {
+        availableAcls: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object.isRequired,
+        handleSuccess: React.PropTypes.func.isRequired,
+        pieceOrEditions: React.PropTypes.array.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]),
+        className: React.PropTypes.string
+    },
+
+    render() {
+        const { availableAcls,
+                children,
+                className,
+                currentUser,
+                handleSuccess,
+                pieceOrEditions,
+                whitelabel } = this.props;
+
+        const buttonProps = selectFromObject(this.props, [
+            'availableAcls',
+            'currentUser',
+            'handleSuccess',
+            'pieceOrEditions'
+        ]);
+
+        let BokkButton = AclButton({
+            action: 'acl_loan',
+            displayName: 'LoanButton',
+            title: getLangText('Partager avec Bokk')
+        })
+
+        return (
+            <div className={className}>
+                <EmailButton {...buttonProps} />
+                <DeleteButton {...buttonProps} />
+                <BokkButton buttonAcceptName='PARTAGER AVEC BOKK' {...buttonProps} />
+                {children}
+            </div>
+        );
+    }
+});
+
+export default BokkAclButtonList;

js/components/whitelabel/wallet/components/bokk/bokk_edition_container.js

@@ -0,0 +1,22 @@
+'use strict';
+
+import React from 'react';
+
+import BokkAclButtonList from './bokk_acl_button_list';
+
+import EditionContainer from '../../../../ascribe_detail/edition_container';
+
+
+let BokkEditionContainer = React.createClass({
+    propTypes: EditionContainer.propTypes,
+
+    render() {
+        return (
+            <EditionContainer
+                {...this.props}
+                actionPanelButtonListType={BokkAclButtonList} />
+        );
+    }
+});
+
+export default BokkEditionContainer;

js/components/whitelabel/wallet/components/bokk/bokk_piece_list.js

@@ -0,0 +1,34 @@
+'use strict';
+
+import React from 'react';
+
+import PieceList from '../../../../piece_list';
+import BokkAclButtonList from './bokk_acl_button_list.js';
+
+
+let BokkPieceList = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object
+    },
+
+    render() {
+        return (
+            <PieceList
+                {...this.props}
+                redirectTo={{
+                    pathname: '/register_piece',
+                    query: {
+                        'slide_num': 0
+                    }
+                }}
+                bulkModalButtonListType={BokkAclButtonList} />
+        );
+    }
+});
+
+export default BokkPieceList;

js/components/whitelabel/wallet/wallet_routes.js

@@ -20,7 +20,10 @@ import ErrorNotFoundPage from '../../../components/error_not_found_page';
 import Footer from '../../../components/footer.js';
 
 import CCRegisterPiece from './components/cc/cc_register_piece';
+
 import BokkRegisterPiece from './components/bokk/bokk_register_piece';
+import BokkPieceList from './components/bokk/bokk_piece_list';
+import BokkEditionContainer from './components/bokk/bokk_edition_container';
 
 import CylandLanding from './components/cyland/cyland_landing';
 import CylandPieceContainer from './components/cyland/cyland_detail/cyland_piece_container';
@@ -476,7 +479,7 @@ let ROUTES = {
                 headerTitle={getLangText('+ NEW WORK')} />
             <Route
                 path='collection'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(BokkPieceList)}
                 headerTitle={getLangText('COLLECTION')}
                 disableOn='noPieces' />
             <Route
@@ -484,7 +487,7 @@ let ROUTES = {
                 component={PieceContainer} />
             <Route
                 path='editions/:editionId'
-                component={EditionContainer} />
+                component={BokkEditionContainer} />
             <Route
                 path='coa_verify'
                 component={CoaVerifyContainer} />

sass/whitelabel/wallet/bokk/bokk_custom_style.scss

@@ -2,6 +2,7 @@ $bokk--nav-bg-color: #4d2e80;
 $bokk--nav-fg-prim-color: #1E1E1E;
 $bokk--button-color: #ab52bd;
 $bokk--hover-color: ;
+$bokk--nav-bt:#FFFFFF;
 
 .client--bokk {
     .navbar-default {
@@ -14,17 +15,19 @@ $bokk--hover-color: ;
 	}
     .navbar-nav > li > a,
     .navbar-nav > li > .active a {
-        color: $bokk--nav-fg-prim-color;
+        color: $bokk--nav-bt;
         background-color: $bokk--nav-bg-color;
     }
     .navbar-nav > li > a:hover {
         color: lighten($bokk--nav-fg-prim-color, 40%);
+		padding-bottom:5px;
+		border-bottom: 1px solid $bokk--button-color;
     }
     .navbar-nav > .active a,
     .navbar-nav > .active a:hover,
     .navbar-nav > .active a:focus {
-        color: $bokk--nav-fg-prim-color;
+        color: $bokk--nav-bt;
-        border-bottom-color: $bokk--nav-fg-prim-color;
+        border-bottom-color: $bokk--button-color;
         background-color: $bokk--nav-bg-color;
     }
     .dropdown-menu > li > a:hover,
@@ -46,7 +49,7 @@ $bokk--hover-color: ;
     }
 
     .dropdown-menu > li > a {
-        color: $bokk--nav-fg-prim-color;
+        color: $bokk--nav-bt;
     }
 
     .navbar-toggle .icon-bar {
@@ -93,7 +96,7 @@ $bokk--hover-color: ;
     .btn-secondary {
         background-color: $bokk--nav-bg-color;
         border-color: $bokk--nav-fg-prim-color;
-        color: $bokk--nav-fg-prim-color;
+        color: $bokk--nav-bt;
 
         &:hover,
         &:active,
@@ -104,8 +107,8 @@ $bokk--hover-color: ;
         &.active:hover,
         &.active:focus,
         &.active.focus {
-            background-color: $bokk--nav-fg-prim-color;
+            background-color: $bokk--nav-bt;
-            border-color: $bokk--nav-fg-prim-color;
+            border-color: $bokk--nav-bg-color;
             color: $bokk--nav-bg-color;
         }
     }
@@ -219,4 +222,4 @@ $bokk--hover-color: ;
 
 .client--bokk  .upload-button-wrapper > span {
     color: $bokk--button-color;
-}
+}