ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add Liquid Gallery Whitelabel Page

This commit is contained in:
tim 2016-04-06 16:22:03 +02:00
parent b6c8e5c65e
commit 76daa7edc2
8 changed files with 211 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -36,6 +36,7 @@ Additionally, to work on the white labeling functionality, you need to edit your
127.0.0.1 polline.localhost.com 127.0.0.1 polline.localhost.com
127.0.0.1 artcity.localhost.com 127.0.0.1 artcity.localhost.com
127.0.0.1 demo.localhost.com 127.0.0.1 demo.localhost.com
127.0.0.1 liquidgallery.localhost.com
``` ```

73
js/components/whitelabel/wallet/components/market/market_landing.js Normal file
View File

@ -0,0 +1,73 @@
'use strict';
import React from 'react';
import Button from 'react-bootstrap/lib/Button';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../stores/whitelabel_store';
import { getLangText } from '../../../../../utils/lang_utils';
import { setDocumentTitle } from '../../../../../utils/dom_utils';
let MarketLanding = React.createClass({
propTypes: {
// Provided from WalletApp
currentUser: React.PropTypes.object,
whitelabel: React.PropTypes.object.isRequired
},
componentDidUpdate() {
const { name } = this.props.whitelabel;
if (name) {
setDocumentTitle(`${name} Marketplace`);
}
},
render() {
const { logo, name } = this.props.whitelabel;
return (
<div className="container ascribe-form-wrapper landing">
<div className="row">
<div className="col-xs-12">
<div className="row landing--header">
<img className="landing--header-logo" src={logo} />
<div>
{getLangText(`${name} Marketplace is powered by`) + ' '}
<span className="icon-ascribe-logo" />
</div>
</div>
<div className="row landing--content">
<div className="col-xs-6">
<p>
{getLangText('Existing ascribe user?')}
</p>
<LinkContainer to="/login">
<Button>
{getLangText('Log in')}
</Button>
</LinkContainer>
</div>
<div className="col-xs-6">
<p>
{getLangText('Do you need an account?')}
</p>
<LinkContainer to="/signup">
<Button>
{getLangText('Sign up')}
</Button>
</LinkContainer>
</div>
</div>
</div>
</div>
</div>
);
}
});
export default MarketLanding;

2
js/components/whitelabel/wallet/constants/wallet_api_urls.js
View File

@ -19,7 +19,7 @@ function getWalletApiUrls(subdomain) {
}; };
} else if (subdomain === 'lumenus' || subdomain === '23vivi' || } else if (subdomain === 'lumenus' || subdomain === '23vivi' ||
subdomain === 'polline' || subdomain === 'artcity' || subdomain === 'polline' || subdomain === 'artcity' ||
subdomain === 'demo') { subdomain === 'demo' || subdomain === 'liquidgallery') {
return { return {
'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/', 'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/', 'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',

2
js/components/whitelabel/wallet/wallet_app.js
View File

@ -31,7 +31,7 @@ let WalletApp = React.createClass({
let header = null; let header = null;
// if the path of the current activeRoute is not defined, then this is the IndexRoute // if the path of the current activeRoute is not defined, then this is the IndexRoute
if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications')) if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
&& (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline', 'artcity', 'demo']).includes(subdomain)) { && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline', 'artcity', 'demo', 'liquidgallery']).includes(subdomain)) {
header = (<div className="hero"/>); header = (<div className="hero"/>);
} else { } else {
header = ( header = (

42
js/components/whitelabel/wallet/wallet_routes.js
View File

@ -33,6 +33,7 @@ import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container'; import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container';
import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications'; import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications';
import MarketLanding from './components/market/market_landing';
import MarketPieceList from './components/market/market_piece_list'; import MarketPieceList from './components/market/market_piece_list';
import MarketRegisterPiece from './components/market/market_register_piece'; import MarketRegisterPiece from './components/market/market_register_piece';
import MarketPieceContainer from './components/market/market_detail/market_piece_container'; import MarketPieceContainer from './components/market/market_detail/market_piece_container';
@ -46,8 +47,6 @@ import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
import PollineLanding from './components/polline/polline_landing'; import PollineLanding from './components/polline/polline_landing';
import DemoLanding from './components/demo/demo_landing';
import ArtcityLanding from './components/artcity/artcity_landing'; import ArtcityLanding from './components/artcity/artcity_landing';
import WalletApp from './wallet_app'; import WalletApp from './wallet_app';
@ -378,7 +377,44 @@ let ROUTES = {
), ),
'demo': ( 'demo': (
<Route path='/' component={WalletApp}> <Route path='/' component={WalletApp}>
<IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(DemoLanding)} /> <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(MarketLanding)} />
<Route
path='login'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route
path='logout'
component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route
path='signup'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
<Route
path='password_reset'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route
path='settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route
path='contract_settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route
path='register_piece'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
headerTitle={getLangText('+ NEW WORK')}
aclName='acl_wallet_submit' />
<Route
path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
headerTitle={getLangText('COLLECTION')}
disableOn='noPieces' />
<Route path='pieces/:pieceId' component={MarketPieceContainer} />
<Route path='editions/:editionId' component={MarketEditionContainer} />
<Route path='verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} />
</Route>
),
'liquidgallery': (
<Route path='/' component={WalletApp}>
<IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(MarketLanding)} />
<Route <Route
path='login' path='login'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />

5
js/constants/application_constants.js
View File

@ -68,6 +68,11 @@ const constants = {
'name': 'Demo', 'name': 'Demo',
'type': 'wallet' 'type': 'wallet'
}, },
{
'subdomain': 'liquidgallery',
'name': 'Liquid Gallery',
'type': 'wallet'
},
{ {
'subdomain': 'portfolioreview', 'subdomain': 'portfolioreview',
'name': 'Portfolio Review', 'name': 'Portfolio Review',

1
sass/whitelabel/wallet/market/index.scss
View File

@ -1 +1,2 @@
@import 'market_footer'; @import 'market_footer';
@import 'market_custom_style';

181
sass/whitelabel/wallet/demo/demo_custom_style.scss → sass/whitelabel/wallet/market/market_custom_style.scss
View File

@ -1,14 +1,14 @@
$demo--fg-color: black; $market--fg-color: black;
$demo--bg-color: white; $market--bg-color: white;
$demo--nav-fg-prim-color: $demo--fg-color; $market--nav-fg-prim-color: $market--fg-color;
$demo--nav-fg-sec-color: #3a3a3a; $market--nav-fg-sec-color: #3a3a3a;
$demo--nav-bg-color: $demo--bg-color; $market--nav-bg-color: $market--bg-color;
$demo--nav-highlight-color: #f8f8f8; $market--nav-highlight-color: #f8f8f8;
$demo--button-default-color: $demo--fg-color; $market--button-default-color: $market--fg-color;
$demo--highlight-color: #2882fa; $market--highlight-color: #2882fa;
.client--demo { .client--demo, .client--liquidgallery {
/** Landing page **/ /** Landing page **/
.route--landing { .route--landing {
display: table; display: table;
@ -24,26 +24,25 @@ $demo--highlight-color: #2882fa;
display: none; display: none;
} }
.demo-landing { .landing {
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
} }
.demo-landing--header { .landing--header {
background-color: $demo--bg-color; background-color: $market--bg-color;
border: 1px solid darken($demo--bg-color, 20%); border: 1px solid darken($market--bg-color, 20%);
color: $demo--fg-color; color: $market--fg-color;
padding: 2em; padding: 2em;
.demo-landing--header-logo { .landing--header-logo {
margin: 1em 0 2em 0; margin: 1em 0 2em 0;
height: 175px;
} }
} }
.demo-landing--content { .landing--content {
background-color: $demo--bg-color; background-color: $market--bg-color;
border: 1px solid darken($demo--bg-color, 20%); border: 1px solid darken($market--bg-color, 20%);
border-top: none; border-top: none;
padding: 2em; padding: 2em;
} }
@ -51,16 +50,16 @@ $demo--highlight-color: #2882fa;
/** Navbar **/ /** Navbar **/
.navbar-default { .navbar-default {
background-color: $demo--bg-color; background-color: $market--bg-color;
.navbar-brand .img-brand { .navbar-brand .img-brand {
height: 115%; height: 115%;
} }
.navbar-brand .icon-ascribe-logo { .navbar-brand .icon-ascribe-logo {
color: $demo--nav-fg-prim-color; color: $market--nav-fg-prim-color;
&:hover { &:hover {
color: darken($demo--nav-fg-prim-color, 20%); color: darken($market--nav-fg-prim-color, 20%);
} }
} }
@ -70,26 +69,26 @@ $demo--highlight-color: #2882fa;
.navbar-nav > li > a:focus, .navbar-nav > li > a:focus,
.navbar-nav > li > .active a, .navbar-nav > li > .active a,
.navbar-nav > li > .active a:focus { .navbar-nav > li > .active a:focus {
color: $demo--nav-fg-prim-color; color: $market--nav-fg-prim-color;
} }
.navbar-nav > li > a:hover { .navbar-nav > li > a:hover {
color: darken($demo--nav-fg-prim-color, 20%); color: darken($market--nav-fg-prim-color, 20%);
} }
.navbar-nav > .active a, .navbar-nav > .active a,
.navbar-nav > .active a:hover, .navbar-nav > .active a:hover,
.navbar-nav > .active a:focus { .navbar-nav > .active a:focus {
background-color: $demo--nav-bg-color; background-color: $market--nav-bg-color;
border-bottom-color: $demo--nav-fg-prim-color; border-bottom-color: $market--nav-fg-prim-color;
color: $demo--nav-fg-prim-color; color: $market--nav-fg-prim-color;
} }
.navbar-nav > .open > a, .navbar-nav > .open > a,
.dropdown-menu > .active > a, .dropdown-menu > .active > a,
.dropdown-menu > li > a { .dropdown-menu > li > a {
color: $demo--nav-fg-prim-color; color: $market--nav-fg-prim-color;
background-color: $demo--nav-bg-color; background-color: $market--nav-bg-color;
} }
.navbar-nav > .open > a:hover, .navbar-nav > .open > a:hover,
@ -98,60 +97,60 @@ $demo--highlight-color: #2882fa;
.dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { .dropdown-menu > li > a:focus {
color: lighten($demo--nav-fg-prim-color, 20%); color: lighten($market--nav-fg-prim-color, 20%);
background-color: $demo--nav-highlight-color; background-color: $market--nav-highlight-color;
} }
.navbar-collapse.collapsing, .navbar-collapse.collapsing,
.navbar-collapse.collapse.in { .navbar-collapse.collapse.in {
background-color: $demo--nav-bg-color; background-color: $market--nav-bg-color;
.navbar-nav > .open > a, .navbar-nav > .open > a,
.navbar-nav > .active > a { .navbar-nav > .active > a {
background-color: $demo--nav-highlight-color; background-color: $market--nav-highlight-color;
} }
} }
.navbar-collapse.collapsing li a, .navbar-collapse.collapsing li a,
.navbar-collapse.collapse.in li a { .navbar-collapse.collapse.in li a {
color: $demo--nav-fg-prim-color; color: $market--nav-fg-prim-color;
} }
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover { .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
color: lighten($demo--nav-fg-prim-color, 20%); color: lighten($market--nav-fg-prim-color, 20%);
background-color: $demo--nav-highlight-color; background-color: $market--nav-highlight-color;
} }
.navbar-toggle { .navbar-toggle {
border-color: $demo--highlight-color; border-color: $market--highlight-color;
.icon-bar { .icon-bar {
background-color: $demo--highlight-color; background-color: $market--highlight-color;
} }
} }
.navbar-toggle:hover, .navbar-toggle:hover,
.navbar-toggle:focus { .navbar-toggle:focus {
border-color: lighten($demo--highlight-color, 10%); border-color: lighten($market--highlight-color, 10%);
background-color: $demo--nav-fg-prim-color; background-color: $market--nav-fg-prim-color;
.icon-bar { .icon-bar {
background-color: lighten($demo--highlight-color, 10%); background-color: lighten($market--highlight-color, 10%);
} }
} }
.notification-menu { .notification-menu {
.dropdown-menu { .dropdown-menu {
background-color: $demo--nav-bg-color; background-color: $market--nav-bg-color;
} }
.notification-header { .notification-header {
background-color: $demo--nav-fg-sec-color; background-color: $market--nav-fg-sec-color;
border-top-width: 0; border-top-width: 0;
color: $demo--nav-bg-color; color: $market--nav-bg-color;
} }
.notification-action { .notification-action {
color: $demo--highlight-color; color: $market--highlight-color;
} }
} }
@ -175,13 +174,13 @@ $demo--highlight-color: #2882fa;
fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default.focus,
fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default.active { fieldset[disabled] .btn-default.active {
background-color: lighten($demo--button-default-color, 30%); background-color: lighten($market--button-default-color, 30%);
border-color: lighten($demo--button-default-color, 30%); border-color: lighten($market--button-default-color, 30%);
} }
.btn-default { .btn-default {
background-color: $demo--button-default-color; background-color: $market--button-default-color;
border-color: $demo--button-default-color; border-color: $market--button-default-color;
&:hover, &:hover,
&:active, &:active,
@ -192,8 +191,8 @@ $demo--highlight-color: #2882fa;
&.active:hover, &.active:hover,
&.active:focus, &.active:focus,
&.active.focus { &.active.focus {
background-color: lighten($demo--button-default-color, 30%); background-color: lighten($market--button-default-color, 30%);
border-color: lighten($demo--button-default-color, 30%); border-color: lighten($market--button-default-color, 30%);
} }
} }
@ -216,13 +215,13 @@ $demo--highlight-color: #2882fa;
fieldset[disabled] .btn-secondary.focus, fieldset[disabled] .btn-secondary.focus,
fieldset[disabled] .btn-secondary:active, fieldset[disabled] .btn-secondary:active,
fieldset[disabled] .btn-secondary.active { fieldset[disabled] .btn-secondary.active {
background-color: darken($demo--bg-color, 20%); background-color: darken($market--bg-color, 20%);
border-color: $demo--button-default-color; border-color: $market--button-default-color;
} }
.btn-secondary { .btn-secondary {
border-color: $demo--button-default-color; border-color: $market--button-default-color;
color: $demo--button-default-color; color: $market--button-default-color;
&:hover, &:hover,
&:active, &:active,
@ -233,9 +232,9 @@ $demo--highlight-color: #2882fa;
&.active:hover, &.active:hover,
&.active:focus, &.active:focus,
&.active.focus { &.active.focus {
background-color: $demo--button-default-color; background-color: $market--button-default-color;
border-color: $demo--button-default-color; border-color: $market--button-default-color;
color: $demo--bg-color; color: $market--bg-color;
} }
} }
@ -244,9 +243,9 @@ $demo--highlight-color: #2882fa;
&:active, &:active,
&ctive:hover, &ctive:hover,
&.active:hover{ &.active:hover{
background-color: $demo--highlight-color; background-color: $market--highlight-color;
border-color: $demo--highlight-color; border-color: $market--highlight-color;
color: $demo--bg-color; color: $market--bg-color;
} }
} }
@ -260,54 +259,54 @@ $demo--highlight-color: #2882fa;
} }
.ascribe-accordion-list-table-toggle:hover { .ascribe-accordion-list-table-toggle:hover {
color: $demo--fg-color; color: $market--fg-color;
} }
.request-action-badge { .request-action-badge {
color: $demo--fg-color; color: $market--fg-color;
} }
.acl-information-dropdown-list .title { .acl-information-dropdown-list .title {
color: $demo--fg-color; color: $market--fg-color;
} }
// filter widget // filter widget
.ascribe-piece-list-toolbar-widget button { .ascribe-piece-list-toolbar-widget button {
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;
color: $demo--button-default-color !important; color: $market--button-default-color !important;
&:hover, &:hover,
&:active { &:active {
background-color: $demo--button-default-color !important; background-color: $market--button-default-color !important;
border-color: $demo--button-default-color !important; border-color: $market--button-default-color !important;
color: $demo--bg-color !important; color: $market--bg-color !important;
} }
} }
.icon-ascribe-search { .icon-ascribe-search {
color: $demo--fg-color; color: $market--fg-color;
} }
// forms // forms
.ascribe-property-wrapper:hover { .ascribe-property-wrapper:hover {
border-left-color: rgba($demo--fg-color, 0.5); border-left-color: rgba($market--fg-color, 0.5);
} }
.ascribe-property textarea, .ascribe-property textarea,
.ascribe-property input, .ascribe-property input,
.search-bar > .form-group > .input-group input { .search-bar > .form-group > .input-group input {
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: rgba($demo--fg-color, 0.5); color: rgba($market--fg-color, 0.5);
} }
&::-moz-placeholder { &::-moz-placeholder {
color: rgba($demo--fg-color, 0.5); color: rgba($market--fg-color, 0.5);
} }
&:-ms-input-placeholder { &:-ms-input-placeholder {
color: rgba($demo--fg-color, 0.5); color: rgba($market--fg-color, 0.5);
} }
&:-moz-placeholder { &:-moz-placeholder {
color: rgba($demo--fg-color, 0.5); color: rgba($market--fg-color, 0.5);
} }
} }
@ -320,66 +319,66 @@ $demo--highlight-color: #2882fa;
> p, > p,
> p > span, > p > span,
> textarea { > textarea {
color: $demo--fg-color; color: $market--fg-color;
} }
} }
// global notification // global notification
.ascribe-global-notification-success { .ascribe-global-notification-success {
background-color: lighten($demo--fg-color, 20%); background-color: lighten($market--fg-color, 20%);
} }
// uploader progress // uploader progress
.ascribe-progress-bar > .progress-bar { .ascribe-progress-bar > .progress-bar {
background-color: lighten($demo--fg-color, 20%); background-color: lighten($market--fg-color, 20%);
} }
.ascribe-progress-bar span { .ascribe-progress-bar span {
text-shadow: -1px 0 lighten($demo--fg-color, 20%), text-shadow: -1px 0 lighten($market--fg-color, 20%),
0 1px lighten($demo--fg-color, 20%), 0 1px lighten($market--fg-color, 20%),
1px 0 lighten($demo--fg-color, 20%), 1px 0 lighten($market--fg-color, 20%),
0 -1px lighten($demo--fg-color, 20%); 0 -1px lighten($market--fg-color, 20%);
} }
.action-file.icon-ascribe-ok, .action-file.icon-ascribe-ok,
.action-file.icon-ascribe-ok:hover { .action-file.icon-ascribe-ok:hover {
color: lighten($demo--fg-color, 20%); color: lighten($market--fg-color, 20%);
} }
// spinner // spinner
.spinner-circle { .spinner-circle {
border-color: $demo--fg-color; border-color: $market--fg-color;
} }
.spinner-inner { .spinner-inner {
display: none; display: none;
} }
.btn-secondary .spinner-circle { .btn-secondary .spinner-circle {
border-color: $demo--bg-color; border-color: $market--bg-color;
} }
// video player // video player
.ascribe-media-player .vjs-default-skin { .ascribe-media-player .vjs-default-skin {
.vjs-play-progress, .vjs-play-progress,
.vjs-volume-level { .vjs-volume-level {
background-color: $demo--highlight-color; background-color: $market--highlight-color;
} }
} }
// pager // pager
.pager li > a, .pager li > a,
.pager li > span { .pager li > span {
background-color: $demo--fg-color; background-color: $market--fg-color;
border-color: $demo--fg-color; border-color: $market--fg-color;
} }
.pager .disabled > a, .pager .disabled > a,
.pager .disabled > span { .pager .disabled > span {
background-color: $demo--fg-color !important; background-color: $market--fg-color !important;
border-color: $demo--fg-color; border-color: $market--fg-color;
} }
// intercom // intercom
#intercom-container .intercom-launcher-button { #intercom-container .intercom-launcher-button {
background-color: $demo--button-default-color !important; background-color: $market--button-default-color !important;
border-color: $demo--button-default-color !important; border-color: $market--button-default-color !important;
} }
} }