-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #135 from digi-trust/master
v1.4.0
- Loading branch information
Showing
15 changed files
with
544 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -85,6 +85,7 @@ | |
|
||
.wrapper { | ||
display: flex; | ||
justify-content: space-between; | ||
} | ||
|
||
.content { | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { h, Component } from 'preact'; | ||
import style from './introThin.less'; | ||
import Button from '../../button/button'; | ||
import Label from '../../label/label'; | ||
import IntroFooterV2 from './footerV2'; | ||
|
||
class LocalLabel extends Label { | ||
static defaultProps = { | ||
prefix: 'intro' | ||
}; | ||
} | ||
|
||
export default class IntroThin extends Component { | ||
|
||
static defaultProps = {}; | ||
|
||
componentDidMount() { | ||
this.props.updateCSSPrefs(); | ||
} | ||
|
||
render(props, state) { | ||
const { | ||
onAcceptAll, | ||
onShowPurposes, | ||
onClose, | ||
localization, | ||
store, | ||
updateCSSPrefs, | ||
config | ||
} = props; | ||
|
||
return ( | ||
<div class={style.intro}> | ||
<div class={style.topWrapper}> | ||
<div class={style.textWrapper}> | ||
<div class={style.description + " primaryText"}> | ||
<LocalLabel providedValue={localization && localization.intro ? localization.intro.description : ''} localizeKey='description' class={style.contentMessage}>Ads help us run this site. When you use our site selected companies may access and use information on your device for various purposes including to serve relevant ads or personalised content.</LocalLabel> | ||
</div> | ||
</div> | ||
<div class={style.options}> | ||
<Button | ||
class={style.acceptAll} | ||
onClick={onAcceptAll} | ||
> | ||
<LocalLabel providedValue={localization && localization.intro ? localization.intro.acceptAll : ''} localizeKey='acceptAll'>Accept all</LocalLabel> | ||
</Button> | ||
</div> | ||
</div> | ||
<IntroFooterV2 | ||
onShowPurposes={onShowPurposes} | ||
onAcceptAll={onAcceptAll} | ||
localization={localization} | ||
store={store} | ||
updateCSSPrefs={updateCSSPrefs} | ||
config={config} | ||
/> | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
@import '../../../style/variables'; | ||
|
||
.imagePadding { | ||
padding-left: 10px; | ||
} | ||
|
||
div.intro { | ||
padding: 0 32px; | ||
max-height: 100%; | ||
|
||
.topWrapper { | ||
display: flex; | ||
justify-content: space-between; | ||
|
||
.textWrapper { | ||
display: flex; | ||
flex-direction: column; | ||
|
||
.titleContainer { | ||
padding: 10px 0; | ||
font-size: 30px; | ||
font-weight: bold; | ||
|
||
.title { | ||
float: left; | ||
line-height: 1.5; | ||
} | ||
} | ||
.description { | ||
padding: 10px 10px 10px 0px; | ||
} | ||
} | ||
.options { | ||
display: flex; | ||
flex-direction: column; | ||
padding-top: 10px; | ||
|
||
button { | ||
margin: 5px; | ||
} | ||
} | ||
} | ||
.contentMessage { | ||
padding-right: 32px; | ||
} | ||
.rejectAll { | ||
width: 270px; | ||
margin-right: 10px !important; | ||
} | ||
|
||
.acceptAll { | ||
width: 270px; | ||
margin-right: -25px !important; | ||
} | ||
} | ||
|
||
@media (max-width: 800px) { | ||
.topWrapper { | ||
display: block !important; | ||
|
||
.description { | ||
padding: 10px !important; | ||
display: block !important; | ||
} | ||
.options { | ||
margin: 0 auto !important; | ||
} | ||
} | ||
} | ||
|
||
@media (max-width: 620px) { | ||
.description { | ||
display: block !important; | ||
} | ||
.topWrapper { | ||
display: block !important; | ||
|
||
.options { | ||
margin: 0 auto !important; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
import { h, Component } from 'preact'; | ||
import style from './popupThin.less'; | ||
import IntroThin from './intro/introThin'; | ||
import Details from './details/details'; | ||
import Panel from '../panel/panel'; | ||
|
||
|
||
const SECTION_INTRO = 0; | ||
const SECTION_DETAILS = 1; | ||
|
||
export default class PopupThin extends Component { | ||
state = { | ||
selectedPanelIndex: SECTION_INTRO, | ||
isActive: false | ||
}; | ||
|
||
onAcceptAll = () => { | ||
const { store, onSave } = this.props; | ||
store.selectAllVendors(true); | ||
store.selectAllPurposes(true); | ||
store.selectAllCustomPurposes(true); | ||
onSave(); | ||
}; | ||
|
||
onCancel = () => { | ||
this.setState({ | ||
selectedPanelIndex: SECTION_INTRO, | ||
isActive: false | ||
}); | ||
}; | ||
|
||
handleShowDetails = () => { | ||
this.setState({ | ||
selectedPanelIndex: SECTION_DETAILS, | ||
isActive: true | ||
}); | ||
}; | ||
|
||
handleClose = () => {}; | ||
|
||
componentDidMount() { | ||
this.props.updateCSSPrefs(); | ||
} | ||
|
||
render(props, state) { | ||
const { store, localization, config, updateCSSPrefs } = props; | ||
const { selectedPanelIndex, isActive } = state; | ||
const { isThinConsentToolShowing } = store; | ||
|
||
return ( | ||
<div | ||
class={config.blockBrowsing ? style.popup : ''} | ||
style={{ display: isThinConsentToolShowing ? 'flex' : 'none' }} | ||
> | ||
{config.blockBrowsing && | ||
<div | ||
class={style.overlay} | ||
onClick={this.handleClose} | ||
/> | ||
} | ||
<div name='content' class={this.state.isActive ? style.contentClicked : style.content}> | ||
<Panel selectedIndex={selectedPanelIndex}> | ||
<IntroThin | ||
onAcceptAll={this.onAcceptAll} | ||
onShowPurposes={this.handleShowDetails} | ||
onClose={this.handleClose} | ||
localization={localization} | ||
store={store} | ||
config={config} | ||
updateCSSPrefs={updateCSSPrefs} | ||
/> | ||
<Details | ||
onSave={this.props.onSave} | ||
onCancel={this.onCancel} | ||
store={this.props.store} | ||
onClose={this.handleClose} | ||
localization={localization} | ||
config={config} | ||
updateCSSPrefs={updateCSSPrefs} | ||
/> | ||
</Panel> | ||
</div> | ||
</div> | ||
); | ||
} | ||
} |
Oops, something went wrong.