mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

UI Feature Flag: Share dialog QR code and social icons

Browse source
This commit is contained in:
Michael Telatynski 2020-09-16 16:06:17 +01:00
parent f4f94e31d1
commit c11abb74e0
4 changed files with 46 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
res/css/views/dialogs/_ShareDialog.scss
View file

@ -71,9 +71,12 @@ limitations under the License.
margin-right: 64px;
}
.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
width: 299px;
}
.mx_ShareDialog_social_container {
display: inline-block;
width: 299px;
}
.mx_ShareDialog_social_icon {

53
src/components/views/dialogs/ShareDialog.tsx
View file

@ -32,6 +32,8 @@ import {copyPlaintext, selectText} from "../../../utils/strings";
import StyledCheckbox from '../elements/StyledCheckbox';
import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
import { IDialogProps } from "./IDialogProps";
import SettingsStore from "../../../settings/SettingsStore";
import {UIFeature} from "../../../settings/UIFeature";
const socials = [
{
@ -197,6 +199,35 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
const matrixToUrl = this.getUrl();
const encodedUrl = encodeURIComponent(matrixToUrl);
const showQrCode = SettingsStore.getValue(UIFeature.ShareQRCode);
const showSocials = SettingsStore.getValue(UIFeature.ShareSocial);
let qrSocialSection;
if (showQrCode || showSocials) {
qrSocialSection = <>
<hr />
<div className="mx_ShareDialog_split">
{ showQrCode && <div className="mx_ShareDialog_qrcode_container">
<QRCode data={matrixToUrl} width={256} />
</div> }
{ showSocials && <div className="mx_ShareDialog_social_container">
{ socials.map((social) => (
<a
rel="noreferrer noopener"
target="_blank"
key={social.name}
title={social.name}
href={social.url(encodedUrl)}
className="mx_ShareDialog_social_icon"
>
<img src={social.img} alt={social.name} height={64} width={64} />
</a>
)) }
</div> }
</div>
</>;
}
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
return <BaseDialog
title={title}
@ -220,27 +251,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
/>
</div>
{ checkbox }
<hr />
<div className="mx_ShareDialog_split">
<div className="mx_ShareDialog_qrcode_container">
<QRCode data={matrixToUrl} width={256} />
</div>
<div className="mx_ShareDialog_social_container">
{ socials.map((social) => (
<a
rel="noreferrer noopener"
target="_blank"
key={social.name}
title={social.name}
href={social.url(encodedUrl)}
className="mx_ShareDialog_social_icon"
>
<img src={social.img} alt={social.name} height={64} width={64} />
</a>
)) }
</div>
</div>
{ qrSocialSection }
</div>
</BaseDialog>;
}

8
src/settings/Settings.ts
View file

@ -622,4 +622,12 @@ export const SETTINGS: {[setting: string]: ISetting} = {
supportedLevels: LEVELS_UI_FEATURE,
default: true,
},
[UIFeature.ShareQRCode]: {
supportedLevels: LEVELS_UI_FEATURE,
default: true,
},
[UIFeature.ShareSocial]: {
supportedLevels: LEVELS_UI_FEATURE,
default: true,
},
};

2
src/settings/UIFeature.ts
View file

@ -18,4 +18,6 @@ limitations under the License.
export enum UIFeature {
URLPreviews = "UIFeature.urlPreviews",
Widgets = "UIFeature.widgets",
ShareQRCode = "UIFeature.shareQrCode",
ShareSocial = "UIFeature.shareSocial",
}