Skip to content

Commit d999091

Browse files
committed
feat: add missing doc for features like "Folder Diff" or "File Diff"
1 parent f77b9d0 commit d999091

86 files changed

Lines changed: 1210 additions & 230 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.idea/.gitignore

Lines changed: 0 additions & 8 deletions
This file was deleted.

.idea/modules.xml

Lines changed: 0 additions & 8 deletions
This file was deleted.

.idea/vcs.xml

Lines changed: 0 additions & 6 deletions
This file was deleted.

.idea/visualdiffer.github.com.iml

Lines changed: 0 additions & 13 deletions
This file was deleted.

Gemfile.lock

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@ CHECKSUMS
8888
addressable (2.8.9)
8989
base64 (0.3.0)
9090
bigdecimal (4.0.1)
91-
bundler (4.0.11) sha256=5bcec0fb78302e48d02ee46f10ee6e6942be647ba5b44a6d1ddfda9a240ce785
9291
colorator (1.1.0)
9392
concurrent-ruby (1.3.5)
9493
csv (3.3.5)

_includes/finderMetadata.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ The complete list of supported metadata
1919
<td>Compare all labels assigned to a file</td>
2020
</tr>
2121
<tr>
22-
<td>Tags<br/><strong>Available in macOS 10.9 or above</strong></td>
22+
<td>Tags</td>
2323
<td>Compare all tags assigned to a file</td>
2424
</tr>
2525
</tbody>

alignRules.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -142,15 +142,15 @@ This can be achieved using VisualDiffer 'user-defined alignment rules'.
142142

143143
You can create, edit or delete rules from Session Preferences Dialog
144144

145-
![image]({{ site.prefixDir }}img/ternaryop/vd/screenshots/wiki/sessionPrefAlignment.png)
145+
![image]({{ site.prefixDir }}img/screenshots/folder/align/main.png){:.wiki-img}
146146

147147
More rules can be assigned to a VisualDiffer session comparison; they are evaluated from top to bottom.
148148

149149
## [Creating a Rule](#creating_a_rule)
150150

151151
When you add a new rule (or edit an existing one) you access the dialog shown below
152152

153-
![image]({{ site.prefixDir }}img/ternaryop/vd/screenshots/wiki/alignRule.png)
153+
![image]({{ site.prefixDir }}img/screenshots/folder/align/rule.png){:.wiki-img}
154154

155155
A rule has
156156

@@ -199,7 +199,7 @@ Now if you save the rule and then run the comparison you obtain the result shown
199199

200200
But `002.jpg` and `002.RAW` files are not aligned because the `002.RAW` extension is uppercase; this can be easily fixed by ignoring the case on the right expression as shown in the figure below
201201

202-
![image]({{ site.prefixDir }}img/ternaryop/vd/screenshots/wiki/alignRuleIgnoreCase.png)
202+
![image]({{ site.prefixDir }}img/screenshots/folder/align/ruleIgnoreCase.png){:.wiki-img}
203203

204204
## [Test Rule](#test_rule)
205205

colorsLegend.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
permalink: colorsLegend.html
3+
layout: default
4+
5+
# mainAnchor is used by Apple links
6+
mainAnchor: colorsLegend
7+
title: Colors Legend
8+
subtitle: Colors and icons used in folder and file comparison views
9+
---
10+
11+
# [Folder Colors](#folder_colors)
12+
13+
Folders are shown using different colors to quickly visualize the file comparison results.
14+
15+
<div class="table-wrapper">
16+
<table class="alt">
17+
<thead>
18+
<tr>
19+
<th>Folder</th>
20+
<th>Description</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<tr>
25+
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-000.png"></td>
26+
<td>Matched folder (all contained files are the same on the other side)</td>
27+
</tr>
28+
<tr>
29+
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-001.png"></td>
30+
<td>Folder contains only files older than the other side</td>
31+
</tr>
32+
<tr>
33+
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-010.png"></td>
34+
<td>Folder contains only modified files</td>
35+
</tr>
36+
<tr>
37+
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-011.png"></td>
38+
<td>Folder contains only modified files and files older than the other side</td>
39+
</tr>
40+
<tr>
41+
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-100.png"></td>
42+
<td>Folder contains only files not present on the other side (so-called orphan folder)</td>
43+
</tr>
44+
<tr>
45+
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-101.png"></td>
46+
<td>Folder contains files not present on the other side and files older than the other side</td>
47+
</tr>
48+
<tr>
49+
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-110.png"></td>
50+
<td>Folder contains modified files and files not present on the other side</td>
51+
</tr>
52+
<tr>
53+
<td><img class="folder-legend" src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-999.png"></td>
54+
<td>Folder matches <a href="fileFilters.html#show_filtered_files">file filters</a> or is empty and the 'Empty folders' setting is on</td>
55+
</tr>
56+
</tbody>
57+
</table>
58+
</div>
59+
60+
# [File Colors](#file_colors)
61+
62+
Line colors in the File Differ View are based on differences found.
63+
64+
<div class="table-wrapper">
65+
<table class="alt">
66+
<thead>
67+
<tr>
68+
<th>Color</th>
69+
<th>Description</th>
70+
</tr>
71+
</thead>
72+
<tbody>
73+
<tr>
74+
<td class="file-legend-same"></td>
75+
<td>Text content on left and right is the same</td>
76+
</tr>
77+
<tr>
78+
<td class="file-legend-different"></td>
79+
<td>Text content present on the left differs from text content present on the right</td>
80+
</tr>
81+
<tr>
82+
<td class="file-legend-missing-left"></td>
83+
<td>Text content is present only on the right; on the left the line is missing</td>
84+
</tr>
85+
<tr>
86+
<td class="file-legend-missing-right"></td>
87+
<td>Text content is present only on the left; on the right the line is missing</td>
88+
</tr>
89+
<tr>
90+
<td class="file-legend-merged"></td>
91+
<td>Text content has been copied from the other side; this marks the document as edited and it can be saved</td>
92+
</tr>
93+
</tbody>
94+
</table>
95+
</div>
96+
97+
# [Difference Indicator](#difference_indicator)
98+
99+
The narrow strip on the right side of the file diff view gives a bird's-eye view of all differences across the whole file.
100+
101+
![image]({{ site.prefixDir }}img/screenshots/file/differenceIndicator.png){:.wiki-img}
102+
103+
Each colored mark corresponds to a difference section; the colors match those in the diff table. The current scroll position is shown as a highlighted band. Click anywhere on the indicator to jump directly to that part of the file.

css/input.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,14 @@ img.folder-legend {
9494
max-height: 16px;
9595
}
9696

97+
img.wiki-img {
98+
max-width: 50%;
99+
border: 1px solid #94a3b8;
100+
border-radius: 4px;
101+
background-color: #fff;
102+
padding: 3px;
103+
}
104+
97105
table.file-legend tr td {
98106
padding: 6px 10px;
99107
}

css/theme.css

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1+
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
22
@layer properties;
33
@layer theme, base, components, utilities;
44
@layer theme {
@@ -222,6 +222,12 @@
222222
.sticky {
223223
position: sticky;
224224
}
225+
.start {
226+
inset-inline-start: var(--spacing);
227+
}
228+
.end {
229+
inset-inline-end: var(--spacing);
230+
}
225231
.top-0 {
226232
top: calc(var(--spacing) * 0);
227233
}
@@ -887,6 +893,9 @@
887893
.block {
888894
display: block;
889895
}
896+
.contents {
897+
display: contents;
898+
}
890899
.flex {
891900
display: flex;
892901
}
@@ -1200,6 +1209,10 @@
12001209
--tw-blur: blur(8px);
12011210
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
12021211
}
1212+
.invert {
1213+
--tw-invert: invert(100%);
1214+
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1215+
}
12031216
.filter {
12041217
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
12051218
}
@@ -1295,7 +1308,7 @@
12951308
}
12961309
.md\:left-1\/2 {
12971310
@media (width >= 48rem) {
1298-
left: calc(1/2 * 100%);
1311+
left: calc(1 / 2 * 100%);
12991312
}
13001313
}
13011314
.md\:flex {
@@ -1315,7 +1328,7 @@
13151328
}
13161329
.md\:-translate-x-1\/2 {
13171330
@media (width >= 48rem) {
1318-
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
1331+
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
13191332
translate: var(--tw-translate-x) var(--tw-translate-y);
13201333
}
13211334
}
@@ -1514,6 +1527,13 @@ img.folder-legend {
15141527
max-width: 16px;
15151528
max-height: 16px;
15161529
}
1530+
img.wiki-img {
1531+
max-width: 50%;
1532+
border: 1px solid #94a3b8;
1533+
border-radius: 4px;
1534+
background-color: #fff;
1535+
padding: 3px;
1536+
}
15171537
table.file-legend tr td {
15181538
padding: 6px 10px;
15191539
}

0 commit comments

Comments
 (0)