From f6a5734871a451b355bce3671a64c14bd1ed880d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Feb 2016 10:54:38 +0100 Subject: [PATCH 1/5] Add routes and styling for polline.ascribe.io --- README.md | 1 + .../components/23vivi/23vivi_landing.js | 4 +- .../components/lumenus/lumenus_landing.js | 2 +- .../components/polline/polline_landing.js | 78 ++++ js/components/whitelabel/wallet/wallet_app.js | 2 +- .../whitelabel/wallet/wallet_routes.js | 41 +- js/constants/application_constants.js | 5 + .../wallet/23vivi/23vivi_custom_style.scss | 4 +- sass/whitelabel/wallet/index.scss | 1 + .../wallet/polline/polline_custom_style.scss | 381 ++++++++++++++++++ 10 files changed, 512 insertions(+), 7 deletions(-) create mode 100644 js/components/whitelabel/wallet/components/polline/polline_landing.js create mode 100644 sass/whitelabel/wallet/polline/polline_custom_style.scss diff --git a/README.md b/README.md index 478562d3..af64cc3c 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ Additionally, to work on the white labeling functionality, you need to edit your 127.0.0.1 lumenus.localhost.com 127.0.0.1 portfolioreview.localhost.com 127.0.0.1 23vivi.localhost.com +127.0.0.1 polline.localhost.com ``` diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js index f6b2d50c..334fb336 100644 --- a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js +++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js @@ -8,10 +8,10 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; import WhitelabelActions from '../../../../../actions/whitelabel_actions'; import WhitelabelStore from '../../../../../stores/whitelabel_store'; -import { mergeOptions } from '../../../../../utils/general_utils'; import { getLangText } from '../../../../../utils/lang_utils'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; + let Vivi23Landing = React.createClass({ getInitialState() { return WhitelabelStore.getState(); @@ -42,7 +42,7 @@ let Vivi23Landing = React.createClass({
- {getLangText('Artwork from the 23VIVI Marketplace is powered by') + ' '} + {getLangText('23VIVI Marketplace is powered by') + ' '}
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js index 23289276..eb926f33 100644 --- a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js +++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js @@ -46,7 +46,7 @@ let LumenusLanding = React.createClass({
- {getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '} + {getLangText('Lumenus Marketplace is powered by') + ' '} diff --git a/js/components/whitelabel/wallet/components/polline/polline_landing.js b/js/components/whitelabel/wallet/components/polline/polline_landing.js new file mode 100644 index 00000000..0601975d --- /dev/null +++ b/js/components/whitelabel/wallet/components/polline/polline_landing.js @@ -0,0 +1,78 @@ +'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 PollineLanding = React.createClass({ + getInitialState() { + return WhitelabelStore.getState(); + }, + + componentWillMount() { + setDocumentTitle('Polline Marketplace'); + }, + + componentDidMount() { + WhitelabelStore.listen(this.onChange); + WhitelabelActions.fetchWhitelabel(); + }, + + componentWillUnmount() { + WhitelabelStore.unlisten(this.onChange); + }, + + onChange(state) { + this.setState(state); + }, + + render() { + return ( +
+
+
+
+ +
+ {getLangText('Polline Art Marketplace is powered by') + ' '} + +
+
+
+
+

+ {getLangText('Existing ascribe user?')} +

+ + + +
+
+

+ {getLangText('Do you need an account?')} +

+ + + +
+
+
+
+
+ ); + } +}); + +export default PollineLanding; diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js index bce7106b..1740c999 100644 --- a/js/components/whitelabel/wallet/wallet_app.js +++ b/js/components/whitelabel/wallet/wallet_app.js @@ -32,7 +32,7 @@ let WalletApp = React.createClass({ // 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')) - && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) { + && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline']).indexOf(subdomain) > -1) { header = (
); } else { header =
; diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index ba560608..7d906633 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -40,6 +40,8 @@ import LumenusLanding from './components/lumenus/lumenus_landing'; import Vivi23Landing from './components/23vivi/23vivi_landing'; import Vivi23PieceList from './components/23vivi/23vivi_piece_list'; +import PollineLanding from './components/polline/polline_landing'; + import { ProxyHandler, AuthRedirect } from '../../../components/ascribe_routes/proxy_handler'; import WalletApp from './wallet_app'; @@ -228,7 +230,44 @@ let ROUTES = { aclName='acl_wallet_submit' /> + + + + + + ), + 'polline': ( + + + + + + + + + + diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js index 63aaf3e7..dd27484b 100644 --- a/js/constants/application_constants.js +++ b/js/constants/application_constants.js @@ -53,6 +53,11 @@ const constants = { 'name': '23VIVI', 'type': 'wallet' }, + { + 'subdomain': 'polline', + 'name': 'Polline Art', + 'type': 'wallet' + }, { 'subdomain': 'portfolioreview', 'name': 'Portfolio Review', diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss index 8bf729a8..303f457a 100644 --- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss +++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss @@ -2,11 +2,11 @@ $vivi23--fg-color: black; $vivi23--bg-color: white; $vivi23--nav-fg-prim-color: $vivi23--fg-color; -$vivi23--nav-fg-sec-color: #3a3a3a; +$vivi23--nav-fg-sec-color: #2882fa; $vivi23--nav-bg-color: $vivi23--bg-color; $vivi23--nav-highlight-color: #f8f8f8; $vivi23--button-default-color: $vivi23--fg-color; -$vivi23--highlight-color: #de2600; +$vivi23--highlight-color: #2882fa; .client--23vivi { diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss index 647bb16c..4e3d2a9a 100644 --- a/sass/whitelabel/wallet/index.scss +++ b/sass/whitelabel/wallet/index.scss @@ -2,6 +2,7 @@ @import 'cyland/cyland_custom_style'; @import 'ikonotv/ikonotv_custom_style'; @import '23vivi/23vivi_custom_style'; +@import 'polline/polline_custom_style'; .ascribe-wallet-app { border-radius: 0; diff --git a/sass/whitelabel/wallet/polline/polline_custom_style.scss b/sass/whitelabel/wallet/polline/polline_custom_style.scss new file mode 100644 index 00000000..4e912cb8 --- /dev/null +++ b/sass/whitelabel/wallet/polline/polline_custom_style.scss @@ -0,0 +1,381 @@ +/** Sass cannot use a number as the first character of a variable, so we'll have to settle with polline **/ +$polline--fg-color: black; +$polline--bg-color: white; +$polline--nav-fg-prim-color: $polline--fg-color; +$polline--nav-fg-sec-color: #3a3a3a; +$polline--nav-bg-color: $polline--bg-color; +$polline--nav-highlight-color: #f8f8f8; +$polline--button-default-color: $polline--fg-color; +$polline--highlight-color: #2882fa; + + +.client--polline { + /** Landing page **/ + .route--landing { + display: table; + + > .container { + display: table-cell; + padding-bottom: 100px; + vertical-align: middle; + } + + .polline-landing { + font-weight: normal; + text-align: center; + } + + .polline-landing--header { + background-color: $polline--bg-color; + border: 1px solid darken($polline--bg-color, 20%); + color: $polline--fg-color; + padding: 2em; + + .polline-landing--header-logo { + margin: 1em 0 2em 0; + height: 175px; + } + } + + .polline-landing--content { + background-color: $polline--bg-color; + border: 1px solid darken($polline--bg-color, 20%); + border-top: none; + padding: 2em; + } + } + + /** Navbar **/ + .navbar-default { + background-color: $polline--bg-color; + + .navbar-brand .img-brand { + height: 115%; + } + + .navbar-brand .icon-ascribe-logo { + color: $polline--nav-fg-prim-color; + &:hover { + color: darken($polline--nav-fg-prim-color, 20%); + } + } + + } + + .navbar-nav > li > a, + .navbar-nav > li > a:focus, + .navbar-nav > li > .active a, + .navbar-nav > li > .active a:focus { + color: $polline--nav-fg-prim-color; + } + + .navbar-nav > li > a:hover { + color: darken($polline--nav-fg-prim-color, 20%); + } + + .navbar-nav > .active a, + .navbar-nav > .active a:hover, + .navbar-nav > .active a:focus { + background-color: $polline--nav-bg-color; + border-bottom-color: $polline--nav-fg-prim-color; + color: $polline--nav-fg-prim-color; + } + + .navbar-nav > .open > a, + .dropdown-menu > .active > a, + .dropdown-menu > li > a { + color: $polline--nav-fg-prim-color; + background-color: $polline--nav-bg-color; + } + + .navbar-nav > .open > a:hover, + .navbar-nav > .open > a:focus, + .dropdown-menu > .active > a:hover, + .dropdown-menu > .active > a:focus, + .dropdown-menu > li > a:hover, + .dropdown-menu > li > a:focus { + color: lighten($polline--nav-fg-prim-color, 20%); + background-color: $polline--nav-highlight-color; + } + + .navbar-collapse.collapsing, + .navbar-collapse.collapse.in { + background-color: $polline--nav-bg-color; + + .navbar-nav > .open > a, + .navbar-nav > .active > a { + background-color: $polline--nav-highlight-color; + } + } + + .navbar-collapse.collapsing li a, + .navbar-collapse.collapse.in li a { + color: $polline--nav-fg-prim-color; + } + .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover { + color: lighten($polline--nav-fg-prim-color, 20%); + background-color: $polline--nav-highlight-color; + } + + .navbar-toggle { + border-color: $polline--highlight-color; + + .icon-bar { + background-color: $polline--highlight-color; + } + } + + .navbar-toggle:hover, + .navbar-toggle:focus { + border-color: lighten($polline--highlight-color, 10%); + background-color: $polline--nav-fg-prim-color; + + .icon-bar { + background-color: lighten($polline--highlight-color, 10%); + } + } + + .notification-menu { + .dropdown-menu { + background-color: $polline--nav-bg-color; + } + + .notification-header { + background-color: $polline--nav-fg-sec-color; + border-top-width: 0; + color: $polline--nav-bg-color; + } + + .notification-action { + color: $polline--highlight-color; + } + } + + /** Buttons **/ + // reset disabled button styling for btn-default + .btn-default.disabled, + .btn-default.disabled:hover, + .btn-default.disabled:focus, + .btn-default.disabled.focus, + .btn-default.disabled:active, + .btn-default.disabled.active, + .btn-default[disabled], + .btn-default[disabled]:hover, + .btn-default[disabled]:focus, + .btn-default[disabled].focus, + .btn-default[disabled]:active, + .btn-default[disabled].active, + fieldset[disabled] .btn-default, + fieldset[disabled] .btn-default:hover, + fieldset[disabled] .btn-default:focus, + fieldset[disabled] .btn-default.focus, + fieldset[disabled] .btn-default:active, + fieldset[disabled] .btn-default.active { + background-color: lighten($polline--highlight-color, 30%); + border-color: lighten($polline--highlight-color, 30%); + } + + .btn-default { + background-color: $polline--highlight-color; + border-color: $polline--highlight-color; + + &:hover, + &:active, + &:focus, + &:active:hover, + &:active:focus, + &:active.focus, + &.active:hover, + &.active:focus, + &.active.focus { + background-color: lighten($polline--highlight-color, 30%); + border-color: lighten($polline--highlight-color, 30%); + } + } + + // disabled buttons + .btn-secondary.disabled, + .btn-secondary.disabled:hover, + .btn-secondary.disabled:focus, + .btn-secondary.disabled.focus, + .btn-secondary.disabled:active, + .btn-secondary.disabled.active, + .btn-secondary[disabled], + .btn-secondary[disabled]:hover, + .btn-secondary[disabled]:focus, + .btn-secondary[disabled].focus, + .btn-secondary[disabled]:active, + .btn-secondary[disabled].active, + fieldset[disabled] .btn-secondary, + fieldset[disabled] .btn-secondary:hover, + fieldset[disabled] .btn-secondary:focus, + fieldset[disabled] .btn-secondary.focus, + fieldset[disabled] .btn-secondary:active, + fieldset[disabled] .btn-secondary.active { + background-color: darken($polline--bg-color, 20%); + border-color: $polline--button-default-color; + } + + .btn-secondary { + border-color: $polline--button-default-color; + color: $polline--button-default-color; + + &:hover, + &:active, + &:focus, + &:active:hover, + &:active:focus, + &:active.focus, + &.active:hover, + &.active:focus, + &.active.focus { + background-color: $polline--button-default-color; + border-color: $polline--button-default-color; + color: $polline--bg-color; + } + } + + .btn-tertiary { + &:hover, + &:active, + &ctive:hover, + &.active:hover{ + background-color: $polline--highlight-color; + border-color: $polline--highlight-color; + color: $polline--bg-color; + } + } + + /** Other components **/ + .ascribe-piece-list-toolbar .btn-ascribe-add { + display: none; + } + + .ascribe-footer { + display: none; + } + + .ascribe-accordion-list-table-toggle:hover { + color: $polline--fg-color; + } + + .request-action-badge { + color: $polline--fg-color; + } + + .acl-information-dropdown-list .title { + color: $polline--fg-color; + } + + // filter widget + .ascribe-piece-list-toolbar-filter-widget button { + background-color: transparent !important; + border-color: transparent !important; + color: $polline--button-default-color !important; + + &:hover, + &:active { + background-color: $polline--button-default-color !important; + border-color: $polline--button-default-color !important; + color: $polline--bg-color !important; + } + } + + .icon-ascribe-search { + color: $polline--fg-color; + } + + // forms + .ascribe-property-wrapper:hover { + border-left-color: rgba($polline--fg-color, 0.5); + } + + .ascribe-property textarea, + .ascribe-property input, + .search-bar > .form-group > .input-group input { + &::-webkit-input-placeholder { + color: rgba($polline--fg-color, 0.5); + } + &::-moz-placeholder { + color: rgba($polline--fg-color, 0.5); + } + &:-ms-input-placeholder { + color: rgba($polline--fg-color, 0.5); + } + &:-moz-placeholder { + color: rgba($polline--fg-color, 0.5); + } + } + + .ascribe-property { + > div, + > input, + > pre, + > select, + > span:not(.glyphicon), + > p, + > p > span, + > textarea { + color: $polline--fg-color; + } + } + + // global notification + .ascribe-global-notification-success { + background-color: lighten($polline--fg-color, 20%); + } + + // uploader progress + .ascribe-progress-bar > .progress-bar { + background-color: lighten($polline--fg-color, 20%); + } + + .ascribe-progress-bar span { + text-shadow: -1px 0 lighten($polline--fg-color, 20%), + 0 1px lighten($polline--fg-color, 20%), + 1px 0 lighten($polline--fg-color, 20%), + 0 -1px lighten($polline--fg-color, 20%); + } + + .action-file.icon-ascribe-ok, + .action-file.icon-ascribe-ok:hover { + color: lighten($polline--fg-color, 20%); + } + + // spinner + .spinner-circle { + border-color: $polline--fg-color; + } + .spinner-inner { + display: none; + } + .btn-secondary .spinner-circle { + border-color: $polline--bg-color; + } + + // video player + .ascribe-media-player .vjs-default-skin { + .vjs-play-progress, + .vjs-volume-level { + background-color: $polline--highlight-color; + } + } + + // pager + .pager li > a, + .pager li > span { + background-color: $polline--fg-color; + border-color: $polline--fg-color; + } + .pager .disabled > a, + .pager .disabled > span { + background-color: $polline--fg-color !important; + border-color: $polline--fg-color; + } + + // intercom + #intercom-container .intercom-launcher-button { + background-color: $polline--button-default-color !important; + border-color: $polline--button-default-color !important; + } +} From 7dfe6a51a47c086a81674684e4cd0ea0a1f553a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Feb 2016 11:51:54 +0100 Subject: [PATCH 2/5] For 23vivi, switch back to appropriate piece list --- js/components/whitelabel/wallet/wallet_routes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 7d906633..963107bd 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -230,7 +230,7 @@ let ROUTES = { aclName='acl_wallet_submit' /> From 88926998a8a11184fb45365b5243c5448aa9a61f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Feb 2016 14:45:46 +0100 Subject: [PATCH 3/5] Use whitelabel routes for wl-specific requests --- js/components/whitelabel/wallet/constants/wallet_api_urls.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/components/whitelabel/wallet/constants/wallet_api_urls.js b/js/components/whitelabel/wallet/constants/wallet_api_urls.js index 8ad2eb81..48359949 100644 --- a/js/components/whitelabel/wallet/constants/wallet_api_urls.js +++ b/js/components/whitelabel/wallet/constants/wallet_api_urls.js @@ -17,7 +17,8 @@ function getWalletApiUrls(subdomain) { 'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/', 'user': walletConstants.walletApiEndpoint + subdomain + '/users/' }; - } else if (subdomain === 'lumenus' || subdomain === '23vivi') { + } else if (subdomain === 'lumenus' || subdomain === '23vivi' || + subdomain === 'polline' || subdomain === 'artcity') { return { 'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/', 'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/', From ac2319f2310160ea2e1b1fe062a71df744be1748 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Feb 2016 15:53:16 +0100 Subject: [PATCH 4/5] Cleanup styles for polline.ascribe.io --- .../wallet/polline/polline_custom_style.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/sass/whitelabel/wallet/polline/polline_custom_style.scss b/sass/whitelabel/wallet/polline/polline_custom_style.scss index 4e912cb8..17cd4e68 100644 --- a/sass/whitelabel/wallet/polline/polline_custom_style.scss +++ b/sass/whitelabel/wallet/polline/polline_custom_style.scss @@ -171,13 +171,13 @@ $polline--highlight-color: #2882fa; fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { - background-color: lighten($polline--highlight-color, 30%); - border-color: lighten($polline--highlight-color, 30%); + background-color: lighten($polline--button-default-color, 30%); + border-color: lighten($polline--button-default-color, 30%); } .btn-default { - background-color: $polline--highlight-color; - border-color: $polline--highlight-color; + background-color: $polline--button-default-color; + border-color: $polline--button-default-color; &:hover, &:active, @@ -188,8 +188,8 @@ $polline--highlight-color: #2882fa; &.active:hover, &.active:focus, &.active.focus { - background-color: lighten($polline--highlight-color, 30%); - border-color: lighten($polline--highlight-color, 30%); + background-color: lighten($polline--button-default-color, 30%); + border-color: lighten($polline--button-default-color, 30%); } } From c18b70f7649dbe512aed01680b755a306c28d59e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Feb 2016 15:57:38 +0100 Subject: [PATCH 5/5] Remove sass comment --- sass/whitelabel/wallet/polline/polline_custom_style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/sass/whitelabel/wallet/polline/polline_custom_style.scss b/sass/whitelabel/wallet/polline/polline_custom_style.scss index 17cd4e68..e3953492 100644 --- a/sass/whitelabel/wallet/polline/polline_custom_style.scss +++ b/sass/whitelabel/wallet/polline/polline_custom_style.scss @@ -1,4 +1,3 @@ -/** Sass cannot use a number as the first character of a variable, so we'll have to settle with polline **/ $polline--fg-color: black; $polline--bg-color: white; $polline--nav-fg-prim-color: $polline--fg-color;