+++ /dev/null
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-
-import initMatrix from '../../../client/initMatrix';
-
-import GenIC from '../../../../public/res/ic/outlined/settings.svg';
-import Avatar from '../avatar/Avatar';
-
-import RawIcon from '../system-icons/RawIcon';
-import './ImageUpload.scss';
-
-function ImageUpload({
- text, bgColor, imageSrc, onUpload,
-}) {
- const uploadImageRef = useRef(null);
-
- // Uploads image and passes resulting URI to onUpload function provided in component props.
- function uploadImage(e) {
- const file = e.target.files.item(0);
- if (file !== null) { // TODO Add upload progress spinner
- initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false }).then((res) => {
- if (res.content_uri !== null) {
- onUpload({ content_uri: res.content_uri });
- }
- }, (err) => {
- console.log(err); // TODO Replace with alert banner.
- });
- }
- }
-
- return (
- <button type="button" className="img-upload-container" onClick={() => { uploadImageRef.current.click(); }}>
- <div className="img-upload-mask">
- <Avatar
- imageSrc={imageSrc}
- text={text.slice(0, 1)}
- bgColor={bgColor}
- size="large"
- />
- </div>
- <div className="img-upload-icon">
- <RawIcon size="small" src={GenIC} />
- </div>
- <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
- </button>
- );
-}
-
-ImageUpload.defaultProps = {
- text: null,
- bgColor: 'transparent',
- imageSrc: null,
- onUpload: null,
-};
-
-ImageUpload.propTypes = {
- text: PropTypes.string,
- bgColor: PropTypes.string,
- imageSrc: PropTypes.string,
- onUpload: PropTypes.func,
-};
-
-export default ImageUpload;
+++ /dev/null
-.img-upload-container {
- display: flex;
- flex-direction: row-reverse;
- width: 80px;
- height: 80px;
-}
-
-.img-upload-container:hover {
- cursor: pointer;
-}
-
-.img-upload-mask {
- mask: url('../../../../public/res/svg/avatar-clip.svg');
- //width: 80px;
-}
-
-.img-upload-icon {
- z-index: 1;
- position: absolute;
-}
\ No newline at end of file
--- /dev/null
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+
+import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
+import Avatar from '../../atoms/avatar/Avatar';
+
+import RawIcon from '../../atoms/system-icons/RawIcon';
+import './ImageUpload.scss';
+
+function ImageUpload({
+ text, bgColor, imageSrc, onUpload,
+}) {
+ const uploadImageRef = useRef(null);
+
+ // Uploads image and passes resulting URI to onUpload function provided in component props.
+ function uploadImage(e) {
+ const file = e.target.files.item(0);
+ if (file !== null) { // TODO Add upload progress spinner
+ initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false }).then((res) => {
+ if (res.content_uri !== null) {
+ onUpload({ content_uri: res.content_uri });
+ }
+ }, (err) => {
+ console.log(err); // TODO Replace with alert banner.
+ });
+ }
+ }
+
+ return (
+ <button type="button" className="img-upload" onClick={() => { uploadImageRef.current.click(); }}>
+ <div className="img-upload__mask">
+ <Avatar
+ imageSrc={imageSrc}
+ text={text.slice(0, 1)}
+ bgColor={bgColor}
+ size="large"
+ />
+ </div>
+ <div className="img-upload__icon">
+ <RawIcon size="small" src={SettingsIC} />
+ </div>
+ <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
+ </button>
+ );
+}
+
+ImageUpload.defaultProps = {
+ text: null,
+ bgColor: 'transparent',
+ imageSrc: null,
+ onUpload: null,
+};
+
+ImageUpload.propTypes = {
+ text: PropTypes.string,
+ bgColor: PropTypes.string,
+ imageSrc: PropTypes.string,
+ onUpload: PropTypes.func,
+};
+
+export default ImageUpload;
--- /dev/null
+.img-upload {
+ display: flex;
+ flex-direction: row-reverse;
+ width: 80px;
+ height: 80px;
+}
+
+.img-upload:hover {
+ cursor: pointer;
+}
+
+.img-upload__mask {
+ mask: url('../../../../public/res/svg/avatar-clip.svg');
+ -webkit-mask: url('../../../../public/res/svg/avatar-clip.svg');
+}
+
+.img-upload__icon {
+ z-index: 1;
+ position: absolute;
+}
\ No newline at end of file
+++ /dev/null
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-
-import initMatrix from '../../../client/initMatrix';
-import colorMXID from '../../../util/colorMXID';
-
-import Button from '../../atoms/button/Button';
-import ImageUpload from '../../atoms/image-upload/ImageUpload';
-import Input from '../../atoms/input/Input';
-import Text from '../../atoms/text/Text';
-
-import './ProfileEditor.scss';
-
-// TODO Fix bug that prevents 'Save' button from enabling up until second changed.
-function ProfileEditor({
- userId,
-}) {
- const mx = initMatrix.matrixClient;
- const displayNameRef = useRef(null);
- const bgColor = colorMXID(userId);
- const [imageSrc, updateImgSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl));
- const [disabled, setDisabled] = useState(true);
-
- let username = mx.getUser(mx.getUserId()).displayName;
-
- // Sets avatar URL and updates the avatar component in profile editor to reflect new upload
- function handleUpload(e) {
- mx.setAvatarUrl(e.content_uri);
- updateImgSrc(mx.mxcUrlToHttp(e.content_uri));
- }
-
- function saveDisplayName() {
- if (displayNameRef.current.value !== null && displayNameRef.current.value !== '') {
- mx.setDisplayName(displayNameRef.current.value);
- username = displayNameRef.current.value;
- setDisabled(true);
- }
- }
-
- // Enables/disables button depending on if the typed displayname is different than the current.
- function onDisplayNameInputChange() {
- setDisabled((username === displayNameRef.current.value) || displayNameRef.current.value === '' || displayNameRef.current.value == null);
- }
-
- return (
- <form className="profile-editor">
- <ImageUpload text={username} bgColor={bgColor} imageSrc={imageSrc} onUpload={handleUpload} />
- <div className="display-name-input-container">
- <Text variant="b3">
- Display name of
- {mx.getUserId()}
- </Text>
- <Input id="display-name-input" onChange={onDisplayNameInputChange} placeholder={mx.getUser(mx.getUserId()).displayName} forwardRef={displayNameRef} />
- </div>
- <Button variant="primary" onClick={saveDisplayName} disabled={disabled}>Save</Button>
- </form>
- );
-}
-
-ProfileEditor.defaultProps = {
- userId: null,
-};
-
-ProfileEditor.propTypes = {
- userId: PropTypes.string,
-};
-
-export default ProfileEditor;
+++ /dev/null
-.profile-editor {
- display: flex;
- align-items: end;
-}
-
-.img-upload-container {
- margin-right: var(--sp-normal)
-}
-
-.display-name-input-container {
- display: flex;
- flex-direction: column;
- margin-right: var(--sp-normal);
- width: 100%;
- max-width: 400px;
-}
-
-.display-name-input-container > .text-b3 {
- margin-bottom: var(--sp-ultra-tight)
-}
-
-.profile-editor > .btn-primary {
- height: 46px;
-}
\ No newline at end of file
--- /dev/null
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import colorMXID from '../../../util/colorMXID';
+
+import Button from '../../atoms/button/Button';
+import ImageUpload from '../../molecules/image-upload/ImageUpload';
+import Input from '../../atoms/input/Input';
+import Text from '../../atoms/text/Text';
+
+import './ProfileEditor.scss';
+
+// TODO Fix bug that prevents 'Save' button from enabling up until second changed.
+function ProfileEditor({
+ userId,
+}) {
+ const mx = initMatrix.matrixClient;
+ const displayNameRef = useRef(null);
+ const bgColor = colorMXID(userId);
+ const [imageSrc, updateImgSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl));
+ const [disabled, setDisabled] = useState(true);
+
+ let username = mx.getUser(mx.getUserId()).displayName;
+
+ // Sets avatar URL and updates the avatar component in profile editor to reflect new upload
+ function handleUpload(e) {
+ mx.setAvatarUrl(e.content_uri);
+ updateImgSrc(mx.mxcUrlToHttp(e.content_uri));
+ }
+
+ function saveDisplayName() {
+ if (displayNameRef.current.value !== null && displayNameRef.current.value !== '') {
+ mx.setDisplayName(displayNameRef.current.value);
+ username = displayNameRef.current.value;
+ setDisabled(true);
+ }
+ }
+
+ // Enables/disables button depending on if the typed displayname is different than the current.
+ function onDisplayNameInputChange() {
+ setDisabled((username === displayNameRef.current.value) || displayNameRef.current.value === '' || displayNameRef.current.value == null);
+ }
+
+ return (
+ <form className="profile-editor">
+ <ImageUpload text={username} bgColor={bgColor} imageSrc={imageSrc} onUpload={handleUpload} />
+ <div className="profile-editor__input-container">
+ <Text variant="b3">
+ Display name of
+ {mx.getUserId()}
+ </Text>
+ <Input id="profile-editor__input" onChange={onDisplayNameInputChange} placeholder={mx.getUser(mx.getUserId()).displayName} forwardRef={displayNameRef} />
+ </div>
+ <Button variant="primary" onClick={saveDisplayName} disabled={disabled}>Save</Button>
+ </form>
+ );
+}
+
+ProfileEditor.defaultProps = {
+ userId: null,
+};
+
+ProfileEditor.propTypes = {
+ userId: PropTypes.string,
+};
+
+export default ProfileEditor;
--- /dev/null
+.profile-editor {
+ display: flex;
+ align-items: end;
+}
+
+.img-upload {
+ margin-right: var(--sp-normal)
+}
+
+.profile-editor__input-container {
+ display: flex;
+ flex-direction: column;
+ margin-right: var(--sp-normal);
+ width: 100%;
+ max-width: 400px;
+}
+
+.profile-editor__input-container > .text-b3 {
+ margin-bottom: var(--sp-ultra-tight)
+}
+
+.profile-editor > .btn-primary {
+ height: 46px;
+}
\ No newline at end of file
import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
import SettingTile from '../../molecules/setting-tile/SettingTile';
-import ProfileEditor from '../../molecules/profile-editor/ProfileEditor';
import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
-import GenIC from '../../../../public/res/ic/outlined/settings.svg';
+import ProfileEditor from '../profile-editor/ProfileEditor';
+
+import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
import SunIC from '../../../../public/res/ic/outlined/sun.svg';
import LockIC from '../../../../public/res/ic/outlined/lock.svg';
import InfoIC from '../../../../public/res/ic/outlined/info.svg';
function Settings({ isOpen, onRequestClose }) {
const settingSections = [{
name: 'General',
- iconSrc: GenIC,
+ iconSrc: SettingsIC,
render() {
return <GeneralSection />;
},
projects / cinny.git / commitdiff