Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitad6f80c

Browse files
committed
feat(diff): added feature to support swapping content in diff view
1 parentcabb944 commitad6f80c

File tree

6 files changed

+84
-5
lines changed

6 files changed

+84
-5
lines changed

‎components/buttons/nextDiff.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
2-
<divid="nextDiffSection"class="inline-flexitems-centergap-1">
2+
<divid="nextDiffSection"class="inline-flex gap-1 items-center">
33
<button
44
id="nextDiff"
5-
class="inline-flexitems-centerjustify-center px-1 py-1 text-sm text-gray-600transition-transform transformbg-gray-300 border border-gray-800rounded-sm dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
5+
class="inline-flexjustify-centeritems-center px-1 py-1 text-sm text-gray-600 bg-gray-300rounded-smborder border-gray-800transition-transform transform dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
66
aria-label="Go to next diff"
7+
title="Go to next diff"
78
type="button"
89
@click="clickHandler"
910
>

‎components/buttons/prevDiff.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
2-
<divid="prevDiffSection"class="inline-flexitems-centergap-1">
2+
<divid="prevDiffSection"class="inline-flex gap-1 items-center">
33
<button
44
id="prevDiff"
5-
class="inline-flexitems-centerjustify-center px-1 py-1 text-sm text-gray-600transition-transform transformbg-gray-300 border border-gray-800rounded-sm focus-visible:ring-4 dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center active:scale-y-75 hover:scale-105 hover:shadow-lg"
5+
class="inline-flexjustify-centeritems-center px-1 py-1 text-sm text-gray-600 bg-gray-300rounded-smborder border-gray-800transition-transform transform focus-visible:ring-4 dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center active:scale-y-75 hover:scale-105 hover:shadow-lg"
66
aria-label="Go to previous diff"
7+
title="Go to previous diff"
78
type="button"
89
@click="clickHandler"
910
>
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<divid="swapDiffContentSection"class="inline-flex gap-1 items-center">
3+
<button
4+
id="swapDiffContent"
5+
class="inline-flex gap-1 justify-center items-center px-1 py-1 text-sm text-gray-600 bg-gray-300 rounded-sm border border-gray-800 transition-transform transform focus-visible:ring-4 dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center active:scale-y-75 hover:scale-105 hover:shadow-lg"
6+
aria-label="Swap content"
7+
title="Swap content"
8+
type="button"
9+
@click="clickHandler"
10+
>
11+
<Swap />
12+
<spanaria-hidden="true">Swap</span>
13+
</button>
14+
</div>
15+
</template>
16+
<script>
17+
importVuefrom'vue'
18+
importSwapfrom'~/components/icons/swap.vue'
19+
exportdefaultVue.extend({
20+
components: { Swap },
21+
props: {
22+
clickHandler: {
23+
type:Function,
24+
required:true,
25+
},
26+
},
27+
})
28+
</script>

‎components/icons/swap.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<svg
3+
data-slot="icon"
4+
fill="none"
5+
stroke-width="1.5"
6+
stroke="currentColor"
7+
viewBox="0 0 24 24"
8+
xmlns="http://www.w3.org/2000/svg"
9+
aria-hidden="true"
10+
width="15"
11+
height="15"
12+
>
13+
<path
14+
stroke-linecap="round"
15+
stroke-linejoin="round"
16+
d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3"
17+
></path>
18+
</svg>
19+
</template>
20+
<script lang="ts">
21+
importVuefrom'vue'
22+
exportdefaultVue.extend({})
23+
</script>

‎components/v2/diffActionBar.vue‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<divclass="flex gap-4">
2020
<NextDiff:click-handler="goToNextDiff" />
2121
<PrevDiff:click-handler="goToPreviousDiff" />
22+
<swapDiffContent:click-handler="swapDiffContent" />
2223
</div>
2324
<divclass="flex gap-4 items-center">
2425
<DiffStyle:click-handler="toggleDiffFashion" />
@@ -33,6 +34,7 @@ import CopyLink from '../buttons/copyLink.vue'
3334
importDiffStylefrom'../buttons/diffStyle.vue'
3435
importNextDifffrom'../buttons/nextDiff.vue'
3536
importPrevDifffrom'../buttons/prevDiff.vue'
37+
importSwapDiffContentfrom'../buttons/swapDiffContent.vue'
3638
import {SIMPLE_DIFF_CHARACTER_LIMIT }from'~/constants/constants'
3739
import {
3840
E2E_LINK_GENERATION_ERROR,
@@ -52,6 +54,7 @@ export default Vue.extend({
5254
NextDiff,
5355
CopyLink,
5456
DiffStyle,
57+
SwapDiffContent,
5558
},
5659
props: {
5760
diffNavigator: {
@@ -62,6 +65,10 @@ export default Vue.extend({
6265
type:Function,
6366
required:true,
6467
},
68+
onSwapDiffContent: {
69+
type:Function,
70+
required:true,
71+
},
6572
},
6673
data():DiffActionBarData {
6774
return {
@@ -136,7 +143,7 @@ export default Vue.extend({
136143
const newUrl=newURL(window.location.origin)
137144
newUrl.pathname='/v2/diff'
138145
newUrl.hash=`#${extractedEncryptionKey}`
139-
newUrl.searchParams.set('id',id)
146+
newUrl.searchParams.set('id',data.address)
140147
putToClipboard(
141148
newUrl.toString(),
142149
E2E_LINK_GENERATION_SUCCESS,
@@ -164,6 +171,9 @@ export default Vue.extend({
164171
toggleDiffFashion(value:boolean) {
165172
this.onDiffFashion(value)
166173
},
174+
swapDiffContent() {
175+
this.onSwapDiffContent()
176+
},
167177
showErrorToast(content:string) {
168178
this.$store.commit('toast/show', {
169179
show:true,

‎pages/v2/diff.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<DiffActionBar
1515
:diff-navigator="diffNavigator"
1616
:on-diff-fashion="toggleDiffFashion"
17+
:on-swap-diff-content="swapDiffContent"
1718
/>
1819
<section
1920
class="flex flex-wrap gap-4 items-stretch w-full font-mono text-gray-800 dark:text-gray-50"
@@ -134,6 +135,21 @@ export default Vue.extend({
134135
this.monacoDiffEditor?.updateOptions?.({ renderSideBySide:value })
135136
this.isSideBySideDiff=value
136137
},
138+
swapDiffContent() {
139+
const temp=this.lhs
140+
this.lhs=this.rhs
141+
this.rhs=temp
142+
loader.init().then((monaco)=> {
143+
this.monacoDiffEditor.setModel({
144+
original:monaco.editor.createModel(this.lhs,'javascript'),
145+
modified:monaco.editor.createModel(this.rhs,'javascript'),
146+
})
147+
this.$store.commit('data/set', {
148+
lhs:this.lhs,
149+
rhs:this.rhs,
150+
})
151+
})
152+
},
137153
async getE2EData() {
138154
this.e2eDataStatusText=E2E_DATA_LOADING_INFO
139155
const url=newURL(window.location.href)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp