Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
W
wiki-js
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
1
Issues
1
List
Board
Labels
Milestones
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Jacklull
wiki-js
Commits
27ff329d
Commit
27ff329d
authored
Feb 23, 2020
by
NGPixel
Committed by
Nicolas Giard
Mar 01, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: history UI
parent
ed0988fe
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
68 additions
and
45 deletions
+68
-45
nav-header.vue
client/components/common/nav-header.vue
+3
-9
history.vue
client/components/history.vue
+65
-36
No files found.
client/components/common/nav-header.vue
View file @
27ff329d
...
...
@@ -126,10 +126,9 @@
v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-file-document-edit-outline
v-list-item-title.body-2
{{
$t
(
'common:header.edit'
)
}}
v-list-item.pl-4(@click='pageHistory', v-if='mode !== `history`')
v-list-item-avatar(size='24'): v-icon(color='
grey lighten-2
') mdi-history
v-list-item-avatar(size='24'): v-icon(color='
indigo
') mdi-history
v-list-item-content
v-list-item-title.body-2.grey--text.text--ligten-2
{{
$t
(
'common:header.history'
)
}}
v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
v-list-item-title.body-2
{{
$t
(
'common:header.history'
)
}}
v-list-item.pl-4(@click='pageSource', v-if='mode !== `source`')
v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-code-tags
v-list-item-title.body-2
{{
$t
(
'common:header.viewSource'
)
}}
...
...
@@ -342,12 +341,7 @@ export default {
window
.
location
.
assign
(
`/e/
${
this
.
locale
}
/
${
this
.
path
}
`
)
},
pageHistory
()
{
this
.
$store
.
commit
(
'showNotification'
,
{
style
:
'indigo'
,
message
:
`Coming soon...`
,
icon
:
'ferry'
})
// window.location.assign(`/h/${this.locale}/${this.path}`)
window
.
location
.
assign
(
`/h/
${
this
.
locale
}
/
${
this
.
path
}
`
)
},
pageSource
()
{
window
.
location
.
assign
(
`/s/
${
this
.
locale
}
/
${
this
.
path
}
`
)
...
...
client/components/history.vue
View file @
27ff329d
...
...
@@ -10,8 +10,8 @@
v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Live Version
v-container(fluid, grid-list-xl)
v-layout(row, wrap)
v-flex(xs4)
v-chip.m
a-0
(
v-flex(xs
12, md
4)
v-chip.m
y-0.ml-6
(
label
small
:color='darkMode ? `grey darken-2` : `grey lighten-2`'
...
...
@@ -25,43 +25,29 @@
v-for='(ph, idx) in trail'
:key='ph.versionId'
:small='ph.actionType === `edit`'
fill-dot
:color='trailColor(ph.actionType)'
:icon='trailIcon(ph.actionType)'
:class='idx >= trail.length - 1 ? `pb-4` : `pb-2`'
)
v-card.radius-7(flat, :class='trailBgColor(ph.actionType)')
v-toolbar(flat, :color='trailBgColor(ph.actionType)', height='40')
v-chip.ml-0.mr-3(
v-if='diffSource === ph.versionId'
small
color='pink'
label
)
.caption.white--text Source
v-chip.ml-0.mr-3(
v-if='diffTarget === ph.versionId'
small
color='pink'
label
)
.caption.white--text Target
.caption(:title='$options.filters.moment(ph.createdAt, `LLL`)')
{{
ph
.
createdAt
|
moment
(
'll'
)
}}
v-divider.mx-3(vertical)
.caption(v-if='ph.actionType === `edit`') Edited by #[strong
{{
ph
.
authorName
}}
]
.caption(v-else-if='ph.actionType === `move`') Moved from #[strong
{{
ph
.
valueBefore
}}
] to #[strong
{{
ph
.
valueAfter
}}
] by #[strong
{{
ph
.
authorName
}}
]
.caption(v-else-if='ph.actionType === `initial`') Created by #[strong
{{
ph
.
authorName
}}
]
.caption(v-else) Unknown Action by #[strong
{{
ph
.
authorName
}}
]
v-spacer
.caption.mr-3
{{
ph
.
createdAt
|
moment
(
'calendar'
)
}}
v-menu(offset-x, left)
template(v-slot:activator='{ on }')
v-btn.mr-
0
(icon, v-on='on', small, tile): v-icon mdi-dots-horizontal
v-btn.mr-
2.radius-4
(icon, v-on='on', small, tile): v-icon mdi-dots-horizontal
v-list(dense, nav).history-promptmenu
v-list-item(@click='setDiffTarget(ph.versionId)')
v-list-item-avatar(size='24'): v-icon mdi-call-received
v-list-item-title Set as Differencing Target
v-list-item-title Set as Differencing Target
(B)
v-list-item(@click='setDiffSource(ph.versionId)')
v-list-item-avatar(size='24'): v-icon mdi-call-made
v-list-item-title Set as Differencing Source
v-list-item-title Set as Differencing Source
(A)
v-list-item
v-list-item-avatar(size='24'): v-icon mdi-code-tags
v-list-item-title View Source
...
...
@@ -74,6 +60,22 @@
v-list-item
v-list-item-avatar(size='24'): v-icon mdi-source-branch
v-list-item-title Branch off from here
v-btn.mr-2.radius-4(
@click='setDiffSource(ph.versionId)'
icon
small
depressed
tile
:class='diffSource === ph.versionId ? `pink white--text` : `grey lighten-2`'
): strong A
v-btn.mr-0.radius-4(
@click='setDiffTarget(ph.versionId)'
icon
small
depressed
tile
:class='diffTarget === ph.versionId ? `pink white--text` : `grey lighten-2`'
): strong B
v-btn.ma-0.radius-7(
v-if='total > trail.length'
...
...
@@ -91,14 +93,20 @@
:class='darkMode ? `grey--text text--lighten-2` : `grey--text text--darken-2`'
) End of history trail
v-flex(xs8)
v-flex(xs
12, md
8)
v-card.radius-7
v-card-text
v-card.grey.radius-7(flat, :class='darkMode ? `darken-2` : `lighten-4`')
v-row(no-gutters, align='center')
v-col(cols='11')
v-card-text
.subheading Page Title
.caption Some page description
v-card.mt-3(light, v-html='diffHTML')
.subheading
{{
target
.
title
}}
.caption
{{
target
.
description
}}
v-col.text-right.py-3
v-btn.mr-3(color='primary', small, dark, outlined, @click='toggleViewMode')
v-icon(left) mdi-eye
.overline View Mode
v-card.mt-3(light, v-html='diffHTML', flat)
nav-footer
notify
...
...
@@ -106,7 +114,7 @@
</
template
>
<
script
>
import
{
Diff2Html
}
from
'diff2html'
import
*
as
Diff2Html
from
'diff2html'
import
{
createPatch
}
from
'diff'
import
{
get
}
from
'vuex-pathify'
import
_
from
'lodash'
...
...
@@ -134,26 +142,35 @@ export default {
},
data
()
{
return
{
sourceText
:
''
,
targetText
:
''
,
source
:
{
content
:
''
,
title
:
''
,
description
:
''
},
target
:
{
content
:
''
,
title
:
''
,
description
:
''
},
trail
:
[],
diffSource
:
0
,
diffTarget
:
0
,
offsetPage
:
0
,
total
:
0
total
:
0
,
viewMode
:
'line-by-line'
}
},
computed
:
{
darkMode
:
get
(
'site/dark'
),
diffs
()
{
return
createPatch
(
`/
${
this
.
path
}
`
,
this
.
source
Text
,
this
.
targetTex
t
)
return
createPatch
(
`/
${
this
.
path
}
`
,
this
.
source
.
content
,
this
.
target
.
conten
t
)
},
diffHTML
()
{
return
Diff2Html
.
getPrettyH
tml
(
this
.
diffs
,
{
return
Diff2Html
.
h
tml
(
this
.
diffs
,
{
inputFormat
:
'diff'
,
showFiles
:
false
,
drawFileList
:
false
,
matching
:
'lines'
,
outputFormat
:
'line-by-line'
outputFormat
:
this
.
viewMode
})
}
},
...
...
@@ -172,9 +189,12 @@ export default {
this
.
$store
.
commit
(
'page/SET_MODE'
,
'history'
)
this
.
target
Tex
t
=
this
.
liveContent
this
.
target
.
conten
t
=
this
.
liveContent
},
methods
:
{
toggleViewMode
()
{
this
.
viewMode
=
(
this
.
viewMode
===
'line-by-line'
)
?
'side-by-side'
:
'line-by-line'
},
goLive
()
{
window
.
location
.
assign
(
`/
${
this
.
path
}
`
)
},
...
...
@@ -221,7 +241,7 @@ export default {
trailIcon
(
actionType
)
{
switch
(
actionType
)
{
case
'edit'
:
return
'mdi-pencil'
return
'
'
// '
mdi-pencil'
case
'move'
:
return
'forward'
case
'initial'
:
...
...
@@ -237,7 +257,7 @@ export default {
case
'initial'
:
return
this
.
darkMode
?
'teal darken-3'
:
'teal lighten-5'
default
:
return
this
.
darkMode
?
'grey darken-3'
:
'grey lighten-
3
'
return
this
.
darkMode
?
'grey darken-3'
:
'grey lighten-
4
'
}
}
},
...
...
@@ -270,6 +290,15 @@ export default {
&
-promptmenu
{
border-top
:
5px
solid
mc
(
'blue'
,
'700'
);
}
.d2h-file-wrapper
{
border
:
1px
solid
#EEE
;
border-left
:
none
;
}
.d2h-file-header
{
display
:
none
;
}
}
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment