Merge pull request #3 from visualdiffer/feat/missing-docs

Feat/missing docs

Author: dafi

.idea/.gitignore

@@ -88,7 +88,6 @@ CHECKSUMS
   addressable (2.8.9)
   base64 (0.3.0)
   bigdecimal (4.0.1)
-  bundler (4.0.11) sha256=5bcec0fb78302e48d02ee46f10ee6e6942be647ba5b44a6d1ddfda9a240ce785
   colorator (1.1.0)
   concurrent-ruby (1.3.5)
   csv (3.3.5)

.idea/modules.xml

@@ -7,10 +7,28 @@
 
 ### Tailwind
 
-Generate the `CSS` every time styles on `input.css` change
+Regenerate the CSS whenever `input.css` changes.
 
     npx @tailwindcss/cli -i ./css/input.css -o css/theme.css
 
+### Images
+
+Reduce image size
+
+    find img/screenshots -type file -name '*.png' -exec pngquant -f --ext .png --quality=65-80 {} \;
+
+# Highlight rectangle
+
+See [contextMenuExclude.png](img/screenshots/folder/fileFilters/contextMenuExclude.png) or [traverseFileFilters.png](img/screenshots/folder/fileFilters/traverseFileFilters.png)
+
+To highlight a region in GIMP:
+
+1. Use the Ellipse/Rectangle Select Tool
+2. Select the area you want to keep
+3. Select → Feather — e.g., 30–50px for soft edges
+4. Invert the selection — `Select → Invert`
+5. Darken the surrounding area — `Colors → Brightness-Contrast`, set Brightness to -127
+
 # Local Test
 
 ### Generate documentation for the Apple Help system

.idea/vcs.xml

@@ -19,7 +19,7 @@ The complete list of supported metadata
                 <td>Compare all labels assigned to a file</td>
             </tr>
             <tr>
-                <td>Tags<br/><strong>Available in macOS 10.9 or above</strong></td>
+                <td>Tags</td>
                 <td>Compare all tags assigned to a file</td>
             </tr>
         </tbody>

.idea/visualdiffer.github.com.iml

@@ -24,4 +24,5 @@
         </script>
         {% endif %}
     {% endcase %}
+    <script src="js/copy-cmd.js"></script>
 

Gemfile.lock

@@ -142,15 +142,15 @@ This can be achieved using VisualDiffer 'user-defined alignment rules'.
 
 You can create, edit or delete rules from Session Preferences Dialog
 
-![image]({{ site.prefixDir }}img/ternaryop/vd/screenshots/wiki/sessionPrefAlignment.png)
+![image]({{ site.prefixDir }}img/screenshots/folder/align/main.png){:.wiki-img}
 
 More rules can be assigned to a VisualDiffer session comparison; they are evaluated from top to bottom.
 
 ## [Creating a Rule](#creating_a_rule)
 
 When you add a new rule (or edit an existing one) you access the dialog shown below
 
-![image]({{ site.prefixDir }}img/ternaryop/vd/screenshots/wiki/alignRule.png) 
+![image]({{ site.prefixDir }}img/screenshots/folder/align/rule.png){:.wiki-img}
 
 A rule has
 
@@ -199,7 +199,7 @@ Now if you save the rule and then run the comparison you obtain the result shown
 
 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
 
-![image]({{ site.prefixDir }}img/ternaryop/vd/screenshots/wiki/alignRuleIgnoreCase.png)
+![image]({{ site.prefixDir }}img/screenshots/folder/align/ruleIgnoreCase.png){:.wiki-img}
 
 ## [Test Rule](#test_rule)
 

README.md

@@ -0,0 +1,96 @@
+---
+permalink: colorsLegend.html
+layout: default
+
+# mainAnchor is used by Apple links
+mainAnchor: colorsLegend
+title: Colors Legend
+subtitle: Colors and icons used in folder and file comparison views
+---
+
+# [Folder Colors](#folder_colors)
+
+Folders are shown using different colors to quickly visualize the file comparison results.
+
+<div class="folder-legend-grid">
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-000.png" alt="Matched folder">
+    <strong>Matched</strong>
+    <span>All files identical on both sides</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-001.png" alt="Has older files">
+    <strong>Has older</strong>
+    <span>Contains files older than the other side</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-010.png" alt="Modified files">
+    <strong>Modified</strong>
+    <span>Contains modified files</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-011.png" alt="Modified and older files">
+    <strong>Modified + older</strong>
+    <span>Contains modified files and files older than the other side</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-100.png" alt="Orphan folder">
+    <strong>Orphan</strong>
+    <span>Files only on one side</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-101.png" alt="Orphan and older files">
+    <strong>Orphan + older</strong>
+    <span>Orphan files and files older than the other side</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-110.png" alt="Orphan and modified files">
+    <strong>Orphan + modified</strong>
+    <span>Orphan files and modified files</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-999.png" alt="Filtered or empty folder">
+    <strong>Filtered / Empty</strong>
+    <span>Matches active <a href="fileFilters.html#show_filtered_files">file filters</a> or is empty</span>
+  </div>
+</div>
+
+# [File Colors](#file_colors)
+
+Line colors in the File Differ View are based on differences found.
+
+<div class="folder-legend-grid">
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-same"></div>
+    <strong>Same</strong>
+    <span>Left and right content is identical</span>
+  </div>
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-different"></div>
+    <strong>Different</strong>
+    <span>Left content differs from right</span>
+  </div>
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-missing-left"></div>
+    <strong>Missing left</strong>
+    <span>Line present only on the right; missing on the left</span>
+  </div>
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-missing-right"></div>
+    <strong>Missing right</strong>
+    <span>Line present only on the left; missing on the right</span>
+  </div>
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-merged"></div>
+    <strong>Merged</strong>
+    <span>Content copied from the other side; file is marked as edited</span>
+  </div>
+</div>
+
+# [Difference Indicator](#difference_indicator)
+
+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.
+
+![image]({{ site.prefixDir }}img/screenshots/file/differenceIndicator.png){:.wiki-img}
+
+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.