aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Timeline/ClientApp/.editorconfig2
-rw-r--r--Timeline/ClientApp/package.json3
-rw-r--r--Timeline/ClientApp/src/app/about/About.tsx26
-rw-r--r--Timeline/ClientApp/src/app/about/about.sass3
-rw-r--r--Timeline/ClientApp/src/app/about/github.pngbin0 -> 4268 bytes
-rw-r--r--Timeline/ClientApp/src/app/common/CollapseButton.tsx101
-rw-r--r--Timeline/ClientApp/src/app/index.sass10
-rw-r--r--Timeline/ClientApp/src/app/timeline/TimelineItem.tsx18
-rw-r--r--Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx14
-rw-r--r--Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx19
-rw-r--r--Timeline/ClientApp/yarn.lock45
11 files changed, 88 insertions, 153 deletions
diff --git a/Timeline/ClientApp/.editorconfig b/Timeline/ClientApp/.editorconfig
index fc0b1223..54d8316a 100644
--- a/Timeline/ClientApp/.editorconfig
+++ b/Timeline/ClientApp/.editorconfig
@@ -9,5 +9,5 @@ tab_width = 2
[*.css]
tab_width = 2
-[*.scss]
+[*.sass]
tab_width = 2
diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json
index a4bac434..fa9cca09 100644
--- a/Timeline/ClientApp/package.json
+++ b/Timeline/ClientApp/package.json
@@ -4,9 +4,9 @@
"private": true,
"homepage": "https://crupest.xyz",
"dependencies": {
- "@fortawesome/fontawesome-free": "^5.13.0",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
+ "bootstrap-icons": "^1.0.0-alpha4",
"classnames": "^2.2.6",
"clsx": "^1.1.1",
"core-js": "^3.6.5",
@@ -18,6 +18,7 @@
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"react-i18next": "^11.5.0",
+ "react-inlinesvg": "^1.2.0",
"react-responsive": "^8.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
diff --git a/Timeline/ClientApp/src/app/about/About.tsx b/Timeline/ClientApp/src/app/about/About.tsx
index bce4c06e..841ec6fe 100644
--- a/Timeline/ClientApp/src/app/about/About.tsx
+++ b/Timeline/ClientApp/src/app/about/About.tsx
@@ -2,18 +2,17 @@ import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import authorAvatarUrl from './author-avatar.png';
+import githubLogoUrl from './github.png';
import AppBar from '../common/AppBar';
const frontendCredits: {
name: string;
url: string;
- icon?: string;
}[] = [
{
name: 'reactjs',
url: 'https://reactjs.org',
- icon: 'react',
},
{
name: 'typescript',
@@ -22,7 +21,6 @@ const frontendCredits: {
{
name: 'bootstrap',
url: 'https://getbootstrap.com',
- icon: 'bootstrap',
},
{
name: 'reactstrap',
@@ -39,12 +37,6 @@ const frontendCredits: {
{
name: 'sass',
url: 'https://sass-lang.com',
- icon: 'sass',
- },
- {
- name: 'fontawesome',
- url: 'https://fontawesome.com',
- icon: 'font-awesome-flag',
},
{
name: 'eslint',
@@ -58,12 +50,15 @@ const frontendCredits: {
name: 'pepjs',
url: 'https://github.com/jquery/PEP',
},
+ {
+ name: 'react-inlinesvg',
+ url: 'https://github.com/gilbarbara/react-inlinesvg',
+ },
];
const backendCredits: {
name: string;
url: string;
- icon?: string;
}[] = [
{
name: 'ASP.NET Core',
@@ -113,7 +108,10 @@ const About: React.FC = () => {
target="_blank"
rel="noopener noreferrer"
>
- <i className="fab fa-github about-link-icon text-body" />
+ <img
+ src={githubLogoUrl}
+ className="about-link-icon text-body"
+ />
</a>
</p>
</div>
@@ -145,9 +143,6 @@ const About: React.FC = () => {
return (
<li key={index}>
<a href={item.url} target="_blank" rel="noopener noreferrer">
- {item.icon != null && (
- <i className={'fab fa-' + item.icon + ' mx-2'} />
- )}
{item.name}
</a>
</li>
@@ -161,9 +156,6 @@ const About: React.FC = () => {
return (
<li key={index}>
<a href={item.url} target="_blank" rel="noopener noreferrer">
- {item.icon != null && (
- <i className={'fab fa-' + item.icon + ' mx-2'} />
- )}
{item.name}
</a>
</li>
diff --git a/Timeline/ClientApp/src/app/about/about.sass b/Timeline/ClientApp/src/app/about/about.sass
index 0b0f89f5..3b5840cd 100644
--- a/Timeline/ClientApp/src/app/about/about.sass
+++ b/Timeline/ClientApp/src/app/about/about.sass
@@ -1,3 +1,4 @@
.about-link-icon
@extend .mx-2
- font-size: 1.2em
+ width: 1.2em
+ height: 1.2em
diff --git a/Timeline/ClientApp/src/app/about/github.png b/Timeline/ClientApp/src/app/about/github.png
new file mode 100644
index 00000000..ea6ff545
--- /dev/null
+++ b/Timeline/ClientApp/src/app/about/github.png
Binary files differ
diff --git a/Timeline/ClientApp/src/app/common/CollapseButton.tsx b/Timeline/ClientApp/src/app/common/CollapseButton.tsx
deleted file mode 100644
index 5307c4ac..00000000
--- a/Timeline/ClientApp/src/app/common/CollapseButton.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from 'react';
-
-export interface CollapseButtonProps {
- collapse: boolean;
- onClick: () => void;
- className?: string;
-}
-
-const CollapseButton: React.FC<CollapseButtonProps> = (props) => {
- const { onClick, collapse, className } = props;
-
- return (
- <svg
- width="25"
- height="25"
- viewBox="0 0 100 100"
- className={className}
- onClick={onClick}
- >
- {(() => {
- if (collapse) {
- return (
- <>
- <line
- stroke="currentcolor"
- strokeWidth="14"
- x1="50"
- x2="90"
- y1="17"
- y2="17"
- />
- <line
- stroke="currentcolor"
- strokeWidth="14"
- x1="10"
- x2="50"
- y1="83"
- y2="83"
- />
- <line
- stroke="currentcolor"
- strokeWidth="14"
- x1="17"
- x2="17"
- y1="50"
- y2="90"
- />
- <line
- stroke="currentcolor"
- strokeWidth="14"
- x1="83"
- x2="83"
- y1="10"
- y2="50"
- />
- </>
- );
- } else {
- return (
- <>
- <line
- stroke="currentcolor"
- strokeWidth="14"
- x1="55"
- x2="95"
- y1="38"
- y2="38"
- />
- <line
- stroke="currentcolor"
- strokeWidth="14"
- x1="5"
- x2="45"
- y1="62"
- y2="62"
- />
- <line
- stroke="currentcolor"
- strokeWidth="14"
- x1="38"
- x2="38"
- y1="55"
- y2="95"
- />
- <line
- stroke="currentcolor"
- strokeWidth="14"
- x1="62"
- x2="62"
- y1="5"
- y2="45"
- />
- </>
- );
- }
- })()}
- </svg>
- );
-};
-
-export default CollapseButton;
diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass
index 86276701..ef0b03ba 100644
--- a/Timeline/ClientApp/src/app/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
@@ -1,8 +1,4 @@
@import '~bootstrap/scss/bootstrap'
-$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'
-@import '~@fortawesome/fontawesome-free/scss/fontawesome'
-@import '~@fortawesome/fontawesome-free/scss/solid'
-@import '~@fortawesome/fontawesome-free/scss/brands'
@import './common/common'
@import './common/alert'
@@ -53,10 +49,10 @@ small
margin-top: 56px
.icon-button
- font-size: 20px
+ font-size: 1.4em
-.large-icon
- font-size: 26px
+.large-icon-button
+ font-size: 1.6em
.cursor-pointer
cursor: pointer
diff --git a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
index 4737fd7d..f19e70e7 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
@@ -11,6 +11,10 @@ import {
} from 'reactstrap';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
+import Svg from 'react-inlinesvg';
+
+import chevronDownIcon from 'bootstrap-icons/icons/chevron-down.svg';
+import trashIcon from 'bootstrap-icons/icons/trash.svg';
import { TimelinePostInfo } from '../data/timeline';
import { useAvatarUrlWithGivenVersion } from '../user/api';
@@ -110,9 +114,10 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
</div>
{more != null ? (
<div className="col-auto px-2 d-flex justify-content-center align-items-center">
- <i
- className="fas fa-chevron-circle-down text-info icon-button"
- onClick={(e) => {
+ <Svg
+ src={chevronDownIcon}
+ className="text-info icon-button"
+ onClick={(e: Event) => {
more.toggle();
e.stopPropagation();
}}
@@ -149,9 +154,10 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
onClick={more.toggle}
>
- <i
- className="fas fa-trash text-danger large-icon"
- onClick={(e) => {
+ <Svg
+ src={trashIcon}
+ className="text-danger large-icon-button"
+ onClick={(e: Event) => {
toggleDeleteDialog();
e.stopPropagation();
}}
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
index 5eb6a310..d5dc2346 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
@@ -2,6 +2,10 @@ import React from 'react';
import { Spinner } from 'reactstrap';
import { useTranslation } from 'react-i18next';
import { fromEvent } from 'rxjs';
+import Svg from 'react-inlinesvg';
+
+import arrowsAngleContractIcon from 'bootstrap-icons/icons/arrows-angle-contract.svg';
+import arrowsAngleExpandIcon from 'bootstrap-icons/icons/arrows-angle-expand.svg';
import { getAlertHost } from '../common/alert-service';
@@ -11,7 +15,6 @@ import Timeline, {
} from './Timeline';
import AppBar from '../common/AppBar';
import TimelinePostEdit, { TimelinePostSendCallback } from './TimelinePostEdit';
-import CollapseButton from '../common/CollapseButton';
import { useEventEmiiter } from '../common';
export interface TimelineCardComponentProps<TTimeline, TManageItems> {
@@ -189,7 +192,12 @@ export default function TimelinePageTemplateUI<
className="fixed-top mt-appbar info-card-container"
data-collapse={infoCardCollapse ? 'true' : 'false'}
>
- <CollapseButton
+ <Svg
+ src={
+ infoCardCollapse
+ ? arrowsAngleContractIcon
+ : arrowsAngleExpandIcon
+ }
collapse={infoCardCollapse}
onClick={() => {
const newState = !infoCardCollapse;
@@ -199,7 +207,7 @@ export default function TimelinePageTemplateUI<
newState.toString()
);
}}
- className="float-right m-1 info-card-collapse-button text-orange"
+ className="float-right m-1 info-card-collapse-button text-primary icon-button"
/>
<CardComponent
timeline={timeline}
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
index f12b6892..6501e349 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
@@ -1,7 +1,10 @@
import React from 'react';
-import clsx from 'clsx';
import { Button, Spinner, Row, Col } from 'reactstrap';
import { useTranslation } from 'react-i18next';
+import Svg from 'react-inlinesvg';
+
+import textIcon from 'bootstrap-icons/icons/card-text.svg';
+import imageIcon from 'bootstrap-icons/icons/image.svg';
import { pushAlert } from '../common/alert-service';
import { CreatePostRequest } from '../data/timeline';
@@ -199,13 +202,13 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
if (state === 'input') {
return (
<>
- <i
- className={clsx(
- 'fas d-block text-center large-icon mt-1 mb-2',
- kind === 'text' ? 'fa-image' : 'fa-font'
- )}
- onClick={toggleKind}
- />
+ <div className="d-block text-center mt-1 mb-2">
+ <Svg
+ src={kind === 'text' ? imageIcon : textIcon}
+ className="icon-button"
+ onClick={toggleKind}
+ />
+ </div>
<Button color="primary" onClick={onSend} disabled={!canSend}>
{t('timeline.send')}
</Button>
diff --git a/Timeline/ClientApp/yarn.lock b/Timeline/ClientApp/yarn.lock
index f09d5793..a2dd90d2 100644
--- a/Timeline/ClientApp/yarn.lock
+++ b/Timeline/ClientApp/yarn.lock
@@ -1341,13 +1341,6 @@ __metadata:
languageName: node
linkType: hard
-"@fortawesome/fontawesome-free@npm:^5.13.0":
- version: 5.13.0
- resolution: "@fortawesome/fontawesome-free@npm:5.13.0"
- checksum: 3/53f4c992a1feac188ae198a9c6fd18ac696022d30d5ebb044ae9013053d0e60e1b7bfe2f831c9a0114adf4accaa457a47023966a9dacf508ddbcbb20a027f719
- languageName: node
- linkType: hard
-
"@hapi/address@npm:2.x.x":
version: 2.1.4
resolution: "@hapi/address@npm:2.1.4"
@@ -2710,6 +2703,13 @@ __metadata:
languageName: node
linkType: hard
+"bootstrap-icons@npm:^1.0.0-alpha4":
+ version: 1.0.0-alpha4
+ resolution: "bootstrap-icons@npm:1.0.0-alpha4"
+ checksum: 3/08e6842a758b0d494df45356f4c14dc642fddf6075652641118b1fb7fa8229c59679c07d3b56886cd3a5bf041440002e864f9fd47e886726074a205dee86ad82
+ languageName: node
+ linkType: hard
+
"bootstrap@npm:^4.5.0":
version: 4.5.0
resolution: "bootstrap@npm:4.5.0"
@@ -4599,6 +4599,13 @@ __metadata:
languageName: node
linkType: hard
+"exenv@npm:^1.2.2":
+ version: 1.2.2
+ resolution: "exenv@npm:1.2.2"
+ checksum: 3/09fd080c0478739f0154916b73dea07f30f97972e1b3be3368d2b96d282d889b509f05e163d830e323c9ab1e94b0a293a9947b410651325df467c404f37f32f1
+ languageName: node
+ linkType: hard
+
"expand-brackets@npm:^2.1.4":
version: 2.1.4
resolution: "expand-brackets@npm:2.1.4"
@@ -8563,6 +8570,15 @@ fsevents@~2.1.2:
languageName: node
linkType: hard
+"react-from-dom@npm:^0.3.0":
+ version: 0.3.1
+ resolution: "react-from-dom@npm:0.3.1"
+ peerDependencies:
+ react: ^15.0.0 || ^16.0.0
+ checksum: 3/a87ccfa17a6439b594488e700cc06878095a1bf12ff2534848ede528b9f8261dc29f13b3a5b5d34e13f750f3bd35d24f080cc222dc286d5156c7b9941085b4d8
+ languageName: node
+ linkType: hard
+
"react-hot-loader@npm:^4.12.21":
version: 4.12.21
resolution: "react-hot-loader@npm:4.12.21"
@@ -8599,6 +8615,18 @@ fsevents@~2.1.2:
languageName: node
linkType: hard
+"react-inlinesvg@npm:^1.2.0":
+ version: 1.2.0
+ resolution: "react-inlinesvg@npm:1.2.0"
+ dependencies:
+ exenv: ^1.2.2
+ react-from-dom: ^0.3.0
+ peerDependencies:
+ react: ^16.3.0
+ checksum: 3/2e804f764bdbb9d0536ab81b452dad53298ba10317989f4b3abba57068d1b04304fd3d83769aefe090695c78e191672b46afa7283bcf6733f295324e0a589818
+ languageName: node
+ linkType: hard
+
"react-is@npm:^16.6.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1":
version: 16.13.0
resolution: "react-is@npm:16.13.0"
@@ -10210,7 +10238,6 @@ fsevents@~2.1.2:
"@babel/preset-env": ^7.10.2
"@babel/preset-react": ^7.10.1
"@babel/preset-typescript": ^7.10.1
- "@fortawesome/fontawesome-free": ^5.13.0
"@hot-loader/react-dom": ^16.13.0
"@types/classnames": ^2.2.10
"@types/lodash": ^4.14.155
@@ -10230,6 +10257,7 @@ fsevents@~2.1.2:
babel-loader: ^8.1.0
babel-plugin-transform-builtin-extend: ^1.1.2
bootstrap: ^4.5.0
+ bootstrap-icons: ^1.0.0-alpha4
classnames: ^2.2.6
clean-webpack-plugin: ^3.0.0
clsx: ^1.1.1
@@ -10257,6 +10285,7 @@ fsevents@~2.1.2:
react-dom: ^16.13.1
react-hot-loader: ^4.12.21
react-i18next: ^11.5.0
+ react-inlinesvg: ^1.2.0
react-responsive: ^8.1.0
react-router: ^5.2.0
react-router-dom: ^5.2.0
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-01 14:18:45 +0000