aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--FrontEnd/src/pages/timeline/Timeline.tsx2
-rw-r--r--FrontEnd/src/pages/timeline/TimelinePostCreateView.css31
-rw-r--r--FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx (renamed from FrontEnd/src/pages/timeline/TimelinePostEdit.tsx)113
-rw-r--r--FrontEnd/src/pages/timeline/TimelinePostEdit.css10
-rw-r--r--FrontEnd/src/pages/timeline/TimelinePostView.css6
-rw-r--r--FrontEnd/src/views/common/button/LoadingButton.css6
6 files changed, 101 insertions, 67 deletions
diff --git a/FrontEnd/src/pages/timeline/Timeline.tsx b/FrontEnd/src/pages/timeline/Timeline.tsx
index 317d602e..d05336d7 100644
--- a/FrontEnd/src/pages/timeline/Timeline.tsx
+++ b/FrontEnd/src/pages/timeline/Timeline.tsx
@@ -17,7 +17,7 @@ import {
import { getTimelinePostUpdate$ } from "@/services/timeline";
import TimelinePostList from "./TimelinePostList";
-import TimelinePostEdit from "./TimelinePostEdit";
+import TimelinePostEdit from "./TimelinePostCreateView";
import TimelineCard from "./TimelineCard";
import "./Timeline.css";
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
new file mode 100644
index 00000000..d33d4bb7
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -0,0 +1,31 @@
+.timeline-post-create-card {
+ position: sticky !important;
+ top: 106px;
+ z-index: 100;
+ margin-right: 200px;
+}
+
+.timeline-post-create {
+ display: flex;
+}
+
+.timeline-post-create-edit-area {
+ flex-grow: 1;
+}
+
+.timeline-post-create-edit-text {
+ width: 100%;
+ height: 100%;
+}
+
+.timeline-post-create-image {
+ max-width: 100px;
+ max-height: 100px;
+}
+
+.timeline-post-create-right-area {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-left: 1em;
+} \ No newline at end of file
diff --git a/FrontEnd/src/pages/timeline/TimelinePostEdit.tsx b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
index cd5a2d8d..52b6c3d3 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostEdit.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
@@ -18,10 +18,12 @@ import BlobImage from "@/views/common/BlobImage";
import LoadingButton from "@/views/common/button/LoadingButton";
import PopupMenu from "@/views/common/menu/PopupMenu";
import MarkdownPostEdit from "./MarkdownPostEdit";
-import TimelinePostEditCard from "./TimelinePostContainer";
+import TimelinePostCard from "./TimelinePostCard";
+import TimelinePostContainer from "./TimelinePostContainer";
import IconButton from "@/views/common/button/IconButton";
-import "./TimelinePostEdit.css";
+import "./TimelinePostCreateView.css";
+import classNames from "classnames";
interface TimelinePostEditTextProps {
text: string;
@@ -87,7 +89,7 @@ function TimelinePostEditImage(props: TimelinePostEditImageProps) {
{file != null && !error && (
<BlobImage
blob={file}
- className="timeline-post-edit-image"
+ className="timeline-post-create-image"
onLoad={() => onSelect(file)}
onError={() => {
onSelect(null);
@@ -192,45 +194,51 @@ function TimelinePostEdit(props: TimelinePostEditProps) {
};
return (
- <TimelinePostEditCard className={className}>
- {showMarkdown ? (
- <MarkdownPostEdit
- className="cru-fill-parent"
- onClose={() => setShowMarkdown(false)}
- owner={timeline.owner.username}
- timeline={timeline.nameV2}
- onPosted={onPosted}
- onPostError={onPostError}
- />
- ) : (
- <div className="row">
- <div className="col px-1 py-1">
- {(() => {
- if (kind === "text") {
- return (
- <TimelinePostEditText
- className="cru-fill-parent timeline-post-edit"
- text={text}
- disabled={process}
- onChange={(t) => {
- setText(t);
- window.localStorage.setItem(draftTextLocalStorageKey, t);
- }}
- />
- );
- } else if (kind === "image") {
- return (
- <TimelinePostEditImage
- onSelect={setImage}
- disabled={process}
- />
- );
- }
- })()}
- </div>
- <div className="col col-auto align-self-end m-1">
- <div className="d-block cru-text-center mt-1 mb-2">
+ <TimelinePostContainer
+ className={classNames(className, "timeline-post-create-container")}
+ >
+ <TimelinePostCard className="timeline-post-create-card">
+ {showMarkdown ? (
+ <MarkdownPostEdit
+ className="cru-fill-parent"
+ onClose={() => setShowMarkdown(false)}
+ owner={timeline.owner.username}
+ timeline={timeline.nameV2}
+ onPosted={onPosted}
+ onPostError={onPostError}
+ />
+ ) : (
+ <div className="timeline-post-create">
+ <div className="timeline-post-create-edit-area">
+ {(() => {
+ if (kind === "text") {
+ return (
+ <TimelinePostEditText
+ className="timeline-post-create-edit-text"
+ text={text}
+ disabled={process}
+ onChange={(text) => {
+ setText(text);
+ window.localStorage.setItem(
+ draftTextLocalStorageKey,
+ text,
+ );
+ }}
+ />
+ );
+ } else if (kind === "image") {
+ return (
+ <TimelinePostEditImage
+ onSelect={setImage}
+ disabled={process}
+ />
+ );
+ }
+ })()}
+ </div>
+ <div className="timeline-post-create-right-area">
<PopupMenu
+ containerClassName="timeline-post-create-kind-select"
items={(["text", "image", "markdown"] as const).map((kind) => ({
type: "button",
text: `timeline.post.type.${kind}`,
@@ -244,20 +252,21 @@ function TimelinePostEdit(props: TimelinePostEditProps) {
},
}))}
>
- <IconButton large icon={postKindIconMap[kind]} />
+ <IconButton color="primary" icon={postKindIconMap[kind]} />
</PopupMenu>
+ <LoadingButton
+ onClick={() => void onSend()}
+ color="primary"
+ disabled={!canSend}
+ loading={process}
+ >
+ {t("timeline.send")}
+ </LoadingButton>
</div>
- <LoadingButton
- onClick={() => void onSend()}
- disabled={!canSend}
- loading={process}
- >
- {t("timeline.send")}
- </LoadingButton>
</div>
- </div>
- )}
- </TimelinePostEditCard>
+ )}
+ </TimelinePostCard>
+ </TimelinePostContainer>
);
}
diff --git a/FrontEnd/src/pages/timeline/TimelinePostEdit.css b/FrontEnd/src/pages/timeline/TimelinePostEdit.css
deleted file mode 100644
index 9b7629e2..00000000
--- a/FrontEnd/src/pages/timeline/TimelinePostEdit.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.timeline-post-edit {
- position: sticky !important;
- top: 106px;
- z-index: 100;
-}
-
-.timeline-post-edit-image {
- max-width: 100px;
- max-height: 100px;
-}
diff --git a/FrontEnd/src/pages/timeline/TimelinePostView.css b/FrontEnd/src/pages/timeline/TimelinePostView.css
index 229b4a7a..c95427e5 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostView.css
@@ -9,6 +9,10 @@
height: 2em;
}
+.timeline-post-author-nickname {
+ margin: 0 1em;
+}
+
.timeline-post-edit-button {
float: right;
}
@@ -23,5 +27,5 @@
}
.timeline-post-content {
- white-space: pre-line;
+ margin-top: 0.5em;
} \ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/views/common/button/LoadingButton.css
index 8d929383..2f73116a 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.css
+++ b/FrontEnd/src/views/common/button/LoadingButton.css
@@ -4,9 +4,9 @@
}
.cru-loading-button:disabled {
- color: var(--cru-key-2-color);
- border-color: var(--cru-key-2-color);
- cursor: auto;
+ color: var(--cru-surface-on-color);
+ border-color: var(--cru-surface-on-color);
+ cursor: not-allowed;
}
.cru-loading-button-spinner {
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 19:19:49 +0000