/
about.html
960 lines (717 loc) · 49.1 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
<html>
<head>
<title>About</title>
<link rel="stylesheet" type="text/css" href="color_styles.css" />
</head>
<style>
body{
font-family: Arial;
font-size: 12pt;
background-color: var(--body-background);
color: var(--body-text);
margin: 20px;
}
h4{
text-align:left;
}
h2, h3{
text-align:center;
}
code{
color: var(--code-text);
font-size: 11pt;
}
th{
border-collapse: collapse;
text-align:left;
font-size: 12pt;
padding: 6px;
}
table{
border-collapse: collapse;
text-align:left;
}
tr{
border-bottom: 2px solid #ccc;
font-size: 10pt;
}
td{
padding: 6px;
}
dd{
padding-top: 6px;
text-indent: -22px ;
}
img{
filter: invert( var(--image-invert) );
}
img[src="images/Cheat-sheet.png"],
img[src="images/Cheat-sheet-advanced.png"],
img[src="images/top-title-bar.png"] ,
img[src="images/bottom-status-bar.png"] ,
img[src="images/conflict-status-bar.png"] ,
img[src="images/top-title-bar.png"]
{
filter: invert( 0% );
}
</style>
<!-- https://www.w3schools.com/howto/howto_js_collapsible.asp -->
<style>
.collapsible {
background-color: #FFF;
//color: white;
cursor: pointer;
padding: 8px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
//background-color: #555;
}
.collapsible:after {
content: '\002B'; # Unicode character for "plus" sign (+)
//color: white;
font-weight: bold;
float: left;
margin-left: 5px;
}
.active:after {
content: "\2212"; # Unicode character for "plus" sign (-)
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.quickUnfold {
transition: max-height 0.0s ease-out;
}
</style>
<style>
.visibleText {
display: block;
}
.hiddenText {
display: none;
}
p, .indent, .visibleText, .visibleTextLink, .hiddenTextLink{
position: relative;
left: 20px;
}
.visibleTextLink{
text-decoration: underline;
background-color: grey;
}
.hiddenTextLink{
text-decoration: unset;
background-color: unset;
}
img{
vertical-align: middle;
}
</style>
<script>
function showClickedText( clickedId, linkClassName) {
let elements = document.getElementsByClassName(linkClassName); // Find from textLinks, then derive text id's from textLink id's
// Reset all views
for (var i = 0; i < elements.length; i++) {
// Set all links to hidden
elements[i].classList.remove('visibleTextLink');
elements[i].classList.add('hiddenTextLink');
// Set all texts to unused
let viewId = elements[i].id + '_div';
document.getElementById(viewId).classList.remove('visibleText');
document.getElementById(viewId).classList.add('hiddenText');
}
// Set this textlink to visible
document.getElementById(clickedId).classList.remove('hiddenTextLink');
document.getElementById(clickedId).classList.add('visibleTextLink');
// Set this text to visible
let thisViewId = clickedId + '_div';
document.getElementById(thisViewId).classList.remove('hiddenText');
document.getElementById(thisViewId).classList.add('visibleText');
}
</script>
<body class='light'>
<!-- Dark mode on/off , zoom-->
<script>
if (global.localState.dark){
document.body.classList.add('dark');
}
window.document.body.style.zoom = global.state.zoom;
</script>
<div id="content">
<div id="inner-content">
<!-------------------------------------------------------------------------------------------->
<p style="text-align:right;">Pragma-git <span id='version'></span>
</p>
<h2>About Pragma-git
<img id="about-icon" style='vertical-align:middle;float: right' height="17" width="17"
onclick="findInNw.showSearchBox();"
onmouseover="document.getElementById('about-icon').src='images/find_hover.png' "
onmouseout="document.getElementById('about-icon').src='images/find_black.png' "
src="images/find_black.png" >
</h2>
<hr>
<!-------------------------------------------------------------------------------------------->
<h3>Git started</h3>
<!-------------------------------------------------------------------------------------------->
<hr>
<!-------------------------------------------------------------------------------------------->
<h4>Intro</h4>
<p>Pragma-git aims to be a user-friendly revision control software.
It fits people working on their own projects, in groups, or those who find git overwhelming.
</p>
<p> The app uses "git" behind the scene, and is therefore fully compatible and
can be used interchangeably with other git softwares. It requires set-up of git (see <a href="#INSTALLATION">Installation</a>).
</p>
<p> Pragma-git is licensed with the
<a href="#" onclick="window.open('License.html','name','width=800,height=600')" style="cursor:pointer">MIT license</a>.
</p>
<hr>
<!-------------------------------------------------------------------------------------------->
<h4>Help</h4>
<p>Help is found from the <img style='vertical-align:middle;' src="images/questionmark_black.png" height="17" width="17"> icon.
This icon appears in most windows, giving help specific to that window.
</p>
<hr>
<!-------------------------------------------------------------------------------------------->
<h4>Start working</h4>
<ul>
<li>Drag and drop a project's folder onto the app's window. </li>
<li>If the folder is not already prepared (as a git repository), please allow the program to initialize the folder for git. </li>
</ul>
<p>Alternatively, if you want to work on a cloned project, cloning is performed from the settings menu.
</p>
<hr>
<!-------------------------------------------------------------------------------------------->
<h4>Beginner's workflow (steps 1 - 4 in next section)</h4>
<p>For git first-timers, the workflow would simply be:
<ul>
<li>Work on your files</li>
<li>When finished with some task: write a description in the text area, and press the <button>Store</button> button to store a snapshot of your files</li>
<li>Work on your files</li>
<li>When finished with some task: write a description in the text area, and press the <button>Store</button> button</li>
<li>...</li>
</ul>
</p>
<p>The beauty of a revision control software is, that you may check out an old version later
</p>
<hr>
<!-------------------------------------------------------------------------------------------->
<h4>Some git terminology</h4>
<p>For git first-timers, the following definitions may be useful to know:
<ol>
<li>You work on a <u>project</u> in a <u>folder</u>
</li><li>That folder can be made into a <u>repository</u> (which tracks different versions of the files) <br>
In pragma-git, just drop the folder on the program window to make it a repository.
</li><li>A <u>revision</u> (sometimes called a <u>commit</u>) is a snapshot in time, which you may go back to, or inspect.
</li><li>A revision is created by making a <u>commit</u> (<button>Store</button> button), adding a descriptive <u>message</u> (such as "Fixed bug xyz")
</li><li>Files that are commited are safe, and the project folder can always be recovered to the state of that point in time
<br><br>
</li><li>A <u>branch</u> is simply a way to organize your work, so that work is grouped together in a logical fashion (by state of the code, by subproject, etc).
</li><li>It is considered good practice to have at least two branches, where for instance working code is stored in the "main" branch,
and code being worked on is stored in another branch (for instance "develop")
</li><li><u>Switching</u> (changing) branch modifies the files in the project folder to the latest revision within that branch
</li><li>Changes in files from one branch (for instance "develop") can be <u>merged</u> into another branch, for instance the "main" branch
<br><br>
</li><li>A repository can also have a <u>remote</u> counterpart. This can be used as a cloud <u>backup</u> (for instance on github.com)
Other use cases includes to keep folders on multiple computers in sync, or as a means to collaborate between more than one developer
</li><li>If a remote repository has chaged, the changes may be <u>pulled</u> to the project folder of the local computer (and changes merged with the local files)
</li><li>If the same place in a file has been changed in different ways (local/remote, or when merging two local branches), this is called a <u>conflict</u>
</li><li>A conflict is <u>resolved</u> by the user telling the software which of the two versions to keep
<br><br>
</li><li><u>Pragma-git</u> helps with all above, and also supports a number of more git operations
</li>
</li>
</ol>
</p>
<h4>Extensive git dictionary</h4>
<p>
Click below, to view a more extensive dictionary of terms used in git, and also how they can be understood in Pragma-git
</p>
<button class="collapsible indent" style="background-color: var(--body-background); color: var(--header-color);" id="repoSettings"> (click to view / hide) </button>
<div class="content indent">
<p>Here follows a number of concepts that can be described in many ways, both as "git" words, and more generally as concepts for revision control : </p>
<table>
<tr> <th>Word</th> <th>Meaning</th></hr>
<tbody>
<tr>
<td>Git </td>
<td>The <i>de facto </i> standard for software revision control </td>
</tr>
<tr>
<td>Snapshot </td>
<td>A version of all your project files, freezed to exactly this state forever</td>
</tr>
<tr>
<td>Project folder </td>
<td>A location for storing the files. See "Repository" below</td>
</tr>
<tr>
<td>Repository </td>
<td>A location for storing the files. See "Project folder" above</td>
</tr>
<tr>
<td>Local repository</td>
<td>A folder on your computer which has been assigned for version control. In Pragma-git, you drop the folder onto the main window.</td>
</tr>
<tr>
<td>Remote repository</td>
<td>A location normally on another computer. Git can send data to (push) and retrieve data from (pull) the remote repository</td>
</tr>
<tr>
<td>Initialize</td>
<td>A project folder has to be initialized to become a git repository.
This places a hidden folder ".git" in your project folder, which keeps track of all revisions. Do not delete this folder!!</td>
</tr>
<tr>
<td>Clone</td>
<td>This means making a copy of a remote repository on your local computer. You can then work with this, as your own.
One good use case, is if you work on more than one computer.
Then, you can clone from a remote repository to your second computer, to get a copy of your complete remote repository.
Cloning is only done once, after that you work with Commit, Push, Pull operations, or in Pragma-git, with the "Store"-button and Pull.
</td>
</tr>
<tr>
<td>Commit</td>
<td>The "git" word for storing a snaphshot of your work, with a descriptive name.</td>
</tr>
<tr>
<td>Add, Commit</td>
<td>In git, storing a snapshot is a two step procedure: 1) select files and 2) commit the files, see above.
The <button>Commit</button> button in Pragma-git does this.
This mode, not auto-pushing, is configured in the settings menu of Pragma-git.
</td>
</tr>
<tr>
<td>Add, Commit, Push </td>
<td>The "git" way to store a snapshot in your local repository, <i>and</i> to send a copy to a remote repository.
The <button>Store</button> button in Pragma-git does this.
See "Store" below
</td>
</tr>
<tr>
<td>Store</td>
<td>The "Pragma-git" way to (with one click) store a snapshot of the files at this time-point in a repository, <i>and</i>
to send a copy to the remote repository.
This mode, auto-pushing, is default in Pragma-git, and is configured in the settings menu of Pragma-git.
</td>
</tr>
<tr>
<td>Branch</td>
<td>You may work on several versions of your project simultaneously, keeping track of them in different branches. For instance,
performing something that is experimental, or implementing something which is a side-track from your project can be done in a separate branch.
You can create a new branch from where you are, or from a historical snapshot (see section "Log, History", below).
You cannot create a new branch if you have changed files that are not stored.
If this side-track is successful you may wish to incorporate that into the main project -- see "merge", below.</td>
</tr>
<tr>
<td>Merge</td>
<td>Incorporating changes from one branch into another branch. Git does this very cleverly, so that changes that do not overlap will be combined from both branches.
If you are unlucky, the same line of text has been changed differently in both branches. Then, git needs your help to resolve which version you wish to keep
-- called to resolve a merge conflict</td>
</tr>
<tr>
<td>Conflict</td>
<td>See above. A conflict can occur when merging two snapshots from for instance two branches, but also between a remote and a local repository.
There are two different types of conflicts: 1) a file was deleted in one of the two places, and 2) a file was changed in the same place on both places.
For both this cases, git needs your help to decide on what you wish to do. This process is called "resolving a conflict", and in Pragma-git there is a tool
that aids you in doing this</td>
</tr>
<tr>
<td>Pull</td>
<td>Retrieving the latest snapshot from the remote repository, and merging that with your local project folder.
If you work on multiple computers, or are many people in the team, some work may have been performed and stored on the remote repository.
"Pull" is a way to update your local project folder to the latest state. It is good practice to do this before you start working on your local project.</td>
</tr>
<tr>
<td>Push</td>
<td>Send a copy of your snapshots to the remote repository.
In Pragma-git, the default is to do a "push" when pressing the <button>Store</button> button.
This may be turned off in the settings, and then you need to do a manual push when ready to copy to the remote repository.
In Pragma-git, you send the data to a remote branch with the same name as your local branch.</td>
</tr>
<tr>
<td>Stash</td>
<td>Like a clipboard copy, where you can "cut" (and remember) the file changes since the last stored snapshot.
A stash takes you back to a clean last-snapshot, and keeps the changes in memory. Sometimes this can be useful.
One such occasion is if you forgot to "pull" from the remote repository,
before starting to work in your local folder. Doing a "stash", then "pull", and then "stash-pop" would be a workflow to solve such problem.
In Pragma-git "stash" works as the computer clipboard's copy command, and can hold only one stash. </td>
</tr>
<tr>
<td>Stash-pop</td>
<td>Like a clipboard "paste", where you retrieve the stashed (see above) changed files.
In Pragma-git "stash" works as the computer clipboard's cut and paste command, and can hold only one stash at a time </td>
</tr>
<tr>
<td>Log, History</td>
<td>The log (History) shows all stored snapshots. In Pragma-git, you walk down in history with the arrow buttons.
You can set your project folder to any snapshot from the history, by doing a "checkout" </td>
</tr>
<tr>
<td>Checkout</td>
<td>This command sets your project folder to the state it was in at the point in time of the snapshot.
You may play with the project in that state, but should be careful not to make any changes. </td>
</tr>
<tr>
<td>Detached HEAD</td>
<td>A checkout of a snapshot is in a state called "detached HEAD". That means that it does not belong to any branch, and if you make changes,
they will be dangling without being easy to retrieve. Pragma-git advice you if this happens. The best way is to create a new branch from the checkout
and work from there, and end your work by merging it to another branch.</td>
</tr>
<tr>
<td>Tag</td>
<td>An alias for a commit. This is often used for version numbering of softwares, but can be used for anything. You may view it as a sort of permanent bookmark</td>
</tr>
</tbody>
</table>
</div>
<hr>
<!-------------------------------------------------------------------------------------------->
<h3>The basic use</h3>
<!-------------------------------------------------------------------------------------------->
<hr>
<p>
<img class="image_background" style='vertical-align:middle;' src="images/Cheat-sheet.png" width="80%">
</p>
<!-------------------------------------------------------------------------------------------->
<h4>Title (top) and status bar (bottom)</h4>
<p class="indent"> <img style='vertical-align:middle;' src="images/top-title-bar.png" height="24"> (the top title bar)<br>
displays the name of your current repository (in this example "MyFolder"), and the name of the current branch (in this case "master"). In case you have more than one repository or branch,
the arrow next to the name can be clicked to select another repository or branch. Clicking on name will change into the next repository and branch.
</p>
<p class="indent"> <img style='vertical-align:middle;' src="images/bottom-status-bar.png" height="24"> (the bottom status bar) <br>
shows the number of modified files. In normal mode, it is the difference since the last Store operation. In history mode, it is the change from the previous revision in history.
Clicking on this area opens a list of modified files in a new window.
In this new window, you can see if a file was added, modified or deleted. In the normal mode (before the "Store"-button is pressed) you can delete or restore a modified file.
You may also investigate how the files were changed clicking the "diff" link, which works both in normal mode, and when viewing historical revisions.
</p>
<p class="indent"> <img style='vertical-align:middle;' src="images/conflict-status-bar.png" height="24"> (the bottom status bar) <br>
can show up instead of above status of changed files.
This may happen under special circumstances after a "merge", "pull" or "stash retrieve" action.
What it means is that Pragma-git needs your help to clarify what is your intention with files that have been changed in different ways in two different revisions.
Click on this text to open a "conflict resolution window", that guides you through this process.
</p>
<h4>The Store button, and message area</h4>
<p class="indent">
<button>Store</button> Begin with writing a short description in the message area; then press the Store-button to save the current state of your work as a revision.
<a href="#STORE">Learn more.</a>
<p/>
<hr>
<!-------------------------------------------------------------------------------------------->
<h3 id="ADVANCED_USE">Advanced use</h3>
<!-------------------------------------------------------------------------------------------->
<hr>
<p>
<img class="image_background" style='vertical-align:middle;' src="images/Cheat-sheet-advanced.png" width="80%">
</p>
<h4>Title bar / top icons (click icon for explanation):</h4>
<br>
<span id="notes" class="textLink visibleTextLink" onclick="showClickedText(this.id, 'textLink')"> <img src="images/notes_black.png" height="17" width="17"> notes, </span>
<span id="branch" class="textLink hiddenTextLink" onclick="showClickedText(this.id, 'textLink')"> <img src="images/branch_black.png" height="17" width="17"> branch, </span>
<span id="merge" class="textLink hiddenTextLink" onclick="showClickedText(this.id, 'textLink')"> <img src="images/merge_black.png" height="17" width="17"> merge, </span>
<span id="pull" class="textLink hiddenTextLink" onclick="showClickedText(this.id, 'textLink')"> <img src="images/pull_black.png" height="17" width="17"> pull, </span>
<span id="push" class="textLink hiddenTextLink" onclick="showClickedText(this.id, 'textLink')"> <img src="images/push_black.png" height="17" width="17"> push, </span>
<span id="tag" class="textLink hiddenTextLink" onclick="showClickedText(this.id, 'textLink')"> <img src="images/tag_black.png" height="17" width="17"> tag </span>
<br>
<br>
<i style="left:20px">
<div id="notes_div" class="visibleText" >
Keep personal project notes here. Notes can be written either in rich text or markdown. Notes are stored in .Pragma-git/Notes folder
</div>
<div id="branch_div" class="hiddenText" >
Create a new branch from your position
</div>
<div id="merge_div" class="hiddenText" >
Merge branch selected from dropdown menu, into current branch
</div>
<div id="pull_div" class="hiddenText">
Manual updates are available to be pulled from remote repository. Click to pull (download) from remote repository
</div>
<div id="push_div" class="hiddenText">
Manual push to remote repository. This is only visible if auto-push is disabled in settings.
</div>
<div id="tag_div" class="hiddenText">
Create a "tag" from this commit. A tag is a named alias that refers to the current revision
</div>
</i>
<br>
<h4>Status bar / lower icons (click icon for explanation):</h4>
<br>
<span id="folder" class="textLink2 visibleTextLink" onclick="showClickedText(this.id, 'textLink2')"> <img src="images/folder_black.png" height="17" width="17"> folder, </span>
<span id="terminal" class="textLink2 hiddenTextLink" onclick="showClickedText(this.id, 'textLink2')"> <img src="images/terminal_black.png" height="17" width="17"> terminal, </span>
<span id="graph" class="textLink2 hiddenTextLink" onclick="showClickedText(this.id, 'textLink2')"> <img src="images/more_black.png" height="17" width="17"> graph, </span>
<span id="pinned" class="textLink2 hiddenTextLink" onclick="showClickedText(this.id, 'textLink2')"> <img src="images/pinned_enabled_black.png" height="17" width="17"> marked, </span>
<span id="revert" class="textLink2 hiddenTextLink" onclick="showClickedText(this.id, 'textLink2')"> <img src="images/revert_black.png" height="17" width="17"> revert,</span>
<span id="cherry" class="textLink2 hiddenTextLink" onclick="showClickedText(this.id, 'textLink2')"> <img src="images/cherry-pick_black.png" height="17" width="17"> cherry-pick, </span>
<span id="stash" class="textLink2 hiddenTextLink" onclick="showClickedText(this.id, 'textLink2')"> <img src="images/stash_black.png" height="17" width="17"> stash, </span>
<span id="stash_pop" class="textLink2 hiddenTextLink" onclick="showClickedText(this.id, 'textLink2')"> <img src="images/stash_pop_black.png" height="17" width="17"> stash-pop, </span>
<span id="settings" class="textLink2 hiddenTextLink" onclick="showClickedText(this.id, 'textLink2')"> <img src="images/settings_black.png" height="17" width="17"> settings </span>
<br>
<br>
<i>
<div id="folder_div" class="visibleText" >
Show project folder
</div>
<div id="terminal_div" class="hiddenText" >
Open terminal in project folder
</div>
<div id="graph_div" class="hiddenText" >
Shows a graphical view of the commit history
</div>
<div id="pinned_div" class="hiddenText" >
<img src="images/pinned_disabled_black.png" height="17" width="17">
Not marked, means that history is compared with previous commit.
<img src="images/pinned_enabled_black.png" height="17" width="17">
Marked checkbox, means that other commits are compared to the marked commit
</div>
<div id="revert_div" class="hiddenText" >
"Revert" (undo changes) introduced in this commit. Commit these changes or keep editing
</div>
<div id="cherry_div" class="hiddenText" >
"Cherry-pick" (copy changes) introduced in this commit to branch selected from dropdown menu. Commit these changes or keep editing
</div>
<div id="stash_div" class="hiddenText">
Stash" (hide away) your working files. See this as a temporary Store, which leaves no trace in the revision history
</div>
<div id="stash_pop_div" class="hiddenText">
"Stash pop" (retrieve) your stashed files into our working folder
</div>
<div id="settings_div" class="hiddenText">
Settings dialog. Here you can manage repositories, branches, software settings etc
</div>
</i>
<br>
<h4>History browsing / left icons (click icon for explanation):</h4>
<br>
<span id="downHistory" class="textLink3 visibleTextLink" onclick="showClickedText(this.id, 'textLink3')"> <img src="images/down-arrow_black.png" height="17" width="17"> older, </span>
<span id="upHistory" class="textLink3 hiddenTextLink" onclick="showClickedText(this.id, 'textLink3')"> <img src="images/up-arrow_black.png" height="17" width="17"> newer, </span>
<span id="seachHistory" class="textLink3 hiddenTextLink" onclick="showClickedText(this.id, 'textLink3')"> <img src="images/find_black.png" height="17" width="17"> find </span>
<br>
<br>
<i>
<div id="downHistory_div" class="visibleText" >
Show older historical commit
</div>
<div id="upHistory_div" class="hiddenText" >
Show newer historical commit
</div>
<div id="seachHistory_div" class="hiddenText" >
Enables a search dialog for historical commits
</div>
</i>
<br>
<h4>The Checkout button</h4>
<div>
<p class="indent">
<button>Checkout</button> Check out an older revison (shown when browsing history with the
<img src="images/down-arrow_black.png" height="17" width="17">, <img src="images/up-arrow_black.png" height="17" width="17"> buttons; see <a href="#ADVANCED_USE">advanced use</a>)
</p>
</div>
<hr>
<!-------------------------------------------------------------------------------------------->
<h3>Learn more</h3>
<!-------------------------------------------------------------------------------------------->
<hr>
<!-------------------------------------------------------------------------------------------->
<h4 id="STORE">Store version with short description </h4>
<p>
When you feel you have reached an important point in your work (or are just afraid you will get lost if you continue)
you may store a named revision of the project. The nice thing about the revision control system is,
that you can later retrieve your whole project as it was at this point in time. There is no harm to store revisions often.
</p>
<p>
To store a revision of the changed files, you click in the text field, and type a descriptive text. The <button>Store</button> button
becomes active when you start typing. Press this button to store your revision.
</p>
<hr>
<!-------------------------------------------------------------------------------------------->
<h4>Store version with longer description </h4>
<p> The description may be more than one line. If you use multiple lines,
the first line is a brief description (like a title). The next line is an empty line.
The following lines contain a more specific description. Example :<br>
</p>
<p><code style = "margin-left: 15px">My message title </code><br>
<code style = "margin-left: 15px"> </code><br>
<code style = "margin-left: 15px">my long description that goes on and on .... </code>
</p>
<hr>
<!-------------------------------------------------------------------------------------------->
<h4 id="NOTES">Project Notes</h4>
<p> You may write personal notes for each repository.
The notes are accessed by clicking the <img src="images/notes_black.png" height="17" width="17"> icon, in the top titlebar.
</p>
<p>The notes are written using the built-in editor, which support both visual editing and editing with "markdown" rich text format.
At the bottom of the editor, you can chose to change between editing in WYSIWYG (what-you-see-is-what-you-get), or Markdown.
</p>
<p>The notes-file is stored in your home folder's <code>.Pragma-git/Notes</code> directory.
Files are auto-saved every 30 seconds, and when you close the window.
</p>
<hr>
<!-------------------------------------------------------------------------------------------->
<h3 id="Advanced">Advanced </h3>
<hr>
<!-------------------------------------------------------------------------------------------->
<h4>Multiple repositories and branches </h4>
<p><u>Repositories</u> : You can have multiple active project folders (repositories), added by drag-and drop as described above.
You switch by clicking the name (the first text in the title bar), to change to next project in the list.
</p>
<p>Repositories can be created by cloning from an existing remote repository (see Instructions section, at the
settings page).
</p>
<p>Repositories can also be removed from the list in the program, also that from the settings window.
</p>
<p><u>Branches</u> : You can have multiple branches of your work, that you can switch between.
You switch by clicking the name (the second text in the title bar between parentheses), to change to next project in the list.
</p>
<p>Branches can be created from the Settings dialog icon <img style='vertical-align:middle;' src="images/settings_black.png" height="17" width="17">,
where a new branch can be created from the top of your current branch, or from a checked-out historical commit.
</p>
<p>
Branching can also be performed with the <img src="images/branch_black.png" height="17" width="17"> button (which is available if all working files are stored).
With this button, a branch may be created starting from the commit displayed in the main window (the latest Store, or a historical commit)
<!-- TODO: branches may also be hidden, which makes sense if you have many branches you don't use. -->
</p>
<hr>
<!-------------------------------------------------------------------------------------------->
<h4>History, and checkout </h4>
<p><u>Browsing history</u> : As described above, the arrow buttons
(<img style='vertical-align:middle;' src="images/down-arrow_black.png" height="17" width="17"><img style='vertical-align:middle;' src="images/up-arrow_black.png" height="17" width="17">)
let you browse back in time.
Also, a graphical representation can be viewed by clicking the icon <img style='vertical-align:middle;' src="images/more_black.png" height="17" width="17">
</p>
<p>When you view an old commit, the <button>Store</button> button
is changed into a <button>Checkout</button> button
Pressing "Checkout" sets the files in the project to the same state as it was once, when Stored. This is useful if you wish to test your work as it was at this time point.
If you don't modify any of the files, you are fine to change branch, and you will be back to where your project was before.
</p>
<p><u>Peculiarity with git</u> : If you change any of the files in a historical checkout, your files will be in a strange state called "detached HEAD"
</p>
<p><u>Detached HEAD branch</u> : The branch-name in the title bar is changed to "HEAD", which in git language is referred to as a "detached HEAD".
That means, that once you move to another branch, the detached branch can't be easily found again.
</p>
<p><u>Modified files in HEAD branch</u> :
If you have modified any files after this checkout and want to keep your changes, you need to move those changes to another branch.
</p>
<p><u>Not Stored files</u> : The easiest way to move modified (which are not Stored) files from a detached HEAD is :
<ol>
<li>Press the stash button <img 'vertical-align:middle;' src="images/stash_black.png" height="17" width="17"> </li><br>
<li>Click on the branch name (HEAD), until you are at the branch where you wish to add your changes to</li><br>
<li>Press the retrieve stash button <img 'vertical-align:middle;' src="images/stash_pop_black.png" height="17" width="17"></li>
</ol>
</p>
<p><u>Stored files</u> : If you have modified and Stored files originating from a checked-out historical commit (what git calls "from a detached HEAD") :
<ol type='i'>
<li>Click on the branch name (HEAD) </li><br>
<li>A dialog pops up, and asks if you wish to <br>
1) Create a temporary branch, to save the files, or <br>
2) Delete your changes
</li><br>
<li>If you select to 1) create a temporary branch, you will be asked to give a name for the new branch. </li><br>
<li>Change branch to where you wish the new work to be added, and
then click the merge button <img src="images/merge_black.png" height="17" width="17"> </li>
</ol>
</p>
<br>
<hr>
<!-------------------------------------------------------------------------------------------->
<iframe id="Iframe" src='about_search.html' style="border-width: 0px">
</iframe>
<script>
var frame = document.getElementById("Iframe");
// Adjusting the iframe onload
frame.onload = function()
{
// set the height of the iframe as its content (with a few pixels margin to stop iframe scrolling to occur)
frame.style.height = frame.contentWindow.document.body.scrollHeight + 6 + 'px';
}
</script>
<hr>
<!-------------------------------------------------------------------------------------------->
<h4 id="SEARCH2">History - comparing with fixed commit </h4>
<p>When in history mode, either by clicking down arrow, or search, the difference in the status bar is shown relative previous commit.
</p>
<p>Enabling the checkbox
<img src="images/pinned_disabled_black.png" height="17" width="17"> <img src="images/pinned_enabled_black.png" height="17" width="17">
sets the current commit as the reference, and when moving in history the differences are relative this commit.
</p>
<p>The difference is always shown as a comparison between the newest to the oldest commit,
regardless if the current commit is newer or older than the fixed commit. This eliminates the
problem that the same file can be marked as new or deleted in a comparison between two commits, depending on which of the two commits was fixed.
</p>
<br>
<br>
<hr>
<!-------------------------------------------------------------------------------------------->
<h2 id="INSTALLATION">Installation </h2>
<hr>
<!-------------------------------------------------------------------------------------------->
<p><u>Git</u> : The code relies on a standard installation of git
(<a href='https://git-scm.com/downloads' onclick="require('nw.gui').Shell.openExternal( this.href );return false;">download link</a>).
</p>
<p><u>Setup</u> :
Your name and email should also be added, which you do from the "Software section" on the
settings page <img src="images/settings_black.png" height="17" width="17">.
</p>
<p><u>Diff and Merge tool</u> :
Pragma-git contains its own diff and merge tool.
If you have your favorite Diff and Merge tool it may be used instead.
The tool is added to Pragma-git in the settings window.</p>
<hr>
<!-------------------------------------------------------------------------------------------->
<h2>Credits</h2>
<hr>
<dl>
<dt>This program could not have been written without the following libraries </dt>
<dd>- <a href='https://nwjs.io' onclick="require('nw.gui').Shell.openExternal( this.href );return false;">NW.js</a></dd>
<dd>- <a href='https://github.com/steveukx/git-js' onclick="require('nw.gui').Shell.openExternal( this.href );return false;">Simple-git</a></dd>
<dd>- <a href='https://codemirror.net' onclick="require('nw.gui').Shell.openExternal( this.href );return false;">CodeMirror editor</a></dd>
<dd>- <a href='https://ui.toast.com/tui-editor/' onclick="require('nw.gui').Shell.openExternal( this.href );return false;">Toast-ui editor</a></dd>
<dt></dt>
</dl>
<hr>
<!-------------------------------------------------------------------------------------------->
<!-- Collapsible headers (https://www.w3schools.com/howto/howto_js_collapsible.asp) -->
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener(
"click",
function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
<script>
var VERSION = require('./package.json').version;
document.getElementById('version').innerText = VERSION;
</script>
<!-- Add find -->
<script src="node_modules/findinnw/dist/find-in-nw.js"></script>
<script src="extend_find-in-nw.js"></script>
<script>
findInNw.initialize();
extendFindInNw(); // Make find-in-nw fit my purpose for graph and note
</script>
<!-- Event listeners-->
<script>
window.addEventListener('unload', (event) => {
opener.deleteWindowMenu('About');
}
);
</script>
</body>
</html>