feat: use LetterWithPencil icon for editor caret position indicator

nrkno · Mar 13, 2024 · c234cc6 · c234cc6
1 parent 9af6155
commit c234cc6
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 3 deletions.
diff --git a/packages/apps/client/src/components/CurrentRundown/Line.module.scss b/packages/apps/client/src/components/CurrentRundown/Line.module.scss
@@ -15,6 +15,7 @@
 	composes: Line;
 	border: 1px solid var(--bs-primary);
 	background: var(--color-list-background-selected);
+	z-index: 1;
 }
 .LineSelected:nth-child(2n + 1) {
 	background: var(--color-list-background-selected);
@@ -31,6 +32,22 @@
 	white-space: nowrap;
 }
 
+.LineFlag {
+	text-align: center;
+}
+
+.LineFlagNew {
+	composes: LineFlag;
+}
+
+.LineFlagCaret {
+	composes: LineFlag;
+}
+
+.LineFlagOutput {
+	composes: LineFlag;
+}
+
 .LineIdentifier {
 	padding: var(--cell-padding);
 	text-align: center;

diff --git a/packages/apps/client/src/components/CurrentRundown/Line.tsx b/packages/apps/client/src/components/CurrentRundown/Line.tsx
@@ -6,6 +6,8 @@ import { TimeSpan } from '../TimeSpan/TimeSpan'
 import { removeMarkdownish } from '@sofie-prompter-editor/shared-lib'
 
 import classes from './Line.module.scss'
+import ENPS from '../icons/ENPS'
+import LetterWithPencil from '../icons/LetterWithPencil'
 
 const Line = observer(
 	({
@@ -39,7 +41,6 @@ const Line = observer(
 			<li
 				className={[
 					selected ? classes.LineSelected : classes.Line,
-					edited ? classes.LineEdited : null,
 					line.isOnAir ? classes.LineIsOnAir : line.isNext ? classes.LineIsNext : null,
 				]
 					.filter(Boolean)
@@ -51,8 +52,8 @@ const Line = observer(
 				tabIndex={0}
 				role="treeitem"
 			>
-				<div className={classes.LineFlagNew}></div>
-				<div className={classes.LineFlagCaret}></div>
+				<div className={classes.LineFlagNew}>{line.isNew ? <ENPS /> : null}</div>
+				<div className={classes.LineFlagCaret}>{edited ? <LetterWithPencil /> : null}</div>
 				<div className={classes.LineFlagOutput}></div>
 				<div className={classes.LineSegmentName}>{segmentName}</div>
 				<div className={classes.LineFlagOnAir}></div>

diff --git a/packages/apps/client/src/components/icons/ENPS.tsx b/packages/apps/client/src/components/icons/ENPS.tsx
@@ -0,0 +1,25 @@
+import classes from './IconComponent.module.scss'
+
+export default function ENPS() {
+	return (
+		<svg className={classes.IconComponent} viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<g clip-path="url(#clip0_70_5327)">
+				<path d="M4.2518 7.33H1.7418V9.24H4.0818V10.52H1.7418V12.68H4.3418V14H0.341797V6H4.2518V7.33Z" fill="#FFFF00" />
+				<path d="M8.45183 11.46V6H9.73183V14H8.11183L6.40183 8.39V14H5.12183V6H6.74183L8.45183 11.46Z" fill="#FFFF00" />
+				<path
+					d="M13.2818 6C13.6218 6 13.9618 6.05 14.1818 6.2C14.4418 6.35 14.6118 6.54 14.7818 6.74C14.9518 6.98 15.0418 7.23 15.1218 7.52C15.2018 7.81 15.2118 8.11 15.2118 8.4C15.2118 8.79 15.1718 9.18 15.0418 9.47C14.9118 9.76 14.7818 10.01 14.5718 10.2C14.3618 10.4 14.1418 10.54 13.8918 10.64C13.6318 10.74 13.2918 10.79 12.9918 10.79H12.2218V14H10.8118V6H13.2818ZM12.8518 9.61C13.1518 9.61 13.3618 9.51 13.5318 9.32C13.7018 9.12 13.7918 8.83 13.7918 8.39C13.7918 8 13.7018 7.66 13.5818 7.46C13.4618 7.26 13.2018 7.17 12.8118 7.17H12.2118V9.61H12.8518Z"
+					fill="#FFFF00"
+				/>
+				<path
+					d="M17.0819 11.63C17.0819 11.82 17.0819 11.96 17.1219 12.1C17.1619 12.24 17.2119 12.38 17.2519 12.47C17.3419 12.56 17.4219 12.66 17.5519 12.7C17.6819 12.75 17.8119 12.79 18.0219 12.79C18.2319 12.79 18.4519 12.7 18.6219 12.56C18.7919 12.42 18.8819 12.19 18.8819 11.86C18.8819 11.67 18.8419 11.53 18.7919 11.39C18.7519 11.25 18.6619 11.16 18.5819 11.06C18.4919 10.97 18.3719 10.87 18.2019 10.78C18.0319 10.69 17.8619 10.59 17.6019 10.55C17.3019 10.46 17.0019 10.32 16.7919 10.18C16.5819 10.04 16.3619 9.9 16.2319 9.71C16.1019 9.52 15.9719 9.34 15.8919 9.06C15.8019 8.83 15.7619 8.55 15.7619 8.22C15.7619 7.48 15.9719 6.92 16.3619 6.55C16.7419 6.19 17.2519 6 17.9319 6C18.2319 6 18.5319 6.05 18.7819 6.09C19.0419 6.14 19.2919 6.28 19.4619 6.46C19.6719 6.65 19.8019 6.83 19.9319 7.11C20.0619 7.39 20.1019 7.67 20.1019 8.04V8.27H18.7419C18.7419 7.9 18.7019 7.62 18.5719 7.43C18.4419 7.24 18.2719 7.15 17.9719 7.15C17.8019 7.15 17.6719 7.2 17.5919 7.24C17.5119 7.3 17.4219 7.35 17.3419 7.44C17.3019 7.53 17.2519 7.63 17.2119 7.72C17.1719 7.81 17.1719 7.95 17.1719 8.05C17.1719 8.28 17.2119 8.47 17.3019 8.65C17.3919 8.79 17.6019 8.98 17.9019 9.12L19.0119 9.63C19.2719 9.77 19.4819 9.91 19.6519 10.05C19.8219 10.19 19.9519 10.33 20.0819 10.52C20.1719 10.66 20.2519 10.85 20.2919 11.03C20.3319 11.22 20.3319 11.45 20.3319 11.68C20.3319 12.47 20.1219 13.08 19.6919 13.45C19.2619 13.81 18.6619 14 17.8919 14C17.0819 14 16.5219 13.81 16.1819 13.44C15.8419 13.07 15.6719 12.51 15.6719 11.81V11.4H17.0819V11.63Z"
+					fill="#FFFF00"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_70_5327">
+					<rect width="20" height="20" fill="currentColor" transform="translate(0.341797)" />
+				</clipPath>
+			</defs>
+		</svg>
+	)
+}
diff --git a/packages/apps/client/src/components/icons/IconComponent.module.scss b/packages/apps/client/src/components/icons/IconComponent.module.scss
@@ -0,0 +1,4 @@
+.IconComponent {
+	width: 1.2em;
+	height: 1.2em;
+}
diff --git a/packages/apps/client/src/components/icons/LetterWithPencil.tsx b/packages/apps/client/src/components/icons/LetterWithPencil.tsx
@@ -0,0 +1,12 @@
+import classes from './IconComponent.module.scss'
+
+export default function LetterWithPencil() {
+	return (
+		<svg className={classes.IconComponent} viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M12.5033 5.03495C12.443 5.09559 12.3713 5.14366 12.2923 5.17635C12.2133 5.20904 12.1286 5.22572 12.0431 5.2254C11.8927 5.22543 11.747 5.17332 11.6307 5.07794C11.5144 4.98256 11.4348 4.84982 11.4055 4.70233C11.3761 4.55485 11.3988 4.40174 11.4697 4.2691C11.5405 4.13646 11.6552 4.0325 11.7941 3.97492C11.933 3.91735 12.0876 3.90973 12.2315 3.95335C12.3755 3.99698 12.4998 4.08916 12.5834 4.21419C12.6669 4.33921 12.7046 4.48935 12.6898 4.63901C12.6751 4.78867 12.609 4.9286 12.5026 5.03495H12.5033ZM12.9622 3.6563C12.7226 3.41529 12.3977 3.27827 12.0579 3.27486C11.718 3.27146 11.3905 3.40194 11.1461 3.6381V3.63355L5.4248 9.35615L4.2418 12.35L7.26235 11.1943L12.9843 5.4724H12.9804C13.2153 5.22736 13.3449 4.90008 13.3415 4.56064C13.3381 4.2212 13.202 3.89658 12.9622 3.6563ZM2.93725 6.0054L3.9194 3.02905L4.8749 6.0054H2.9379H2.93725ZM5.41635 7.68305L6.66045 6.43895L4.83005 1.30005H3.04255L0.341797 8.86345H1.99475L2.5076 7.30865H5.2935L5.417 7.68305H5.41635Z"
+				fill="currentColor"
+			/>
+		</svg>
+	)
+}