Skip to content

Commit ddae26a

Browse files
devvaannshdevvaannsh
committed
refactor: update the styling of the custom snippet list
1 parent f4d8b78 commit ddae26a

File tree

3 files changed

+321
-65
lines changed

3 files changed

+321
-65
lines changed

‎src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html‎

Lines changed: 53 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<div id="custom-snippets-panel" class="custom-snippets-panel bottom-panel vert-resizable top-resizer no-focus">
22
<!--the toolbar at the top-->
33
<div id="custom-snippets-toolbar" class="custom-snippets-toolbar">
4-
<div class="custom-snippets-btn-group right">
4+
<div class="toolbar-left-section">
5+
<div class="toolbar-title">Custom Snippets <span id="snippets-count" class="snippets-count"></span></div>
56
<div id="add-new-snippet-btn" class="custom-snippet-btn">
67
<button title="Add new snippet">
78
<i class="fas fa-plus"></i>
@@ -13,70 +14,70 @@
1314
</button>
1415
</div>
1516
</div>
16-
<div class="custom-snippets-btn-group left">
17-
<div id="close-custom-snippets-panel-btn">
18-
<button><i class="fas fa-times"></i></button>
19-
</div>
17+
<div id="close-custom-snippets-panel-btn">
18+
<button><i class="fas fa-times"></i></button>
2019
</div>
2120
</div>
2221

23-
<!--this will display the list of all the already existing snippets-->
24-
<div id="custom-snippets-list" class="custom-snippes-list">
25-
<div id="no-snippets-wrapper" class="no-snippets-wrapper">
26-
<div id="no-snippets-message">No custom snippets added yet!</div>
27-
<div id="add-snippet-btn">
28-
<button>Add Snippet</button>
22+
<div class="resizable-content">
23+
<!--this will display the list of all the already existing snippets-->
24+
<div id="custom-snippets-list" class="custom-snippes-list">
25+
<div id="no-snippets-wrapper" class="no-snippets-wrapper">
26+
<div id="no-snippets-message">No custom snippets added yet!</div>
27+
<div id="add-snippet-btn">
28+
<button>Add Snippet</button>
29+
</div>
2930
</div>
30-
</div>
3131

32-
<div id="snippets-list-wrapper" class="snippets-list-wrapper hidden">
33-
<!--leaving here for format reference-->
34-
<!--
35-
<div id="snippet-item">
36-
<div id="snippet-abbr">
37-
clg
38-
</div>
39-
<div id="snippet-template">
40-
console.log()
41-
</div>
42-
<div id="snippet-description">
43-
console log shortcut
44-
</div>
45-
<div id="snippet-files">
46-
all
47-
</div>
48-
<div id="delete-snippet-btn" class="delete-snippet-btn">
49-
<i class="fas fa-trash"></i>
32+
<div id="snippets-list-wrapper" class="snippets-list-wrapper hidden">
33+
<!--leaving here for format reference-->
34+
<!--
35+
<div id="snippet-item">
36+
<div id="snippet-abbr">
37+
clg
38+
</div>
39+
<div id="snippet-template">
40+
console.log()
41+
</div>
42+
<div id="snippet-description">
43+
console log shortcut
44+
</div>
45+
<div id="snippet-files">
46+
all
47+
</div>
48+
<div id="delete-snippet-btn" class="delete-snippet-btn">
49+
<i class="fas fa-trash"></i>
50+
</div>
5051
</div>
52+
-->
5153
</div>
52-
-->
5354
</div>
54-
</div>
5555

56-
<!--this view will open up when user clicks on add a new snippet button-->
57-
<div id="custom-snippets-add-new" class="custom-snippets-add-new hidden">
58-
<div id="abbr-box-wrapper">
59-
<label for="abbr-box">Abbreviation: </label>
60-
<input id="abbr-box" type="text" placeholder="clg" autocomplete="off" />
61-
</div>
56+
<!--this view will open up when user clicks on add a new snippet button-->
57+
<div id="custom-snippets-add-new" class="custom-snippets-add-new hidden">
58+
<div id="abbr-box-wrapper">
59+
<label for="abbr-box">Abbreviation: </label>
60+
<input id="abbr-box" type="text" placeholder="clg" autocomplete="off" />
61+
</div>
6262

63-
<div id="desc-box-wrapper">
64-
<label for="desc-box">Description: </label>
65-
<input id="desc-box" type="text" placeholder="console log shortcut" autocomplete="off" />
66-
</div>
63+
<div id="desc-box-wrapper">
64+
<label for="desc-box">Description: </label>
65+
<input id="desc-box" type="text" placeholder="console log shortcut" autocomplete="off" />
66+
</div>
6767

68-
<div id="template-text-box-wrapper">
69-
<label for="template-text-box">Template Text: </label>
70-
<textarea id="template-text-box" placeholder="console.log();" autocomplete="off"></textarea>
71-
</div>
68+
<div id="template-text-box-wrapper">
69+
<label for="template-text-box">Template Text: </label>
70+
<textarea id="template-text-box" placeholder="console.log();" autocomplete="off"></textarea>
71+
</div>
7272

73-
<div id="file-extn-box-wrapper">
74-
<label for="file-extn-box">File Extension: </label>
75-
<input id="file-extn-box" type="text" placeholder=".js, .html or all" autocomplete="off" />
76-
</div>
73+
<div id="file-extn-box-wrapper">
74+
<label for="file-extn-box">File Extension: </label>
75+
<input id="file-extn-box" type="text" placeholder=".js, .html or all" autocomplete="off" />
76+
</div>
7777

78-
<div id="save-custom-snippet-btn">
79-
<button disabled>Save</button>
78+
<div id="save-custom-snippet-btn">
79+
<button disabled>Save</button>
80+
</div>
8081
</div>
8182
</div>
8283
</div>

‎src/extensionsIntegrated/CustomSnippets/src/snippetsList.js‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,25 @@ define(function (require, exports, module) {
2121
// all the items like abbr, description and all that will be appended into this
2222
const $snippetItem = $("<div>").attr("data-abbr", snippetItem.abbreviation).attr("id", "snippet-item");
2323

24-
const $snippetAbbr = $("<div>").text(snippetItem.abbreviation).attr("id", "snippet-abbr");
24+
const $snippetAbbr = $("<div>")
25+
.text(snippetItem.abbreviation)
26+
.attr("id", "snippet-abbr")
27+
.attr("title", `Abbreviation: ${snippetItem.abbreviation}`);
2528

26-
const $snippetTemplate = $("<div>").text(snippetItem.templateText).attr("id", "snippet-template");
29+
const $snippetTemplate = $("<div>")
30+
.text(snippetItem.templateText)
31+
.attr("id", "snippet-template")
32+
.attr("title", `Template: ${snippetItem.templateText}`);
2733

2834
const $snippetDescription = $("<div>")
2935
.text(snippetItem.description || "No description")
30-
.attr("id", "snippet-description");
36+
.attr("id", "snippet-description")
37+
.attr("title", `Description: ${snippetItem.description}`);
3138

3239
const $snippetFiles = $("<div>")
3340
.text(snippetItem.fileExtension || "all")
34-
.attr("id", "snippet-files");
41+
.attr("id", "snippet-files")
42+
.attr("title", `File extensions: ${snippetItem.fileExtension}`);
3543

3644
const $deleteSnippet = $("<div>")
3745
.html(`<i class="fas fa-trash"></i>`)
@@ -48,6 +56,20 @@ define(function (require, exports, module) {
4856
_registerHandlers();
4957
}
5058

59+
/**
60+
* Updates the snippets count which is displayed in the toolbar at the left side
61+
* @private
62+
*/
63+
function _updateSnippetsCount() {
64+
const count = Global.SnippetHintsList.length;
65+
const $countSpan = $("#snippets-count");
66+
if (count > 0) {
67+
$countSpan.text(`(${count})`);
68+
} else {
69+
$countSpan.text("");
70+
}
71+
}
72+
5173
/**
5274
* This function is called when the user clicks on the custom snippets button from the file menu
5375
* this also gets called when user clicks on the 'back' button to move back to the snippets list menu
@@ -57,6 +79,8 @@ define(function (require, exports, module) {
5779
UIHelper.clearSnippetsList(); // to clear existing snippets list, as we'll rebuild it
5880
const snippetList = Global.SnippetHintsList; // gets the list of the snippets, this is an array of objects
5981

82+
_updateSnippetsCount();
83+
6084
// if there are no snippets available, we show the message that no snippets are present
6185
// refer to html file
6286
if (snippetList.length === 0) {
@@ -89,6 +113,8 @@ define(function (require, exports, module) {
89113
// save to preferences after deleting snippet
90114
SnippetsState.saveSnippetsToState();
91115

116+
_updateSnippetsCount();
117+
92118
// if snippetHintsList is now empty we need to show the empty snippet message
93119
if (Global.SnippetHintsList.length === 0) {
94120
UIHelper.showEmptySnippetMessage();

0 commit comments

Comments
 (0)