Skip to content

Commit

Permalink
integrate CodeMirror's MergeView to the 'My rules' pane
Browse files Browse the repository at this point in the history
  • Loading branch information
gorhill committed Mar 22, 2018
1 parent 747748c commit d825b55
Show file tree
Hide file tree
Showing 17 changed files with 12,057 additions and 399 deletions.
4 changes: 4 additions & 0 deletions src/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ <h2>uMatrix <span id="aboutVersion"></span></h2>
<li><span data-i18n="aboutIssueContributors"></span> <a href="https://github.com/gorhill/uMatrix/issues?q=is%3Aissue">uMatrix</a>, <a href="https://github.com/gorhill/httpswitchboard/issues?q=is%3Aissue">HTTP Switchboard</a>
<li><span data-i18n="aboutTranslationContributors"></span> <a href="https://github.com/gorhill/uMatrix/wiki/Translation-work-contributors">Crowdin</a>
</ul>
<li><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a>
<li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a> by <a href="https://github.com/davegandy">Dave Gandy</a>
<li><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a>
<li><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a>
</ul>

<h2 data-i18n="aboutUserDataHeader"></h2>
Expand Down
29 changes: 29 additions & 0 deletions src/css/codemirror.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.codeMirrorContainer {
font-size: 12px;
line-height: 1.25;
overflow: hidden;
position: relative;
}
.CodeMirror {
border: 1px solid #ddd;
box-sizing: border-box;
flex-grow: 1;
height: 100%;
width: 100%;
}

/* For when panels are used */
.codeMirrorContainer > div:not([class^="CodeMirror"]) {
display: flex;
flex-direction: column;
height: 100%;
}

.CodeMirror-merge-l-deleted {
background-image: none;
font-weight: bold;
}
.CodeMirror-merge-l-inserted {
background-image: none;
font-weight: bold;
}
3 changes: 2 additions & 1 deletion src/css/dashboard-common.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
body {
background-color: #fff;
box-sizing: border-box;
color: #000;
margin: 0;
padding: 0 0.5em 0 0.5em;
padding: 0 0.5em 0.5em 0.5em;
font: 14px/1.4 sans-serif;
}
body > *:first-child {
Expand Down
161 changes: 46 additions & 115 deletions src/css/user-rules.css
Original file line number Diff line number Diff line change
@@ -1,161 +1,92 @@
div > p:first-child {
margin-top: 0;
}
div > p:last-child {
margin-bottom: 0;
body {
height: 100vh;
overflow: hidden;
}
#diff {
border: 0;
margin: 0;
padding: 0;
white-space: nowrap;
}
#diff > .pane {
#diff .tools > * {
margin-bottom: 0.5em;
}
#diff .ruleActions {
border: 0;
box-sizing: box-border;
box-sizing: border-box;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: calc(50% - 2px);
width: 50%;
}
#diff .ruleActions h3 {
font-weight: normal;
margin: 0.5em 0;
}
#diff > .pane > div {
padding: 0 0 1em 0;
#ruleFilter {
direction: ltr;
text-align: center;
}
#diff > .pane > div > span {
float: left;
#ruleFilter .fa {
color: #888;
}
body[dir="ltr"] #revertButton:after {
content: '\2009\f061';

#revertButton:after,
#commitButton:before {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
body[dir="ltr"] #revertButton:after {
content: '\2009\f061';
}
body[dir="rtl"] #revertButton:after {
content: '\2009\f060';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
body[dir="ltr"] #commitButton:before {
content: '\f060\2009';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
body[dir="rtl"] #commitButton:before {
content: '\f061\2009';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
#revertButton,
#commitButton,
#diff.edit #editEnterButton {
#editSaveButton,
#diff.editing #exportButton,
#diff.editing #importButton {
opacity: 0.25;
pointer-events: none;
}
#editStopButton,
#editCancelButton {
display: none;
}
#diff.dirty:not(.edit) #revertButton,
#diff.dirty:not(.edit) #commitButton {
#diff.dirty:not(.editing) #revertButton,
#diff.dirty:not(.editing) #commitButton,
#diff.editing #editSaveButton {
opacity: 1;
pointer-events: auto;
}
#diff.edit #editStopButton,
#diff.edit #editCancelButton {
display: initial;
}
#diff.edit #importButton,
#diff.edit #exportButton {
display: none;

.codeMirrorContainer {
box-sizing: border-box;
padding: 0 0 0.5em 0;
}
#diff ul {
border: 0;
border-top: 1px solid #eee;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 1em 0 0 0;
}
#diff ul,
#diff textarea {
font: 12px/1.8 monospace;
}
#diff.edit .right ul {
visibility: hidden;
.CodeMirror-merge, .CodeMirror-merge-pane, .CodeMirror-merge .CodeMirror {
box-sizing: border-box;
height: 100%;
}
#diff .left {
padding: 0 0 0 0;
#diff.editing .CodeMirror-merge-copy,
#diff.editing .CodeMirror-merge-copy-reverse {
display: none;
}
#diff .right > ul {
#diff.editing .CodeMirror-merge-left .CodeMirror {
color: #888;
}
#diff li {
background-color: white;
direction: ltr;
padding: 0;
text-align: left;
white-space: nowrap;
}
#diff li:nth-of-type(2n+0) {
background-color: #eee;
}
#diff .right li {
cursor: pointer;
}
#diff .right li:hover {
background-color: #ffc;
color: #000;
}
#diff .right li.notLeft {
color: #000;
#diff.editing .CodeMirror-merge-editor .CodeMirror {
background-color: #ffe;
}
#diff .right li.notLeft:hover {
text-decoration: line-through;
}
#diff .right li.notRight {
color: #000;
}
#diff .right li.toRemove {
color: #000;
text-decoration: line-through;
}
#diff textarea {
border: 0;
border-top: 1px solid #eee;
direction: ltr;
height: 100%;
body[dir="rtl"] .CodeMirror-merge-pane-rightmost {
right: unset;
left: 0;
margin: 0;
overflow: hidden;
overflow-y: auto;
padding: 1em 0 0 0;
position: absolute;
resize: none;
visibility: hidden;
white-space: pre;
width: 100%;
}
#diff.edit textarea {
visibility: visible;
}
.hidden {
display: none;
}
}
Loading

0 comments on commit d825b55

Please sign in to comment.