Change the style for translation length warnings (#228)

3b1b · Feb 29, 2024 · f70b63c · f70b63c
1 parent c1437ff
commit f70b63c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 36 deletions.
diff --git a/app/src/pages/edit/Row.module.css b/app/src/pages/edit/Row.module.css
@@ -14,10 +14,17 @@
 .actions {
  display: flex;
  flex-wrap: wrap;
- align-items: center;
+ align-items: last baseline;
  gap: 20px;
 }
 
+.playWarningWrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 15px;
+}
+
 .edit {
  box-sizing: content-box;
  width: 50vw;
@@ -41,7 +48,13 @@
 
 .warning {
  border-style: dashed;
- background: var(--error-light);
+ border-color: var(--error);
+ border-width: 2px;
+}
+
+.warningTriangle {
+ marginLeft: '8px';
+ color: var(--error);
 }
 
 .legacy {

diff --git a/app/src/pages/edit/Row.tsx b/app/src/pages/edit/Row.tsx
@@ -7,6 +7,7 @@ import {
  FaStop,
  FaThumbsUp,
 } from "react-icons/fa6";
+import { FaExclamationTriangle } from 'react-icons/fa';
 import { Link, useParams } from "react-router-dom";
 import classNames from "classnames";
 import { useAtom, useAtomValue } from "jotai";
@@ -108,30 +109,39 @@ function Row({ index, entries }: Props) {
  <span>{edited ? 1 : reviews + Number(upvoted)}</span>
  </button>
 
- {start && end && (
- <button
- className={classes.action}
- onClick={() => {
- const header = document.querySelector("header")!;
-
- if (getPlaying) {
- stopVideo();
- header.style.height = "";
- } else {
- // Add a little breathing room at the end
- playSegment(start, end + 0.5);
-
- /** expand header */
- const expand = innerHeight / 3;
- if (parseFloat(window.getComputedStyle(header).height) < expand)
- header.style.height = expand + "px";
- }
- }}
- data-tooltip={`Play video at this timestamp<br/>(${formatTime(start)} - ${formatTime(end)})`}
- >
- {getPlaying ? <FaStop /> : <FaPlay />}
- </button>
- )}
+ <div className={classes.playWarningWrapper}>
+ {translationWarning && (
+ <FaExclamationTriangle 
+ className={classes.warningTriangle}
+ data-tooltip="This translation may be too long to fit in the time slot"
+ />
+ )}
+
+ {start && end && (
+ <button
+ className={classes.action}
+ onClick={() => {
+ const header = document.querySelector("header")!;
+
+ if (getPlaying) {
+ stopVideo();
+ header.style.height = "";
+ } else {
+ // Add a little breathing room at the end
+ playSegment(start, end + 0.5);
+
+ /** expand header */
+ const expand = innerHeight / 3;
+ if (parseFloat(window.getComputedStyle(header).height) < expand)
+ header.style.height = expand + "px";
+ }
+ }}
+ data-tooltip={`Play video at this timestamp<br/>(${formatTime(start)} - ${formatTime(end)})`}
+ >
+ {getPlaying ? <FaStop /> : <FaPlay />}
+ </button>
+ )}
+ </div>
  </div>
 
  {/* translation edit textbox */}
@@ -142,11 +152,7 @@ function Row({ index, entries }: Props) {
  )}
  value={currentTranslation}
  onChange={(value) => setEntry({ currentTranslation: value })}
- data-tooltip={
- translationWarning
- ? "This translation is starting to become too long to fit in the time slot"
- : "Edit translated text"
- }
+ data-tooltip={"Edit translated text"}
  />
 
  {/* original english textbox */}
@@ -157,11 +163,7 @@ function Row({ index, entries }: Props) {
  )}
  value={entry.currentOriginal}
  onChange={(value) => setEntry({ currentOriginal: value })}
- data-tooltip={
- translationWarning
- ? "This text is starting to become too long to fit in the time slot"
- : "Original English text. If you see a significant problem, click to edit."
- }
+ data-tooltip={"Original English text. If you see a significant problem, click to edit."}
  />
 
  {/* secondary actions */}