From ddce03a67708249eec129eb36744be460345bd75 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Jun 2021 16:23:44 +0800
Subject: ...

---
 FrontEnd/src/views/common/AppBar.tsx            |   2 +
 FrontEnd/src/views/common/FlatButton.tsx        |  36 ----
 FrontEnd/src/views/common/button/FlatButton.css |  45 ++++
 FrontEnd/src/views/common/button/FlatButton.tsx |  36 ++++
 FrontEnd/src/views/common/common.sass           | 191 -----------------
 FrontEnd/src/views/common/index.css             | 273 ++++++++++++++++++++++++
 6 files changed, 356 insertions(+), 227 deletions(-)
 delete mode 100644 FrontEnd/src/views/common/FlatButton.tsx
 create mode 100644 FrontEnd/src/views/common/button/FlatButton.css
 create mode 100644 FrontEnd/src/views/common/button/FlatButton.tsx
 delete mode 100644 FrontEnd/src/views/common/common.sass
 create mode 100644 FrontEnd/src/views/common/index.css

(limited to 'FrontEnd/src/views/common')

diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/views/common/AppBar.tsx
index 91dfbee9..ebc8bf0c 100644
--- a/FrontEnd/src/views/common/AppBar.tsx
+++ b/FrontEnd/src/views/common/AppBar.tsx
@@ -9,6 +9,8 @@ import { useUser } from "@/services/user";
 import TimelineLogo from "./TimelineLogo";
 import UserAvatar from "./user/UserAvatar";
 
+import "./index.css";
+
 const AppBar: React.FC = (_) => {
   const { t } = useTranslation();
 
diff --git a/FrontEnd/src/views/common/FlatButton.tsx b/FrontEnd/src/views/common/FlatButton.tsx
deleted file mode 100644
index b1f7a051..00000000
--- a/FrontEnd/src/views/common/FlatButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-
-import { BootstrapThemeColor } from "@/common";
-
-export interface FlatButtonProps {
-  variant?: BootstrapThemeColor | string;
-  disabled?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  onClick?: () => void;
-}
-
-const FlatButton: React.FC<FlatButtonProps> = (props) => {
-  const { disabled, className, style } = props;
-  const variant = props.variant ?? "primary";
-
-  const onClick = disabled ? undefined : props.onClick;
-
-  return (
-    <div
-      className={classnames(
-        "flat-button",
-        variant,
-        disabled ? "disabled" : null,
-        className
-      )}
-      style={style}
-      onClick={onClick}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-export default FlatButton;
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
new file mode 100644
index 00000000..779e3562
--- /dev/null
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -0,0 +1,45 @@
+.cru-flat-button {
+  cursor: pointer;
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+}
+
+.cru-flat-button:hover:not(.disabled) {
+  background-color: #e9ecef;
+}
+
+.cru-flat-button.disabled {
+  cursor: default;
+}
+
+.cru-flat-button.primary {
+  color: var(--tl-primary-color);
+}
+
+.cru-flat-button.primary.disabled {
+  color: var(--tl-primary-lighter-color);
+}
+
+.cru-flat-button.secondary {
+  color: var(--tl-secondary-color);
+}
+
+.cru-flat-button.secondary.disabled {
+  color: var(--tl-secondary-lighter-color);
+}
+
+.cru-flat-button.success {
+  color: var(--tl-success-color);
+}
+
+.cru-flat-button.success.disabled {
+  color: var(--tl-success-lighter-color);
+}
+
+.cru-flat-button.danger {
+  color: var(--tl-danger-color);
+}
+
+.cru-flat-button.danger.disabled {
+  color: var(--tl-danger-ligher-color);
+}
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
new file mode 100644
index 00000000..0727eb88
--- /dev/null
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
+
+import "./FlatButton.css";
+import classNames from "classnames";
+
+function _FlatButton(
+  {
+    text,
+    color,
+    onClick,
+  }: {
+    text: I18nText;
+    color?: PaletteColorType;
+    onClick?: () => void;
+  },
+  ref: React.ForwardedRef<HTMLButtonElement>
+): React.ReactElement | null {
+  const { t } = useTranslation();
+
+  return (
+    <button
+      ref={ref}
+      className={classNames("cru-flat-button", color ?? "primary")}
+      onClick={onClick}
+    >
+      {convertI18nText(text, t)}
+    </button>
+  );
+}
+
+const FlatButton = React.forwardRef(_FlatButton);
+export default FlatButton;
diff --git a/FrontEnd/src/views/common/common.sass b/FrontEnd/src/views/common/common.sass
deleted file mode 100644
index cbf7292e..00000000
--- a/FrontEnd/src/views/common/common.sass
+++ /dev/null
@@ -1,191 +0,0 @@
-.image-cropper-container
-  position: relative
-  box-sizing: border-box
-  user-select: none
-
-.image-cropper-container img
-  position: absolute
-  left: 0
-  top: 0
-  width: 100%
-  height: 100%
-
-.image-cropper-mask-container
-  position: absolute
-  left: 0
-  top: 0
-  right: 0
-  bottom: 0
-  overflow: hidden
-
-.image-cropper-mask
-  position: absolute
-  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%)
-  touch-action: none
-
-.image-cropper-handler
-  position: absolute
-  width: 26px
-  height: 26px
-  border: black solid 2px
-  border-radius: 50%
-  background: white
-  touch-action: none
-
-.app-bar
-  display: flex
-  align-items: center
-  height: 56px
-
-  position: fixed
-  z-index: 1030
-  top: 0
-  left: 0
-  right: 0
-
-  background-color: var(--tl-primary-color)
-
-  transition: background-color 1s
-
-  a
-    color: var(--tl-text-on-primary-inactive-color)
-    text-decoration: none
-    margin: 0 1em
-
-    &:hover
-      color: var(--tl-text-on-primary-color)
-
-    &.active
-      color: var(--tl-text-on-primary-color)
-
-.app-bar-brand
-  display: flex
-  align-items: center
-
-.app-bar-brand-icon
-  height: 2em
-
-.app-bar-main-area
-  display: flex
-  flex-grow: 1
-
-.app-bar-link-area
-  display: flex
-  align-items: center
-  flex-shrink: 0
-
-.app-bar-user-area
-  display: flex
-  align-items: center
-  flex-shrink: 0
-  margin-left: auto
-
-.small-screen
-  .app-bar-main-area
-    position: absolute
-    top: 56px
-    left: 0
-    right: 0
-
-    transform-origin: top
-    transition: transform 0.6s, background-color 1s
-
-    background-color: var(--tl-primary-color)
-
-    flex-direction: column
-
-    &.app-bar-collapse
-      transform: scale(1,0)
-
-    a
-      text-align: left
-      padding: 0.5em 0.5em
-
-  .app-bar-link-area
-    flex-direction: column
-    align-items: stretch
-
-  .app-bar-user-area
-    flex-direction: column
-    align-items: stretch
-    margin-left: unset
-
-  .app-bar-avatar
-    align-self: flex-end
-
-.app-bar-toggler
-  margin-left: auto
-  font-size: 2em
-  margin-right: 1em
-  color: var(--tl-text-on-primary-color)
-  cursor: pointer
-  user-select: none
-
-.cru-skeleton
-  padding: 0 1em
-
-.cru-skeleton-line
-  height: 1em
-  background-color: #e6e6e6
-  margin: 0.7em 0
-  border-radius: 0.2em
-
-  &.last
-    width: 50%
-
-.cru-full-page
-  position: fixed
-  z-index: 1031
-  left: 0
-  top: 0
-  right: 0
-  bottom: 0
-  background-color: white
-  padding-top: 56px
-
-.cru-full-page-top-bar
-  height: 56px
-
-  position: absolute
-  top: 0
-  left: 0
-  right: 0
-  z-index: 1
-
-  background-color: var(--tl-primary-color)
-
-  display: flex
-  align-items: center
-
-.cru-full-page-content-container
-  overflow: scroll
-
-.cru-menu
-  min-width: 200px
-
-.cru-menu-item
-  font-size: 1.2em
-  padding: 0.5em 1.5em
-  cursor: pointer
-
-  @each $color, $value in $theme-colors
-    &.color-#{$color}
-      color: $value
-
-      &:hover
-        color: white
-        background-color: $value
-
-.cru-menu-item-icon
-  margin-right: 1em
-
-.cru-menu-divider
-  border-top: 1px solid $gray-200
-
-.cru-tab-pages-action-area
-  display: flex
-  align-items: center
-
-.cru-search-input
-  display: flex
-  flex-wrap: wrap
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
new file mode 100644
index 00000000..bfd82b58
--- /dev/null
+++ b/FrontEnd/src/views/common/index.css
@@ -0,0 +1,273 @@
+.image-cropper-container {
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.image-cropper-container img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.image-cropper-mask-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.image-cropper-mask {
+  position: absolute;
+  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 0.8);
+  touch-action: none;
+}
+
+.image-cropper-handler {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border: black solid 2px;
+  border-radius: 50%;
+  background: white;
+  touch-action: none;
+}
+
+.app-bar {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  position: fixed;
+  z-index: 1030;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--tl-primary-color);
+  transition: background-color 1s;
+}
+.app-bar a {
+  color: var(--tl-text-on-primary-inactive-color);
+  text-decoration: none;
+  margin: 0 1em;
+}
+.app-bar a:hover {
+  color: var(--tl-text-on-primary-color);
+}
+.app-bar a.active {
+  color: var(--tl-text-on-primary-color);
+}
+
+.app-bar-brand {
+  display: flex;
+  align-items: center;
+}
+
+.app-bar-brand-icon {
+  height: 2em;
+}
+
+.app-bar-main-area {
+  display: flex;
+  flex-grow: 1;
+}
+
+.app-bar-link-area {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.app-bar-user-area {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.small-screen .app-bar-main-area {
+  position: absolute;
+  top: 56px;
+  left: 0;
+  right: 0;
+  transform-origin: top;
+  transition: transform 0.6s, background-color 1s;
+  background-color: var(--tl-primary-color);
+  flex-direction: column;
+}
+.small-screen .app-bar-main-area.app-bar-collapse {
+  transform: scale(1, 0);
+}
+.small-screen .app-bar-main-area a {
+  text-align: left;
+  padding: 0.5em 0.5em;
+}
+.small-screen .app-bar-link-area {
+  flex-direction: column;
+  align-items: stretch;
+}
+.small-screen .app-bar-user-area {
+  flex-direction: column;
+  align-items: stretch;
+  margin-left: unset;
+}
+.small-screen .app-bar-avatar {
+  align-self: flex-end;
+}
+
+.app-bar-toggler {
+  margin-left: auto;
+  font-size: 2em;
+  margin-right: 1em;
+  color: var(--tl-text-on-primary-color);
+  cursor: pointer;
+  user-select: none;
+}
+
+.cru-skeleton {
+  padding: 0 1em;
+}
+
+.cru-skeleton-line {
+  height: 1em;
+  background-color: #e6e6e6;
+  margin: 0.7em 0;
+  border-radius: 0.2em;
+}
+.cru-skeleton-line.last {
+  width: 50%;
+}
+
+.cru-full-page {
+  position: fixed;
+  z-index: 1031;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  padding-top: 56px;
+}
+
+.cru-full-page-top-bar {
+  height: 56px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background-color: var(--tl-primary-color);
+  display: flex;
+  align-items: center;
+}
+
+.cru-full-page-content-container {
+  overflow: scroll;
+}
+
+.cru-menu {
+  min-width: 200px;
+}
+
+.cru-menu-item {
+  font-size: 1.2em;
+  padding: 0.5em 1.5em;
+  cursor: pointer;
+}
+.cru-menu-item.color-primary {
+  color: #0d6efd;
+}
+.cru-menu-item.color-primary:hover {
+  color: white;
+  background-color: #0d6efd;
+}
+.cru-menu-item.color-secondary {
+  color: #6c757d;
+}
+.cru-menu-item.color-secondary:hover {
+  color: white;
+  background-color: #6c757d;
+}
+.cru-menu-item.color-success {
+  color: #198754;
+}
+.cru-menu-item.color-success:hover {
+  color: white;
+  background-color: #198754;
+}
+.cru-menu-item.color-info {
+  color: #0dcaf0;
+}
+.cru-menu-item.color-info:hover {
+  color: white;
+  background-color: #0dcaf0;
+}
+.cru-menu-item.color-warning {
+  color: #ffc107;
+}
+.cru-menu-item.color-warning:hover {
+  color: white;
+  background-color: #ffc107;
+}
+.cru-menu-item.color-danger {
+  color: #dc3545;
+}
+.cru-menu-item.color-danger:hover {
+  color: white;
+  background-color: #dc3545;
+}
+.cru-menu-item.color-light {
+  color: #f8f9fa;
+}
+.cru-menu-item.color-light:hover {
+  color: white;
+  background-color: #f8f9fa;
+}
+.cru-menu-item.color-dark {
+  color: #212529;
+}
+.cru-menu-item.color-dark:hover {
+  color: white;
+  background-color: #212529;
+}
+
+.cru-menu-item-icon {
+  margin-right: 1em;
+}
+
+.cru-menu-divider {
+  border-top: 1px solid #e9ecef;
+}
+
+.cru-tab-pages-action-area {
+  display: flex;
+  align-items: center;
+}
+
+.cru-search-input {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.alert-container {
+  position: fixed;
+  z-index: 1070;
+}
+
+@media (min-width: 576px) {
+  .alert-container {
+    bottom: 0;
+    right: 0;
+  }
+}
+@media (max-width: 575.98px) {
+  .alert-container {
+    bottom: 0;
+    right: 0;
+    left: 0;
+    text-align: center;
+  }
+}
-- 
cgit v1.2.3