Merge pull request #404 from carbon-bond/refactor-title-system

增加站方代表圖標
carbon-bond · Jun 1, 2022 · a8bbd86 · a8bbd86
2 parents e1ad4f8 + 7a63349
commit a8bbd86
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 23 deletions.
diff --git a/frontend/src/css/custom.d.ts b/frontend/src/css/custom.d.ts
@@ -8,6 +8,11 @@ declare module '*.png' {
 	export default value;
 }
 
+declare module '*.svg' {
+	const value: string;
+	export default value;
+}
+
 declare module '*.mp3' {
 	const value: string;
 	export default value;

diff --git a/frontend/src/css/user_page.module.css b/frontend/src/css/user_page.module.css
@@ -194,29 +194,21 @@
         & .item {
             margin: 0px 0px 5px;
         }
-        & .titleLawyer {
+        & .titleBlock {
             background-color: var(--lighter-gray);
             border-radius: 3px;
             display: inline-block;
             padding: 2px 5px 2px 2px;
-            & .titleLawyerImage {
-                background-image: url('/src/img/Q_lawyer.png');
-                background-size: 16px;
-                display: inline-block;
+            & .titleImage {
                 width: 16px;
                 height: 16px;
                 vertical-align: middle;
             }
-            & .titleLawyerText {
+            & .titleText {
+                margin-left: 4px;
                 vertical-align: middle;
             }
         }
-        & .titleUnknown {
-            background-color: var(--lighter-gray);
-            border-radius: 3px;
-            display: inline-block;
-            padding: 2px 5px 2px 2px;
-        }
     }
 
 }

diff --git a/frontend/src/img/Q_lawyer.png → frontend/src/img/title/律師.png b/frontend/src/img/Q_lawyer.png → frontend/src/img/title/律師.png
diff --git a/frontend/src/img/title/站方代表.png b/frontend/src/img/title/站方代表.png
diff --git a/frontend/src/tsx/profile/user_page.tsx b/frontend/src/tsx/profile/user_page.tsx
@@ -73,18 +73,24 @@ function Sentence(props: { is_me: boolean, sentence: string, setSentence: ((sent
 	}
 }
 
-function CertificationItem(props: { title: string }) : JSX.Element {
-	if (props.title === '律師') {
-		return <span className={style.titleLabel}>
-			<span className={style.titleLawyer}>
-				<span className={style.titleLawyerImage}/> <span className={style.titleLawyerText}>{props.title}</span>
-			</span>
-		</span>;
-	}
+import 律師圖標 from '../../img/title/律師.png';
+import 站方代表圖標 from '../../img/title/站方代表.png';
+
+const TITLE_IMAGE_MAPPING: {[index: string]: string} = {
+	'律師': 律師圖標,
+	'站方代表': 站方代表圖標
+};
 
+function CertificationItem(props: { title: string }) : JSX.Element {
+	let image_url = TITLE_IMAGE_MAPPING[props.title];
 	return <span className={style.titleLabel}>
-		<span className={style.titleUnknown}>
-			{props.title}
+		<span className={style.titleBlock}>
+			{
+				image_url ?
+					<img src={image_url} className={style.titleImage} /> :
+					<></>
+			}
+			<span className={style.titleText}>{props.title}</span>
 		</span>
 	</span>;
 }
@@ -193,7 +199,7 @@ export function ProfileDetail(props: { profile_user: User }): JSX.Element {
 						無
 					</div>
 					: props.profile_user.titles.split(',').map(title => (
-						<CertificationItem title={title} key={`key-${title}`}/>
+						<CertificationItem title={title} key={`${title}`}/>
 					))}
 			</div>
 		</div>