IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[GH-26702] Clicking on "remember my preference" in landing page does not tick the associated checkbox (#26703)

Browse Source
This commit is contained in:
Antonin Delpeuch 2024-04-24 22:30:34 +02:00 committed by GitHub
parent d9aed02f57
commit 542e84b140
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
webapp/channels/src/components/linking_landing_page/linking_landing_page.tsx
View File

@ -7,7 +7,6 @@ import {FormattedMessage} from 'react-intl';
import BrowserStore from 'stores/browser_store'; import BrowserStore from 'stores/browser_store';
import FormattedMarkdownMessage from 'components/formatted_markdown_message'; import FormattedMarkdownMessage from 'components/formatted_markdown_message';
import CheckboxCheckedIcon from 'components/widgets/icons/checkbox_checked_icon';
import desktopImg from 'images/deep-linking/deeplinking-desktop-img.png'; import desktopImg from 'images/deep-linking/deeplinking-desktop-img.png';
import mobileImg from 'images/deep-linking/deeplinking-mobile-img.png'; import mobileImg from 'images/deep-linking/deeplinking-mobile-img.png';
@ -99,12 +98,13 @@ export default class LinkingLandingPage extends PureComponent<Props, State> {
return landingPreference && landingPreference === LandingPreferenceTypes.MATTERMOSTAPP; return landingPreference && landingPreference === LandingPreferenceTypes.MATTERMOSTAPP;
}; };
handleChecked = () => { handleChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
this.setState({rememberChecked: e.target.checked});
// If it was checked, and now we're unchecking it, clear the preference // If it was checked, and now we're unchecking it, clear the preference
if (this.state.rememberChecked) { if (!e.target.checked) {
BrowserStore.clearLandingPreference(this.props.siteUrl); BrowserStore.clearLandingPreference(this.props.siteUrl);
} }
this.setState({rememberChecked: !this.state.rememberChecked});
}; };
setPreference = (pref: string, clearIfNotChecked?: boolean) => { setPreference = (pref: string, clearIfNotChecked?: boolean) => {
@ -201,16 +201,6 @@ export default class LinkingLandingPage extends PureComponent<Props, State> {
this.setState({brandImageError: true}); this.setState({brandImageError: true});
}; };
renderCheckboxIcon = () => {
if (this.state.rememberChecked) {
return (
<CheckboxCheckedIcon/>
);
}
return null;
};
renderGraphic = () => { renderGraphic = () => {
const isMobile = UserAgent.isMobile(); const isMobile = UserAgent.isMobile();
@ -392,18 +382,18 @@ export default class LinkingLandingPage extends PureComponent<Props, State> {
/> />
</a> </a>
</div> </div>
<div className='get-app__preference'> <label className='get-app__preference'>
<button <input
className={`get-app__checkbox ${this.state.rememberChecked ? 'checked' : ''}`} type='checkbox'
onClick={this.handleChecked} checked={this.state.rememberChecked}
> className='get-app__checkbox'
{this.renderCheckboxIcon()} onChange={this.handleChecked}
</button> />
<FormattedMessage <FormattedMessage
id='get_app.rememberMyPreference' id='get_app.rememberMyPreference'
defaultMessage='Remember my preference' defaultMessage='Remember my preference'
/> />
</div> </label>
{this.renderDownloadLinkSection()} {this.renderDownloadLinkSection()}
</div> </div>
); );

20
webapp/channels/src/sass/routes/_get-app.scss
View File

@ -126,9 +126,10 @@
.get-app__preference { .get-app__preference {
display: flex; display: flex;
margin-top: 23px; margin-top: 23px;
cursor: pointer;
> span { > span {
margin-top: -2px; margin-top: 1px;
color: #000; color: #000;
font-family: "Open Sans"; font-family: "Open Sans";
font-size: 16px; font-size: 16px;
@ -136,27 +137,12 @@
line-height: 22px; line-height: 22px;
opacity: 0.8; opacity: 0.8;
} }
}
.get-app__checkbox { .get-app__checkbox {
width: 18px; width: 18px;
height: 18px; height: 18px;
padding: 0; padding: 0;
border: 2px solid $dark-gray;
border-radius: 3px;
margin-right: 7px; margin-right: 7px;
background: none;
> * {
pointer-events: none;
}
&.checked {
border: 0;
svg {
fill: #145dbf;
}
} }
} }