From e86881f789079e661fd2c37e3bee61ff2450b4f7 Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 16 Jun 2020 16:22:42 +0800 Subject: feat(front): Use bootstrap icons. --- Timeline/ClientApp/src/app/about/About.tsx | 26 ++---- Timeline/ClientApp/src/app/about/about.sass | 3 +- Timeline/ClientApp/src/app/about/github.png | Bin 0 -> 4268 bytes .../ClientApp/src/app/common/CollapseButton.tsx | 101 --------------------- Timeline/ClientApp/src/app/index.sass | 10 +- .../ClientApp/src/app/timeline/TimelineItem.tsx | 18 ++-- .../src/app/timeline/TimelinePageTemplateUI.tsx | 14 ++- .../src/app/timeline/TimelinePostEdit.tsx | 19 ++-- 8 files changed, 48 insertions(+), 143 deletions(-) create mode 100644 Timeline/ClientApp/src/app/about/github.png delete mode 100644 Timeline/ClientApp/src/app/common/CollapseButton.tsx (limited to 'Timeline/ClientApp/src') 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" > - +

@@ -145,9 +143,6 @@ const About: React.FC = () => { return (
  • - {item.icon != null && ( - - )} {item.name}
    • @@ -161,9 +156,6 @@ const About: React.FC = () => { return (
  • - {item.icon != null && ( - - )} {item.name}
    • 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 Binary files /dev/null and b/Timeline/ClientApp/src/app/about/github.png 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 = (props) => { - const { onClick, collapse, className } = props; - - return ( - - {(() => { - if (collapse) { - return ( - <> - - - - - - ); - } else { - return ( - <> - - - - - - ); - } - })()} - - ); -}; - -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 = (props) => { {more != null ? (
    - { + { more.toggle(); e.stopPropagation(); }} @@ -149,9 +154,10 @@ const TimelineItem: React.FC = (props) => { className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center" onClick={more.toggle} > - { + { 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 { @@ -189,7 +192,12 @@ export default function TimelinePageTemplateUI< className="fixed-top mt-appbar info-card-container" data-collapse={infoCardCollapse ? 'true' : 'false'} > - { 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" /> = (props) => { if (state === 'input') { return ( <> - +
    + +
    -- cgit v1.2.3