From: jamesjulich <51384945+jamesjulich@users.noreply.github.com>
Date: Mon, 13 Sep 2021 03:25:58 +0000 (-0500)
Subject: Move files and rename classes.
X-Git-Tag: v1.3.0^2~11^2~3
X-Git-Url: https://git.wafflesoft.org/?a=commitdiff_plain;h=f97596689fc8fea987911e4194110d5f9928adb8;p=cinny.git

Move files and rename classes.
---

diff --git a/src/app/atoms/image-upload/ImageUpload.jsx b/src/app/atoms/image-upload/ImageUpload.jsx
deleted file mode 100644
index e8a2671..0000000
--- a/src/app/atoms/image-upload/ImageUpload.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-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;
diff --git a/src/app/atoms/image-upload/ImageUpload.scss b/src/app/atoms/image-upload/ImageUpload.scss
deleted file mode 100644
index c7118ba..0000000
--- a/src/app/atoms/image-upload/ImageUpload.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.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
diff --git a/src/app/molecules/image-upload/ImageUpload.jsx b/src/app/molecules/image-upload/ImageUpload.jsx
new file mode 100644
index 0000000..992d5bc
--- /dev/null
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@@ -0,0 +1,63 @@
+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;
diff --git a/src/app/molecules/image-upload/ImageUpload.scss b/src/app/molecules/image-upload/ImageUpload.scss
new file mode 100644
index 0000000..dbf2bac
--- /dev/null
+++ b/src/app/molecules/image-upload/ImageUpload.scss
@@ -0,0 +1,20 @@
+.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
diff --git a/src/app/molecules/profile-editor/ProfileEditor.jsx b/src/app/molecules/profile-editor/ProfileEditor.jsx
deleted file mode 100644
index 797c400..0000000
--- a/src/app/molecules/profile-editor/ProfileEditor.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-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&nbsp;
-          {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;
diff --git a/src/app/molecules/profile-editor/ProfileEditor.scss b/src/app/molecules/profile-editor/ProfileEditor.scss
deleted file mode 100644
index 98a453a..0000000
--- a/src/app/molecules/profile-editor/ProfileEditor.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.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
diff --git a/src/app/organisms/profile-editor/ProfileEditor.jsx b/src/app/organisms/profile-editor/ProfileEditor.jsx
new file mode 100644
index 0000000..61cd896
--- /dev/null
+++ b/src/app/organisms/profile-editor/ProfileEditor.jsx
@@ -0,0 +1,68 @@
+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&nbsp;
+          {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;
diff --git a/src/app/organisms/profile-editor/ProfileEditor.scss b/src/app/organisms/profile-editor/ProfileEditor.scss
new file mode 100644
index 0000000..015b920
--- /dev/null
+++ b/src/app/organisms/profile-editor/ProfileEditor.scss
@@ -0,0 +1,24 @@
+.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
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index 91be164..f97c942 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -14,10 +14,11 @@ import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'
 
 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';
@@ -120,7 +121,7 @@ function AboutSection() {
 function Settings({ isOpen, onRequestClose }) {
   const settingSections = [{
     name: 'General',
-    iconSrc: GenIC,
+    iconSrc: SettingsIC,
     render() {
       return <GeneralSection />;
     },