Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds banner modal style. #113

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Adds banner modal style. #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b08fe48
added bannerModal in config settings with new banner style
amon-ra Oct 18, 2018
644e956
add development tools
amon-ra Oct 26, 2018
353b0ee
Added blocking custom pages
amon-ra Oct 27, 2018
086213c
Add persistent button
amon-ra Oct 27, 2018
575d441
Remove cookies on init
amon-ra Nov 7, 2018
179b97e
update vendor.json
amon-ra Nov 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@
"react-codemirror2": "^4.0.0",
"react-router-dom": "^4.2.2",
"serve": "^9.2.0",
"whatwg-fetch": "^2.0.3"
"whatwg-fetch": "^2.0.3",
"yett": "git+https://github.com/oondeo/yett.git"
}
}
6 changes: 6 additions & 0 deletions src/components/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import style from './app.less';

import Popup from './popup/popup';
import Banner from './banner/banner';
import PersistentButton from './persistentbutton/persistentbutton';

export default class App extends Component {
static defaultProps = {
Expand Down Expand Up @@ -57,7 +58,12 @@ export default class App extends Component {
onSave={this.onSave}
theme={theme}
/>
<PersistentButton
onClick={toggleModalShowing}
theme={theme}
/>
</div>

);
}
}
187 changes: 58 additions & 129 deletions src/components/banner/banner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,16 @@
import { h, Component } from 'preact';
import style from './banner.less';
import Label from '../label/label';
import ChevronIcon from '../chevronicon/chevronicon';

class LocalLabel extends Label {
static defaultProps = {
prefix: 'banner'
};
}

const PANEL_COLLECTED = 0;
const PANEL_PURPOSE = 1;
import bannerStyle from './banner.less';
import modalStyle from './modal.less';
import Description from './description/description';
import config from '../../lib/config';


export default class Banner extends Component {

constructor(props) {
super(props);
this.state = {
isExpanded: false,
selectedPanelIndex: 0,
};
}

handleInfo = (index) => () => {
const { isExpanded, selectedPanelIndex } = this.state;
this.setState({
selectedPanelIndex: index,
isExpanded: index !== selectedPanelIndex || !isExpanded
});
};

handleWindowClick = e => {
if (!this.bannerRef || !this.bannerRef.contains(e.target)) {
this.props.onSave();
Expand All @@ -41,125 +21,74 @@ export default class Banner extends Component {
this.props.onShowModal(true);
};

handleClose = () => {

//By now modal is disabled
return ;
//this.props.onSave();
};

render(props, state) {
const { isShowing, onSave, theme } = props;
const { selectedPanelIndex, isExpanded } = state;
const {
primaryColor,
primaryTextColor,
backgroundColor,
overlayBackground,
textColor,
textLightColor,
textLinkColor,
} = theme;

return (
<div
ref={el => this.bannerRef = el}
class={[style.banner, !isShowing ? style.hidden : ''].join(' ')}
style={{
boxShadow: `0px 0px 5px ${primaryColor}`,
backgroundColor: backgroundColor,
color: textLightColor
}}
>
<div class={style.content}>
let imgLogo=null;
if (config.bannerLogo){
imgLogo = <img src={ config.bannerLogo} />
}
if(config.bannerModal){
return (
<div
ref={el => this.bannerRef = el}
class={[modalStyle.popup, !isShowing ? modalStyle.hidden : ''].join(' ')}
>
<div
class={style.message}
ref={el => this.messageRef = el}
>
<div class={style.info}>
<div class={style.title} style={{ color: textColor }}>
<LocalLabel localizeKey='title'>Ads help us run this site</LocalLabel>
</div>
<LocalLabel localizeKey='description'>
When you visit our site, pre-selected companies may access and use certain information
on your device to serve relevant ads or personalized content.
</LocalLabel>
<div class={style.options}>
<div
class={[style.option, selectedPanelIndex === PANEL_COLLECTED && isExpanded ? style.expanded : ''].join(' ')}>
<a onClick={this.handleInfo(PANEL_COLLECTED)} >
<ChevronIcon color={textLinkColor}/>
<LocalLabel localizeKey='links.data.title'>Information that may be
used.
</LocalLabel>
</a>
<div
className={style.optionDetails}
style={{ color: textLightColor }}
>
<LocalLabel localizeKey='links.data.description'>
Information that may be used:
<ul>
<li>Type of browser and its settings</li>
<li>Information about the device's operating system</li>
<li>Cookie information</li>
<li>Information about other identifiers assigned to the device</li>
<li>The IP address from which the device accesses a client's website or
mobile application
</li>
<li>Information about the user's activity on that device, including web
pages and mobile apps visited or used
</li>
<li>Information about the geographic location of the device when it
accesses
a website or mobile application
</li>
</ul>
</LocalLabel>
</div>
</div>
<div
class={[style.option, selectedPanelIndex === PANEL_PURPOSE && isExpanded ? style.expanded : ''].join(' ')}>
<a
onClick={this.handleInfo(PANEL_PURPOSE)}
>
<ChevronIcon color={textLinkColor} />
<LocalLabel localizeKey='links.purposes.title'>Purposes for storing
information.</LocalLabel>
</a>

<div
class={style.optionDetails}
style={{ color: textLightColor }}
>

<LocalLabel localizeKey='links.purposes.description'>
How information may be used:
<ul>
<li>Storage and access of information</li>
<li>Ad selection and delivery</li>
<li>Content selection and delivery</li>
<li>Personalization</li>
<li>Measurement</li>
</ul>
</LocalLabel>
</div>
</div>
</div>
</div>
<div class={style.consent}>
<a class={style.learnMore} onClick={this.handleLearnMore}
style={{ color: primaryColor, borderColor: primaryColor }}>
<LocalLabel localizeKey='links.manage'>Learn More</LocalLabel>
</a>
<a
class={style.continue}
onClick={onSave}
style={{
backgroundColor: primaryColor,
borderColor: primaryColor,
color: primaryTextColor
}}
>
<LocalLabel localizeKey='links.accept'>Continue to site</LocalLabel>
</a>
</div>
class={modalStyle.overlay}
style={{background: overlayBackground}}
onClick={this.handleClose}
/>
<div class={modalStyle.content}>
{imgLogo}
<Description
onSave={onSave}
onClose={this.handleClose}
onWindowClick={this.handleWindowClick}
onLearnMoreClick={this.handleLearnMore}
orientation='column'
theme={theme}
/>
</div>
</div>
</div>
);
}else{
return (
<div
ref={el => this.bannerRef = el}
class={[bannerStyle.banner, !isShowing ? bannerStyle.hidden : ''].join(' ')}
style={{
boxShadow: `0px 0px 5px ${primaryColor}`,
backgroundColor: backgroundColor,
color: textLightColor
}}
>
<div class={bannerStyle.content}>
<Description
onSave={onSave}
onClose={this.handleClose}
onWindowClick={this.handleWindowClick}
onLearnMoreClick={this.handleLearnMore}
theme={theme}
/>
</div>
</div>
);
}
}
}
Loading