Adjustments
This commit is contained in:
parent
a0cfef3238
commit
5e64297cec
3 changed files with 46 additions and 29 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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"),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue