Adjustments

This commit is contained in:
Andras Schmelczer 2025-06-22 22:14:43 +01:00
commit 5e64297cec
No known key found for this signature in database
GPG key ID: FC8F2C3D3D1A718C
3 changed files with 46 additions and 29 deletions

View file

@ -23,6 +23,8 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<div class="background"></div>
<div class="page-wrapper"> <div class="page-wrapper">
<header> <header>
<h1>3-Way Text Merge</h1> <h1>3-Way Text Merge</h1>
@ -66,34 +68,40 @@
<main> <main>
<div class="text-area-card diamond-parent"> <div class="text-area-card diamond-parent">
<label for="original">Original</label> <label
for="original"
title="The text document's content before any concurrent edits occurred."
>Original</label
>
<textarea id="original" name="original"></textarea> <textarea id="original" name="original"></textarea>
</div> </div>
<div class="text-area-card diamond-left"> <div class="text-area-card diamond-left">
<label for="left"> <label
for="left"
title="Colour-coded tokens mark the origin of each token in the result. This text box is marked with the colour green."
>
First concurrent edit First concurrent edit
<div <div class="box Left"></div>
class="box Left"
title="Colour-coded tokens mark the origin of each token, including ones that got deleted."
></div>
</label> </label>
<textarea id="left" name="left"></textarea> <textarea id="left" name="left"></textarea>
</div> </div>
<div class="text-area-card diamond-right"> <div class="text-area-card diamond-right">
<label for="right" <label
>Second concurrent edit for="right"
<div title="Colour-coded tokens mark the origin of each token in the result. This text box is marked with the colour blue."
class="box Right" >
title="Colour-coded tokens mark the origin of each token, including ones that got deleted." Second concurrent edit
></div> <div class="box Right"></div>
</label> </label>
<textarea id="right" name="right"></textarea> <textarea id="right" name="right"></textarea>
</div> </div>
<div class="text-area-card diamond-result"> <div class="text-area-card diamond-result">
<label> <label
title="Read-only. Change the above text boxes to change the content of this box."
>
Deconflicted result Deconflicted result
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -105,7 +113,6 @@
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
title="Read-only. Change the above text boxes to change the content of this box."
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path <path

View file

@ -15,12 +15,23 @@ body {
overflow-y: auto; overflow-y: auto;
} }
.background {
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.page-wrapper { .page-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
min-height: 100%; min-height: 100%;
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%); max-width: 1000px;
margin: 0 auto;
} }
header { header {
@ -57,7 +68,7 @@ main {
gap: 20px; gap: 20px;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
padding: 32px 12vw 32px 12vw; padding: 32px;
} }
.diamond-parent { .diamond-parent {
@ -77,8 +88,6 @@ main {
.diamond-result { .diamond-result {
grid-column: 1 / -1; grid-column: 1 / -1;
grid-row: 3; grid-row: 3;
display: flex;
align-items: center;
} }
.diamond-result label { .diamond-result label {
@ -87,13 +96,12 @@ main {
} }
.diamond-result svg { .diamond-result svg {
margin-left: 6px; width: 20px;
height: 20px;
margin-left: 8px;
} }
.text-area-card { .text-area-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background: #fff;
@ -104,9 +112,11 @@ main {
} }
label { label {
display: inline-block;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 600; font-weight: 600;
color: #2451a6; color: #2451a6;
cursor: help;
} }
.box { .box {
@ -144,7 +154,7 @@ textarea {
.Right, .Right,
.AddedFromRight, .AddedFromRight,
.RemovedFromRight { .RemovedFromRight {
background: #8575ed; background: #85bff7;
} }
.RemovedFromLeft, .RemovedFromLeft,
@ -193,10 +203,7 @@ footer {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #5a6272; color: #5a6272;
font-size: 1rem; border-radius: 32px;
box-shadow: 0 -4px 12px 0 rgba(28, 28, 87, 0.1),
0 -1px 2px 0 rgba(1, 1, 3, 0.1);
background-color: #fff;
} }
.github-link > svg { .github-link > svg {

View file

@ -78,7 +78,7 @@ mod tests {
} }
fn ins_custom(text: &str, lj: bool, rj: bool) -> RawOperation<String> { fn ins_custom(text: &str, lj: bool, rj: bool) -> RawOperation<String> {
RawOperation::Insert(vec![Token::new(text.to_string(), text.to_string(), lj, rj)]) RawOperation::Insert(vec![Token::new(text.to_owned(), text.to_owned(), lj, rj)])
} }
#[test] #[test]
@ -88,7 +88,10 @@ mod tests {
assert_eq!(result.len(), 1); assert_eq!(result.len(), 1);
match &result[0] { match &result[0] {
RawOperation::Insert(tokens) => { RawOperation::Insert(tokens) => {
let originals: String = tokens.iter().map(|t| t.original()).collect(); let originals: String = tokens
.iter()
.map(crate::tokenizer::token::Token::original)
.collect();
assert_eq!(originals, "abc"); assert_eq!(originals, "abc");
} }
_ => panic!("Expected single Insert operation"), _ => panic!("Expected single Insert operation"),