Skip to content

Commit 64613dd

Browse files
walkthunderwalkthunder
committed
feat(view): Diff view toggle button.
1 parent 2daa28e commit 64613dd

File tree

7 files changed

+104
-43
lines changed

7 files changed

+104
-43
lines changed

‎src/diff/conflict_diff_view.ts‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import type InvioPlugin from '../main';
1010
import type { recResult, vRecoveryItem } from './interfaces';
1111
import { FILE_REC_WARNING } from './constants';
1212
import DiffView, { TDiffType } from './abstract_diff_view';
13-
13+
import { Diff2HtmlConfig, html } from 'diff2html';
1414
export default class ConflictDiffView extends DiffView {
1515
remote: recResult
1616
versions: recResult[];
@@ -81,6 +81,13 @@ export default class ConflictDiffView extends DiffView {
8181
this.makeMoreGeneralHtml();
8282
}
8383

84+
reload(config?: Partial<Diff2HtmlConfig>) {
85+
this.syncHistoryContentContainer.innerHTML =
86+
this.getDiff(config) as string;
87+
88+
this.setupViewChangeBtn()
89+
}
90+
8491
public basicHtml(diff: string): void {
8592
// set title
8693
this.titleEl.setText(this.t('diff_view_conflict_title'));
@@ -91,11 +98,6 @@ export default class ConflictDiffView extends DiffView {
9198
cls: 'sync-history-content-container-top'
9299
});
93100

94-
const viewChangeBtn = topAction.createDiv({
95-
cls: ['view-action', 'btn'],
96-
text: this.t('view_change_btn')
97-
})
98-
99101
const diffResetBtn = topAction.createDiv({
100102
cls: ['view-action', 'btn'],
101103
text: this.t('diff_reset_btn')
@@ -111,9 +113,27 @@ export default class ConflictDiffView extends DiffView {
111113
`The ${this.file.basename} file has been overwritten with the online remote version.`
112114
);
113115
})
116+
117+
// add diff to container
118+
this.syncHistoryContentContainer.innerHTML = diff;
119+
120+
// add history lists and diff to DOM
121+
// this.contentEl.appendChild(this.leftHistory[0]);
122+
this.contentEl.appendChild(this.syncHistoryContentContainer?.parentNode);
123+
this.setupViewChangeBtn()
124+
this.contentEl.appendChild(this.rightHistory[0]);
125+
}
126+
127+
setupViewChangeBtn() {
128+
const target = this.containerEl.querySelector('.d2h-file-wrapper');
129+
const viewChangeBtn = target.createDiv({
130+
cls: ['btn', 'style-view-toggle'],
131+
text: this.t('view_change_btn')
132+
})
114133
setTooltip(viewChangeBtn, 'Click to change diff view', {
115134
placement: 'top',
116135
});
136+
117137
viewChangeBtn.addEventListener('click', e => {
118138
e.preventDefault();
119139
this.viewOutputFormat = ('line-by-line' === this.viewOutputFormat) ? 'side-by-side' : 'line-by-line';
@@ -122,14 +142,6 @@ export default class ConflictDiffView extends DiffView {
122142
outputFormat: this.viewOutputFormat
123143
});
124144
})
125-
126-
// add diff to container
127-
this.syncHistoryContentContainer.innerHTML = diff;
128-
129-
// add history lists and diff to DOM
130-
// this.contentEl.appendChild(this.leftHistory[0]);
131-
this.contentEl.appendChild(this.syncHistoryContentContainer?.parentNode);
132-
this.contentEl.appendChild(this.rightHistory[0]);
133145
}
134146

135147
async getInitialVersions() {

‎src/diff/local_to_remote_diff_view.ts‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
// @ts-ignore
77
setTooltip
88
} from 'obsidian';
9+
import { Diff2HtmlConfig, html } from 'diff2html';
910
import type InvioPlugin from '../main';
1011
import type { recResult, vRecoveryItem } from './interfaces';
1112
import { FILE_REC_WARNING } from './constants';
@@ -85,6 +86,32 @@ export default class LocalToRemoteDiffView extends DiffView {
8586
this.makeMoreGeneralHtml();
8687
}
8788

89+
setupViewChangeBtn() {
90+
const target = this.containerEl.querySelector('.d2h-file-wrapper');
91+
const viewChangeBtn = target.createDiv({
92+
cls: ['btn', 'style-view-toggle'],
93+
text: this.t('view_change_btn')
94+
})
95+
setTooltip(viewChangeBtn, 'Click to change diff view', {
96+
placement: 'top',
97+
});
98+
99+
viewChangeBtn.addEventListener('click', e => {
100+
e.preventDefault();
101+
this.viewOutputFormat = ('line-by-line' === this.viewOutputFormat) ? 'side-by-side' : 'line-by-line';
102+
console.log('diff styles changed to ', this.viewOutputFormat)
103+
this.reload({
104+
outputFormat: this.viewOutputFormat
105+
});
106+
})
107+
}
108+
reload(config?: Partial<Diff2HtmlConfig>) {
109+
this.syncHistoryContentContainer.innerHTML =
110+
this.getDiff(config) as string;
111+
112+
this.setupViewChangeBtn()
113+
}
114+
88115
public basicHtml(diff: string): void {
89116
// set title
90117
this.titleEl.setText(this.t('diff_view_local_title'));
@@ -95,11 +122,6 @@ export default class LocalToRemoteDiffView extends DiffView {
95122
cls: 'sync-history-content-container-top'
96123
});
97124

98-
const viewChangeBtn = topAction.createDiv({
99-
cls: ['view-action', 'btn'],
100-
text: this.t('view_change_btn')
101-
})
102-
103125
const diffResetBtn = topAction.createDiv({
104126
cls: ['view-action', 'btn'],
105127
text: this.t('diff_reset_btn')
@@ -115,24 +137,14 @@ export default class LocalToRemoteDiffView extends DiffView {
115137
`The ${this.file.basename} file has been overwritten with the online remote version.`
116138
);
117139
})
118-
setTooltip(viewChangeBtn, 'Click to change diff view', {
119-
placement: 'top',
120-
});
121-
viewChangeBtn.addEventListener('click', e => {
122-
e.preventDefault();
123-
this.viewOutputFormat = ('line-by-line' === this.viewOutputFormat) ? 'side-by-side' : 'line-by-line';
124-
console.log('diff styles changed to ', this.viewOutputFormat)
125-
this.reload({
126-
outputFormat: this.viewOutputFormat
127-
});
128-
})
129140

130141
// add diff to container
131142
this.syncHistoryContentContainer.innerHTML = diff;
132143

133144
// add history lists and diff to DOM
134145
// this.contentEl.appendChild(this.leftHistory[0]);
135146
this.contentEl.appendChild(this.syncHistoryContentContainer?.parentNode);
147+
this.setupViewChangeBtn()
136148
this.contentEl.appendChild(this.rightHistory[0]);
137149
}
138150

‎src/diff/remote_to_local_diff_view.ts‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { Plugin, App, TFile, Notice } from 'obsidian';
1+
import { Plugin, App, TFile, Notice,
2+
// @ts-ignore
3+
setTooltip } from 'obsidian';
4+
import { Diff2HtmlConfig, html } from 'diff2html';
25
import type InvioPlugin from '../main';
36
import type { recResult, vRecoveryItem } from './interfaces';
47
import { FILE_REC_WARNING } from './constants';
@@ -75,6 +78,32 @@ export default class RemoteToLocalDiffView extends DiffView {
7578
const diff = this.getDiff();
7679
this.basicHtml(diff as string);
7780
}
81+
setupViewChangeBtn() {
82+
const target = this.containerEl.querySelector('.d2h-file-wrapper');
83+
const viewChangeBtn = target.createDiv({
84+
cls: ['btn', 'style-view-toggle'],
85+
text: this.t('view_change_btn')
86+
})
87+
setTooltip(viewChangeBtn, 'Click to change diff view', {
88+
placement: 'top',
89+
});
90+
91+
viewChangeBtn.addEventListener('click', e => {
92+
e.preventDefault();
93+
this.viewOutputFormat = ('line-by-line' === this.viewOutputFormat) ? 'side-by-side' : 'line-by-line';
94+
console.log('diff styles changed to ', this.viewOutputFormat)
95+
this.reload({
96+
outputFormat: this.viewOutputFormat
97+
});
98+
})
99+
}
100+
reload(config?: Partial<Diff2HtmlConfig>) {
101+
this.syncHistoryContentContainer.innerHTML =
102+
this.getDiff(config) as string;
103+
104+
this.setupViewChangeBtn()
105+
}
106+
78107
public basicHtml(diff: string): void {
79108
// set title
80109
this.titleEl.setText(this.t('diff_view_remote_title'));
@@ -84,5 +113,6 @@ export default class RemoteToLocalDiffView extends DiffView {
84113
// add history lists and diff to DOM
85114
// this.contentEl.appendChild(this.leftHistory[0]);
86115
this.contentEl.appendChild(this.syncHistoryContentContainer?.parentNode);
116+
this.setupViewChangeBtn()
87117
}
88118
}

‎src/langs/zh_cn.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"diff_view_remote_title": "线上文件修改记录",
1111
"diff_view_conflict_title": "冲突文件修改记录",
1212
"diff_reset_btn": "丢弃本地所有更改",
13-
"view_change_btn": "diff样式",
13+
"view_change_btn": "切换对比样式",
1414
"diff_edit_list": "本地编辑历史",
1515
"diff_reset_ver_btn": "将文件恢复到该版本",
1616
"diff_version_list_title": "最新文件状态",

‎src/langs/zh_tw.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"diff_view_remote_title": "线上文件修改记录",
1111
"diff_view_conflict_title": "冲突文件修改记录",
1212
"diff_reset_btn": "丢弃本地所有更改",
13-
"view_change_btn": "diff样式",
13+
"view_change_btn": "切换对比样式",
1414
"diff_edit_list": "本地编辑历史",
1515
"diff_reset_ver_btn": "将文件恢复到该版本",
1616
"diff_version_list_title": "最新文件状态",

‎src/styles/diff-styles.scss‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,12 @@ mode from @SlRvb, which fall under the same license (MIT license, @kometenstaub
155155
border-radius: 3px;
156156
margin-bottom: 1em;
157157
max-height: 100%;
158+
position: relative;
159+
.style-view-toggle {
160+
position: absolute;
161+
top: 0px;
162+
right: 0;
163+
}
158164
}
159165
.d2h-file-collapse {
160166
-webkit-box-pack: end;
@@ -458,7 +464,7 @@ mode from @SlRvb, which fall under the same license (MIT license, @kometenstaub
458464
width: 100%;
459465
min-height: 32px;
460466
display: flex;
461-
justify-content: flex-end;
467+
justify-content: space-around;
462468
background-color: var(--background-secondary);
463469
border-bottom: 1px solid var(--background-modifier-border);
464470
font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
@@ -487,6 +493,14 @@ mode from @SlRvb, which fall under the same license (MIT license, @kometenstaub
487493
width: auto;
488494
}
489495

496+
.btn {
497+
border-radius: 0.25em;
498+
cursor: pointer;
499+
background-color: var(--interactive-accent);
500+
color: var(--text-on-accent);
501+
padding: var(--size-4-2) var(--size-4-3);
502+
margin-bottom: var(--size-4-2);
503+
}
490504
.sync-history-list-container {
491505
flex-shrink: unset;
492506
border-left: 1px solid var(--background-modifier-border);
@@ -501,14 +515,7 @@ mode from @SlRvb, which fall under the same license (MIT license, @kometenstaub
501515
margin-top: 0em;
502516
}
503517
}
504-
.btn {
505-
border-radius: 0.25em;
506-
cursor: pointer;
507-
background-color: var(--interactive-accent);
508-
color: var(--text-on-accent);
509-
padding: var(--size-4-2) var(--size-4-3);
510-
margin-bottom: var(--size-4-2);
511-
}
518+
512519

513520
.sync-history-list {
514521
margin-top: 1.5em;

0 commit comments

Comments
 (0)