Skip to content

Commit 7620bb7

Browse files
isc-sveluryisc-svelury
authored
Update help modal (#133)
* Screenshots for help modal * Updated help modal text and more screenshots * Remove unnecessary images minor alt text update Co-authored-by: Sarmishta Velury <[email protected]>
1 parent b5ef9f4 commit 7620bb7

21 files changed

+146
-21
lines changed

‎git-webui/release/share/git-webui/webui/css/git-webui.css

+3
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
animation-timing-function: linear;
3232
animation-play-state: running;
3333
}
34+
#help-modal .img-fluid {
35+
max-width: 90%;
36+
}
3437
html,
3538
body {
3639
height: 100%;

‎git-webui/release/share/git-webui/webui/img/doc/branch-operations.png

267 KB
Loading

‎git-webui/release/share/git-webui/webui/img/doc/commit-explorer.png

123 KB
Loading

‎git-webui/release/share/git-webui/webui/img/doc/commit-history-tree-view.png

119 KB
Loading

‎git-webui/release/share/git-webui/webui/img/doc/commit-history.png

197 KB
Loading

‎git-webui/release/share/git-webui/webui/img/doc/log-commit.png

-148 KB
Binary file not shown.

‎git-webui/release/share/git-webui/webui/img/doc/log-tree.png

-98.7 KB
Binary file not shown.

‎git-webui/release/share/git-webui/webui/img/doc/stash.png

109 KB
Loading

‎git-webui/release/share/git-webui/webui/img/doc/workspace.png

0 Bytes
Loading

‎git-webui/release/share/git-webui/webui/index.html

+68-10
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,49 @@ <h4 class="modal-title">Error</h4>
5252
<div class="modal-content">
5353
<div class="modal-body">
5454
<h4>History Viewing</h4>
55-
<p>The toolbar on the left shows your branches and tags. The log of the currently selected one is displayed.</p>
56-
<p>When selecting a revision the diff of this specific commit is displayed in the right panel.</p><br>
57-
<img alt="Image of log commit" src="img/doc/log-commit.png"><br>
58-
<p>On top of the right panel, you can choose 'Tree' to display the versioned content at the specific
59-
revision selected in the left panel. You can browse through directories and display file contents.</p><br>
60-
<img alt="Image of log tree" src="img/doc/log-tree.png">
61-
62-
<h4>Commit</h4>
63-
<p>Commits can only be made from localhost.</p>
64-
<img alt="Image of the workspace" src="img/doc/workspace.png"><br>
55+
<hr>
56+
<h5>Overview</h5><br/>
57+
<img class="img-fluid" alt="Image of the Commit History View" src="img/doc/commit-history.png"><br>
58+
<p> The commit history view of the WebUI is comprised of three parts.
59+
<ol>
60+
<li>
61+
The sidebar contains navigation links to the Workspace, Stash and Settings. It also shows all the refs and tags in the repository.
62+
</li>
63+
<li>
64+
The left panel displays the commit history of the current branch by default. Click on a different branch on the sidebar to view its commit history.
65+
</li>
66+
<li>
67+
The right panel of the screen displays the diff of the latest commit of the selected or current branch.
68+
Select a different commit from the left panel to view its details.
69+
</li>
70+
</ol>
71+
</p>
72+
<h5>Tree View and Commit View</h5><br/>
73+
<!-- <img class="img-fluid" alt="Image of the Explore button in the Commit View of the Commit History" src="img/doc/commit-history-explore.png"><br> -->
74+
<img class="img-fluid" alt="Image of the Commit Explorer View of the Commit History" src="img/doc/commit-explorer.png"><br>
75+
<p> To see the commit in more detail, you can click the Explore button in the top-right corner to go to the Commit Explorer View.
76+
</p>
77+
<br/>
78+
<img class="img-fluid" alt="Image of the Tree View of the Commit History" src="img/doc/commit-history-tree-view.png"><br>
79+
<p>
80+
On top of the right panel in the Commit History View, you can choose 'Tree' to display the contents of the repository folder at the specific
81+
revision selected in the left panel. You can browse through directories and display file contents.
82+
</p>
83+
<h4>Workspace</h4>
84+
<img class="img-fluid" alt="Image of the workspace" src="img/doc/workspace.png"><br>
6585
<ul>
6686
<li><strong>Working copy</strong> lists the modified files (compared to the staging area) in your working directory</li>
87+
<ul>
88+
<li>
89+
<strong>Stage</strong>: Stages the selected changes for a commit.
90+
</li>
91+
<li>
92+
<strong>Stash</strong>: Stashes the selected changes.
93+
</li>
94+
<li>
95+
<strong>Cancel</strong>: Discards the selected changes.
96+
</li>
97+
</ul>
6798
<li><strong>Message</strong> lets you enter a commit message</li>
6899
<li><strong>Staging area</strong> lists the modified files (compared to HEAD) in your staging area. These are the changes that will be committed</li>
69100
</ul>
@@ -75,6 +106,33 @@ <h4>Commit</h4>
75106
<li>If the displayed diff is from the working copy, you may stage or cancel the selected lines.</li>
76107
<li>If the displayed diff is from the staging area, you may unstage the selected lines.</li>
77108
</ul>
109+
<h4>Stash</h4>
110+
<img class="img-fluid" alt="Image of the Stash" src="img/doc/stash.png"><br>
111+
This tab shows all stashed changes and lets the user explore the changes in the Diff View in the right panel.
112+
<ul>
113+
<li><strong>Apply</strong> applies the selected stashed changes to the current branch. Changes will not be removed from the stash after applying them.</li>
114+
<li><strong>Pop</strong> applies the selected changes and removes the commit from the stash.</li>
115+
<li><strong>Drop</strong> removes the selected stashed changes without applying them.</li>
116+
</ul>
117+
<h4>Branch Operations</h4>
118+
<img class="img-fluid" alt="Image of Branch Operations" src="img/doc/branch-operations.png"><br>
119+
<ul>
120+
<li>
121+
<strong>New Local Branch</strong>: Click the plus icon and enter the name of your branch in the text-box to create a new local branch from the current branch.
122+
</li>
123+
<li>
124+
<strong>Checkout Branch</strong>: Switch to an exisiting local or remote branch. Note that this will carry over any uncommitted changes to the new branch.
125+
</li>
126+
<li>
127+
<strong>Merge Branch</strong>: Incorporate changes from the selected local or remote branch into the current branch from the time their histories diverged.
128+
</li>
129+
<li>
130+
<strong>Delete Local Branch</strong>: Delete a local branch with the option to force delete it even if it is not fully merged.
131+
</li>
132+
<li>
133+
<strong>Prune Remote Branches</strong>: Click the refresh icon to prune stale refs to deleted remote branches.
134+
</li>
135+
</ul>
78136
<h4>License</h4>
79137
This software is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0.html" target="_blank">Apache 2.0</a> license
80138
</div>

‎git-webui/release/share/git-webui/webui/js/git-webui.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -640,7 +640,7 @@ webui.SideBarView = function(mainView, noEventHandlers) {
640640
window.location.replace(url.url);
641641
});
642642
}
643-
643+
644644
self.fetchSection = function(section, title, id, gitCommand) {
645645
webui.git(gitCommand, function(data) {
646646
var refs = webui.splitLines(data);

‎git-webui/src/share/git-webui/webui/css/git-webui.less

+6
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,12 @@
7373

7474
}
7575

76+
#help-modal{
77+
.img-fluid {
78+
max-width: 90%;
79+
}
80+
}
81+
7682
.display-flex() {
7783
display: flex;
7884
display: -webkit-flex;

‎git-webui/src/share/git-webui/webui/img/doc/branch-operations.png

267 KB
Loading

‎git-webui/src/share/git-webui/webui/img/doc/commit-explorer.png

123 KB
Loading

‎git-webui/src/share/git-webui/webui/img/doc/commit-history-tree-view.png

119 KB
Loading

‎git-webui/src/share/git-webui/webui/img/doc/commit-history.png

197 KB
Loading

‎git-webui/src/share/git-webui/webui/img/doc/log-commit.png

-148 KB
Binary file not shown.

‎git-webui/src/share/git-webui/webui/img/doc/log-tree.png

-98.7 KB
Binary file not shown.

‎git-webui/src/share/git-webui/webui/img/doc/stash.png

109 KB
Loading

‎git-webui/src/share/git-webui/webui/img/doc/workspace.png

0 Bytes
Loading

‎git-webui/src/share/git-webui/webui/index.html

+68-10
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,49 @@ <h4 class="modal-title">Error</h4>
5252
<div class="modal-content">
5353
<div class="modal-body">
5454
<h4>History Viewing</h4>
55-
<p>The toolbar on the left shows your branches and tags. The log of the currently selected one is displayed.</p>
56-
<p>When selecting a revision the diff of this specific commit is displayed in the right panel.</p><br>
57-
<img alt="Image of log commit" src="img/doc/log-commit.png"><br>
58-
<p>On top of the right panel, you can choose 'Tree' to display the versioned content at the specific
59-
revision selected in the left panel. You can browse through directories and display file contents.</p><br>
60-
<img alt="Image of log tree" src="img/doc/log-tree.png">
61-
62-
<h4>Commit</h4>
63-
<p>Commits can only be made from localhost.</p>
64-
<img alt="Image of the workspace" src="img/doc/workspace.png"><br>
55+
<hr>
56+
<h5>Overview</h5><br/>
57+
<img class="img-fluid" alt="Image of the Commit History View" src="img/doc/commit-history.png"><br>
58+
<p> The commit history view of the WebUI is comprised of three parts.
59+
<ol>
60+
<li>
61+
The sidebar contains navigation links to the Workspace, Stash and Settings. It also shows all the refs and tags in the repository.
62+
</li>
63+
<li>
64+
The left panel displays the commit history of the current branch by default. Click on a different branch on the sidebar to view its commit history.
65+
</li>
66+
<li>
67+
The right panel of the screen displays the diff of the latest commit of the selected or current branch.
68+
Select a different commit from the left panel to view its details.
69+
</li>
70+
</ol>
71+
</p>
72+
<h5>Tree View and Commit View</h5><br/>
73+
<!-- <img class="img-fluid" alt="Image of the Explore button in the Commit View of the Commit History" src="img/doc/commit-history-explore.png"><br> -->
74+
<img class="img-fluid" alt="Image of the Commit Explorer View of the Commit History" src="img/doc/commit-explorer.png"><br>
75+
<p> To see the commit in more detail, you can click the Explore button in the top-right corner to go to the Commit Explorer View.
76+
</p>
77+
<br/>
78+
<img class="img-fluid" alt="Image of the Tree View of the Commit History" src="img/doc/commit-history-tree-view.png"><br>
79+
<p>
80+
On top of the right panel in the Commit History View, you can choose 'Tree' to display the contents of the repository folder at the specific
81+
revision selected in the left panel. You can browse through directories and display file contents.
82+
</p>
83+
<h4>Workspace</h4>
84+
<img class="img-fluid" alt="Image of the workspace" src="img/doc/workspace.png"><br>
6585
<ul>
6686
<li><strong>Working copy</strong> lists the modified files (compared to the staging area) in your working directory</li>
87+
<ul>
88+
<li>
89+
<strong>Stage</strong>: Stages the selected changes for a commit.
90+
</li>
91+
<li>
92+
<strong>Stash</strong>: Stashes the selected changes.
93+
</li>
94+
<li>
95+
<strong>Cancel</strong>: Discards the selected changes.
96+
</li>
97+
</ul>
6798
<li><strong>Message</strong> lets you enter a commit message</li>
6899
<li><strong>Staging area</strong> lists the modified files (compared to HEAD) in your staging area. These are the changes that will be committed</li>
69100
</ul>
@@ -75,6 +106,33 @@ <h4>Commit</h4>
75106
<li>If the displayed diff is from the working copy, you may stage or cancel the selected lines.</li>
76107
<li>If the displayed diff is from the staging area, you may unstage the selected lines.</li>
77108
</ul>
109+
<h4>Stash</h4>
110+
<img class="img-fluid" alt="Image of the Stash" src="img/doc/stash.png"><br>
111+
This tab shows all stashed changes and lets the user explore the changes in the Diff View in the right panel.
112+
<ul>
113+
<li><strong>Apply</strong> applies the selected stashed changes to the current branch. Changes will not be removed from the stash after applying them.</li>
114+
<li><strong>Pop</strong> applies the selected changes and removes the commit from the stash.</li>
115+
<li><strong>Drop</strong> removes the selected stashed changes without applying them.</li>
116+
</ul>
117+
<h4>Branch Operations</h4>
118+
<img class="img-fluid" alt="Image of Branch Operations" src="img/doc/branch-operations.png"><br>
119+
<ul>
120+
<li>
121+
<strong>New Local Branch</strong>: Click the plus icon and enter the name of your branch in the text-box to create a new local branch from the current branch.
122+
</li>
123+
<li>
124+
<strong>Checkout Branch</strong>: Switch to an exisiting local or remote branch. Note that this will carry over any uncommitted changes to the new branch.
125+
</li>
126+
<li>
127+
<strong>Merge Branch</strong>: Incorporate changes from the selected local or remote branch into the current branch from the time their histories diverged.
128+
</li>
129+
<li>
130+
<strong>Delete Local Branch</strong>: Delete a local branch with the option to force delete it even if it is not fully merged.
131+
</li>
132+
<li>
133+
<strong>Prune Remote Branches</strong>: Click the refresh icon to prune stale refs to deleted remote branches.
134+
</li>
135+
</ul>
78136
<h4>License</h4>
79137
This software is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0.html" target="_blank">Apache 2.0</a> license
80138
</div>

0 commit comments

Comments
 (0)