lxm_front/Mergely
1
0
Fork 1
mirror of https://github.com/wickedest/Mergely.git synced 2026-02-02 09:38:00 +08:00
Code Issues Projects Releases Wiki Activity

chore: change resize

Browse Source
This commit is contained in:
Jamie Peabody
2021-12-31 15:30:37 +00:00
parent a0c8dad3e2
commit bfc6bdfae3
8 changed files with 485 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -3,3 +3,4 @@
mergely-*.tgz
package-lock.json
*.log
diff-view2.js

8
examples/app.js
View File

@@ -29,14 +29,12 @@ document.onreadystatechange = function () {
},
lhs: function(setValue) {
setValue(macbeth.join('\n'));
// setValue(lhs);
},
rhs: function(setValue) {
setValue(macbeth.join('\n')
.replace(/love/g,'bleed')
.replace(/heart/g, 'penis'));
// setValue(rhs);
.replace(/love/g, 'hate')
.replace(/heart/g, 'head'));
},
_debug: 'change,scroll'
_debug: ''
});
};

37
examples/full-page.html Normal file
View File

@@ -0,0 +1,37 @@
<!--
This example demonstrates how to make a full page editor. Note that the height
should be 100% for `html`, and `body`, and margin should be set to 0.
-->
<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
<title>Mergely - Full page example</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Merge and Diff your documents with diff online and share" />
<meta name="keywords" content="diff,merge,compare,jsdiff,comparison,difference,file,text,unix,patch,algorithm,saas,longest common subsequence" />
<meta name="author" content="Jamie Peabody" />
<!-- CodeMirror peer dependency -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
<!-- Mergely -->
<script type="text/javascript" src="/lib/mergely.js"></script>
<link type="text/css" rel="stylesheet" href="/lib/mergely.css" />
</head>
<body style="height:100%; margin: 0;">
<div id="mergely"></div>
<script type="text/javascript">
document.onreadystatechange = function () {
if (document.readyState !== 'complete') {
return;
}
new Mergely('#mergely');
}
</script>
</body>
</html>

9
examples/index.html
View File

@@ -19,6 +19,15 @@ This example demonstrates the minimum amount of code required to use Mergely.
<li>
<a href="ajax.html">ajax.html</a>
</li>
<li>
<a href="size.html">size.html</a>
</li>
<li>
<a href="styles.html">styles.html</a>
</li>
<li>
<a href="full-page.html">full-page.html</a>
</li>
</ul>
</body>
</html>

148
examples/size.html
View File

@@ -1,5 +1,5 @@
<!--
This example demonstrates how to enable line wrapping
This example demonstrates the minimum amount of code required to use Mergely.
-->
<!DOCTYPE html>
<html lang="en">
@@ -7,107 +7,63 @@ This example demonstrates how to enable line wrapping
<meta charset="utf-8" /><title>Mergely - Simple Example</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Merge and Diff your documents with diff online and share" />
<meta name="keywords" content="diff,merge,compare,jsdiff,comparison,difference,file,text,unix,patch,algorithm,saas,longest common subsequence" />
<meta name="description" content="" />
<meta name="keywords" content="mergely,diff,merge,compare" />
<meta name="author" content="Jamie Peabody" />
<!-- Requires CodeMirror -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
<!-- CodeMirror peer dependency -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/addon/search/searchcursor.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css" />
<!-- Requires Mergely -->
<script type="text/javascript" src="../lib/mergely.js"></script>
<link type="text/css" rel="stylesheet" href="../lib/mergely.css" />
<!-- Mergely -->
<script type="text/javascript" src="/lib/mergely.js"></script>
<link type="text/css" rel="stylesheet" href="/lib/mergely.css" />
<script type="text/javascript">
$(document).ready(function () {
$('#compare1').mergely({
width: 'auto',
height: 200,
license: 'lgpl-separate-notice',
cmsettings: {
readOnly: false,
lineWrapping: true,
}
});
$('#compare2').mergely({
width: 'auto',
height: 200,
license: 'lgpl-separate-notice',
cmsettings: {
readOnly: false,
lineWrapping: true,
}
});
$('#compare3').mergely({
width: 500,
height: 200,
license: 'lgpl-separate-notice',
cmsettings: {
readOnly: false,
lineWrapping: true,
}
});
$('#compare4').mergely({
width: 500,
height: 200,
license: 'lgpl-separate-notice',
cmsettings: {
readOnly: false,
lineWrapping: true,
}
});
$('#compare5').mergely({
width: 'auto',
height: 200,
autoresize: false,
license: 'lgpl-separate-notice',
cmsettings: {
readOnly: false,
lineWrapping: true,
}
});
$.ajax({
type: 'GET', async: true, dataType: 'text',
url: 'lhs.txt',
success: function (response) {
$('#compare1').mergely('lhs', response);
$('#compare2').mergely('lhs', response);
$('#compare3').mergely('lhs', response);
$('#compare4').mergely('lhs', response);
$('#compare5').mergely('lhs', response);
}
});
$.ajax({
type: 'GET', async: true, dataType: 'text',
url: 'rhs.txt',
success: function (response) {
$('#compare1').mergely('rhs', response);
$('#compare2').mergely('rhs', response);
$('#compare3').mergely('rhs', response);
$('#compare4').mergely('rhs', response);
$('#compare5').mergely('rhs', response);
}
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
.column-layout {
display: flex;
height: 90px;
}
.column-layout > * {
flex: 1;
}
</style>
</head>
<body>
<div>
<caption>Inserted and removed at start but not end</caption>
<div class="column-layout">
<div id="mergely0"></div>
<div id="mergely1"></div>
</div>
</div>
<div id="compare1"></div>
<div id="compare2"></div>
<table style="width:100%">
<tr>
<td><div id="compare3"></div></td>
<td><div id="compare4"></div></td>
</tr>
</table>
<div id="compare5"></div>
<script type="text/javascript">
document.onreadystatechange = function () {
if (document.readyState !== 'complete') {
return;
}
new Mergely('#mergely', {
license: 'lgpl',
ignorews: true,
wrap_lines: true,
change_timeout: 0,
cmsettings: {
readOnly: false
},
lhs: function(setValue) {
setValue(lhs);
},
rhs: function(setValue) {
setValue(rhs);
},
_debug: ''
});
</script>
</body>
</html>

278
examples/styles.html Executable file
View File

@@ -0,0 +1,278 @@
<!--
This example demonstrates the minimum amount of code required to use Mergely.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /><title>Mergely - Simple Example</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content="mergely,diff,merge,compare" />
<meta name="author" content="Jamie Peabody" />
<!-- CodeMirror peer dependency -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/addon/search/searchcursor.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css" />
<!-- Mergely -->
<script type="text/javascript" src="/lib/mergely.js"></script>
<link type="text/css" rel="stylesheet" href="/lib/mergely.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
.column-layout {
display: flex;
height: 90px;
}
.column-layout > * {
flex: 1;
}
.full-width-layout {
height: 90px;
}
.dark {
background-color: #0b0e10;
}
.dark .CodeMirror {
background-color: #12171b;
}
.dark .CodeMirror-code {
color: #fff;
}
.dark .mergely.a.rhs {
color: #fff;
}
.dark .mergely.current {
border-color: #616161;
}
.dark .mergely.d.lhs {
background-color: #541414;
}
.dark .mergely.a.rhs {
background-color: #253e56;
}
.dark .CodeMirror-gutters {
background-color: transparent;
border-right: 1px dotted #2E343A;
}
.dark .mergely.current .CodeMirror-linenumber {
background-color: #6a89f7;
}
.dark .CodeMirror-linenumber {
color: #999;
}
.dark .mergely-column {
border: 1px solid transparent;
}
.dark .mergely.current {
border-color: #6a89f7;
}
.dark .CodeMirror-cursor {
border-left: 2px solid #B19F73;
}
</style>
</head>
<body>
<div>
<caption>Inserted and removed at start but not end</caption>
<div class="column-layout">
<div id="mergely0"></div>
<div id="mergely1"></div>
</div>
</div>
<br />
<div>
<caption>Removed and added, not at the start or end</caption>
<div class="column-layout">
<div id="mergely2"></div>
<div id="mergely3"></div>
</div>
</div>
<br />
<div>
<caption>One document empty, one line</caption>
<div class="column-layout">
<div id="mergely4"></div>
<div id="mergely5"></div>
</div>
</div>
<br />
<div>
<caption>One document empty, multiple lines</caption>
<div class="column-layout">
<div id="mergely6"></div>
<div id="mergely7"></div>
</div>
</div>
<br />
<div>
<caption>Inserted and removed at the end</caption>
<div class="column-layout">
<div id="mergely8"></div>
<div id="mergely9"></div>
</div>
</div>
<br />
<div>
<caption>Changed lines</caption>
<div class="full-width-layout">
<div id="mergely10"></div>
</div>
</div>
<br />
<div>
<caption>Custom styles</caption>
<div class="full-width-layout" style="height:120px">
<div class="dark" id="mergely11"></div>
</div>
</div>
<br />
<script type="text/javascript">
document.onreadystatechange = function () {
if (document.readyState !== 'complete') {
return;
}
const data = [{
lhs: `\
the quick red fox
jumped over the hairy dog
`,
rhs: `\
the quick brown fox
jumped over the lazy dog
`
}, {
lhs: `\
the quick red fox
jumped over the hairy dog
`,
rhs: `\
the quick brown fox
jumped over the lazy dog
`
}, {
lhs: `\
the quick red fox
jumped over the hairy dog
`,
rhs: `\
the quick brown fox
jumped over the lazy dog
`
}, {
lhs: `\
the quick brown fox
jumped over the lazy dog
`,
rhs: `\
the quick red fox
jumped over the hairy dog
`
}, {
lhs: ``,
rhs: `\
the quick brown fox
`
}, {
lhs: `\
the quick red fox
`,
rhs: ``
}, {
lhs: ``,
rhs: `\
the quick brown fox
jumped over the lazy dog
`
}, {
lhs: `\
the quick red fox
jumped over the hairy dog
`,
rhs: ``
}, {
lhs: `\
the quick brown fox
jumped over the lazy dog`,
rhs: `\
the quick brown fox
jumped over the lazy dog
and the fence`
}, {
lhs: `\
the quick brown fox
jumped over the lazy dog
and the fence`,
rhs: `\
the quick brown fox
jumped over the lazy dog`
}, {
lhs: `\
the quick red fox
jumped over the hairy dog`,
rhs: `\
the quick brown fox
jumped over the lazy dog`
}, {
lhs: `\
the quick red fox
jumped over the hairy dog
and the fence
`,
rhs: `\
the quick brown fox
jumped over the lazy dog
and the postman
`
}];
for (let i = 0; i < data.length; ++i) {
const { lhs, rhs } = data[i];
new Mergely(`#mergely${i}`, {
license: 'lgpl-separate-notice',
wrap_lines: true,
ignorews: true,
lhs: function(setValue) {
setValue(lhs);
},
rhs: function(setValue) {
setValue(rhs);
},
_debug: ''
});
}
};
</script>
</body>
</html>

181
src/diff-view.js
View File

@@ -15,13 +15,20 @@ Added `.mergely-editor` to the DOM to scope all the CSS changes.
CSS now prefixes `.mergely-editor`.
Current active change gutter line number style changed from `.CodeMirror-linenumber` to `.CodeMirror-gutter-background`.
Removed support for jquery-ui merge buttons.
API switched from jQuery style to object methods.
API switched from jQuery-style to object methods.
Removed `options.width` and `options.height` and mergely now fills the parent container.
Removed `options.resize`.
Removed `options.resized`.
Removed `options.autoresize`.
Remove styles `.mergely-resizer`, `.mergely-full-screen-0`, and `.mergely-full-screen-8`.
Default for `options.change_timeout` changed to 0.
No longer necessary to separately require codemirror/addon/search/searchcursor
No longer necessary to separately require codemirror/addon/selection/mark-selection
FEATURE:
Gutter click now scrolls to any line.
File drop-target indicator.
Mergely now emits `resize` event on resize.
FIX:
Fixed issue where canvas markup was not rendered when `viewport` enabled.
@@ -31,6 +38,20 @@ Fixed issue where init triggered an updated event when autoupdate is disabled.
Fixed documentation issue where `merge` incorrectly stated: from the specified `side` to the opposite side
Fixed performance issue scrolling (find #)
Fixed issue where initial render scrolled to first change, showing it at the bottom, as opposed to middle
TODO:
Disable the fade-in
Fix the intermittent render issue
For some reason ignore-whitespace will mark the "red" differently
When wrap_lines is false, the CM editor grows, screwing up the layout
Fix the overflow for the rendered diff view
Fix the margin colorization
Remove the jump to first diff (instead, make it example)
Fix the alignment of the diff visualization and hz lines
Calculate only once.
Margin indicators are broken for macbeth
Macbeth needs a resize to render correctly
Introduce an async render pipeline as it's currently blocking UI
*/
const NOTICES = [
@@ -54,7 +75,6 @@ function CodeMirrorDiffView(el, options, { CodeMirror }) {
CodeMirrorDiffView.prototype.init = function(el, options = {}) {
this.settings = {
autoupdate: true,
autoresize: true,
rhs_margin: 'right',
wrap_lines: false,
line_numbers: true,
@@ -66,14 +86,14 @@ CodeMirrorDiffView.prototype.init = function(el, options = {}) {
ignoreaccents: false,
fadein: 'fast',
resize_timeout: 500,
change_timeout: 150,
change_timeout: 0,
fgcolor: {
a:'#4ba3fa',
c:'#a3a3a3',
d:'#ff7f7f', // color for differences (soft color)
ca:'#4b73ff',
cc:'#434343',
cd:'#ff4f4f'
a: '#4ba3fa',
c: '#a3a3a3',
d: '#ff7f7f', // color for differences (soft color)
ca: '#4b73ff',
cc: '#434343',
cd: '#ff4f4f'
}, // color for currently active difference (bright color)
bgcolor: '#eee',
vpcolor: 'rgba(0, 0, 200, 0.5)',
@@ -88,55 +108,7 @@ CodeMirrorDiffView.prototype.init = function(el, options = {}) {
lhs: function(setValue) { },
rhs: function(setValue) { },
loaded: function() { },
resize: (init) => {
const parent = el.parentNode;
const { settings } = this;
let width;
let height;
if (settings.width == 'auto') {
width = parent.offsetWidth;
}
else {
width = settings.width;
}
if (settings.height == 'auto') {
height = parent.offsetHeight - 2;
}
else {
height = settings.height;
}
const contentWidth = width / 2.0 - 2 * 8 - 8;
const contentHeight = height;
const lhsEditor = this._queryElement(`#${this.id}-editor-lhs`);
lhsEditor.style.width = `${contentWidth}px`;
lhsEditor.style.height = `${contentHeight}px`;
const rhsEditor = this._queryElement(`#${this.id}-editor-rhs`);
rhsEditor.style.width = `${contentWidth}px`;
rhsEditor.style.height = `${contentHeight}px`;
const lhsCM = this._queryElement(`#${this.id}-editor-lhs .cm-s-default`);
lhsCM.style.width = `${contentWidth}px`;
lhsCM.style.height = `${contentHeight}px`;
const rhsCM = this._queryElement(`#${this.id}-editor-rhs .cm-s-default`);
rhsCM.style.width = `${contentWidth}px`;
rhsCM.style.height = `${contentHeight}px`;
const lhsMargin = this._queryElement(`#${this.id}-lhs-margin`);
lhsMargin.style.height = `${contentHeight}px`;
lhsMargin.height = `${contentHeight}`;
const midCanvas = this._queryElement(`.mergely-canvas canvas`);
midCanvas.style.height = `${contentHeight}px`;
midCanvas.height = `${contentHeight}`;
const rhsMargin = this._queryElement(`#${this.id}-rhs-margin`);
rhsMargin.style.height = `${contentHeight}px`;
rhsMargin.height = `${contentHeight}`;
if (settings.resized) {
settings.resized();
}
},
_debug: '', //scroll,draw,calc,diff,markup,change,init
resized: function() { },
// user supplied options
...options
};
@@ -144,6 +116,7 @@ CodeMirrorDiffView.prototype.init = function(el, options = {}) {
this.el = el;
this.lhs_cmsettings = {
viewportMargin: Infinity,
...this.settings.cmsettings,
...this.settings.lhs_cmsettings,
// these override any user-defined CodeMirror settings
@@ -286,8 +259,10 @@ CodeMirrorDiffView.prototype._setOptions = function(opts) {
CodeMirrorDiffView.prototype.options = function(opts) {
if (opts) {
this._setOptions(opts);
if (this.settings.autoresize) this.resize();
if (this.settings.autoupdate) this.update();
this.resize();
if (this.settings.autoupdate) {
this.update();
}
}
else {
return this.settings;
@@ -379,9 +354,26 @@ CodeMirrorDiffView.prototype.search = function(side, query, direction) {
};
CodeMirrorDiffView.prototype.resize = function() {
const parent = this.el.parentNode;
const { settings } = this;
let height;
const contentHeight = parent.offsetHeight - 2;
const lhsMargin = this._queryElement(`#${this.id}-lhs-margin`);
lhsMargin.style.height = `${contentHeight}px`;
lhsMargin.height = `${contentHeight}`;
const midCanvas = this._queryElement(`.mergely-canvas canvas`);
midCanvas.style.height = `${contentHeight}px`;
midCanvas.height = `${contentHeight}`;
const rhsMargin = this._queryElement(`#${this.id}-rhs-margin`);
rhsMargin.style.height = `${contentHeight}px`;
rhsMargin.height = `${contentHeight}`;
this.el.dispatchEvent(new Event('resize'));
// recalculate line height as it may be zoomed
this.em_height = null;
this.settings.resize();
// this.settings.resize();
this._changing();
this._set_top_offset('lhs');
};
@@ -399,8 +391,10 @@ CodeMirrorDiffView.prototype.bind = function(el) {
const { CodeMirror } = this;
this.trace('init', 'bind');
el.style.visibility = 'hidden';
el.style.position = 'absolute';
el.style.display = 'flex';
el.style.flexGrow = '1';
el.style.opacity = '0';
el.style.height = '100%';
this.id = el.id;
const found = document.getElementById(this.id);
if (!found) {
@@ -476,7 +470,9 @@ CodeMirrorDiffView.prototype.bind = function(el) {
left: (editor.offsetWidth - 300) / 2
}));
editor.addEventListener('click', () => {
splash.style.cssText += 'visibility: hidden; opacity: 0; transition: visibility 0s 100ms, opacity 100ms linear;';
splash.style.visibility = 'hidden';
splash.style.opacity = '0';
splash.style.transition = `visibility 0s 100ms, opacity 100ms linear`;
setTimeout(() => splash.remove(), 110);
}, { once: true });
el.append(splash);
@@ -495,8 +491,8 @@ CodeMirrorDiffView.prototype.bind = function(el) {
// get current diff border color from user-defined css
const diffColor
= htmlToElement('<div style="display:none" class="mergely current start"></div>')
const body = this._queryElement('body');
body.append(diffColor);
// const body = this._queryElement('body');
this.el.append(diffColor);
this.current_diff_color = window.getComputedStyle(diffColor).borderTopColor;
// make a throttled render function
@@ -531,34 +527,33 @@ CodeMirrorDiffView.prototype.bind = function(el) {
this._scrolling({ side: 'rhs', id: this.rhsId });
});
// resize
if (this.settings.autoresize) {
let resizeTimeout;
const resize = (init) => {
if (init) {
if (this.settings.fadein !== false) {
const duration = this.settings.fadein === 'fast' ? 200 : 750;
el.style.cssText += `visibility: visible; opacity: 1.0; transition: opacity ${duration}ms linear;`;
}
else {
el.style.visibility = 'visible';
el.style.opacity = '1.0';
}
// resize event handeler
let resizeTimeout;
const resize = (init) => {
if (init) {
if (this.settings.fadein !== false) {
const duration = this.settings.fadein === 'fast' ? 200 : 750;
el.style.visibility = 'visible';
el.style.opacity = '1.0';
el.style.transition = `opacity ${duration}ms linear`;
}
if (this.settings.resize) this.settings.resize(init);
this.resize();
this.editor.lhs.refresh();
this.editor.rhs.refresh();
};
this._handleResize = () => {
if (resizeTimeout) {
clearTimeout(resizeTimeout);
else {
el.style.visibility = 'visible';
el.style.opacity = '1.0';
}
resizeTimeout = setTimeout(resize, this.settings.resize_timeout);
};
window.addEventListener('resize', this._handleResize);
resize(true);
}
}
this.resize();
this.editor.lhs.refresh();
this.editor.rhs.refresh();
};
this._handleResize = () => {
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(resize, this.settings.resize_timeout);
};
window.addEventListener('resize', this._handleResize);
resize(true);
// scrollToDiff() from gutter
function gutterClicked(side, line, ev) {
@@ -824,8 +819,8 @@ CodeMirrorDiffView.prototype._clearMarginMarkup = function() {
const ex = this._draw_info();
const ctx = ex.dcanvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, this.draw_mid_width, ex.visible_page_height);
ctx.fillStyle = 'rgba(0,0,0,0)'; // transparent
ctx.clearRect(0, 0, this.draw_mid_width, ex.visible_page_height);
};
CodeMirrorDiffView.prototype._diff = function() {
@@ -1531,7 +1526,7 @@ function throttle(func, { delay }) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this);
setImmediate(func.apply(this));
lastTime = now;
} else {
// call `func` if no other event after `delay`

55
src/mergely.css
View File

@@ -1,19 +1,22 @@
.mergely-editor .CodeMirror {
line-height: 18px;
}
/* FIXME: needed? */
.CodeMirror-scroll {
height: 100%;
overflow: auto;
width: 100%;
}
/*
.mergely-editor .mergely-column,
.mergely-editor .mergely-canvas,
.mergely-editor .mergely-margin {
position: relative;
float: left;
}
*/
.mergely-editor .mergely-column {
flex-grow: 1;
width: 100%;
}
.mergely-editor .mergely-margin canvas {
width: 8px;
@@ -23,43 +26,19 @@
width: 28px;
}
/* resizeable */
/* FIXME: needed? */
.mergely-resizer {
width: 100%;
height: 100%;
}
/* FIXME: needed? */
.mergely-full-screen-0 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
/* FIXME: needed? */
.mergely-full-screen-8 {
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
overflow: hidden;
}
.mergely-editor .mergely.a.rhs.start {
border-top-width: 1px;
border-top-style: solid;
}
.mergely-editor .mergely.a.lhs.start.end {
border-top-width: 0px;
}
.mergely-editor .mergely.a.lhs.start.end,
.mergely-editor .mergely.a.rhs.end {
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-width: 0px;
}
.mergely-editor .mergely.d.lhs.end,
@@ -135,10 +114,9 @@
}
.mergely-editor .merge-button {
opacity: 0.6;
height: 18px;
cursor: pointer;
width: 27px;
width: 26px;
padding-left: 3px;
}
@@ -147,6 +125,7 @@
color: #717171;
}
.mergely-editor .mergely.current.CodeMirror-gutter-background {
/* FIXME: does this do anything? */
background-color: #777;
}
.mergely-editor .mergely.current .CodeMirror-linenumber {
@@ -154,13 +133,11 @@
font-weight: bold;
}
.mergely-editor .merge-button {
background-color: #bfbfbf;
color: #eee;
color: #383838;
}
.mergely-editor .merge-button:hover {
color: #fff;
mix-blend-mode: darken;
opacity: 0.8;
}
.mergely-editor .mergely-column {
border: 1px solid #ccc;
@@ -180,10 +157,12 @@
.mergely-editor .mergely.c {
border-color: #a3a3a3;
}
/*
.mergely-editor .mergely.c.lhs,
.mergely-editor .mergely.c.rhs {
background-color: #fafafa;
}
*/
.mergely-editor .mergely.ch.d.lhs {
text-decoration: line-through;
color: #ff0000;