Skip to content

Commit 44b695a

Browse files
devvaannshabose
devvaannsh
authored and
abose
committed
refactor: add snippet and edit snippet panel UI
1 parent 2dd2857 commit 44b695a

File tree

2 files changed

+107
-160
lines changed

2 files changed

+107
-160
lines changed

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

Lines changed: 46 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -67,89 +67,85 @@
6767

6868
<!--this view will open up when user clicks on add a new snippet button-->
6969
<div id="custom-snippets-add-new" class="custom-snippets-add-new hidden">
70-
<div class="form-row">
71-
<div id="abbr-box-wrapper">
72-
<label for="abbr-box"
73-
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
74-
data-placement="top">
75-
Abbreviation:
76-
</label>
77-
<input id="abbr-box" type="text" placeholder="clg" autocomplete="off" />
78-
</div>
79-
80-
<div id="desc-box-wrapper">
81-
<label for="desc-box"
82-
title="Brief description of what this snippet does. Leave empty if no description needed."
83-
data-placement="top">
84-
Description (optional):
85-
</label>
86-
<input id="desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
87-
</div>
70+
<div id="abbr-box-wrapper" class="field-wrapper">
71+
<label for="abbr-box"
72+
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
73+
data-placement="top">
74+
Abbreviation:
75+
</label>
76+
<input id="abbr-box" type="text" placeholder="clg" autocomplete="off" />
8877
</div>
8978

90-
<div id="template-text-box-wrapper">
91-
<label for="template-text-box"
92-
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
79+
<div id="desc-box-wrapper" class="field-wrapper">
80+
<label for="desc-box"
81+
title="Brief description of what this snippet does. Leave empty if no description needed."
9382
data-placement="top">
94-
Template Text:
83+
Description:
9584
</label>
96-
<textarea id="template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
85+
<input id="desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
9786
</div>
9887

99-
<div id="file-extn-box-wrapper">
88+
<div id="file-extn-box-wrapper" class="field-wrapper">
10089
<label for="file-extn-box"
10190
title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css'). Leave empty to make it available for all files."
10291
data-placement="top">
103-
File Extension (optional):
92+
File Extension:
10493
</label>
10594
<input id="file-extn-box" type="text" placeholder="Leave empty for all files, or specify like .js, .html" autocomplete="off" />
10695
</div>
10796

97+
<div id="template-text-box-wrapper" class="field-wrapper">
98+
<label for="template-text-box"
99+
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
100+
data-placement="top">
101+
Template Text:
102+
</label>
103+
<textarea id="template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
104+
</div>
105+
108106
<div id="save-custom-snippet-btn">
109107
<button class="dialog-button btn primary" disabled>Save</button>
110108
</div>
111109
</div>
112110

113111
<!--this view will open up when user clicks on a snippet item to edit it-->
114112
<div id="custom-snippets-edit" class="custom-snippets-edit hidden">
115-
<div class="form-row">
116-
<div id="edit-abbr-box-wrapper">
117-
<label for="edit-abbr-box"
118-
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
119-
data-placement="top">
120-
Abbreviation:
121-
</label>
122-
<input id="edit-abbr-box" type="text" placeholder="clg" autocomplete="off" />
123-
</div>
124-
125-
<div id="edit-desc-box-wrapper">
126-
<label for="edit-desc-box"
127-
title="Brief description of what this snippet does. Leave empty if no description needed."
128-
data-placement="top">
129-
Description (optional):
130-
</label>
131-
<input id="edit-desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
132-
</div>
113+
<div id="edit-abbr-box-wrapper" class="field-wrapper">
114+
<label for="edit-abbr-box"
115+
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
116+
data-placement="top">
117+
Abbreviation:
118+
</label>
119+
<input id="edit-abbr-box" type="text" placeholder="clg" autocomplete="off" />
133120
</div>
134121

135-
<div id="edit-template-text-box-wrapper">
136-
<label for="edit-template-text-box"
137-
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
122+
<div id="edit-desc-box-wrapper" class="field-wrapper">
123+
<label for="edit-desc-box"
124+
title="Brief description of what this snippet does. Leave empty if no description needed."
138125
data-placement="top">
139-
Template Text:
126+
Description:
140127
</label>
141-
<textarea id="edit-template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
128+
<input id="edit-desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
142129
</div>
143130

144-
<div id="edit-file-extn-box-wrapper">
131+
<div id="edit-file-extn-box-wrapper" class="field-wrapper">
145132
<label for="edit-file-extn-box"
146133
title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css'). Leave empty to make it available for all files."
147134
data-placement="top">
148-
File Extension (optional):
135+
File Extension:
149136
</label>
150137
<input id="edit-file-extn-box" type="text" placeholder="Leave empty for all files, or specify like .js, .html" autocomplete="off" />
151138
</div>
152139

140+
<div id="edit-template-text-box-wrapper" class="field-wrapper">
141+
<label for="edit-template-text-box"
142+
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
143+
data-placement="top">
144+
Template Text:
145+
</label>
146+
<textarea id="edit-template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
147+
</div>
148+
153149
<div id="edit-snippet-buttons">
154150
<button id="reset-snippet-btn" class="dialog-button btn">Reset</button>
155151
<button id="save-edit-snippet-btn" class="dialog-button btn primary" disabled>Save</button>

0 commit comments

Comments
 (0)